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

Comparing version 7.0.0 to 7.1.0

es/index.js

@@ -9,3 +9,4 @@ 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|string[]|VideoSource|VideoSource[])}  videoSrc - Source(s) to use for the video player. Accepts 3 different formats:
+ * @param {object}  props - Component props
+ * @param {(string|string[]|VideoSource|VideoSource[])}  props.videoSrc - Source(s) to use for the video player. Accepts 3 different formats:
  *                                                                   - **String**: the URL string to use as the video player's src
@@ -16,3 +17,3 @@ *                                                                   - **Object**: an object with attributes:
  *                                                                   - **Array**: if you would like to provide multiple sources, you can provide an array of URL strings and/or objects with the shape described above
- * @param {(VideoCaptionsTrack|VideoCaptionsTrack[])} [videoCaptions] - Captions track(s) to use for the video player for accessibility. Accepts 2 formats:
+ * @param {(VideoCaptionsTrack|VideoCaptionsTrack[])} [props.videoCaptions] - Captions track(s) to use for the video player for accessibility. Accepts 2 formats:
  *                                                                                      - **Object**: an object with attributes:
@@ -24,34 +25,42 @@ *                                                                                        - src: The src URL string for the captions track file
  *                                                                                      - **Array**: if you would like to provide multiple caption tracks, you can provide an array of objects with the shape described above
- * @param {boolean} [focused=false] - Offers a prop interface for forcing the video to start/stop without DOM events
+ * @param {boolean} [props.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 {boolean} [disableDefaultEventHandling] - Whether the video player's default mouse and touch event handling should be disabled in favor of a fully custom solution using the `focused` prop
- * @param {node}    [hoverTargetRef] - Ref to a custom element that should be used as the target for hover events to start/stop the video
+ * @param {boolean} [props.disableDefaultEventHandling] - Whether the video player's default mouse and touch event handling should be disabled in favor of a fully custom solution using the `focused` prop
+ * @param {node}    [props.hoverTargetRef] - Ref to a custom element that should be used as the target for hover events to start/stop the video
  *                                      By default will just use the container div wrapping the player
- * @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}  [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 {boolean} [restartOnPaused=false] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
- * @param {boolean} [unloadVideoOnPaused=false] - Whether we should unload the video's sources when it is not playing in order to free up memory and bandwidth
+ * @param {node}    [props.pausedOverlay] - Contents to render over the video while it's not playing
+ * @param {node}    [props.loadingOverlay] - Contents to render over the video while it's loading
+ * @param {number}  [props.loadingStateTimeout=200] - Duration in ms to wait after attempting to start the video before showing the loading overlay
+ * @param {number}  [props.overlayTransitionDuration=400] - The transition duration in ms for how long it should take for the overlay to fade in/out
+ * @param {boolean} [props.restartOnPaused=false] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
+ * @param {boolean} [props.unloadVideoOnPaused=false] - Whether we should unload the video's sources when it is not playing in order to free up memory and bandwidth
  *                                                  This can be useful in scenarios where you may have a large number of relatively large video files on a single page;
  *                                                  particularly due to a known bug in Google Chrome, if too many videos are loading in the background at the same time,
  *                                                  it starts to gum up the works so that nothing loads properly and performance can degrade significantly.
- * @param {boolean} [muted=true] - Whether the video player should be muted
- * @param {boolean} [loop=true] - Whether the video player should loop when it reaches the end
- * @param {string}  [preload] - Sets how much information the video element should preload before being played. Accepts one of the following values:
+ * @param {boolean} [props.muted=true] - Whether the video player should be muted
+ * @param {boolean} [props.loop=true] - Whether the video player should loop when it reaches the end
+ * @param {string}  [props.preload] - Sets how much information the video element should preload before being played. Accepts one of the following values:
  *                              - **"none"**: Nothing should be preloaded before the video is played
  *                              - **"metadata"**: Only the video's metadata (ie length, dimensions) should be preloaded
  *                              - **"auto"**: The whole video file should be preloaded even if it won't be played
- * @param {string}  [crossOrigin='anonymous'] - Sets how the video element should handle CORS requests. Accepts one of the following values:
+ * @param {string}  [props.crossOrigin='anonymous'] - Sets how the video element should handle CORS requests. Accepts one of the following values:
  *                                              - **"anonymous"**: CORS requests will have the credentials flag set to 'same-origin'
  *                                              - **"use-credentials"**: CORS requests for this element will have the credentials flag set to 'include'
- * @param {string}  [className] - Optional className to apply custom styling to the container element
- * @param {object}  [style] - Style object to apply custom inlined styles to the hover player container
- * @param {string}  [pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
- * @param {object}  [pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
- * @param {string}  [loadingOverlayWrapperClassName] - Optional className to apply custom styling to the loading state overlay contents' wrapper
- * @param {object}  [loadingOverlayWrapperStyle] - Style object to apply custom inlined styles to the loading overlay wrapper
- * @param {string}  [videoClassName] - Optional className to apply custom styling to the video element
- * @param {object}  [videoStyle] - Style object to apply custom inlined styles to 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:
+ * @param {boolean} [props.controls=false] - Sets whether the video element should have the browser's video playback controls enabled.
+ * @param {string}  [props.controlsList] - Allows finer control over which controls the browser should exclude from the video playback controls.
+ *                                    Be aware that this feature is not currently supported across all major browsers.
+ *                                    Accepts a string with the following values, separated by spaces if using more than one:
+ *                                      - **"nodownload"**: Removes the download button from the video's controls
+ *                                      - **"nofullscreen"**: Removes the fullscreen button from the video's controls
+ * @param {boolean} [props.disableRemotePlayback=true] - Prevents the browser from showing controls to cast the video
+ * @param {boolean} [props.disablePictureInPicture=true] - Prevents the browser from showing picture-in-picture controls on the video
+ * @param {string}  [props.className] - Optional className to apply custom styling to the container element
+ * @param {object}  [props.style] - Style object to apply custom inlined styles to the hover player container
+ * @param {string}  [props.pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
+ * @param {object}  [props.pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
+ * @param {string}  [props.loadingOverlayWrapperClassName] - Optional className to apply custom styling to the loading state overlay contents' wrapper
+ * @param {object}  [props.loadingOverlayWrapperStyle] - Style object to apply custom inlined styles to the loading overlay wrapper
+ * @param {string}  [props.videoClassName] - Optional className to apply custom styling to the video element
+ * @param {object}  [props.videoStyle] - Style object to apply custom inlined styles to the video element
+ * @param {string}  [props.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
@@ -95,2 +104,10 @@ *                                         - **"overlay"**: Everything should be sized based on the paused overlay's dimensions - the video element will expand to fit inside those dimensions
       crossOrigin = _ref$crossOrigin === void 0 ? 'anonymous' : _ref$crossOrigin,
+      _ref$controls = _ref.controls,
+      controls = _ref$controls === void 0 ? false : _ref$controls,
+      _ref$controlsList = _ref.controlsList,
+      controlsList = _ref$controlsList === void 0 ? null : _ref$controlsList,
+      _ref$disableRemotePla = _ref.disableRemotePlayback,
+      disableRemotePlayback = _ref$disableRemotePla === void 0 ? true : _ref$disableRemotePla,
+      _ref$disablePictureIn = _ref.disablePictureInPicture,
+      disablePictureInPicture = _ref$disablePictureIn === void 0 ? true : _ref$disablePictureIn,
       _ref$className = _ref.className,
@@ -386,6 +403,9 @@ className = _ref$className === void 0 ? '' : _ref$className,
   React.useEffect(function () {
-    var videoElement = videoRef.current; // Ensure casting and PiP controls aren't shown on the video
-
-    videoElement.disableRemotePlayback = true;
-    videoElement.disablePictureInPicture = true;
+    // React does not support directly setting disableRemotePlayback or disablePictureInPicture directly
+    // via the video element's props, so make sure we manually set them in an effect
+    var videoElement = videoRef.current;
+    videoElement.disableRemotePlayback = disableRemotePlayback;
+    videoElement.disablePictureInPicture = disablePictureInPicture;
+  }, [disablePictureInPicture, disableRemotePlayback]);
+  React.useEffect(function () {
     return function () {
@@ -402,2 +422,4 @@ // Clear any outstanding timeouts when the component unmounts to prevent memory leaks
 
+  var isPausedOverlayVisible = overlayState !== HOVER_PLAYER_STATE.playing;
+  var isLoadingOverlayVisibile = overlayState === HOVER_PLAYER_STATE.loading;
   return /*#__PURE__*/React.createElement("div", {
@@ -413,4 +435,6 @@ "data-testid": "hover-video-player-container",
       zIndex: 1,
-      opacity: overlayState !== HOVER_PLAYER_STATE.playing ? 1 : 0,
-      transition: "opacity " + overlayTransitionDuration + "ms"
+      opacity: isPausedOverlayVisible ? 1 : 0,
+      transition: "opacity " + overlayTransitionDuration + "ms",
+      // Disable pointer events on the paused overlay when it's hidden
+      pointerEvents: isPausedOverlayVisible ? 'auto' : 'none'
     }, pausedOverlayWrapperStyle),
@@ -422,4 +446,6 @@ className: pausedOverlayWrapperClassName,
       zIndex: 2,
-      opacity: overlayState === HOVER_PLAYER_STATE.loading ? 1 : 0,
-      transition: "opacity " + overlayTransitionDuration + "ms"
+      opacity: isLoadingOverlayVisibile ? 1 : 0,
+      transition: "opacity " + overlayTransitionDuration + "ms",
+      // Disable pointer events on the loading overlay when it's hidden
+      pointerEvents: isLoadingOverlayVisibile ? 'auto' : 'none'
     }, loadingOverlayWrapperStyle),
@@ -437,2 +463,4 @@ className: loadingOverlayWrapperClassName,
     }, videoStyle),
+    controls: controls,
+    controlsList: controlsList,
     className: videoClassName,
@@ -439,0 +467,0 @@ "data-testid": "video-element"

lib/index.js

@@ -19,3 +19,4 @@ "use strict";
  *
- * @param {(string|string[]|VideoSource|VideoSource[])}  videoSrc - Source(s) to use for the video player. Accepts 3 different formats:
+ * @param {object}  props - Component props
+ * @param {(string|string[]|VideoSource|VideoSource[])}  props.videoSrc - Source(s) to use for the video player. Accepts 3 different formats:
  *                                                                   - **String**: the URL string to use as the video player's src
@@ -26,3 +27,3 @@ *                                                                   - **Object**: an object with attributes:
  *                                                                   - **Array**: if you would like to provide multiple sources, you can provide an array of URL strings and/or objects with the shape described above
- * @param {(VideoCaptionsTrack|VideoCaptionsTrack[])} [videoCaptions] - Captions track(s) to use for the video player for accessibility. Accepts 2 formats:
+ * @param {(VideoCaptionsTrack|VideoCaptionsTrack[])} [props.videoCaptions] - Captions track(s) to use for the video player for accessibility. Accepts 2 formats:
  *                                                                                      - **Object**: an object with attributes:
@@ -34,34 +35,42 @@ *                                                                                        - src: The src URL string for the captions track file
  *                                                                                      - **Array**: if you would like to provide multiple caption tracks, you can provide an array of objects with the shape described above
- * @param {boolean} [focused=false] - Offers a prop interface for forcing the video to start/stop without DOM events
+ * @param {boolean} [props.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 {boolean} [disableDefaultEventHandling] - Whether the video player's default mouse and touch event handling should be disabled in favor of a fully custom solution using the `focused` prop
- * @param {node}    [hoverTargetRef] - Ref to a custom element that should be used as the target for hover events to start/stop the video
+ * @param {boolean} [props.disableDefaultEventHandling] - Whether the video player's default mouse and touch event handling should be disabled in favor of a fully custom solution using the `focused` prop
+ * @param {node}    [props.hoverTargetRef] - Ref to a custom element that should be used as the target for hover events to start/stop the video
  *                                      By default will just use the container div wrapping the player
- * @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}  [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 {boolean} [restartOnPaused=false] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
- * @param {boolean} [unloadVideoOnPaused=false] - Whether we should unload the video's sources when it is not playing in order to free up memory and bandwidth
+ * @param {node}    [props.pausedOverlay] - Contents to render over the video while it's not playing
+ * @param {node}    [props.loadingOverlay] - Contents to render over the video while it's loading
+ * @param {number}  [props.loadingStateTimeout=200] - Duration in ms to wait after attempting to start the video before showing the loading overlay
+ * @param {number}  [props.overlayTransitionDuration=400] - The transition duration in ms for how long it should take for the overlay to fade in/out
+ * @param {boolean} [props.restartOnPaused=false] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
+ * @param {boolean} [props.unloadVideoOnPaused=false] - Whether we should unload the video's sources when it is not playing in order to free up memory and bandwidth
  *                                                  This can be useful in scenarios where you may have a large number of relatively large video files on a single page;
  *                                                  particularly due to a known bug in Google Chrome, if too many videos are loading in the background at the same time,
  *                                                  it starts to gum up the works so that nothing loads properly and performance can degrade significantly.
- * @param {boolean} [muted=true] - Whether the video player should be muted
- * @param {boolean} [loop=true] - Whether the video player should loop when it reaches the end
- * @param {string}  [preload] - Sets how much information the video element should preload before being played. Accepts one of the following values:
+ * @param {boolean} [props.muted=true] - Whether the video player should be muted
+ * @param {boolean} [props.loop=true] - Whether the video player should loop when it reaches the end
+ * @param {string}  [props.preload] - Sets how much information the video element should preload before being played. Accepts one of the following values:
  *                              - **"none"**: Nothing should be preloaded before the video is played
  *                              - **"metadata"**: Only the video's metadata (ie length, dimensions) should be preloaded
  *                              - **"auto"**: The whole video file should be preloaded even if it won't be played
- * @param {string}  [crossOrigin='anonymous'] - Sets how the video element should handle CORS requests. Accepts one of the following values:
+ * @param {string}  [props.crossOrigin='anonymous'] - Sets how the video element should handle CORS requests. Accepts one of the following values:
  *                                              - **"anonymous"**: CORS requests will have the credentials flag set to 'same-origin'
  *                                              - **"use-credentials"**: CORS requests for this element will have the credentials flag set to 'include'
- * @param {string}  [className] - Optional className to apply custom styling to the container element
- * @param {object}  [style] - Style object to apply custom inlined styles to the hover player container
- * @param {string}  [pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
- * @param {object}  [pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
- * @param {string}  [loadingOverlayWrapperClassName] - Optional className to apply custom styling to the loading state overlay contents' wrapper
- * @param {object}  [loadingOverlayWrapperStyle] - Style object to apply custom inlined styles to the loading overlay wrapper
- * @param {string}  [videoClassName] - Optional className to apply custom styling to the video element
- * @param {object}  [videoStyle] - Style object to apply custom inlined styles to 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:
+ * @param {boolean} [props.controls=false] - Sets whether the video element should have the browser's video playback controls enabled.
+ * @param {string}  [props.controlsList] - Allows finer control over which controls the browser should exclude from the video playback controls.
+ *                                    Be aware that this feature is not currently supported across all major browsers.
+ *                                    Accepts a string with the following values, separated by spaces if using more than one:
+ *                                      - **"nodownload"**: Removes the download button from the video's controls
+ *                                      - **"nofullscreen"**: Removes the fullscreen button from the video's controls
+ * @param {boolean} [props.disableRemotePlayback=true] - Prevents the browser from showing controls to cast the video
+ * @param {boolean} [props.disablePictureInPicture=true] - Prevents the browser from showing picture-in-picture controls on the video
+ * @param {string}  [props.className] - Optional className to apply custom styling to the container element
+ * @param {object}  [props.style] - Style object to apply custom inlined styles to the hover player container
+ * @param {string}  [props.pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
+ * @param {object}  [props.pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
+ * @param {string}  [props.loadingOverlayWrapperClassName] - Optional className to apply custom styling to the loading state overlay contents' wrapper
+ * @param {object}  [props.loadingOverlayWrapperStyle] - Style object to apply custom inlined styles to the loading overlay wrapper
+ * @param {string}  [props.videoClassName] - Optional className to apply custom styling to the video element
+ * @param {object}  [props.videoStyle] - Style object to apply custom inlined styles to the video element
+ * @param {string}  [props.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
@@ -104,2 +113,10 @@ *                                         - **"overlay"**: Everything should be sized based on the paused overlay's dimensions - the video element will expand to fit inside those dimensions
       crossOrigin = _ref$crossOrigin === void 0 ? 'anonymous' : _ref$crossOrigin,
+      _ref$controls = _ref.controls,
+      controls = _ref$controls === void 0 ? false : _ref$controls,
+      _ref$controlsList = _ref.controlsList,
+      controlsList = _ref$controlsList === void 0 ? null : _ref$controlsList,
+      _ref$disableRemotePla = _ref.disableRemotePlayback,
+      disableRemotePlayback = _ref$disableRemotePla === void 0 ? true : _ref$disableRemotePla,
+      _ref$disablePictureIn = _ref.disablePictureInPicture,
+      disablePictureInPicture = _ref$disablePictureIn === void 0 ? true : _ref$disablePictureIn,
       _ref$className = _ref.className,
@@ -407,6 +424,10 @@ className = _ref$className === void 0 ? '' : _ref$className,
   _react["default"].useEffect(function () {
-    var videoElement = videoRef.current; // Ensure casting and PiP controls aren't shown on the video
+    // React does not support directly setting disableRemotePlayback or disablePictureInPicture directly
+    // via the video element's props, so make sure we manually set them in an effect
+    var videoElement = videoRef.current;
+    videoElement.disableRemotePlayback = disableRemotePlayback;
+    videoElement.disablePictureInPicture = disablePictureInPicture;
+  }, [disablePictureInPicture, disableRemotePlayback]);
 
-    videoElement.disableRemotePlayback = true;
-    videoElement.disablePictureInPicture = true;
+  _react["default"].useEffect(function () {
     return function () {
@@ -424,2 +445,4 @@ // Clear any outstanding timeouts when the component unmounts to prevent memory leaks
 
+  var isPausedOverlayVisible = overlayState !== _constants.HOVER_PLAYER_STATE.playing;
+  var isLoadingOverlayVisibile = overlayState === _constants.HOVER_PLAYER_STATE.loading;
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -435,4 +458,6 @@ "data-testid": "hover-video-player-container",
       zIndex: 1,
-      opacity: overlayState !== _constants.HOVER_PLAYER_STATE.playing ? 1 : 0,
-      transition: "opacity " + overlayTransitionDuration + "ms"
+      opacity: isPausedOverlayVisible ? 1 : 0,
+      transition: "opacity " + overlayTransitionDuration + "ms",
+      // Disable pointer events on the paused overlay when it's hidden
+      pointerEvents: isPausedOverlayVisible ? 'auto' : 'none'
     }, pausedOverlayWrapperStyle),
@@ -444,4 +469,6 @@ className: pausedOverlayWrapperClassName,
       zIndex: 2,
-      opacity: overlayState === _constants.HOVER_PLAYER_STATE.loading ? 1 : 0,
-      transition: "opacity " + overlayTransitionDuration + "ms"
+      opacity: isLoadingOverlayVisibile ? 1 : 0,
+      transition: "opacity " + overlayTransitionDuration + "ms",
+      // Disable pointer events on the loading overlay when it's hidden
+      pointerEvents: isLoadingOverlayVisibile ? 'auto' : 'none'
     }, loadingOverlayWrapperStyle),
@@ -459,2 +486,4 @@ className: loadingOverlayWrapperClassName,
     }, videoStyle),
+    controls: controls,
+    controlsList: controlsList,
     className: videoClassName,
@@ -461,0 +490,0 @@ "data-testid": "video-element"

package.json

 {
   "name": "react-hover-video-player",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "React component which manages playing a video when the user hovers over it and pausing when they stop.",
@@ -50,3 +50,3 @@ "main": "lib/index.js",
     "eslint-plugin-testing-library": "^3.0.2",
-    "husky": "^4.2.5",
+    "husky": "^5.1.3",
     "jest": "^25.2.7",
@@ -95,9 +95,2 @@ "lint-staged": "^10.2.6",
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "release": {
@@ -104,0 +97,0 @@ "plugins": [

README.md

@@ -41,2 +41,7 @@ # React Hover Video Player
     - [unloadVideoOnPaused](#unloadvideoonpaused)
+1. **[Video Controls](#video-controls)**
+    - [controls](#controls)
+    - [controlsList](#controlslist)
+    - [disableRemotePlayback](#disableremoteplayback)
+    - [disablePictureInPicture](#disablepictureinpicture)
 
@@ -145,4 +150,3 @@ ## What It Is
   label: 'English',
-  // OPTIONAL: whether this track should be used by default if
-  // the user's preferences don't match an available srcLang
+  // OPTIONAL: whether this track should be used by default
   default: true,
@@ -152,2 +156,4 @@ }
 
+Note that if you do not set `default: true` or have more than one track, it is recommended that you set the [controls](#controls) prop to `true` so that the user may enable the captions or choose the correct captions for their desired language.
+
 In practice this looks like:
@@ -171,2 +177,4 @@
   ]}
+  // Enable the video's controls so that the user can select the caption track they want or toggle captions on and off
+  controls
 />
@@ -510,1 +518,65 @@ ```
 ```
+
+## Video Controls
+
+### controls
+
+**Type**: `boolean` | **Default**: `false`
+
+`controls` accepts a boolean value which toggles whether the video element should have the browser's video playback controls enabled.
+
+```jsx
+<HoverVideoPlayer
+  videoSrc="video.mp4"
+  // Show playback controls on the video
+  controls
+/>
+```
+
+### controlsList
+
+**Type**: `string` | **Default**: `null`
+
+`controlsList` accepts a string describing buttons that should be excluded from the video's playback controls. The string can include the following possible values, with spaces separating each one:
+
+- `"nodownload"`: Removes the download button from the video's controls
+- `"nofullscreen"`: Removes the fullscreen button from the video's controls
+
+Be aware that this feature [is not currently supported across all major browsers.](https://caniuse.com/mdn-api_htmlmediaelement_controlslist)
+
+```jsx
+<HoverVideoPlayer
+  videoSrc="video.mp4"
+  // Show playback controls on the video
+  controls
+  // Disable both the download and fullscreen buttons
+  controlsList="nodownload nofullscreen"
+/>
+```
+
+### disableRemotePlayback
+
+**Type**: `boolean` | **Default**: `true`
+
+`disableRemotePlayback` toggles whether the browser should show a remote playback UI on the video, which allows the user to cast the video to other devices.
+
+```jsx
+<HoverVideoPlayer
+  videoSrc="video.mp4"
+  // Show controls for casting this video to remote devices
+  disableRemotePlayback={false}
+/>
+```
+
+### disablePictureInPicture
+
+**Type**: `boolean` | **Default**: `true`
+
+`disablePictureInPicture` toggles whether the browser should show a picture-in-picture UI on the video, which allows the user to pop the video out into a floating window that persists over other tabs or apps.
+
+```jsx
+<HoverVideoPlayer
+  videoSrc="video.mp4"
+  // Show controls for playing this video in picture-in-picture mode
+  disablePictureInPicture={false}
+/>

No alert changes

Improved metrics

Total package byte prevSize

101462

increased by7.5%

Lines of code

1187

increased by5.14%

Number of lines in readme file

577

increased by14.03%

No dependency changes