prop tweaks

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. 
   }}
 />
 ```

src/components/ScrollerVideo/ScrollerVideo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import ScrollerVideo from './ts/ScrollerVideo.js';
+  import ScrollerVideo from './ts/ScrollerVideo';
   import Debug from './Debug.svelte';
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
@@ -15,7 +15,7 @@
     /** Bindable instance of ScrollerVideo */
     scrollerVideo?: ScrollerVideo;
     /** Video source URL */
-    src?: string;
+    src: string;
     /** Bindable percentage value to control video playback. **Ranges from 0 to 1** */
     videoPercentage?: number;
     /** Sets the maximum playbackRate for this video */
@@ -75,14 +75,15 @@
    * Handles instantiation, prop changes, and cleanup.
    */
   let {
+    class: cls = '',
+    id = '',
+    src,
     scrollerVideo = $bindable(),
     videoPercentage,
     onReady = $bindable(() => {}),
     onChange = $bindable(() => {}),
     height = '200lvh',
     showDebugInfo = false,
-    class: cls = '',
-    id = '',
     embedded = false,
     embeddedProps,
     children,
@@ -136,6 +137,7 @@
         if (scrollerVideo && scrollerVideo.destroy) scrollerVideo.destroy();
 
         scrollerVideo = new ScrollerVideo({
+          src,
           scrollerVideoContainer,
           onReady,
           onChange,
@@ -246,7 +248,6 @@
 {#if embedded}
   <div
     class="embedded-scroller-video-container"
-    style="height: {allEmbedProps.height};"
     bind:this={embeddedContainer}
     bind:clientHeight={embeddedContainerHeight}
     onscroll={() => {
@@ -260,18 +261,8 @@
       }
     }}
   >
-    <!-- style needs to be >= 100lvh to allow child element to scroll -->
-    <!-- 200lvh provides smoother scrolling experience -->
-    <div
-      {id}
-      class="scroller-video-container embedded {cls}"
-      style="height: 200lvh;"
-    >
-      <div
-        bind:this={scrollerVideoContainer}
-        data-scroller-container
-        style="max-height: {allEmbedProps.height};"
-      >
+    <div {id} class="scroller-video-container embedded {cls}">
+      <div bind:this={scrollerVideoContainer} data-scroller-container>
         {@render supportingElements()}
       </div>
     </div>
@@ -292,6 +283,11 @@
   .scroller-video-container {
     width: 100%;
 
+    // Needs to be >= 100lvh to allow child element to scroll
+    // 200lvh provides smoother scrolling experience -->
+    &.embedded {
+      height: 200lvh;
+    }
     &:not(.embedded) {
       min-height: 100lvh;
     }

src/components/ScrollerVideo/ts/ScrollerVideo.ts

@@ -4,7 +4,7 @@ import { debounce, isScrollPositionAtTarget, map, constrain } from './utils';
 import { createComponentState, type ScrollerVideoState } from './state.svelte';
 
 interface ScrollerVideoArgs {
-  src?: string;
+  src: string;
   scrollerVideoContainer: HTMLElement | string;
   objectFit?: string;
   sticky?: boolean;
@@ -192,7 +192,7 @@ class ScrollerVideo {
    * @param {ScrollerVideoArgs} args - The arguments for initialization.
    */
   constructor({
-    src = 'https://scrollyvideo.js.org/goldengate.mp4',
+    src,
     scrollerVideoContainer,
     objectFit = 'cover',
     sticky = true,
@@ -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) {
@@ -741,7 +741,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(
@@ -780,7 +780,7 @@ class ScrollerVideo {
         isForwardTransition ?
           startCurrentTime +
           easedProgress * Math.abs(distance) * transitionSpeed
-        : startCurrentTime -
+          : startCurrentTime -
           easedProgress * Math.abs(distance) * transitionSpeed;
 
       if (this.canvas) {
@@ -869,7 +869,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;