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,37 +142,47 @@ export default function VideoPlayer({
       hls.loadSource(url);
       hls.attachMedia(video);
 
-      if (socket) {
-        socket.on('request-segment', (data) => {
-          const segment = segmentCache.current.get(data.segmentUrl);
-          if (segment) {
-            socket.emit('segment-response', {
-              to: data.from,
-              segmentUrl: data.segmentUrl,
-              data: Array.from(new Uint8Array(segment))
-            });
-          }
-        });
-      }
-
       return () => {
-        if (socket) socket.off('request-segment');
         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, socket]);
+  }, [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', {
+          to: data.from,
+          segmentUrl: data.segmentUrl,
+          data: Array.from(new Uint8Array(segment))
+        });
+      }
+    };
+
+    socket.on('request-segment', handleRequestSegment);
+
+    return () => {
+      socket.off('request-segment', handleRequestSegment);
+    };
+  }, [socket]);
 
   return (
     <div className="relative w-full">