From 876359db7c8eff624bad3a4ec04c1068c9f9501a Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 6 Aug 2025 09:52:05 -0400 Subject: [PATCH 1/5] prop tweaks --- .../ScrollerVideo/ScrollerVideo.mdx | 12 ++++---- .../ScrollerVideo/ScrollerVideo.svelte | 30 ++++++++----------- .../ScrollerVideo/ts/ScrollerVideo.ts | 14 ++++----- 3 files changed, 26 insertions(+), 30 deletions(-) diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx index a38b8a76..c678e8a5 100644 --- a/src/components/ScrollerVideo/ScrollerVideo.mdx +++ b/src/components/ScrollerVideo/ScrollerVideo.mdx @@ -10,9 +10,9 @@ The `ScrollerVideo` component creates interactive video experiences that respond ## Basic demo -To use the `ScrollerVideo` component, import it and provide the video source. Set the `height` prop to any valid CSS height value such as `1200px`, `150vh`, or `500lvh` to set the scroll height. +To use the `ScrollerVideo` component, import it and provide the video source. Set the `height` prop to any valid CSS height value such as `1200px` or `200lvh` to set the scroll height. -> It is advisable to use 'lvh' or 'svh' units instead of 'vh' unit for the height, as these units are more reliable across different devices. +> 💡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. [Demo](?path=/story/components-graphics-scrollervideo--demo) @@ -87,10 +87,10 @@ Setting `embedded` will autoplay the entire `ScrollerVideo` component like a vid showDebugInfo {embedded} embeddedProps={{ - delay: 200, - threshold: 0.5, // threshold for triggering the autoplay - height: '80lvh', // height of the scroll container - duration: 5000, // time duration from start to end + delay: 200, // Delay before autoplay starts + threshold: 0.5, // Threshold for triggering the autoplay + height: '80lvh', // Height of the embed video + duration: 5000, // Optional: Defaults to the duration of the video. }} /> ``` diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte index da3149c0..120a089f 100644 --- a/src/components/ScrollerVideo/ScrollerVideo.svelte +++ b/src/components/ScrollerVideo/ScrollerVideo.svelte @@ -1,6 +1,6 @@ + ``` @@ -81,15 +82,11 @@ Setting `embedded` will autoplay the entire `ScrollerVideo` component like a vid diff --git a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte index 3a3b12cf..ffdacf57 100644 --- a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte +++ b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte @@ -137,17 +137,7 @@ }; const args = { - trackScroll: true, - height: '500lvh', showDebugInfo: true, - autoplay: false, - full: true, - sticky: true, - objectFit: 'cover', - transitionSpeed: 8, - frameThreshold: 0.1, - useWebCodecs: true, - lockScroll: true, }; @@ -168,21 +158,11 @@ - - - + + + + + + + + + + + From 769b3fe98da5114797ae00ba396ccd9d25ccc2ff Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 6 Aug 2025 10:30:22 -0400 Subject: [PATCH 3/5] error log cleanup --- src/components/ScrollerVideo/ts/ScrollerVideo.ts | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/ScrollerVideo/ts/ScrollerVideo.ts b/src/components/ScrollerVideo/ts/ScrollerVideo.ts index e890422f..d8db3863 100644 --- a/src/components/ScrollerVideo/ts/ScrollerVideo.ts +++ b/src/components/ScrollerVideo/ts/ScrollerVideo.ts @@ -240,24 +240,8 @@ class ScrollerVideo { this.totalTime = 0; // The total time of the video, used for calculating percentage this.transitioningRaf = null; this.componentState = createComponentState(); - this.componentState.willAutoPlay = autoplay; - // Make sure that we have a DOM - if (typeof document !== 'object') { - console.error('ScrollerVideo must be initiated in a DOM context'); - return; - } - - // Make sure the basic arguments are set for scrollervideo - if (!scrollerVideoContainer) { - console.error('scrollerVideoContainer must be a valid DOM object'); - return; - } - if (!src) { - console.error('Must provide valid video src to ScrollerVideo'); - return; - } // Save the container. If the container is a string we get the element From f954208cce5f7b84231338f503b4492dbda7fdbb Mon Sep 17 00:00:00 2001 From: Sudev Kiyada Date: Thu, 7 Aug 2025 00:30:46 +0530 Subject: [PATCH 4/5] Update ScrollerVideo.svelte --- src/components/ScrollerVideo/ScrollerVideo.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte index 6d68fab0..eb2f0b5e 100644 --- a/src/components/ScrollerVideo/ScrollerVideo.svelte +++ b/src/components/ScrollerVideo/ScrollerVideo.svelte @@ -141,7 +141,6 @@ ...restProps, trackScroll: embedded ? false : restProps.trackScroll, // trackScroll disabled for embedded version autoplay: embedded ? false : restProps.autoplay, // autoplay disabled for embedded version - useWebCodecs: restProps.autoplay ? false : restProps.useWebCodecs, // useWebCodecs disabled for autoplay }); // if embedded prop is set, From b9b96e941732232eef662ca23a7eb08178abe5ea Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Thu, 7 Aug 2025 08:40:49 -0400 Subject: [PATCH 5/5] embed docs edit --- src/components/ScrollerVideo/ScrollerVideo.mdx | 6 ++++-- src/components/ScrollerVideo/demo/Embedded.svelte | 5 ++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx index acd2ba41..c5903c5c 100644 --- a/src/components/ScrollerVideo/ScrollerVideo.mdx +++ b/src/components/ScrollerVideo/ScrollerVideo.mdx @@ -70,7 +70,7 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp ## Embeds -Setting `embedded` will autoplay the entire `ScrollerVideo` component like a 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. @@ -79,11 +79,13 @@ Setting `embedded` will autoplay the entire `ScrollerVideo` component like a vid ```svelte @@ -59,7 +62,7 @@ src={Goldengate} class="embedded-demo" showDebugInfo={true} - embedded={true} + {embedded} embeddedProps={{ threshold: 0.5, duration: 12000,