Miciudad.es - Smart Cities

<br /> <!DOCTYPE html><br /> <html lang="es"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>Agregador de Canales de Contenido</title><br /> <br /> <script src="https://cdn.tailwindcss.com"></script><br /> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { font-family: 'Inter', sans-serif; } </style> <p></head><br /> <body class="bg-gray-900 text-gray-100 min-h-screen"></p> <div id="app-container" class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8"> </p> <header class="mb-8 p-4 bg-gray-800 rounded-xl shadow-lg flex justify-between items-center"> <h1 class="text-3xl sm:text-4xl font-extrabold text-red-500"> <span class="inline-block align-middle"><br /> <br /> <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10 text-red-500 mr-2" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.666 12l-6 3.704v-7.408l6 3.704z"/> </svg><br /> </span><br /> Agregador de Feeds<br /> </h1> <div class="text-sm"> <span id="user-id-display" class="bg-gray-700 text-gray-400 px-3 py-1 rounded-full text-xs">Cargando ID…</span> </div> </header> <p> <br /> <main></p> <section class="mb-10"> <h2 class="text-2xl font-semibold mb-4 text-gray-300">Añadir Nuevo Canal (Simulado)</h2> <div class="bg-gray-800 p-6 rounded-xl shadow-inner grid grid-cols-1 md:grid-cols-3 gap-4"> <input type="text" id="channel-name-input" placeholder="Nombre del Canal (Ej: Tech Reviews)" class="p-3 rounded-lg bg-gray-700 text-gray-100 border border-gray-600 focus:ring-red-500 focus:border-red-500"><br /> <input type="text" id="channel-niche-input" placeholder="Nicho (Ej: Tecnología)" class="p-3 rounded-lg bg-gray-700 text-gray-100 border border-gray-600 focus:ring-red-500 focus:border-red-500"><br /> <button id="add-channel-btn" class="bg-red-600 hover:bg-red-700 transition duration-300 text-white font-bold py-3 rounded-lg shadow-md"><br /> Añadir Canal<br /> </button> </div> </section> <p> </p> <section> <h2 class="text-2xl font-semibold mb-4 text-gray-300">Feed de Últimos Vídeos</h2> <div id="video-feed-container" class="space-y-8"> </p> <p id="loading-message" class="text-gray-500 text-center py-10">Conectando con la base de datos y cargando canales…</p> </p></div> <div id="error-message" class="hidden text-red-400 bg-red-900/30 p-4 rounded-lg mt-4 font-mono"></div> </section> <p> </main></p> <p> <br /> <button id="simulate-upload-btn" class="fixed bottom-6 right-6 bg-red-600 hover:bg-red-700 transition duration-300 text-white font-extrabold p-4 rounded-full shadow-2xl z-50"><br /> Simular Nuevo Vídeo 🎥<br /> </button></p> <p> </p> <div id="modal-message" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50"> <div class="bg-gray-800 p-6 rounded-lg shadow-xl max-w-sm w-full"> <h3 id="modal-title" class="text-xl font-bold mb-3 text-red-500"></h3> <p id="modal-content" class="text-gray-300 mb-4"> <p> <button id="modal-close-btn" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 rounded-lg">Cerrar</button> </div> </p></div> </p></div> <p> <br /> <script type="module"> // Importaciones de Firebase import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"; import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js"; import { getFirestore, doc, setDoc, onSnapshot, collection, query, getDocs, updateDoc, deleteDoc, orderBy, serverTimestamp, getDoc, addDoc, setLogLevel, where } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";</p> <p> // Configuración de Firebase y App ID const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};</p> <p> // Inicialización de Firebase let app; let db; let auth; let userId = null; let isAuthReady = false;</p> <p> // Referencias del DOM const videoFeedContainer = document.getElementById('video-feed-container'); const loadingMessage = document.getElementById('loading-message'); const errorMessage = document.getElementById('error-message'); const userIdDisplay = document.getElementById('user-id-display'); const addChannelBtn = document.getElementById('add-channel-btn'); const simulateUploadBtn = document.getElementById('simulate-upload-btn'); const channelNameInput = document.getElementById('channel-name-input'); const channelNicheInput = document.getElementById('channel-niche-input');</p> <p> // Modal UI const modalMessage = document.getElementById('modal-message'); const modalTitle = document.getElementById('modal-title'); const modalContent = document.getElementById('modal-content'); const modalCloseBtn = document.getElementById('modal-close-btn');</p> <p> // Variables para almacenar datos de canales y vídeos let channelsData = {}; let videosData = [];</p> <p> // Funciones de Utilidad function showModal(title, content) { modalTitle.textContent = title; modalContent.textContent = content; modalMessage.classList.remove('hidden'); }</p> <p> modalCloseBtn.onclick = () => { modalMessage.classList.add('hidden'); };</p> <p> // --- INICIALIZACIÓN DE FIREBASE Y AUTENTICACIÓN --- try { // setLogLevel('debug'); // Descomentar para ver logs de Firestore app = initializeApp(firebaseConfig); db = getFirestore(app); auth = getAuth(app); console.log("Firebase inicializado."); } catch (e) { console.error("Error al inicializar Firebase:", e); errorMessage.textContent = `Error al inicializar Firebase: ${e.message}`; errorMessage.classList.remove('hidden'); }</p> <p> const PUBLIC_PATH_BASE = `artifacts/${appId}/public/data`; const CHANNELS_COLLECTION = 'channels'; const VIDEO_FEED_COLLECTION = 'video_feed';</p> <p> const channelsCollectionRef = collection(db, `${PUBLIC_PATH_BASE}/${CHANNELS_COLLECTION}`); const videoFeedCollectionRef = collection(db, `${PUBLIC_PATH_BASE}/${VIDEO_FEED_COLLECTION}`);</p> <p> // Manejo de la autenticación onAuthStateChanged(auth, async (user) => { if (user) { userId = user.uid; userIdDisplay.textContent = `ID de Usuario: ${userId}`; isAuthReady = true; console.log("Usuario autenticado. UID:", userId);</p> <p> // Iniciar la carga de datos después de la autenticación await initializeData(); setupRealTimeListeners();</p> <p> } else { console.log("Usuario no autenticado, iniciando sesión anónima o con token."); if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { try { await signInWithCustomToken(auth, __initial_auth_token); } catch (error) { console.error("Error al iniciar sesión con token personalizado:", error); await signInAnonymously(auth); // Fallback a anónimo } } else { await signInAnonymously(auth); } } });</p> <p> // --- FUNCIÓN PARA INICIALIZAR Y GESTIONAR LA DATA MOCK ---</p> <p> const MOCK_CHANNELS = [ { id: 'tech-guru', name: 'Tech Reviews (Tecnología)', niche: 'Tecnología', author: 'El Analista' }, { id: 'art-zone', name: 'Arte y Dibujo (Creatividad)', niche: 'Arte', author: 'Pincel Veloz' }, { id: 'health-fit', name: 'Fitness en Casa (Salud)', niche: 'Salud y Fitness', author: 'Doctor Músculo' }, ];</p> <p> async function initializeData() { if (!db || !isAuthReady) return;</p> <p> try { // 1. Verificar y establecer canales iniciales si no existen const channelDocs = await getDocs(channelsCollectionRef); if (channelDocs.empty) { console.log("No se encontraron canales. Creando datos mock iniciales."); for (const channel of MOCK_CHANNELS) { await setDoc(doc(channelsCollectionRef, channel.id), { name: channel.name, niche: channel.niche, author: channel.author, timestamp: serverTimestamp(), id: channel.id // Guardar ID también en el documento }); } console.log("Canales iniciales creados."); } else { console.log("Canales ya existen en Firestore."); }</p> <p> // 2. Cargar la data de canales para uso interno channelsData = {}; const currentChannelDocs = await getDocs(channelsCollectionRef); currentChannelDocs.forEach(doc => { channelsData[doc.id] = doc.data(); });</p> <p> loadingMessage.textContent = "Listo. Esperando actualizaciones de vídeo...";</p> <p> } catch (e) { console.error("Error en initializeData:", e); errorMessage.textContent = `Error al inicializar data: ${e.message}`; errorMessage.classList.remove('hidden'); } }</p> <p> // --- RENDERING Y LISTENERS EN TIEMPO REAL ---</p> <p> /** * Renderiza los vídeos agrupados por canal. * @param {Array<Object>} videos Lista de objetos de vídeo. */ function renderVideoFeed(videos) { videoFeedContainer.innerHTML = '';</p> <p> if (!videos || videos.length === 0) { videoFeedContainer.innerHTML = '</p> <p class="text-gray-500 text-center py-10">No hay vídeos subidos todavía.</p> <p>'; return; }</p> <p> // Agrupar vídeos por channelId const groupedVideos = videos.reduce((acc, video) => { const channel = channelsData[video.channelId] || { name: 'Canal Desconocido', niche: 'General' }; if (!acc[video.channelId]) { acc[video.channelId] = { info: channel, videos: [] }; } acc[video.channelId].videos.push(video); return acc; }, {});</p> <p> // Ordenar los grupos por el timestamp del último vídeo const sortedGroups = Object.keys(groupedVideos) .map(key => ({ id: key, data: groupedVideos[key] })) .sort((a, b) => { const latestA = Math.max(...a.data.videos.map(v => v.uploadDate?.seconds || 0)); const latestB = Math.max(...b.data.videos.map(v => v.uploadDate?.seconds || 0)); return latestB - latestA; // Más reciente primero });</p> <p> sortedGroups.forEach(group => { const channel = group.data.info; const channelElement = document.createElement('div'); channelElement.className = 'channel-group bg-gray-800 p-4 rounded-xl shadow-2xl transition duration-300 hover:shadow-red-900/50 border border-gray-700';</p> <p> // Título del Canal channelElement.innerHTML = `</p> <div class="flex items-center mb-4 pb-2 border-b border-red-800"> <h3 class="text-xl sm:text-2xl font-bold text-red-400 mr-3">${channel.name}</h3> <p> <span class="text-sm bg-gray-700 text-red-300 px-3 py-1 rounded-full">${channel.niche}</span> </div> <div class="videos-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="grid-${group.id}"> </div> <p> `; videoFeedContainer.appendChild(channelElement);</p> <p> const gridContainer = channelElement.querySelector(`#grid-${group.id}`);</p> <p> // Renderizar los vídeos dentro de la cuadrícula // Ordenar vídeos por fecha de subida (más reciente primero) group.data.videos.sort((a, b) => (b.uploadDate?.seconds || 0) - (a.uploadDate?.seconds || 0));</p> <p> group.data.videos.forEach(video => { const videoCard = document.createElement('div'); videoCard.className = 'video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg transition duration-300 hover:scale-[1.02] border border-gray-700 hover:border-red-500';</p> <p> const date = video.uploadDate ? new Date(video.uploadDate.seconds * 1000).toLocaleString('es-ES', { dateStyle: 'medium', timeStyle: 'short' }) : 'Fecha desconocida';</p> <p> // URL de imagen de placeholder de YouTube const placeholderUrl = `https://placehold.co/1280x720/1f2937/fff?text=${encodeURIComponent(video.title)}`;</p> <p> videoCard.innerHTML = `</p> <div class="aspect-video relative"> <img decoding="async" src="${placeholderUrl}" onerror="this.onerror=null;this.src='https://placehold.co/1280x720/1f2937/fff?text=Vídeo+Simulado'" alt="Vista previa del vídeo: ${video.title}" class="w-full h-full object-cover"> <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs font-semibold px-2 py-1 rounded-md"> ${video.duration || '05:00'} </span> </div> <div class="p-3"> <h4 class="text-base font-semibold text-gray-100 line-clamp-2" title="${video.title}">${video.title}</h4> <p class="text-xs text-gray-400 mt-1">Subido por: <span class="text-red-400">${video.author}</span></p> <p class="text-xs text-gray-500 mt-0.5">Publicado: ${date}</p> <p> <a href="#" class="mt-2 inline-block text-red-500 hover:text-red-400 text-sm font-medium">Ver Vídeo</a> </div> <p> `; gridContainer.appendChild(videoCard); }); }); }</p> <p> function setupRealTimeListeners() { if (!db || !isAuthReady) return;</p> <p> // 1. Listener para los Canales (por si se añade uno nuevo) onSnapshot(channelsCollectionRef, (snapshot) => { snapshot.forEach(doc => { channelsData[doc.id] = doc.data(); }); console.log("Canales actualizados en tiempo real."); }, (error) => { console.error("Error al escuchar canales:", error); // Si el error es de permisos, la regla de seguridad lo bloquea. errorMessage.textContent = `Error al escuchar canales: ${error.message}`; errorMessage.classList.remove('hidden'); });</p> <p> // 2. Listener para el Feed de Vídeos const q = query(videoFeedCollectionRef); // Podríamos añadir orderBy si no lo hacemos en JS, pero lo evitaremos por el coste de índices.</p> <p> onSnapshot(q, (snapshot) => { videosData = []; snapshot.forEach(doc => { videosData.push({ id: doc.id, ...doc.data() }); });</p> <p> console.log(`Feed de vídeos actualizado. Total: ${videosData.length} vídeos.`); renderVideoFeed(videosData); loadingMessage.classList.add('hidden'); // Ocultar el mensaje de carga una vez que llegan los datos }, (error) => { console.error("Error al escuchar el feed de vídeos:", error); errorMessage.textContent = `Error al escuchar el feed: ${error.message}`; errorMessage.classList.remove('hidden'); loadingMessage.classList.add('hidden'); }); }</p> <p> // --- LÓGICA DE INTERACCIÓN (AÑADIR CANAL Y SIMULAR SUBIDA) ---</p> <p> // Función para añadir un nuevo canal (simulado) addChannelBtn.onclick = async () => { if (!db || !isAuthReady) { showModal("Error", "La conexión a la base de datos aún no está lista."); return; }</p> <p> const name = channelNameInput.value.trim(); const niche = channelNicheInput.value.trim();</p> <p> if (!name || !niche) { showModal("Faltan Datos", "Por favor, introduce tanto el nombre como el nicho del canal."); return; }</p> <p> // Generar un ID simple y único para el canal const channelId = name.toLowerCase().replace(/\s+/g, '-') + '-' + Math.random().toString(36).substring(2, 6);</p> <p> try { await setDoc(doc(channelsCollectionRef, channelId), { name: name, niche: niche, author: name.split(' ')[0] + ' Author', timestamp: serverTimestamp(), id: channelId });</p> <p> channelNameInput.value = ''; channelNicheInput.value = ''; showModal("¡Éxito!", `El canal "${name}" (ID: ${channelId}) ha sido añadido y aparecerá en el feed cuando suba un vídeo.`);</p> <p> } catch (e) { console.error("Error al añadir canal:", e); showModal("Error de BD", `No se pudo añadir el canal: ${e.message}`); } };</p> <p> // Función para simular una subida de vídeo simulateUploadBtn.onclick = async () => { if (!db || !isAuthReady) { showModal("Error", "La conexión a la base de datos aún no está lista."); return; }</p> <p> const channelIds = Object.keys(channelsData); if (channelIds.length === 0) { showModal("Sin Canales", "No hay canales para subir vídeos. ¡Añade uno primero!"); return; }</p> <p> // Seleccionar un canal al azar const randomChannelId = channelIds[Math.floor(Math.random() * channelIds.length)]; const channel = channelsData[randomChannelId];</p> <p> const videoTitles = [ `La Verdad Oculta de ${channel.niche}`, `Tutorial Rápido: 5 Minutos de ${channel.niche}`, `Mi Experiencia con lo Último en ${channel.niche}`, `Top 10 Errores de Novato en ${channel.niche}`, `Review Detallada: ¿Vale la Pena este ${channel.niche}?` ];</p> <p> const randomTitle = videoTitles[Math.floor(Math.random() * videoTitles.length)];</p> <p> try { await addDoc(videoFeedCollectionRef, { channelId: randomChannelId, title: randomTitle, author: channel.author, niche: channel.niche, uploadDate: serverTimestamp(), duration: `${Math.floor(Math.random() * 10) + 3}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}` // Duración aleatoria 3-12 min });</p> <p> showModal("¡Nuevo Vídeo!", `Se ha simulado la subida de un nuevo vídeo ("${randomTitle}") al canal: ${channel.name}. El feed debería actualizarse al instante.`);</p> <p> } catch (e) { console.error("Error al simular subida:", e); showModal("Error de BD", `No se pudo simular la subida: ${e.message}`); } };</p> <p> </script><br /> </body><br /> </html><br />