Update cointube.jsx

cointube.jsx

@@ -13,6 +13,7 @@ import {
     onSnapshot, 
     setDoc, 
     updateDoc, 
+    deleteDoc, // <--- IMPORTANTE: Agregado para borrar
     collection, 
     addDoc, 
     increment,
@@ -49,6 +50,7 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
 
+    // --- 1. INIT ---
     useEffect(() => {
         const initFirebase = async () => {
             try {
@@ -72,6 +74,7 @@ export default function App() {
         initFirebase();
     }, []);
     
+    // --- 2. AUTH ---
     useEffect(() => {
         if (!firebaseReady || !auth) return;
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
@@ -88,6 +91,7 @@ export default function App() {
         return () => unsubscribeAuth();
     }, [firebaseReady]);
 
+    // --- 3. PROFILE ---
     useEffect(() => {
         if (!firebaseReady || !userId || !db) return;
         const profileRef = doc(db, 'users', userId);
@@ -107,9 +111,10 @@ export default function App() {
         return () => unsubscribeProfile();
     }, [userId, user, firebaseReady]);
 
+    // --- 4. VIDEOS ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
-        const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(20));
+        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) {
@@ -121,6 +126,7 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
+    // --- 5. RANKING ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(20));
@@ -131,6 +137,7 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
+    // --- 6. YOUTUBE API ---
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
@@ -143,6 +150,7 @@ export default function App() {
         }
     }, []);
 
+    // --- LOGICA DE MONEDAS ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId && db) {
             const coinsToSave = localCoinBufferRef.current;
@@ -210,6 +218,19 @@ 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
+        if (!confirm("¿Estás seguro de que quieres ELIMINAR este video?")) return;
+        
+        try {
+            await deleteDoc(doc(db, "videos", videoId));
+        } catch (error) {
+            console.error("Error borrando:", error);
+            alert("No tienes permisos para borrar este video.");
+        }
+    };
+
     const handleGoogleLogin = async () => {
         if (!auth) return;
         const provider = new GoogleAuthProvider();
@@ -312,19 +333,33 @@ export default function App() {
                         <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) => (
-                                <button key={video.id} onClick={() => loadVideo(video)} className={`w-full text-left p-2 rounded ${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">{video.title}</div>
+                                <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"
+                                            title="Borrar Video"
+                                        >
+                                            X
+                                        </span>
+                                    )}
                                 </button>
                             ))}
                         </div>
                     </div>
+                    
+                    {/* RANKING CORREGIDO */}
                     <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}
+                                        #{i+1} {u.email ? u.email.split('@')[0] : 'Usuario'}
                                     </span>
                                     <span className="text-yellow-400 font-mono whitespace-nowrap">{Math.floor(u.coins)}</span>
                                 </div>