From 7df111d13ec5910097cc2875c5acac8a894d143e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 17 Jul 2025 13:30:02 -0400
Subject: [PATCH] file name cleanup

---
 src/components/ScrollyVideo/Foreground.svelte |   2 +-
 .../ScrollyVideo/ScrollyVideo.stories.svelte  |  64 ++++++------------
 .../ScrollyVideo/ScrollyVideo.svelte          |   2 +-
 .../ScrollyVideo/demo/WithTimeline.svelte     |   6 +-
 .../ScrollyVideo/{js => ts}/ScrollyVideo.ts   |   0
 .../ScrollyVideo/{js => ts}/mp4box.d.ts       |   0
 .../ScrollyVideo/{js => ts}/state.svelte.ts   |   0
 .../ScrollyVideo/{js => ts}/utils.ts          |   0
 .../ScrollyVideo/{js => ts}/videoDecoder.ts   |   0
 .../videos/{v_16_9.mp4 => waves_lg.mp4}       | Bin
 .../videos/{v_1_1.mp4 => waves_md.mp4}        | Bin
 .../videos/{v_9_16.mp4 => waves_sm.mp4}       | Bin
 12 files changed, 27 insertions(+), 47 deletions(-)
 rename src/components/ScrollyVideo/{js => ts}/ScrollyVideo.ts (100%)
 rename src/components/ScrollyVideo/{js => ts}/mp4box.d.ts (100%)
 rename src/components/ScrollyVideo/{js => ts}/state.svelte.ts (100%)
 rename src/components/ScrollyVideo/{js => ts}/utils.ts (100%)
 rename src/components/ScrollyVideo/{js => ts}/videoDecoder.ts (100%)
 rename src/components/ScrollyVideo/videos/{v_16_9.mp4 => waves_lg.mp4} (100%)
 rename src/components/ScrollyVideo/videos/{v_1_1.mp4 => waves_md.mp4} (100%)
 rename src/components/ScrollyVideo/videos/{v_9_16.mp4 => waves_sm.mp4} (100%)

diff --git a/src/components/ScrollyVideo/Foreground.svelte b/src/components/ScrollyVideo/Foreground.svelte
index c38f0962..28da3ebd 100644
--- a/src/components/ScrollyVideo/Foreground.svelte
+++ b/src/components/ScrollyVideo/Foreground.svelte
@@ -6,7 +6,7 @@
   import { Markdown } from '@reuters-graphics/svelte-markdown';
 
   // Types
-  import type { ScrollyVideoState } from './js/state.svelte';
+  import type { ScrollyVideoState } from './ts/state.svelte';
   import type {
     ContainerWidth,
     ScrollyVideoForegroundPosition,
diff --git a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
index fbe9f181..1dcea2f8 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
@@ -125,9 +125,9 @@
 </script>
 
 <script>
-  import Video_SM from './videos/v_9_16.mp4';
-  import Video_MD from './videos/v_1_1.mp4';
-  import Video_LG from './videos/v_16_9.mp4';
+  import Video_SM from './videos/waves_sm.mp4';
+  import Video_MD from './videos/waves_md.mp4';
+  import Video_LG from './videos/waves_lg.mp4';
   import Goldengate from './videos/goldengate.mp4';
 
   const videoSrc = {
@@ -137,7 +137,7 @@
     Goldengate,
   };
 
-  const args = $state({
+  const args = {
     trackScroll: true,
     height: '500svh',
     showDebugInfo: true,
@@ -149,60 +149,40 @@
     frameThreshold: 0.1,
     useWebCodecs: true,
     lockScroll: true,
-  });
+  };
 </script>
 
 <svelte:window bind:innerWidth={width} />
 
 <Story name="Basic" {args}></Story>
 
-<Story name="Multiple Videos" {args}>
-  {#snippet children(args)}
-    {#key args}
-      {#if width < 600}
-        <ScrollyVideo {...args} src={videoSrc.Video_SM} />
-      {:else if width < 1200}
-        <ScrollyVideo {...args} src={videoSrc.Video_MD} />
-      {:else}
-        <ScrollyVideo {...args} src={videoSrc.Video_LG} />
-      {/if}
-    {/key}
-  {/snippet}
+<Story name="Responsive videos">
+  {#if width < 600}
+    <ScrollyVideo {...args} src={videoSrc.Video_SM} />
+  {:else if width < 1200}
+    <ScrollyVideo {...args} src={videoSrc.Video_MD} />
+  {:else}
+    <ScrollyVideo {...args} src={videoSrc.Video_LG} />
+  {/if}
 </Story>
 
 <Story name="Autoplay" {args}>
-  {#snippet children(args)}
-    {#key args}
-      <ScrollyVideo
-        {...args}
-        src={videoSrc.Goldengate}
-        useWebCodecs={false}
-        autoplay={true}
-      ></ScrollyVideo>
-    {/key}
-  {/snippet}
+  <ScrollyVideo
+    {...args}
+    src={videoSrc.Goldengate}
+    useWebCodecs={false}
+    autoplay={true}
+  ></ScrollyVideo>
 </Story>
 
 <Story name="Inside ScrollerBase" {args}>
-  {#snippet children(args)}
-    {#key args}
-      <WithScrollerBase />
-    {/key}
-  {/snippet}
+  <WithScrollerBase />
 </Story>
 
 <Story name="Time based foregrounds" {args}>
-  {#snippet children(args)}
-    {#key args}
-      <WithTimeline />
-    {/key}
-  {/snippet}
+  <WithTimeline />
 </Story>
 
 <Story name="Basic text foreground" {args}>
-  {#snippet children(args)}
-    {#key args}
-      <BasicTextBoxes />
-    {/key}
-  {/snippet}
+  <BasicTextBoxes />
 </Story>
diff --git a/src/components/ScrollyVideo/ScrollyVideo.svelte b/src/components/ScrollyVideo/ScrollyVideo.svelte
index 20ebcfe6..d03a1f03 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import ScrollyVideo from './js/ScrollyVideo.js';
+  import ScrollyVideo from './ts/ScrollyVideo.js';
   import Debug from './Debug.svelte';
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
diff --git a/src/components/ScrollyVideo/demo/WithTimeline.svelte b/src/components/ScrollyVideo/demo/WithTimeline.svelte
index 3eb4f7cd..1872c38d 100644
--- a/src/components/ScrollyVideo/demo/WithTimeline.svelte
+++ b/src/components/ScrollyVideo/demo/WithTimeline.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import ScrollyVideo from '../ScrollyVideo.svelte';
   import Foreground from '../Foreground.svelte';
-  import SM from '../videos/v_9_16.mp4';
-  import MD from '../videos/v_1_1.mp4';
-  import LG from '../videos/v_16_9.mp4';
+  import SM from '../videos/waves_sm.mp4';
+  import MD from '../videos/waves_md.mp4';
+  import LG from '../videos/waves_lg.mp4';
   import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
   import Headline from '../../Headline/Headline.svelte';
   import Annotation1 from './graphic/ai2svelte/annotation1.svelte';
diff --git a/src/components/ScrollyVideo/js/ScrollyVideo.ts b/src/components/ScrollyVideo/ts/ScrollyVideo.ts
similarity index 100%
rename from src/components/ScrollyVideo/js/ScrollyVideo.ts
rename to src/components/ScrollyVideo/ts/ScrollyVideo.ts
diff --git a/src/components/ScrollyVideo/js/mp4box.d.ts b/src/components/ScrollyVideo/ts/mp4box.d.ts
similarity index 100%
rename from src/components/ScrollyVideo/js/mp4box.d.ts
rename to src/components/ScrollyVideo/ts/mp4box.d.ts
diff --git a/src/components/ScrollyVideo/js/state.svelte.ts b/src/components/ScrollyVideo/ts/state.svelte.ts
similarity index 100%
rename from src/components/ScrollyVideo/js/state.svelte.ts
rename to src/components/ScrollyVideo/ts/state.svelte.ts
diff --git a/src/components/ScrollyVideo/js/utils.ts b/src/components/ScrollyVideo/ts/utils.ts
similarity index 100%
rename from src/components/ScrollyVideo/js/utils.ts
rename to src/components/ScrollyVideo/ts/utils.ts
diff --git a/src/components/ScrollyVideo/js/videoDecoder.ts b/src/components/ScrollyVideo/ts/videoDecoder.ts
similarity index 100%
rename from src/components/ScrollyVideo/js/videoDecoder.ts
rename to src/components/ScrollyVideo/ts/videoDecoder.ts
diff --git a/src/components/ScrollyVideo/videos/v_16_9.mp4 b/src/components/ScrollyVideo/videos/waves_lg.mp4
similarity index 100%
rename from src/components/ScrollyVideo/videos/v_16_9.mp4
rename to src/components/ScrollyVideo/videos/waves_lg.mp4
diff --git a/src/components/ScrollyVideo/videos/v_1_1.mp4 b/src/components/ScrollyVideo/videos/waves_md.mp4
similarity index 100%
rename from src/components/ScrollyVideo/videos/v_1_1.mp4
rename to src/components/ScrollyVideo/videos/waves_md.mp4
diff --git a/src/components/ScrollyVideo/videos/v_9_16.mp4 b/src/components/ScrollyVideo/videos/waves_sm.mp4
similarity index 100%
rename from src/components/ScrollyVideo/videos/v_9_16.mp4
rename to src/components/ScrollyVideo/videos/waves_sm.mp4