// app.jsx — Jazz Fest swipe scheduler // Bands as a Tinder-style stack. Swipe right = add to schedule, left = skip. // Conflicts (overlapping selected bands) are surfaced before & after acceptance. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────────────────────────────────────────── // Helpers // ───────────────────────────────────────────────────────────── const STAGE_BY_ID = Object.fromEntries(window.STAGES.map(s => [s.id, s])); const DAY_BY_ID = Object.fromEntries(window.DAYS_FULL.map(d => [d.id, d])); const toMin = (hhmm) => { const [h, m] = hhmm.split(':').map(Number); return h * 60 + m; }; const fmtTime = (hhmm) => { const [h, m] = hhmm.split(':').map(Number); const ap = h >= 12 ? 'PM' : 'AM'; const h12 = ((h + 11) % 12) + 1; return `${h12}:${m.toString().padStart(2, '0')} ${ap}`; }; const fmtTimeShort = (hhmm) => { const [h, m] = hhmm.split(':').map(Number); const ap = h >= 12 ? 'p' : 'a'; const h12 = ((h + 11) % 12) + 1; return m === 0 ? `${h12}${ap}` : `${h12}:${m.toString().padStart(2, '0')}${ap}`; }; const overlap = (a, b) => { if (a.day !== b.day) return false; return toMin(a.start) < toMin(b.end) && toMin(b.start) < toMin(a.end); }; const conflictsWith = (band, scheduled) => scheduled.filter(s => s.id !== band.id && overlap(band, s)); // ── Time / slot helpers ────────────────────────────────────── const nowMinutes = () => { const d = new Date(); return d.getHours() * 60 + d.getMinutes(); }; const todayDate = () => new Date().toISOString().slice(0, 10); // 'YYYY-MM-DD' // Greedy lane algorithm: same-stage consecutive shows share a lane. function computeLanes(dayBands) { const sorted = [...dayBands].sort((a, b) => toMin(a.start) - toMin(b.start)); const laneEnd = []; // end-minutes of last show in each lane const laneStage = []; // stage id of last show in each lane const lanes = new Map(); for (const band of sorted) { const s = toMin(band.start), e = toMin(band.end); let best = -1; // Prefer same stage (consecutive) for (let i = 0; i < laneEnd.length; i++) { if (laneStage[i] === band.stage && laneEnd[i] <= s) { best = i; break; } } // Any open lane if (best === -1) { for (let i = 0; i < laneEnd.length; i++) { if (laneEnd[i] <= s) { best = i; break; } } } // New lane if (best === -1) { best = laneEnd.length; laneEnd.push(0); laneStage.push(null); } laneEnd[best] = e; laneStage[best] = band.stage; lanes.set(band.id, best); } return { lanes, numLanes: Math.max(laneEnd.length, 1) }; } // Returns { slot: 'HH:MM' | null, label: 'NOW' | 'NEXT' | null } function getTargetSlot(dayId, allDayBands, scheduledIds) { const day = DAY_BY_ID[dayId]; if (!day || day.date !== todayDate()) return { slot: null, label: null }; const now = nowMinutes(); const sorted = [...allDayBands].sort((a, b) => toMin(a.start) - toMin(b.start)); // Currently playing bands const playing = sorted.filter(b => toMin(b.start) <= now && now < toMin(b.end)); if (playing.length > 0) { const slotStart = playing[0].start; const hasChosen = playing.some(b => scheduledIds.has(b.id)); if (!hasChosen) return { slot: slotStart, label: 'NOW' }; // Already chose one from this slot → find next distinct start time const nextStart = sorted.find(b => toMin(b.start) > now); return nextStart ? { slot: nextStart.start, label: 'NEXT' } : { slot: null, label: null }; } // Between slots or before festival const next = sorted.find(b => toMin(b.start) > now); return next ? { slot: next.start, label: 'NEXT' } : { slot: null, label: null }; } // Schedule local Notification API alerts (15-min warning) for today's shows. function scheduleLocalNotifications(scheduledBands) { if (!('Notification' in window) || Notification.permission !== 'granted') return; const today = todayDate(); for (const band of scheduledBands) { const day = DAY_BY_ID[band.day]; if (!day || day.date !== today) continue; const [h, m] = band.start.split(':').map(Number); const showMs = new Date(day.date + 'T00:00:00').getTime() + (h * 60 + m) * 60000; const alertMs = showMs - 15 * 60000; const delay = alertMs - Date.now(); if (delay > 0 && delay < 6 * 3600000) { // only within 6 hours setTimeout(() => { new Notification(`Starting soon: ${band.name}`, { body: `${fmtTime(band.start)} · ${STAGE_BY_ID[band.stage]?.name}`, icon: 'icon-192.png', tag: `jf26-${band.id}`, silent: false, }); }, delay); } } } // LocalStorage keys const LS_KEY = 'jf26.schedule.v3'; const LS_REJECT = 'jf26.rejected.v3'; const LS_DAY = 'jf26.activeDay.v3'; const loadSet = (key) => { try { return new Set(JSON.parse(localStorage.getItem(key) || '[]')); } catch { return new Set(); } }; const saveSet = (key, set) => localStorage.setItem(key, JSON.stringify([...set])); // ───────────────────────────────────────────────────────────── // Video preview // - Verified bands (yt is real): embed the YouTube player // - Unverified bands: tap-to-search tile (always works) // ───────────────────────────────────────────────────────────── function YouTubeEmbed({ id, band, stage, onFallback }) { const [failed, setFailed] = useState(false); // Detect embed failures: poll the iframe for "embed disabled" error which // shows in the iframe's body. Easiest signal: listen to YT IFrame API // postMessage. Simpler: catch onError on the iframe and use a timeout to // check if the iframe loaded a YouTube error page (we can't read it cross- // origin, so we rely on a "Switch to search" button overlay the user can tap). if (failed) return ; // Note: YouTube embeds throw Error 153 when loaded from file:// — the player // can't validate the origin. Hosting over http(s) (PWA) makes them work. const origin = typeof window !== 'undefined' ? window.location.origin : ''; const originParam = origin && origin !== 'null' && !origin.startsWith('file') ? `&origin=${encodeURIComponent(origin)}` : ''; const src = `https://www.youtube.com/embed/${id}?autoplay=0&controls=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1${originParam}`; return ( <>