VIDFLOW

Trending

Explore

Messages

ADMIN

@user

0Videos

0Followers

0Following

Admin Panel

ADMIN

Platform Stats

— Total Videos

— Total Users

— Messages

1 Admins

Users

Loading users...

Moderation

Delete all videos

Refresh video feed

Clear all messages

Home

Discover

Messages

Profile

User

Online

No videos yet — be the first!

`; return; } videos.forEach((v, i) => { const div = document.createElement('div'); div.className = 'video-item'; // Use real uploader info stored on the video row const uploaderHandle = v.user_email ? '@' + v.user_email.split('@')[0].replace(/\./g, '_') : '@unknown'; div.innerHTML = `

${uploaderHandle}

Original sound

`; const videoEl = div.querySelector('video'); videoEl.addEventListener('timeupdate', () => { const pct = (videoEl.currentTime / videoEl.duration) * 100 || 0; const progEl = document.getElementById('prog-' + i); if (progEl) progEl.style.width = pct + '%'; }); feed.appendChild(div); }); } // ── DISCOVER GRID ── function loadDiscoverGrid(videos = []) { const grid = document.getElementById('discoverGrid'); grid.innerHTML = ''; if (videos.length) { // Show real video thumbnails (as colored placeholders with uploader name) videos.slice(0, 12).forEach((v, i) => { const d = document.createElement('div'); d.className = 'discover-thumb'; d.style.background = `hsl(${260 + (i * 15) % 60}, 60%, ${8 + (i % 4) * 4}%)`; const handle = v.user_email ? v.user_email.split('@')[0] : 'user'; d.innerHTML = `

@${handle}

`; d.onclick = () => { switchPage('home'); setTimeout(() => { const items = document.querySelectorAll('.video-item'); if (items[i]) items[i].scrollIntoView({ behavior: 'smooth' }); }, 100); }; grid.appendChild(d); }); } else { // Fallback empty placeholders for (let i = 0; i < 9; i++) { const d = document.createElement('div'); d.className = 'discover-thumb'; d.style.background = `hsl(${260 + (i * 15) % 60}, 60%, ${8 + (i % 4) * 4}%)`; d.innerHTML = ``; grid.appendChild(d); } } } window.filterDiscover = function(val) { document.querySelectorAll('.tag-pill').forEach(t => { t.style.opacity = val && !t.textContent.includes(val) ? '0.3' : '1'; }); }; window.setSearch = function(tag) { document.getElementById('searchInput').value = tag; filterDiscover(tag); }; // ── UPLOAD ── window.uploadVideo = async function(event) { const file = event.target.files[0]; if (!file) return; showToast('Uploading...'); const fileName = Date.now() + '_' + file.name; const { error } = await sb.storage.from('videos').upload(fileName, file); if (error) return showToast('Upload failed: ' + error.message); const { data } = sb.storage.from('videos').getPublicUrl(fileName); // Store user_id and user_email so videos are tied to the uploader await sb.from('videos').insert([{ url: data.publicUrl, user_id: currentUser.id, user_email: currentUser.email }]); showToast('Video uploaded!'); loadFeed(); loadProfile(); event.target.value = ''; }; // ── MESSAGES ── const CONTACTS = [ { id: 'u1', name: 'Alex Rivera', initials: 'AR', preview: 'Bro that edit was fire 🔥', time: '2m', unread: 2 }, { id: 'u2', name: 'Sam Chen', initials: 'SC', preview: 'Can you collab with me?', time: '15m', unread: 1 }, { id: 'u3', name: 'Jordan Kim', initials: 'JK', preview: 'Followed you back!', time: '1h', unread: 0 }, { id: 'u4', name: 'Maya Patel', initials: 'MP', preview: 'love your content 💜', time: '3h', unread: 0 }, { id: 'u5', name: 'VidFlow Team', initials: 'VF', preview: 'Welcome to VidFlow!', time: '1d', unread: 0 }, ]; let conversations = {}; CONTACTS.forEach(c => { conversations[c.id] = [{ from: 'them', text: c.preview, time: c.time }]; }); function loadMessages() { const list = document.getElementById('msgList'); list.innerHTML = ''; CONTACTS.forEach(c => { const div = document.createElement('div'); div.className = 'msg-item'; const lastMsg = conversations[c.id].slice(-1)[0]; div.innerHTML = `

${c.initials}

${c.name}

${lastMsg ? lastMsg.text : c.preview}

${c.time} ${c.unread ? `${c.unread}` : ''}

`; div.onclick = () => openChat(c); list.appendChild(div); }); } function openChat(contact) { currentChatPartner = contact; document.getElementById('chatAvatar').textContent = contact.initials; document.getElementById('chatName').textContent = contact.name; document.getElementById('chatView').style.display = 'flex'; document.getElementById('chatView').style.flexDirection = 'column'; renderChatMessages(contact.id); document.getElementById('chatInput').focus(); } window.closeChatView = function() { document.getElementById('chatView').style.display = 'none'; currentChatPartner = null; loadMessages(); }; function renderChatMessages(contactId) { const container = document.getElementById('chatMessages'); container.innerHTML = ''; (conversations[contactId] || []).forEach(m => { const wrap = document.createElement('div'); wrap.innerHTML = `

${m.text}

${m.time}

`; container.appendChild(wrap); }); container.scrollTop = container.scrollHeight; } window.sendMessage = function() { const input = document.getElementById('chatInput'); const text = input.value.trim(); if (!text || !currentChatPartner) return; const now = new Date(); const timeStr = now.getHours() + ':' + String(now.getMinutes()).padStart(2, '0'); conversations[currentChatPartner.id].push({ from: 'me', text, time: timeStr }); input.value = ''; renderChatMessages(currentChatPartner.id); setTimeout(() => { const replies = ["That's awesome! 🔥", "Haha yeah! 😂", "Let's collab soon!", "💜💜💜", "For real tho", "Omg yes!!"]; const replyTime = new Date(); conversations[currentChatPartner.id].push({ from: 'them', text: replies[Math.floor(Math.random() * replies.length)], time: replyTime.getHours() + ':' + String(replyTime.getMinutes()).padStart(2, '0') }); renderChatMessages(currentChatPartner.id); }, 1500); }; // ── PROFILE ── async function loadProfile() { if (!currentUser) return; const email = currentUser.email; const name = email.split('@')[0]; const initials = name.substring(0, 2).toUpperCase(); document.getElementById('profileInitials').textContent = initials; document.getElementById('profileName').textContent = name; document.getElementById('profileHandle').textContent = '@' + name.replace(/\./g, '_'); if (email === ADMIN_EMAIL) { document.getElementById('adminBadge').style.display = 'block'; document.getElementById('adminPanelBtn').style.display = 'flex'; } // Only load THIS user's videos by filtering on user_id const { data } = await sb .from('videos') .select('*') .eq('user_id', currentUser.id) .order('created_at', { ascending: false }); const myVideos = data || []; document.getElementById('profileVideos').textContent = myVideos.length; renderProfileGrid(myVideos); } function renderProfileGrid(videos) { const grid = document.getElementById('profileGrid'); grid.innerHTML = ''; if (!videos.length) { grid.innerHTML = `

Upload your first video!

`; return; } videos.forEach((v, i) => { const div = document.createElement('div'); div.className = 'profile-video-thumb'; div.style.background = `hsl(260, 50%, ${8 + (i % 5) * 3}%)`; div.innerHTML = ` `; // Clicking a profile thumb opens that video in the feed div.onclick = async () => { switchPage('home'); await new Promise(r => setTimeout(r, 150)); const items = document.querySelectorAll('.video-item'); // Find the matching video in the feed by URL for (let j = 0; j < items.length; j++) { const vid = items[j].querySelector('video'); if (vid && vid.src === v.url) { items[j].scrollIntoView({ behavior: 'smooth' }); break; } } }; grid.appendChild(div); }); } // ── ADMIN ── window.showAdminPage = function() { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); document.getElementById('adminPage').style.display = 'block'; loadAdminStats(); }; window.goBackFromAdmin = function() { document.getElementById('adminPage').style.display = 'none'; switchPage('profile'); }; async function loadAdminStats() { const { data: vids } = await sb.from('videos').select('id, user_email'); const total = vids ? vids.length : 0; const uniqueUsers = vids ? [...new Set(vids.map(v => v.user_email).filter(Boolean))].length : 0; document.getElementById('totalVideos').textContent = total; document.getElementById('totalUsers').textContent = uniqueUsers; document.getElementById('totalMessages').textContent = Object.values(conversations).reduce((a, c) => a + c.length, 0); const ul = document.getElementById('adminUserList'); const uploaders = vids ? [...new Set(vids.map(v => v.user_email).filter(Boolean))] : []; ul.innerHTML = `

${ADMIN_EMAIL} ADMIN

${uploaders.filter(e => e !== ADMIN_EMAIL).map(email => `

${email.substring(0,1).toUpperCase()}

${email} User

`).join('')} `; } window.adminDeleteAllVideos = async function() { if (!confirm('Delete ALL videos? This cannot be undone.')) return; await sb.from('videos').delete().neq('id', '00000000-0000-0000-0000-000000000000'); showToast('All videos deleted'); loadFeed(); loadAdminStats(); }; window.adminClearMessages = function() { CONTACTS.forEach(c => conversations[c.id] = []); showToast('Messages cleared'); }; // ── INIT ── checkSession();