@micromag/screen-video 0.3.190 → 0.3.194

package/es/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, 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, useViewerContainer } from '@micromag/core/contexts';
@@ -118,8 +118,15 @@ var VideoScreen = function VideoScreen(_ref) {
       hideControls = _usePlaybackContext.hideControls;
 
   var mediaRef = usePlaybackMediaRef(current);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasPlayed = _useState2[0],
+      setHasPlayed = _useState2[1];
+
   var backgroundPlaying = current && (isView || isEdit);
   var videoPlaying = current && (isView || isEdit) && playing;
+  var shouldDisplayPoster = isPreview || isCapture || isView && active && !current && !hasPlayed;
   useEffect(function () {
     if (!current) {
       return function () {};
@@ -174,15 +181,15 @@ var VideoScreen = function VideoScreen(_ref) {
     }
   }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
 
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
-
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      duration = _useState4[0],
-      setDuration = _useState4[1];
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      duration = _useState6[0],
+      setDuration = _useState6[1];
 
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
@@ -195,6 +202,11 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [setDuration]);
   var onPlay = useCallback(function (_ref3) {
     var initial = _ref3.initial;
+
+    if (!hasPlayed) {
+      setHasPlayed(true);
+    }
+
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
   var onPause = useCallback(function (_ref4) {
@@ -217,10 +229,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState5 = useState(hasVideo),
-      _useState6 = _slicedToArray(_useState5, 2),
-      ready = _useState6[0],
-      setReady = _useState6[1]; // useState(!hasVideo);
+  var _useState7 = useState(hasVideo),
+      _useState8 = _slicedToArray(_useState7, 2),
+      ready = _useState8[0],
+      setReady = _useState8[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -296,7 +308,7 @@ var VideoScreen = function VideoScreen(_ref) {
       left: resizedVideoLeft,
       top: resizedVideoTop
     }
-  }, isPreview || isCapture ? /*#__PURE__*/React.createElement(Image, {
+  }, shouldDisplayPoster ? /*#__PURE__*/React.createElement(Image, {
     className: styles.image,
     media: finalThumbnail,
     width: resizedVideoWidth,

package/lib/index.js

@@ -138,8 +138,15 @@ var VideoScreen = function VideoScreen(_ref) {
       hideControls = _usePlaybackContext.hideControls;
 
   var mediaRef = contexts.usePlaybackMediaRef(current);
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      hasPlayed = _useState2[0],
+      setHasPlayed = _useState2[1];
+
   var backgroundPlaying = current && (isView || isEdit);
   var videoPlaying = current && (isView || isEdit) && playing;
+  var shouldDisplayPoster = isPreview || isCapture || isView && active && !current && !hasPlayed;
   React.useEffect(function () {
     if (!current) {
       return function () {};
@@ -194,15 +201,15 @@ var VideoScreen = function VideoScreen(_ref) {
     }
   }, [activityDetected, showControls, hideControls]); // Get api state updates from callback
 
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
-
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      duration = _useState4[0],
-      setDuration = _useState4[1];
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      duration = _useState6[0],
+      setDuration = _useState6[1];
 
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
@@ -215,6 +222,11 @@ var VideoScreen = function VideoScreen(_ref) {
   }, [setDuration]);
   var onPlay = React.useCallback(function (_ref3) {
     var initial = _ref3.initial;
+
+    if (!hasPlayed) {
+      setHasPlayed(true);
+    }
+
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
   var onPause = React.useCallback(function (_ref4) {
@@ -237,10 +249,10 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState5 = React.useState(hasVideo),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      ready = _useState6[0],
-      setReady = _useState6[1]; // useState(!hasVideo);
+  var _useState7 = React.useState(hasVideo),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      ready = _useState8[0],
+      setReady = _useState8[1]; // useState(!hasVideo);
 
 
   var transitionPlaying = current && ready;
@@ -316,7 +328,7 @@ var VideoScreen = function VideoScreen(_ref) {
       left: resizedVideoLeft,
       top: resizedVideoTop
     }
-  }, isPreview || isCapture ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
+  }, shouldDisplayPoster ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
     className: styles.image,
     media: finalThumbnail,
     width: resizedVideoWidth,

package/package.json

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