react-browser-hooks - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

es/hooks/fullscreen.js

@@ -45,7 +45,7 @@ import { useState, useEffect } from 'react';
 
-  function handleChange() {
-    setFullScreen(isFullScreenElement(fsEl));
-  }
+  useEffect(function () {
+    function handleChange() {
+      setFullScreen(isFullScreenElement(fsEl));
+    }
 
-  useEffect(function () {
     document.addEventListener('webkitfullscreenchange', handleChange, false);
@@ -64,3 +64,3 @@ document.addEventListener('mozfullscreenchange', handleChange, false);
     };
-  }, [options.element]);
+  }, [options.element, fsEl]);
 
@@ -67,0 +67,0 @@ return {

es/hooks/media-controls.js

@@ -13,12 +13,12 @@ import { useState, useEffect } from 'react';
   var _useState3 = useState(null),
-      oldVolume = _useState3[0],
-      setOldVolume = _useState3[1];
+      paused = _useState3[0],
+      setPaused = _useState3[1];
 
   var _useState4 = useState(null),
-      paused = _useState4[0],
-      setPaused = _useState4[1];
+      volume = _useState4[0],
+      adjustVolume = _useState4[1];
 
   var _useState5 = useState(null),
-      volume = _useState5[0],
-      _setVolume = _useState5[1];
+      cachedVolume = _useState5[0],
+      setCachedVolume = _useState5[1];
 
@@ -34,20 +34,32 @@ function pause() {
   function setVolume(value) {
-    setOldVolume(element.current.volume);
-    element.current.volume = value;
+    var volume = void 0;
 
-    // no onmuted event, must set on volumechange
-    if (value === 0) {
-      element.current.muted = true;
+    if (value < 0) {
+      volume = 0;
+    } else if (value > 1) {
+      volume = 1;
     } else {
-      element.current.muted = false;
+      volume = value;
     }
-    setMuted(element.current.muted);
+
+    if (volume === 0) {
+      setCachedVolume(element.current.volume);
+      mute();
+    } else {
+      unmute();
+    }
+
+    element.current.volume = volume;
   }
 
   function mute() {
-    setVolume(0);
+    element.current.muted = true;
   }
 
   function unmute() {
-    setVolume(oldVolume);
+    element.current.muted = false;
+    if (cachedVolume) {
+      element.current.volume = cachedVolume;
+      setCachedVolume(null);
+    }
   }
@@ -70,48 +82,44 @@
   useEffect(function () {
+    var currEl = element.current;
     var isPaused = function isPaused() {
-      return element.current.paused || element.current.ended;
+      return currEl.paused || currEl.ended;
     };
 
-    setCurrentTime(element.current.currentTime);
+    setCurrentTime(currEl.currentTime);
     setPaused(isPaused());
+    adjustVolume(currEl.volume);
+    setMuted(currEl.muted);
 
-    setMuted(element.current.muted);
-    if (muted) {
-      setOldVolume(element.current.volume);
-      _setVolume(0);
-    } else {
-      _setVolume(element.current.volume);
-    }
-
     var playPauseHandler = function playPauseHandler() {
       return setPaused(isPaused());
     };
-    element.current.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
-    element.current.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
-    element.current.addEventListener('pause', playPauseHandler); // fired by pause method
-    element.current.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
+    currEl.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
+    currEl.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
+    currEl.addEventListener('pause', playPauseHandler); // fired by pause method
+    currEl.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
 
     var volumeHandler = function volumeHandler() {
-      return _setVolume(element.current.volume);
+      setMuted(currEl.muted);
+      adjustVolume(currEl.volume);
     };
-    element.current.addEventListener('volumechange', volumeHandler); // fired by a change of volume
+    currEl.addEventListener('volumechange', volumeHandler); // fired by a change of volume
 
     var seekHandler = function seekHandler() {
-      return setCurrentTime(element.current.currentTime);
+      return setCurrentTime(currEl.currentTime);
     };
-    element.current.addEventListener('seeked', seekHandler); // fired on seek completed
-    element.current.addEventListener('timeupdate', seekHandler); // fired on currentTime update
+    currEl.addEventListener('seeked', seekHandler); // fired on seek completed
+    currEl.addEventListener('timeupdate', seekHandler); // fired on currentTime update
 
     return function () {
-      element.current.removeEventListener('play', playPauseHandler);
-      element.current.removeEventListener('playing', playPauseHandler);
-      element.current.removeEventListener('pause', playPauseHandler);
-      element.current.removeEventListener('waiting', playPauseHandler);
+      currEl.removeEventListener('play', playPauseHandler);
+      currEl.removeEventListener('playing', playPauseHandler);
+      currEl.removeEventListener('pause', playPauseHandler);
+      currEl.removeEventListener('waiting', playPauseHandler);
 
-      element.current.removeEventListener('volumechange', volumeHandler);
+      currEl.removeEventListener('volumechange', volumeHandler);
 
-      element.current.removeEventListener('seeked', seekHandler);
-      element.current.removeEventListener('timeupdate', seekHandler);
+      currEl.removeEventListener('seeked', seekHandler);
+      currEl.removeEventListener('timeupdate', seekHandler);
     };
-  }, [element.current]);
+  }, [element, muted]);
 
@@ -118,0 +126,0 @@ return {

es/hooks/online.js

@@ -11,6 +11,2 @@ import { useState, useEffect } from 'react';
 
-  function handleChange() {
-    setOnline(getOnlineStatus());
-  }
-
   function getOnlineStatus() {
@@ -21,2 +17,6 @@ return IS_SERVER || window.navigator && window.navigator.onLine ? true : false;
   useEffect(function () {
+    function handleChange() {
+      setOnline(getOnlineStatus());
+    }
+
     window.addEventListener('offline', handleChange, false);
@@ -23,0 +23,0 @@ window.addEventListener('online', handleChange, false);

es/hooks/page-visibility.js

@@ -12,3 +12,5 @@ import { useEffect, useState } from 'react';
 var getVisibilityProps = function getVisibilityProps() {
-  if (IS_SERVER) return {};
+  if (IS_SERVER) {
+    return {};
+  }
 
@@ -29,2 +31,3 @@ var hidden = void 0;
   }
+
   return { hidden: hidden, visibilityChange: visibilityChange };
@@ -43,10 +46,11 @@ };
 
-  var _useState = useState(IS_SERVER ? true : !document[hidden]),
+  var _useState = useState(IS_SERVER || !document[hidden]),
       visible = _useState[0],
       setVisible = _useState[1];
 
-  var handler = function handler() {
-    return setVisible(!document[hidden]);
-  };
   useEffect(function () {
+    var handler = function handler() {
+      return setVisible(!document[hidden]);
+    };
+
     document.addEventListener(visibilityChange, handler);
@@ -56,4 +60,5 @@ return function () {
     };
-  }, []);
+  }, [hidden, visibilityChange]);
+
   return visible;
 };

es/hooks/resize.js

@@ -14,6 +14,2 @@ import { useState, useEffect } from 'react';
 
-  function handleResize() {
-    setSize(getWindowSize());
-  }
-
   function getWindowSize() {
@@ -27,2 +23,6 @@ return {
   useEffect(function () {
+    function handleResize() {
+      setSize(getWindowSize());
+    }
+
     window.addEventListener('resize', handleResize, false);
@@ -32,5 +32,5 @@ return function () {
     };
-  }, []);
+  }, [setSize]);
 
   return size;
 }

lib/hooks/fullscreen.js

@@ -56,7 +56,7 @@ 'use strict';
 
-  function handleChange() {
-    setFullScreen(isFullScreenElement(fsEl));
-  }
+  (0, _react.useEffect)(function () {
+    function handleChange() {
+      setFullScreen(isFullScreenElement(fsEl));
+    }
 
-  (0, _react.useEffect)(function () {
     document.addEventListener('webkitfullscreenchange', handleChange, false);
@@ -75,3 +75,3 @@ document.addEventListener('mozfullscreenchange', handleChange, false);
     };
-  }, [options.element]);
+  }, [options.element, fsEl]);
 
@@ -78,0 +78,0 @@ return {

lib/hooks/media-controls.js

@@ -18,12 +18,12 @@ 'use strict';
   var _useState3 = (0, _react.useState)(null),
-      oldVolume = _useState3[0],
-      setOldVolume = _useState3[1];
+      paused = _useState3[0],
+      setPaused = _useState3[1];
 
   var _useState4 = (0, _react.useState)(null),
-      paused = _useState4[0],
-      setPaused = _useState4[1];
+      volume = _useState4[0],
+      adjustVolume = _useState4[1];
 
   var _useState5 = (0, _react.useState)(null),
-      volume = _useState5[0],
-      _setVolume = _useState5[1];
+      cachedVolume = _useState5[0],
+      setCachedVolume = _useState5[1];
 
@@ -39,20 +39,32 @@ function pause() {
   function setVolume(value) {
-    setOldVolume(element.current.volume);
-    element.current.volume = value;
+    var volume = void 0;
 
-    // no onmuted event, must set on volumechange
-    if (value === 0) {
-      element.current.muted = true;
+    if (value < 0) {
+      volume = 0;
+    } else if (value > 1) {
+      volume = 1;
     } else {
-      element.current.muted = false;
+      volume = value;
     }
-    setMuted(element.current.muted);
+
+    if (volume === 0) {
+      setCachedVolume(element.current.volume);
+      mute();
+    } else {
+      unmute();
+    }
+
+    element.current.volume = volume;
   }
 
   function mute() {
-    setVolume(0);
+    element.current.muted = true;
   }
 
   function unmute() {
-    setVolume(oldVolume);
+    element.current.muted = false;
+    if (cachedVolume) {
+      element.current.volume = cachedVolume;
+      setCachedVolume(null);
+    }
   }
@@ -75,48 +87,44 @@
   (0, _react.useEffect)(function () {
+    var currEl = element.current;
     var isPaused = function isPaused() {
-      return element.current.paused || element.current.ended;
+      return currEl.paused || currEl.ended;
     };
 
-    setCurrentTime(element.current.currentTime);
+    setCurrentTime(currEl.currentTime);
     setPaused(isPaused());
+    adjustVolume(currEl.volume);
+    setMuted(currEl.muted);
 
-    setMuted(element.current.muted);
-    if (muted) {
-      setOldVolume(element.current.volume);
-      _setVolume(0);
-    } else {
-      _setVolume(element.current.volume);
-    }
-
     var playPauseHandler = function playPauseHandler() {
       return setPaused(isPaused());
     };
-    element.current.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
-    element.current.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
-    element.current.addEventListener('pause', playPauseHandler); // fired by pause method
-    element.current.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
+    currEl.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
+    currEl.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
+    currEl.addEventListener('pause', playPauseHandler); // fired by pause method
+    currEl.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
 
     var volumeHandler = function volumeHandler() {
-      return _setVolume(element.current.volume);
+      setMuted(currEl.muted);
+      adjustVolume(currEl.volume);
     };
-    element.current.addEventListener('volumechange', volumeHandler); // fired by a change of volume
+    currEl.addEventListener('volumechange', volumeHandler); // fired by a change of volume
 
     var seekHandler = function seekHandler() {
-      return setCurrentTime(element.current.currentTime);
+      return setCurrentTime(currEl.currentTime);
     };
-    element.current.addEventListener('seeked', seekHandler); // fired on seek completed
-    element.current.addEventListener('timeupdate', seekHandler); // fired on currentTime update
+    currEl.addEventListener('seeked', seekHandler); // fired on seek completed
+    currEl.addEventListener('timeupdate', seekHandler); // fired on currentTime update
 
     return function () {
-      element.current.removeEventListener('play', playPauseHandler);
-      element.current.removeEventListener('playing', playPauseHandler);
-      element.current.removeEventListener('pause', playPauseHandler);
-      element.current.removeEventListener('waiting', playPauseHandler);
+      currEl.removeEventListener('play', playPauseHandler);
+      currEl.removeEventListener('playing', playPauseHandler);
+      currEl.removeEventListener('pause', playPauseHandler);
+      currEl.removeEventListener('waiting', playPauseHandler);
 
-      element.current.removeEventListener('volumechange', volumeHandler);
+      currEl.removeEventListener('volumechange', volumeHandler);
 
-      element.current.removeEventListener('seeked', seekHandler);
-      element.current.removeEventListener('timeupdate', seekHandler);
+      currEl.removeEventListener('seeked', seekHandler);
+      currEl.removeEventListener('timeupdate', seekHandler);
     };
-  }, [element.current]);
+  }, [element, muted]);
 
@@ -123,0 +131,0 @@ return {

lib/hooks/online.js

@@ -17,6 +17,2 @@ 'use strict';
 
-  function handleChange() {
-    setOnline(getOnlineStatus());
-  }
-
   function getOnlineStatus() {
@@ -27,2 +23,6 @@ return _constants.IS_SERVER || window.navigator && window.navigator.onLine ? true : false;
   (0, _react.useEffect)(function () {
+    function handleChange() {
+      setOnline(getOnlineStatus());
+    }
+
     window.addEventListener('offline', handleChange, false);
@@ -29,0 +29,0 @@ window.addEventListener('online', handleChange, false);

lib/hooks/page-visibility.js

@@ -18,3 +18,5 @@ 'use strict';
 var getVisibilityProps = function getVisibilityProps() {
-  if (_constants.IS_SERVER) return {};
+  if (_constants.IS_SERVER) {
+    return {};
+  }
 
@@ -35,2 +37,3 @@ var hidden = void 0;
   }
+
   return { hidden: hidden, visibilityChange: visibilityChange };
@@ -49,10 +52,11 @@ };
 
-  var _useState = (0, _react.useState)(_constants.IS_SERVER ? true : !document[hidden]),
+  var _useState = (0, _react.useState)(_constants.IS_SERVER || !document[hidden]),
       visible = _useState[0],
       setVisible = _useState[1];
 
-  var handler = function handler() {
-    return setVisible(!document[hidden]);
-  };
   (0, _react.useEffect)(function () {
+    var handler = function handler() {
+      return setVisible(!document[hidden]);
+    };
+
     document.addEventListener(visibilityChange, handler);
@@ -62,4 +66,5 @@ return function () {
     };
-  }, []);
+  }, [hidden, visibilityChange]);
+
   return visible;
 };

lib/hooks/resize.js

@@ -20,6 +20,2 @@ 'use strict';
 
-  function handleResize() {
-    setSize(getWindowSize());
-  }
-
   function getWindowSize() {
@@ -33,2 +29,6 @@ return {
   (0, _react.useEffect)(function () {
+    function handleResize() {
+      setSize(getWindowSize());
+    }
+
     window.addEventListener('resize', handleResize, false);
@@ -38,5 +38,5 @@ return function () {
     };
-  }, []);
+  }, [setSize]);
 
   return size;
 }

package.json

 {
   "name": "react-browser-hooks",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "react-browser-hooks React component",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
   "scripts": {
-    "acceptance": "testcafe chrome,firefox test/acceptance/",
+    "acceptance": "testcafe chrome test/acceptance/",
     "acceptance-ci": "testcafe browserstack:chrome,browserstack:firefox,browserstack:ie,browserstack:safari test/acceptance/",
@@ -33,34 +33,38 @@ "build": "nwb build-react-component",
   "peerDependencies": {
-    "react": "16.8.x"
+    "react": ">= 16.8 < 17"
   },
   "devDependencies": {
-    "@babel/core": "7.3.4",
-    "@babel/preset-env": "7.3.4",
-    "@babel/preset-react": "7.0.0",
-    "@storybook/addon-options": "4.1.13",
-    "@storybook/addons": "4.1.13",
-    "@storybook/react": "4.1.13",
-    "axios": "0.18.0",
-    "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
-    "eslint": "5.15.1",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-config-react-app": "3.0.8",
-    "eslint-plugin-flowtype": "3.4.2",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-prettier": "3.0.1",
-    "eslint-plugin-react": "7.12.4",
-    "eslint-plugin-react-hooks": "1.5.0",
-    "husky": "1.3.1",
-    "jest": "24.4.0",
-    "jest-dom": "3.1.2",
-    "lint-staged": "8.1.5",
-    "nwb": "0.23.0",
-    "prettier": "1.16.4",
-    "react": "16.8.4",
-    "react-hooks-testing-library": "0.3.6",
-    "storybook-readme": "4.0.5",
-    "testcafe": "1.1.0",
-    "testcafe-browser-provider-browserstack": "1.8.0"
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^10.0.27",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
+    "@testing-library/dom": "^6.11.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
+    "axios": "^0.19.1",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "eslint": "^6.0.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-config-react-app": "^5.1.0",
+    "eslint-plugin-flowtype": "^3.13.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "husky": "^4.0.6",
+    "jest": "^24.7.1",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.16.4",
+    "react": "^16.8.6",
+    "react-test-renderer": "^16.12.0",
+    "storybook-readme": "^5.0.8",
+    "testcafe": "^1.1.1",
+    "testcafe-browser-provider-browserstack": "^1.8.0"
   },
@@ -67,0 +71,0 @@ "author": "NearForm",

umd/react-browser-hooks.js

 /*!
- * react-browser-hooks v2.2.3 - https://github.com/nearform/react-browser-hooks
+ * react-browser-hooks v2.2.4 - https://github.com/nearform/react-browser-hooks
  * Apache-2.0 Licensed
@@ -196,6 +196,2 @@ */
 
-  function handleResize() {
-    setSize(getWindowSize());
-  }
-
   function getWindowSize() {
@@ -209,2 +205,6 @@ return {
   Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
+    function handleResize() {
+      setSize(getWindowSize());
+    }
+
     window.addEventListener('resize', handleResize, false);
@@ -214,3 +214,3 @@ return function () {
     };
-  }, []);
+  }, [setSize]);
 
@@ -264,7 +264,7 @@ return size;
 
-  function handleChange() {
-    setFullScreen(isFullScreenElement(fsEl));
-  }
+  Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
+    function handleChange() {
+      setFullScreen(isFullScreenElement(fsEl));
+    }
 
-  Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
     document.addEventListener('webkitfullscreenchange', handleChange, false);
@@ -283,3 +283,3 @@ document.addEventListener('mozfullscreenchange', handleChange, false);
     };
-  }, [options.element]);
+  }, [options.element, fsEl]);
 
@@ -399,12 +399,12 @@ return {
   var _useState3 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(null),
-      oldVolume = _useState3[0],
-      setOldVolume = _useState3[1];
+      paused = _useState3[0],
+      setPaused = _useState3[1];
 
   var _useState4 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(null),
-      paused = _useState4[0],
-      setPaused = _useState4[1];
+      volume = _useState4[0],
+      adjustVolume = _useState4[1];
 
   var _useState5 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(null),
-      volume = _useState5[0],
-      _setVolume = _useState5[1];
+      cachedVolume = _useState5[0],
+      setCachedVolume = _useState5[1];
 
@@ -420,20 +420,32 @@ function pause() {
   function setVolume(value) {
-    setOldVolume(element.current.volume);
-    element.current.volume = value;
+    var volume = void 0;
 
-    // no onmuted event, must set on volumechange
-    if (value === 0) {
-      element.current.muted = true;
+    if (value < 0) {
+      volume = 0;
+    } else if (value > 1) {
+      volume = 1;
     } else {
-      element.current.muted = false;
+      volume = value;
     }
-    setMuted(element.current.muted);
+
+    if (volume === 0) {
+      setCachedVolume(element.current.volume);
+      mute();
+    } else {
+      unmute();
+    }
+
+    element.current.volume = volume;
   }
 
   function mute() {
-    setVolume(0);
+    element.current.muted = true;
   }
 
   function unmute() {
-    setVolume(oldVolume);
+    element.current.muted = false;
+    if (cachedVolume) {
+      element.current.volume = cachedVolume;
+      setCachedVolume(null);
+    }
   }
@@ -456,48 +468,44 @@
   Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
+    var currEl = element.current;
     var isPaused = function isPaused() {
-      return element.current.paused || element.current.ended;
+      return currEl.paused || currEl.ended;
     };
 
-    setCurrentTime(element.current.currentTime);
+    setCurrentTime(currEl.currentTime);
     setPaused(isPaused());
+    adjustVolume(currEl.volume);
+    setMuted(currEl.muted);
 
-    setMuted(element.current.muted);
-    if (muted) {
-      setOldVolume(element.current.volume);
-      _setVolume(0);
-    } else {
-      _setVolume(element.current.volume);
-    }
-
     var playPauseHandler = function playPauseHandler() {
       return setPaused(isPaused());
     };
-    element.current.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
-    element.current.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
-    element.current.addEventListener('pause', playPauseHandler); // fired by pause method
-    element.current.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
+    currEl.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
+    currEl.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
+    currEl.addEventListener('pause', playPauseHandler); // fired by pause method
+    currEl.addEventListener('waiting', playPauseHandler); // fired by pause due to lack of data
 
     var volumeHandler = function volumeHandler() {
-      return _setVolume(element.current.volume);
+      setMuted(currEl.muted);
+      adjustVolume(currEl.volume);
     };
-    element.current.addEventListener('volumechange', volumeHandler); // fired by a change of volume
+    currEl.addEventListener('volumechange', volumeHandler); // fired by a change of volume
 
     var seekHandler = function seekHandler() {
-      return setCurrentTime(element.current.currentTime);
+      return setCurrentTime(currEl.currentTime);
     };
-    element.current.addEventListener('seeked', seekHandler); // fired on seek completed
-    element.current.addEventListener('timeupdate', seekHandler); // fired on currentTime update
+    currEl.addEventListener('seeked', seekHandler); // fired on seek completed
+    currEl.addEventListener('timeupdate', seekHandler); // fired on currentTime update
 
     return function () {
-      element.current.removeEventListener('play', playPauseHandler);
-      element.current.removeEventListener('playing', playPauseHandler);
-      element.current.removeEventListener('pause', playPauseHandler);
-      element.current.removeEventListener('waiting', playPauseHandler);
+      currEl.removeEventListener('play', playPauseHandler);
+      currEl.removeEventListener('playing', playPauseHandler);
+      currEl.removeEventListener('pause', playPauseHandler);
+      currEl.removeEventListener('waiting', playPauseHandler);
 
-      element.current.removeEventListener('volumechange', volumeHandler);
+      currEl.removeEventListener('volumechange', volumeHandler);
 
-      element.current.removeEventListener('seeked', seekHandler);
-      element.current.removeEventListener('timeupdate', seekHandler);
+      currEl.removeEventListener('seeked', seekHandler);
+      currEl.removeEventListener('timeupdate', seekHandler);
     };
-  }, [element.current]);
+  }, [element, muted]);
 
@@ -585,6 +593,2 @@ return {
 
-  function handleChange() {
-    setOnline(getOnlineStatus());
-  }
-
   function getOnlineStatus() {
@@ -595,2 +599,6 @@ return IS_SERVER || window.navigator && window.navigator.onLine ? true : false;
   Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
+    function handleChange() {
+      setOnline(getOnlineStatus());
+    }
+
     window.addEventListener('offline', handleChange, false);
@@ -619,3 +627,5 @@ window.addEventListener('online', handleChange, false);
 var page_visibility_getVisibilityProps = function getVisibilityProps() {
-  if (IS_SERVER) return {};
+  if (IS_SERVER) {
+    return {};
+  }
 
@@ -636,2 +646,3 @@ var hidden = void 0;
   }
+
   return { hidden: hidden, visibilityChange: visibilityChange };
@@ -650,10 +661,11 @@ };
 
-  var _useState = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(IS_SERVER ? true : !document[hidden]),
+  var _useState = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useState"])(IS_SERVER || !document[hidden]),
       visible = _useState[0],
       setVisible = _useState[1];
 
-  var handler = function handler() {
-    return setVisible(!document[hidden]);
-  };
   Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"])(function () {
+    var handler = function handler() {
+      return setVisible(!document[hidden]);
+    };
+
     document.addEventListener(visibilityChange, handler);
@@ -663,3 +675,4 @@ return function () {
     };
-  }, []);
+  }, [hidden, visibilityChange]);
+
   return visible;
@@ -666,0 +679,0 @@ };

umd/react-browser-hooks.min.js

 /*!
- * react-browser-hooks v2.2.3 - https://github.com/nearform/react-browser-hooks
+ * react-browser-hooks v2.2.4 - https://github.com/nearform/react-browser-hooks
  * Apache-2.0 Licensed
  */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ReactBrowserHooks=n(require("react")):e.ReactBrowserHooks=n(e.React)}(window,function(e){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var u=n[r]={i:r,l:!1,exports:{}};return e[r].call(u.exports,u,u.exports,t),u.l=!0,u.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var u in e)t.d(r,u,function(n){return e[n]}.bind(null,u));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(n,t){n.exports=e},function(e,n,t){e.exports=t(2)},function(e,n,t){"use strict";t.r(n);var r={};t.r(r),t.d(r,"useClickOutside",function(){return i}),t.d(r,"isFullScreenElement",function(){return d}),t.d(r,"useFullScreen",function(){return l}),t.d(r,"getSizeInfo",function(){return a}),t.d(r,"isFullScreenSize",function(){return f}),t.d(r,"useFullScreenBrowser",function(){return m}),t.d(r,"useGeolocation",function(){return v}),t.d(r,"useMousePosition",function(){return w}),t.d(r,"useMediaControls",function(){return E}),t.d(r,"useOrientation",function(){return g}),t.d(r,"useResize",function(){return s}),t.d(r,"useScroll",function(){return p}),t.d(r,"useOnline",function(){return h}),t.d(r,"usePageVisibility",function(){return L});var u=t(0);function i(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=[].concat(e),i=!0;t||"function"!=typeof n?i=n.active:t=n;var o=function(e){var n=e.target;r.every(function(e){return!e.current||!e.current.contains(n)})&&t(e)},c=function(){return window.removeEventListener("click",o)};Object(u.useEffect)(function(){return i?window.addEventListener("click",o):c(),c})}var o=!("undefined"!=typeof window&&window.document&&window.document.createElement),c={height:null,width:null};function s(){var e=Object(u.useState)(o?c:i()),n=e[0],t=e[1];function r(){t(i())}function i(){return{height:window.innerHeight,width:window.innerWidth}}return Object(u.useEffect)(function(){return window.addEventListener("resize",r,!1),function(){return window.removeEventListener("resize",r)}},[]),n}function d(e){return e&&e.current?Boolean(document.fullscreenElement===e.current||document.mozFullScreenElement===e.current||document.webkitFullscreenElement===e.current||document.msFullscreenElement===e.current):Boolean(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||document.fullscreen||document.mozFullScreen||document.webkitIsFullScreen||document.fullScreenMode)}function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e&&e.element,t=!o&&d(n),r=Object(u.useState)(t),i=r[0],c=r[1];function s(){var e=n&&n.current||document.documentElement;return e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():void 0}function l(){return document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen?document.msExitFullscreen():void 0}function a(){c(d(n))}return Object(u.useEffect)(function(){return document.addEventListener("webkitfullscreenchange",a,!1),document.addEventListener("mozfullscreenchange",a,!1),document.addEventListener("msfullscreenchange",a,!1),document.addEventListener("MSFullscreenChange",a,!1),document.addEventListener("fullscreenchange",a,!1),function(){document.removeEventListener("webkitfullscreenchange",a),document.removeEventListener("mozfullscreenchange",a),document.removeEventListener("msfullscreenchange",a),document.removeEventListener("MSFullscreenChange",a),document.removeEventListener("fullscreenchange",a)}},[e.element]),{fullScreen:i,open:s,close:l,toggle:i?l:s}}function a(){return o?{}:{screenTop:window.screenTop,screenY:window.screenY,screenWidth:window.screen.width,screenHeight:window.screen.height,innerWidth:window.innerWidth,innerHeight:window.innerHeight}}function f(e){return e.screenWidth===e.innerWidth&&e.screenHeight===e.innerHeight||!e.screenTop&&!e.screenY}function m(){var e=s(),n=a(),t=Object(u.useState)(!o&&f(n)),r=t[0],i=t[1],c=Object(u.useState)(n),d=c[0],l=c[1];return Object(u.useEffect)(function(){var e=a();i(f(e)),l(e)},[e.width,e.height]),{fullScreen:r,info:d}}function v(e){var n=Object(u.useState)({timestamp:Date.now(),coords:{}}),t=n[0],r=n[1],i=Object(u.useState)(null),o=i[0],c=i[1];return Object(u.useEffect)(function(){navigator.geolocation.getCurrentPosition(r,c,e);var n=navigator.geolocation.watchPosition(r,c,e);return function(){return navigator.geolocation.clearWatch(n)}},[e]),{position:t,error:o}}function w(){var e=Object(u.useState)({x:0,y:0}),n=e[0],t=e[1];return Object(u.useEffect)(function(){var e=function(e){var n=e.clientX,r=e.clientY;return t({x:n,y:r})};return window.addEventListener("mousemove",e),function(){return window.removeEventListener("mousemove",e)}},[]),n}function E(e){var n=Object(u.useState)(null),t=n[0],r=n[1],i=Object(u.useState)(null),o=i[0],c=i[1],s=Object(u.useState)(null),d=s[0],l=s[1],a=Object(u.useState)(null),f=a[0],m=a[1],v=Object(u.useState)(null),w=v[0],E=v[1];function b(){e.current.pause()}function g(){return e.current.play()}function p(n){l(e.current.volume),e.current.volume=n,e.current.muted=0===n,c(e.current.muted)}function h(n){e.current.currentTime=n}return Object(u.useEffect)(function(){var n=function(){return e.current.paused||e.current.ended};r(e.current.currentTime),m(n()),c(e.current.muted),o?(l(e.current.volume),E(0)):E(e.current.volume);var t=function(){return m(n())};e.current.addEventListener("play",t),e.current.addEventListener("playing",t),e.current.addEventListener("pause",t),e.current.addEventListener("waiting",t);var u=function(){return E(e.current.volume)};e.current.addEventListener("volumechange",u);var i=function(){return r(e.current.currentTime)};return e.current.addEventListener("seeked",i),e.current.addEventListener("timeupdate",i),function(){e.current.removeEventListener("play",t),e.current.removeEventListener("playing",t),e.current.removeEventListener("pause",t),e.current.removeEventListener("waiting",t),e.current.removeEventListener("volumechange",u),e.current.removeEventListener("seeked",i),e.current.removeEventListener("timeupdate",i)}},[e.current]),{currentTime:t,mute:function(){p(0)},muted:o,unmute:function(){p(d)},pause:b,paused:f,play:g,restart:function(){return h(0),g()},seek:h,setVolume:p,stop:function(){b(),h(0)},volume:w}}var b={angle:0,type:"landscape-primary"};function g(){var e=!o&&window.screen.orientation?window.screen.orientation:b,n=Object(u.useState)(e),t=n[0],r=n[1];return Object(u.useEffect)(function(){var e=function(){return r(window.screen.orientation)};return window.addEventListener("orientationchange",e),function(){return window.removeEventListener("orientationchange",e)}},[]),t}function p(){var e=Object(u.useState)({top:o?0:window.pageYOffset,left:o?0:window.pageXOffset}),n=e[0],t=e[1];function r(){t({top:window.pageYOffset,left:window.pageXOffset})}return Object(u.useEffect)(function(){return window.addEventListener("scroll",r,!1),function(){window.removeEventListener("scroll",r)}},[]),n}function h(){var e=Object(u.useState)(i()),n=e[0],t=e[1];function r(){t(i())}function i(){return!!(o||window.navigator&&window.navigator.onLine)}return Object(u.useEffect)(function(){return window.addEventListener("offline",r,!1),window.addEventListener("online",r,!1),function(){window.removeEventListener("online",r),window.removeEventListener("offline",r)}},[]),n}var L=function(){var e=function(){if(o)return{};var e=void 0,n=void 0;return void 0!==document.hidden?(e="hidden",n="visibilitychange"):void 0!==document.msHidden?(e="msHidden",n="msvisibilitychange"):void 0!==document.webkitHidden&&(e="webkitHidden",n="webkitvisibilitychange"),{hidden:e,visibilityChange:n}}(),n=e.hidden,t=e.visibilityChange,r=Object(u.useState)(!!o||!document[n]),i=r[0],c=r[1],s=function(){return c(!document[n])};return Object(u.useEffect)(function(){return document.addEventListener(t,s),function(){document.removeEventListener(t,s)}},[]),i};n.default=r}]).default});
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ReactBrowserHooks=n(require("react")):e.ReactBrowserHooks=n(e.React)}(window,function(e){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var u=n[r]={i:r,l:!1,exports:{}};return e[r].call(u.exports,u,u.exports,t),u.l=!0,u.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var u in e)t.d(r,u,function(n){return e[n]}.bind(null,u));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(n,t){n.exports=e},function(e,n,t){e.exports=t(2)},function(e,n,t){"use strict";t.r(n);var r={};t.r(r),t.d(r,"useClickOutside",function(){return i}),t.d(r,"isFullScreenElement",function(){return s}),t.d(r,"useFullScreen",function(){return l}),t.d(r,"getSizeInfo",function(){return a}),t.d(r,"isFullScreenSize",function(){return f}),t.d(r,"useFullScreenBrowser",function(){return m}),t.d(r,"useGeolocation",function(){return v}),t.d(r,"useMousePosition",function(){return w}),t.d(r,"useMediaControls",function(){return E}),t.d(r,"useOrientation",function(){return g}),t.d(r,"useResize",function(){return d}),t.d(r,"useScroll",function(){return p}),t.d(r,"useOnline",function(){return h}),t.d(r,"usePageVisibility",function(){return L});var u=t(0);function i(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=arguments[2],r=[].concat(e),i=!0;t||"function"!=typeof n?i=n.active:t=n;var o=function(e){var n=e.target;r.every(function(e){return!e.current||!e.current.contains(n)})&&t(e)},c=function(){return window.removeEventListener("click",o)};Object(u.useEffect)(function(){return i?window.addEventListener("click",o):c(),c})}var o=!("undefined"!=typeof window&&window.document&&window.document.createElement),c={height:null,width:null};function d(){var e=Object(u.useState)(o?c:r()),n=e[0],t=e[1];function r(){return{height:window.innerHeight,width:window.innerWidth}}return Object(u.useEffect)(function(){function e(){t(r())}return window.addEventListener("resize",e,!1),function(){return window.removeEventListener("resize",e)}},[t]),n}function s(e){return e&&e.current?Boolean(document.fullscreenElement===e.current||document.mozFullScreenElement===e.current||document.webkitFullscreenElement===e.current||document.msFullscreenElement===e.current):Boolean(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||document.fullscreen||document.mozFullScreen||document.webkitIsFullScreen||document.fullScreenMode)}function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e&&e.element,t=!o&&s(n),r=Object(u.useState)(t),i=r[0],c=r[1];function d(){var e=n&&n.current||document.documentElement;return e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():void 0}function l(){return document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen?document.msExitFullscreen():void 0}return Object(u.useEffect)(function(){function e(){c(s(n))}return document.addEventListener("webkitfullscreenchange",e,!1),document.addEventListener("mozfullscreenchange",e,!1),document.addEventListener("msfullscreenchange",e,!1),document.addEventListener("MSFullscreenChange",e,!1),document.addEventListener("fullscreenchange",e,!1),function(){document.removeEventListener("webkitfullscreenchange",e),document.removeEventListener("mozfullscreenchange",e),document.removeEventListener("msfullscreenchange",e),document.removeEventListener("MSFullscreenChange",e),document.removeEventListener("fullscreenchange",e)}},[e.element,n]),{fullScreen:i,open:d,close:l,toggle:i?l:d}}function a(){return o?{}:{screenTop:window.screenTop,screenY:window.screenY,screenWidth:window.screen.width,screenHeight:window.screen.height,innerWidth:window.innerWidth,innerHeight:window.innerHeight}}function f(e){return e.screenWidth===e.innerWidth&&e.screenHeight===e.innerHeight||!e.screenTop&&!e.screenY}function m(){var e=d(),n=a(),t=Object(u.useState)(!o&&f(n)),r=t[0],i=t[1],c=Object(u.useState)(n),s=c[0],l=c[1];return Object(u.useEffect)(function(){var e=a();i(f(e)),l(e)},[e.width,e.height]),{fullScreen:r,info:s}}function v(e){var n=Object(u.useState)({timestamp:Date.now(),coords:{}}),t=n[0],r=n[1],i=Object(u.useState)(null),o=i[0],c=i[1];return Object(u.useEffect)(function(){navigator.geolocation.getCurrentPosition(r,c,e);var n=navigator.geolocation.watchPosition(r,c,e);return function(){return navigator.geolocation.clearWatch(n)}},[e]),{position:t,error:o}}function w(){var e=Object(u.useState)({x:0,y:0}),n=e[0],t=e[1];return Object(u.useEffect)(function(){var e=function(e){var n=e.clientX,r=e.clientY;return t({x:n,y:r})};return window.addEventListener("mousemove",e),function(){return window.removeEventListener("mousemove",e)}},[]),n}function E(e){var n=Object(u.useState)(null),t=n[0],r=n[1],i=Object(u.useState)(null),o=i[0],c=i[1],d=Object(u.useState)(null),s=d[0],l=d[1],a=Object(u.useState)(null),f=a[0],m=a[1],v=Object(u.useState)(null),w=v[0],E=v[1];function b(){e.current.pause()}function g(){return e.current.play()}function p(){e.current.muted=!0}function h(){e.current.muted=!1,w&&(e.current.volume=w,E(null))}function L(n){e.current.currentTime=n}return Object(u.useEffect)(function(){var n=e.current,t=function(){return n.paused||n.ended};r(n.currentTime),l(t()),m(n.volume),c(n.muted);var u=function(){return l(t())};n.addEventListener("play",u),n.addEventListener("playing",u),n.addEventListener("pause",u),n.addEventListener("waiting",u);var i=function(){c(n.muted),m(n.volume)};n.addEventListener("volumechange",i);var o=function(){return r(n.currentTime)};return n.addEventListener("seeked",o),n.addEventListener("timeupdate",o),function(){n.removeEventListener("play",u),n.removeEventListener("playing",u),n.removeEventListener("pause",u),n.removeEventListener("waiting",u),n.removeEventListener("volumechange",i),n.removeEventListener("seeked",o),n.removeEventListener("timeupdate",o)}},[e,o]),{currentTime:t,mute:p,muted:o,unmute:h,pause:b,paused:s,play:g,restart:function(){return L(0),g()},seek:L,setVolume:function(n){var t=void 0;0===(t=n<0?0:n>1?1:n)?(E(e.current.volume),p()):h(),e.current.volume=t},stop:function(){b(),L(0)},volume:f}}var b={angle:0,type:"landscape-primary"};function g(){var e=!o&&window.screen.orientation?window.screen.orientation:b,n=Object(u.useState)(e),t=n[0],r=n[1];return Object(u.useEffect)(function(){var e=function(){return r(window.screen.orientation)};return window.addEventListener("orientationchange",e),function(){return window.removeEventListener("orientationchange",e)}},[]),t}function p(){var e=Object(u.useState)({top:o?0:window.pageYOffset,left:o?0:window.pageXOffset}),n=e[0],t=e[1];function r(){t({top:window.pageYOffset,left:window.pageXOffset})}return Object(u.useEffect)(function(){return window.addEventListener("scroll",r,!1),function(){window.removeEventListener("scroll",r)}},[]),n}function h(){var e=Object(u.useState)(r()),n=e[0],t=e[1];function r(){return!!(o||window.navigator&&window.navigator.onLine)}return Object(u.useEffect)(function(){function e(){t(r())}return window.addEventListener("offline",e,!1),window.addEventListener("online",e,!1),function(){window.removeEventListener("online",e),window.removeEventListener("offline",e)}},[]),n}var L=function(){var e=function(){if(o)return{};var e=void 0,n=void 0;return void 0!==document.hidden?(e="hidden",n="visibilitychange"):void 0!==document.msHidden?(e="msHidden",n="msvisibilitychange"):void 0!==document.webkitHidden&&(e="webkitHidden",n="webkitvisibilitychange"),{hidden:e,visibilityChange:n}}(),n=e.hidden,t=e.visibilityChange,r=Object(u.useState)(o||!document[n]),i=r[0],c=r[1];return Object(u.useEffect)(function(){var e=function(){return c(!document[n])};return document.addEventListener(t,e),function(){document.removeEventListener(t,e)}},[n,t]),i};n.default=r}]).default});
 //# sourceMappingURL=react-browser-hooks.min.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99359

increased by0.13%

Lines of code

1555

increased by1.7%

Worsened metrics

Dev dependency count

33

increased by13.79%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes