Fix docs, export setTargetTimePercent in vue and svelte (#94)

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.

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 },
       );
     }

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)
         : () => {},
     }),

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();

src/ScrollyVideo.vue

@@ -20,6 +20,9 @@ export default {
         ...props,
       });
     },
+    setTargetTimePercent(...args) {
+      if (this.scrollyVideo) this.scrollyVideo.setTargetTimePercent(...args);
+    }
   },
   watch: {
     $attrs: {