file name cleanup

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,

src/components/ScrollyVideo/ScrollyVideo.stories.svelte

@@ -125,9 +125,9 @@
 </script>
 
 <script>
-  import Video_SM from './videos/v_9_16.mp4';
+  import Video_SM from './videos/waves_sm.mp4';
-  import Video_MD from './videos/v_1_1.mp4';
+  import Video_MD from './videos/waves_md.mp4';
-  import Video_LG from './videos/v_16_9.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}>
+<Story name="Responsive videos">
-  {#snippet children(args)}
+  {#if width < 600}
-    {#key args}
+    <ScrollyVideo {...args} src={videoSrc.Video_SM} />
-      {#if width < 600}
+  {:else if width < 1200}
-        <ScrollyVideo {...args} src={videoSrc.Video_SM} />
+    <ScrollyVideo {...args} src={videoSrc.Video_MD} />
-      {:else if width < 1200}
+  {:else}
-        <ScrollyVideo {...args} src={videoSrc.Video_MD} />
+    <ScrollyVideo {...args} src={videoSrc.Video_LG} />
-      {:else}
+  {/if}
-        <ScrollyVideo {...args} src={videoSrc.Video_LG} />
-      {/if}
-    {/key}
-  {/snippet}
 </Story>
 
 <Story name="Autoplay" {args}>
-  {#snippet children(args)}
+  <ScrollyVideo
-    {#key args}
+    {...args}
-      <ScrollyVideo
+    src={videoSrc.Goldengate}
-        {...args}
+    useWebCodecs={false}
-        src={videoSrc.Goldengate}
+    autoplay={true}
-        useWebCodecs={false}
+  ></ScrollyVideo>
-        autoplay={true}
-      ></ScrollyVideo>
-    {/key}
-  {/snippet}
 </Story>
 
 <Story name="Inside ScrollerBase" {args}>
-  {#snippet children(args)}
+  <WithScrollerBase />
-    {#key args}
-      <WithScrollerBase />
-    {/key}
-  {/snippet}
 </Story>
 
 <Story name="Time based foregrounds" {args}>
-  {#snippet children(args)}
+  <WithTimeline />
-    {#key args}
-      <WithTimeline />
-    {/key}
-  {/snippet}
 </Story>
 
 <Story name="Basic text foreground" {args}>
-  {#snippet children(args)}
+  <BasicTextBoxes />
-    {#key args}
-      <BasicTextBoxes />
-    {/key}
-  {/snippet}
 </Story>

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';

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 SM from '../videos/waves_sm.mp4';
-  import MD from '../videos/v_1_1.mp4';
+  import MD from '../videos/waves_md.mp4';
-  import LG from '../videos/v_16_9.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';