@micromag/screen-timeline 0.3.801 → 0.3.806

package/es/index.js

@@ -1,11 +1,11 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
@@ -131,10 +131,11 @@ var Timeline = function Timeline(_ref) {
     _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
     isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
   var _ref2 = alternatives || {},
-    audioAlternative = _ref2.audio;
+    _ref2$audio = _ref2.audio,
+    audioAlternative = _ref2$audio === void 0 ? null : _ref2$audio;
   var _ref3 = audioAlternative || {},
     _ref3$autoPlay = _ref3.autoPlay,
-    autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
+    autoPlay = _ref3$autoPlay === void 0 ? false : _ref3$autoPlay,
     _ref3$loop = _ref3.loop,
     loop = _ref3$loop === void 0 ? false : _ref3$loop,
     _ref3$media = _ref3.media,
@@ -147,16 +148,17 @@ var Timeline = function Timeline(_ref) {
     color = _ref3$color === void 0 ? null : _ref3$color,
     _ref3$progressColor = _ref3.progressColor,
     progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
+  var finalAudioAlternative = useMemo(function () {
+    return audioAlternative !== null ? _objectSpread(_objectSpread({}, audioAlternative), {}, {
+      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+    }) : null;
+  }, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasPlayed = _useState2[0],
     setHasPlayed = _useState2[1];
   var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   var audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
-  console.log({
-    playing: playing,
-    audioPlaying: audioPlaying
-  });
   useEffect(function () {
     if (!current) {
       return function () {};
@@ -249,7 +251,6 @@ var Timeline = function Timeline(_ref) {
     }
   }, [trackScreenMedia, audioAlternativeMedia]);
   var onAudioEnded = useCallback(function () {
-    console.log('ENDED');
     if (current && !loop) {
       setPlaying(false);
     }
@@ -520,18 +521,7 @@ var Timeline = function Timeline(_ref) {
       paddingTop: spacing / 2,
       paddingBottom: spacing / 2
     }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: imageResolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: audioAlternativeMedia === null ? mediaRef : null,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null, audioAlternativeMedia !== null ? /*#__PURE__*/React.createElement(Audio, Object.assign({}, audioAlternative, {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), audioAlternativeMedia !== null ? /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudioAlternative, {
     paused: !audioPlaying,
     mediaRef: mediaRef,
     muted: muted,
@@ -545,7 +535,18 @@ var Timeline = function Timeline(_ref) {
     onDurationChange: onAudioDurationChange,
     onSeeked: onAudioSeeked,
     onEnded: onAudioEnded
-  })) : null);
+  })) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: imageResolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: audioAlternativeMedia === null ? mediaRef : null,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
 };
 Timeline.propTypes = propTypes;
 Timeline.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.3.801",
+    "version": "0.3.806",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,17 +60,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.801",
-        "@micromag/element-background": "^0.3.801",
-        "@micromag/element-container": "^0.3.801",
-        "@micromag/element-footer": "^0.3.801",
-        "@micromag/element-header": "^0.3.801",
-        "@micromag/element-heading": "^0.3.801",
-        "@micromag/element-layout": "^0.3.801",
-        "@micromag/element-scroll": "^0.3.801",
-        "@micromag/element-text": "^0.3.801",
-        "@micromag/element-visual": "^0.3.801",
-        "@micromag/transforms": "^0.3.801",
+        "@micromag/core": "^0.3.803",
+        "@micromag/element-background": "^0.3.803",
+        "@micromag/element-container": "^0.3.803",
+        "@micromag/element-footer": "^0.3.803",
+        "@micromag/element-header": "^0.3.803",
+        "@micromag/element-heading": "^0.3.803",
+        "@micromag/element-layout": "^0.3.803",
+        "@micromag/element-scroll": "^0.3.803",
+        "@micromag/element-text": "^0.3.803",
+        "@micromag/element-visual": "^0.3.803",
+        "@micromag/transforms": "^0.3.803",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0ce6f19eff38a6fff58c0f156d3f53d741f5113e"
+    "gitHead": "11b32cfa59e2c5b6b332e377e0290e0bf5036f36"
 }