@micromag/screen-video 0.3.158 → 0.3.162

package/es/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo, Empty, Transitions } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
+import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenMedia, useActivityDetector, useMediaThumbnail } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
@@ -125,13 +125,14 @@ var VideoScreen = function VideoScreen(_ref) {
       return function () {};
     }
 
+    setControlsTheme({
+      seekBarOnly: withSeekBar && !withControls,
+      color: color,
+      progressColor: progressColor
+    });
+
     if (withControls || withSeekBar) {
       setControls(true);
-      setControlsTheme({
-        seekBarOnly: withSeekBar && !withControls,
-        color: color,
-        progressColor: progressColor
-      });
     } else {
       setControls(false);
     }
@@ -152,12 +153,13 @@ var VideoScreen = function VideoScreen(_ref) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
+  var viewerContainer = useViewerContainer();
 
   var _useActivityDetector = useActivityDetector({
+    element: viewerContainer,
     disabled: !current || !isView,
     timeout: 2000
   }),
-      activityDetectorRef = _useActivityDetector.ref,
       activityDetected = _useActivityDetector.detected;
 
   useEffect(function () {
@@ -340,8 +342,7 @@ var VideoScreen = function VideoScreen(_ref) {
   })) : null)) : null];
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.fullscreen, fullscreen), _ref7)]),
-    "data-screen-ready": isStatic || isCapture || ready,
-    ref: activityDetectorRef
+    "data-screen-ready": isStatic || isCapture || ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,

package/lib/index.js

@@ -145,13 +145,14 @@ var VideoScreen = function VideoScreen(_ref) {
       return function () {};
     }
 
+    setControlsTheme({
+      seekBarOnly: withSeekBar && !withControls,
+      color: color,
+      progressColor: progressColor
+    });
+
     if (withControls || withSeekBar) {
       setControls(true);
-      setControlsTheme({
-        seekBarOnly: withSeekBar && !withControls,
-        color: color,
-        progressColor: progressColor
-      });
     } else {
       setControls(false);
     }
@@ -172,12 +173,13 @@ var VideoScreen = function VideoScreen(_ref) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
+  var viewerContainer = contexts.useViewerContainer();
 
   var _useActivityDetector = hooks.useActivityDetector({
+    element: viewerContainer,
     disabled: !current || !isView,
     timeout: 2000
   }),
-      activityDetectorRef = _useActivityDetector.ref,
       activityDetected = _useActivityDetector.detected;
 
   React.useEffect(function () {
@@ -360,8 +362,7 @@ var VideoScreen = function VideoScreen(_ref) {
   })) : null)) : null];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.fullscreen, fullscreen), _ref7)]),
-    "data-screen-ready": isStatic || isCapture || ready,
-    ref: activityDetectorRef
+    "data-screen-ready": isStatic || isCapture || ready
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
     width: width,

package/package.json

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