From cb2fd262c4037a4935a29b232d8a6f1304e9ad04 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Mon, 2 Jun 2025 14:54:07 +0530
Subject: [PATCH] fixes video paths

---
 .../ScrollyVideo/ScrollyVideo.stories.svelte  | 42 +++++++++++--------
 .../ScrollyVideo/demo/WithScrollerBase.svelte |  3 +-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
index f8dd84c1..6a41892d 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
@@ -117,8 +117,19 @@
   });
 
   let width: number = $state(0);
+</script>
+
+<script>
+  import V_9_16 from './videos/v_9_16.mp4';
+  import V_1_1 from './videos/v_1_1.mp4';
+  import V_16_9 from './videos/v_16_9.mp4';
+  import Goldengate from './videos/goldengate.mp4';
 
   const args = $state({
+    V_9_16,
+    V_1_1,
+    V_16_9,
+    Goldengate,
     trackScroll: true,
     height: '500svh',
     showDebugInfo: true,
@@ -130,31 +141,26 @@
 
 <Story name="Basic" {args}></Story>
 
-<Story name="Multiple Videos" {args}>
+<Story
+  name="Multiple Videos"
+  args={{
+    trackScroll: true,
+    height: '500svh',
+    showDebugInfo: true,
+    autoplay: false,
+  }}
+>
   {#if width < 600}
-    <ScrollyVideo
-      {...args}
-      src={'./src/components/ScrollyVideo/videos/v_9_16.mp4'}
-    />
+    <ScrollyVideo {...args} src={args.V_9_16} />
   {:else if width < 1200}
-    <ScrollyVideo
-      {...args}
-      src={'./src/components/ScrollyVideo/videos/v_1_1.mp4'}
-    />
+    <ScrollyVideo {...args} src={args.V_1_1} />
   {:else}
-    <ScrollyVideo
-      {...args}
-      src={'./src/components/ScrollyVideo/videos/v_16_9.mp4'}
-    />
+    <ScrollyVideo {...args} src={args.V_16_9} />
   {/if}
 </Story>
 
 <Story name="Autoplay" {args}>
-  <ScrollyVideo
-    {...args}
-    src={'./src/components/ScrollyVideo/videos/goldengate.mp4'}
-    autoplay={true}
-  />
+  <ScrollyVideo {...args} src={args.Goldengate} autoplay={true} />
 </Story>
 
 <Story name="inside ScrollerBase" {args}>
diff --git a/src/components/ScrollyVideo/demo/WithScrollerBase.svelte b/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
index 80718878..3d877521 100644
--- a/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
@@ -4,6 +4,7 @@
   import Headline from '../../Headline/Headline.svelte';
   import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
   import AiMap from './graphic/ai2svelte/ai-chart.svelte';
+  import Goldengate from '../videos/goldengate.mp4';
 
   // ScrollerBase props
   let count = $state(1);
@@ -43,7 +44,7 @@
       </div>
 
       <ScrollyVideo
-        src={`../videos/goldengate.mp4`}
+        src={Goldengate}
         height="100svh"
         trackScroll={false}
         videoPercentage={progress}