{
if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); onChange(Math.min(1, value + 0.05)); }
if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); onChange(Math.max(0, value - 0.05)); }
}}
>
);
}
function ReelPlayer({ tracks, playerId, footer }) {
const list = (tracks && tracks.length ? tracks : []).slice(0, 12);
const audioRef = React.useRef(null);
const [index, setIndex] = React.useState(0);
const [playing, setPlaying] = React.useState(false);
const [duration, setDuration] = React.useState(0);
const [currentTime, setCurrentTime] = React.useState(0);
const [seeking, setSeeking] = React.useState(false);
const [volume, setVolume] = React.useState(() => {
const v = parseFloat(localStorage.getItem("reel-volume"));
return Number.isFinite(v) ? v : 0.8;
});
const wantPlay = React.useRef(false);
const cur = list[index] || list[0] || {};
// ── Tracking bookkeeping ──────────────────────────────────────────────────
const tracker = () => window.ListenTracker;
// accumulate listened seconds per track between flushes
const acc = React.useRef({ seconds: 0, maxPos: 0, lastTick: 0 });
const meta = () => ({
player: playerId,
trackId: cur.id != null ? cur.id : index,
trackTitle: cur.title,
duration,
});
const flushProgress = (eventName) => {
const a = acc.current;
const pct = duration ? Math.min(100, (a.maxPos / duration) * 100) : 0;
if (a.seconds > 0.4 || eventName) {
tracker()?.event(eventName || "progress", {
...meta(),
position: a.maxPos,
seconds: a.seconds,
pct,
});
a.seconds = 0;
}
};
const bars = React.useMemo(() => reelWaveform(cur.src, 80), [cur.src]);
React.useEffect(() => {
if (audioRef.current) audioRef.current.volume = volume;
localStorage.setItem("reel-volume", String(volume));
}, [volume]);
// Wire native audio events
React.useEffect(() => {
const a = audioRef.current;
if (!a) return;
a.volume = volume;
const onPlay = () => {
setPlaying(true);
if (window.__currentAudio && window.__currentAudio !== a) {
try { window.__currentAudio.pause(); } catch (e) {}
}
window.__currentAudio = a;
acc.current.lastTick = a.currentTime;
tracker()?.event("play", { ...meta(), position: a.currentTime });
};
const onPause = () => {
setPlaying(false);
flushProgress("pause");
};
const onTime = () => {
if (!seeking) setCurrentTime(a.currentTime);
const ac = acc.current;
const dt = a.currentTime - ac.lastTick;
if (dt > 0 && dt < 2) ac.seconds += dt; // ignore seeks/jumps
ac.lastTick = a.currentTime;
ac.maxPos = Math.max(ac.maxPos, a.currentTime);
if (ac.seconds >= 8) flushProgress(); // periodic batch
};
const onMeta = () => setDuration(Number.isFinite(a.duration) ? a.duration : 0);
const onEnded = () => {
acc.current.maxPos = duration || acc.current.maxPos;
flushProgress("ended");
acc.current = { seconds: 0, maxPos: 0, lastTick: 0 };
if (index < list.length - 1) {
wantPlay.current = true;
setIndex(index + 1);
} else {
wantPlay.current = false;
setPlaying(false);
setCurrentTime(0);
a.currentTime = 0;
}
};
a.addEventListener("play", onPlay);
a.addEventListener("pause", onPause);
a.addEventListener("timeupdate", onTime);
a.addEventListener("loadedmetadata", onMeta);
a.addEventListener("durationchange", onMeta);
a.addEventListener("ended", onEnded);
return () => {
a.removeEventListener("play", onPlay);
a.removeEventListener("pause", onPause);
a.removeEventListener("timeupdate", onTime);
a.removeEventListener("loadedmetadata", onMeta);
a.removeEventListener("durationchange", onMeta);
a.removeEventListener("ended", onEnded);
if (window.__currentAudio === a) window.__currentAudio = null;
};
}, [index, seeking, list.length, duration]);
// Track changed: load + resume if we were playing
React.useEffect(() => {
const a = audioRef.current;
if (!a) return;
setCurrentTime(0);
setDuration(0);
acc.current = { seconds: 0, maxPos: 0, lastTick: 0 };
if (wantPlay.current) a.play().catch(() => {});
}, [index]);
const toggle = () => {
const a = audioRef.current;
if (!a) return;
if (a.paused) { wantPlay.current = true; a.play().catch(() => {}); }
else { wantPlay.current = false; a.pause(); }
};
const playTrack = (i) => {
if (i === index) { toggle(); return; }
flushProgress("skip");
wantPlay.current = true;
setIndex(i);
};
// Waveform seek
const trackRef = React.useRef(null);
const setTimeFromEvent = (e) => {
const a = audioRef.current, trk = trackRef.current;
if (!a || !trk || !duration) return;
const rect = trk.getBoundingClientRect();
const clientX = "clientX" in e ? e.clientX : (e.touches?.[0]?.clientX ?? 0);
const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
a.currentTime = pct * duration;
setCurrentTime(pct * duration);
acc.current.lastTick = a.currentTime; // don't count the jump as listening
};
const onPointerDown = (e) => {
setSeeking(true);
setTimeFromEvent(e);
e.preventDefault();
const move = (ev) => setTimeFromEvent(ev);
const up = () => {
setSeeking(false);
window.removeEventListener("pointermove", move);
window.removeEventListener("pointerup", up);
};
window.addEventListener("pointermove", move);
window.addEventListener("pointerup", up);
};
const progress = duration > 0 ? Math.max(0, Math.min(1, currentTime / duration)) : 0;
return (