fix player reload

Signed-off-by: ale <ale@manalejandro.com>

src/app/page.js

@@ -520,7 +520,6 @@ export default function Home() {
               ) : (
                 // Modo normal: video propio
                 <VideoPlayer 
-                  key={videoUrl}
                   url={videoUrl} 
                   onStats={handleVideoStats}
                   socket={socket}

src/components/VideoPlayer.js

@@ -16,6 +16,7 @@ export default function VideoPlayer({
   const hlsRef = useRef(null);
   const [error, setError] = useState(null);
   const isInitializedRef = useRef(false);
+  const currentUrlRef = useRef(null);
   const segmentCache = useRef(new Map());
   const canvasRef = useRef(null);
   const thumbnailIntervalRef = useRef(null);
@@ -82,10 +83,25 @@ export default function VideoPlayer({
   }, [socket, username, isRemoteStream]);
 
   useEffect(() => {
-    if (isInitializedRef.current) return;
     if (!url || !videoRef.current || isRemoteStream) return;
 
+    // Si la URL cambió, necesitamos reiniciar
+    const urlChanged = currentUrlRef.current && currentUrlRef.current !== url;
+    
+    if (urlChanged) {
+      console.log('📺 URL cambió, recargando video...', url);
+      isInitializedRef.current = false;
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+      segmentCache.current.clear();
+    }
+
+    if (isInitializedRef.current && !urlChanged) return;
+
     isInitializedRef.current = true;
+    currentUrlRef.current = url;
 
     const video = videoRef.current;
 
@@ -126,8 +142,31 @@ export default function VideoPlayer({
       hls.loadSource(url);
       hls.attachMedia(video);
 
-      if (socket) {
+      return () => {
-        socket.on('request-segment', (data) => {
+        if (hlsRef.current) {
+          hlsRef.current.destroy();
+          hlsRef.current = null;
+        }
+        segmentCache.current.clear();
+        isInitializedRef.current = false;
+        currentUrlRef.current = null;
+      };
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = url;
+      return () => {
+        isInitializedRef.current = false;
+        currentUrlRef.current = null;
+      };
+    } else {
+      setError('Tu navegador no soporta HLS');
+    }
+  }, [url, isRemoteStream]);
+
+  // Efecto separado para manejar eventos del socket (no reinicia el player)
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleRequestSegment = (data) => {
       const segment = segmentCache.current.get(data.segmentUrl);
       if (segment) {
         socket.emit('segment-response', {
@@ -136,27 +175,14 @@ export default function VideoPlayer({
           data: Array.from(new Uint8Array(segment))
         });
       }
-        });
+    };
-      }
+
+    socket.on('request-segment', handleRequestSegment);
 
     return () => {
-        if (socket) socket.off('request-segment');
+      socket.off('request-segment', handleRequestSegment);
-        if (hlsRef.current) {
-          hlsRef.current.destroy();
-          hlsRef.current = null;
-        }
-        segmentCache.current.clear();
-        isInitializedRef.current = false;
     };
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+  }, [socket]);
-      video.src = url;
-      return () => {
-        isInitializedRef.current = false;
-      };
-    } else {
-      setError('Tu navegador no soporta HLS');
-    }
-  }, [url, socket]);
 
   return (
     <div className="relative w-full">