@micromag/screen-contribution 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 +38 -34
  3. package/lib/index.js +36 -32
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-contribution-container .micromag-screen-contribution-content{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff}.micromag-screen-contribution-container{position:relative}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;width:100%;padding:4px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{position:absolute;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;opacity:0;pointer-events:none}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;opacity:0}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{position:absolute;width:100%;height:0;overflow:hidden}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{padding-top:20px;border-top:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{position:relative;height:auto;overflow:visible}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-content{padding:10px}
1
+ .micromag-screen-contribution-container .micromag-screen-contribution-content{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff}.micromag-screen-contribution-container{position:relative}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;width:100%;padding:4px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{position:absolute;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;opacity:0;pointer-events:none}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;opacity:0}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{position:absolute;width:100%;height:0;overflow:hidden}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{padding-top:20px;border-top:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-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-contribution-container .micromag-screen-contribution-callToAction.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{position:relative;height:auto;overflow:visible}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-content{padding:10px}
package/es/index.js CHANGED
@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
9
9
  import React, { useRef, useState, useCallback, useEffect } from 'react';
10
10
  import { PropTypes as PropTypes$1 } from '@micromag/core';
11
11
  import { ScreenElement, Transitions } from '@micromag/core/components';
12
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
13
- import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
12
+ import { useScreenSize, useViewerContext, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
13
+ import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
14
14
  import { isTextFilled, isLabelFilled, getStyleFromColor } from '@micromag/core/utils';
15
15
  import { useContributionCreate, useContributions } from '@micromag/data';
16
16
  import Background from '@micromag/element-background';
@@ -22,7 +22,7 @@ import Scroll from '@micromag/element-scroll';
22
22
  import Text from '@micromag/element-text';
23
23
  import TextInput from '@micromag/element-text-input';
24
24
 
25
- var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","buttonSubmit":"micromag-screen-contribution-buttonSubmit","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
25
+ var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","buttonSubmit":"micromag-screen-contribution-buttonSubmit","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
26
26
 
27
27
  var propTypes = {
28
28
  id: PropTypes.string,
@@ -42,8 +42,6 @@ var propTypes = {
42
42
  transitionStagger: PropTypes.number,
43
43
  resizeTransitionDuration: PropTypes.number,
44
44
  type: PropTypes.string,
45
- enableInteraction: PropTypes.func,
46
- disableInteraction: PropTypes.func,
47
45
  className: PropTypes.string
48
46
  };
49
47
  var defaultProps = {
@@ -64,8 +62,6 @@ var defaultProps = {
64
62
  transitionStagger: 100,
65
63
  resizeTransitionDuration: 750,
66
64
  type: null,
67
- enableInteraction: null,
68
- disableInteraction: null,
69
65
  className: null
70
66
  };
71
67
 
@@ -89,8 +85,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
89
85
  transitionStagger = _ref.transitionStagger,
90
86
  resizeTransitionDuration = _ref.resizeTransitionDuration,
91
87
  type = _ref.type,
92
- enableInteraction = _ref.enableInteraction,
93
- disableInteraction = _ref.disableInteraction,
94
88
  className = _ref.className;
95
89
  var screenId = id || 'screen-id';
96
90
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -98,11 +92,12 @@ var ContributionScreen = function ContributionScreen(_ref) {
98
92
  var _useScreenSize = useScreenSize(),
99
93
  width = _useScreenSize.width,
100
94
  height = _useScreenSize.height,
101
- menuOverScreen = _useScreenSize.menuOverScreen,
102
95
  resolution = _useScreenSize.resolution;
103
96
 
104
- var _useViewer = useViewer(),
105
- menuSize = _useViewer.menuSize;
97
+ var _useViewerContext = useViewerContext(),
98
+ viewerTopHeight = _useViewerContext.topHeight,
99
+ viewerBottomHeight = _useViewerContext.bottomHeight,
100
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
106
101
 
107
102
  var _useScreenRenderConte = useScreenRenderContext(),
108
103
  isView = _useScreenRenderConte.isView,
@@ -112,11 +107,23 @@ var ContributionScreen = function ContributionScreen(_ref) {
112
107
  isStatic = _useScreenRenderConte.isStatic,
113
108
  isCapture = _useScreenRenderConte.isCapture;
114
109
 
110
+ var _useViewerWebView = useViewerWebView(),
111
+ openWebView = _useViewerWebView.open;
112
+
113
+ var _usePlaybackContext = usePlaybackContext(),
114
+ muted = _usePlaybackContext.muted;
115
+
116
+ var mediaRef = usePlaybackMediaRef(current);
115
117
  var backgroundPlaying = current && (isView || isEdit);
116
118
  var mediaShouldLoad = current || active;
117
119
  var transitionPlaying = current;
118
120
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
119
121
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
122
+
123
+ var _ref2 = callToAction || {},
124
+ _ref2$active = _ref2.active,
125
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
126
+
120
127
  var hasTitle = isTextFilled(title);
121
128
  var hasNameLabel = isLabelFilled(name);
122
129
  var hasMessageLabel = isLabelFilled(message);
@@ -190,8 +197,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
190
197
  }
191
198
  }, [trackScreenEvent, userName]); // Call to Action
192
199
 
193
- var hasCallToAction = callToAction !== null && callToAction.active === true;
194
-
195
200
  var _useState9 = useState(false),
196
201
  _useState10 = _slicedToArray(_useState9, 2),
197
202
  scrolledBottom = _useState10[0],
@@ -199,13 +204,10 @@ var ContributionScreen = function ContributionScreen(_ref) {
199
204
 
200
205
  var swipeUpLinkActive = scrolledBottom && submitState === 4;
201
206
 
202
- var _useResizeObserver = useResizeObserver(),
203
- callToActionRef = _useResizeObserver.ref,
204
- callToActionRect = _useResizeObserver.entry.contentRect;
205
-
206
- var _ref2 = callToActionRect || {},
207
- _ref2$height = _ref2.height,
208
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
207
+ var _useDimensionObserver = useDimensionObserver(),
208
+ callToActionRef = _useDimensionObserver.ref,
209
+ _useDimensionObserver2 = _useDimensionObserver.height,
210
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
209
211
 
210
212
  var onScrolledBottom = useCallback(function (_ref3) {
211
213
  var initial = _ref3.initial;
@@ -425,7 +427,9 @@ var ContributionScreen = function ContributionScreen(_ref) {
425
427
  height: height,
426
428
  resolution: resolution,
427
429
  playing: backgroundPlaying,
428
- shouldLoad: mediaShouldLoad
430
+ muted: muted,
431
+ shouldLoad: mediaShouldLoad,
432
+ mediaRef: mediaRef
429
433
  }) : null, /*#__PURE__*/React.createElement(Container, {
430
434
  width: width,
431
435
  height: height
@@ -433,27 +437,27 @@ var ContributionScreen = function ContributionScreen(_ref) {
433
437
  className: styles.content,
434
438
  style: !isPlaceholder ? {
435
439
  padding: spacing,
436
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
440
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
441
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
437
442
  } : null
438
443
  }, /*#__PURE__*/React.createElement(Scroll, {
439
444
  verticalAlign: layout,
440
445
  disabled: scrollingDisabled,
441
446
  onScrolledBottom: onScrolledBottom,
442
447
  onScrolledNotBottom: onScrolledNotBottom
443
- }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
448
+ }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
444
449
  ref: callToActionRef,
445
- className: styles.callToAction,
446
- disabled: !swipeUpLinkActive,
450
+ className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !swipeUpLinkActive)]),
451
+ style: {
452
+ padding: Math.max(viewerBottomSidesWidth, spacing / 2),
453
+ paddingTop: 0,
454
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing / 2
455
+ }
456
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
447
457
  animationDisabled: isPreview,
448
- callToAction: callToAction,
449
458
  focusable: current && isView,
450
- screenSize: {
451
- width: width,
452
- height: height
453
- },
454
- enableInteraction: enableInteraction,
455
- disableInteraction: disableInteraction
456
- }) : null)));
459
+ openWebView: openWebView
460
+ }))) : null)));
457
461
  };
458
462
 
459
463
  ContributionScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -43,7 +43,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
43
43
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
44
44
  var TextInput__default = /*#__PURE__*/_interopDefaultLegacy(TextInput);
45
45
 
46
- var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","buttonSubmit":"micromag-screen-contribution-buttonSubmit","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
46
+ var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","buttonSubmit":"micromag-screen-contribution-buttonSubmit","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
47
47
 
48
48
  var propTypes = {
49
49
  id: PropTypes__default["default"].string,
@@ -63,8 +63,6 @@ var propTypes = {
63
63
  transitionStagger: PropTypes__default["default"].number,
64
64
  resizeTransitionDuration: 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 = {
@@ -85,8 +83,6 @@ var defaultProps = {
85
83
  transitionStagger: 100,
86
84
  resizeTransitionDuration: 750,
87
85
  type: null,
88
- enableInteraction: null,
89
- disableInteraction: null,
90
86
  className: null
91
87
  };
92
88
 
@@ -110,8 +106,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
110
106
  transitionStagger = _ref.transitionStagger,
111
107
  resizeTransitionDuration = _ref.resizeTransitionDuration,
112
108
  type = _ref.type,
113
- enableInteraction = _ref.enableInteraction,
114
- disableInteraction = _ref.disableInteraction,
115
109
  className = _ref.className;
116
110
  var screenId = id || 'screen-id';
117
111
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -119,11 +113,12 @@ var ContributionScreen = function ContributionScreen(_ref) {
119
113
  var _useScreenSize = contexts.useScreenSize(),
120
114
  width = _useScreenSize.width,
121
115
  height = _useScreenSize.height,
122
- menuOverScreen = _useScreenSize.menuOverScreen,
123
116
  resolution = _useScreenSize.resolution;
124
117
 
125
- var _useViewer = contexts.useViewer(),
126
- menuSize = _useViewer.menuSize;
118
+ var _useViewerContext = contexts.useViewerContext(),
119
+ viewerTopHeight = _useViewerContext.topHeight,
120
+ viewerBottomHeight = _useViewerContext.bottomHeight,
121
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
127
122
 
128
123
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
129
124
  isView = _useScreenRenderConte.isView,
@@ -133,11 +128,23 @@ var ContributionScreen = function ContributionScreen(_ref) {
133
128
  isStatic = _useScreenRenderConte.isStatic,
134
129
  isCapture = _useScreenRenderConte.isCapture;
135
130
 
131
+ var _useViewerWebView = contexts.useViewerWebView(),
132
+ openWebView = _useViewerWebView.open;
133
+
134
+ var _usePlaybackContext = contexts.usePlaybackContext(),
135
+ muted = _usePlaybackContext.muted;
136
+
137
+ var mediaRef = contexts.usePlaybackMediaRef(current);
136
138
  var backgroundPlaying = current && (isView || isEdit);
137
139
  var mediaShouldLoad = current || active;
138
140
  var transitionPlaying = current;
139
141
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
140
142
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
143
+
144
+ var _ref2 = callToAction || {},
145
+ _ref2$active = _ref2.active,
146
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
147
+
141
148
  var hasTitle = utils.isTextFilled(title);
142
149
  var hasNameLabel = utils.isLabelFilled(name);
143
150
  var hasMessageLabel = utils.isLabelFilled(message);
@@ -211,8 +218,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
211
218
  }
212
219
  }, [trackScreenEvent, userName]); // Call to Action
213
220
 
214
- var hasCallToAction = callToAction !== null && callToAction.active === true;
215
-
216
221
  var _useState9 = React.useState(false),
217
222
  _useState10 = _slicedToArray__default["default"](_useState9, 2),
218
223
  scrolledBottom = _useState10[0],
@@ -220,13 +225,10 @@ var ContributionScreen = function ContributionScreen(_ref) {
220
225
 
221
226
  var swipeUpLinkActive = scrolledBottom && submitState === 4;
222
227
 
223
- var _useResizeObserver = hooks.useResizeObserver(),
224
- callToActionRef = _useResizeObserver.ref,
225
- callToActionRect = _useResizeObserver.entry.contentRect;
226
-
227
- var _ref2 = callToActionRect || {},
228
- _ref2$height = _ref2.height,
229
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
228
+ var _useDimensionObserver = hooks.useDimensionObserver(),
229
+ callToActionRef = _useDimensionObserver.ref,
230
+ _useDimensionObserver2 = _useDimensionObserver.height,
231
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
230
232
 
231
233
  var onScrolledBottom = React.useCallback(function (_ref3) {
232
234
  var initial = _ref3.initial;
@@ -446,7 +448,9 @@ var ContributionScreen = function ContributionScreen(_ref) {
446
448
  height: height,
447
449
  resolution: resolution,
448
450
  playing: backgroundPlaying,
449
- shouldLoad: mediaShouldLoad
451
+ muted: muted,
452
+ shouldLoad: mediaShouldLoad,
453
+ mediaRef: mediaRef
450
454
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
451
455
  width: width,
452
456
  height: height
@@ -454,27 +458,27 @@ var ContributionScreen = function ContributionScreen(_ref) {
454
458
  className: styles.content,
455
459
  style: !isPlaceholder ? {
456
460
  padding: spacing,
457
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
461
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
462
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
458
463
  } : null
459
464
  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
460
465
  verticalAlign: layout,
461
466
  disabled: scrollingDisabled,
462
467
  onScrolledBottom: onScrolledBottom,
463
468
  onScrolledNotBottom: onScrolledNotBottom
464
- }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
469
+ }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
465
470
  ref: callToActionRef,
466
- className: styles.callToAction,
467
- disabled: !swipeUpLinkActive,
471
+ className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !swipeUpLinkActive)]),
472
+ style: {
473
+ padding: Math.max(viewerBottomSidesWidth, spacing / 2),
474
+ paddingTop: 0,
475
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing / 2
476
+ }
477
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
468
478
  animationDisabled: isPreview,
469
- callToAction: callToAction,
470
479
  focusable: current && isView,
471
- screenSize: {
472
- width: width,
473
- height: height
474
- },
475
- enableInteraction: enableInteraction,
476
- disableInteraction: disableInteraction
477
- }) : null)));
480
+ openWebView: openWebView
481
+ }))) : null)));
478
482
  };
479
483
 
480
484
  ContributionScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-contribution",
3
- "version": "0.3.148",
3
+ "version": "0.3.153",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,17 +52,17 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.148",
56
- "@micromag/data": "^0.3.148",
57
- "@micromag/element-background": "^0.3.148",
58
- "@micromag/element-button": "^0.3.148",
59
- "@micromag/element-call-to-action": "^0.3.148",
60
- "@micromag/element-container": "^0.3.148",
61
- "@micromag/element-heading": "^0.3.148",
62
- "@micromag/element-scroll": "^0.3.148",
63
- "@micromag/element-text": "^0.3.148",
64
- "@micromag/element-text-input": "^0.3.148",
65
- "@micromag/transforms": "^0.3.148",
55
+ "@micromag/core": "^0.3.153",
56
+ "@micromag/data": "^0.3.153",
57
+ "@micromag/element-background": "^0.3.153",
58
+ "@micromag/element-button": "^0.3.153",
59
+ "@micromag/element-call-to-action": "^0.3.153",
60
+ "@micromag/element-container": "^0.3.153",
61
+ "@micromag/element-heading": "^0.3.153",
62
+ "@micromag/element-scroll": "^0.3.153",
63
+ "@micromag/element-text": "^0.3.153",
64
+ "@micromag/element-text-input": "^0.3.153",
65
+ "@micromag/transforms": "^0.3.153",
66
66
  "classnames": "^2.2.6",
67
67
  "lodash": "^4.17.21",
68
68
  "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  },
75
- "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
75
+ "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
76
76
  }