Update cointube.jsx

cointube.jsx

@@ -23,7 +23,22 @@ import {
     limit
 } from 'firebase/firestore';
 
-let app, auth, db; 
+// --- CAMBIO IMPORTANTE: Inicialización Global ---
+// Definimos la configuración usando las variables de entorno de Hugging Face (Vite)
+const firebaseConfig = {
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID
+};
+
+// Inicializamos Firebase inmediatamente
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
+// ------------------------------------------------
 
 const ADMIN_EMAIL = "dimensionalpulsar@gmail.com";
 const VIDEO_COST = 10000; 
@@ -32,8 +47,10 @@ const DEFAULT_VIDEO_TITLE = "Cuentos de Terror";
 
 export default function App() {
     
-    const [firebaseReady, setFirebaseReady] = useState(false);
-    const [configError, setConfigError] = useState(null);
+    // Ya no necesitamos 'configError' porque cargamos la config directa
+    // Pero mantenemos 'firebaseReady' para no romper tu lógica visual,
+    // aunque ahora siempre será true desde el inicio.
+    const [firebaseReady, setFirebaseReady] = useState(true); 
 
     const [videos, setVideos] = useState([]); 
     const [leaderboard, setLeaderboard] = useState([]); 
@@ -43,7 +60,6 @@ export default function App() {
     const [userProfile, setUserProfile] = useState(null);
     const [currentTab, setCurrentTab] = useState('ganar');
     
-    // CAMBIO 1: Iniciamos en null para no mostrar el default mientras carga
     const [currentVideoId, setCurrentVideoId] = useState(null);
     const [currentVideoTitle, setCurrentVideoTitle] = useState(null);
     
@@ -54,31 +70,10 @@ export default function App() {
     const localCoinBufferRef = useRef(0);
     const initialLoadRef = useRef(true);
 
-    useEffect(() => {
-        const initFirebase = async () => {
-            try {
-                const response = await fetch('/api/config');
-                if (!response.ok) throw new Error("Error de red al cargar config");
-                
-                const config = await response.json();
-                
-                if (!app) {
-                    app = initializeApp(config);
-                    auth = getAuth(app);
-                    db = getFirestore(app);
-                }
-                setFirebaseReady(true);
-
-            } catch (error) {
-                console.error(error);
-                setConfigError("Error de conexión con el servidor.");
-            }
-        };
-        initFirebase();
-    }, []);
+    // --- NOTA: Eliminé el useEffect del 'fetch' porque ya inicializamos arriba ---
     
     useEffect(() => {
-        if (!firebaseReady || !auth) return;
+        if (!auth) return;
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -91,10 +86,10 @@ export default function App() {
             setAuthReady(true);
         });
         return () => unsubscribeAuth();
-    }, [firebaseReady]);
+    }, []); // Array vacío porque 'auth' ya es estable
 
     useEffect(() => {
-        if (!firebaseReady || !userId || !db) return;
+        if (!userId || !db) return;
         const profileRef = doc(db, 'users', userId);
         const unsubscribeProfile = onSnapshot(profileRef, (docSnap) => {
             if (docSnap.exists()) {
@@ -110,18 +105,16 @@ export default function App() {
             }
         }, (error) => console.error(error));
         return () => unsubscribeProfile();
-    }, [userId, user, firebaseReady]);
+    }, [userId, user]); // Quitamos firebaseReady de dependencias
 
     useEffect(() => {
-        if (!firebaseReady || !db) return;
-        // La consulta ya ordena por fecha descendente (el más nuevo primero)
+        if (!db) return;
         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);
-                // 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);
@@ -129,7 +122,6 @@ export default function App() {
                     initialLoadRef.current = false;
                 }
             } else {
-                // 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);
@@ -139,10 +131,10 @@ export default function App() {
             }
         });
         return () => unsubscribe();
-    }, [firebaseReady, currentVideoId]); // Agregamos currentVideoId a dependencias para el chequeo de seguridad
+    }, [currentVideoId]); 
 
     useEffect(() => {
-        if (!firebaseReady || !db) return;
+        if (!db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(100));
         const unsubscribe = onSnapshot(q, (snapshot) => {
             let usersList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
@@ -155,7 +147,7 @@ export default function App() {
             setLeaderboard(usersList.slice(0, 20));
         });
         return () => unsubscribe();
-    }, [firebaseReady]);
+    }, []);
 
     useEffect(() => {
         if (!window.YT) {
@@ -214,7 +206,6 @@ export default function App() {
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
     useEffect(() => {
-        // 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%',
@@ -275,20 +266,17 @@ export default function App() {
         await signOut(auth);
     };
 
-    if (configError) {
-        return <div className="flex justify-center items-center h-full text-red-500">{configError}</div>;
-    }
-
-    if (!firebaseReady || !authReady) {
+    if (!authReady) {
         return (
             <div className="flex flex-col items-center justify-center h-full w-full">
                 <div className="spinner mb-4"></div>
-                <p className="text-lg text-gray-400">{!firebaseReady ? "Cargando..." : "Conectando..."}</p>
+                <p className="text-lg text-gray-400">Conectando...</p>
             </div>
         );
     }
 
     if (authReady && !user) {
+        // ... (TU UI DE LOGIN SE MANTIENE IGUAL)
         return (
             <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">
@@ -322,6 +310,7 @@ export default function App() {
         );
     }
 
+    // El resto del return (header, main, etc) sigue igual que en tu código original...
     return (
         <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6">
             
@@ -384,7 +373,6 @@ 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 flex items-center justify-center">
-                        {/* CAMBIO 4: Renderizado condicional del player */}
                         {currentVideoId ? (
                             <div id="player" className="w-full h-full"></div>
                         ) : (
@@ -451,6 +439,8 @@ export default function App() {
     );
 }
 
+// Los componentes PromoCheck y PromoUnlocked se mantienen igual, 
+// solo asegúrate de que PromoUnlocked reciba 'db' como prop, lo cual ya haces.
 function PromoCheck({ user, userProfile, userId, adminEmail, videoCost, db }) {
     const isAdmin = user?.email === adminEmail;
     const coins = userProfile?.coins || 0;