Update to latest solidjs and added some spice
This commit is contained in:
parent
fad746ceec
commit
b09418b3ec
35 changed files with 4318 additions and 2831 deletions
82
src/components/Progress.tsx
Normal file
82
src/components/Progress.tsx
Normal file
|
@ -0,0 +1,82 @@
|
|||
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;
|
Loading…
Add table
Add a link
Reference in a new issue