@folklore/hooks 0.0.68 → 0.0.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs.js +9 -4
- package/dist/es.js +9 -4
- package/package.json +2 -2
package/dist/cjs.js
CHANGED
|
@@ -934,7 +934,7 @@ function useNativeVideoPlayer(url) {
|
|
|
934
934
|
const debug = react.useMemo(() => createDebug('folklore:video:native'), []);
|
|
935
935
|
const elementRef = react.useRef(null);
|
|
936
936
|
const [loaded, setLoaded] = react.useState(false);
|
|
937
|
-
const [
|
|
937
|
+
const [muted, setMuted] = react.useState(initialMuted);
|
|
938
938
|
const [playState, setPlayState] = react.useState({
|
|
939
939
|
playing: false,
|
|
940
940
|
paused: false,
|
|
@@ -1054,6 +1054,10 @@ function useNativeVideoPlayer(url) {
|
|
|
1054
1054
|
});
|
|
1055
1055
|
debug('onPause [URL: %s]', url);
|
|
1056
1056
|
};
|
|
1057
|
+
const onVolumeChange = () => {
|
|
1058
|
+
setMuted(player.muted);
|
|
1059
|
+
debug('onVolumeChange [URL: %s]', url);
|
|
1060
|
+
};
|
|
1057
1061
|
const onEnded = () => {
|
|
1058
1062
|
setPlayState({
|
|
1059
1063
|
playing: false,
|
|
@@ -1067,6 +1071,7 @@ function useNativeVideoPlayer(url) {
|
|
|
1067
1071
|
player.addEventListener('canplay', onCanPlay);
|
|
1068
1072
|
player.addEventListener('metadataloaded', onMetadataLoaded);
|
|
1069
1073
|
player.addEventListener('play', onPlay);
|
|
1074
|
+
player.addEventListener('volumechange', onVolumeChange);
|
|
1070
1075
|
player.addEventListener('pause', onPause);
|
|
1071
1076
|
player.addEventListener('ended', onEnded);
|
|
1072
1077
|
return () => {
|
|
@@ -1074,10 +1079,11 @@ function useNativeVideoPlayer(url) {
|
|
|
1074
1079
|
player.removeEventListener('canplay', onCanPlay);
|
|
1075
1080
|
player.removeEventListener('metadataloaded', onMetadataLoaded);
|
|
1076
1081
|
player.removeEventListener('play', onPlay);
|
|
1082
|
+
player.removeEventListener('volumechange', onVolumeChange);
|
|
1077
1083
|
player.removeEventListener('pause', onPause);
|
|
1078
1084
|
player.removeEventListener('ended', onEnded);
|
|
1079
1085
|
};
|
|
1080
|
-
}, [url,
|
|
1086
|
+
}, [url, setPlayState, setMetadata, setMuted, setLoaded]);
|
|
1081
1087
|
const {
|
|
1082
1088
|
playing
|
|
1083
1089
|
} = playState;
|
|
@@ -1100,8 +1106,7 @@ function useNativeVideoPlayer(url) {
|
|
|
1100
1106
|
ready: true,
|
|
1101
1107
|
currentTime,
|
|
1102
1108
|
loaded,
|
|
1103
|
-
muted
|
|
1104
|
-
volume,
|
|
1109
|
+
muted,
|
|
1105
1110
|
...metadata,
|
|
1106
1111
|
...playState
|
|
1107
1112
|
};
|
package/dist/es.js
CHANGED
|
@@ -932,7 +932,7 @@ function useNativeVideoPlayer(url) {
|
|
|
932
932
|
const debug = useMemo(() => createDebug('folklore:video:native'), []);
|
|
933
933
|
const elementRef = useRef(null);
|
|
934
934
|
const [loaded, setLoaded] = useState(false);
|
|
935
|
-
const [
|
|
935
|
+
const [muted, setMuted] = useState(initialMuted);
|
|
936
936
|
const [playState, setPlayState] = useState({
|
|
937
937
|
playing: false,
|
|
938
938
|
paused: false,
|
|
@@ -1052,6 +1052,10 @@ function useNativeVideoPlayer(url) {
|
|
|
1052
1052
|
});
|
|
1053
1053
|
debug('onPause [URL: %s]', url);
|
|
1054
1054
|
};
|
|
1055
|
+
const onVolumeChange = () => {
|
|
1056
|
+
setMuted(player.muted);
|
|
1057
|
+
debug('onVolumeChange [URL: %s]', url);
|
|
1058
|
+
};
|
|
1055
1059
|
const onEnded = () => {
|
|
1056
1060
|
setPlayState({
|
|
1057
1061
|
playing: false,
|
|
@@ -1065,6 +1069,7 @@ function useNativeVideoPlayer(url) {
|
|
|
1065
1069
|
player.addEventListener('canplay', onCanPlay);
|
|
1066
1070
|
player.addEventListener('metadataloaded', onMetadataLoaded);
|
|
1067
1071
|
player.addEventListener('play', onPlay);
|
|
1072
|
+
player.addEventListener('volumechange', onVolumeChange);
|
|
1068
1073
|
player.addEventListener('pause', onPause);
|
|
1069
1074
|
player.addEventListener('ended', onEnded);
|
|
1070
1075
|
return () => {
|
|
@@ -1072,10 +1077,11 @@ function useNativeVideoPlayer(url) {
|
|
|
1072
1077
|
player.removeEventListener('canplay', onCanPlay);
|
|
1073
1078
|
player.removeEventListener('metadataloaded', onMetadataLoaded);
|
|
1074
1079
|
player.removeEventListener('play', onPlay);
|
|
1080
|
+
player.removeEventListener('volumechange', onVolumeChange);
|
|
1075
1081
|
player.removeEventListener('pause', onPause);
|
|
1076
1082
|
player.removeEventListener('ended', onEnded);
|
|
1077
1083
|
};
|
|
1078
|
-
}, [url,
|
|
1084
|
+
}, [url, setPlayState, setMetadata, setMuted, setLoaded]);
|
|
1079
1085
|
const {
|
|
1080
1086
|
playing
|
|
1081
1087
|
} = playState;
|
|
@@ -1098,8 +1104,7 @@ function useNativeVideoPlayer(url) {
|
|
|
1098
1104
|
ready: true,
|
|
1099
1105
|
currentTime,
|
|
1100
1106
|
loaded,
|
|
1101
|
-
muted
|
|
1102
|
-
volume,
|
|
1107
|
+
muted,
|
|
1103
1108
|
...metadata,
|
|
1104
1109
|
...playState
|
|
1105
1110
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folklore/hooks",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.70",
|
|
4
4
|
"description": "React hooks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "8481b282deec109d74d24b6f8e82b2976b85851a",
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@folklore/events": "^0.0.6",
|
|
55
55
|
"@folklore/services": "^0.1.43",
|