)}
);
}
/* ─────────────────────────────────────────────────────────────────
Footer, newsletter, IA, locations, legal
───────────────────────────────────────────────────────────────── */
function Footer() {
const { goto } = useRoute();
const [email, setEmail] = useState("");
const [subbed, setSubbed] = useState(false);
const toast = useToast();
function subscribe(e) {
e.preventDefault();
if (!/^[^@]+@[^@]+\.[^@]+$/.test(email)) { toast("Enter a valid email"); return; }
setSubbed(true);
toast("You're on the list, thank you.");
}
return (
);
}
/* ─────────────────────────────────────────────────────────────────
Cart drawer (mounted globally)
───────────────────────────────────────────────────────────────── */
function CartDrawer() {
const { items, setQty, remove, subtotal, open, setOpen } = useCart();
const { goto } = useRoute();
if (!open) return null;
return (
<>
setOpen(false)} />
);
}
/* ─────────────────────────────────────────────────────────────────
VideoPlayer. Eleven Views branded film frame.
Click frame to toggle. Bottom transport reveals on hover, with
scrubber, mute, and fullscreen. Corner stamp + footer caption.
───────────────────────────────────────────────────────────────── */
function fmtTime(s) {
if (!s || !isFinite(s)) return "00:00";
const m = Math.floor(s / 60);
const r = Math.floor(s % 60);
return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
}
function VideoPlayer({ src, poster, code, title, runtime, variant = "warm", aspect = "16/9", muted: mutedDefault = true, autoPlay = false, loop = false }) {
const ref = useRef(null);
const wrapRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [muted, setMuted] = useState(mutedDefault);
const [time, setTime] = useState(0);
const [dur, setDur] = useState(0);
const [hover, setHover] = useState(false);
useEffect(() => {
const v = ref.current; if (!v) return;
const onTime = () => setTime(v.currentTime);
const onMeta = () => setDur(v.duration || 0);
const onPlay = () => setPlaying(true);
const onPause = () => setPlaying(false);
v.addEventListener("timeupdate", onTime);
v.addEventListener("loadedmetadata", onMeta);
v.addEventListener("play", onPlay);
v.addEventListener("pause", onPause);
return () => {
v.removeEventListener("timeupdate", onTime);
v.removeEventListener("loadedmetadata", onMeta);
v.removeEventListener("play", onPlay);
v.removeEventListener("pause", onPause);
};
}, []);
function toggle(e) {
if (e) e.stopPropagation();
const v = ref.current; if (!v) return;
if (v.paused) { v.muted = muted; v.play().catch(() => {}); }
else v.pause();
}
function toggleMute(e) {
e.stopPropagation();
const v = ref.current; if (!v) return;
v.muted = !v.muted; setMuted(v.muted);
}
function seek(e) {
e.stopPropagation();
const v = ref.current; const r = e.currentTarget.getBoundingClientRect();
const pct = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
if (v && v.duration) v.currentTime = pct * v.duration;
}
function fullscreen(e) {
e.stopPropagation();
const w = wrapRef.current; if (!w) return;
if (!document.fullscreenElement) w.requestFullscreen?.();
else document.exitFullscreen?.();
}
const pct = dur ? (time / dur) * 100 : 0;
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={toggle}>
⌘ {code || "EV-FILM"}
{!playing && (
)}
{fmtTime(time)}
{fmtTime(dur)}
{(title || runtime) && (
{runtime && {runtime}}
{title && {title}}
)}
);
}
/* ─────────────────────────────────────────────────────────────────
MusicPlayer. Eleven Views LP frame with playlist, scrubber, transport.
───────────────────────────────────────────────────────────────── */
function MusicPlayer({ src, title, subtitle, code, variant = "deep", tracks }) {
const ref = useRef(null);
const list = (tracks && tracks.length) ? tracks : (src ? [{ src, title }] : []);
const [playing, setPlaying] = useState(false);
const [time, setTime] = useState(0);
const [dur, setDur] = useState(0);
const [trackIdx, setTrackIdx] = useState(0);
const cur = list[trackIdx] || { title };
useEffect(() => {
const a = ref.current; if (!a) return;
setTime(0); setDur(0);
const onTime = () => setTime(a.currentTime);
const onMeta = () => setDur(a.duration || 0);
const onPlay = () => setPlaying(true);
const onPause = () => setPlaying(false);
const onEnd = () => {
if (trackIdx < list.length - 1) {
setTrackIdx(trackIdx + 1);
} else {
setPlaying(false);
}
};
a.addEventListener("timeupdate", onTime);
a.addEventListener("loadedmetadata", onMeta);
a.addEventListener("play", onPlay);
a.addEventListener("pause", onPause);
a.addEventListener("ended", onEnd);
return () => {
a.removeEventListener("timeupdate", onTime);
a.removeEventListener("loadedmetadata", onMeta);
a.removeEventListener("play", onPlay);
a.removeEventListener("pause", onPause);
a.removeEventListener("ended", onEnd);
};
// eslint-disable-next-line
}, [trackIdx]);
// when track changes during playback, auto-resume
useEffect(() => {
const a = ref.current; if (!a) return;
if (playing) { a.play().catch(() => {}); }
// eslint-disable-next-line
}, [trackIdx]);
function toggle() {
const a = ref.current; if (!a) return;
if (a.paused) a.play().catch(() => {}); else a.pause();
}
function seek(e) {
const a = ref.current; if (!a) return;
const r = e.currentTarget.getBoundingClientRect();
const pct = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
if (a.duration) a.currentTime = pct * a.duration;
}
function next() {
if (trackIdx < list.length - 1) setTrackIdx(trackIdx + 1);
}
function prev() {
const a = ref.current;
if (a && a.currentTime > 2) { a.currentTime = 0; return; }
if (trackIdx > 0) setTrackIdx(trackIdx - 1);
}
const pct = dur ? (time / dur) * 100 : 0;
return (
§ Now playing
{cur?.title || title}
{subtitle}{list.length > 1 && ` · Track ${String(trackIdx + 1).padStart(2, "0")} / ${String(list.length).padStart(2, "0")}`}
{fmtTime(time)}{fmtTime(dur)}
{list.length > 1 && (
{list.map((t, i) => (
- { setTrackIdx(i); setPlaying(true); }}>
{String(i + 1).padStart(2, "0")}
{t.title}
{t.duration || "—"}
))}
)}
);
}
/* expose to other Babel files */
Object.assign(window, {
Icon, I, ICONS,
Placeholder, Logo, UntitledEmbed,
ToastProvider, useToast,
CartProvider, useCart,
RouteProvider, useRoute,
Header, Footer, CartDrawer,
VideoPlayer, MusicPlayer,
});