From 9412665bccde1b63b4413f429adb0f0bf348ba63 Mon Sep 17 00:00:00 2001
From: Daniel Kao <dkao@diplateevo.com>
Date: Thu, 21 Mar 2024 22:13:53 -0700
Subject: [PATCH] Fix docs, export setTargetTimePercent in vue and svelte (#94)

---
 README.md               | 4 ++--
 src/ScrollyVideo.js     | 4 ++--
 src/ScrollyVideo.jsx    | 2 +-
 src/ScrollyVideo.svelte | 7 ++++++-
 src/ScrollyVideo.vue    | 3 +++
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index f0960f5..1184f7f 100644
--- a/README.md
+++ b/README.md
@@ -89,11 +89,11 @@ Add html code to your html component:
 
 Additionally, to set currentTime manually:
 
-***setCurrentTimePercent*** (`percentage: number`, `options: Options`): Pass a progress in between of 0 and 1 that specifies the percentage position of the video. Optionally, to customise experience of separate `setCurrentTimePercent` calls you can utilise options:
+***setTargetTimePercent*** (`percentage: number`, `options: Options`): Pass a progress in between of 0 and 1 that specifies the percentage position of the video. Optionally, to customise experience of separate `setTargetTimePercent` calls you can utilize options:
 - `transitionSpeed`: `number`
 - `easing`: `(progress: number) => number`
 
-Example: `setCurrentTimePercent(0.5, { transitionSpeed: 12, easing: d3.easeLinear })`
+Example: `setTargetTimePercent(0.5, { transitionSpeed: 12, easing: d3.easeLinear })`
 
 ## Technical Details and Cross Browser Differences
 To make this library perform optimally in all browsers, three different approaches are taken to animating the video.
diff --git a/src/ScrollyVideo.js b/src/ScrollyVideo.js
index f850606..2bdba24 100644
--- a/src/ScrollyVideo.js
+++ b/src/ScrollyVideo.js
@@ -128,7 +128,7 @@ class ScrollyVideo {
       if (this.debug) console.info('ScrollyVideo scrolled to', scrollPercent);
 
       // Set the target time percent
-      this.setTargetTimePercent(scrollPercent, jump);
+      this.setTargetTimePercent(scrollPercent, { jump });
     };
 
     // Add our event listeners for handling changes to the window or scroll
@@ -145,7 +145,7 @@ class ScrollyVideo {
     } else {
       this.video.addEventListener(
         'loadedmetadata',
-        () => this.setTargetTimePercent(0, true),
+        () => this.setTargetTimePercent(0, { jump: true }),
         { once: true },
       );
     }
diff --git a/src/ScrollyVideo.jsx b/src/ScrollyVideo.jsx
index b8ccbe3..73851c5 100644
--- a/src/ScrollyVideo.jsx
+++ b/src/ScrollyVideo.jsx
@@ -92,7 +92,7 @@ const ScrollyVideoComponent = forwardRef(function ScrollyVideoComponent(
   useImperativeHandle(
     ref,
     () => ({
-      setVideoPercentage: scrollyVideoRef.current
+      setTargetTimePercent: scrollyVideoRef.current
         ? scrollyVideoRef.current.setTargetTimePercent.bind(instance)
         : () => {},
     }),
diff --git a/src/ScrollyVideo.svelte b/src/ScrollyVideo.svelte
index 0e38247..4241961 100644
--- a/src/ScrollyVideo.svelte
+++ b/src/ScrollyVideo.svelte
@@ -10,7 +10,7 @@
 
   // Store the props so we know when things change
   let lastPropsString = '';
-  
+
   $: {
     if (scrollyVideoContainer) {
       // separate out the videoPercentage prop
@@ -32,6 +32,11 @@
     }
   }
 
+  // export setTargetTimePercent for use in implementations
+  export function setTargetTimePercent(...args) {
+    scrollyVideo.setTargetTimePercent(...args);
+  }
+
   // Cleanup the component on destroy
   onDestroy(() => {
     if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
diff --git a/src/ScrollyVideo.vue b/src/ScrollyVideo.vue
index bf960f7..0693212 100644
--- a/src/ScrollyVideo.vue
+++ b/src/ScrollyVideo.vue
@@ -20,6 +20,9 @@ export default {
         ...props,
       });
     },
+    setTargetTimePercent(...args) {
+      if (this.scrollyVideo) this.scrollyVideo.setTargetTimePercent(...args);
+    }
   },
   watch: {
     $attrs: {