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

Comparing version 9.3.1 to 9.3.2

dist/index.esm.js

@@ -194,3 +194,3 @@ import React, { useEffect, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
             // Whether there is a play promise in progress which we should avoid interrupting
-            // with calls to video.play() or video.load()
+            // with calls to video.pause() or video.load()
             isPlayAttemptInProgress: false,
@@ -243,2 +243,6 @@ // Keep refs for timeouts so we can keep track of and cancel them
             }
+            else {
+                // Log any other playback errors with console.error
+                console.error("HoverVideoPlayer: " + error.message);
+            }
         });
@@ -245,0 +249,0 @@ }, [videoRef]);

dist/index.js

@@ -200,3 +200,3 @@ 'use strict';
             // Whether there is a play promise in progress which we should avoid interrupting
-            // with calls to video.play() or video.load()
+            // with calls to video.pause() or video.load()
             isPlayAttemptInProgress: false,
@@ -249,2 +249,6 @@ // Keep refs for timeouts so we can keep track of and cancel them
             }
+            else {
+                // Log any other playback errors with console.error
+                console.error("HoverVideoPlayer: " + error.message);
+            }
         });
@@ -251,0 +255,0 @@ }, [videoRef]);

package.json

 {
   "name": "react-hover-video-player",
-  "version": "9.3.1",
+  "version": "9.3.2",
   "description": "React component which manages playing a video when the user hovers over it and pausing when they stop.",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
     "test": "nyc --check-coverage --reporter=lcov --reporter=text cypress run-ct --config-file=tests/cypress/cypress.json --browser=chrome",
-    "test:smoke": "npm run build && BABEL_ENV=production npm test -- --browser=chrome",
+    "test:smoke": "npm run build && BABEL_ENV=production npm test",
     "test-runner": "cypress open-ct --config-file=tests/cypress/cypress.json",
@@ -56,2 +56,3 @@ "docs:dev": "vuepress dev docs",
     "cypress": "^7.6.0",
+    "cypress-real-events": "^1.5.1",
     "cz-conventional-changelog": "^3.2.0",
@@ -75,2 +76,3 @@ "emotion": "^10.0.27",
     "react-dom": "^16.14.0",
+    "regenerator-runtime": "^0.13.9",
     "rollup": "^2.45.2",
@@ -77,0 +79,0 @@ "rollup-plugin-livereload": "^2.0.0",

README.md

@@ -9,3 +9,3 @@ # React Hover Video Player
 
-![demo](/docs/assets/images/hover_preview_demo.gif?raw=true)
+![demo](/docs/assets/images/heading_demo.gif?raw=true)
 
@@ -47,3 +47,3 @@ ## What It Is
 
-function MyComponent () {
+function MyComponent() {
   return (
@@ -58,5 +58,5 @@ <HoverVideoPlayer
             // Make the image expand to cover the video's dimensions
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
           }}
@@ -86,5 +86,3 @@ />
 ```jsx
-<HoverVideoPlayer
-  videoSrc="path/video-file.mp4"
-/>
+<HoverVideoPlayer videoSrc="path/video-file.mp4" />
 ```
@@ -94,3 +92,3 @@
 
-```javascript
+```js
 {
@@ -125,3 +123,3 @@ // The URL path string for this source
 
-```javascript
+```js
 {
@@ -153,3 +151,3 @@ // The URL string for the captions track file
       label: 'English',
-      kind: "captions",
+      kind: 'captions',
       default: true,
@@ -161,3 +159,3 @@ },
       label: 'French',
-      kind: "subtitles",
+      kind: 'subtitles',
     },
@@ -170,3 +168,2 @@ ]}
 
-
 ### crossOrigin
@@ -182,6 +179,3 @@
 ```jsx
-<HoverVideoPlayer
-  videoSrc="video.mp4"
-  crossOrigin="use-credentials"
-/>
+<HoverVideoPlayer videoSrc="video.mp4" crossOrigin="use-credentials" />
 ```
@@ -197,2 +191,4 @@
 
+[![Demo of the pausedOverlay prop being used](/docs/assets/images/paused_overlay_prop_demo.gif?raw=true)](https://codesandbox.io/s/hovervideoplayer-examples-pausedoverlay-uo2oh?file=/src/App.js)
+
 A common use case for this would be displaying a thumbnail image over the video while it is paused.
@@ -210,5 +206,5 @@
         // Make the image expand to cover the video's dimensions
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
       }}
@@ -228,2 +224,4 @@ />
 
+[![Demo of the loadingOverlay prop being used](/docs/assets/images/loading_overlay_prop_demo.gif?raw=true)](https://codesandbox.io/s/hovervideoplayer-examples-loadingoverlay-kc8lz?file=/src/App.js)
+
 This allows you to provide a better user experience for users with slower internet connections, particularly if you are using larger video assets.
@@ -238,7 +236,3 @@
   // the video when it is loading
-  loadingOverlay={
-    <div className="loading-overlay">
-      Loading...
-    </div>
-  }
+  loadingOverlay={<div className="loading-overlay">Loading...</div>}
 />
@@ -276,7 +270,3 @@ ```
   videoSrc="video.mp4"
-  loadingOverlay={
-    <div className="loading-overlay">
-      Loading...
-    </div>
-  }
+  loadingOverlay={<div className="loading-overlay">Loading...</div>}
   // We should only show the loading state if the video takes
@@ -294,2 +284,4 @@ // more than 1 full second to start after attempting to play
 
+[![Demo of the hoverOverlay prop being used](/docs/assets/images/hover_overlay_prop_demo.gif?raw=true)](https://codesandbox.io/s/hovervideoplayer-examples-hover-overlay-8wnq0?file=/src/App.js)
+
 This can be useful if you wish to reveal content to the user when they hover while the video still plays underneath it.
@@ -306,4 +298,4 @@
       <p>
-        Here is a short description of the video.
-        You can still see the video playing underneath this overlay.
+        Here is a short description of the video. You can still see the video
+        playing underneath this overlay.
         <a href="/video-page">Click here to read more</a>
@@ -415,5 +407,5 @@ </p>
   videoSrc="video.mp4"
-  onHoverStart={()=>{
-    console.log("User just moused over or touched hover target.");
-    console.log("The video will now attempt to play.")
+  onHoverStart={() => {
+    console.log('User just moused over or touched hover target.');
+    console.log('The video will now attempt to play.');
   }}
@@ -432,5 +424,5 @@ />
   videoSrc="video.mp4"
-  onHoverEnd={()=>{
-    console.log("User just moused out of or touched outside of hover target.");
-    console.log("The video will now stop playing.")
+  onHoverEnd={() => {
+    console.log('User just moused out of or touched outside of hover target.');
+    console.log('The video will now stop playing.');
   }}
@@ -516,3 +508,3 @@ />
 
-useEffect(()=>{
+useEffect(() => {
   const videoElement = hoverVideoRef.current;
@@ -523,8 +515,3 @@
 
-return (
-  <HoverVideoPlayer
-    videoSrc="video.mp4"
-    videoRef={hoverVideoRef}
-  />
-)
+return <HoverVideoPlayer videoSrc="video.mp4" videoRef={hoverVideoRef} />;
 ```
@@ -538,2 +525,4 @@
 
+[![Demo of the playback range props being used](/docs/assets/images/playback_range_demo.gif?raw=true)](https://codesandbox.io/s/hovervideoplayer-examples-playbackrange-unggy?file=/src/App.js)
+
 If a playback range is set, the component will add a [media fragment identifier to the video's URL](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery#specifying_playback_range) to tell browsers to only load the portion
@@ -585,3 +574,2 @@ of the video within the desired playback range. Note that support for media fragments is not entirely consistent across all browsers, but regardless the component will still be able to play within the desired range, just without the added performance benefit of avoiding downloading the full video file.
   }}
-
   /* ~~~ PAUSED OVERLAY WRAPPER DIV ~~~ */
@@ -594,3 +582,2 @@ // Applies a custom class to the div wrapping the pausedOverlay contents
   }}
-
   /* ~~~ LOADING OVERLAY WRAPPER DIV ~~~ */
@@ -603,3 +590,2 @@ // Applies a custom class to the div wrapping the loadingOverlay contents
   }}
-
   /* ~~~ HOVER OVERLAY WRAPPER DIV ~~~ */
@@ -611,5 +597,4 @@ // Applies a custom class to the div wrapping the hoverOverlay contents
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    color: "white",
+    color: 'white',
   }}
-
   /* ~~~ VIDEO ELEMENT ~~~ */
@@ -673,6 +658,6 @@ // Applies a custom class to the video element
 | ------- | ----------------------- |
-| Chrome  | `metadata`              |
-| Firefox | `metadata`              |
-| Safari  | `auto`                  |
-| Edge    | `metadata`              |
+| Chrome | `metadata` |
+| Firefox | `metadata` |
+| Safari | `auto` |
+| Edge | `metadata` |
 
@@ -685,3 +670,3 @@ ```jsx
 />
-  ```
+```
 
@@ -688,0 +673,0 @@ ### unloadVideoOnPaused

No alert changes

Improved metrics

Total package byte prevSize

285610

increased by0.53%

Lines of code

1818

increased by0.44%

Worsened metrics

Dev dependency count

61

increased by3.39%

Number of lines in readme file

727

decreased by-2.02%

No dependency changes