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

Comparing version 8.1.0 to 8.1.1

package.json

 {
   "name": "react-hover-video-player",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "React component which manages playing a video when the user hovers over it and pausing when they stop.",
@@ -11,4 +11,4 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "npx rollup -c rollup.config.js",
-    "dev": "npx rollup -c rollup.dev.config.js -w",
+    "build": "rollup -c rollup.config.js",
+    "dev": "rollup -c rollup.dev.config.js -w",
     "test": "jest --config=tests/jest.dev.config.js",
@@ -18,6 +18,8 @@ "test:release": "npm run build && jest --config=tests/jest.prod.config.js",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --config=tests/jest.dev.config.js",
-    "docs": "npx concurrently --kill-others 'npx gulp watch-docs' 'npx docsify serve docs'",
-    "commit": "npx git-cz"
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
+    "validate-docs": "gulp validate-readme-links",
+    "commit": "git-cz",
+    "prepack": "gulp copy-docs-readme-to-root"
   },
-  "dependencies": {},
   "peerDependencies": {
@@ -52,3 +54,2 @@ "react": ">=16.8.0",
     "cz-conventional-changelog": "^3.2.0",
-    "docsify-cli": "^4.4.3",
     "emotion": "^10.0.27",
@@ -78,4 +79,6 @@ "eslint": "^6.8.0",
     "semantic-release": "^17.4.2",
+    "through2": "^4.0.2",
     "tslib": "^2.2.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "vuepress": "^1.8.2"
   },
@@ -82,0 +85,0 @@ "author": "Ryan Geyer",

README.md

@@ -9,7 +9,7 @@ # React Hover Video Player
 
-![demo](https://github.com/Gyanreyer/react-hover-video-player/blob/main/docs/assets/images/hover_preview_demo.gif?raw=true)
+![demo](./assets/images/hover_preview_demo.gif?raw=true)
 
 ## What It Is
 
-A React component that makes it super easy to set up a video that will play when the user hovers over it. This is particularly useful for setting up a thumbnail that will play a video preview on hover.
+A React component that makes it simple to set up a video that will play when the user hovers over it. This is particularly useful for setting up a thumbnail that will play a video preview on hover.
 
@@ -26,3 +26,3 @@ ## Features
 
-This component will render a video element which will start playing when an `onMouseEnter`, `onTouchStart`, or `onFocus` event is fired on the [hover target](#hovertargetref) and will accordingly be paused when an `onMouseLeave` or `onBlur` event is fired on the target, or an `onTouchStart` event is fired outside of the target. This default behavior can be [disabled, overridden, and customized](#custom-event-handling) as needed.
+This component will render a video element which will start playing when an `onMouseEnter`, `onTouchStart`, or `onFocus` event is fired on the [hover target](#hovertarget) and will accordingly be paused when an `onMouseLeave` or `onBlur` event is fired on the target, or an `onTouchStart` event is fired outside of the target. This default behavior can be [disabled, overridden, and customized](#custom-event-handling) as needed.
 
@@ -49,3 +49,12 @@ Everything is written with extra care to cleanly handle the video element's state as it asynchronously loads and plays.
       pausedOverlay={
-        <img src="thumbnail-image.jpg" alt="" />
+        <img
+          src="thumbnail-image.jpg"
+          alt=""
+          style={{
+            // Make the image expand to cover the video's dimensions
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
       }
@@ -185,2 +194,3 @@ loadingOverlay={
         height: "100%",
+        objectFit: "cover",
       }}
@@ -263,14 +273,5 @@ />
 
-`hoverTarget` accepts a DOM node, a function that returns a DOM node, or a React ref to an element. The component will apply the component's [default event handling](#how-it-works) to the received element. If no `hoverTarget` is provided, HoverVideoPlayer will use the component's container `<div>` as the hover target. A common use case for this would be to make the video play when the user hovers over a larger area around the player.
+`hoverTarget` accepts a DOM node, a function that returns a DOM node, or a React ref to an element. The component will apply [default event handling](#how-it-works) to the received target element so the video will play when a user hovers over it with a mouse or touch interaction. If no `hoverTarget` is provided, HoverVideoPlayer will use the component's container `<div>` as the hover target.
 
 ```jsx
-// Passing a DOM node
-<HoverVideoPlayer
-  videoSrc="video.mp4"
-  // Play the video when the user hovers over the element with id "hover-target"
-  hoverTarget={document.getElementById("hover-target")}
-/>
-
-...
-
 // Passing a function that returns a DOM node
@@ -288,3 +289,3 @@ <HoverVideoPlayer
 
-<a href="/other-page" ref={wrapperLinkRef}>
+<a href="/other-page" ref={wrapperLinkRef} className="link-card">
   <HoverVideoPlayer
@@ -296,2 +297,13 @@ videoSrc="video.mp4"
 </a>
+
+...
+
+// Passing a DOM node
+// PLEASE BEWARE THAT THIS CAN BE UNSAFE: Only do this if you are confident that the element
+// will always already exist on the DOM before this component is rendered.
+<HoverVideoPlayer
+  videoSrc="video.mp4"
+  // Play the video when the user hovers over the element with id "hover-target"
+  hoverTarget={document.getElementById("hover-target")}
+/>
 ```
@@ -514,3 +526,3 @@
 - `"none"`: We should not preload any part of the video before playing, including metadata.
-  - Note that this means that the video's dimensions will not be loaded until the video is played. This can potentially cause a content jump when the video starts loading if you are using the `"video"` [sizing mode](#sizing-mode-presets).
+  - Note that this means that the video's dimensions will not be loaded until the video is played. This can potentially cause a content jump when the video starts loading if you are using the `"video"` [sizing mode](#sizingmode).
   - Additionally, nothing will be displayed for the video element until it starts playing, so you should make sure you provide [paused overlay](#pausedoverlay) contents to hide the video element.
@@ -532,3 +544,3 @@
 
-Note that this will also keep the video's metadata unloaded when it is not playing, causing content jump issues with the `"video"` [sizing mode](#sizing-mode-presets).
+Note that this will also keep the video's metadata unloaded when it is not playing, causing content jump issues with the `"video"` [sizing mode](#sizingmode).
 
@@ -535,0 +547,0 @@ Additionally, nothing will be displayed for the video element when it is unloaded, so it is highly recommended that you provide [paused overlay](#pausedoverlay) contents to hide the video when it is paused.

No alert changes

Improved metrics

Total package byte prevSize

185486

increased by0.2%

Number of lines in readme file

612

increased by2%

Worsened metrics

Dev dependency count

52

increased by1.96%

No dependency changes