82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { JSX, createEffect, createSignal, onCleanup } from "solid-js";
|
|
|
|
function ProgressHandler() {
|
|
const [scrollPercentage, setScrollPercentage] = createSignal(0);
|
|
// const [active, setActive] = createSignal("");
|
|
// const [zoomLevel, setZoomLevel] = createSignal(0);
|
|
// const zoomAmount = () => 1 + zoomLevel() * 0.5;
|
|
// const [x, setX] = createSignal(0);
|
|
// const [y, setY] = createSignal(0);
|
|
|
|
function ProgressBar() {
|
|
// const [muted, setMuted] = createSignal(true);
|
|
// const [controlls, setControlls] = createSignal(false);
|
|
// const [clientX, setClientX] = createSignal(0);
|
|
// const [clientY, setClientY] = createSignal(0);
|
|
// const [ref, setRef] = createSignal<HTMLElement | null>(null);
|
|
|
|
const handleScroll = () => {
|
|
const scrollHeight =
|
|
document.documentElement.scrollHeight - window.innerHeight;
|
|
const currentScroll = window.scrollY;
|
|
const scrollPercentage = (currentScroll / scrollHeight) * 100;
|
|
setScrollPercentage(scrollPercentage);
|
|
};
|
|
|
|
createEffect(() => {
|
|
window.addEventListener("scroll", handleScroll);
|
|
onCleanup(() => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
});
|
|
|
|
createEffect(() => {
|
|
// const thisRef = ref();
|
|
// if (!thisRef) return;
|
|
// const rectA = thisRef.getBoundingClientRect();
|
|
// const origSizeW = rectA.width / zoomAmount();
|
|
// const origSizeH = rectA.height / zoomAmount();
|
|
// const rectW = wrapperRef.getBoundingClientRect();
|
|
// const hori = rectW.width - origSizeW + origSizeW / zoomAmount();
|
|
// const verti = rectW.height - origSizeH + origSizeH / zoomAmount();
|
|
// const xP = (clientX() - hori / 2) / (rectW.width - hori);
|
|
// const yP = (clientY() - verti / 2) / (rectW.height - verti);
|
|
// setX((xP > 0 ? (xP < 1 ? xP : 1) : 0) * origSizeW);
|
|
// setY((yP > 0 ? (yP < 1 ? yP : 1) : 0) * origSizeH);
|
|
// const moving =
|
|
// clientX() > (rectW.width - origSizeW) / 2 &&
|
|
// clientX() < rectW.width - (rectW.width - origSizeW) / 2 &&
|
|
// clientY() > (rectW.height - origSizeH) / 2 &&
|
|
// clientY() < rectW.height - (rectW.height - origSizeH) / 2;
|
|
// setMoving(moving);
|
|
});
|
|
|
|
// let wrapperRef: HTMLDivElement;
|
|
|
|
createEffect(() => {
|
|
// if (active()) return;
|
|
// setZoomLevel(0);
|
|
// setMuted(true);
|
|
// setControlls(false);
|
|
});
|
|
|
|
return (
|
|
<div class="progress">
|
|
<></>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Chapter(props: { children: JSX.Element }) {
|
|
let divRef: HTMLDivElement;
|
|
// let videoRef: HTMLVideoElement;
|
|
|
|
// const shouldZoom = () => active() === props.src && !!zoomLevel();
|
|
|
|
return <div ref={divRef!}>{props.children}</div>;
|
|
}
|
|
|
|
return { FullscreenView: ProgressBar, Asset: Chapter };
|
|
}
|
|
|
|
export default ProgressHandler;
|