// app/exercise.jsx — exercise detail: portrait video + draggable detail sheet // Exports to window: ExerciseDetail const CARD_DEFAULT = 300; const CARD_EXPANDED = 512; function ExerciseDetail({ ex, done, seriesDone = 0, onAddSeries, onBack, hasNext, onNext, hasPrev, onPrev }) { const [playing, setPlaying] = React.useState(true); const [secLeft, setSecLeft] = React.useState(ex.kind === "time" ? ex.hold : null); const [running, setRunning] = React.useState(false); const [view, setView] = React.useState("default"); // default | expanded | fullscreen const [liveH, setLiveH] = React.useState(null); // live card height while dragging const drag = React.useRef({ y: 0, active: false, moved: false }); const partial = seriesDone > 0 && !done; const hasTimer = ex.kind === "time"; // switching exercises keeps the current view (e.g. fullscreen) but resets the clip React.useEffect(() => { setPlaying(true); setSecLeft(ex.kind === "time" ? ex.hold : null); setRunning(false); }, [ex.id]); // vertical swipe on the video → next / previous exercise (works in fullscreen too) const vSwipe = React.useRef({ y: 0, active: false }); const onVideoDown = (e) => { vSwipe.current = { y: e.clientY, active: true }; }; const onVideoUp = (e) => { if (!vSwipe.current.active) return; const dy = e.clientY - vSwipe.current.y; vSwipe.current.active = false; if (filled) { setView("default"); setLiveH(null); return; } if (dy < -64 && hasNext) onNext && onNext(); else if (dy > 64 && hasPrev) onPrev && onPrev(); }; const baseH = view === "expanded" ? CARD_EXPANDED : view === "fullscreen" ? 0 : CARD_DEFAULT; const cardH = liveH != null ? liveH : baseH; const filled = cardH < 60; // video fills the screen // description reveals once the sheet is pulled up past the default const showDetails = view === "expanded" || (liveH != null && liveH > CARD_DEFAULT + 50); // ── drag on the sheet handle ── const onDown = (e) => { drag.current = { y: e.clientY, base: baseH, active: true, moved: false }; e.currentTarget.setPointerCapture?.(e.pointerId); }; const onMove = (e) => { if (!drag.current.active) return; const dy = e.clientY - drag.current.y; if (Math.abs(dy) > 4) drag.current.moved = true; let h = drag.current.base - dy; // drag up → taller h = Math.max(0, Math.min(CARD_EXPANDED, h)); setLiveH(h); }; const onUp = () => { if (!drag.current.active) return; const h = liveH; drag.current.active = false; setLiveH(null); if (!drag.current.moved) { // tap → toggle default/expanded setView((v) => (v === "expanded" ? "default" : "expanded")); return; } if (h == null) return; if (h < 60) setView("fullscreen"); else if (h > (CARD_DEFAULT + CARD_EXPANDED) / 2) setView("expanded"); else setView("default"); }; React.useEffect(() => { if (!running || secLeft == null) return; if (secLeft <= 0) { setRunning(false); setSecLeft(ex.hold); return; } const id = setTimeout(() => setSecLeft((s) => s - 1), 1000); return () => clearTimeout(id); }, [running, secLeft]); const mm = String(Math.floor((secLeft || 0) / 60)).padStart(1, "0"); const ss = String((secLeft || 0) % 60).padStart(2, "0"); const timerActive = hasTimer && (running || (secLeft != null && secLeft < ex.hold)); const startTimer = () => { setSecLeft(ex.hold); setRunning(true); }; const cancelTimer = () => { setRunning(false); setSecLeft(ex.hold); }; const noTrans = liveH != null; const ease = "cubic-bezier(.32,.72,0,1)"; const metrics = exMetrics(ex, { seriesDone, done }); const compactStat = metrics.length >= 4; const Stat = ({ m }) => { const tone = m.key === "sets" ? (done ? "ok" : partial ? "accent" : "plain") : "plain"; const bg = tone === "ok" ? "var(--ok-wash)" : tone === "accent" ? "var(--accent-wash)" : "var(--chip)"; const fg = tone === "ok" ? "var(--ok-ink)" : tone === "accent" ? "var(--accent-ink)" : "var(--ink)"; return (
{m.value}
{m.label}
); }; return (
{/* ── video stage (narrow phone-rectangle portrait) ── */}
{ vSwipe.current.active = false; }} style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: cardH, transition: noTrans ? "none" : `bottom .34s ${ease}`, display: "flex", alignItems: "center", justifyContent: "center", touchAction: "pan-x", padding: filled ? 0 : "64px 20px 12px" }}>
{!filled && ( )}
{/* ── back button — hidden in fullscreen ── */} {!filled && ( )} {/* ── drag handle when fullscreen — always in DOM so setPointerCapture survives filled→false mid-drag ── */}
{/* ── bottom detail sheet ── */}
{/* drag handle */}
{/* body */}
{/* name + variation + completion (flexShrink 0) */}
{ex.variation && (
{ex.variation}
)} {/* metric stats — série · výdrž · (záťaž) · pauza (flexShrink 0) */}
{metrics.map((m) => )}
{/* MIDDLE — description emerges here, between stats and timer */}
{showDetails ? (
{ex.hint} Pohyb robte pomaly a plynulo, bez bolesti.
) : ( )}
{/* TIMER — plain stopwatch row (euneo style), divider above; fixed height so it never jumps */} {hasTimer && (
{timerActive ? (
{mm}:{ss}
) : ( )}
)} ); } Object.assign(window, { ExerciseDetail });