@micromag/screen-urbania-trivia 0.3.310 → 0.3.318

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.
@@ -1 +1 @@
1
- .micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-background,.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-coinnerntent,.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-image,.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-placeholder{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-trivia-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-trivia-disabled.micromag-screen-urbania-trivia-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-trivia-hidden.micromag-screen-urbania-trivia-container{display:none;visibility:hidden}.micromag-screen-urbania-trivia-placeholder.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-content{position:relative;padding:6px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-background{z-index:0}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-content{z-index:1}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-empty{width:100%;height:50px;margin:10px auto}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-itemsContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:80%}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-coinnerntent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-videoContainer{position:relative;overflow:hidden}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-video{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-isCustomBackground{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-isAnimated{-webkit-transform:scale(3);-ms-transform:scale(3);transform:scale(3);-webkit-animation:micromag-screen-urbania-trivia-spin 9s linear 0ms infinite;animation:micromag-screen-urbania-trivia-spin 9s linear 0ms infinite}@-webkit-keyframes micromag-screen-urbania-trivia-spin{0%{-webkit-transform:scale(3) rotate(0deg);transform:scale(3) rotate(0deg)}to{-webkit-transform:scale(3) rotate(1turn);transform:scale(3) rotate(1turn)}}@keyframes micromag-screen-urbania-trivia-spin{0%{-webkit-transform:scale(3) rotate(0deg);transform:scale(3) rotate(0deg)}to{-webkit-transform:scale(3) rotate(1turn);transform:scale(3) rotate(1turn)}}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-heading{width:320px;padding:16px 5px 10px;border-top:1px solid #000;border-bottom:1px solid #000;background-color:#fff800;color:#000;font-family:Agrandir Wide,sans-serif;font-size:26px;font-weight:800;text-align:center;text-shadow:-2px -2px 0 #fff;text-transform:uppercase}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-heading.micromag-screen-urbania-trivia-hideHeading{display:none}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-callToAction{padding-bottom:5px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom.micromag-screen-urbania-trivia-visible{opacity:1}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom.micromag-screen-urbania-trivia-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-placeholder{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;mix-blend-mode:normal}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-videoPlaceholder{mix-blend-mode:normal;background-color:#adadad}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottomContent{position:absolute;bottom:0;width:100%;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}
1
+ .micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-background,.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-coinnerntent,.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-image,.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-placeholder{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-trivia-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-trivia-disabled.micromag-screen-urbania-trivia-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-trivia-hidden.micromag-screen-urbania-trivia-container{display:none;visibility:hidden}.micromag-screen-urbania-trivia-placeholder.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-content{padding:6px;position:relative}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-background{z-index:0}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-content{z-index:1}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-empty{height:50px;margin:10px auto;width:100%}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-itemsContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:80%}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-coinnerntent{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;overflow:hidden}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-videoContainer{overflow:hidden;position:relative}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-isCustomBackground{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-isAnimated{-webkit-animation:micromag-screen-urbania-trivia-spin 9s linear 0ms infinite;animation:micromag-screen-urbania-trivia-spin 9s linear 0ms infinite;-webkit-transform:scale(3);-ms-transform:scale(3);transform:scale(3)}@-webkit-keyframes micromag-screen-urbania-trivia-spin{0%{-webkit-transform:scale(3) rotate(0deg);transform:scale(3) rotate(0deg)}to{-webkit-transform:scale(3) rotate(1turn);transform:scale(3) rotate(1turn)}}@keyframes micromag-screen-urbania-trivia-spin{0%{-webkit-transform:scale(3) rotate(0deg);transform:scale(3) rotate(0deg)}to{-webkit-transform:scale(3) rotate(1turn);transform:scale(3) rotate(1turn)}}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-heading{background-color:#fff800;border-bottom:1px solid #000;border-top:1px solid #000;color:#000;font-family:Agrandir Wide,sans-serif;font-size:26px;font-weight:800;padding:16px 5px 10px;text-align:center;text-shadow:-2px -2px 0 #fff;text-transform:uppercase;width:320px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-heading.micromag-screen-urbania-trivia-hideHeading{display:none}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-callToAction{padding-bottom:5px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom.micromag-screen-urbania-trivia-visible{opacity:1}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottom.micromag-screen-urbania-trivia-withGradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-placeholder{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;mix-blend-mode:normal}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-videoPlaceholder{background-color:#adadad;mix-blend-mode:normal}.micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-bottomContent{bottom:0;position:absolute;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-urbania-trivia-container.micromag-screen-urbania-trivia-fullscreen .micromag-screen-urbania-trivia-emptyContainer{height:100%;padding-bottom:0;top:0;-webkit-transform:none;-ms-transform:none;transform:none}
package/es/index.js CHANGED
@@ -19,7 +19,7 @@ import Heading from '@micromag/element-heading';
19
19
  import Image from '@micromag/element-image';
20
20
  import Video from '@micromag/element-video';
21
21
 
22
- var styles = {"container":"micromag-screen-urbania-trivia-container","background":"micromag-screen-urbania-trivia-background","coinnerntent":"micromag-screen-urbania-trivia-coinnerntent","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image","placeholder":"micromag-screen-urbania-trivia-placeholder","disabled":"micromag-screen-urbania-trivia-disabled","hidden":"micromag-screen-urbania-trivia-hidden","content":"micromag-screen-urbania-trivia-content","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","spin":"micromag-screen-urbania-trivia-spin","heading":"micromag-screen-urbania-trivia-heading","hideHeading":"micromag-screen-urbania-trivia-hideHeading","callToAction":"micromag-screen-urbania-trivia-callToAction","bottom":"micromag-screen-urbania-trivia-bottom","visible":"micromag-screen-urbania-trivia-visible","withGradient":"micromag-screen-urbania-trivia-withGradient","mediaControls":"micromag-screen-urbania-trivia-mediaControls","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer"};
22
+ var styles = {"container":"micromag-screen-urbania-trivia-container","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image","placeholder":"micromag-screen-urbania-trivia-placeholder","coinnerntent":"micromag-screen-urbania-trivia-coinnerntent","background":"micromag-screen-urbania-trivia-background","disabled":"micromag-screen-urbania-trivia-disabled","hidden":"micromag-screen-urbania-trivia-hidden","content":"micromag-screen-urbania-trivia-content","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","spin":"micromag-screen-urbania-trivia-spin","heading":"micromag-screen-urbania-trivia-heading","hideHeading":"micromag-screen-urbania-trivia-hideHeading","callToAction":"micromag-screen-urbania-trivia-callToAction","bottom":"micromag-screen-urbania-trivia-bottom","visible":"micromag-screen-urbania-trivia-visible","withGradient":"micromag-screen-urbania-trivia-withGradient","mediaControls":"micromag-screen-urbania-trivia-mediaControls","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer"};
23
23
 
24
24
  var AnimeLinesGrey = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201083.95%201920%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1083.95%2C0h-103.4l-438.55%2C959.95L1083.95%2C109.31V0Zm0%2C295L542.02%2C959.96l541.93-498.87v-166.08Zm0%2C274.99l-541.92%2C389.98%2C541.92-279.64v-110.34Zm0%2C190.53l-541.92%2C199.46%2C541.92-110.89v-88.57Zm0%2C158.17l-541.92%2C41.31%2C541.92%2C41.31v-82.61Zm0%2C152.21l-541.92-110.89%2C541.92%2C199.46v-88.58Zm0%2C168.77l-541.92-279.64%2C541.92%2C389.98v-110.34Zm0%2C219.25l-541.93-498.87%2C541.93%2C664.95v-166.08Zm0%2C351.77L542%2C960.05l438.55%2C959.95h103.4v-109.31ZM854.8%2C0h-138.91l-173.9%2C959.94L854.8%2C0Zm0%2C1920l-312.81-959.94%2C173.9%2C959.94h138.91ZM606.75%2C0h-129.56l64.78%2C959.94L606.75%2C0Zm0%2C1920l-64.78-959.94-64.78%2C959.94h129.56Zm-64.79-960.06L368.06%2C0H229.15l312.81%2C959.94Zm0%2C.12L229.15%2C1920h138.91l173.9-959.94Zm-.01-.11L103.4%2C0H0V109.31L541.94%2C959.95Zm0%2C.11L0%2C1810.69v109.31H103.4l438.55-959.95Zm-.01-.1L0%2C295.01v166.08l541.93%2C498.87Zm0%2C.09L0%2C1458.91v166.08L541.93%2C960.04Zm-.01-.07L0%2C570v110.34l541.92%2C279.63Zm0%2C.02L0%2C760.52v88.57l541.92%2C110.89Zm0%2C.02L0%2C918.69v82.61l541.92-41.31Zm0%2C.02L0%2C1070.9v88.57l541.92-199.46Zm0%2C.02L0%2C1239.66v110.34l541.92-389.97Z%22%20fill%3D%22hsla%280%2C0%25%2C100%25%2C.6%29%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
25
25
 
@@ -71,79 +71,70 @@ var defaultProps = {
71
71
  mediaRef: null,
72
72
  className: null
73
73
  };
74
-
75
74
  var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
76
75
  var _ref9, _ref10;
77
-
78
76
  var layout = _ref.layout,
79
- title = _ref.title,
80
- video = _ref.video,
81
- gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
82
- background = _ref.background,
83
- current = _ref.current,
84
- active = _ref.active,
85
- transitions = _ref.transitions,
86
- spacing = _ref.spacing,
87
- padding = _ref.padding,
88
- customMediaRef = _ref.mediaRef,
89
- className = _ref.className;
77
+ title = _ref.title,
78
+ video = _ref.video,
79
+ gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
80
+ background = _ref.background,
81
+ current = _ref.current,
82
+ active = _ref.active,
83
+ transitions = _ref.transitions,
84
+ spacing = _ref.spacing,
85
+ padding = _ref.padding,
86
+ customMediaRef = _ref.mediaRef,
87
+ className = _ref.className;
90
88
  var trackScreenMedia = useTrackScreenMedia('video');
91
-
92
89
  var _useScreenSize = useScreenSize(),
93
- width = _useScreenSize.width,
94
- height = _useScreenSize.height,
95
- resolution = _useScreenSize.resolution;
96
-
90
+ width = _useScreenSize.width,
91
+ height = _useScreenSize.height,
92
+ resolution = _useScreenSize.resolution;
97
93
  var _useScreenRenderConte = useScreenRenderContext(),
98
- isView = _useScreenRenderConte.isView,
99
- isPreview = _useScreenRenderConte.isPreview,
100
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
101
- isEdit = _useScreenRenderConte.isEdit,
102
- isStatic = _useScreenRenderConte.isStatic,
103
- isCapture = _useScreenRenderConte.isCapture;
104
-
94
+ isView = _useScreenRenderConte.isView,
95
+ isPreview = _useScreenRenderConte.isPreview,
96
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
97
+ isEdit = _useScreenRenderConte.isEdit,
98
+ isStatic = _useScreenRenderConte.isStatic,
99
+ isCapture = _useScreenRenderConte.isCapture;
105
100
  var _useViewerContext = useViewerContext(),
106
- viewerBottomHeight = _useViewerContext.bottomHeight;
107
-
101
+ viewerBottomHeight = _useViewerContext.bottomHeight;
108
102
  var _useViewerNavigation = useViewerNavigation(),
109
- gotoNextScreen = _useViewerNavigation.gotoNextScreen;
110
-
103
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
111
104
  var hasTitle = isTextFilled(title);
112
105
  var backgroundPlaying = current && (isView || isEdit);
113
106
  var mediaShouldLoad = current || active;
114
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
107
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
115
108
 
109
+ // get resized video style props
116
110
  var _ref2 = video || {},
117
- _ref2$autoPlay = _ref2.autoPlay,
118
- autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
119
- _ref2$media = _ref2.media,
120
- videoMedia = _ref2$media === void 0 ? null : _ref2$media,
121
- _ref2$closedCaptions = _ref2.closedCaptions,
122
- closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
123
- _ref2$withSeekBar = _ref2.withSeekBar,
124
- withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
125
- _ref2$withControls = _ref2.withControls,
126
- withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
127
- _ref2$color = _ref2.color,
128
- color = _ref2$color === void 0 ? null : _ref2$color,
129
- _ref2$progressColor = _ref2.progressColor,
130
- progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
131
-
111
+ _ref2$autoPlay = _ref2.autoPlay,
112
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
113
+ _ref2$media = _ref2.media,
114
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
115
+ _ref2$closedCaptions = _ref2.closedCaptions,
116
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
117
+ _ref2$withSeekBar = _ref2.withSeekBar,
118
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
119
+ _ref2$withControls = _ref2.withControls,
120
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
121
+ _ref2$color = _ref2.color,
122
+ color = _ref2$color === void 0 ? null : _ref2$color,
123
+ _ref2$progressColor = _ref2.progressColor,
124
+ progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
132
125
  var _usePlaybackContext = usePlaybackContext(),
133
- playing = _usePlaybackContext.playing,
134
- muted = _usePlaybackContext.muted,
135
- setControls = _usePlaybackContext.setControls,
136
- setControlsTheme = _usePlaybackContext.setControlsTheme,
137
- setPlaying = _usePlaybackContext.setPlaying,
138
- showControls = _usePlaybackContext.showControls,
139
- hideControls = _usePlaybackContext.hideControls;
140
-
126
+ playing = _usePlaybackContext.playing,
127
+ muted = _usePlaybackContext.muted,
128
+ setControls = _usePlaybackContext.setControls,
129
+ setControlsTheme = _usePlaybackContext.setControlsTheme,
130
+ setPlaying = _usePlaybackContext.setPlaying,
131
+ showControls = _usePlaybackContext.showControls,
132
+ hideControls = _usePlaybackContext.hideControls;
141
133
  var mediaRef = usePlaybackMediaRef(current);
142
134
  useEffect(function () {
143
135
  if (!current) {
144
136
  return function () {};
145
137
  }
146
-
147
138
  if (withControls || withSeekBar) {
148
139
  setControls(true);
149
140
  setControlsTheme({
@@ -152,7 +143,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
152
143
  } else {
153
144
  setControls(false);
154
145
  }
155
-
156
146
  return function () {
157
147
  if (withControls || withSeekBar) {
158
148
  setControls(false);
@@ -163,18 +153,17 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
163
153
  if (customMediaRef !== null) {
164
154
  customMediaRef(mediaRef.current);
165
155
  }
166
- }, [mediaRef.current]); // Get api state updates from callback
156
+ }, [mediaRef.current]);
167
157
 
158
+ // Get api state updates from callback
168
159
  var _useState = useState(null),
169
- _useState2 = _slicedToArray(_useState, 2),
170
- currentTime = _useState2[0],
171
- setCurrentTime = _useState2[1];
172
-
160
+ _useState2 = _slicedToArray(_useState, 2),
161
+ currentTime = _useState2[0],
162
+ setCurrentTime = _useState2[1];
173
163
  var _useState3 = useState(null),
174
- _useState4 = _slicedToArray(_useState3, 2),
175
- duration = _useState4[0],
176
- setDuration = _useState4[1];
177
-
164
+ _useState4 = _slicedToArray(_useState3, 2),
165
+ duration = _useState4[0],
166
+ setDuration = _useState4[1];
178
167
  useEffect(function () {
179
168
  if (current && autoPlay && !playing) {
180
169
  setPlaying(true);
@@ -206,25 +195,21 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
206
195
  if (current && shouldGotoNextScreenOnEnd) {
207
196
  gotoNextScreen();
208
197
  }
209
-
210
198
  if (current) {
211
199
  setPlaying(false);
212
200
  }
213
201
  }, [current, shouldGotoNextScreenOnEnd, gotoNextScreen, setPlaying]);
214
202
  var viewerContainer = useViewerContainer();
215
-
216
203
  var _useActivityDetector = useActivityDetector({
217
- element: viewerContainer,
218
- disabled: !current || !isView,
219
- timeout: 2000
220
- }),
221
- activityDetected = _useActivityDetector.detected;
222
-
204
+ element: viewerContainer,
205
+ disabled: !current || !isView,
206
+ timeout: 2000
207
+ }),
208
+ activityDetected = _useActivityDetector.detected;
223
209
  useEffect(function () {
224
210
  if (!current) {
225
211
  return;
226
212
  }
227
-
228
213
  if (activityDetected) {
229
214
  showControls();
230
215
  } else {
@@ -232,22 +217,18 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
232
217
  }
233
218
  }, [activityDetected, showControls, hideControls]);
234
219
  var fullscreen = layout === 'full';
235
-
236
220
  var _ref5 = background || {},
237
- _ref5$image = _ref5.image,
238
- backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
239
- _ref5$video = _ref5.video,
240
- backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
241
-
221
+ _ref5$image = _ref5.image,
222
+ backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
223
+ _ref5$video = _ref5.video,
224
+ backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
242
225
  var isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
243
226
  var isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
244
227
  var hasVideo = video !== null;
245
-
246
228
  var _useState5 = useState(hasVideo),
247
- _useState6 = _slicedToArray(_useState5, 2),
248
- ready = _useState6[0],
249
- setReady = _useState6[1];
250
-
229
+ _useState6 = _slicedToArray(_useState5, 2),
230
+ ready = _useState6[0],
231
+ setReady = _useState6[1];
251
232
  var transitionPlaying = current && ready;
252
233
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
253
234
  var finalVideo = useMemo(function () {
@@ -255,56 +236,47 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
255
236
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
256
237
  }) : null;
257
238
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
258
-
259
239
  var _ref6 = videoMedia || {},
260
- _ref6$metadata = _ref6.metadata,
261
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
262
- _ref6$url = _ref6.url,
263
- videoUrl = _ref6$url === void 0 ? null : _ref6$url,
264
- _ref6$thumbnail_url = _ref6.thumbnail_url,
265
- thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
266
-
240
+ _ref6$metadata = _ref6.metadata,
241
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
242
+ _ref6$url = _ref6.url,
243
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url,
244
+ _ref6$thumbnail_url = _ref6.thumbnail_url,
245
+ thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
267
246
  var hasVideoUrl = videoUrl !== null;
268
-
269
247
  var _ref7 = videoMetadata || {},
270
- _ref7$width = _ref7.width,
271
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
272
- _ref7$height = _ref7.height,
273
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
274
-
248
+ _ref7$width = _ref7.width,
249
+ videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
250
+ _ref7$height = _ref7.height,
251
+ videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
275
252
  var _useDimensionObserver = useDimensionObserver(),
276
- titleRef = _useDimensionObserver.ref,
277
- _useDimensionObserver2 = _useDimensionObserver.height,
278
- titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
279
-
253
+ titleRef = _useDimensionObserver.ref,
254
+ _useDimensionObserver2 = _useDimensionObserver.height,
255
+ titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
280
256
  var videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
281
-
282
257
  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, videoMaxHeight, {
283
- cover: fullscreen
284
- }),
285
- resizedVideoWidth = _getSizeWithinBounds.width,
286
- resizedVideoHeight = _getSizeWithinBounds.height;
287
-
288
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2; // const resizedVideoTop = -(resizedVideoHeight - videoMaxHeight) / 2;
258
+ cover: fullscreen
259
+ }),
260
+ resizedVideoWidth = _getSizeWithinBounds.width,
261
+ resizedVideoHeight = _getSizeWithinBounds.height;
262
+ var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
263
+ // const resizedVideoTop = -(resizedVideoHeight - videoMaxHeight) / 2;
289
264
 
290
265
  var verticalVideo = resizedVideoHeight > resizedVideoWidth;
291
266
  var finalBackground = useMemo(function () {
292
267
  if (isArray(background) && background.length > 0) {
293
268
  return background;
294
269
  }
295
-
296
270
  var _ref8 = background || {},
297
- _ref8$image = _ref8.image,
298
- bgImage = _ref8$image === void 0 ? null : _ref8$image,
299
- _ref8$video = _ref8.video,
300
- bgVideo = _ref8$video === void 0 ? null : _ref8$video,
301
- _ref8$color = _ref8.color,
302
- bgColor = _ref8$color === void 0 ? null : _ref8$color;
303
-
271
+ _ref8$image = _ref8.image,
272
+ bgImage = _ref8$image === void 0 ? null : _ref8$image,
273
+ _ref8$video = _ref8.video,
274
+ bgVideo = _ref8$video === void 0 ? null : _ref8$video,
275
+ _ref8$color = _ref8.color,
276
+ bgColor = _ref8$color === void 0 ? null : _ref8$color;
304
277
  if (bgImage !== null || bgVideo !== null) {
305
278
  return _objectSpread(_objectSpread({}, defaultBackground), background);
306
279
  }
307
-
308
280
  return _objectSpread(_objectSpread({}, defaultBackground), bgColor !== null ? {
309
281
  color: bgColor
310
282
  } : null);
@@ -347,8 +319,8 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
347
319
  }, hasTitle ? /*#__PURE__*/React.createElement("div", {
348
320
  ref: titleRef
349
321
  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
350
- className: styles.heading // body={body}
351
-
322
+ className: styles.heading
323
+ // body={body}
352
324
  }, title))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
353
325
  key: "video",
354
326
  className: styles.videoScreenElement,
@@ -450,7 +422,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
450
422
  withoutVideo: isPreview
451
423
  }));
452
424
  };
453
-
454
425
  UrbaniaTrivia.propTypes = propTypes;
455
426
  UrbaniaTrivia.defaultProps = defaultProps;
456
427
  var UrbaniaTriviaScreen = /*#__PURE__*/React.memo(UrbaniaTrivia);
package/lib/index.js CHANGED
@@ -39,7 +39,7 @@ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
39
39
  var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
40
40
  var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
41
41
 
42
- var styles = {"container":"micromag-screen-urbania-trivia-container","background":"micromag-screen-urbania-trivia-background","coinnerntent":"micromag-screen-urbania-trivia-coinnerntent","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image","placeholder":"micromag-screen-urbania-trivia-placeholder","disabled":"micromag-screen-urbania-trivia-disabled","hidden":"micromag-screen-urbania-trivia-hidden","content":"micromag-screen-urbania-trivia-content","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","spin":"micromag-screen-urbania-trivia-spin","heading":"micromag-screen-urbania-trivia-heading","hideHeading":"micromag-screen-urbania-trivia-hideHeading","callToAction":"micromag-screen-urbania-trivia-callToAction","bottom":"micromag-screen-urbania-trivia-bottom","visible":"micromag-screen-urbania-trivia-visible","withGradient":"micromag-screen-urbania-trivia-withGradient","mediaControls":"micromag-screen-urbania-trivia-mediaControls","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer"};
42
+ var styles = {"container":"micromag-screen-urbania-trivia-container","fullscreen":"micromag-screen-urbania-trivia-fullscreen","image":"micromag-screen-urbania-trivia-image","placeholder":"micromag-screen-urbania-trivia-placeholder","coinnerntent":"micromag-screen-urbania-trivia-coinnerntent","background":"micromag-screen-urbania-trivia-background","disabled":"micromag-screen-urbania-trivia-disabled","hidden":"micromag-screen-urbania-trivia-hidden","content":"micromag-screen-urbania-trivia-content","empty":"micromag-screen-urbania-trivia-empty","itemsContainer":"micromag-screen-urbania-trivia-itemsContainer","videoContainer":"micromag-screen-urbania-trivia-videoContainer","video":"micromag-screen-urbania-trivia-video","isCustomBackground":"micromag-screen-urbania-trivia-isCustomBackground","isAnimated":"micromag-screen-urbania-trivia-isAnimated","spin":"micromag-screen-urbania-trivia-spin","heading":"micromag-screen-urbania-trivia-heading","hideHeading":"micromag-screen-urbania-trivia-hideHeading","callToAction":"micromag-screen-urbania-trivia-callToAction","bottom":"micromag-screen-urbania-trivia-bottom","visible":"micromag-screen-urbania-trivia-visible","withGradient":"micromag-screen-urbania-trivia-withGradient","mediaControls":"micromag-screen-urbania-trivia-mediaControls","videoPlaceholder":"micromag-screen-urbania-trivia-videoPlaceholder","bottomContent":"micromag-screen-urbania-trivia-bottomContent","emptyContainer":"micromag-screen-urbania-trivia-emptyContainer"};
43
43
 
44
44
  var AnimeLinesGrey = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201083.95%201920%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1083.95%2C0h-103.4l-438.55%2C959.95L1083.95%2C109.31V0Zm0%2C295L542.02%2C959.96l541.93-498.87v-166.08Zm0%2C274.99l-541.92%2C389.98%2C541.92-279.64v-110.34Zm0%2C190.53l-541.92%2C199.46%2C541.92-110.89v-88.57Zm0%2C158.17l-541.92%2C41.31%2C541.92%2C41.31v-82.61Zm0%2C152.21l-541.92-110.89%2C541.92%2C199.46v-88.58Zm0%2C168.77l-541.92-279.64%2C541.92%2C389.98v-110.34Zm0%2C219.25l-541.93-498.87%2C541.93%2C664.95v-166.08Zm0%2C351.77L542%2C960.05l438.55%2C959.95h103.4v-109.31ZM854.8%2C0h-138.91l-173.9%2C959.94L854.8%2C0Zm0%2C1920l-312.81-959.94%2C173.9%2C959.94h138.91ZM606.75%2C0h-129.56l64.78%2C959.94L606.75%2C0Zm0%2C1920l-64.78-959.94-64.78%2C959.94h129.56Zm-64.79-960.06L368.06%2C0H229.15l312.81%2C959.94Zm0%2C.12L229.15%2C1920h138.91l173.9-959.94Zm-.01-.11L103.4%2C0H0V109.31L541.94%2C959.95Zm0%2C.11L0%2C1810.69v109.31H103.4l438.55-959.95Zm-.01-.1L0%2C295.01v166.08l541.93%2C498.87Zm0%2C.09L0%2C1458.91v166.08L541.93%2C960.04Zm-.01-.07L0%2C570v110.34l541.92%2C279.63Zm0%2C.02L0%2C760.52v88.57l541.92%2C110.89Zm0%2C.02L0%2C918.69v82.61l541.92-41.31Zm0%2C.02L0%2C1070.9v88.57l541.92-199.46Zm0%2C.02L0%2C1239.66v110.34l541.92-389.97Z%22%20fill%3D%22hsla%280%2C0%25%2C100%25%2C.6%29%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
45
45
 
@@ -91,79 +91,70 @@ var defaultProps = {
91
91
  mediaRef: null,
92
92
  className: null
93
93
  };
94
-
95
94
  var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
96
95
  var _ref9, _ref10;
97
-
98
96
  var layout = _ref.layout,
99
- title = _ref.title,
100
- video = _ref.video,
101
- gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
102
- background = _ref.background,
103
- current = _ref.current,
104
- active = _ref.active,
105
- transitions = _ref.transitions,
106
- spacing = _ref.spacing,
107
- padding = _ref.padding,
108
- customMediaRef = _ref.mediaRef,
109
- className = _ref.className;
97
+ title = _ref.title,
98
+ video = _ref.video,
99
+ gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
100
+ background = _ref.background,
101
+ current = _ref.current,
102
+ active = _ref.active,
103
+ transitions = _ref.transitions,
104
+ spacing = _ref.spacing,
105
+ padding = _ref.padding,
106
+ customMediaRef = _ref.mediaRef,
107
+ className = _ref.className;
110
108
  var trackScreenMedia = hooks.useTrackScreenMedia('video');
111
-
112
109
  var _useScreenSize = contexts.useScreenSize(),
113
- width = _useScreenSize.width,
114
- height = _useScreenSize.height,
115
- resolution = _useScreenSize.resolution;
116
-
110
+ width = _useScreenSize.width,
111
+ height = _useScreenSize.height,
112
+ resolution = _useScreenSize.resolution;
117
113
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
118
- isView = _useScreenRenderConte.isView,
119
- isPreview = _useScreenRenderConte.isPreview,
120
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
121
- isEdit = _useScreenRenderConte.isEdit,
122
- isStatic = _useScreenRenderConte.isStatic,
123
- isCapture = _useScreenRenderConte.isCapture;
124
-
114
+ isView = _useScreenRenderConte.isView,
115
+ isPreview = _useScreenRenderConte.isPreview,
116
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
117
+ isEdit = _useScreenRenderConte.isEdit,
118
+ isStatic = _useScreenRenderConte.isStatic,
119
+ isCapture = _useScreenRenderConte.isCapture;
125
120
  var _useViewerContext = contexts.useViewerContext(),
126
- viewerBottomHeight = _useViewerContext.bottomHeight;
127
-
121
+ viewerBottomHeight = _useViewerContext.bottomHeight;
128
122
  var _useViewerNavigation = contexts.useViewerNavigation(),
129
- gotoNextScreen = _useViewerNavigation.gotoNextScreen;
130
-
123
+ gotoNextScreen = _useViewerNavigation.gotoNextScreen;
131
124
  var hasTitle = utils.isTextFilled(title);
132
125
  var backgroundPlaying = current && (isView || isEdit);
133
126
  var mediaShouldLoad = current || active;
134
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
127
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
135
128
 
129
+ // get resized video style props
136
130
  var _ref2 = video || {},
137
- _ref2$autoPlay = _ref2.autoPlay,
138
- autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
139
- _ref2$media = _ref2.media,
140
- videoMedia = _ref2$media === void 0 ? null : _ref2$media,
141
- _ref2$closedCaptions = _ref2.closedCaptions,
142
- closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
143
- _ref2$withSeekBar = _ref2.withSeekBar,
144
- withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
145
- _ref2$withControls = _ref2.withControls,
146
- withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
147
- _ref2$color = _ref2.color,
148
- color = _ref2$color === void 0 ? null : _ref2$color,
149
- _ref2$progressColor = _ref2.progressColor,
150
- progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
151
-
131
+ _ref2$autoPlay = _ref2.autoPlay,
132
+ autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
133
+ _ref2$media = _ref2.media,
134
+ videoMedia = _ref2$media === void 0 ? null : _ref2$media,
135
+ _ref2$closedCaptions = _ref2.closedCaptions,
136
+ closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
137
+ _ref2$withSeekBar = _ref2.withSeekBar,
138
+ withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
139
+ _ref2$withControls = _ref2.withControls,
140
+ withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
141
+ _ref2$color = _ref2.color,
142
+ color = _ref2$color === void 0 ? null : _ref2$color,
143
+ _ref2$progressColor = _ref2.progressColor,
144
+ progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
152
145
  var _usePlaybackContext = contexts.usePlaybackContext(),
153
- playing = _usePlaybackContext.playing,
154
- muted = _usePlaybackContext.muted,
155
- setControls = _usePlaybackContext.setControls,
156
- setControlsTheme = _usePlaybackContext.setControlsTheme,
157
- setPlaying = _usePlaybackContext.setPlaying,
158
- showControls = _usePlaybackContext.showControls,
159
- hideControls = _usePlaybackContext.hideControls;
160
-
146
+ playing = _usePlaybackContext.playing,
147
+ muted = _usePlaybackContext.muted,
148
+ setControls = _usePlaybackContext.setControls,
149
+ setControlsTheme = _usePlaybackContext.setControlsTheme,
150
+ setPlaying = _usePlaybackContext.setPlaying,
151
+ showControls = _usePlaybackContext.showControls,
152
+ hideControls = _usePlaybackContext.hideControls;
161
153
  var mediaRef = contexts.usePlaybackMediaRef(current);
162
154
  React.useEffect(function () {
163
155
  if (!current) {
164
156
  return function () {};
165
157
  }
166
-
167
158
  if (withControls || withSeekBar) {
168
159
  setControls(true);
169
160
  setControlsTheme({
@@ -172,7 +163,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
172
163
  } else {
173
164
  setControls(false);
174
165
  }
175
-
176
166
  return function () {
177
167
  if (withControls || withSeekBar) {
178
168
  setControls(false);
@@ -183,18 +173,17 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
183
173
  if (customMediaRef !== null) {
184
174
  customMediaRef(mediaRef.current);
185
175
  }
186
- }, [mediaRef.current]); // Get api state updates from callback
176
+ }, [mediaRef.current]);
187
177
 
178
+ // Get api state updates from callback
188
179
  var _useState = React.useState(null),
189
- _useState2 = _slicedToArray__default["default"](_useState, 2),
190
- currentTime = _useState2[0],
191
- setCurrentTime = _useState2[1];
192
-
180
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
181
+ currentTime = _useState2[0],
182
+ setCurrentTime = _useState2[1];
193
183
  var _useState3 = React.useState(null),
194
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
195
- duration = _useState4[0],
196
- setDuration = _useState4[1];
197
-
184
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
185
+ duration = _useState4[0],
186
+ setDuration = _useState4[1];
198
187
  React.useEffect(function () {
199
188
  if (current && autoPlay && !playing) {
200
189
  setPlaying(true);
@@ -226,25 +215,21 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
226
215
  if (current && shouldGotoNextScreenOnEnd) {
227
216
  gotoNextScreen();
228
217
  }
229
-
230
218
  if (current) {
231
219
  setPlaying(false);
232
220
  }
233
221
  }, [current, shouldGotoNextScreenOnEnd, gotoNextScreen, setPlaying]);
234
222
  var viewerContainer = contexts.useViewerContainer();
235
-
236
223
  var _useActivityDetector = hooks.useActivityDetector({
237
- element: viewerContainer,
238
- disabled: !current || !isView,
239
- timeout: 2000
240
- }),
241
- activityDetected = _useActivityDetector.detected;
242
-
224
+ element: viewerContainer,
225
+ disabled: !current || !isView,
226
+ timeout: 2000
227
+ }),
228
+ activityDetected = _useActivityDetector.detected;
243
229
  React.useEffect(function () {
244
230
  if (!current) {
245
231
  return;
246
232
  }
247
-
248
233
  if (activityDetected) {
249
234
  showControls();
250
235
  } else {
@@ -252,22 +237,18 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
252
237
  }
253
238
  }, [activityDetected, showControls, hideControls]);
254
239
  var fullscreen = layout === 'full';
255
-
256
240
  var _ref5 = background || {},
257
- _ref5$image = _ref5.image,
258
- backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
259
- _ref5$video = _ref5.video,
260
- backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
261
-
241
+ _ref5$image = _ref5.image,
242
+ backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
243
+ _ref5$video = _ref5.video,
244
+ backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
262
245
  var isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
263
246
  var isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
264
247
  var hasVideo = video !== null;
265
-
266
248
  var _useState5 = React.useState(hasVideo),
267
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
268
- ready = _useState6[0],
269
- setReady = _useState6[1];
270
-
249
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
250
+ ready = _useState6[0],
251
+ setReady = _useState6[1];
271
252
  var transitionPlaying = current && ready;
272
253
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
273
254
  var finalVideo = React.useMemo(function () {
@@ -275,56 +256,47 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
275
256
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
276
257
  }) : null;
277
258
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
278
-
279
259
  var _ref6 = videoMedia || {},
280
- _ref6$metadata = _ref6.metadata,
281
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
282
- _ref6$url = _ref6.url,
283
- videoUrl = _ref6$url === void 0 ? null : _ref6$url,
284
- _ref6$thumbnail_url = _ref6.thumbnail_url,
285
- thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
286
-
260
+ _ref6$metadata = _ref6.metadata,
261
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
262
+ _ref6$url = _ref6.url,
263
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url,
264
+ _ref6$thumbnail_url = _ref6.thumbnail_url,
265
+ thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
287
266
  var hasVideoUrl = videoUrl !== null;
288
-
289
267
  var _ref7 = videoMetadata || {},
290
- _ref7$width = _ref7.width,
291
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
292
- _ref7$height = _ref7.height,
293
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
294
-
268
+ _ref7$width = _ref7.width,
269
+ videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
270
+ _ref7$height = _ref7.height,
271
+ videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
295
272
  var _useDimensionObserver = hooks.useDimensionObserver(),
296
- titleRef = _useDimensionObserver.ref,
297
- _useDimensionObserver2 = _useDimensionObserver.height,
298
- titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
299
-
273
+ titleRef = _useDimensionObserver.ref,
274
+ _useDimensionObserver2 = _useDimensionObserver.height,
275
+ titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
300
276
  var videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
301
-
302
277
  var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, videoMaxHeight, {
303
- cover: fullscreen
304
- }),
305
- resizedVideoWidth = _getSizeWithinBounds.width,
306
- resizedVideoHeight = _getSizeWithinBounds.height;
307
-
308
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2; // const resizedVideoTop = -(resizedVideoHeight - videoMaxHeight) / 2;
278
+ cover: fullscreen
279
+ }),
280
+ resizedVideoWidth = _getSizeWithinBounds.width,
281
+ resizedVideoHeight = _getSizeWithinBounds.height;
282
+ var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
283
+ // const resizedVideoTop = -(resizedVideoHeight - videoMaxHeight) / 2;
309
284
 
310
285
  var verticalVideo = resizedVideoHeight > resizedVideoWidth;
311
286
  var finalBackground = React.useMemo(function () {
312
287
  if (isArray__default["default"](background) && background.length > 0) {
313
288
  return background;
314
289
  }
315
-
316
290
  var _ref8 = background || {},
317
- _ref8$image = _ref8.image,
318
- bgImage = _ref8$image === void 0 ? null : _ref8$image,
319
- _ref8$video = _ref8.video,
320
- bgVideo = _ref8$video === void 0 ? null : _ref8$video,
321
- _ref8$color = _ref8.color,
322
- bgColor = _ref8$color === void 0 ? null : _ref8$color;
323
-
291
+ _ref8$image = _ref8.image,
292
+ bgImage = _ref8$image === void 0 ? null : _ref8$image,
293
+ _ref8$video = _ref8.video,
294
+ bgVideo = _ref8$video === void 0 ? null : _ref8$video,
295
+ _ref8$color = _ref8.color,
296
+ bgColor = _ref8$color === void 0 ? null : _ref8$color;
324
297
  if (bgImage !== null || bgVideo !== null) {
325
298
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultBackground), background);
326
299
  }
327
-
328
300
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultBackground), bgColor !== null ? {
329
301
  color: bgColor
330
302
  } : null);
@@ -367,8 +339,8 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
367
339
  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
368
340
  ref: titleRef
369
341
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
370
- className: styles.heading // body={body}
371
-
342
+ className: styles.heading
343
+ // body={body}
372
344
  }, title))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
373
345
  key: "video",
374
346
  className: styles.videoScreenElement,
@@ -470,7 +442,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
470
442
  withoutVideo: isPreview
471
443
  }));
472
444
  };
473
-
474
445
  UrbaniaTrivia.propTypes = propTypes;
475
446
  UrbaniaTrivia.defaultProps = defaultProps;
476
447
  var UrbaniaTriviaScreen = /*#__PURE__*/React__default["default"].memo(UrbaniaTrivia);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-trivia",
3
- "version": "0.3.310",
3
+ "version": "0.3.318",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,24 +50,24 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.307",
54
- "@micromag/element-background": "^0.3.307",
55
- "@micromag/element-call-to-action": "^0.3.310",
56
- "@micromag/element-closed-captions": "^0.3.307",
57
- "@micromag/element-container": "^0.3.307",
58
- "@micromag/element-heading": "^0.3.307",
59
- "@micromag/element-image": "^0.3.307",
60
- "@micromag/element-media-controls": "^0.3.307",
61
- "@micromag/element-video": "^0.3.307",
62
- "@micromag/transforms": "^0.3.307",
53
+ "@micromag/core": "^0.3.318",
54
+ "@micromag/element-background": "^0.3.318",
55
+ "@micromag/element-call-to-action": "^0.3.318",
56
+ "@micromag/element-closed-captions": "^0.3.318",
57
+ "@micromag/element-container": "^0.3.318",
58
+ "@micromag/element-heading": "^0.3.318",
59
+ "@micromag/element-image": "^0.3.318",
60
+ "@micromag/element-media-controls": "^0.3.318",
61
+ "@micromag/element-video": "^0.3.318",
62
+ "@micromag/transforms": "^0.3.318",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
66
66
  "react-intl": "^5.12.1",
67
- "uuid": "^8.3.2"
67
+ "uuid": "^9.0.0"
68
68
  },
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "c2f4fbfcf0f643737a77f99dccf4d353f7856c2c"
72
+ "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
73
73
  }