Adicionar funcionalidade de compartilhamento de streams via URL e otimizar carregamento de streams da URL

Author: ALEXFSX

src/components/StreamPanel.tsx

@@ -258,7 +258,6 @@ export const StreamPanel = memo(function StreamPanel({
       // Calcula largura real em pixels baseado na porcentagem do stream
       const viewportWidth = window.innerWidth;
       const calculatedWidth = (viewportWidth * stream.width) / 100;
-      console.log('Container width:', calculatedWidth, 'Stream:', stream.title, 'Percentage:', stream.width);
       setContainerWidth(calculatedWidth);
     };
 

src/hooks/useStreams.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { Stream, Platform, AppSettings } from "@/types/stream";
 import { toast } from "sonner";
+import { getStreamsFromCurrentUrl } from "@/lib/shareUtils";
 
 const STORAGE_KEY_STREAMS = "multistream-streams";
 const STORAGE_KEY_SETTINGS = "multistream-settings";
@@ -14,9 +15,21 @@ function generateUUID() {
   }));
 }
 
-// Carrega streams do localStorage
+// Carrega streams do localStorage ou da URL compartilhada
 function loadStreams(): Stream[] {
   try {
+    // Primeiro, verifica se há streams na URL (prioridade)
+    const urlStreams = getStreamsFromCurrentUrl();
+    if (urlStreams && urlStreams.length > 0) {
+      console.log('Carregando streams da URL compartilhada:', urlStreams.length);
+      // Limpa o hash da URL após carregar
+      if (window.history.replaceState) {
+        window.history.replaceState(null, '', window.location.pathname + window.location.search);
+      }
+      return urlStreams;
+    }
+    
+    // Se não há streams na URL, carrega do localStorage
     const saved = localStorage.getItem(STORAGE_KEY_STREAMS);
     if (!saved) return [];
 

src/lib/shareUtils.ts

@@ -0,0 +1,106 @@
+import { Stream } from "@/types/stream";
+
+// Dados mínimos para compartilhamento
+interface ShareableStream {
+  p: string; // platform
+  c: string; // channelId
+  t: string; // title
+  m?: boolean; // isMain
+  ch?: boolean; // showChat
+  w?: number; // width
+  h?: number; // height
+  v?: number; // volume
+  ic?: boolean; // isChannel
+}
+
+/**
+ * Codifica as streams em uma string compacta para compartilhamento via URL
+ */
+export function encodeStreamsToUrl(streams: Stream[]): string {
+  if (streams.length === 0) return '';
+  
+  const shareableStreams: ShareableStream[] = streams.map(stream => {
+    const shareable: ShareableStream = {
+      p: stream.platform,
+      c: stream.channelId,
+      t: stream.title,
+    };
+    
+    // Só adiciona propriedades não-padrão para economizar espaço
+    if (stream.isMain) shareable.m = true;
+    if (stream.showChat) shareable.ch = true;
+    if (stream.width !== 50) shareable.w = Math.round(stream.width * 100) / 100; // 2 decimais
+    if (stream.height !== 400) shareable.h = stream.height;
+    if (stream.volume !== 100) shareable.v = stream.volume;
+    if (stream.isChannel) shareable.ic = true;
+    
+    return shareable;
+  });
+  
+  // Converte para JSON e comprime com base64
+  const json = JSON.stringify(shareableStreams);
+  const compressed = btoa(encodeURIComponent(json));
+  
+  return compressed;
+}
+
+/**
+ * Decodifica streams de uma URL compartilhada
+ */
+export function decodeStreamsFromUrl(encoded: string): Stream[] {
+  if (!encoded) return [];
+  
+  try {
+    // Decodifica de base64
+    const json = decodeURIComponent(atob(encoded));
+    const shareableStreams: ShareableStream[] = JSON.parse(json);
+    
+    // Converte de volta para formato completo
+    const streams: Stream[] = shareableStreams.map((shareable, index) => ({
+      id: `stream-${Date.now()}-${index}`,
+      platform: shareable.p as any,
+      channelId: shareable.c,
+      title: shareable.t,
+      isMain: shareable.m || false,
+      showChat: shareable.ch || false,
+      width: shareable.w ?? 50,
+      height: shareable.h ?? 400,
+      volume: shareable.v ?? 100,
+      isChannel: shareable.ic || false,
+    }));
+    
+    return streams;
+  } catch (error) {
+    console.error('Erro ao decodificar streams da URL:', error);
+    return [];
+  }
+}
+
+/**
+ * Gera URL completa para compartilhamento
+ */
+export function generateShareUrl(streams: Stream[]): string {
+  const encoded = encodeStreamsToUrl(streams);
+  if (!encoded) return window.location.origin;
+  
+  const url = new URL(window.location.origin);
+  url.hash = `streams=${encoded}`;
+  
+  return url.toString();
+}
+
+/**
+ * Extrai streams da URL atual
+ */
+export function getStreamsFromCurrentUrl(): Stream[] | null {
+  const hash = window.location.hash;
+  if (!hash) return null;
+  
+  // Remove o # e extrai o parâmetro streams
+  const params = hash.substring(1);
+  const match = params.match(/streams=([^&]+)/);
+  
+  if (!match) return null;
+  
+  return decodeStreamsFromUrl(match[1]);
+}

src/pages/Index.tsx

@@ -6,7 +6,9 @@ import { SettingsTooltip } from "@/components/SettingsTooltip";
 import { KeyboardShortcutsDialog } from "@/components/KeyboardShortcutsDialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Monitor, Maximize, Minimize, Headphones } from "lucide-react";
+import { Monitor, Maximize, Minimize, Headphones, Share2 } from "lucide-react";
+import { generateShareUrl } from "@/lib/shareUtils";
+import { toast } from "sonner";
 
 const Index = () => {
   const {
@@ -70,6 +72,24 @@ const Index = () => {
     }
   }, [isFullscreen]);
 
+  const handleShare = useCallback(async () => {
+    if (streams.length === 0) {
+      toast.error('Adicione pelo menos uma stream para compartilhar');
+      return;
+    }
+
+    try {
+      const shareUrl = generateShareUrl(streams);
+      
+      // Copia para clipboard
+      await navigator.clipboard.writeText(shareUrl);
+      toast.success('Link copiado para a área de transferência!');
+    } catch (error) {
+      console.error('Erro ao copiar link:', error);
+      toast.error('Erro ao copiar link');
+    }
+  }, [streams]);
+
   // Detectar quando o usuário sai da tela cheia usando ESC
   useEffect(() => {
     const handleFullscreenChange = () => {
@@ -233,6 +253,15 @@ const Index = () => {
         </div>
         <div className="flex items-center gap-2">
           <KeyboardShortcutsDialog open={showShortcuts} onOpenChange={setShowShortcuts} />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleShare}
+            disabled={streams.length === 0}
+            title="Compartilhar configuração de streams"
+          >
+            <Share2 className="h-4 w-4" />
+          </Button>
           <Button
             variant="ghost"
             size="icon"