Merge pull request #361 from reuters-graphics/sk-scrollervideo-fix

Fixes progress reactivity for scrollerVideo

.changeset/evil-pillows-wave.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Enhances progress reactivity for ScrollerVideo

src/components/ScrollerVideo/ScrollerVideo.mdx

@@ -348,8 +348,11 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
     <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
     <ScrollerVideo
       src="my-video.mp4"
-      videoPercentage={progress}
+      height="100lvh"
       trackScroll={false}
+      videoPercentage={progress}
+      transitionSpeed={40}
+      showDebugInfo
     />
   {/snippet}
   {#snippet foregroundSnippet()}

src/components/ScrollerVideo/ScrollerVideo.svelte

@@ -200,7 +200,10 @@
         videoPercentage >= 0 &&
         videoPercentage <= 1
       ) {
-        scrollerVideo.setVideoPercentage(videoPercentage);
+        scrollerVideo.setVideoPercentage(videoPercentage, {
+          jump: false,
+          transitionSpeed: restProps.transitionSpeed || 8,
+        });
       }
     }
   });

src/components/ScrollerVideo/demo/AdvancedUsecases.svelte

@@ -63,40 +63,6 @@
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
-  // svelte-scroller-background
-  #progress-bar {
-    background-color: rgba(0, 0, 0, 0.8);
-    position: absolute;
-    z-index: 4;
-    right: 0;
-    padding: 1rem;
-    top: 0;
-
-    progress {
-      height: 6px;
-      background-color: #ff000044; /* Background color of the entire bar */
-      margin: 0;
-    }
-
-    progress::-webkit-progress-value {
-      background-color: white;
-      border-radius: 10px;
-    }
-
-    progress::-webkit-progress-bar {
-      background-color: #444444;
-      border-radius: 10px;
-    }
-
-    p {
-      font-family: var(--theme-font-family-sans-serif);
-      color: white;
-      font-size: var(--theme-font-size-xs);
-      padding: 0;
-      margin: 0;
-    }
-  }
-
   .step-foreground-container {
     height: 100lvh;
     width: 50%;

src/components/ScrollerVideo/demo/WithScrollerBase.svelte

@@ -14,6 +14,7 @@
       height="100lvh"
       trackScroll={false}
       videoPercentage={progress}
+      transitionSpeed={40}
       showDebugInfo
     />
   {/snippet}
@@ -34,37 +35,6 @@
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
-  #progress-bar {
-    background-color: rgba(0, 0, 0, 0.8);
-    position: absolute;
-    z-index: 2;
-    right: 0;
-    padding: 1rem;
-
-    progress {
-      height: 6px;
-      background-color: #ff000044; /* Background color of the entire bar */
-    }
-
-    progress::-webkit-progress-value {
-      background-color: white;
-      border-radius: 10px;
-    }
-
-    progress::-webkit-progress-bar {
-      background-color: #444444;
-      border-radius: 10px;
-    }
-
-    p {
-      font-family: var(--theme-font-family-sans-serif);
-      color: white;
-      font-size: var(--theme-font-size-xs);
-      padding: 0;
-      margin: 0;
-    }
-  }
-
   .step-foreground-container {
     height: 100lvh;
     width: 50%;