react-hover-video-player - npm Package Compare versions

Comparing version 5.1.1 to 6.1.0

es/index.js

@@ -64,10 +64,9 @@ var _pausedOverlayWrapper,
  *                                                                                     - **Array**: if you would like to provide multiple caption tracks, you can provide an array of objects with the shape described above
- * @param {bool}    [isFocused=false] - Offers a prop interface for forcing the video to start/stop without DOM events
- *                                        When set to true, the video will begin playing and any events that would normally
- *                                        stop it will be ignored
+ * @param {bool}    [focused=false] - Offers a prop interface for forcing the video to start/stop without DOM events
+ *                                      When set to true, the video will begin playing and any events that would normally stop it will be ignored
  * @param {node}    [pausedOverlay] - Contents to render over the video while it's not playing
  * @param {node}    [loadingOverlay] - Contents to render over the video while it's loading
- * @param {number}  [loadingStateTimeoutDuration=200] - Duration in ms to wait after attempting to start the video before showing the loading overlay
- * @param {number}  [overlayFadeTransitionDuration=400] - The transition duration in ms for how long it should take for the overlay to fade in/out
- * @param {bool}    [shouldRestartOnVideoStopped=true] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
+ * @param {number}  [loadingStateTimeout=200] - Duration in ms to wait after attempting to start the video before showing the loading overlay
+ * @param {number}  [overlayTransitionDuration=400] - The transition duration in ms for how long it should take for the overlay to fade in/out
+ * @param {bool}    [restartOnPaused=true] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
  * @param {bool}    [muted=true] - Whether the video player should be muted
@@ -77,2 +76,6 @@ * @param {bool}    [loop=true] - Whether the video player should loop when it reaches the end
  * @param {object}  [style] - Style object to apply custom inlined styles to the hover player container
+ * @param {string}  [contentWrapperClassName] - Optional className to apply custom styling to the inner element wrapping the player's contents
+ *                                                This inner element is kept distinct so that the player contents can be separated from the event target zone
+ *                                                which will play/pause the video when interacted with
+ * @param {object}  [contentWrapperStyle] - Style object to apply custom inlined styles to the inner element wrapping the player's contents
  * @param {string}  [pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
@@ -84,9 +87,9 @@ * @param {object}  [pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
  * @param {object}  [videoStyle] - Style object to apply custom inlined styles to the video element
- * @param {string}  [sizingMode] - Describes sizing mode to use to determine how the player's contents should be styled. Accepts 4 possible values:
- *                                 - **"overlay"**: Everything should be sized based on the paused overlay's dimensions - the video element will expand to fit inside those dimensions
- *                                 - **"video"**: Everything should be sized based on the video element's dimensions - the overlays will expand to cover the video
- *                                 - **"container"**: Everything should be sized based on the player's outer container div - the overlays and video will all expand to cover the container
- *                                 - **"manual"**: Manual mode does not apply any special styling and allows the developer to exercise full control over how everything should be sized - this means you will likely need to provide your own custom styling for both the paused overlay and the video element
+ * @param {string}  [sizingMode='video'] - Describes sizing mode to use to determine how the player's contents should be styled. Accepts 4 possible values:
+ *                                         - **"video"**: Everything should be sized based on the video element's dimensions - the overlays will expand to cover the video
+ *                                         - **"overlay"**: Everything should be sized based on the paused overlay's dimensions - the video element will expand to fit inside those dimensions
+ *                                         - **"container"**: Everything should be sized based on the player's outer container div - the overlays and video will all expand to cover the container
+ *                                         - **"manual"**: Manual mode does not apply any special styling and allows the developer to exercise full control over how everything should be sized - this means you will likely need to provide your own custom styling for both the paused overlay and the video element
  *
- *                                 If no value is provided, sizingMode will default to "overlay" if a pausedOverlay was provided, or "video" otherwise
+ *                                         If no value is provided, sizingMode will default to "overlay" if a pausedOverlay was provided, or "video" otherwise
  *
@@ -101,4 +104,4 @@ * @license MIT
       videoCaptions = _ref.videoCaptions,
-      _ref$isFocused = _ref.isFocused,
-      isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+      _ref$focused = _ref.focused,
+      focused = _ref$focused === void 0 ? false : _ref$focused,
       _ref$pausedOverlay = _ref.pausedOverlay,
@@ -108,8 +111,8 @@ pausedOverlay = _ref$pausedOverlay === void 0 ? null : _ref$pausedOverlay,
       loadingOverlay = _ref$loadingOverlay === void 0 ? null : _ref$loadingOverlay,
-      _ref$loadingStateTime = _ref.loadingStateTimeoutDuration,
-      loadingStateTimeoutDuration = _ref$loadingStateTime === void 0 ? 200 : _ref$loadingStateTime,
-      _ref$overlayFadeTrans = _ref.overlayFadeTransitionDuration,
-      overlayFadeTransitionDuration = _ref$overlayFadeTrans === void 0 ? 400 : _ref$overlayFadeTrans,
-      _ref$shouldRestartOnV = _ref.shouldRestartOnVideoStopped,
-      shouldRestartOnVideoStopped = _ref$shouldRestartOnV === void 0 ? false : _ref$shouldRestartOnV,
+      _ref$loadingStateTime = _ref.loadingStateTimeout,
+      loadingStateTimeout = _ref$loadingStateTime === void 0 ? 200 : _ref$loadingStateTime,
+      _ref$overlayTransitio = _ref.overlayTransitionDuration,
+      overlayTransitionDuration = _ref$overlayTransitio === void 0 ? 400 : _ref$overlayTransitio,
+      _ref$restartOnPaused = _ref.restartOnPaused,
+      restartOnPaused = _ref$restartOnPaused === void 0 ? false : _ref$restartOnPaused,
       _ref$muted = _ref.muted,
@@ -123,2 +126,6 @@ muted = _ref$muted === void 0 ? true : _ref$muted,
       style = _ref$style === void 0 ? null : _ref$style,
+      _ref$contentWrapperCl = _ref.contentWrapperClassName,
+      contentWrapperClassName = _ref$contentWrapperCl === void 0 ? '' : _ref$contentWrapperCl,
+      _ref$contentWrapperSt = _ref.contentWrapperStyle,
+      contentWrapperStyle = _ref$contentWrapperSt === void 0 ? null : _ref$contentWrapperSt,
       _ref$pausedOverlayWra = _ref.pausedOverlayWrapperClassName,
@@ -137,3 +144,3 @@ pausedOverlayWrapperClassName = _ref$pausedOverlayWra === void 0 ? '' : _ref$pausedOverlayWra,
       _ref$sizingMode = _ref.sizingMode,
-      sizingMode = _ref$sizingMode === void 0 ? pausedOverlay ? SIZING_MODES.overlay : SIZING_MODES.video : _ref$sizingMode;
+      sizingMode = _ref$sizingMode === void 0 ? SIZING_MODES.video : _ref$sizingMode;
 
@@ -189,3 +196,3 @@ // Keep track of state to determine how the paused and loading overlays should be displayed
         setOverlayState(HOVER_PLAYER_STATE.loading);
-      }, loadingStateTimeoutDuration);
+      }, loadingStateTimeout);
     } // If a play attempt is already in progress, don't start a new one
@@ -200,3 +207,3 @@
         // If the play attempt was cancelled, immediately pause the video
-        pauseVideo(videoElement, shouldRestartOnVideoStopped);
+        pauseVideo(videoElement, restartOnPaused);
       } else {
@@ -209,3 +216,3 @@ // If the play attempt wasn't cancelled, hide the overlays to reveal the video now that it's playing
 
-      pauseVideo(videoElement, shouldRestartOnVideoStopped);
+      pauseVideo(videoElement, restartOnPaused);
     })["finally"](function () {
@@ -229,6 +236,6 @@ // The play attempt is now complete
     clearTimeout(mutableVideoState.current.loadingStateTimeout);
-    var videoElement = videoRef.current; // If the isFocused override prop is active, ignore any other events attempting to stop the video
+    var videoElement = videoRef.current; // If the focused override prop is active, ignore any other events attempting to stop the video
     // Also don't do anything if the video is already paused
 
-    if (isFocused || getVideoState(videoElement) === VIDEO_STATE.paused) return; // Start fading the paused overlay back in
+    if (focused || getVideoState(videoElement) === VIDEO_STATE.paused) return; // Start fading the paused overlay back in
 
@@ -246,21 +253,21 @@ setOverlayState(HOVER_PLAYER_STATE.paused);
       mutableVideoState.current.pauseTimeout = setTimeout(function () {
-        return pauseVideo(videoElement, shouldRestartOnVideoStopped);
-      }, overlayFadeTransitionDuration);
+        return pauseVideo(videoElement, restartOnPaused);
+      }, overlayTransitionDuration);
     } else {
       // If a play attempt isn't in progress and there is no paused overlay, just pause
-      pauseVideo(videoElement, shouldRestartOnVideoStopped);
+      pauseVideo(videoElement, restartOnPaused);
     }
-  }, [isFocused, overlayFadeTransitionDuration, pausedOverlay, shouldRestartOnVideoStopped]);
+  }, [focused, overlayTransitionDuration, pausedOverlay, restartOnPaused]);
   /* ~~~~ EFFECTS ~~~~ */
 
   React.useEffect(function () {
-    // Use effect to start/stop the video when isFocused override prop changes
-    if (isFocused) {
+    // Use effect to start/stop the video when focused override prop changes
+    if (focused) {
       onHoverStart();
     } else {
       onHoverEnd();
-    } // We really only want to fire this effect when the isFocused prop changes
+    } // We really only want to fire this effect when the focused prop changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [isFocused]);
+  }, [focused]);
   React.useEffect(function () {
@@ -310,18 +317,24 @@ // Event listener pauses the video when the user touches somewhere outside of the player
     onMouseEnter: onHoverStart,
-    onFocus: onHoverStart,
-    onMouseOut: onHoverEnd,
-    onBlur: onHoverEnd,
+    onMouseLeave: onHoverEnd,
     onTouchStart: onHoverStart,
+    ref: containerRef,
     className: className,
+    style: style,
+    __self: this
+  }, /*#__PURE__*/React.createElement("div", {
     style: _extends({
       position: 'relative'
-    }, style),
-    ref: containerRef,
-    __self: this
+    }, contentWrapperStyle),
+    className: contentWrapperClassName,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 326,
+      columnNumber: 7
+    }
   }, pausedOverlay && /*#__PURE__*/React.createElement("div", {
     style: _extends({}, pausedOverlayWrapperSizingStyles[sizingMode], {
       zIndex: 1,
-      pointerEvents: 'none',
       opacity: overlayState !== HOVER_PLAYER_STATE.playing ? 1 : 0,
-      transition: "opacity " + overlayFadeTransitionDuration + "ms"
+      transition: "opacity " + overlayTransitionDuration + "ms"
     }, pausedOverlayWrapperStyle),
@@ -333,5 +346,4 @@ className: pausedOverlayWrapperClassName,
       zIndex: 2,
-      pointerEvents: 'none',
       opacity: overlayState === HOVER_PLAYER_STATE.loading ? 1 : 0,
-      transition: "opacity " + overlayFadeTransitionDuration + "ms"
+      transition: "opacity " + overlayTransitionDuration + "ms"
     }, loadingOverlayWrapperStyle),
@@ -341,2 +353,5 @@ className: loadingOverlayWrapperClassName,
   }, loadingOverlay), /*#__PURE__*/React.createElement("video", {
+    src: // If there's only one video source, directly set it on the video; otherwise we'll
+    // map all of the sources to source elements which the browser can pick from based on what formats it supports
+    parsedVideoSources.length === 1 ? parsedVideoSources[0].src : undefined,
     loop: loop,
@@ -355,5 +370,5 @@ playsInline: true // Only preload video data if there's no overlay covering it or we depend on having loaded its dimensions to display it
       lineNumber: 364,
-      columnNumber: 7
+      columnNumber: 9
     }
-  }, parsedVideoSources.map(function (_ref2) {
+  }, parsedVideoSources.length > 1 && parsedVideoSources.map(function (_ref2) {
     var src = _ref2.src,
@@ -368,4 +383,4 @@ type = _ref2.type;
         fileName: _jsxFileName,
-        lineNumber: 382,
-        columnNumber: 11
+        lineNumber: 391,
+        columnNumber: 15
       }
@@ -386,7 +401,7 @@ });
         fileName: _jsxFileName,
-        lineNumber: 385,
-        columnNumber: 11
+        lineNumber: 394,
+        columnNumber: 13
       }
     });
-  })));
+  }))));
 }

package.json

 {
   "name": "react-hover-video-player",
-  "version": "5.1.1",
+  "version": "6.1.0",
   "description": "React component which manages playing a video when the user hovers over it and pausing when they stop.",
@@ -46,3 +46,2 @@ "main": "es/index.js",
     "react-live": "^2.2.2",
-    "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.5",
@@ -49,0 +48,0 @@ "semantic-release": "^17.0.4"

No alert changes

Improved metrics

Total package byte prevSize

33076

increased by3.24%

Dev dependency count

27

decreased by-3.57%

Lines of code

525

increased by2.94%

No dependency changes