@micromag/screen-video 0.2.373 → 0.2.383

package/es/index.js

@@ -2,7 +2,7 @@ import { FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getSizeWithinBounds } from '@folklore/size';
@@ -31,6 +31,7 @@ var propTypes = {
   // active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
   spacing: PropTypes.number,
+  getMediaRef: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -42,6 +43,7 @@ var defaultProps = {
   // active: true,
   transitions: null,
   spacing: 20,
+  getMediaRef: null,
   className: null
 };
 
@@ -55,6 +57,7 @@ var VideoScreen = function VideoScreen(_ref) {
       current = _ref.current,
       transitions = _ref.transitions,
       spacing = _ref.spacing,
+      getMediaRef = _ref.getMediaRef,
       className = _ref.className;
   var trackScreenMedia = useTrackScreenMedia('video');
 
@@ -78,8 +81,15 @@ var VideoScreen = function VideoScreen(_ref) {
       toggleMute = _ref2.toggleMute,
       seek = _ref2.seek,
       play = _ref2.play,
-      pause = _ref2.pause; // Get api state updates from callback
+      pause = _ref2.pause,
+      _ref2$mediaRef = _ref2.mediaRef,
+      apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
 
+  useEffect(function () {
+    if (apiMediaRef !== null && getMediaRef !== null) {
+      getMediaRef(apiMediaRef.current);
+    }
+  }, [apiMediaRef, getMediaRef]); // Get api state updates from callback
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -149,10 +159,11 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState9 = useState(!hasVideo),
+  var _useState9 = useState(hasVideo),
       _useState10 = _slicedToArray(_useState9, 2),
       ready = _useState10[0],
-      setReady = _useState10[1];
+      setReady = _useState10[1]; // useState(!hasVideo);
+
 
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
@@ -243,10 +254,6 @@ var VideoScreen = function VideoScreen(_ref) {
       left: resizedVideoLeft,
       top: resizedVideoTop
     }
-  }, /*#__PURE__*/React.createElement(Transitions, {
-    playing: transitionPlaying,
-    transitions: transitions,
-    disabled: transitionDisabled
   }, isPreview || isCapture ? /*#__PURE__*/React.createElement(Image, {
     className: styles.image,
     media: {
@@ -271,7 +278,7 @@ var VideoScreen = function VideoScreen(_ref) {
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView // onPosterLoaded={onPosterLoaded}
 
-  })))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React.createElement(Transitions, {

package/lib/index.js

@@ -52,6 +52,7 @@ var propTypes = {
   // active: PropTypes.bool,
   transitions: core.PropTypes.transitions,
   spacing: PropTypes__default["default"].number,
+  getMediaRef: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -63,6 +64,7 @@ var defaultProps = {
   // active: true,
   transitions: null,
   spacing: 20,
+  getMediaRef: null,
   className: null
 };
 
@@ -76,6 +78,7 @@ var VideoScreen = function VideoScreen(_ref) {
       current = _ref.current,
       transitions = _ref.transitions,
       spacing = _ref.spacing,
+      getMediaRef = _ref.getMediaRef,
       className = _ref.className;
   var trackScreenMedia = hooks.useTrackScreenMedia('video');
 
@@ -99,8 +102,15 @@ var VideoScreen = function VideoScreen(_ref) {
       toggleMute = _ref2.toggleMute,
       seek = _ref2.seek,
       play = _ref2.play,
-      pause = _ref2.pause; // Get api state updates from callback
+      pause = _ref2.pause,
+      _ref2$mediaRef = _ref2.mediaRef,
+      apiMediaRef = _ref2$mediaRef === void 0 ? null : _ref2$mediaRef;
 
+  React.useEffect(function () {
+    if (apiMediaRef !== null && getMediaRef !== null) {
+      getMediaRef(apiMediaRef.current);
+    }
+  }, [apiMediaRef, getMediaRef]); // Get api state updates from callback
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -170,10 +180,11 @@ var VideoScreen = function VideoScreen(_ref) {
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   var hasVideo = video !== null;
 
-  var _useState9 = React.useState(!hasVideo),
+  var _useState9 = React.useState(hasVideo),
       _useState10 = _slicedToArray__default["default"](_useState9, 2),
       ready = _useState10[0],
-      setReady = _useState10[1];
+      setReady = _useState10[1]; // useState(!hasVideo);
+
 
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit; // get resized video style props
@@ -264,10 +275,6 @@ var VideoScreen = function VideoScreen(_ref) {
       left: resizedVideoLeft,
       top: resizedVideoTop
     }
-  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-    playing: transitionPlaying,
-    transitions: transitions,
-    disabled: transitionDisabled
   }, isPreview || isCapture ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
     className: styles.image,
     media: {
@@ -292,7 +299,7 @@ var VideoScreen = function VideoScreen(_ref) {
     onVolumeChanged: onVolumeChanged,
     focusable: current && isView // onPosterLoaded={onPosterLoaded}
 
-  })))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     key: "bottom-content",
     className: styles.bottomContent
   }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video",
-    "version": "0.2.373",
+    "version": "0.2.383",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.15",
-        "@micromag/core": "^0.2.373",
-        "@micromag/element-background": "^0.2.373",
-        "@micromag/element-call-to-action": "^0.2.373",
-        "@micromag/element-closed-captions": "^0.2.373",
-        "@micromag/element-container": "^0.2.373",
-        "@micromag/element-image": "^0.2.373",
-        "@micromag/element-media-controls": "^0.2.373",
-        "@micromag/element-video": "^0.2.373",
-        "@micromag/transforms": "^0.2.373",
+        "@micromag/core": "^0.2.379",
+        "@micromag/element-background": "^0.2.379",
+        "@micromag/element-call-to-action": "^0.2.379",
+        "@micromag/element-closed-captions": "^0.2.379",
+        "@micromag/element-container": "^0.2.379",
+        "@micromag/element-image": "^0.2.379",
+        "@micromag/element-media-controls": "^0.2.379",
+        "@micromag/element-video": "^0.2.379",
+        "@micromag/transforms": "^0.2.379",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "613451a824d273954763eaf3a739ec16ac6feb9b"
+    "gitHead": "14ecbbc6ee503b1c56d5dccde6da83e8e1394c19"
 }