Adicionar detecção de live para YouTube e ajustar controles de reprodução com base na largura do container

Author: ALEXFSX

src/components/StreamPanel.tsx

@@ -95,6 +95,7 @@ export const StreamPanel = memo(function StreamPanel({
   const [isSeeking, setIsSeeking] = useState(false);
   const [willWrap, setWillWrap] = useState(false);
   const [animatedDisplayVolume, setAnimatedDisplayVolume] = useState(stream.volume);
+  const [containerWidth, setContainerWidth] = useState<number>(999); // Inicializa com valor alto para mostrar controles até calcular
   const containerRef = useRef<HTMLDivElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const twitchEmbedRef = useRef<HTMLDivElement>(null);
@@ -121,7 +122,13 @@ export const StreamPanel = memo(function StreamPanel({
     setCurrentTime(0);
     lastDurationRef.current = 0;
     durationIncreaseCountRef.current = 0;
-  }, [stream.id, stream.channelId]);
+    
+    // Se for um canal do YouTube (isChannel), assume que é live por padrão
+    // A URL nesse caso usa /live_stream que sempre aponta para live ativa
+    if (stream.platform === 'youtube' && stream.isChannel) {
+      setIsLive(true);
+    }
+  }, [stream.id, stream.channelId, stream.platform, stream.isChannel]);
 
   // Fecha chat automaticamente se for YouTube e não for live
   useEffect(() => {
@@ -245,6 +252,27 @@ export const StreamPanel = memo(function StreamPanel({
     };
   }, []);
 
+  // Monitora a largura do container baseado na porcentagem
+  useEffect(() => {
+    const updateWidth = () => {
+      // 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);
+    };
+
+    // Atualiza largura inicial
+    updateWidth();
+
+    // Atualiza na mudança de tamanho da janela
+    window.addEventListener('resize', updateWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateWidth);
+    };
+  }, [stream.width, stream.title]);
+
   // Inicializa Twitch Embed quando plataforma for Twitch
   useEffect(() => {
     if (stream.platform !== 'twitch' || !twitchEmbedRef.current) return;
@@ -466,19 +494,26 @@ export const StreamPanel = memo(function StreamPanel({
 
             // Detecta se é uma transmissão ao vivo
             // Lives do YouTube têm duração que aumenta continuamente
-            if (newDuration > lastDurationRef.current && newDuration > 60) {
+            if (newDuration > lastDurationRef.current && newDuration > 0) {
               // Incrementa contador de aumentos consecutivos
               durationIncreaseCountRef.current += 1;
 
-              // Só considera live se a duração aumentou múltiplas vezes (3+)
-              // Isso evita falsos positivos com vídeos carregando
-              if (durationIncreaseCountRef.current >= 3) {
+              // Detecção mais agressiva de live:
+              // 1. Se a duração aumentou pelo menos 2 vezes (mais rápido que antes)
+              // 2. OU se a diferença entre currentTime e duration é pequena (indica live)
+              // 3. OU se a duração é muito alta (>= 12h pode indicar live longa ou VOD de live)
+              const timeDiff = newDuration - (data.info.currentTime || 0);
+              const isProbablyLive = durationIncreaseCountRef.current >= 2 || 
+                                      (timeDiff > 0 && timeDiff < 30 && newDuration > 60) ||
+                                      newDuration >= 43200; // 12 horas
+              
+              if (isProbablyLive) {
                 setIsLive(true);
               }
-            } else if (newDuration === lastDurationRef.current) {
-              // Duração parou de crescer - provavelmente não é live
-              // Ou a live acabou
-              if (durationIncreaseCountRef.current < 3) {
+            } else if (newDuration === lastDurationRef.current && newDuration > 0) {
+              // Duração parou de crescer
+              // Só marca como não-live se teve poucas aumentos E não é uma duração muito alta
+              if (durationIncreaseCountRef.current < 2 && newDuration < 43200) {
                 setIsLive(false);
               }
             }
@@ -498,6 +533,14 @@ export const StreamPanel = memo(function StreamPanel({
           }
         }
 
+        // Resposta de getVideoData para detectar live
+        if (typeof data === 'object' && data.method === 'getVideoData' && data.value) {
+          // YouTube retorna isLive no videoData quando disponível
+          if (data.value.isLive !== undefined) {
+            setIsLive(data.value.isLive);
+          }
+        }
+        
         // Resposta direta de getCurrentTime - só atualiza se não estiver fazendo seek e se o valor for maior ou igual ao atual
         if (typeof data === 'object' && data.method === 'getCurrentTime' && !isSeeking && (data.value || 0) >= currentTime) {
           setCurrentTime(data.value || 0);
@@ -558,6 +601,14 @@ export const StreamPanel = memo(function StreamPanel({
           args: []
         };
         iframeRef.current.contentWindow?.postMessage(JSON.stringify(durationMessage), '*');
+        
+        // Requisita videoData para detectar live de forma mais precisa
+        const videoDataMessage = {
+          event: 'command',
+          func: 'getVideoData',
+          args: []
+        };
+        iframeRef.current.contentWindow?.postMessage(JSON.stringify(videoDataMessage), '*');
       }
     }, 500); // Atualiza a cada 500ms para resposta mais rápida
 
@@ -1141,15 +1192,18 @@ export const StreamPanel = memo(function StreamPanel({
               {/* Controles de reprodução (apenas para YouTube) */}
               {stream.platform === 'youtube' && (
                 <>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={skipBackward}
-                    title="Retroceder 10s (←)"
-                  >
-                    <SkipBack className="h-4 w-4" />
-                  </Button>
+                  {/* Botões de skip - ocultos em largura < 300px */}
+                  {containerWidth >= 400 && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={skipBackward}
+                      title="Retroceder 10s (←)"
+                    >
+                      <SkipBack className="h-4 w-4" />
+                    </Button>
+                  )}
                   <Button
                     variant="ghost"
                     size="icon"
@@ -1163,27 +1217,35 @@ export const StreamPanel = memo(function StreamPanel({
                       <Play className="h-4 w-4" />
                     )}
                   </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={skipForward}
-                    title="Avançar 10s (→)"
-                  >
-                    <SkipForward className="h-4 w-4" />
-                  </Button>
+                  {/* Botões de skip - ocultos em largura < 400px */}
+                  {containerWidth >= 400 && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={skipForward}
+                      title="Avançar 10s (→)"
+                    >
+                      <SkipForward className="h-4 w-4" />
+                    </Button>
+                  )}
 
                   {/* Botão "Ao Vivo" quando estiver atrasado */}
                   {isLive && isBehindLive && (
                     <Button
                       variant="default"
-                      size="sm"
-                      className="h-7 px-2 ml-1 bg-red-600 hover:bg-red-700 text-white"
+                      size={containerWidth < 400 ? "icon" : "sm"}
+                      className={cn(
+                        "ml-1 bg-red-600 hover:bg-red-700 text-white",
+                        containerWidth < 400 ? "h-7 w-7 px-0" : "h-7 px-2"
+                      )}
                       onClick={goToLive}
                       title="Voltar ao ao vivo"
                     >
-                      <Radio className="h-3 w-3 mr-1" />
-                      <span className="text-xs font-bold">AO VIVO</span>
+                      <Radio className={containerWidth < 400 ? "h-3 w-3" : "h-3 w-3 mr-1"} />
+                      {containerWidth >= 400 && (
+                        <span className="text-xs font-bold">AO VIVO</span>
+                      )}
                     </Button>
                   )}
                 </>