@micromag/screen-image 0.3.148 → 0.3.153

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 +53 -48
  3. package/lib/index.js +50 -45
  4. package/package.json +11 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative;padding:6px}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-content{position:relative;height:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{width:100%;margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container .micromag-screen-image-callToAction{margin-top:-10px}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{position:absolute;bottom:10px;width:100%;margin-top:0}
1
+ .micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative;padding:6px}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-content{position:relative;height:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{width:100%;margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{position:absolute;bottom:0;width:100%;margin-top:0}
package/es/index.js CHANGED
@@ -3,11 +3,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import classNames from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
- import React, { useMemo, useState, useCallback } from 'react';
6
+ import React, { useState, useCallback, useMemo } from 'react';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { ScreenElement, Transitions } from '@micromag/core/components';
9
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
10
- import { useResizeObserver } from '@micromag/core/hooks';
9
+ import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
10
+ import { useDimensionObserver } from '@micromag/core/hooks';
11
11
  import { isTextFilled } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
13
  import CallToAction from '@micromag/element-call-to-action';
@@ -21,7 +21,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
21
21
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
22
22
  import { Image, Heading1, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
23
23
 
24
- var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","callToAction":"micromag-screen-image-callToAction","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","isFullscreen":"micromag-screen-image-isFullscreen"};
24
+ var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
25
25
 
26
26
  var propTypes = {
27
27
  layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -40,8 +40,6 @@ var propTypes = {
40
40
  current: PropTypes.bool,
41
41
  active: PropTypes.bool,
42
42
  transitions: PropTypes$1.transitions,
43
- enableInteraction: PropTypes.func,
44
- disableInteraction: PropTypes.func,
45
43
  className: PropTypes.string
46
44
  };
47
45
  var defaultProps = {
@@ -61,13 +59,11 @@ var defaultProps = {
61
59
  current: true,
62
60
  active: true,
63
61
  transitions: null,
64
- enableInteraction: null,
65
- disableInteraction: null,
66
62
  className: null
67
63
  };
68
64
 
69
65
  var ImageScreen = function ImageScreen(_ref) {
70
- var _ref3;
66
+ var _ref2;
71
67
 
72
68
  var layout = _ref.layout,
73
69
  image = _ref.image,
@@ -85,24 +81,13 @@ var ImageScreen = function ImageScreen(_ref) {
85
81
  current = _ref.current,
86
82
  active = _ref.active,
87
83
  transitions = _ref.transitions,
88
- enableInteraction = _ref.enableInteraction,
89
- disableInteraction = _ref.disableInteraction,
90
84
  className = _ref.className;
91
- var finalImageFit = useMemo(function () {
92
- return {
93
- fit: imageFit || defaultImageFit
94
- };
95
- }, [imageFit, defaultImageFit]);
96
85
 
97
86
  var _useScreenSize = useScreenSize(),
98
87
  width = _useScreenSize.width,
99
88
  height = _useScreenSize.height,
100
- menuOverScreen = _useScreenSize.menuOverScreen,
101
89
  resolution = _useScreenSize.resolution;
102
90
 
103
- var _useViewer = useViewer(),
104
- menuSize = _useViewer.menuSize;
105
-
106
91
  var _useScreenRenderConte = useScreenRenderContext(),
107
92
  isView = _useScreenRenderConte.isView,
108
93
  isPreview = _useScreenRenderConte.isPreview,
@@ -111,8 +96,18 @@ var ImageScreen = function ImageScreen(_ref) {
111
96
  isStatic = _useScreenRenderConte.isStatic,
112
97
  isCapture = _useScreenRenderConte.isCapture;
113
98
 
114
- var backgroundPlaying = current && (isView || isEdit);
115
- var mediaShouldLoad = current || active;
99
+ var _useViewerContext = useViewerContext(),
100
+ viewerTopHeight = _useViewerContext.topHeight,
101
+ viewerBottomHeight = _useViewerContext.bottomHeight,
102
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
103
+
104
+ var _useViewerWebView = useViewerWebView(),
105
+ openWebView = _useViewerWebView.open;
106
+
107
+ var _usePlaybackContext = usePlaybackContext(),
108
+ muted = _usePlaybackContext.muted;
109
+
110
+ var mediaRef = usePlaybackMediaRef(current);
116
111
  var hasImage = image !== null;
117
112
  var hasTitle = isTextFilled(title);
118
113
  var hasText = isTextFilled(text);
@@ -123,11 +118,18 @@ var ImageScreen = function ImageScreen(_ref) {
123
118
  ready = _useState2[0],
124
119
  setReady = _useState2[1];
125
120
 
121
+ var backgroundPlaying = current && (isView || isEdit);
122
+ var mediaShouldLoad = current || active;
126
123
  var transitionPlaying = current && ready;
127
124
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
128
125
  var onImageLoaded = useCallback(function () {
129
126
  setReady(true);
130
127
  }, [setReady]);
128
+ var finalImageFit = useMemo(function () {
129
+ return {
130
+ fit: imageFit || defaultImageFit
131
+ };
132
+ }, [imageFit, defaultImageFit]);
131
133
  var isReversed = layout === 'reverse' || layout === 'card-reverse';
132
134
  var isTitleTop = layout === 'title-top';
133
135
  var isCard = layout === 'card' || layout === 'card-reverse';
@@ -135,13 +137,10 @@ var ImageScreen = function ImageScreen(_ref) {
135
137
  var isFullscreen = layout === 'fullscreen';
136
138
  var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
137
139
 
138
- var _useResizeObserver = useResizeObserver(),
139
- imageCntRef = _useResizeObserver.ref,
140
- contentRect = _useResizeObserver.entry.contentRect;
141
-
142
- var _ref2 = contentRect || {},
143
- imageWidth = _ref2.width,
144
- imageHeight = _ref2.height;
140
+ var _useDimensionObserver = useDimensionObserver(),
141
+ imageCntRef = _useDimensionObserver.ref,
142
+ imageWidth = _useDimensionObserver.width,
143
+ imageHeight = _useDimensionObserver.height;
145
144
 
146
145
  var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
147
146
  var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
@@ -180,6 +179,7 @@ var ImageScreen = function ImageScreen(_ref) {
180
179
  height: imageHeight,
181
180
  resolution: resolution,
182
181
  playing: backgroundPlaying,
182
+ muted: muted,
183
183
  active: active,
184
184
  shouldLoad: mediaShouldLoad,
185
185
  onLoaded: onImageLoaded
@@ -257,39 +257,42 @@ var ImageScreen = function ImageScreen(_ref) {
257
257
 
258
258
  if (!isPlaceholder && hasCallToAction) {
259
259
  items.push( /*#__PURE__*/React.createElement("div", {
260
- style: {
261
- margin: -finalSpacing / 2,
262
- marginTop: 5
260
+ className: styles.callToAction,
261
+ style: isFullscreen || isCardReverse ? {
262
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
263
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
264
+ paddingTop: spacing / 2,
265
+ paddingBottom: spacing / 2,
266
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
267
+ } : {
268
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
269
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
270
+ paddingTop: isCard ? spacing / 2 : null,
271
+ paddingBottom: isCard ? spacing / 2 : null
263
272
  },
264
273
  key: "call-to-action"
265
- }, /*#__PURE__*/React.createElement(CallToAction, {
266
- className: styles.callToAction,
267
- callToAction: callToAction,
274
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
268
275
  animationDisabled: isPreview,
269
276
  focusable: current && isView,
270
- screenSize: {
271
- width: width,
272
- height: height
273
- },
274
- enableInteraction: enableInteraction,
275
- disableInteraction: disableInteraction
276
- })));
277
+ openWebView: openWebView
278
+ }))));
277
279
  }
278
280
 
279
- var paddingBottom = finalSpacing / 2;
280
- var paddingTop = (menuOverScreen && !isPreview ? menuSize : 0) + finalSpacing / 2;
281
+ var paddingBottom = (!isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
282
+ var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
281
283
 
282
284
  if (isCard || isFullscreen) {
283
285
  paddingTop = 0;
286
+ paddingBottom = 0;
284
287
  }
285
288
 
286
289
  if (isCardReverse) {
287
- paddingTop = menuOverScreen ? menuSize : finalSpacing / 2;
288
- paddingBottom = 0;
290
+ paddingTop = !isPreview ? viewerTopHeight : 0;
291
+ paddingBottom = !isPreview ? viewerBottomHeight : 0;
289
292
  }
290
293
 
291
294
  return /*#__PURE__*/React.createElement("div", {
292
- className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isReversed, isReversed), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles.isCard, isCard), _defineProperty(_ref3, styles.isCardReverse, isCardReverse), _defineProperty(_ref3, styles.isFullscreen, isFullscreen), _ref3)]),
295
+ className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.isReversed, isReversed), _defineProperty(_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref2, styles.isCard, isCard), _defineProperty(_ref2, styles.isCardReverse, isCardReverse), _defineProperty(_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
293
296
  "data-screen-ready": ready
294
297
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
295
298
  background: background,
@@ -297,7 +300,9 @@ var ImageScreen = function ImageScreen(_ref) {
297
300
  height: height,
298
301
  resolution: resolution,
299
302
  playing: backgroundPlaying,
300
- shouldLoad: mediaShouldLoad
303
+ muted: muted,
304
+ shouldLoad: mediaShouldLoad,
305
+ mediaRef: mediaRef
301
306
  }) : null, /*#__PURE__*/React.createElement(Container, {
302
307
  width: width,
303
308
  height: height
package/lib/index.js CHANGED
@@ -43,7 +43,7 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
43
43
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
44
44
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
45
45
 
46
- var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","callToAction":"micromag-screen-image-callToAction","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","isFullscreen":"micromag-screen-image-isFullscreen"};
46
+ var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
47
47
 
48
48
  var propTypes = {
49
49
  layout: PropTypes__default["default"].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -62,8 +62,6 @@ var propTypes = {
62
62
  current: PropTypes__default["default"].bool,
63
63
  active: PropTypes__default["default"].bool,
64
64
  transitions: core.PropTypes.transitions,
65
- enableInteraction: PropTypes__default["default"].func,
66
- disableInteraction: PropTypes__default["default"].func,
67
65
  className: PropTypes__default["default"].string
68
66
  };
69
67
  var defaultProps = {
@@ -83,13 +81,11 @@ var defaultProps = {
83
81
  current: true,
84
82
  active: true,
85
83
  transitions: null,
86
- enableInteraction: null,
87
- disableInteraction: null,
88
84
  className: null
89
85
  };
90
86
 
91
87
  var ImageScreen = function ImageScreen(_ref) {
92
- var _ref3;
88
+ var _ref2;
93
89
 
94
90
  var layout = _ref.layout,
95
91
  image = _ref.image,
@@ -107,24 +103,13 @@ var ImageScreen = function ImageScreen(_ref) {
107
103
  current = _ref.current,
108
104
  active = _ref.active,
109
105
  transitions = _ref.transitions,
110
- enableInteraction = _ref.enableInteraction,
111
- disableInteraction = _ref.disableInteraction,
112
106
  className = _ref.className;
113
- var finalImageFit = React.useMemo(function () {
114
- return {
115
- fit: imageFit || defaultImageFit
116
- };
117
- }, [imageFit, defaultImageFit]);
118
107
 
119
108
  var _useScreenSize = contexts.useScreenSize(),
120
109
  width = _useScreenSize.width,
121
110
  height = _useScreenSize.height,
122
- menuOverScreen = _useScreenSize.menuOverScreen,
123
111
  resolution = _useScreenSize.resolution;
124
112
 
125
- var _useViewer = contexts.useViewer(),
126
- menuSize = _useViewer.menuSize;
127
-
128
113
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
129
114
  isView = _useScreenRenderConte.isView,
130
115
  isPreview = _useScreenRenderConte.isPreview,
@@ -133,8 +118,18 @@ var ImageScreen = function ImageScreen(_ref) {
133
118
  isStatic = _useScreenRenderConte.isStatic,
134
119
  isCapture = _useScreenRenderConte.isCapture;
135
120
 
136
- var backgroundPlaying = current && (isView || isEdit);
137
- var mediaShouldLoad = current || active;
121
+ var _useViewerContext = contexts.useViewerContext(),
122
+ viewerTopHeight = _useViewerContext.topHeight,
123
+ viewerBottomHeight = _useViewerContext.bottomHeight,
124
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
125
+
126
+ var _useViewerWebView = contexts.useViewerWebView(),
127
+ openWebView = _useViewerWebView.open;
128
+
129
+ var _usePlaybackContext = contexts.usePlaybackContext(),
130
+ muted = _usePlaybackContext.muted;
131
+
132
+ var mediaRef = contexts.usePlaybackMediaRef(current);
138
133
  var hasImage = image !== null;
139
134
  var hasTitle = utils.isTextFilled(title);
140
135
  var hasText = utils.isTextFilled(text);
@@ -145,11 +140,18 @@ var ImageScreen = function ImageScreen(_ref) {
145
140
  ready = _useState2[0],
146
141
  setReady = _useState2[1];
147
142
 
143
+ var backgroundPlaying = current && (isView || isEdit);
144
+ var mediaShouldLoad = current || active;
148
145
  var transitionPlaying = current && ready;
149
146
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
150
147
  var onImageLoaded = React.useCallback(function () {
151
148
  setReady(true);
152
149
  }, [setReady]);
150
+ var finalImageFit = React.useMemo(function () {
151
+ return {
152
+ fit: imageFit || defaultImageFit
153
+ };
154
+ }, [imageFit, defaultImageFit]);
153
155
  var isReversed = layout === 'reverse' || layout === 'card-reverse';
154
156
  var isTitleTop = layout === 'title-top';
155
157
  var isCard = layout === 'card' || layout === 'card-reverse';
@@ -157,13 +159,10 @@ var ImageScreen = function ImageScreen(_ref) {
157
159
  var isFullscreen = layout === 'fullscreen';
158
160
  var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
159
161
 
160
- var _useResizeObserver = hooks.useResizeObserver(),
161
- imageCntRef = _useResizeObserver.ref,
162
- contentRect = _useResizeObserver.entry.contentRect;
163
-
164
- var _ref2 = contentRect || {},
165
- imageWidth = _ref2.width,
166
- imageHeight = _ref2.height;
162
+ var _useDimensionObserver = hooks.useDimensionObserver(),
163
+ imageCntRef = _useDimensionObserver.ref,
164
+ imageWidth = _useDimensionObserver.width,
165
+ imageHeight = _useDimensionObserver.height;
167
166
 
168
167
  var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
169
168
  var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
@@ -202,6 +201,7 @@ var ImageScreen = function ImageScreen(_ref) {
202
201
  height: imageHeight,
203
202
  resolution: resolution,
204
203
  playing: backgroundPlaying,
204
+ muted: muted,
205
205
  active: active,
206
206
  shouldLoad: mediaShouldLoad,
207
207
  onLoaded: onImageLoaded
@@ -279,39 +279,42 @@ var ImageScreen = function ImageScreen(_ref) {
279
279
 
280
280
  if (!isPlaceholder && hasCallToAction) {
281
281
  items.push( /*#__PURE__*/React__default["default"].createElement("div", {
282
- style: {
283
- margin: -finalSpacing / 2,
284
- marginTop: 5
282
+ className: styles.callToAction,
283
+ style: isFullscreen || isCardReverse ? {
284
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
285
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
286
+ paddingTop: spacing / 2,
287
+ paddingBottom: spacing / 2,
288
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
289
+ } : {
290
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
291
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
292
+ paddingTop: isCard ? spacing / 2 : null,
293
+ paddingBottom: isCard ? spacing / 2 : null
285
294
  },
286
295
  key: "call-to-action"
287
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
288
- className: styles.callToAction,
289
- callToAction: callToAction,
296
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
290
297
  animationDisabled: isPreview,
291
298
  focusable: current && isView,
292
- screenSize: {
293
- width: width,
294
- height: height
295
- },
296
- enableInteraction: enableInteraction,
297
- disableInteraction: disableInteraction
298
- })));
299
+ openWebView: openWebView
300
+ }))));
299
301
  }
300
302
 
301
- var paddingBottom = finalSpacing / 2;
302
- var paddingTop = (menuOverScreen && !isPreview ? menuSize : 0) + finalSpacing / 2;
303
+ var paddingBottom = (!isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
304
+ var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
303
305
 
304
306
  if (isCard || isFullscreen) {
305
307
  paddingTop = 0;
308
+ paddingBottom = 0;
306
309
  }
307
310
 
308
311
  if (isCardReverse) {
309
- paddingTop = menuOverScreen ? menuSize : finalSpacing / 2;
310
- paddingBottom = 0;
312
+ paddingTop = !isPreview ? viewerTopHeight : 0;
313
+ paddingBottom = !isPreview ? viewerBottomHeight : 0;
311
314
  }
312
315
 
313
316
  return /*#__PURE__*/React__default["default"].createElement("div", {
314
- className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isReversed, isReversed), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles.isCard, isCard), _defineProperty__default["default"](_ref3, styles.isCardReverse, isCardReverse), _defineProperty__default["default"](_ref3, styles.isFullscreen, isFullscreen), _ref3)]),
317
+ className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.isReversed, isReversed), _defineProperty__default["default"](_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref2, styles.isCard, isCard), _defineProperty__default["default"](_ref2, styles.isCardReverse, isCardReverse), _defineProperty__default["default"](_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
315
318
  "data-screen-ready": ready
316
319
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
317
320
  background: background,
@@ -319,7 +322,9 @@ var ImageScreen = function ImageScreen(_ref) {
319
322
  height: height,
320
323
  resolution: resolution,
321
324
  playing: backgroundPlaying,
322
- shouldLoad: mediaShouldLoad
325
+ muted: muted,
326
+ shouldLoad: mediaShouldLoad,
327
+ mediaRef: mediaRef
323
328
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
324
329
  width: width,
325
330
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.3.148",
3
+ "version": "0.3.153",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,15 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.148",
53
- "@micromag/element-background": "^0.3.148",
54
- "@micromag/element-call-to-action": "^0.3.148",
55
- "@micromag/element-container": "^0.3.148",
56
- "@micromag/element-heading": "^0.3.148",
57
- "@micromag/element-layout": "^0.3.148",
58
- "@micromag/element-text": "^0.3.148",
59
- "@micromag/element-visual": "^0.3.148",
60
- "@micromag/transforms": "^0.3.148",
52
+ "@micromag/core": "^0.3.153",
53
+ "@micromag/element-background": "^0.3.153",
54
+ "@micromag/element-call-to-action": "^0.3.153",
55
+ "@micromag/element-container": "^0.3.153",
56
+ "@micromag/element-heading": "^0.3.153",
57
+ "@micromag/element-layout": "^0.3.153",
58
+ "@micromag/element-text": "^0.3.153",
59
+ "@micromag/element-visual": "^0.3.153",
60
+ "@micromag/transforms": "^0.3.153",
61
61
  "classnames": "^2.2.6",
62
62
  "lodash": "^4.17.21",
63
63
  "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
70
+ "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
71
71
  }