From a82f20a7f3199ec7377e2205083db6ee03f1e485 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 6 Aug 2025 10:18:40 -0400
Subject: [PATCH] documents/demo cleanup

---
 .../ScrollerVideo/ScrollerVideo.mdx           | 15 +++++-------
 .../ScrollerVideo.stories.svelte              | 24 ++-----------------
 .../ScrollerVideo/ScrollerVideo.svelte        |  4 +---
 .../ScrollerVideo/demo/Embedded.svelte        | 24 +++++++++++++++----
 4 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index c678e8a5..acd2ba41 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.mdx
+++ b/src/components/ScrollerVideo/ScrollerVideo.mdx
@@ -10,7 +10,7 @@ The `ScrollerVideo` component creates interactive video experiences that respond
 
 ## Basic demo
 
-To use the `ScrollerVideo` component, import it and provide the video source. Set the `height` prop to any valid CSS height value such as `1200px` or `200lvh` to set the scroll height.
+  To use the `ScrollerVideo` component, import it and provide the video source. The scroll height defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
 
 > 💡TIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden.
 
@@ -21,6 +21,7 @@ To use the `ScrollerVideo` component, import it and provide the video source. Se
   import { ScrollerVideo } from '@reuters-graphics/graphics-components';
 </script>
 
+<!-- Optionally set `height` to adjust scroll height -->
 <ScrollerVideo src="my-video.mp4" height="500lvh" />
 ```
 
@@ -81,15 +82,11 @@ Setting `embedded` will autoplay the entire `ScrollerVideo` component like a vid
 </script>
 
 <ScrollerVideo
-  src={Goldengate}
-  height="200lvh"
-  trackScroll={true}
-  showDebugInfo
-  {embedded}
+  src='my-video.mp4'
+  embedded={true}
   embeddedProps={{
-    delay: 200, // Delay before autoplay starts
-    threshold: 0.5, // Threshold for triggering the autoplay
-    height: '80lvh', // Height of the embed video
+    delay: 200, // Optional: Delay before autoplay starts. Defaults to 200ms.
+    threshold: 0.5, // Optional: Threshold for triggering the autoplay. Defaults to 0.5.
     duration: 5000, // Optional: Defaults to the duration of the video. 
   }}
 />
diff --git a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
index 3a3b12cf..ffdacf57 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
@@ -137,17 +137,7 @@
   };
 
   const args = {
-    trackScroll: true,
-    height: '500lvh',
     showDebugInfo: true,
-    autoplay: false,
-    full: true,
-    sticky: true,
-    objectFit: 'cover',
-    transitionSpeed: 8,
-    frameThreshold: 0.1,
-    useWebCodecs: true,
-    lockScroll: true,
   };
 </script>
 
@@ -168,21 +158,11 @@
 </Story>
 
 <Story name="Embed version" exportName="Embed">
-  <!-- <ScrollerVideo
-    embedded={true}
-    src={videoSrc.Goldengate}
-    embeddedProps={{ autoplay: true }}
-  /> -->
   <Embedded />
 </Story>
 
-<Story name="Autoplay" {args}>
-  <ScrollerVideo
-    {...args}
-    src={videoSrc.Goldengate}
-    useWebCodecs={false}
-    autoplay={true}
-  ></ScrollerVideo>
+<Story name="Autoplay">
+  <ScrollerVideo {...args} src={videoSrc.Goldengate} autoplay={true} />
 </Story>
 
 <Story
diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte
index 120a089f..6d68fab0 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideo.svelte
@@ -52,8 +52,6 @@
     embeddedProps?: {
       /** When to start the playback in terms of the component's position */
       threshold?: number;
-      /** Height of embedded component */
-      height?: string;
       /** Duration of ScrollerVideo experience as a video */
       duration?: number;
       /** Delay before the playback */
@@ -66,7 +64,6 @@
   /** Default properties for embedded videos */
   const defaultEmbedProps = {
     threshold: 0.5,
-    height: '80lvh',
     delay: 200,
   };
 
@@ -144,6 +141,7 @@
           ...restProps,
           trackScroll: embedded ? false : restProps.trackScroll, // trackScroll disabled for embedded version
           autoplay: embedded ? false : restProps.autoplay, // autoplay disabled for embedded version
+          useWebCodecs: restProps.autoplay ? false : restProps.useWebCodecs, // useWebCodecs disabled for autoplay
         });
 
         // if embedded prop is set,
diff --git a/src/components/ScrollerVideo/demo/Embedded.svelte b/src/components/ScrollerVideo/demo/Embedded.svelte
index d762b740..616d9640 100644
--- a/src/components/ScrollerVideo/demo/Embedded.svelte
+++ b/src/components/ScrollerVideo/demo/Embedded.svelte
@@ -52,16 +52,16 @@
 <BodyText text={dummyText} />
 <BodyText text={dummyText} />
 <BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
 
 <ScrollerVideo
   src={Goldengate}
-  height="200lvh"
-  trackScroll={true}
-  showDebugInfo
+  class="embedded-demo"
+  showDebugInfo={true}
   embedded={true}
   embeddedProps={{
     threshold: 0.5,
-    height: '100lvh',
     duration: 12000,
     delay: 200,
   }}
@@ -78,3 +78,19 @@
   {/each}
 </ScrollerVideo>
 <BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+
+<style lang="scss">
+  :global {
+    .embedded-demo .foreground-text {
+      h4,
+      p {
+        color: white;
+      }
+    }
+  }
+</style>