Update cointube.jsx

cointube.jsx

@@ -4,8 +4,7 @@ import {
     getAuth, 
     onAuthStateChanged, 
     GoogleAuthProvider, 
-    signInWithRedirect,  // Modificado para que funcione en Hugging Face
-    getRedirectResult,   // Modificado para que funcione en Hugging Face
+    signInWithPopup, 
     signOut 
 } from 'firebase/auth';
 import { 
@@ -22,8 +21,8 @@ import {
     query,
     orderBy,
     limit,
-    writeBatch, // Agregado para el reseteo masivo
-    getDocs     // Agregado para el reseteo masivo
+    writeBatch,
+    getDocs
 } from 'firebase/firestore';
 
 const firebaseConfig = {
@@ -41,8 +40,6 @@ const db = getFirestore(app);
 
 const ADMIN_EMAIL = "dimensionalpulsar@gmail.com";
 const VIDEO_COST = 10000; 
-const DEFAULT_VIDEO_ID = "1rghd2zPhFo";
-const DEFAULT_VIDEO_TITLE = "Cuentos de Terror";
 
 // Datos de EmailJS
 const EMAILJS_SERVICE_ID = "service_v18p188"; 
@@ -70,9 +67,6 @@ export default function App() {
     const initialLoadRef = useRef(true);
 
     useEffect(() => {
-        // Esto captura el login después de la redirección de Google
-        getRedirectResult(auth).catch(error => console.error("Redirect Error:", error));
-
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -96,8 +90,7 @@ export default function App() {
             } else {
                 const newProfile = { 
                     email: user.email, 
-                    coins: 0, 
-                    watchedDefaultVideo: false 
+                    coins: 0
                 };
                 setDoc(profileRef, newProfile).catch(e => console.error(e));
                 setUserProfile(newProfile);
@@ -106,7 +99,7 @@ export default function App() {
         return () => unsubscribeProfile();
     }, [userId, user]);
 
-    // NUEVO: Lógica de Reseteo Diario (Para el admin)
+    // Lógica de Reseteo Diario (Para el admin)
     useEffect(() => {
         if (user?.email !== ADMIN_EMAIL) return;
         
@@ -138,13 +131,14 @@ export default function App() {
         checkReset();
     }, [user]);
 
+    // Lista de videos (Randomizada y sin video por defecto)
     useEffect(() => {
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(50));
         const unsubscribe = onSnapshot(q, (snapshot) => {
             let fetchedVideos = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
             
             if (fetchedVideos.length > 0) {
-                // NUEVO: Randomizar la lista de videos
+                // Randomizar la lista de videos
                 fetchedVideos = fetchedVideos.sort(() => Math.random() - 0.5);
 
                 setVideos(fetchedVideos);
@@ -155,10 +149,10 @@ export default function App() {
                     initialLoadRef.current = false;
                 }
             } else {
-                setVideos([{ id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }]);
+                setVideos([]);
                 if (initialLoadRef.current || !currentVideoId) {
-                    setCurrentVideoId(DEFAULT_VIDEO_ID);
-                    setCurrentVideoTitle(DEFAULT_VIDEO_TITLE);
+                    setCurrentVideoId(null);
+                    setCurrentVideoTitle("Sin videos disponibles");
                     initialLoadRef.current = false;
                 }
             }
@@ -228,14 +222,7 @@ export default function App() {
         const state = event.data;
         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);
-                updateDoc(profileRef, { watchedDefaultVideo: true });
-            }
-        }
-    }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
+    }, [startCoinInterval, stopCoinInterval]);
 
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current && currentVideoId) {
@@ -282,7 +269,7 @@ export default function App() {
         }
     };
 
-    // NUEVO: Función para Email Masivo
+    // Función para Email Masivo
     const handleMassEmail = async () => {
         if (!window.emailjs) return alert("EmailJS no está cargado. Revisa tu index.html.");
         if (!confirm("¿Enviar notificación de reseteo a todos los usuarios?")) return;
@@ -303,11 +290,11 @@ export default function App() {
         alert(`Correos en proceso de envío para ${count} usuarios.`);
     };
 
+    // Uso de Popup original restaurado
     const handleGoogleLogin = async () => {
         const provider = new GoogleAuthProvider();
         try {
-            // FIX DE HUGGING FACE: redirect en vez de popup
-            await signInWithRedirect(auth, provider);
+            await signInWithPopup(auth, provider);
         } catch (error) {
             console.error("Error Google:", error);
         }
@@ -419,7 +406,6 @@ export default function App() {
                     Subir Video
                 </button>
 
-                {/* NUEVO: BOTON EMAIL MASIVO */}
                 {user.email === ADMIN_EMAIL && (
                     <button 
                         onClick={handleMassEmail} 
@@ -436,25 +422,27 @@ export default function App() {
                         {currentVideoId ? (
                             <div id="player" className="w-full h-full"></div>
                         ) : (
-                            <div className="text-gray-500 animate-pulse">Cargando último video...</div>
+                            <div className="text-gray-500 animate-pulse">Esperando videos... ¡Sube el tuyo!</div>
                         )}
                     </div>
                     <div className="mt-3 p-3 bg-gray-800 rounded">
-                        <h3 className="text-white font-medium">{currentVideoTitle || "Cargando..."}</h3>
+                        <h3 className="text-white font-medium">{currentVideoTitle || "Aún no hay videos"}</h3>
                     </div>
                 </div>
                 <aside className="lg:w-1/3 flex flex-col gap-4 h-full overflow-hidden">
                     <div className="bg-gray-800 rounded p-4 flex-1 flex flex-col min-h-[200px]">
                         <h3 className="text-gray-400 text-sm uppercase font-bold mb-2">Lista de Reproducción</h3>
                         <div className="overflow-y-auto flex-1 pr-2 custom-scrollbar space-y-2">
-                            {videos.map((video) => (
+                            {videos.length > 0 ? videos.map((video) => (
                                 <button key={video.id} onClick={() => loadVideo(video)} className={`w-full text-left p-2 rounded flex justify-between items-center group ${video.videoId === currentVideoId ? 'bg-blue-900 border-l-2 border-blue-500' : 'bg-gray-700 hover:bg-gray-600'}`}>
                                     <div className="text-sm text-white truncate flex-1">{video.title}</div>
                                     {user?.email === ADMIN_EMAIL && (
                                         <span onClick={(e) => handleDeleteVideo(e, video.id)} className="ml-2 text-red-500 hover:text-red-300 font-bold px-2 py-1 rounded bg-red-900/50 hover:bg-red-900 cursor-pointer" title="Borrar Video">X</span>
                                     )}
                                 </button>
-                            ))}
+                            )) : (
+                                <div className="text-center text-gray-500 text-sm py-4">No hay videos en la red.</div>
+                            )}
                         </div>
                     </div>