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

Comparing version 9.6.1 to 9.7.0

dist/component/HoverVideoPlayer.d.ts

@@ -9,2 +9,2 @@ /// <reference types="react" />
  */
-export default function HoverVideoPlayer({ videoSrc, videoCaptions, focused, disableDefaultEventHandling, hoverTarget, onHoverStart, onHoverEnd, hoverOverlay, pausedOverlay, loadingOverlay, loadingStateTimeout, overlayTransitionDuration, playbackStartDelay, restartOnPaused, unloadVideoOnPaused, playbackRangeStart, playbackRangeEnd, muted, volume, loop, preload, crossOrigin, controls, controlsList, disableRemotePlayback, disablePictureInPicture, className, style, hoverOverlayWrapperClassName, hoverOverlayWrapperStyle, pausedOverlayWrapperClassName, pausedOverlayWrapperStyle, loadingOverlayWrapperClassName, loadingOverlayWrapperStyle, videoId, videoClassName, videoRef: forwardedVideoRef, videoStyle, sizingMode, shouldSuppressPlaybackInterruptedErrors, }: HoverVideoPlayerProps): JSX.Element;
+export default function HoverVideoPlayer({ videoSrc, videoCaptions, focused, disableDefaultEventHandling, hoverTarget, onHoverStart, onHoverEnd, hoverOverlay, pausedOverlay, loadingOverlay, loadingStateTimeout, overlayTransitionDuration, playbackStartDelay, restartOnPaused, unloadVideoOnPaused, playbackRangeStart, playbackRangeEnd, muted, volume, loop, preload, crossOrigin, controls, controlsList, disableRemotePlayback, disablePictureInPicture, style, hoverOverlayWrapperClassName, hoverOverlayWrapperStyle, pausedOverlayWrapperClassName, pausedOverlayWrapperStyle, loadingOverlayWrapperClassName, loadingOverlayWrapperStyle, videoId, videoClassName, videoRef: forwardedVideoRef, videoStyle, sizingMode, shouldSuppressPlaybackInterruptedErrors, ...spreadableProps }: HoverVideoPlayerProps): JSX.Element;

dist/HoverVideoPlayer.types.d.ts

@@ -53,3 +53,3 @@ /// <reference types="react" />
 export declare type HoverTarget = Node | (() => Node) | React.RefObject<Node>;
-export interface HoverVideoPlayerProps {
+export interface HoverVideoPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -218,7 +218,2 @@ * Source(s) to load from and play in the video player.
     /**
-     * Optional className to apply custom styling to the component's container div element.
-     * @defaultValue null
-     */
-    className?: string;
-    /**
      * Style object to apply custom inlined styles to the component's container div element.
@@ -225,0 +220,0 @@ * @defaultValue null

dist/index.esm.js

@@ -29,2 +29,14 @@ import React, { useEffect, useRef, useMemo, useState, useImperativeHandle } from 'react';
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 /**
@@ -380,3 +392,3 @@ * Hook handles manually setting some additional attributes on the video that
 function HoverVideoPlayer(_a) {
-    var videoSrc = _a.videoSrc, _b = _a.videoCaptions, videoCaptions = _b === void 0 ? null : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.disableDefaultEventHandling, disableDefaultEventHandling = _d === void 0 ? false : _d, _e = _a.hoverTarget, hoverTarget = _e === void 0 ? null : _e, _f = _a.onHoverStart, onHoverStart = _f === void 0 ? null : _f, _g = _a.onHoverEnd, onHoverEnd = _g === void 0 ? null : _g, _h = _a.hoverOverlay, hoverOverlay = _h === void 0 ? null : _h, _j = _a.pausedOverlay, pausedOverlay = _j === void 0 ? null : _j, _k = _a.loadingOverlay, loadingOverlay = _k === void 0 ? null : _k, _l = _a.loadingStateTimeout, loadingStateTimeout = _l === void 0 ? 200 : _l, _m = _a.overlayTransitionDuration, overlayTransitionDuration = _m === void 0 ? 400 : _m, _o = _a.playbackStartDelay, playbackStartDelay = _o === void 0 ? 0 : _o, _p = _a.restartOnPaused, restartOnPaused = _p === void 0 ? false : _p, _q = _a.unloadVideoOnPaused, unloadVideoOnPaused = _q === void 0 ? false : _q, _r = _a.playbackRangeStart, playbackRangeStart = _r === void 0 ? null : _r, _s = _a.playbackRangeEnd, playbackRangeEnd = _s === void 0 ? null : _s, _t = _a.muted, muted = _t === void 0 ? true : _t, _u = _a.volume, volume = _u === void 0 ? 1 : _u, _v = _a.loop, loop = _v === void 0 ? true : _v, _w = _a.preload, preload = _w === void 0 ? null : _w, _x = _a.crossOrigin, crossOrigin = _x === void 0 ? 'anonymous' : _x, _y = _a.controls, controls = _y === void 0 ? false : _y, _z = _a.controlsList, controlsList = _z === void 0 ? null : _z, _0 = _a.disableRemotePlayback, disableRemotePlayback = _0 === void 0 ? true : _0, _1 = _a.disablePictureInPicture, disablePictureInPicture = _1 === void 0 ? true : _1, _2 = _a.className, className = _2 === void 0 ? null : _2, _3 = _a.style, style = _3 === void 0 ? null : _3, _4 = _a.hoverOverlayWrapperClassName, hoverOverlayWrapperClassName = _4 === void 0 ? null : _4, _5 = _a.hoverOverlayWrapperStyle, hoverOverlayWrapperStyle = _5 === void 0 ? null : _5, _6 = _a.pausedOverlayWrapperClassName, pausedOverlayWrapperClassName = _6 === void 0 ? null : _6, _7 = _a.pausedOverlayWrapperStyle, pausedOverlayWrapperStyle = _7 === void 0 ? null : _7, _8 = _a.loadingOverlayWrapperClassName, loadingOverlayWrapperClassName = _8 === void 0 ? null : _8, _9 = _a.loadingOverlayWrapperStyle, loadingOverlayWrapperStyle = _9 === void 0 ? null : _9, _10 = _a.videoId, videoId = _10 === void 0 ? null : _10, _11 = _a.videoClassName, videoClassName = _11 === void 0 ? null : _11, _12 = _a.videoRef, forwardedVideoRef = _12 === void 0 ? null : _12, _13 = _a.videoStyle, videoStyle = _13 === void 0 ? null : _13, _14 = _a.sizingMode, sizingMode = _14 === void 0 ? 'video' : _14, _15 = _a.shouldSuppressPlaybackInterruptedErrors, shouldSuppressPlaybackInterruptedErrors = _15 === void 0 ? true : _15;
+    var videoSrc = _a.videoSrc, _b = _a.videoCaptions, videoCaptions = _b === void 0 ? null : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.disableDefaultEventHandling, disableDefaultEventHandling = _d === void 0 ? false : _d, _e = _a.hoverTarget, hoverTarget = _e === void 0 ? null : _e, _f = _a.onHoverStart, onHoverStart = _f === void 0 ? null : _f, _g = _a.onHoverEnd, onHoverEnd = _g === void 0 ? null : _g, _h = _a.hoverOverlay, hoverOverlay = _h === void 0 ? null : _h, _j = _a.pausedOverlay, pausedOverlay = _j === void 0 ? null : _j, _k = _a.loadingOverlay, loadingOverlay = _k === void 0 ? null : _k, _l = _a.loadingStateTimeout, loadingStateTimeout = _l === void 0 ? 200 : _l, _m = _a.overlayTransitionDuration, overlayTransitionDuration = _m === void 0 ? 400 : _m, _o = _a.playbackStartDelay, playbackStartDelay = _o === void 0 ? 0 : _o, _p = _a.restartOnPaused, restartOnPaused = _p === void 0 ? false : _p, _q = _a.unloadVideoOnPaused, unloadVideoOnPaused = _q === void 0 ? false : _q, _r = _a.playbackRangeStart, playbackRangeStart = _r === void 0 ? null : _r, _s = _a.playbackRangeEnd, playbackRangeEnd = _s === void 0 ? null : _s, _t = _a.muted, muted = _t === void 0 ? true : _t, _u = _a.volume, volume = _u === void 0 ? 1 : _u, _v = _a.loop, loop = _v === void 0 ? true : _v, _w = _a.preload, preload = _w === void 0 ? null : _w, _x = _a.crossOrigin, crossOrigin = _x === void 0 ? 'anonymous' : _x, _y = _a.controls, controls = _y === void 0 ? false : _y, _z = _a.controlsList, controlsList = _z === void 0 ? null : _z, _0 = _a.disableRemotePlayback, disableRemotePlayback = _0 === void 0 ? true : _0, _1 = _a.disablePictureInPicture, disablePictureInPicture = _1 === void 0 ? true : _1, _2 = _a.style, style = _2 === void 0 ? null : _2, _3 = _a.hoverOverlayWrapperClassName, hoverOverlayWrapperClassName = _3 === void 0 ? null : _3, _4 = _a.hoverOverlayWrapperStyle, hoverOverlayWrapperStyle = _4 === void 0 ? null : _4, _5 = _a.pausedOverlayWrapperClassName, pausedOverlayWrapperClassName = _5 === void 0 ? null : _5, _6 = _a.pausedOverlayWrapperStyle, pausedOverlayWrapperStyle = _6 === void 0 ? null : _6, _7 = _a.loadingOverlayWrapperClassName, loadingOverlayWrapperClassName = _7 === void 0 ? null : _7, _8 = _a.loadingOverlayWrapperStyle, loadingOverlayWrapperStyle = _8 === void 0 ? null : _8, _9 = _a.videoId, videoId = _9 === void 0 ? null : _9, _10 = _a.videoClassName, videoClassName = _10 === void 0 ? null : _10, _11 = _a.videoRef, forwardedVideoRef = _11 === void 0 ? null : _11, _12 = _a.videoStyle, videoStyle = _12 === void 0 ? null : _12, _13 = _a.sizingMode, sizingMode = _13 === void 0 ? 'video' : _13, _14 = _a.shouldSuppressPlaybackInterruptedErrors, shouldSuppressPlaybackInterruptedErrors = _14 === void 0 ? true : _14, spreadableProps = __rest(_a, ["videoSrc", "videoCaptions", "focused", "disableDefaultEventHandling", "hoverTarget", "onHoverStart", "onHoverEnd", "hoverOverlay", "pausedOverlay", "loadingOverlay", "loadingStateTimeout", "overlayTransitionDuration", "playbackStartDelay", "restartOnPaused", "unloadVideoOnPaused", "playbackRangeStart", "playbackRangeEnd", "muted", "volume", "loop", "preload", "crossOrigin", "controls", "controlsList", "disableRemotePlayback", "disablePictureInPicture", "style", "hoverOverlayWrapperClassName", "hoverOverlayWrapperStyle", "pausedOverlayWrapperClassName", "pausedOverlayWrapperStyle", "loadingOverlayWrapperClassName", "loadingOverlayWrapperStyle", "videoId", "videoClassName", "videoRef", "videoStyle", "sizingMode", "shouldSuppressPlaybackInterruptedErrors"]);
     // Element refs
@@ -464,4 +476,4 @@ var containerRef = useRef(null);
     };
-    var _16 = useState(false), isPlaying = _16[0], setIsPlaying = _16[1];
-    var _17 = useState(false), isHovering = _17[0], setIsHovering = _17[1];
+    var _15 = useState(false), isPlaying = _15[0], setIsPlaying = _15[1];
+    var _16 = useState(false), isHovering = _16[0], setIsHovering = _16[1];
     useEffect(function () {
@@ -560,3 +572,3 @@ if (!isPlaying) {
     var isUsingPlaybackRange = playbackRangeStart !== null || playbackRangeEnd !== null;
-    return (React.createElement("div", { "data-testid": "hover-video-player-container", ref: containerRef, className: className, style: __assign(__assign(__assign({}, containerSizingStyles[sizingMode]), { position: 'relative' }), style) },
+    return (React.createElement("div", __assign({ "data-testid": "hover-video-player-container", ref: containerRef, style: __assign(__assign(__assign({}, containerSizingStyles[sizingMode]), { position: 'relative' }), style) }, spreadableProps),
         hasPausedOverlay ? (React.createElement("div", { style: __assign(__assign(__assign({}, pausedOverlayWrapperSizingStyles[sizingMode]), { zIndex: 1, opacity: shouldShowPausedOverlay ? 1 : 0, transition: "opacity ".concat(overlayTransitionDuration, "ms"), 
@@ -563,0 +575,0 @@ // Disable pointer events on the paused overlay when it's hidden

dist/index.js

@@ -35,2 +35,14 @@ 'use strict';
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 /**
@@ -386,3 +398,3 @@ * Hook handles manually setting some additional attributes on the video that
 function HoverVideoPlayer(_a) {
-    var videoSrc = _a.videoSrc, _b = _a.videoCaptions, videoCaptions = _b === void 0 ? null : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.disableDefaultEventHandling, disableDefaultEventHandling = _d === void 0 ? false : _d, _e = _a.hoverTarget, hoverTarget = _e === void 0 ? null : _e, _f = _a.onHoverStart, onHoverStart = _f === void 0 ? null : _f, _g = _a.onHoverEnd, onHoverEnd = _g === void 0 ? null : _g, _h = _a.hoverOverlay, hoverOverlay = _h === void 0 ? null : _h, _j = _a.pausedOverlay, pausedOverlay = _j === void 0 ? null : _j, _k = _a.loadingOverlay, loadingOverlay = _k === void 0 ? null : _k, _l = _a.loadingStateTimeout, loadingStateTimeout = _l === void 0 ? 200 : _l, _m = _a.overlayTransitionDuration, overlayTransitionDuration = _m === void 0 ? 400 : _m, _o = _a.playbackStartDelay, playbackStartDelay = _o === void 0 ? 0 : _o, _p = _a.restartOnPaused, restartOnPaused = _p === void 0 ? false : _p, _q = _a.unloadVideoOnPaused, unloadVideoOnPaused = _q === void 0 ? false : _q, _r = _a.playbackRangeStart, playbackRangeStart = _r === void 0 ? null : _r, _s = _a.playbackRangeEnd, playbackRangeEnd = _s === void 0 ? null : _s, _t = _a.muted, muted = _t === void 0 ? true : _t, _u = _a.volume, volume = _u === void 0 ? 1 : _u, _v = _a.loop, loop = _v === void 0 ? true : _v, _w = _a.preload, preload = _w === void 0 ? null : _w, _x = _a.crossOrigin, crossOrigin = _x === void 0 ? 'anonymous' : _x, _y = _a.controls, controls = _y === void 0 ? false : _y, _z = _a.controlsList, controlsList = _z === void 0 ? null : _z, _0 = _a.disableRemotePlayback, disableRemotePlayback = _0 === void 0 ? true : _0, _1 = _a.disablePictureInPicture, disablePictureInPicture = _1 === void 0 ? true : _1, _2 = _a.className, className = _2 === void 0 ? null : _2, _3 = _a.style, style = _3 === void 0 ? null : _3, _4 = _a.hoverOverlayWrapperClassName, hoverOverlayWrapperClassName = _4 === void 0 ? null : _4, _5 = _a.hoverOverlayWrapperStyle, hoverOverlayWrapperStyle = _5 === void 0 ? null : _5, _6 = _a.pausedOverlayWrapperClassName, pausedOverlayWrapperClassName = _6 === void 0 ? null : _6, _7 = _a.pausedOverlayWrapperStyle, pausedOverlayWrapperStyle = _7 === void 0 ? null : _7, _8 = _a.loadingOverlayWrapperClassName, loadingOverlayWrapperClassName = _8 === void 0 ? null : _8, _9 = _a.loadingOverlayWrapperStyle, loadingOverlayWrapperStyle = _9 === void 0 ? null : _9, _10 = _a.videoId, videoId = _10 === void 0 ? null : _10, _11 = _a.videoClassName, videoClassName = _11 === void 0 ? null : _11, _12 = _a.videoRef, forwardedVideoRef = _12 === void 0 ? null : _12, _13 = _a.videoStyle, videoStyle = _13 === void 0 ? null : _13, _14 = _a.sizingMode, sizingMode = _14 === void 0 ? 'video' : _14, _15 = _a.shouldSuppressPlaybackInterruptedErrors, shouldSuppressPlaybackInterruptedErrors = _15 === void 0 ? true : _15;
+    var videoSrc = _a.videoSrc, _b = _a.videoCaptions, videoCaptions = _b === void 0 ? null : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.disableDefaultEventHandling, disableDefaultEventHandling = _d === void 0 ? false : _d, _e = _a.hoverTarget, hoverTarget = _e === void 0 ? null : _e, _f = _a.onHoverStart, onHoverStart = _f === void 0 ? null : _f, _g = _a.onHoverEnd, onHoverEnd = _g === void 0 ? null : _g, _h = _a.hoverOverlay, hoverOverlay = _h === void 0 ? null : _h, _j = _a.pausedOverlay, pausedOverlay = _j === void 0 ? null : _j, _k = _a.loadingOverlay, loadingOverlay = _k === void 0 ? null : _k, _l = _a.loadingStateTimeout, loadingStateTimeout = _l === void 0 ? 200 : _l, _m = _a.overlayTransitionDuration, overlayTransitionDuration = _m === void 0 ? 400 : _m, _o = _a.playbackStartDelay, playbackStartDelay = _o === void 0 ? 0 : _o, _p = _a.restartOnPaused, restartOnPaused = _p === void 0 ? false : _p, _q = _a.unloadVideoOnPaused, unloadVideoOnPaused = _q === void 0 ? false : _q, _r = _a.playbackRangeStart, playbackRangeStart = _r === void 0 ? null : _r, _s = _a.playbackRangeEnd, playbackRangeEnd = _s === void 0 ? null : _s, _t = _a.muted, muted = _t === void 0 ? true : _t, _u = _a.volume, volume = _u === void 0 ? 1 : _u, _v = _a.loop, loop = _v === void 0 ? true : _v, _w = _a.preload, preload = _w === void 0 ? null : _w, _x = _a.crossOrigin, crossOrigin = _x === void 0 ? 'anonymous' : _x, _y = _a.controls, controls = _y === void 0 ? false : _y, _z = _a.controlsList, controlsList = _z === void 0 ? null : _z, _0 = _a.disableRemotePlayback, disableRemotePlayback = _0 === void 0 ? true : _0, _1 = _a.disablePictureInPicture, disablePictureInPicture = _1 === void 0 ? true : _1, _2 = _a.style, style = _2 === void 0 ? null : _2, _3 = _a.hoverOverlayWrapperClassName, hoverOverlayWrapperClassName = _3 === void 0 ? null : _3, _4 = _a.hoverOverlayWrapperStyle, hoverOverlayWrapperStyle = _4 === void 0 ? null : _4, _5 = _a.pausedOverlayWrapperClassName, pausedOverlayWrapperClassName = _5 === void 0 ? null : _5, _6 = _a.pausedOverlayWrapperStyle, pausedOverlayWrapperStyle = _6 === void 0 ? null : _6, _7 = _a.loadingOverlayWrapperClassName, loadingOverlayWrapperClassName = _7 === void 0 ? null : _7, _8 = _a.loadingOverlayWrapperStyle, loadingOverlayWrapperStyle = _8 === void 0 ? null : _8, _9 = _a.videoId, videoId = _9 === void 0 ? null : _9, _10 = _a.videoClassName, videoClassName = _10 === void 0 ? null : _10, _11 = _a.videoRef, forwardedVideoRef = _11 === void 0 ? null : _11, _12 = _a.videoStyle, videoStyle = _12 === void 0 ? null : _12, _13 = _a.sizingMode, sizingMode = _13 === void 0 ? 'video' : _13, _14 = _a.shouldSuppressPlaybackInterruptedErrors, shouldSuppressPlaybackInterruptedErrors = _14 === void 0 ? true : _14, spreadableProps = __rest(_a, ["videoSrc", "videoCaptions", "focused", "disableDefaultEventHandling", "hoverTarget", "onHoverStart", "onHoverEnd", "hoverOverlay", "pausedOverlay", "loadingOverlay", "loadingStateTimeout", "overlayTransitionDuration", "playbackStartDelay", "restartOnPaused", "unloadVideoOnPaused", "playbackRangeStart", "playbackRangeEnd", "muted", "volume", "loop", "preload", "crossOrigin", "controls", "controlsList", "disableRemotePlayback", "disablePictureInPicture", "style", "hoverOverlayWrapperClassName", "hoverOverlayWrapperStyle", "pausedOverlayWrapperClassName", "pausedOverlayWrapperStyle", "loadingOverlayWrapperClassName", "loadingOverlayWrapperStyle", "videoId", "videoClassName", "videoRef", "videoStyle", "sizingMode", "shouldSuppressPlaybackInterruptedErrors"]);
     // Element refs
@@ -470,4 +482,4 @@ var containerRef = React.useRef(null);
     };
-    var _16 = React.useState(false), isPlaying = _16[0], setIsPlaying = _16[1];
-    var _17 = React.useState(false), isHovering = _17[0], setIsHovering = _17[1];
+    var _15 = React.useState(false), isPlaying = _15[0], setIsPlaying = _15[1];
+    var _16 = React.useState(false), isHovering = _16[0], setIsHovering = _16[1];
     React.useEffect(function () {
@@ -566,3 +578,3 @@ if (!isPlaying) {
     var isUsingPlaybackRange = playbackRangeStart !== null || playbackRangeEnd !== null;
-    return (React__default["default"].createElement("div", { "data-testid": "hover-video-player-container", ref: containerRef, className: className, style: __assign(__assign(__assign({}, containerSizingStyles[sizingMode]), { position: 'relative' }), style) },
+    return (React__default["default"].createElement("div", __assign({ "data-testid": "hover-video-player-container", ref: containerRef, style: __assign(__assign(__assign({}, containerSizingStyles[sizingMode]), { position: 'relative' }), style) }, spreadableProps),
         hasPausedOverlay ? (React__default["default"].createElement("div", { style: __assign(__assign(__assign({}, pausedOverlayWrapperSizingStyles[sizingMode]), { zIndex: 1, opacity: shouldShowPausedOverlay ? 1 : 0, transition: "opacity ".concat(overlayTransitionDuration, "ms"), 
@@ -569,0 +581,0 @@ // Disable pointer events on the paused overlay when it's hidden

package.json

 {
   "name": "react-hover-video-player",
-  "version": "9.6.1",
+  "version": "9.7.0",
   "description": "React component which manages playing a video when the user hovers over it and pausing when they stop.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

270683

increased by1.41%

Lines of code

1666

increased by1.28%

No dependency changes