From 48679a970c5969ec6e9bdccd4f84226cdcbd1f15 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 21 Jul 2025 14:02:56 -0400
Subject: [PATCH] finished demos, docs updates

---
 src/components/ScrollerBase/ScrollerBase.mdx  |   5 -
 src/components/ScrollyVideo/ScrollyVideo.mdx  | 170 +++---------------
 .../ScrollyVideo/ScrollyVideo.stories.svelte  |   5 +
 .../ScrollyVideo/ScrollyVideo.svelte          |   8 +-
 .../ScrollyVideo/demo/AdvancedUsecases.svelte |   5 +
 .../ScrollyVideo/demo/WithScrollerBase.svelte | 135 ++++----------
 6 files changed, 71 insertions(+), 257 deletions(-)
 create mode 100644 src/components/ScrollyVideo/demo/AdvancedUsecases.svelte

diff --git a/src/components/ScrollerBase/ScrollerBase.mdx b/src/components/ScrollerBase/ScrollerBase.mdx
index 38af0851..7d8da9a7 100644
--- a/src/components/ScrollerBase/ScrollerBase.mdx
+++ b/src/components/ScrollerBase/ScrollerBase.mdx
@@ -64,11 +64,6 @@ The `ScrollerBase` component powers the [`Scroller` component](?path=/story/comp
 <style lang="scss">
   @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
 
-  .scroller-demo-container {
-    width: mixins.$column-width-normal;
-    margin: auto;
-  }
-
   .step-foreground-container {
     height: 100vh;
     width: 50%;
diff --git a/src/components/ScrollyVideo/ScrollyVideo.mdx b/src/components/ScrollyVideo/ScrollyVideo.mdx
index 525e93b3..57e51ba9 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.mdx
+++ b/src/components/ScrollyVideo/ScrollyVideo.mdx
@@ -343,176 +343,62 @@ endTime: 0.3 # When to stop showing the headline
 
 ## Using with `ScrollerBase`
 
-The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for more complex interactions and layouts, such as adding ai2svelte components in the foreground.
+The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for foreground that scrolls up and down over the video, instead of fading in and out at specific times.
+
+> **Note**: To use `ScrollyVideo` with `ScrollerBase`, set `trackScroll` to `false` and pass the bindable prop `progress` from `ScrollerBase` as `videoPercentage` to `ScrollyVideo`.  
 
 [Demo](?path=/story/components-graphics-scrollyvideo--scroller-base)
 
 ```svelte
 <script lang="ts">
   import {
-    Headline,
-    GraphicBlock,
     ScrollyVideo,
     ScrollerBase,
   } from '@reuters-graphics/graphics-components';
-  import AiMap from './ai2svelte/ai-chart.svelte';
 
-  // ScrollerBase props
-  let count = $state(1);
-  let index = $state(0);
-  let offset = $state(0);
-  let progress = $state(0);
-  let top = $state(0);
-  let threshold = $state(0);
-  let bottom = $state(1);
+  // Pass `progress` as `videoPercentage` to ScrollyVideo
+  let progress = $state(0); 
 </script>
 
-<div class="scroller-demo-container">
   <ScrollerBase
-    {top}
-    {threshold}
-    {bottom}
-    bind:count
-    bind:index
-    bind:offset
     bind:progress
     query="div.step-foreground-container"
-    visible
   >
     {#snippet backgroundSnippet()}
-      <!-- Add custom background HTML or component -->
-      <div id="progress-bar">
-        <p>
-          Current step: <strong>{index + 1}/{count}</strong>
-        </p>
-        <progress value={(index + 1) / count}></progress>
-
-        <p>Offset in current step</p>
-        <progress value={offset}></progress>
-
-        <p>Total progress</p>
-        <progress value={progress}></progress>
-      </div>
-
+    <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
       <ScrollyVideo
-        src={`src/components/ScrollyVideo/videos/goldengate.mp4`}
-        height="100svh"
-        trackScroll={false}
+        src='my-video.mp4'
         videoPercentage={progress}
-        objectFit="cover"
-        showDebugInfo
-        {embedded}
+        trackScroll={false}
       />
     {/snippet}
     {#snippet foregroundSnippet()}
-      <!-- Add custom foreground HTML or component -->
-      <div class="step-foreground-container">
-        <div class="fg-child-container">
-          <Headline
-            class="custom-headline"
-            hed="ScrollyVideo inside ScrollerBase"
-            dek="This is a demo of ScrollyVideo inside ScrollerBase component."
-            section={'Reuters Graphics'}
-            authors={['Jane Doe']}
-            publishTime={new Date('2020-01-01').toISOString()}
-          />
-        </div>
-      </div>
-      <div class="step-foreground-container"><p>Step 2</p></div>
-      <div class="step-foreground-container">
-        <div class="fg-child-container">
-          <GraphicBlock
-            title="Earthquake in Haiti"
-            description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-            notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-          >
-            <AiMap />
-          </GraphicBlock>
-        </div>
-      </div>
-      <div class="step-foreground-container"><p>Step 4</p></div>
-      <div class="step-foreground-container"><p>Step 5</p></div>
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 1</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 2</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 3</h3>
+    </div>
     {/snippet}
-  </ScrollerBase>
-</div>
-
-<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;
-    }
-  }
-
-  #debugger {
-    width: 100%;
-    height: 100vh;
-    background-color: hotpink;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      padding: 0;
-      margin: 0;
-    }
-  }
+  </ScrollerBase> 
 
+<style lang="scss"> 
   .step-foreground-container {
     height: 100vh;
-    width: 100%;
+    width: 50%;
     padding: 1em;
-    position: relative;
-    border: 1px solid red;
+    margin: auto;
 
-    .fg-child-container {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      width: 100%;
-    }
-
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin: 0;
-      font-size: 2em;
+    h3 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
       color: white;
-      font-family: var(--theme-font-family-sans-serif);
     }
   }
 </style>
@@ -522,6 +408,8 @@ The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/
 
 For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position.
 
+[Demo](?path=/story/components-graphics-scrollyvideo--advanced)
+
 ```js
 scrollyVideo.setVideoPercentage(0.5, {
   jump: false,
diff --git a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
index 4c23d3dc..275280f1 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte
@@ -129,6 +129,7 @@
   import Video_MD from './videos/waves_md.mp4';
   import Video_LG from './videos/waves_lg.mp4';
   import Goldengate from './videos/goldengate.mp4';
+  import AdvancedUsecases from './demo/AdvancedUsecases.svelte';
 
   const videoSrc = {
     Video_SM,
@@ -204,3 +205,7 @@
 <Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}>
   <WithScrollerBase />
 </Story>
+
+<Story name="Advanced usecases" exportName="Advanced" {args}>
+  <AdvancedUsecases />
+</Story>
diff --git a/src/components/ScrollyVideo/ScrollyVideo.svelte b/src/components/ScrollyVideo/ScrollyVideo.svelte
index 4c2d571c..ad80e779 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.svelte
@@ -138,7 +138,7 @@
       // If we need to update the target time percent
       if (
         scrollyVideo &&
-        typeof videoPercentage === 'number' &&
+        videoPercentage &&
         videoPercentage >= 0 &&
         videoPercentage <= 1
       ) {
@@ -193,12 +193,6 @@
         {#if showDebugInfo && dev}
           <div class="debug-info">
             <Debug componentState={scrollyVideo.componentState} />
-            <!-- <p class="text-xxs font-sans"> -->
-            <!-- {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
-                .replace(/[{}"]/g, '')
-                .split(',')
-                .join('<br>')} -->
-            <!-- </p> -->
           </div>
         {/if}
 
diff --git a/src/components/ScrollyVideo/demo/AdvancedUsecases.svelte b/src/components/ScrollyVideo/demo/AdvancedUsecases.svelte
new file mode 100644
index 00000000..89543794
--- /dev/null
+++ b/src/components/ScrollyVideo/demo/AdvancedUsecases.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  /** Sudev -- Can you add a demo for the advanced use cases? I'm not sure what the use case would be and seeing an example would help*/
+</script>
+
+TKTK
diff --git a/src/components/ScrollyVideo/demo/WithScrollerBase.svelte b/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
index a6252096..5c012f73 100644
--- a/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollyVideo/demo/WithScrollerBase.svelte
@@ -1,88 +1,35 @@
 <script lang="ts">
   import ScrollyVideo from '../ScrollyVideo.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
-  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);
-  let index = $state(0);
-  let offset = $state(0);
   let progress = $state(0);
-  let top = $state(0);
-  let threshold = $state(0);
-  let bottom = $state(1);
 </script>
 
-<div class="scroller-demo-container">
-  <ScrollerBase
-    {top}
-    {threshold}
-    {bottom}
-    bind:count
-    bind:index
-    bind:offset
-    bind:progress
-    query="div.step-foreground-container"
-    visible
-  >
-    {#snippet backgroundSnippet()}
-      <!-- Add custom background HTML or component -->
-      <div id="progress-bar">
-        <p>
-          Current step: <strong>{index + 1}/{count}</strong>
-        </p>
-        <progress value={(index + 1) / count}></progress>
-
-        <p>Offset in current step</p>
-        <progress value={offset}></progress>
-
-        <p>Total progress</p>
-        <progress value={progress}></progress>
-      </div>
-
-      <ScrollyVideo
-        src={Goldengate}
-        height="100svh"
-        trackScroll={false}
-        videoPercentage={progress}
-        objectFit="cover"
-        showDebugInfo
-      />
-    {/snippet}
-    {#snippet foregroundSnippet()}
-      <!-- Add custom foreground HTML or component -->
-      <div class="step-foreground-container">
-        <div class="fg-child-container">
-          <Headline
-            class="custom-headline"
-            hed="ScrollyVideo inside ScrollerBase"
-            dek="This is a demo of ScrollyVideo inside ScrollerBase component."
-            section={'Reuters Graphics'}
-            authors={['Jane Doe']}
-            publishTime={new Date('2020-01-01').toISOString()}
-          />
-        </div>
-      </div>
-      <div class="step-foreground-container"><p>Step 2</p></div>
-      <div class="step-foreground-container">
-        <div class="fg-child-container">
-          <GraphicBlock
-            title="Earthquake in Haiti"
-            description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-            notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-          >
-            <AiMap />
-          </GraphicBlock>
-        </div>
-      </div>
-      <div class="step-foreground-container"><p>Step 4</p></div>
-      <div class="step-foreground-container"><p>Step 5</p></div>
-    {/snippet}
-  </ScrollerBase>
-</div>
+<ScrollerBase bind:progress query="div.step-foreground-container" visible>
+  {#snippet backgroundSnippet()}
+    <ScrollyVideo
+      src={Goldengate}
+      height="100svh"
+      trackScroll={false}
+      videoPercentage={progress}
+      showDebugInfo
+    />
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 1</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 2</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 3</h3>
+    </div>
+  {/snippet}
+</ScrollerBase>
 
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
@@ -120,37 +67,17 @@
 
   .step-foreground-container {
     height: 100vh;
-    width: 100%;
+    width: 50%;
     padding: 1em;
-    position: relative;
-    border: 1px solid red;
+    margin: auto;
 
-    .fg-child-container {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      width: 100%;
-    }
-
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin: 0;
-      font-size: 2em;
+    h3 {
+      // align center
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
       color: white;
-      font-family: var(--theme-font-family-sans-serif);
-    }
-
-    :global(.custom-headline *) {
-      color: white;
-    }
-
-    :global(.fg-child-container:last-child *) {
-      color: white !important;
     }
   }
 </style>