@micromag/screen-video-360 0.3.219 → 0.3.226

package/es/index.js

@@ -10,7 +10,7 @@ import 'whatwg-fetch';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
 import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useTrackScreenMedia, useActivityDetector, useAnimationFrame } from '@micromag/core/hooks';
+import { useTrackScreenEvent, useTrackScreenMedia, useActivityDetector, useDebounce, useAnimationFrame } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
 import ClosedCaptions from '@micromag/element-closed-captions';
@@ -231,22 +231,19 @@ var Video360Screen = function Video360Screen(_ref) {
 
   var _useActivityDetector = useActivityDetector({
     element: viewerContainer,
-    disabled: !current || !isView,
+    disabled: !isView,
     timeout: 2000
   }),
       activityDetected = _useActivityDetector.detected;
 
-  useEffect(function () {
-    if (!current) {
-      return;
-    }
-
+  var toggleControlsVisibility = useCallback(function () {
     if (activityDetected) {
       showControls();
     } else {
       hideControls();
     }
   }, [activityDetected, showControls, hideControls]);
+  useDebounce(toggleControlsVisibility, activityDetected, 1000);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),

package/lib/index.js

@@ -269,22 +269,19 @@ var Video360Screen = function Video360Screen(_ref) {
 
   var _useActivityDetector = hooks.useActivityDetector({
     element: viewerContainer,
-    disabled: !current || !isView,
+    disabled: !isView,
     timeout: 2000
   }),
       activityDetected = _useActivityDetector.detected;
 
-  React.useEffect(function () {
-    if (!current) {
-      return;
-    }
-
+  var toggleControlsVisibility = React.useCallback(function () {
     if (activityDetected) {
       showControls();
     } else {
       hideControls();
     }
   }, [activityDetected, showControls, hideControls]);
+  hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default["default"](_useState, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "version": "0.3.219",
+    "version": "0.3.226",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.219",
-        "@micromag/element-background": "^0.3.219",
-        "@micromag/element-call-to-action": "^0.3.219",
-        "@micromag/element-closed-captions": "^0.3.219",
-        "@micromag/element-container": "^0.3.219",
-        "@micromag/element-image": "^0.3.219",
-        "@micromag/element-media-controls": "^0.3.219",
-        "@micromag/element-video": "^0.3.219",
-        "@micromag/transforms": "^0.3.219",
+        "@micromag/core": "^0.3.226",
+        "@micromag/element-background": "^0.3.226",
+        "@micromag/element-call-to-action": "^0.3.226",
+        "@micromag/element-closed-captions": "^0.3.226",
+        "@micromag/element-container": "^0.3.226",
+        "@micromag/element-image": "^0.3.226",
+        "@micromag/element-media-controls": "^0.3.226",
+        "@micromag/element-video": "^0.3.226",
+        "@micromag/transforms": "^0.3.226",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ab36acb620cd3fba5c4e3c0522a299d1d27ee422"
+    "gitHead": "09b84178b69abaa01da5c8e22541d4ec10b5c6f1"
 }