| import {useCallback, useEffect, useRef, useState} from 'react'; |
| import type {RefObject} from 'react'; |
| import {clamp} from './dualStory'; |
|
|
| export function useScrollStory(section: RefObject<HTMLDivElement | null>, stage: RefObject<HTMLDivElement | null>, enabled: boolean, flow: boolean) { |
| const [progress, setProgress] = useState(0); |
| const current = useRef(0); |
| const commit = useCallback((p: number) => { current.current = p; setProgress(p); }, []); |
| const position = useCallback(() => { |
| if (!section.current || !stage.current) return 0; |
| const top = parseFloat(getComputedStyle(stage.current).top) || 0; |
| const span = section.current.offsetHeight - stage.current.offsetHeight; |
| return span > 0 ? clamp((top - section.current.getBoundingClientRect().top) / span) : 0; |
| }, [section, stage]); |
| useEffect(() => { |
| if (flow || !enabled) return; |
| let frame = 0, last = 0, visible = false, disposed = false; |
| let target = current.current; |
| const stop = () => { cancelAnimationFrame(frame); frame = 0; last = 0; }; |
| const tick = (now: number) => { |
| frame = 0; |
| if (!visible || document.hidden || disposed) return; |
| const dt = last ? Math.min(64, now - last) : 16; |
| last = now; |
| const next = current.current + (target - current.current) * (1 - Math.exp(-dt / 85)); |
| if (Math.abs(target - next) < .00008) { commit(target); last = 0; } |
| else { commit(next); frame = requestAnimationFrame(tick); } |
| }; |
| const update = () => { |
| if (!visible || document.hidden || disposed) return; |
| target = position(); |
| if (!frame && target !== current.current) frame = requestAnimationFrame(tick); |
| }; |
| const visibility = () => { if (document.hidden) stop(); else update(); }; |
| const observer = new IntersectionObserver(([entry]) => { |
| visible = entry.isIntersecting; |
| if (visible) update(); else stop(); |
| }); |
| if (stage.current) observer.observe(stage.current); |
| const resize = new ResizeObserver(update); |
| if (section.current) resize.observe(section.current); |
| resize.observe(document.body); |
| window.addEventListener('scroll', update, {passive:true}); |
| window.addEventListener('resize', update); |
| document.addEventListener('visibilitychange', visibility); |
| document.fonts.ready.then(update); |
| return () => { disposed = true; stop(); observer.disconnect(); resize.disconnect(); window.removeEventListener('scroll', update); window.removeEventListener('resize', update); document.removeEventListener('visibilitychange', visibility); }; |
| }, [enabled, flow, position, commit, section, stage]); |
| const seek = useCallback((p: number) => { |
| if (!section.current || !stage.current || flow) return; |
| const offset = parseFloat(getComputedStyle(stage.current).top) || 0; |
| const span = section.current.offsetHeight - stage.current.offsetHeight; |
| |
| commit(clamp(p)); |
| window.scrollTo({top:section.current.getBoundingClientRect().top + scrollY - offset + span * clamp(p), behavior:'instant'}); |
| }, [section, stage, flow, commit]); |
| return {progress, seek}; |
| } |
|
|
