Update cointube.jsx

cointube.jsx

@@ -1,5 +1,3 @@
-JavaScript
-
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { initializeApp } from 'firebase/app';
 import { 
@@ -8,8 +6,7 @@ import {
     GoogleAuthProvider, 
     signInWithPopup, 
     signOut,
-    signInWithCustomToken,
-    signInAnonymously
+    signInAnonymously 
 } from 'firebase/auth';
 import { 
     getFirestore, 
@@ -25,6 +22,7 @@ import {
     setLogLevel
 } from 'firebase/firestore';
 
+// --- Constantes de Firebase ---
 const firebaseConfig = {
     apiKey: "AIzaSyCwJjVJGuOmA_PKRbaTnQDrK-Q07NI_utc",
     authDomain: "insights-5c2d6.firebaseapp.com",
@@ -44,16 +42,24 @@ try {
     console.error("Error inicializando Firebase:", error);
 }
 
+// --- Constantes del Video (Agregadas) ---
 const DEFAULT_VIDEO_ID = "UtEhewStfMA";
-const DEFAULT_VIDEO_TITLE = "Cómo Programar un Cohete";
+const DEFAULT_VIDEO_TITLE = "Pelicula Completa"; // Usando el título de tu lista
 
 export default function App() {
     
+    // --- Estado de la Lista de Videos (CORREGIDO - Dentro del componente) ---
+    const [videos, setVideos] = useState([
+        { id: '1', title: 'Pelicula Completa', videoId: 'UtEhewStfMA' }, 
+        { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' },
+        { id: '3', title: 'Cine de Arte', videoId: 'GxEx6Kgo6Es' },
+    ]);
+    
+    // --- Resto de Estados ---
     const [user, setUser] = useState(null);
     const [userId, setUserId] = useState(null);
     const [authReady, setAuthReady] = useState(false);
     const [userProfile, setUserProfile] = useState(null);
-    const [videos, setVideos] = useState([]);
     const [currentTab, setCurrentTab] = useState('ganar');
     const [currentVideoId, setCurrentVideoId] = useState(DEFAULT_VIDEO_ID);
     const [currentVideoTitle, setCurrentVideoTitle] = useState(DEFAULT_VIDEO_TITLE);
@@ -63,9 +69,11 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
     
+    // --- Efectos ---
+
+    // 1. Auth
     useEffect(() => {
         if (!auth) return;
-
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -77,17 +85,14 @@ export default function App() {
             }
             setAuthReady(true);
         });
-
         setAuthReady(true); 
-
         return () => unsubscribeAuth();
     }, []);
 
+    // 2. Perfil de Usuario
     useEffect(() => {
         if (!userId || !db) return;
-
         const profileRef = doc(db, 'users', userId);
-        
         const unsubscribeProfile = onSnapshot(profileRef, (docSnap) => {
             if (docSnap.exists()) {
                 setUserProfile(docSnap.data());
@@ -96,16 +101,14 @@ export default function App() {
                 setDoc(profileRef, newProfile).catch(e => console.error("Error creating profile:", e));
                 setUserProfile(newProfile);
             }
-        }, (error) => {
-            console.error("Error listening to profile:", error);
-        });
-
+        }, (error) => console.error("Error listening to profile:", error));
         return () => unsubscribeProfile();
     }, [userId]);
 
+    // 3. Videos de Firebase (ELIMINADO / Comentado para usar lista fija)
+    /*
     useEffect(() => {
         if (!db) return;
-
         const videosRef = collection(db, 'videos');
         const q = query(videosRef);
         
@@ -119,7 +122,7 @@ export default function App() {
                 }).catch(e => console.error("Error adding default video:", e));
             } else {
                 const videoList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-                setVideos(videoList);
+                // Si usas la lista fija, no hagas setVideos(videoList) aquí.
             }
         }, (error) => {
             console.error("Error listening to videos:", error);
@@ -127,31 +130,29 @@ export default function App() {
 
         return () => unsubscribeVideos();
     }, []);
+    */
 
+    // 4. API YouTube
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
             tag.src = "https://www.youtube.com/iframe_api";
             const firstScriptTag = document.getElementsByTagName('script')[0];
             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-            window.onYouTubeIframeAPIReady = () => {
-                setYtApiReady(true);
-            };
+            window.onYouTubeIframeAPIReady = () => setYtApiReady(true);
         } else {
             setYtApiReady(true);
         }
     }, []);
 
+    // --- Lógica de Monedas ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId) {
             const coinsToSave = localCoinBufferRef.current;
             localCoinBufferRef.current = 0;
             const profileRef = doc(db, 'users', userId);
             updateDoc(profileRef, { coins: increment(coinsToSave) })
-                .catch(e => {
-                    localCoinBufferRef.current += coinsToSave;
-                });
+                .catch(e => { localCoinBufferRef.current += coinsToSave; });
         }
     }, [userId]);
     
@@ -159,9 +160,7 @@ export default function App() {
         if (coinIntervalRef.current) return;
         coinIntervalRef.current = setInterval(() => {
             localCoinBufferRef.current++;
-            if (localCoinBufferRef.current >= 5) {
-                saveCoinBuffer();
-            }
+            if (localCoinBufferRef.current >= 5) saveCoinBuffer();
         }, 1000);
     }, [saveCoinBuffer]);
 
@@ -173,6 +172,7 @@ export default function App() {
         }
     }, [saveCoinBuffer]);
 
+    // --- Player Events ---
     const onPlayerReady = useCallback((event) => {
         playerRef.current = event.target;
         playerRef.current.playVideo();
@@ -180,11 +180,9 @@ export default function App() {
 
     const onPlayerStateChange = useCallback((event) => {
         const state = event.data;
-        if (state === window.YT.PlayerState.PLAYING) {
-            startCoinInterval();
-        } else {
-            stopCoinInterval();
-        }
+        if (state === window.YT.PlayerState.PLAYING) startCoinInterval();
+        else stopCoinInterval();
+        
         if (state === window.YT.PlayerState.ENDED) {
             if (currentVideoId === DEFAULT_VIDEO_ID && userId) {
                 const profileRef = doc(db, 'users', userId);
@@ -193,20 +191,15 @@ export default function App() {
         }
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
+    // 5. Inicializar Player
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current) {
             playerRef.current = new window.YT.Player('player', {
                 height: '100%',
                 width: '100%',
                 videoId: currentVideoId,
-                playerVars: {
-                    'playsinline': 1, 'autoplay': 1, 'controls': 1,
-                    'modestbranding': 1, 'rel': 0
-                },
-                events: {
-                    'onReady': onPlayerReady,
-                    'onStateChange': onPlayerStateChange
-                }
+                playerVars: { 'playsinline': 1, 'autoplay': 1, 'controls': 1, 'modestbranding': 1, 'rel': 0 },
+                events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }
             });
         }
         if (!userId && playerRef.current) {
@@ -219,17 +212,24 @@ export default function App() {
         stopCoinInterval();
         setCurrentVideoId(video.videoId);
         setCurrentVideoTitle(video.title);
-        if (playerRef.current) {
-            playerRef.current.loadVideoById(video.videoId);
-        }
+        if (playerRef.current) playerRef.current.loadVideoById(video.videoId);
     };
 
+    // --- FUNCIONES DE LOGIN ---
     const handleGoogleLogin = async () => {
         const provider = new GoogleAuthProvider();
         try {
             await signInWithPopup(auth, provider);
         } catch (error) {
-            console.error("Error en el inicio de sesión con Google:", error);
+            console.error("Error Google:", error);
+        }
+    };
+
+    const handleAnonymousLogin = async () => {
+        try {
+            await signInAnonymously(auth);
+        } catch (error) {
+            console.error("Error Anónimo:", error);
         }
     };
 
@@ -238,6 +238,7 @@ export default function App() {
         await signOut(auth);
     };
 
+    // --- Renderizado de Carga ---
     if (!authReady) {
         return (
             <div className="flex flex-col items-center justify-center h-full w-full">
@@ -247,27 +248,70 @@ export default function App() {
         );
     }
 
+    // --- Renderizado de Login ---
     if (authReady && !user) {
         return (
-            <div className="flex flex-col items-center justify-center h-full w-full">
-                <p className="text-lg text-gray-400 mb-6">Por favor, inicia sesión para continuar.</p>
-                <button 
-                    onClick={handleGoogleLogin} 
-                    className="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors"
-                >
-                    Iniciar sesión con Google
-                </button>
+            <div className="flex flex-col items-center justify-center h-full w-full bg-gray-900 p-4">
+                <div className="max-w-md w-full bg-gray-800 rounded-2xl shadow-2xl p-8 text-center border border-gray-700">
+                    
+                    {/* ICONO */}
+                    <div className="flex justify-center mb-6">
+                        <div className="bg-blue-600 p-4 rounded-full shadow-lg">
+                            <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </div>
+                    </div>
+
+                    {/* TÍTULO */}
+                    <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">Bienvenido a CoinTube</h1>
+                    
+                    {/* DESCRIPCIÓN */}
+                    <p className="text-gray-400 mb-8 text-sm leading-relaxed">
+                        Descubre contenido increíble, gana monedas virtuales por cada minuto que ves y promociona tus propios videos.
+                    </p>
+
+                    {/* BOTONES */}
+                    <div className="space-y-3">
+                        <button 
+                            onClick={handleGoogleLogin} 
+                            className="w-full flex items-center justify-center px-4 py-3 bg-white text-gray-800 font-bold rounded-lg hover:bg-gray-100 transition-all duration-200 shadow-md"
+                        >
+                            <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+                                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                            </svg>
+                            Continuar con Google
+                        </button>
+
+                        <button 
+                            onClick={handleAnonymousLogin} 
+                            className="w-full px-4 py-3 bg-gray-700 text-gray-200 font-semibold rounded-lg hover:bg-gray-600 border border-gray-600 transition-all duration-200"
+                        >
+                            Entrar como Invitado
+                        </button>
+                    </div>
+                    
+                    <p className="mt-6 text-xs text-gray-500">
+                        Al continuar, aceptas nuestros términos de servicio ficticios.
+                    </p>
+                </div>
             </div>
         );
     }
 
+    // --- App Principal ---
     return (
         <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6">
             <header className="flex flex-col md:flex-row justify-between items-center pb-4 mb-4 border-b border-gray-700">
                 <h1 className="text-3xl font-bold text-white">Coin<span className="text-blue-500">Tube</span></h1>
                 <div className="flex items-center space-x-4 mt-4 md:mt-0">
                     <div className="flex flex-col items-end">
-                         <span className="text-sm text-gray-400">{user?.email}</span>
+                         {/* Muestra 'Invitado' si no hay email */}
+                         <span className="text-sm text-gray-400">{user?.email || 'Invitado'}</span>
                          <span className="text-lg font-bold text-yellow-400">
                             {userProfile?.coins || 0} Monedas
                          </span>
@@ -310,20 +354,16 @@ export default function App() {
                 <aside className="lg:w-1/3 flex flex-col bg-gray-800 rounded-lg shadow-lg p-4">
                     <h2 className="text-xl font-semibold mb-4 pb-2 border-b border-gray-700">Videos Disponibles</h2>
                     <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-                        {videos.length === 0 ? (
-                            <p className="text-gray-400">Cargando videos...</p>
-                        ) : (
-                            videos.map((video) => (
-                                <button 
-                                    key={video.id}
-                                    onClick={() => loadVideo(video)}
-                                    className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
-                                    disabled={video.videoId === currentVideoId}
-                                >
-                                    {video.title || `Video ID: ${video.videoId}`}
-                                </button>
-                            ))
-                        )}
+                        {videos.map((video) => (
+                            <button 
+                                key={video.id}
+                                onClick={() => loadVideo(video)}
+                                className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+                                disabled={video.videoId === currentVideoId}
+                            >
+                                {video.title || `Video ID: ${video.videoId}`}
+                            </button>
+                        ))}
                     </div>
                 </aside>
             </main>
@@ -339,6 +379,7 @@ export default function App() {
     );
 }
 
+// --- Sub-Componentes ---
 function PromoLocked() {
     return (
         <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg">