From dcde3fd12f3a646782e412f43bc49293a445d8b2 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Wed, 6 Aug 2025 10:42:42 +0530
Subject: [PATCH] svh to lvh

---
 .../ScrollerVideo/ScrollerVideo.mdx           | 22 +++++++++----------
 .../ScrollerVideo.stories.svelte              |  2 +-
 .../ScrollerVideo/ScrollerVideo.svelte        | 12 +++++-----
 .../demo/AdvancedUsecases.svelte              |  4 ++--
 .../ScrollerVideo/demo/Embedded.svelte        |  8 +++----
 .../demo/WithAi2svelteForegrounds.svelte      |  2 +-
 .../demo/WithScrollerBase.svelte              |  4 ++--
 .../demo/WithTextForegrounds.svelte           |  2 +-
 .../ScrollerVideo/ts/ScrollerVideo.ts         |  2 +-
 9 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index 9b092bf9..daaeb404 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`, `50vh`, or `500svh` to set the scroll height.
+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`, `50vh`, or `500lvh` to set the scroll height. It is suggested to use 'lvh' or 'svh' units instead of 'vh' for the height, as these units are more reliable across different devices.
 
 [Demo](?path=/story/components-graphics-scrollervideo--demo)
 
@@ -19,7 +19,7 @@ To use the `ScrollerVideo` component, import it and provide the video source. Se
   import { ScrollerVideo } from '@reuters-graphics/graphics-components';
 </script>
 
-<ScrollerVideo src="my-video.mp4" height="500svh" />
+<ScrollerVideo src="my-video.mp4" height="500lvh" />
 ```
 
 ## Optimising videos
@@ -53,13 +53,13 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
 
 {#if width < 600}
   <!-- Video with aspect ratio 9:16 for window width smaller than 600px -->
-  <ScrollerVideo src="my-video-sm.mp4" height="500svh" />
+  <ScrollerVideo src="my-video-sm.mp4" height="500lvh" />
 {:else if width < 1200}
   <!-- Video with aspect ratio 1:1 for window width between 600px and 1200px -->
-  <ScrollerVideo src="my-video-md.mp4" height="500svh" />
+  <ScrollerVideo src="my-video-md.mp4" height="500lvh" />
 {:else}
   <!-- Video with aspect ratio 16:9 for window width above 1200px -->
-  <ScrollerVideo src="my-video-lg.mp4" height="500svh" />
+  <ScrollerVideo src="my-video-lg.mp4" height="500lvh" />
 {/if}
 ```
 
@@ -78,14 +78,14 @@ Setting `embedded` will autoplay the whole `ScrollerVideo` component like a vide
 
 <ScrollerVideo
   src={Goldengate}
-  height="200svh"
+  height="200lvh"
   trackScroll={true}
   showDebugInfo
   {embedded}
   embeddedProps={{
     delay: 200,
     threshold: 0.5, // threshold for triggering the autoplay
-    height: '80svh', // height of the scroll container
+    height: '80lvh', // height of the scroll container
     duration: 5000, // time duration from start to end
   }}
 />
@@ -120,7 +120,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   type: scroller-video
   id: alps-scroller
   src: videos/alps.mp4
-  height: 800svh
+  height: 800lvh
 
   # Array of foregrounds
   [.foregrounds]
@@ -213,7 +213,7 @@ endTime: 0.3 # When to stop showing the headline
 [blocks]
   type: scroller-video
   id: my-scroller-video
-  height: 800svh
+  height: 800lvh
 
   # Adjust prop names as needed
   srcSm: videos/my-video-sm.mp4
@@ -371,7 +371,7 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
 
 <style lang="scss">
   .step-foreground-container {
-    height: 100vh;
+    height: 100lvh;
     width: 50%;
     padding: 1em;
     margin: auto;
@@ -443,7 +443,7 @@ Here is a [demo](?path=/story/components-graphics-scrollervideo--advanced) that
     <ScrollerVideo
       bind:scrollerVideo
       src={Tennis}
-      height="100svh"
+      height="100lvh"
       trackScroll={false}
       showDebugInfo
       onReady={jumpVideo}
diff --git a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
index 08bae7a3..3a3b12cf 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
@@ -138,7 +138,7 @@
 
   const args = {
     trackScroll: true,
-    height: '500svh',
+    height: '500lvh',
     showDebugInfo: true,
     autoplay: false,
     full: true,
diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte
index 31245ed1..da3149c0 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideo.svelte
@@ -42,7 +42,7 @@
     debug?: boolean;
     /** Shows debug information on page */
     showDebugInfo?: boolean;
-    /** Height of the video container. Set it to 100svh when using inside `ScrollerBase` */
+    /** Height of the video container. Set it to 100lvh when using inside `ScrollerBase` */
     height?: string;
     /** Whether the video should autoplay */
     autoplay?: boolean;
@@ -66,7 +66,7 @@
   /** Default properties for embedded videos */
   const defaultEmbedProps = {
     threshold: 0.5,
-    height: '80svh',
+    height: '80lvh',
     delay: 200,
   };
 
@@ -79,7 +79,7 @@
     videoPercentage,
     onReady = $bindable(() => {}),
     onChange = $bindable(() => {}),
-    height = '200svh',
+    height = '200lvh',
     showDebugInfo = false,
     class: cls = '',
     id = '',
@@ -260,10 +260,12 @@
       }
     }}
   >
+    <!-- style needs to be >= 100lvh to allow child element to scroll -->
+    <!-- 200lvh provides smoother scrolling experience -->
     <div
       {id}
       class="scroller-video-container embedded {cls}"
-      style="height: 200svh;"
+      style="height: 200lvh;"
     >
       <div
         bind:this={scrollerVideoContainer}
@@ -291,7 +293,7 @@
     width: 100%;
 
     &:not(.embedded) {
-      min-height: 100svh;
+      min-height: 100lvh;
     }
   }
 
diff --git a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte b/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
index 97d41432..2f57db19 100644
--- a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
+++ b/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
@@ -42,7 +42,7 @@
     <ScrollerVideo
       bind:scrollerVideo
       src={Tennis}
-      height="100svh"
+      height="100lvh"
       trackScroll={false}
       showDebugInfo
       onReady={jumpVideo}
@@ -98,7 +98,7 @@
   }
 
   .step-foreground-container {
-    height: 100vh;
+    height: 100lvh;
     width: 50%;
     padding: 1em;
     margin: auto;
diff --git a/src/components/ScrollerVideo/demo/Embedded.svelte b/src/components/ScrollerVideo/demo/Embedded.svelte
index 7a4d2433..d762b740 100644
--- a/src/components/ScrollerVideo/demo/Embedded.svelte
+++ b/src/components/ScrollerVideo/demo/Embedded.svelte
@@ -12,7 +12,7 @@
         type: 'scroller-video',
         id: 'goldengate-scroller',
         src: '../videos/goldengate.mp4',
-        height: '200svh',
+        height: '200lvh',
         foregrounds: [
           {
             startTime: '0',
@@ -55,14 +55,14 @@
 
 <ScrollerVideo
   src={Goldengate}
-  height="200svh"
+  height="200lvh"
   trackScroll={true}
   showDebugInfo
   embedded={true}
   embeddedProps={{
     threshold: 0.5,
-    height: '80svh',
-    duration: 5000,
+    height: '100lvh',
+    duration: 12000,
     delay: 200,
   }}
 >
diff --git a/src/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte b/src/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte
index 4c751d0f..9b0c8b92 100644
--- a/src/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte
+++ b/src/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte
@@ -30,7 +30,7 @@
       {
         type: 'scroller-video',
         id: 'surf-scroller',
-        height: '800svh',
+        height: '800lvh',
         foregrounds: [
           {
             startTime: '0.3',
diff --git a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
index 71ddfb80..184bada1 100644
--- a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
@@ -11,7 +11,7 @@
   {#snippet backgroundSnippet()}
     <ScrollerVideo
       src={Goldengate}
-      height="100svh"
+      height="100lvh"
       trackScroll={false}
       videoPercentage={progress}
       showDebugInfo
@@ -66,7 +66,7 @@
   }
 
   .step-foreground-container {
-    height: 100vh;
+    height: 100lvh;
     width: 50%;
     padding: 1em;
     margin: auto;
diff --git a/src/components/ScrollerVideo/demo/WithTextForegrounds.svelte b/src/components/ScrollerVideo/demo/WithTextForegrounds.svelte
index 4e8e4e69..46465c7c 100644
--- a/src/components/ScrollerVideo/demo/WithTextForegrounds.svelte
+++ b/src/components/ScrollerVideo/demo/WithTextForegrounds.svelte
@@ -10,7 +10,7 @@
         type: 'scroller-video',
         id: 'alps-scroller',
         src: 'videos/alps.mp4',
-        height: '800svh',
+        height: '800lvh',
         foregrounds: [
           {
             startTime: '0',
diff --git a/src/components/ScrollerVideo/ts/ScrollerVideo.ts b/src/components/ScrollerVideo/ts/ScrollerVideo.ts
index 9baf8f02..b1457d00 100644
--- a/src/components/ScrollerVideo/ts/ScrollerVideo.ts
+++ b/src/components/ScrollerVideo/ts/ScrollerVideo.ts
@@ -312,7 +312,7 @@ class ScrollerVideo {
     // Setting CSS properties for full
     if (full) {
       this.container.style.width = '100%';
-      this.container.style.height = '100svh';
+      this.container.style.height = '100lvh';
       this.container.style.overflow = 'hidden';
     }