@micromag/screen-video 0.3.224 → 0.3.226

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{z-index:1;overflow:hidden}.micromag-screen-video-container .micromag-screen-video-bottom{z-index:2;position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom:0}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}
+.micromag-screen-video-unmuteAndPlayButton{display:inline-block;position:relative;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{z-index:1;overflow:hidden}.micromag-screen-video-container .micromag-screen-video-bottom{position:absolute;z-index:2;bottom:0;left:0;width:100%;-webkit-transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);transition:padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1);-o-transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1);transition:transform .5s cubic-bezier(.6,0,.4,1),padding .5s cubic-bezier(.6,0,.4,1),-webkit-transform .5s cubic-bezier(.6,0,.4,1)}.micromag-screen-video-container .micromag-screen-video-bottom>*{margin-bottom:10px}.micromag-screen-video-container .micromag-screen-video-bottom>:last-child{margin-bottom:0}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-unmuteAndPlayButton{display:block;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:0;background-color:rgba(0,0,0,0)}

package/es/index.js

@@ -9,7 +9,7 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo, Empty } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenMedia, useActivityDetector, useMediaThumbnail } from '@micromag/core/hooks';
+import { useTrackScreenMedia, useActivityDetector, useDebounce, useMediaThumbnail } 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';
@@ -165,22 +165,19 @@ var VideoScreen = function VideoScreen(_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 _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),

package/lib/index.js

@@ -185,22 +185,19 @@ var VideoScreen = function VideoScreen(_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 _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.3.224",
+    "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",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a4c770e486befc690596003e4ff622a113250549"
+    "gitHead": "09b84178b69abaa01da5c8e22541d4ec10b5c6f1"
 }