From 01b94018dc3f35f1139df2bdbeada9245b35f8e4 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 7 Aug 2025 08:56:12 -0400
Subject: [PATCH] formats

---
 src/components/ScrollerVideo/ScrollerVideo.mdx   |  8 ++++----
 src/components/ScrollerVideo/ts/ScrollerVideo.ts | 11 +++++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index 813d0d53..5ed465b8 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. 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.
+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.
 
@@ -70,7 +70,7 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
 
 ## Embeds
 
-Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable version, where the video autoplays when the user scrolls upon it. Optionally, you can control the embed video behaviour by passing `embeddedProps` to control the autoplay `delay`, `threshold` for triggering autoplay, and the `duration` of the video. 
+Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable version, where the video autoplays when the user scrolls upon it. Optionally, you can control the embed video behaviour by passing `embeddedProps` to control the autoplay `delay`, `threshold` for triggering autoplay, and the `duration` of the video.
 
 > 💡**TIP:** Another way to recreate the ScrollerVideo experience for embeds is to record the desktop screen with [Scroll Capture](https://chromewebstore.google.com/detail/scroll-capture/egmhoeaacclmanaimofoooiamhpkimkk?hl=en) while scrolling through the video and use that video instead as an HTML video component.
 
@@ -84,12 +84,12 @@ Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable versio
 </script>
 
 <ScrollerVideo
-  src='my-video.mp4'
+  src="my-video.mp4"
   {embedded}
   embeddedProps={{
     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. 
+    duration: 5000, // Optional: Defaults to the duration of the video.
   }}
 />
 ```
diff --git a/src/components/ScrollerVideo/ts/ScrollerVideo.ts b/src/components/ScrollerVideo/ts/ScrollerVideo.ts
index d8db3863..acf4ba77 100644
--- a/src/components/ScrollerVideo/ts/ScrollerVideo.ts
+++ b/src/components/ScrollerVideo/ts/ScrollerVideo.ts
@@ -202,8 +202,8 @@ class ScrollerVideo {
     transitionSpeed = 8,
     frameThreshold = 0.1,
     useWebCodecs = true,
-    onReady = () => { },
-    onChange = (_percentage?: number) => { },
+    onReady = () => {},
+    onChange = (_percentage?: number) => {},
     debug = false,
     autoplay = false,
   }: ScrollerVideoArgs) {
@@ -242,7 +242,6 @@ class ScrollerVideo {
     this.componentState = createComponentState();
     this.componentState.willAutoPlay = autoplay;
 
-
     // Save the container. If the container is a string we get the element
 
     if (scrollerVideoContainer && scrollerVideoContainer instanceof HTMLElement)
@@ -725,7 +724,7 @@ class ScrollerVideo {
       const hasPassedThreshold =
         isForwardTransition ?
           this.currentTime >= this.targetTime
-          : this.currentTime <= this.targetTime;
+        : this.currentTime <= this.targetTime;
 
       if (this.componentState.isAutoPlaying) {
         this.componentState.autoplayProgress = parseFloat(
@@ -764,7 +763,7 @@ class ScrollerVideo {
         isForwardTransition ?
           startCurrentTime +
           easedProgress * Math.abs(distance) * transitionSpeed
-          : startCurrentTime -
+        : startCurrentTime -
           easedProgress * Math.abs(distance) * transitionSpeed;
 
       if (this.canvas) {
@@ -853,7 +852,7 @@ class ScrollerVideo {
     const targetDuration =
       this.frames?.length && this.frameRate ?
         this.frames.length / this.frameRate
-        : this.video?.duration || 0;
+      : this.video?.duration || 0;
     // The time we want to transition to
     this.targetTime = Math.max(Math.min(percentage, 1), 0) * targetDuration;