From d43175c32d5c232042389e28ef488b724319ae7c Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Thu, 9 Oct 2025 18:57:15 +0530
Subject: [PATCH] fix ScrollerVideo progress reactivity

---
 .../ScrollerVideo/ScrollerVideo.mdx           |  5 ++-
 .../ScrollerVideo/ScrollerVideo.svelte        |  5 ++-
 .../demo/AdvancedUsecases.svelte              | 34 -------------------
 .../demo/WithScrollerBase.svelte              | 32 +----------------
 4 files changed, 9 insertions(+), 67 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index de50bf44..3ea2be77 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.mdx
+++ b/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()}
diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte
index 1ed3df3e..764dee7b 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.svelte
+++ b/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,
+        });
       }
     }
   });
diff --git a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte b/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
index 2f57db19..64049783 100644
--- a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
+++ b/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%;
diff --git a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
index 184bada1..949bf556 100644
--- a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
+++ b/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%;