wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

formats

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-08-07 08:56:12 -04:00
parent aa4a8e9a70
commit 01b94018dc
Failed to extract signature
2 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/ScrollerVideo/ScrollerVideo.mdx
View file

@ -10,7 +10,7 @@ The `ScrollerVideo` component creates interactive video experiences that respond
## Basic demo ## Basic demo
To use the `ScrollerVideo` component, import it and provide the video source. The scroll height defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop. To use the `ScrollerVideo` component, import it and provide the video source. The scroll height defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
> 💡TIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden. > 💡TIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden.
@ -84,7 +84,7 @@ Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable versio
</script> </script>
<ScrollerVideo <ScrollerVideo
src='my-video.mp4' src="my-video.mp4"
{embedded} {embedded}
embeddedProps={{ embeddedProps={{
delay: 200, // Optional: Delay before autoplay starts. Defaults to 200ms. delay: 200, // Optional: Delay before autoplay starts. Defaults to 200ms.

11
src/components/ScrollerVideo/ts/ScrollerVideo.ts
View file

@ -202,8 +202,8 @@ class ScrollerVideo {
transitionSpeed = 8, transitionSpeed = 8,
frameThreshold = 0.1, frameThreshold = 0.1,
useWebCodecs = true, useWebCodecs = true,
onReady = () => { }, onReady = () => {},
onChange = (_percentage?: number) => { }, onChange = (_percentage?: number) => {},
debug = false, debug = false,
autoplay = false, autoplay = false,
}: ScrollerVideoArgs) { }: ScrollerVideoArgs) {
@ -242,7 +242,6 @@ class ScrollerVideo {
this.componentState = createComponentState(); this.componentState = createComponentState();
this.componentState.willAutoPlay = autoplay; this.componentState.willAutoPlay = autoplay;
// Save the container. If the container is a string we get the element // Save the container. If the container is a string we get the element
if (scrollerVideoContainer && scrollerVideoContainer instanceof HTMLElement) if (scrollerVideoContainer && scrollerVideoContainer instanceof HTMLElement)
@ -725,7 +724,7 @@ class ScrollerVideo {
const hasPassedThreshold = const hasPassedThreshold =
isForwardTransition ? isForwardTransition ?
this.currentTime >= this.targetTime this.currentTime >= this.targetTime
: this.currentTime <= this.targetTime; : this.currentTime <= this.targetTime;
if (this.componentState.isAutoPlaying) { if (this.componentState.isAutoPlaying) {
this.componentState.autoplayProgress = parseFloat( this.componentState.autoplayProgress = parseFloat(
@ -764,7 +763,7 @@ class ScrollerVideo {
isForwardTransition ? isForwardTransition ?
startCurrentTime + startCurrentTime +
easedProgress * Math.abs(distance) * transitionSpeed easedProgress * Math.abs(distance) * transitionSpeed
: startCurrentTime - : startCurrentTime -
easedProgress * Math.abs(distance) * transitionSpeed; easedProgress * Math.abs(distance) * transitionSpeed;
if (this.canvas) { if (this.canvas) {
@ -853,7 +852,7 @@ class ScrollerVideo {
const targetDuration = const targetDuration =
this.frames?.length && this.frameRate ? this.frames?.length && this.frameRate ?
this.frames.length / this.frameRate this.frames.length / this.frameRate
: this.video?.duration || 0; : this.video?.duration || 0;
// The time we want to transition to // The time we want to transition to
this.targetTime = Math.max(Math.min(percentage, 1), 0) * targetDuration; this.targetTime = Math.max(Math.min(percentage, 1), 0) * targetDuration;