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

Comparing version 7.2.0 to 7.3.0

es/index.js

@@ -62,2 +62,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  * @param {string}  [props.videoClassName] - Optional className to apply custom styling to the video element
+ * @param {string}  [props.videoId] - Optional unique id to apply to the video element to make it easier to access
  * @param {object}  [props.videoStyle] - Style object to apply custom inlined styles to the video element
@@ -114,15 +115,17 @@ * @param {string}  [props.sizingMode='video'] - Describes sizing mode to use to determine how the player's contents should be styled. Accepts 4 possible values:
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? null : _ref$className,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? null : _ref$style,
       _ref$pausedOverlayWra = _ref.pausedOverlayWrapperClassName,
-      pausedOverlayWrapperClassName = _ref$pausedOverlayWra === void 0 ? '' : _ref$pausedOverlayWra,
+      pausedOverlayWrapperClassName = _ref$pausedOverlayWra === void 0 ? null : _ref$pausedOverlayWra,
       _ref$pausedOverlayWra2 = _ref.pausedOverlayWrapperStyle,
       pausedOverlayWrapperStyle = _ref$pausedOverlayWra2 === void 0 ? null : _ref$pausedOverlayWra2,
       _ref$loadingOverlayWr = _ref.loadingOverlayWrapperClassName,
-      loadingOverlayWrapperClassName = _ref$loadingOverlayWr === void 0 ? '' : _ref$loadingOverlayWr,
+      loadingOverlayWrapperClassName = _ref$loadingOverlayWr === void 0 ? null : _ref$loadingOverlayWr,
       _ref$loadingOverlayWr2 = _ref.loadingOverlayWrapperStyle,
       loadingOverlayWrapperStyle = _ref$loadingOverlayWr2 === void 0 ? null : _ref$loadingOverlayWr2,
       _ref$videoClassName = _ref.videoClassName,
-      videoClassName = _ref$videoClassName === void 0 ? '' : _ref$videoClassName,
+      videoClassName = _ref$videoClassName === void 0 ? null : _ref$videoClassName,
+      _ref$videoId = _ref.videoId,
+      videoId = _ref$videoId === void 0 ? null : _ref$videoId,
       _ref$videoStyle = _ref.videoStyle,
@@ -468,2 +471,3 @@ videoStyle = _ref$videoStyle === void 0 ? null : _ref$videoStyle,
     className: videoClassName,
+    id: videoId,
     "data-testid": "video-element"
@@ -470,0 +474,0 @@ }, !isVideoUnloaded && // If the video is not unloaded, parse the `videoSrc` prop into an array of objects and render them

lib/index.js

@@ -72,2 +72,3 @@ "use strict";
  * @param {string}  [props.videoClassName] - Optional className to apply custom styling to the video element
+ * @param {string}  [props.videoId] - Optional unique id to apply to the video element to make it easier to access
  * @param {object}  [props.videoStyle] - Style object to apply custom inlined styles to the video element
@@ -123,15 +124,17 @@ * @param {string}  [props.sizingMode='video'] - Describes sizing mode to use to determine how the player's contents should be styled. Accepts 4 possible values:
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      className = _ref$className === void 0 ? null : _ref$className,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? null : _ref$style,
       _ref$pausedOverlayWra = _ref.pausedOverlayWrapperClassName,
-      pausedOverlayWrapperClassName = _ref$pausedOverlayWra === void 0 ? '' : _ref$pausedOverlayWra,
+      pausedOverlayWrapperClassName = _ref$pausedOverlayWra === void 0 ? null : _ref$pausedOverlayWra,
       _ref$pausedOverlayWra2 = _ref.pausedOverlayWrapperStyle,
       pausedOverlayWrapperStyle = _ref$pausedOverlayWra2 === void 0 ? null : _ref$pausedOverlayWra2,
       _ref$loadingOverlayWr = _ref.loadingOverlayWrapperClassName,
-      loadingOverlayWrapperClassName = _ref$loadingOverlayWr === void 0 ? '' : _ref$loadingOverlayWr,
+      loadingOverlayWrapperClassName = _ref$loadingOverlayWr === void 0 ? null : _ref$loadingOverlayWr,
       _ref$loadingOverlayWr2 = _ref.loadingOverlayWrapperStyle,
       loadingOverlayWrapperStyle = _ref$loadingOverlayWr2 === void 0 ? null : _ref$loadingOverlayWr2,
       _ref$videoClassName = _ref.videoClassName,
-      videoClassName = _ref$videoClassName === void 0 ? '' : _ref$videoClassName,
+      videoClassName = _ref$videoClassName === void 0 ? null : _ref$videoClassName,
+      _ref$videoId = _ref.videoId,
+      videoId = _ref$videoId === void 0 ? null : _ref$videoId,
       _ref$videoStyle = _ref.videoStyle,
@@ -492,2 +495,3 @@ videoStyle = _ref$videoStyle === void 0 ? null : _ref$videoStyle,
     className: videoClassName,
+    id: videoId,
     "data-testid": "video-element"
@@ -494,0 +498,0 @@ }, !isVideoUnloaded && // If the video is not unloaded, parse the `videoSrc` prop into an array of objects and render them

package.json

 {
   "name": "react-hover-video-player",
-  "version": "7.2.0",
+  "version": "7.3.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": "lib/index.js",

README.md

@@ -36,2 +36,3 @@ # React Hover Video Player
     - [loop](#loop)
+    - [videoId](#videoid)
 1. **[Custom Styling](#custom-styling)**
@@ -424,2 +425,22 @@ - [Applying classNames and styles](#applying-classnames-and-styles)
 
+### videoId
+
+**Type**: `string` | **Default**: null
+
+`videoId` can be used to set an `id` on the video element. This can be useful if you need to access the video element via `document.getElementById()` in order to extend its behavior in some unique way.
+
+```jsx
+useEffect(()=>{
+  const videoElement = document.getElementById('hover-video');
+  // DO SOMETHING WITH THE VIDEO ELEMENT HERE
+},[]);
+
+return (
+  <HoverVideoPlayer
+    videoSrc="video.mp4"
+    videoId="hover-video"
+  />
+)
+```
+
 ## Custom Styling
@@ -426,0 +447,0 @@

No alert changes

Improved metrics

Total package byte prevSize

103813

increased by0.96%

Lines of code

1211

increased by0.67%

Number of lines in readme file

616

increased by3.53%

No dependency changes