// --- STATE -------------------------------------------------------------- const state = { q: new URL(location).searchParams.get('q') || '', chips: new Set((new URL(location).searchParams.get('c') || '').split(',').filter(Boolean)), sort: new URL(location).searchParams.get('s') || 'newest', };

// --- HELPERS ------------------------------------------------------------ const fmtDate = d => new Date(d).toLocaleDateString(undefined, { year:'numeric', month:'short', day:'2-digit' }); const thumb = id => `https://img.youtube.com/vi/${id}/hqdefault.jpg`; const ytUrl = id => `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&autoplay=1`;

function applyFilters(list){ const q = state.q.trim().toLowerCase(); const chips = state.chips; let out = list.filter(v => { const hay = `${v.title} ${v.desc} ${v.tags?.join(' ')}`.toLowerCase(); const matchesQ = !q || hay.includes(q); const matchesChips = chips.size === 0 || v.categories?.some(c => chips.has(c)); return matchesQ && matchesChips; }); if(state.sort === 'az') out.sort((a,b)=> a.title.localeCompare(b.title)); else out.sort((a,b)=> new Date(b.date) - new Date(a.date)); return out; }

function render(){ document.getElementById('q').value = state.q; document.getElementById('sort').textContent = 'Sort: ' + (state.sort==='az'?'A–Z':'Newest'); document.querySelectorAll('.chip').forEach(el=>{ el.setAttribute('aria-pressed', state.chips.has(el.dataset.chip)); });

const grid = document.getElementById('grid'); grid.innerHTML = ''; const list = applyFilters(VIDEOS); if(list.length===0){ grid.innerHTML = `

`; return; }

const frag = document.createDocumentFragment(); list.forEach(v => { const card = document.createElement('article'); card.className = 'card'; card.innerHTML = `

${fmtDate(v.date)} ${(v.categories||[]).slice(0,2).map(c=>`${c}`).join('')}

Play

`; card.addEventListener('click', (e)=>{ const btn = e.target.closest('.play'); if(btn){ openModal(btn.dataset.id, btn.dataset.title); } }); frag.appendChild(card);

// Inject JSON-LD VideoObject for SEO (one per card) const ld = document.createElement('script'); ld.type = 'application/ld+json'; ld.text = JSON.stringify({ '@context':'https://schema.org', '@type':'VideoObject', name: v.title, description: v.desc, uploadDate: v.date, thumbnailUrl: `https://img.youtube.com/vi/${v.id}/maxresdefault.jpg`, embedUrl: `https://www.youtube-nocookie.com/embed/${v.id}` }); card.appendChild(ld); }); grid.appendChild(frag);

// Persist filters in URL for shareability const url = new URL(location); url.searchParams.set('q', state.q); url.searchParams.set('s', state.sort); url.searchParams.set('c', Array.from(state.chips).join(',')); history.replaceState({}, '', url); }

// --- MODAL -------------------------------------------------------------- const modal = document.getElementById('videoModal'); const modalFrame = document.getElementById('modalFrame'); const modalTitle = document.getElementById('modalTitle');

function openModal(id, title){ modalTitle.textContent = title; modalFrame.innerHTML = ``; modal.showModal(); } function closeModal(){ modalFrame.innerHTML=''; modal.close(); }

document.getElementById('closeModal').addEventListener('click', closeModal); modal.addEventListener('close', ()=> modalFrame.innerHTML='');

// --- UI WIRING ---------------------------------------------------------- document.getElementById('q').addEventListener('input', (e)=>{ state.q = e.target.value; render(); });

document.querySelectorAll('.chip').forEach(chip => chip.addEventListener('click', ()=>{ const key = chip.dataset.chip; if(state.chips.has(key)) state.chips.delete(key); else state.chips.add(key); render(); }));

document.getElementById('sort').addEventListener('click', ()=>{ state.sort = state.sort === 'az' ? 'newest' : 'az'; render(); });

document.getElementById('clear').addEventListener('click', ()=>{ state.q = ''; state.chips.clear(); state.sort='newest'; render(); });

document.getElementById('share').addEventListener('click', async ()=>{ try{ if(navigator.share){ await navigator.share({ title: document.title, url: location.href }); } else{ await navigator.clipboard.writeText(location.href); alert('Link copied to clipboard'); } }catch{ /* user cancelled */ } });

document.getElementById('copyLink').addEventListener('click', async ()=>{ try{ await navigator.clipboard.writeText(location.href); }catch{} });

// Keyboard: ESC closes modal window.addEventListener('keydown', (e)=>{ if(e.key==='Escape' && modal.open) closeModal(); });

// Initial render document.getElementById('year').textContent = new Date().getFullYear(); render();