);
}
// ─── Scroll hint ────────────────────────────────────────────────────────────
function ScrollHint({ progress, lang }) {
// Context-aware: at the very top, hint points DOWN from the bottom of the
// viewport; at the very bottom, it sits below the topbar and points UP.
const atTop = progress < 0.015;
const atBottom = progress > 0.985;
if (!atTop && !atBottom) return null;
const dir = atTop ? "down" : "up";
const label = lang === "he" ? "גלול" : "Scroll";
return (
{dir === "up" && }
{label}
{dir === "down" && }
);
}
// ─── Main scene ─────────────────────────────────────────────────────────────
function Scene({ variant = "glass", lang = "en", scrollSpeedVhPerSec, showRail = true, videoFit = "contain" }) {
const cfg = window.sceneConfig;
if (!cfg) {
return
[scene] window.sceneConfig is missing.
;
}
const sectionRef = useRef(null);
const videoRef = useRef(null);
const targetTimeRef = useRef(0);
const [progress, setProgress] = useState(0);
const [duration, setDuration] = useState(cfg.video.duration || 12);
const sourceInfo = useMemo(() => pickVideoSource(cfg), []);
const speed = scrollSpeedVhPerSec || cfg.scrollSpeedVhPerSec || 60;
const sectionHeightVh = duration * speed;
// ─── Scroll → progress ───────────────────────────────────────────────────
useEffect(() => {
const onScroll = () => {
const sec = sectionRef.current;
if (!sec) return;
const rect = sec.getBoundingClientRect();
const vh = window.innerHeight;
const total = sec.offsetHeight - vh;
const scrolled = -rect.top;
let p = total > 0 ? scrolled / total : 0;
p = Math.max(0, Math.min(1, p));
setProgress(p);
targetTimeRef.current = p * duration;
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, [duration]);
// ─── RAF: smoothly approach target currentTime ───────────────────────────
useEffect(() => {
let raf;
let last = performance.now();
const tick = (now) => {
const dt = Math.min(0.1, (now - last) / 1000);
last = now;
const v = videoRef.current;
if (v && v.readyState >= 2 && duration > 0) {
const cur = v.currentTime;
const tgt = targetTimeRef.current;
const diff = tgt - cur;
// jump if huge, ease in otherwise
const next = Math.abs(diff) > 0.8 ? tgt : cur + diff * Math.min(1, dt * 14);
const clamped = Math.max(0, Math.min(duration - 0.02, next));
if (Math.abs(clamped - cur) > 0.005) {
try {v.currentTime = clamped;} catch (e) {}
}
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [duration]);
// ─── On metadata: correct duration ───────────────────────────────────────
useEffect(() => {
const v = videoRef.current;
if (!v) return;
const onMeta = () => {
const real = v.duration;
if (real && isFinite(real) && Math.abs(real - duration) > 0.2) {
setDuration(real);
}
};
if (v.readyState >= 1) onMeta();
v.addEventListener("loadedmetadata", onMeta);
return () => v.removeEventListener("loadedmetadata", onMeta);
}, []); // mount only
// ─── Autoplay-driven first-frame paint: muted + playsInline + autoPlay
// is the iOS Safari combo that lets the video paint frame 0 on load,
// without waiting for a user gesture. As soon as it starts playing we
// pause it and seek to the scroll-driven target so the scroll loop
// takes over without a visible flash of forward playback.
useEffect(() => {
const v = videoRef.current;
if (!v) return;
let snapped = false;
const snap = () => {
if (snapped) return;
snapped = true;
try {
v.pause();
v.currentTime = targetTimeRef.current || 0;
} catch (e) {}
};
v.addEventListener("playing", snap, { once: true });
v.addEventListener("timeupdate", snap, { once: true });
return () => {
v.removeEventListener("playing", snap);
v.removeEventListener("timeupdate", snap);
};
}, []); // mount only
// ─── Gesture fallback: if autoplay was blocked (older WebViews, strict
// power-saving modes), this still kicks play()→pause() on the first
// touch/scroll/click so the scroll-scrub works.
useEffect(() => {
let unlocked = false;
const unlock = () => {
if (unlocked) return;
const v = videoRef.current;
if (!v) return;
unlocked = true;
try {
const p = v.play();
if (p && typeof p.then === "function") {
p.then(() => { try { v.pause(); v.currentTime = targetTimeRef.current || 0; } catch(e){} })
.catch(() => {});
} else {
try { v.pause(); } catch(e) {}
}
} catch(e) {}
window.removeEventListener("touchstart", unlock);
window.removeEventListener("touchend", unlock);
window.removeEventListener("scroll", unlock);
window.removeEventListener("click", unlock);
window.removeEventListener("pointerdown",unlock);
};
window.addEventListener("touchstart", unlock, { passive:true });
window.addEventListener("touchend", unlock, { passive:true });
window.addEventListener("scroll", unlock, { passive:true });
window.addEventListener("click", unlock);
window.addEventListener("pointerdown", unlock);
return () => {
window.removeEventListener("touchstart", unlock);
window.removeEventListener("touchend", unlock);
window.removeEventListener("scroll", unlock);
window.removeEventListener("click", unlock);
window.removeEventListener("pointerdown",unlock);
};
}, []); // mount only
return (