{open && }

); } // ─── Header ─────────────────────────────────────────────────────────────── function Header({ data, now, lang, setLang, t, favorites, onOpenAgenda }) { const liveByRoom = useMemo(() => { const map = {}; for (const s of data.sessions) { if (s.room === "*") continue; if (sessionState(s, now) === "live") map[s.room] = s; } return map; }, [data, now]); const roomsByCluster = useMemo(() => { const map = {}; for (const r of data.rooms) { (map[r.cluster] ||= []).push(r); } return map; }, [data]); return (

{onOpenAgenda && ( )}

); } // ─── Day tabs ───────────────────────────────────────────────────────────── function DayTabs({ data, dayIdx, setDayIdx, now, lang, t, children }) { const todayKey = madridParts(now).dayKey; return (

{children &&

{children}

} {data.meta.days.map((d, i) => { const labels = data.meta.dayLabels[d]; const label = labels ? labels[lang] : d; const [head, ...tail] = label.split(" · "); const isToday = d === todayKey; return ( ); })}

); } // ─── Building tabs ──────────────────────────────────────────────────────── // User picks ONE building; the grid below shows that building's rooms as columns. function BuildingTabs({ data, buildingId, setBuildingId, dayIdx, now, lang, t }) { const dayKey = data.meta.days[dayIdx]; // Per-building stats: total sessions today, live count today const stats = useMemo(() => { const m = {}; for (const c of data.clusters) m[c.id] = { total: 0, live: 0, rooms: 0 }; for (const r of data.rooms) { if (m[r.cluster]) m[r.cluster].rooms += 1; } for (const s of data.sessions) { if (s.day !== dayKey) continue; if (s.room === "*") continue; if (!m[s.cluster]) continue; m[s.cluster].total += 1; if (sessionState(s, now) === "live") m[s.cluster].live += 1; } return m; }, [data, dayKey, now]); return (

{data.clusters.map((c) => { const st = stats[c.id] || { total: 0, live: 0, rooms: 0 }; const active = c.id === buildingId; return ( ); })}

); } // ─── Grid ───────────────────────────────────────────────────────────────── // Renders the schedule for ONE building (selected via BuildingTabs). // Columns = individual rooms within that building. Global breaks span all // columns. Auditorio (single-room building) renders as one wide column. function Grid({ data, dayIdx, buildingId, now, liveStyle, lang, t, onSessionClick, favorites, onToggleFavorite }) { const dayKey = data.meta.days[dayIdx]; const cluster = data.clusters.find((c) => c.id === buildingId) || data.clusters[0]; const buildingRooms = data.rooms.filter((r) => r.cluster === cluster.id); const roomIds = new Set(buildingRooms.map((r) => r.id)); const daySessions = data.sessions.filter((s) => s.day === dayKey && (s.room === "*" || roomIds.has(s.room)) ); if (daySessions.length === 0) { return

{lang === "es" ? "No hay sesiones en este edificio hoy." : "No sessions in this building today."}

; } const minStart = Math.min(...daySessions.map((s) => hmToMinutes(s.start))); const maxEnd = Math.max(...daySessions.map((s) => hmToMinutes(s.end))); const gridStart = Math.floor(minStart / 30) * 30; const gridEnd = Math.ceil(maxEnd / 30) * 30; const slots = (gridEnd - gridStart) / 30; const SLOT_PX = 64; const minToY = (m) => (m - gridStart) / 30 * SLOT_PX; // Group sessions by room const byRoom = {}; const globalRows = []; for (const s of daySessions) { if (s.room === "*") globalRows.push(s);else (byRoom[s.room] ||= []).push(s); } const nowParts = madridParts(now); const showNow = nowParts.dayKey === dayKey && nowParts.minutes >= gridStart && nowParts.minutes <= gridEnd; const nowY = showNow ? minToY(nowParts.minutes) : null; const gridStyle = { "--cols": buildingRooms.length, "--slots": slots, "--slot-h": SLOT_PX + "px" }; return (

{buildingRooms.map((r) =>

{r.name} {r.code}

)}

{/* Time column */}

{Array.from({ length: slots }).map((_, i) => { const m = gridStart + i * 30; const isHour = m % 60 === 0; return (

{isHour ? minutesToLabel(m) : ""}

); })}

{/* Room columns */} {buildingRooms.map((room) => { const sessions = byRoom[room.id] || []; // Lay out overlapping sessions side-by-side within the column. // Algorithm: greedy column-packing — each session goes in the leftmost // sub-column whose last cell ends before this one starts. const sorted = [...sessions].map((s, idx) => ({ s, idx, sm: hmToMinutes(s.start), em: hmToMinutes(s.end) })) .sort((a, b) => a.sm - b.sm || b.em - b.sm - (a.em - a.sm)); const subCols = []; // each entry: array of placed items for (const item of sorted) { let placed = false; for (let c = 0; c < subCols.length; c++) { const last = subCols[c][subCols[c].length - 1]; if (last.em <= item.sm) { subCols[c].push(item); item.col = c; placed = true; break; } } if (!placed) { item.col = subCols.length; subCols.push([item]); } } const totalCols = Math.max(1, subCols.length); // For each item, find max overlap span it participates in for (const item of sorted) { let maxSpan = totalCols; // Count actual concurrent items for this one to decide its width const concurrent = sorted.filter(o => o.sm < item.em && o.em > item.sm); const usedCols = new Set(concurrent.map(o => o.col)); maxSpan = Math.max(...usedCols) + 1; item.span = maxSpan; } return (

{sorted.map((item) => { const s = item.s; const top = minToY(item.sm); const height = minToY(item.em) - top - 4; const dur = item.em - item.sm; const si = item.idx; const state = sessionState(s, now); const typeColor = `var(--t-${s.type})`; const widthPct = 100 / item.span; const leftPct = item.col * widthPct; // Shorter sessions get higher z-index so they're always on top. const durZ = Math.max(1, Math.round((240 - dur) / 30)); const zIndex = state === "live" ? durZ + 20 : durZ; return (

1 ? `sub-of-${item.span}` : "sub-of-1"} ${isSessionOnline(s) ? "is-online-presenter" : ""}`} data-live-style={liveStyle} onClick={() => { if (onSessionClick) onSessionClick(s); }} onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && onSessionClick) { e.preventDefault(); onSessionClick(s); } }} style={{ top: `${top}px`, height: `${Math.max(height, 50)}px`, left: `calc(${leftPct}% + 2px)`, width: `calc(${widthPct}% - 4px)`, right: "auto", "--type-color": typeColor, zIndex }} aria-label={`${t.types[s.type] || s.type}: ${s.title}, ${s.roomName}, ${s.start} to ${s.end}, ${state === "live" ? t.live : state === "past" ? t.past : t.upcoming}`}>

{state === "live" && {t.live} } {isSessionOnline(s) && ( {t.online} )} {onToggleFavorite && ( onToggleFavorite(sessionId(s))} label={favorites?.has(sessionId(s)) ? t.removeFromAgenda : t.addToAgenda} className="cell-star" /> )}

{s.start}–{s.end}

{s.title}

{dur > 60 && s.talks && s.talks.length > 0 &&

{s.talks.length} {lang === "es" ? "ponencias" : "talks"}

}

{t.types[s.type] || s.type}

); })}

); })} {/* Global breaks / spanning sessions */} {globalRows.map((s, i) => { const state = sessionState(s, now); const top = minToY(hmToMinutes(s.start)); const height = minToY(hmToMinutes(s.end)) - top - 4; return (

{s.start}–{s.end} {s.title || t.types[s.type]} {t.everyRoom}

); })} {/* Now line */} {showNow && }

); } // ─── Mobile list ────────────────────────────────────────────────────────── function MobileList({ data, dayIdx, buildingId, now, lang, t, onSessionClick, favorites, onToggleFavorite }) { const dayKey = data.meta.days[dayIdx]; const cluster = data.clusters.find((c) => c.id === buildingId) || data.clusters[0]; const sessions = data.sessions.filter((s) => s.day === dayKey && (s.cluster === cluster.id || s.room === "*") ); const byHour = {}; for (const s of sessions) { const h = s.start.slice(0, 2) + ":00"; (byHour[h] ||= []).push(s); } const hours = Object.keys(byHour).sort(); return ( <>

{hours.map((h) =>

{h}

{byHour[h].map((s, i) => { const state = sessionState(s, now); return ( { e.preventDefault(); if (onSessionClick) onSessionClick(s); }} aria-label={`${t.types[s.type] || s.type}: ${s.title}, ${s.room === "*" ? t.everyRoom : s.roomName}, ${s.start}–${s.end}${isSessionOnline(s) ? ", " + t.onlinePresenterTitle : ""}`}>

{s.room === "*" ? t.everyRoom : s.roomName} {state === "live" && {t.live}} {state === "past" && ✓ {t.past}} {isSessionOnline(s) && ( 🌐 {t.online} )}

{s.title}

{s.start}–{s.end} {s.talks && s.talks.length > 0 && ` · ${s.talks.length} ${lang === "es" ? "ponencias" : "talks"}`}

{onToggleFavorite && ( onToggleFavorite(sessionId(s))} label={favorites?.has(sessionId(s)) ? t.removeFromAgenda : t.addToAgenda} className="mobile-cell-star" size={16} /> )} ); })}

)}

); } // ─── Time-travel scrubber ───────────────────────────────────────────────── function Scrubber({ now, setNow, onGoLive, isLive, data, t, lang }) { const start = madridDate(data.meta.days[0], "06:00").getTime(); const end = madridDate(data.meta.days[data.meta.days.length - 1], "23:00").getTime(); const value = Math.max(start, Math.min(end, now.getTime())); const fmt = new Intl.DateTimeFormat(lang === "es" ? "es-ES" : "en-GB", { timeZone: "Europe/Madrid", weekday: "short", day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", hour12: false }); return (

⏱ {t.timeTravel} {fmt.format(now)} setNow(new Date(parseInt(e.target.value, 10)))} aria-label={t.timeTravel} />

); } // ─── Session search (combobox) ─────────────────────────────────────────── // Builds a flat searchable index over sessions + talks + authors. // Selecting a result jumps to the right day/building and opens the modal. function SessionSearch({ data, t, lang, onSelect }) { const [q, setQ] = useState(""); const [open, setOpen] = useState(false); const [activeIdx, setActiveIdx] = useState(0); const inputRef = useRef(null); const wrapRef = useRef(null); // Build index once const index = useMemo(() => { const out = []; for (const s of data.sessions) { const sId = sessionId(s); // Session-level entry (always) out.push({ kind: "session", sId, session: s, primary: s.title || (s.fullName || ""), secondary: s.fullName && s.fullName !== s.title ? s.fullName : "", haystack: [s.title, s.fullName, s.roomName, s.roomCode].filter(Boolean).join(" \u00b7 ").toLowerCase() }); // Talk-level entries for (const talk of (s.talks || [])) { out.push({ kind: "talk", sId, session: s, talk, primary: talk.title || "", secondary: talk.authors || "", haystack: [talk.title, talk.authors, talk.presenter, s.title].filter(Boolean).join(" \u00b7 ").toLowerCase() }); } } return out; }, [data]); const results = useMemo(() => { const query = q.trim().toLowerCase(); if (!query) return []; const tokens = query.split(/\s+/).filter(Boolean); const matches = []; for (const item of index) { let score = 0; let allMatch = true; for (const tok of tokens) { const idx = item.haystack.indexOf(tok); if (idx < 0) { allMatch = false; break; } // Earlier match = higher score; talk title hits weighted higher score += 100 - Math.min(idx, 99); if (item.primary.toLowerCase().includes(tok)) score += 50; } if (allMatch) matches.push({ ...item, score }); } matches.sort((a, b) => b.score - a.score); return matches.slice(0, 8); }, [q, index]); // Reset active when results change useEffect(() => { setActiveIdx(0); }, [q]); // Click outside closes useEffect(() => { const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); // Cmd/Ctrl+K to focus useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); inputRef.current?.focus(); setOpen(true); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const choose = (item) => { setOpen(false); setQ(""); inputRef.current?.blur(); onSelect(item.session); }; const onKeyDown = (e) => { if (!open || results.length === 0) return; if (e.key === "ArrowDown") { e.preventDefault(); setActiveIdx(i => Math.min(i + 1, results.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIdx(i => Math.max(i - 1, 0)); } else if (e.key === "Enter") { e.preventDefault(); if (results[activeIdx]) choose(results[activeIdx]); } else if (e.key === "Escape") { setOpen(false); inputRef.current?.blur(); } }; // Highlight matched substring(s) const renderHighlighted = (text) => { const query = q.trim().toLowerCase(); if (!query || !text) return text; const tokens = query.split(/\s+/).filter(Boolean); const lower = text.toLowerCase(); const ranges = []; for (const tok of tokens) { let from = 0; while (from < lower.length) { const i = lower.indexOf(tok, from); if (i < 0) break; ranges.push([i, i + tok.length]); from = i + tok.length; } } if (!ranges.length) return text; ranges.sort((a, b) => a[0] - b[0]); const merged = []; for (const r of ranges) { const last = merged[merged.length - 1]; if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]); else merged.push([...r]); } const parts = []; let cursor = 0; merged.forEach(([a, b], i) => { if (a > cursor) parts.push(text.slice(cursor, a)); parts.push({text.slice(a, b)}); cursor = b; }); if (cursor < text.length) parts.push(text.slice(cursor)); return parts; }; const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || ""); return (

{ setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onKeyDown={onKeyDown} aria-label={t.searchPlaceholder} autoComplete="off" /> {q && ( )} {!q && }

{open && q.trim() && ( )}

); } // ─── Toast (link-copied feedback) ──────────────────────────────────────── function showToast(message) { const el = document.createElement("div"); el.className = "iced-toast"; el.textContent = message; document.body.appendChild(el); // Fade in requestAnimationFrame(() => el.classList.add("show")); setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 300); }, 1800); } // ─── Clipboard helper ──────────────────────────────────────────────────── function copyToClipboard(text) { const fallback = () => { const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); } catch {} ta.remove(); }; if (navigator.clipboard?.writeText) { navigator.clipboard.writeText(text).catch(fallback); } else { fallback(); } } // ─── Share popover ─────────────────────────────────────────────────────── // Lets the user choose between sharing the Meet link, the programme deep-link, // or downloading an .ics calendar entry. function SharePopover({ session, t, lang, onClose }) { const wrapRef = useRef(null); useEffect(() => { const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) onClose(); }; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [onClose]); const programmeUrl = (() => { const url = new URL(window.location.href); url.searchParams.set("session", sessionId(session)); url.hash = ""; return url.toString(); })(); const items = [ { key: "programme", label: lang === "es" ? "Enlace al programa" : "Programme link", sub: lang === "es" ? "Abre esta sesión en la web" : "Opens this session on the site", icon: , action: () => { copyToClipboard(programmeUrl); showToast(lang === "es" ? "Enlace copiado" : "Link copied"); onClose(); } }, session.meet && { key: "meet", label: lang === "es" ? "Enlace de Meet" : "Meet link", sub: lang === "es" ? "Para entrar directo a la sala" : "Direct join URL", icon: , action: () => { copyToClipboard(session.meet); showToast(lang === "es" ? "Meet copiado" : "Meet copied"); onClose(); } } ].filter(Boolean); return ( ); } // ─── Session detail modal ──────────────────────────────────────────────── function SessionModal({ session, t, lang, now, onClose, favorites, onToggleFavorite, data }) { const [shareOpen, setShareOpen] = useState(false); const [expandedTalk, setExpandedTalk] = useState(null); // Close on Esc useEffect(() => { if (!session) return; const onKey = (e) => { if (e.key === "Escape" && !shareOpen) onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [session, onClose, shareOpen]); // Close share popover + collapse abstracts when session changes useEffect(() => { setShareOpen(false); setExpandedTalk(null); }, [session]); if (!session) return null; const dur = hmToMinutes(session.end) - hmToMinutes(session.start); const state = now ? sessionState(session, now) : null; const isLive = state === "live"; const typeLabel = t.types[session.type] || session.type; const typeColor = `var(--t-${session.type})`; const dayLabel = (() => { try { const d = madridDate(session.day, session.start); return new Intl.DateTimeFormat(lang === "es" ? "es-ES" : "en-GB", { timeZone: "Europe/Madrid", weekday: "long", day: "2-digit", month: "long" }).format(d); } catch { return session.day; } })(); const talks = session.talks || []; // Resolve the building name from the clusters catalog so the modal can // show "ROOM 2.1 · 2.1 · Edificio I+D+i". Skip for global (room "*") // sessions since they don't belong to a specific building. const buildingName = (() => { if (!data || !session.cluster || session.room === "*") return ""; const c = data.clusters.find((x) => x.id === session.cluster); return c ? c.name : ""; })(); return ( ); } // ─── My Agenda modal ───────────────────────────────────────────────────── // Shows favorited sessions grouped by day with a "next up" highlight. function AgendaModal({ open, onClose, favorites, data, t, lang, now, onSessionClick, onToggleFavorite }) { // ESC closes + lock body scroll while open useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [open, onClose]); // Resolve favorite IDs to session objects (skip stale IDs that no longer exist) const items = useMemo(() => { if (!favorites || favorites.size === 0) return []; return data.sessions .filter((s) => favorites.has(sessionId(s))) .map((s) => ({ s, id: sessionId(s), state: sessionState(s, now), sm: hmToMinutes(s.start) })) .sort((a, b) => { if (a.s.day !== b.s.day) return a.s.day.localeCompare(b.s.day); return a.sm - b.sm; }); }, [favorites, data, now]); // Group by day const byDay = useMemo(() => { const g = {}; items.forEach((it) => (g[it.s.day] ||= []).push(it)); return g; }, [items]); // The first live or upcoming item is "next up" const nextItem = items.find((it) => it.state === "live") || items.find((it) => it.state === "future"); if (!open) return null; return ( ); } window.ICED26App = { Header, DayTabs, BuildingTabs, Grid, MobileList, Scrubber, SessionModal, SessionSearch, AgendaModal, I18N, madridParts, madridDate, sessionState, sessionId, findSessionById, useFavorites, StarButton, isSessionOnline };

{session.title}

{t.myAgendaTitle}

{t.agendaEmpty}

{dayLabel}