@folklore/hooks 0.0.67 → 0.0.69

package/dist/cjs.js

@@ -934,7 +934,7 @@ function useNativeVideoPlayer(url) {
   const debug = react.useMemo(() => createDebug('folklore:video:native'), []);
   const elementRef = react.useRef(null);
   const [loaded, setLoaded] = react.useState(false);
-  const [volume, setVolumeState] = react.useState(initialMuted ? 0 : 1);
+  const [muted, setMuted] = react.useState(initialMuted);
   const [playState, setPlayState] = react.useState({
     playing: false,
     paused: false,
@@ -1019,6 +1019,12 @@ function useNativeVideoPlayer(url) {
     }
     const onCanPlay = () => {
       setLoaded(true);
+      const newMetadata = {
+        duration: player.duration,
+        width: player.videoWidth,
+        height: player.videoHeight
+      };
+      setMetadata(newMetadata);
       debug('onCanPlay [URL: %s]', url);
     };
     const onMetadataLoaded = () => {
@@ -1048,6 +1054,10 @@ function useNativeVideoPlayer(url) {
       });
       debug('onPause [URL: %s]', url);
     };
+    const onVolumeChange = () => {
+      setMuted(player.muted);
+      debug('onVolumeChange [URL: %s]', url);
+    };
     const onEnded = () => {
       setPlayState({
         playing: false,
@@ -1061,6 +1071,7 @@ function useNativeVideoPlayer(url) {
     player.addEventListener('canplay', onCanPlay);
     player.addEventListener('metadataloaded', onMetadataLoaded);
     player.addEventListener('play', onPlay);
+    player.addEventListener('volumechange', onVolumeChange);
     player.addEventListener('pause', onPause);
     player.addEventListener('ended', onEnded);
     return () => {
@@ -1068,10 +1079,11 @@ function useNativeVideoPlayer(url) {
       player.removeEventListener('canplay', onCanPlay);
       player.removeEventListener('metadataloaded', onMetadataLoaded);
       player.removeEventListener('play', onPlay);
+      player.removeEventListener('volumechange', onVolumeChange);
       player.removeEventListener('pause', onPause);
       player.removeEventListener('ended', onEnded);
     };
-  }, [url, elementRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
+  }, [url, elementRef.current, setPlayState, setMetadata, setMuted, setLoaded]);
   const {
     playing
   } = playState;
@@ -1094,8 +1106,7 @@ function useNativeVideoPlayer(url) {
     ready: true,
     currentTime,
     loaded,
-    muted: volume === 0,
-    volume,
+    muted,
     ...metadata,
     ...playState
   };

package/dist/es.js

@@ -932,7 +932,7 @@ function useNativeVideoPlayer(url) {
   const debug = useMemo(() => createDebug('folklore:video:native'), []);
   const elementRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
-  const [volume, setVolumeState] = useState(initialMuted ? 0 : 1);
+  const [muted, setMuted] = useState(initialMuted);
   const [playState, setPlayState] = useState({
     playing: false,
     paused: false,
@@ -1017,6 +1017,12 @@ function useNativeVideoPlayer(url) {
     }
     const onCanPlay = () => {
       setLoaded(true);
+      const newMetadata = {
+        duration: player.duration,
+        width: player.videoWidth,
+        height: player.videoHeight
+      };
+      setMetadata(newMetadata);
       debug('onCanPlay [URL: %s]', url);
     };
     const onMetadataLoaded = () => {
@@ -1046,6 +1052,10 @@ function useNativeVideoPlayer(url) {
       });
       debug('onPause [URL: %s]', url);
     };
+    const onVolumeChange = () => {
+      setMuted(player.muted);
+      debug('onVolumeChange [URL: %s]', url);
+    };
     const onEnded = () => {
       setPlayState({
         playing: false,
@@ -1059,6 +1069,7 @@ function useNativeVideoPlayer(url) {
     player.addEventListener('canplay', onCanPlay);
     player.addEventListener('metadataloaded', onMetadataLoaded);
     player.addEventListener('play', onPlay);
+    player.addEventListener('volumechange', onVolumeChange);
     player.addEventListener('pause', onPause);
     player.addEventListener('ended', onEnded);
     return () => {
@@ -1066,10 +1077,11 @@ function useNativeVideoPlayer(url) {
       player.removeEventListener('canplay', onCanPlay);
       player.removeEventListener('metadataloaded', onMetadataLoaded);
       player.removeEventListener('play', onPlay);
+      player.removeEventListener('volumechange', onVolumeChange);
       player.removeEventListener('pause', onPause);
       player.removeEventListener('ended', onEnded);
     };
-  }, [url, elementRef.current, setPlayState, setMetadata, setVolumeState, setLoaded]);
+  }, [url, elementRef.current, setPlayState, setMetadata, setMuted, setLoaded]);
   const {
     playing
   } = playState;
@@ -1092,8 +1104,7 @@ function useNativeVideoPlayer(url) {
     ready: true,
     currentTime,
     loaded,
-    muted: volume === 0,
-    volume,
+    muted,
     ...metadata,
     ...playState
   };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.67",
+    "version": "0.0.69",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "58ad8e7c69736f6dd94da4ce63068f8764f51870",
+    "gitHead": "5f0e6b9760d6238e7eb4313a261cd85efe0ec349",
     "dependencies": {
         "@folklore/events": "^0.0.6",
         "@folklore/services": "^0.1.43",