Update cointube.jsx

cointube.jsx

@@ -13,7 +13,7 @@ import {
     onSnapshot, 
     setDoc, 
     updateDoc, 
-    deleteDoc, // <--- IMPORTANTE: Agregado para borrar
+    deleteDoc, 
     collection, 
     addDoc, 
     increment,
@@ -126,13 +126,23 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
-    // --- 5. RANKING ---
+    // --- 5. RANKING (FILTRADO POR GMAIL Y PUNTOS > 0) ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
-        const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(20));
+        // Pedimos 100 para tener margen de filtrado
+        const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(100));
         const unsubscribe = onSnapshot(q, (snapshot) => {
-            const usersList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-            setLeaderboard(usersList);
+            let usersList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+            
+            // --- FILTROS NUEVOS ---
+            usersList = usersList.filter(u => 
+                u.coins > 0 && // Que tenga monedas
+                u.email && 
+                u.email.endsWith('@gmail.com') // Que sea Gmail
+            );
+
+            // Nos quedamos con los top 20 después de filtrar
+            setLeaderboard(usersList.slice(0, 20));
         });
         return () => unsubscribe();
     }, [firebaseReady]);
@@ -218,9 +228,8 @@ export default function App() {
         if (playerRef.current) playerRef.current.loadVideoById(video.videoId);
     };
 
-    // --- FUNCION NUEVA: BORRAR VIDEO (SOLO ADMIN) ---
     const handleDeleteVideo = async (e, videoId) => {
-        e.stopPropagation(); // Evita que al borrar se reproduzca el video
+        e.stopPropagation();
         if (!confirm("¿Estás seguro de que quieres ELIMINAR este video?")) return;
         
         try {
@@ -335,12 +344,10 @@ export default function App() {
                             {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>
-                                    
-                                    {/* BOTÓN DE BORRAR (SOLO ADMIN) */}
                                     {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"
+                                            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
@@ -351,19 +358,28 @@ export default function App() {
                         </div>
                     </div>
                     
-                    {/* RANKING CORREGIDO */}
+                    {/* RANKING ACTUALIZADO */}
                     <div className="bg-gray-800 rounded p-4 flex-1 flex flex-col min-h-[200px]">
                         <h3 className="text-yellow-500 text-sm uppercase font-bold mb-2">Ranking Global</h3>
                         <div className="overflow-y-auto flex-1 pr-2 custom-scrollbar space-y-2">
-                            {leaderboard.map((u, i) => (
-                                <div key={u.id || i} className="flex justify-between p-2 bg-gray-700 rounded text-sm">
-                                    {/* Extrae el nombre antes del @ */}
-                                    <span className="text-white text-xs md:text-sm truncate mr-2" title={u.email}>
-                                        #{i+1} {u.email ? u.email.split('@')[0] : 'Usuario'}
-                                    </span>
-                                    <span className="text-yellow-400 font-mono whitespace-nowrap">{Math.floor(u.coins)}</span>
+                            {leaderboard.length > 0 ? (
+                                leaderboard.map((u, i) => (
+                                    <div key={u.id || i} className="flex justify-between items-center p-2 bg-gray-700 rounded">
+                                        {/* Correo en letra pequeña, sin #1 */}
+                                        <span className="text-xs text-gray-300 truncate mr-2" title={u.email}>
+                                            {u.email}
+                                        </span>
+                                        {/* Monedas */}
+                                        <span className="text-yellow-400 font-mono text-sm whitespace-nowrap">
+                                            {Math.floor(u.coins)}
+                                        </span>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="text-center text-gray-500 text-sm py-4">
+                                    Esperando usuarios con monedas...
                                 </div>
-                            ))}
+                            )}
                         </div>
                     </div>
                 </aside>