@micromag/screen-quote 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 (3) hide show
  1. package/es/index.js +31 -27
  2. package/lib/index.js +30 -26
  3. package/package.json +10 -10
package/es/index.js CHANGED
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
5
5
  import React from 'react';
6
6
  import { PropTypes as PropTypes$1 } from '@micromag/core';
7
7
  import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
8
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
8
+ import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
9
9
  import { isTextFilled } from '@micromag/core/utils';
10
10
  import Background from '@micromag/element-background';
11
11
  import CallToAction from '@micromag/element-call-to-action';
@@ -30,8 +30,6 @@ var propTypes = {
30
30
  active: PropTypes.bool,
31
31
  transitions: PropTypes$1.transitions,
32
32
  transitionStagger: PropTypes.number,
33
- enableInteraction: PropTypes.func,
34
- disableInteraction: PropTypes.func,
35
33
  className: PropTypes.string
36
34
  };
37
35
  var defaultProps = {
@@ -45,13 +43,11 @@ var defaultProps = {
45
43
  active: true,
46
44
  transitions: null,
47
45
  transitionStagger: 100,
48
- enableInteraction: null,
49
- disableInteraction: null,
50
46
  className: null
51
47
  };
52
48
 
53
49
  var QuoteScreen = function QuoteScreen(_ref) {
54
- var _ref3;
50
+ var _ref4;
55
51
 
56
52
  var layout = _ref.layout,
57
53
  quote = _ref.quote,
@@ -63,19 +59,13 @@ var QuoteScreen = function QuoteScreen(_ref) {
63
59
  active = _ref.active,
64
60
  transitions = _ref.transitions,
65
61
  transitionStagger = _ref.transitionStagger,
66
- enableInteraction = _ref.enableInteraction,
67
- disableInteraction = _ref.disableInteraction,
68
62
  className = _ref.className;
69
63
 
70
64
  var _useScreenSize = useScreenSize(),
71
65
  width = _useScreenSize.width,
72
66
  height = _useScreenSize.height,
73
- menuOverScreen = _useScreenSize.menuOverScreen,
74
67
  resolution = _useScreenSize.resolution;
75
68
 
76
- var _useViewer = useViewer(),
77
- menuSize = _useViewer.menuSize;
78
-
79
69
  var _useScreenRenderConte = useScreenRenderContext(),
80
70
  isView = _useScreenRenderConte.isView,
81
71
  isPreview = _useScreenRenderConte.isPreview,
@@ -84,6 +74,18 @@ var QuoteScreen = function QuoteScreen(_ref) {
84
74
  isStatic = _useScreenRenderConte.isStatic,
85
75
  isCapture = _useScreenRenderConte.isCapture;
86
76
 
77
+ var _useViewerContext = useViewerContext(),
78
+ viewerTopHeight = _useViewerContext.topHeight,
79
+ viewerBottomHeight = _useViewerContext.bottomHeight,
80
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
81
+
82
+ var _useViewerWebView = useViewerWebView(),
83
+ openWebView = _useViewerWebView.open;
84
+
85
+ var _usePlaybackContext = usePlaybackContext(),
86
+ muted = _usePlaybackContext.muted;
87
+
88
+ var mediaRef = usePlaybackMediaRef(current);
87
89
  var hasQuote = isTextFilled(quote);
88
90
  var hasAuthor = isTextFilled(author);
89
91
  var isSplitted = layout === 'split';
@@ -95,7 +97,11 @@ var QuoteScreen = function QuoteScreen(_ref) {
95
97
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
96
98
  var backgroundPlaying = current && (isView || isEdit);
97
99
  var mediaShouldLoad = current || active;
98
- var hasCallToAction = callToAction !== null && callToAction.active === true;
100
+
101
+ var _ref2 = callToAction || {},
102
+ _ref2$active = _ref2.active,
103
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
104
+
99
105
  var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
100
106
  key: "spacer-cta-top"
101
107
  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -132,25 +138,20 @@ var QuoteScreen = function QuoteScreen(_ref) {
132
138
  key: "spacer-cta-bottom"
133
139
  }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
134
140
  style: {
135
- margin: -spacing,
136
- marginTop: 0
141
+ paddingTop: spacing,
142
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
143
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
137
144
  },
138
145
  key: "call-to-action"
139
- }, /*#__PURE__*/React.createElement(CallToAction, {
140
- callToAction: callToAction,
146
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
141
147
  animationDisabled: isPreview,
142
148
  focusable: current && isView,
143
- screenSize: {
144
- width: width,
145
- height: height
146
- },
147
- enableInteraction: enableInteraction,
148
- disableInteraction: disableInteraction
149
- })) : null].filter(function (el) {
149
+ openWebView: openWebView
150
+ }))) : null].filter(function (el) {
150
151
  return el !== null;
151
152
  });
152
153
  return /*#__PURE__*/React.createElement("div", {
153
- className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
154
+ className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
154
155
  "data-screen-ready": true
155
156
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
156
157
  background: background,
@@ -158,7 +159,9 @@ var QuoteScreen = function QuoteScreen(_ref) {
158
159
  height: height,
159
160
  resolution: resolution,
160
161
  playing: backgroundPlaying,
161
- shouldLoad: mediaShouldLoad
162
+ muted: muted,
163
+ shouldLoad: mediaShouldLoad,
164
+ mediaRef: mediaRef
162
165
  }) : null, /*#__PURE__*/React.createElement(Container, {
163
166
  width: width,
164
167
  height: height
@@ -168,7 +171,8 @@ var QuoteScreen = function QuoteScreen(_ref) {
168
171
  verticalAlign: verticalAlign,
169
172
  style: !isPlaceholder ? {
170
173
  padding: spacing,
171
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
174
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
175
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
172
176
  } : null
173
177
  }, /*#__PURE__*/React.createElement(TransitionsStagger, {
174
178
  transitions: transitions,
package/lib/index.js CHANGED
@@ -49,8 +49,6 @@ var propTypes = {
49
49
  active: PropTypes__default["default"].bool,
50
50
  transitions: core.PropTypes.transitions,
51
51
  transitionStagger: PropTypes__default["default"].number,
52
- enableInteraction: PropTypes__default["default"].func,
53
- disableInteraction: PropTypes__default["default"].func,
54
52
  className: PropTypes__default["default"].string
55
53
  };
56
54
  var defaultProps = {
@@ -64,13 +62,11 @@ var defaultProps = {
64
62
  active: true,
65
63
  transitions: null,
66
64
  transitionStagger: 100,
67
- enableInteraction: null,
68
- disableInteraction: null,
69
65
  className: null
70
66
  };
71
67
 
72
68
  var QuoteScreen = function QuoteScreen(_ref) {
73
- var _ref3;
69
+ var _ref4;
74
70
 
75
71
  var layout = _ref.layout,
76
72
  quote = _ref.quote,
@@ -82,19 +78,13 @@ var QuoteScreen = function QuoteScreen(_ref) {
82
78
  active = _ref.active,
83
79
  transitions = _ref.transitions,
84
80
  transitionStagger = _ref.transitionStagger,
85
- enableInteraction = _ref.enableInteraction,
86
- disableInteraction = _ref.disableInteraction,
87
81
  className = _ref.className;
88
82
 
89
83
  var _useScreenSize = contexts.useScreenSize(),
90
84
  width = _useScreenSize.width,
91
85
  height = _useScreenSize.height,
92
- menuOverScreen = _useScreenSize.menuOverScreen,
93
86
  resolution = _useScreenSize.resolution;
94
87
 
95
- var _useViewer = contexts.useViewer(),
96
- menuSize = _useViewer.menuSize;
97
-
98
88
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
99
89
  isView = _useScreenRenderConte.isView,
100
90
  isPreview = _useScreenRenderConte.isPreview,
@@ -103,6 +93,18 @@ var QuoteScreen = function QuoteScreen(_ref) {
103
93
  isStatic = _useScreenRenderConte.isStatic,
104
94
  isCapture = _useScreenRenderConte.isCapture;
105
95
 
96
+ var _useViewerContext = contexts.useViewerContext(),
97
+ viewerTopHeight = _useViewerContext.topHeight,
98
+ viewerBottomHeight = _useViewerContext.bottomHeight,
99
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
100
+
101
+ var _useViewerWebView = contexts.useViewerWebView(),
102
+ openWebView = _useViewerWebView.open;
103
+
104
+ var _usePlaybackContext = contexts.usePlaybackContext(),
105
+ muted = _usePlaybackContext.muted;
106
+
107
+ var mediaRef = contexts.usePlaybackMediaRef(current);
106
108
  var hasQuote = utils.isTextFilled(quote);
107
109
  var hasAuthor = utils.isTextFilled(author);
108
110
  var isSplitted = layout === 'split';
@@ -114,7 +116,11 @@ var QuoteScreen = function QuoteScreen(_ref) {
114
116
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
115
117
  var backgroundPlaying = current && (isView || isEdit);
116
118
  var mediaShouldLoad = current || active;
117
- var hasCallToAction = callToAction !== null && callToAction.active === true;
119
+
120
+ var _ref2 = callToAction || {},
121
+ _ref2$active = _ref2.active,
122
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
123
+
118
124
  var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
119
125
  key: "spacer-cta-top"
120
126
  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -151,25 +157,20 @@ var QuoteScreen = function QuoteScreen(_ref) {
151
157
  key: "spacer-cta-bottom"
152
158
  }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
153
159
  style: {
154
- margin: -spacing,
155
- marginTop: 0
160
+ paddingTop: spacing,
161
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
162
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
156
163
  },
157
164
  key: "call-to-action"
158
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
159
- callToAction: callToAction,
165
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
160
166
  animationDisabled: isPreview,
161
167
  focusable: current && isView,
162
- screenSize: {
163
- width: width,
164
- height: height
165
- },
166
- enableInteraction: enableInteraction,
167
- disableInteraction: disableInteraction
168
- })) : null].filter(function (el) {
168
+ openWebView: openWebView
169
+ }))) : null].filter(function (el) {
169
170
  return el !== null;
170
171
  });
171
172
  return /*#__PURE__*/React__default["default"].createElement("div", {
172
- className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
173
+ className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
173
174
  "data-screen-ready": true
174
175
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
175
176
  background: background,
@@ -177,7 +178,9 @@ var QuoteScreen = function QuoteScreen(_ref) {
177
178
  height: height,
178
179
  resolution: resolution,
179
180
  playing: backgroundPlaying,
180
- shouldLoad: mediaShouldLoad
181
+ muted: muted,
182
+ shouldLoad: mediaShouldLoad,
183
+ mediaRef: mediaRef
181
184
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
182
185
  width: width,
183
186
  height: height
@@ -187,7 +190,8 @@ var QuoteScreen = function QuoteScreen(_ref) {
187
190
  verticalAlign: verticalAlign,
188
191
  style: !isPlaceholder ? {
189
192
  padding: spacing,
190
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
193
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
194
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
191
195
  } : null
192
196
  }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
193
197
  transitions: transitions,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quote",
3
- "version": "0.3.150",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,14 +49,14 @@
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-layout": "^0.3.150",
57
- "@micromag/element-quote": "^0.3.150",
58
- "@micromag/element-text": "^0.3.150",
59
- "@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-layout": "^0.3.152",
57
+ "@micromag/element-quote": "^0.3.152",
58
+ "@micromag/element-text": "^0.3.152",
59
+ "@micromag/transforms": "^0.3.152",
60
60
  "classnames": "^2.2.6",
61
61
  "lodash": "^4.17.21",
62
62
  "prop-types": "^15.7.2",
@@ -66,5 +66,5 @@
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
69
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
70
70
  }