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: {