scrolly-video - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/ScrollyVideo.js

@@ -29,7 +29,16 @@ import UAParser from 'ua-parser-js';
     // Make sure that we have a DOM
-    if (typeof document !== 'object') throw new Error('ScrollyVideo must be initiated in a DOM context');
+    if (typeof document !== 'object') {
+      console.error('ScrollyVideo must be initiated in a DOM context');
+      return;
+    }
 
     // Make sure the basic arguments are set for scrollyvideo
-    if (!scrollyVideoContainer) throw new Error('scrollyVideoContainer must be a valid DOM object');
-    if (!src) throw new Error('Must provide valid video src to ScrollyVideo');
+    if (!scrollyVideoContainer) {
+      console.error('scrollyVideoContainer must be a valid DOM object');
+      return;
+    }
+    if (!src) {
+      console.error('Must provide valid video src to ScrollyVideo');
+      return;
+    }
 
@@ -106,3 +115,3 @@ // Save the container. If the container is a string we get the element
     // Add scroll listener for responding to scroll position
-    this.updateScrollPercentage = () => {
+    this.updateScrollPercentage = (jump) => {
       // Used for internally setting the scroll percentage based on built-in listeners
@@ -119,9 +128,18 @@ const containerBoundingClientRect = this.container.parentNode.getBoundingClientRect();
       // Set the target time percent
-      this.setTargetTimePercent(scrollPercent);
+      this.setTargetTimePercent(scrollPercent, jump);
     };
 
     // Add our event listeners for handling changes to the window or scroll
-    // eslint-disable-next-line no-undef
-    if (this.trackScroll) window.addEventListener('scroll', this.updateScrollPercentage);
+    if (this.trackScroll) {
+      // eslint-disable-next-line no-undef
+      window.addEventListener('scroll', () => this.updateScrollPercentage());
 
+      // Set the initial scroll percentage
+      this.video.addEventListener(
+        'loadedmetadata',
+        () => this.updateScrollPercentage(true),
+        { once: true },
+      );
+    }
+
     // Add resize function
@@ -138,2 +156,3 @@ this.resize = () => {
     window.addEventListener('resize', this.resize);
+    this.video.addEventListener('progress', this.resize);
 
@@ -164,4 +183,5 @@ // Calls decode video to attempt webcodecs method
 
-      // Gets the width and height of the element
-      const { width, height } = el.getBoundingClientRect();
+      // Gets the width and height of the video frames
+      const width = el.videoWidth || el.width;
+      const height = el.videoHeight || el.height;
 
@@ -249,4 +269,6 @@ if (this.debug) console.info('Container dimensions:', [containerWidth, containerHeight]);
    * Transitions the video or the canvas to the proper frame
+   *
+   * @param jump
    */
-  transitionToTargetTime() {
+  transitionToTargetTime(jump) {
     if (this.debug) {
@@ -261,4 +283,2 @@ console.info('Transitioning targetTime:', this.targetTime, 'currentTime:', this.currentTime);
       isNaN(this.targetTime)
-      // If target time is greater than the video duration we can stop
-      || this.targetTime > this.video.duration
       // If the currentTime is already close enough to the targetTime
@@ -272,2 +292,6 @@ || Math.abs(this.currentTime - this.targetTime) < this.frameThreshold
 
+    // Make sure we don't go out of time bounds
+    if (this.targetTime > this.video.duration) this.targetTime = this.video.duration;
+    if (this.targetTime < 0) this.targetTime = 0;
+
     // How far forward we need to transition
@@ -279,4 +303,6 @@ const transitionForward = this.targetTime - this.currentTime;
       this.currentTime += transitionForward / (256 / this.transitionSpeed);
+      // If jump, we go directly to the frame
+      if (jump) this.currentTime = this.targetTime;
       this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
-    } else if (this.isSafari || this.targetTime - this.currentTime < 0) {
+    } else if (jump || this.isSafari || this.targetTime - this.currentTime < 0) {
       // We can't use a negative playbackRate, so if the video needs to go backwards,
@@ -287,2 +313,4 @@ // We have to use the inefficient method of modifying currentTime rapidly to
       this.currentTime += transitionForward / (64 / this.transitionSpeed);
+      // If jump, we go directly to the frame
+      if (jump) this.currentTime = this.targetTime;
       this.video.currentTime = this.currentTime;
@@ -315,4 +343,5 @@ } else {
    * @param setPercentage
+   * @param jump
    */
-  setTargetTimePercent(setPercentage) {
+  setTargetTimePercent(setPercentage, jump) {
     // The time we want to transition to
@@ -324,3 +353,3 @@ this.targetTime = Math.max(Math.min(setPercentage, 1), 0)
     // If we are already transitioning, bail early
-    if (this.transitioning) return;
+    if (!jump && this.transitioning) return;
 
@@ -332,3 +361,3 @@ // Play the video if we are in video mode
     this.transitioning = true;
-    this.transitionToTargetTime();
+    this.transitionToTargetTime(jump);
   }
@@ -345,2 +374,5 @@
     window.removeEventListener('resize', this.resize);
+
+    // Clear component
+    if (this.container) this.container.innerHTML = '';
   }
@@ -347,0 +379,0 @@ }

package.json

 {
   "name": "scrolly-video",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A component for scroll-based (or other externally controlled) playback.",
@@ -5,0 +5,0 @@ "main": "dist/scrolly-video.js",

README.md

@@ -74,14 +74,15 @@ # ScrollyVideo.js
 
-| Parameter             | Description                                                    | Values           | Default |
-|:----------------------|:---------------------------------------------------------------|:-----------------|:--------|
-| src                   | The URL of the video (required)                                | URL              |         |
-| scrollyVideoContainer | The DOM element of the container, only used for plain js       | String / Element |         |
-| transitionSpeed       | Sets the maximum playbackRate for this video                   | Number           | 8       |
-| frameThreshold        | When to stop the video animation, in seconds                   | Number           | 0.1     |
-| cover                 | Forces the video to cover in it's container                    | Boolean          | true    |
-| sticky                | Whether the video should have `position: sticky`               | Boolean          | true    |
-| full                  | Whether the video should take up the entire viewport           | Boolean          | true    |
-| trackScroll           | Whether this object should automatically respond to scroll     | Boolean          | true    |
-| useWebCodecs          | Whether the library should use the webcodecs method, see below | Boolean          | true    |
-| debug                 | Whether to log debug information                               | Boolean          | false   |
+| Parameter             | Description                                                                                              | Values           | Default |
+|:----------------------|:---------------------------------------------------------------------------------------------------------|:-----------------|:--------|
+| src                   | The URL of the video (required)                                                                          | URL              |         |
+| scrollyVideoContainer | The DOM element of the container, only used for plain js                                                 | String / Element |         |
+| transitionSpeed       | Sets the maximum playbackRate for this video                                                             | Number           | 8       |
+| frameThreshold        | When to stop the video animation, in seconds                                                             | Number           | 0.1     |
+| cover                 | Forces the video to cover in it's container                                                              | Boolean          | true    |
+| sticky                | Whether the video should have `position: sticky`                                                         | Boolean          | true    |
+| full                  | Whether the video should take up the entire viewport                                                     | Boolean          | true    |
+| trackScroll           | Whether this object should automatically respond to scroll                                               | Boolean          | true    |
+| useWebCodecs          | Whether the library should use the webcodecs method, see below                                           | Boolean          | true    |
+| videoPercentage       | Manually specify the position of the video between 0..1, only used for react, vue, and svelte components | Number           |         |
+| debug                 | Whether to log debug information                                                                         | Boolean          | false   |
 
@@ -88,0 +89,0 @@ Additionally, to set currentTime manually:

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10624472

increased by0.05%

Lines of code

10827

increased by1.05%

Number of lines in readme file

114

increased by0.88%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes