@micromag/screen-timeline 0.3.150 → 0.3.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +38 -36
  3. package/lib/index.js +36 -34
  4. package/package.json +12 -12
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-timeline-container .micromag-screen-timeline-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:15px;padding-right:20px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{width:15px;height:15px;margin:2px 0;border-width:1px;border-style:solid}.micromag-screen-timeline-container .micromag-screen-timeline-content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{width:10px;height:10px;border-color:hsla(0,0%,100%,.6);background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{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%;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}
1
+ .micromag-screen-timeline-container .micromag-screen-timeline-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:15px;padding-right:20px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{width:15px;height:15px;margin:2px 0;border-width:1px;border-style:solid}.micromag-screen-timeline-container .micromag-screen-timeline-content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction a{padding:0}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction.micromag-screen-timeline-disabled{opacity:0;pointer-events:none}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{width:10px;height:10px;border-color:hsla(0,0%,100%,.6);background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{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%;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}
package/es/index.js CHANGED
@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
8
8
  import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { Transitions, ScreenElement } from '@micromag/core/components';
11
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
12
- import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
11
+ import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
12
+ import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
13
13
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
14
14
  import Background from '@micromag/element-background';
15
15
  import CallToAction from '@micromag/element-call-to-action';
@@ -22,7 +22,7 @@ import Visual from '@micromag/element-visual';
22
22
  import _extends from '@babel/runtime/helpers/extends';
23
23
  import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
24
24
 
25
- var styles = {"container":"micromag-screen-timeline-container","empty":"micromag-screen-timeline-empty","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","content":"micromag-screen-timeline-content","lastContent":"micromag-screen-timeline-lastContent","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
25
+ var styles = {"container":"micromag-screen-timeline-container","empty":"micromag-screen-timeline-empty","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","content":"micromag-screen-timeline-content","lastContent":"micromag-screen-timeline-lastContent","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
26
26
 
27
27
  var propTypes = {
28
28
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -40,8 +40,6 @@ var propTypes = {
40
40
  transitions: PropTypes$1.transitions,
41
41
  transitionStagger: PropTypes.number,
42
42
  type: PropTypes.string,
43
- enableInteraction: PropTypes.func,
44
- disableInteraction: PropTypes.func,
45
43
  className: PropTypes.string
46
44
  };
47
45
  var defaultProps = {
@@ -60,8 +58,6 @@ var defaultProps = {
60
58
  transitions: null,
61
59
  transitionStagger: 75,
62
60
  type: null,
63
- enableInteraction: null,
64
- disableInteraction: null,
65
61
  className: null
66
62
  };
67
63
 
@@ -83,19 +79,26 @@ var Timeline = function Timeline(_ref) {
83
79
  transitions = _ref.transitions,
84
80
  transitionStagger = _ref.transitionStagger,
85
81
  type = _ref.type,
86
- enableInteraction = _ref.enableInteraction,
87
- disableInteraction = _ref.disableInteraction,
88
82
  className = _ref.className;
89
83
  var trackScreenEvent = useTrackScreenEvent(type);
90
84
 
91
85
  var _useScreenSize = useScreenSize(),
92
86
  width = _useScreenSize.width,
93
87
  height = _useScreenSize.height,
94
- menuOverScreen = _useScreenSize.menuOverScreen,
95
88
  resolution = _useScreenSize.resolution;
96
89
 
97
- var _useViewer = useViewer(),
98
- menuSize = _useViewer.menuSize;
90
+ var _useViewerContext = useViewerContext(),
91
+ viewerTopHeight = _useViewerContext.topHeight,
92
+ viewerBottomHeight = _useViewerContext.bottomHeight,
93
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
94
+
95
+ var _useViewerWebView = useViewerWebView(),
96
+ openWebView = _useViewerWebView.open;
97
+
98
+ var _usePlaybackContext = usePlaybackContext(),
99
+ muted = _usePlaybackContext.muted;
100
+
101
+ var mediaRef = usePlaybackMediaRef(current);
99
102
 
100
103
  var _useScreenRenderConte = useScreenRenderContext(),
101
104
  isView = _useScreenRenderConte.isView,
@@ -280,20 +283,19 @@ var Timeline = function Timeline(_ref) {
280
283
  })));
281
284
  }); // Call to Action
282
285
 
283
- var hasCallToAction = callToAction !== null && callToAction.active === true;
286
+ var _ref8 = callToAction || {},
287
+ _ref8$active = _ref8.active,
288
+ hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
284
289
 
285
290
  var _useState5 = useState(false),
286
291
  _useState6 = _slicedToArray(_useState5, 2),
287
292
  scrolledBottom = _useState6[0],
288
293
  setScrolledBottom = _useState6[1];
289
294
 
290
- var _useResizeObserver = useResizeObserver(),
291
- callToActionRef = _useResizeObserver.ref,
292
- callToActionRect = _useResizeObserver.entry.contentRect;
293
-
294
- var _ref8 = callToActionRect || {},
295
- _ref8$height = _ref8.height,
296
- callToActionHeight = _ref8$height === void 0 ? 0 : _ref8$height;
295
+ var _useDimensionObserver = useDimensionObserver(),
296
+ callToActionRef = _useDimensionObserver.ref,
297
+ _useDimensionObserver2 = _useDimensionObserver.height,
298
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
297
299
 
298
300
  var onScrolledBottom = useCallback(function (_ref9) {
299
301
  var initial = _ref9.initial;
@@ -316,7 +318,9 @@ var Timeline = function Timeline(_ref) {
316
318
  height: height,
317
319
  resolution: resolution,
318
320
  playing: backgroundPlaying,
319
- shouldLoad: mediaShouldLoad
321
+ muted: muted,
322
+ shouldLoad: mediaShouldLoad,
323
+ mediaRef: mediaRef
320
324
  }) : null, /*#__PURE__*/React.createElement(Container, {
321
325
  width: width,
322
326
  height: height
@@ -329,26 +333,24 @@ var Timeline = function Timeline(_ref) {
329
333
  }, /*#__PURE__*/React.createElement(Layout, {
330
334
  style: !isPlaceholder ? {
331
335
  padding: spacing,
332
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
336
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
337
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
333
338
  } : null
334
- }, timelineElements, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
339
+ }, timelineElements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
340
+ ref: callToActionRef,
341
+ className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
335
342
  style: {
336
- height: callToActionHeight
343
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
344
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
345
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
346
+ paddingTop: spacing / 2,
347
+ paddingBottom: spacing / 2
337
348
  }
338
- }) : null)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
339
- ref: callToActionRef,
340
- className: styles.callToAction,
341
- disabled: !scrolledBottom,
349
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
342
350
  animationDisabled: isPreview,
343
- callToAction: callToAction,
344
351
  focusable: current && isView,
345
- screenSize: {
346
- width: width,
347
- height: height
348
- },
349
- enableInteraction: enableInteraction,
350
- disableInteraction: disableInteraction
351
- }) : null));
352
+ openWebView: openWebView
353
+ }))) : null));
352
354
  };
353
355
 
354
356
  Timeline.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -45,7 +45,7 @@ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
45
45
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
46
46
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
47
47
 
48
- var styles = {"container":"micromag-screen-timeline-container","empty":"micromag-screen-timeline-empty","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","content":"micromag-screen-timeline-content","lastContent":"micromag-screen-timeline-lastContent","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
48
+ var styles = {"container":"micromag-screen-timeline-container","empty":"micromag-screen-timeline-empty","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","content":"micromag-screen-timeline-content","lastContent":"micromag-screen-timeline-lastContent","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
49
49
 
50
50
  var propTypes = {
51
51
  layout: PropTypes__default["default"].oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -63,8 +63,6 @@ var propTypes = {
63
63
  transitions: core.PropTypes.transitions,
64
64
  transitionStagger: PropTypes__default["default"].number,
65
65
  type: PropTypes__default["default"].string,
66
- enableInteraction: PropTypes__default["default"].func,
67
- disableInteraction: PropTypes__default["default"].func,
68
66
  className: PropTypes__default["default"].string
69
67
  };
70
68
  var defaultProps = {
@@ -83,8 +81,6 @@ var defaultProps = {
83
81
  transitions: null,
84
82
  transitionStagger: 75,
85
83
  type: null,
86
- enableInteraction: null,
87
- disableInteraction: null,
88
84
  className: null
89
85
  };
90
86
 
@@ -106,19 +102,26 @@ var Timeline = function Timeline(_ref) {
106
102
  transitions = _ref.transitions,
107
103
  transitionStagger = _ref.transitionStagger,
108
104
  type = _ref.type,
109
- enableInteraction = _ref.enableInteraction,
110
- disableInteraction = _ref.disableInteraction,
111
105
  className = _ref.className;
112
106
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
113
107
 
114
108
  var _useScreenSize = contexts.useScreenSize(),
115
109
  width = _useScreenSize.width,
116
110
  height = _useScreenSize.height,
117
- menuOverScreen = _useScreenSize.menuOverScreen,
118
111
  resolution = _useScreenSize.resolution;
119
112
 
120
- var _useViewer = contexts.useViewer(),
121
- menuSize = _useViewer.menuSize;
113
+ var _useViewerContext = contexts.useViewerContext(),
114
+ viewerTopHeight = _useViewerContext.topHeight,
115
+ viewerBottomHeight = _useViewerContext.bottomHeight,
116
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
117
+
118
+ var _useViewerWebView = contexts.useViewerWebView(),
119
+ openWebView = _useViewerWebView.open;
120
+
121
+ var _usePlaybackContext = contexts.usePlaybackContext(),
122
+ muted = _usePlaybackContext.muted;
123
+
124
+ var mediaRef = contexts.usePlaybackMediaRef(current);
122
125
 
123
126
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
124
127
  isView = _useScreenRenderConte.isView,
@@ -303,20 +306,19 @@ var Timeline = function Timeline(_ref) {
303
306
  })));
304
307
  }); // Call to Action
305
308
 
306
- var hasCallToAction = callToAction !== null && callToAction.active === true;
309
+ var _ref8 = callToAction || {},
310
+ _ref8$active = _ref8.active,
311
+ hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
307
312
 
308
313
  var _useState5 = React.useState(false),
309
314
  _useState6 = _slicedToArray__default["default"](_useState5, 2),
310
315
  scrolledBottom = _useState6[0],
311
316
  setScrolledBottom = _useState6[1];
312
317
 
313
- var _useResizeObserver = hooks.useResizeObserver(),
314
- callToActionRef = _useResizeObserver.ref,
315
- callToActionRect = _useResizeObserver.entry.contentRect;
316
-
317
- var _ref8 = callToActionRect || {},
318
- _ref8$height = _ref8.height,
319
- callToActionHeight = _ref8$height === void 0 ? 0 : _ref8$height;
318
+ var _useDimensionObserver = hooks.useDimensionObserver(),
319
+ callToActionRef = _useDimensionObserver.ref,
320
+ _useDimensionObserver2 = _useDimensionObserver.height,
321
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
320
322
 
321
323
  var onScrolledBottom = React.useCallback(function (_ref9) {
322
324
  var initial = _ref9.initial;
@@ -339,7 +341,9 @@ var Timeline = function Timeline(_ref) {
339
341
  height: height,
340
342
  resolution: resolution,
341
343
  playing: backgroundPlaying,
342
- shouldLoad: mediaShouldLoad
344
+ muted: muted,
345
+ shouldLoad: mediaShouldLoad,
346
+ mediaRef: mediaRef
343
347
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
344
348
  width: width,
345
349
  height: height
@@ -352,26 +356,24 @@ var Timeline = function Timeline(_ref) {
352
356
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
353
357
  style: !isPlaceholder ? {
354
358
  padding: spacing,
355
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
359
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
360
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
356
361
  } : null
357
- }, timelineElements, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
362
+ }, timelineElements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
363
+ ref: callToActionRef,
364
+ className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
358
365
  style: {
359
- height: callToActionHeight
366
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
367
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
368
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
369
+ paddingTop: spacing / 2,
370
+ paddingBottom: spacing / 2
360
371
  }
361
- }) : null)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
362
- ref: callToActionRef,
363
- className: styles.callToAction,
364
- disabled: !scrolledBottom,
372
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
365
373
  animationDisabled: isPreview,
366
- callToAction: callToAction,
367
374
  focusable: current && isView,
368
- screenSize: {
369
- width: width,
370
- height: height
371
- },
372
- enableInteraction: enableInteraction,
373
- disableInteraction: disableInteraction
374
- }) : null));
375
+ openWebView: openWebView
376
+ }))) : null));
375
377
  };
376
378
 
377
379
  Timeline.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.150",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,16 +49,16 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.150",
53
- "@micromag/element-background": "^0.3.150",
54
- "@micromag/element-call-to-action": "^0.3.150",
55
- "@micromag/element-container": "^0.3.150",
56
- "@micromag/element-heading": "^0.3.150",
57
- "@micromag/element-layout": "^0.3.150",
58
- "@micromag/element-scroll": "^0.3.150",
59
- "@micromag/element-text": "^0.3.150",
60
- "@micromag/element-visual": "^0.3.150",
61
- "@micromag/transforms": "^0.3.150",
52
+ "@micromag/core": "^0.3.152",
53
+ "@micromag/element-background": "^0.3.152",
54
+ "@micromag/element-call-to-action": "^0.3.152",
55
+ "@micromag/element-container": "^0.3.152",
56
+ "@micromag/element-heading": "^0.3.152",
57
+ "@micromag/element-layout": "^0.3.152",
58
+ "@micromag/element-scroll": "^0.3.152",
59
+ "@micromag/element-text": "^0.3.152",
60
+ "@micromag/element-visual": "^0.3.152",
61
+ "@micromag/transforms": "^0.3.152",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
64
64
  "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
71
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
72
72
  }