Update cointube.jsx

cointube.jsx

@@ -42,8 +42,11 @@ export default function App() {
     const [authReady, setAuthReady] = useState(false);
     const [userProfile, setUserProfile] = useState(null);
     const [currentTab, setCurrentTab] = useState('ganar');
-    const [currentVideoId, setCurrentVideoId] = useState(DEFAULT_VIDEO_ID);
-    const [currentVideoTitle, setCurrentVideoTitle] = useState(DEFAULT_VIDEO_TITLE);
+    
+    // CAMBIO 1: Iniciamos en null para no mostrar el default mientras carga
+    const [currentVideoId, setCurrentVideoId] = useState(null);
+    const [currentVideoTitle, setCurrentVideoTitle] = useState(null);
+    
     const [ytApiReady, setYtApiReady] = useState(false);
     
     const playerRef = useRef(null);
@@ -111,23 +114,32 @@ export default function App() {
 
     useEffect(() => {
         if (!firebaseReady || !db) return;
+        // La consulta ya ordena por fecha descendente (el más nuevo primero)
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(50));
         const unsubscribe = onSnapshot(q, (snapshot) => {
             const fetchedVideos = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+            
             if (fetchedVideos.length > 0) {
                 setVideos(fetchedVideos);
-                if (initialLoadRef.current) {
+                // CAMBIO 2: Si es la carga inicial O si no hay video seleccionado aún
+                if (initialLoadRef.current || !currentVideoId) {
                     const latestVideo = fetchedVideos[0];
                     setCurrentVideoId(latestVideo.videoId);
                     setCurrentVideoTitle(latestVideo.title);
                     initialLoadRef.current = false;
                 }
             } else {
-                setVideos([{ id: '1', title: 'Pelicula Default', videoId: DEFAULT_VIDEO_ID }]);
+                // Solo usamos el default si NO hay videos en la base de datos
+                setVideos([{ id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }]);
+                if (initialLoadRef.current || !currentVideoId) {
+                    setCurrentVideoId(DEFAULT_VIDEO_ID);
+                    setCurrentVideoTitle(DEFAULT_VIDEO_TITLE);
+                    initialLoadRef.current = false;
+                }
             }
         });
         return () => unsubscribe();
-    }, [firebaseReady]);
+    }, [firebaseReady, currentVideoId]); // Agregamos currentVideoId a dependencias para el chequeo de seguridad
 
     useEffect(() => {
         if (!firebaseReady || !db) return;
@@ -202,7 +214,8 @@ export default function App() {
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
     useEffect(() => {
-        if (ytApiReady && userId && !playerRef.current) {
+        // CAMBIO 3: Aseguramos que currentVideoId exista antes de inicializar el player
+        if (ytApiReady && userId && !playerRef.current && currentVideoId) {
             playerRef.current = new window.YT.Player('player', {
                 height: '100%',
                 width: '100%',
@@ -370,11 +383,16 @@ export default function App() {
 
             <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6`}>
                 <div className="lg:w-2/3">
-                    <div className="aspect-video bg-black rounded-lg overflow-hidden shadow-xl">
-                        <div id="player" className="w-full h-full"></div>
+                    <div className="aspect-video bg-black rounded-lg overflow-hidden shadow-xl flex items-center justify-center">
+                        {/* CAMBIO 4: Renderizado condicional del player */}
+                        {currentVideoId ? (
+                            <div id="player" className="w-full h-full"></div>
+                        ) : (
+                            <div className="text-gray-500 animate-pulse">Cargando último video...</div>
+                        )}
                     </div>
                     <div className="mt-3 p-3 bg-gray-800 rounded">
-                        <h3 className="text-white font-medium">{currentVideoTitle}</h3>
+                        <h3 className="text-white font-medium">{currentVideoTitle || "Cargando..."}</h3>
                     </div>
                 </div>
                 <aside className="lg:w-1/3 flex flex-col gap-4 h-full overflow-hidden">