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

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

@ -10,7 +10,7 @@ The `ScrollerVideo` component creates interactive video experiences that respond
## 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.
@ -70,7 +70,7 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
## Embeds
Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable version, where the video autoplays when the user scrolls upon it. Optionally, you can control the embed video behaviour by passing `embeddedProps` to control the autoplay `delay`, `threshold` for triggering autoplay, and the `duration` of the video.
Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable version, where the video autoplays when the user scrolls upon it. Optionally, you can control the embed video behaviour by passing `embeddedProps` to control the autoplay `delay`, `threshold` for triggering autoplay, and the `duration` of the video.
> 💡**TIP:** Another way to recreate the ScrollerVideo experience for embeds is to record the desktop screen with [Scroll Capture](https://chromewebstore.google.com/detail/scroll-capture/egmhoeaacclmanaimofoooiamhpkimkk?hl=en) while scrolling through the video and use that video instead as an HTML video component.
@ -84,12 +84,12 @@ Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable versio
</script>
<ScrollerVideo
src='my-video.mp4'
src="my-video.mp4"
{embedded}
embeddedProps={{
delay: 200, // Optional: Delay before autoplay starts. Defaults to 200ms.
threshold: 0.5, // Optional: Threshold for triggering the autoplay. Defaults to 0.5.
duration: 5000, // Optional: Defaults to the duration of the video.
duration: 5000, // Optional: Defaults to the duration of the video.
}}
/>
```

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

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