@micromag/screen-urbania-trivia 0.3.150 → 0.3.156

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 +144 -182
  3. package/lib/index.js +141 -180
  4. package/package.json +12 -12
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-urbania-trivia-container .micromag-screen-urbania-trivia-content,.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;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-content{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%}.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-content,.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;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-content{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}
package/es/index.js CHANGED
@@ -6,27 +6,25 @@ import { getSizeWithinBounds } from '@folklore/size';
6
6
  import classNames from 'classnames';
7
7
  import isArray from 'lodash/isArray';
8
8
  import PropTypes from 'prop-types';
9
- import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
9
+ import React, { useEffect, useState, useCallback, useMemo } from 'react';
10
10
  import { PropTypes as PropTypes$1 } from '@micromag/core';
11
11
  import { ScreenElement, PlaceholderTitle, Empty, PlaceholderVideo, Transitions } from '@micromag/core/components';
12
- import { useScreenSize, useScreenRenderContext, useViewerNavigation } from '@micromag/core/contexts';
13
- import { useTrackScreenMedia, useLongPress, useResizeObserver } from '@micromag/core/hooks';
12
+ import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerNavigation, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
13
+ import { useTrackScreenMedia, useActivityDetector, useDimensionObserver } from '@micromag/core/hooks';
14
14
  import { isTextFilled } from '@micromag/core/utils';
15
15
  import Background from '@micromag/element-background';
16
- import '@micromag/element-call-to-action';
17
16
  import ClosedCaptions from '@micromag/element-closed-captions';
18
17
  import Container from '@micromag/element-container';
19
18
  import Heading from '@micromag/element-heading';
20
19
  import Image from '@micromag/element-image';
21
- import MediaControls from '@micromag/element-media-controls';
22
20
  import Video from '@micromag/element-video';
23
21
 
22
+ var styles = {"container":"micromag-screen-urbania-trivia-container","content":"micromag-screen-urbania-trivia-content","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","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
+
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
 
26
26
  var AnimeLines = "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%22%2312bbd7%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
27
27
 
28
- var styles = {"container":"micromag-screen-urbania-trivia-container","content":"micromag-screen-urbania-trivia-content","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","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"};
29
-
30
28
  var defaultBackground = {
31
29
  image: {
32
30
  type: 'image',
@@ -51,13 +49,12 @@ var propTypes = {
51
49
  video: PropTypes$1.videoElement,
52
50
  gotoNextScreenOnEnd: PropTypes.bool,
53
51
  background: PropTypes$1.backgroundElement,
54
- callToAction: PropTypes$1.callToAction,
55
52
  current: PropTypes.bool,
56
53
  active: PropTypes.bool,
57
54
  transitions: PropTypes$1.transitions,
58
55
  spacing: PropTypes.number,
59
56
  padding: PropTypes.number,
60
- getMediaRef: PropTypes.func,
57
+ mediaRef: PropTypes.func,
61
58
  className: PropTypes.string
62
59
  };
63
60
  var defaultProps = {
@@ -66,31 +63,29 @@ var defaultProps = {
66
63
  video: null,
67
64
  gotoNextScreenOnEnd: false,
68
65
  background: null,
69
- callToAction: null,
70
66
  current: true,
71
67
  active: true,
72
68
  transitions: null,
73
69
  spacing: 20,
74
70
  padding: 20,
75
- getMediaRef: null,
71
+ mediaRef: null,
76
72
  className: null
77
73
  };
78
74
 
79
75
  var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
80
- var _ref12, _ref14, _ref15;
76
+ var _ref9, _ref10;
81
77
 
82
78
  var layout = _ref.layout,
83
79
  title = _ref.title,
84
80
  video = _ref.video,
85
81
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
86
- background = _ref.background;
87
- _ref.callToAction;
88
- var current = _ref.current,
82
+ background = _ref.background,
83
+ current = _ref.current,
89
84
  active = _ref.active,
90
85
  transitions = _ref.transitions,
91
86
  spacing = _ref.spacing,
92
87
  padding = _ref.padding,
93
- getMediaRef = _ref.getMediaRef,
88
+ customMediaRef = _ref.mediaRef,
94
89
  className = _ref.className;
95
90
  var trackScreenMedia = useTrackScreenMedia('video');
96
91
 
@@ -107,166 +102,149 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
107
102
  isStatic = _useScreenRenderConte.isStatic,
108
103
  isCapture = _useScreenRenderConte.isCapture;
109
104
 
105
+ var _useViewerContext = useViewerContext(),
106
+ viewerBottomHeight = _useViewerContext.bottomHeight;
107
+
110
108
  var _useViewerNavigation = useViewerNavigation(),
111
109
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
112
110
 
113
111
  var hasTitle = isTextFilled(title);
114
112
  var backgroundPlaying = current && (isView || isEdit);
115
113
  var mediaShouldLoad = current || active;
116
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
117
-
118
- var _ref2 = title || {};
119
- _ref2.body;
120
- // get resized video style props
121
-
122
-
123
- var _ref3 = video || {},
124
- _ref3$autoPlay = _ref3.autoPlay,
125
- autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
126
- _ref3$media = _ref3.media,
127
- videoMedia = _ref3$media === void 0 ? null : _ref3$media,
128
- _ref3$closedCaptions = _ref3.closedCaptions,
129
- closedCaptions = _ref3$closedCaptions === void 0 ? null : _ref3$closedCaptions,
130
- _ref3$withSeekBar = _ref3.withSeekBar,
131
- withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
132
- _ref3$withControls = _ref3.withControls,
133
- withControls = _ref3$withControls === void 0 ? false : _ref3$withControls;
134
-
135
- var apiRef = useRef();
136
-
137
- var _ref4 = apiRef.current || {},
138
- togglePlay = _ref4.togglePlay,
139
- toggleMute = _ref4.toggleMute,
140
- seek = _ref4.seek,
141
- play = _ref4.play,
142
- pause = _ref4.pause,
143
- _ref4$mediaRef = _ref4.mediaRef,
144
- apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
114
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
115
+
116
+ 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
+
132
+ var _usePlaybackContext = usePlaybackContext(),
133
+ playing = _usePlaybackContext.playing,
134
+ muted = _usePlaybackContext.muted,
135
+ setControls = _usePlaybackContext.setControls,
136
+ setControlsTheme = _usePlaybackContext.setControlsTheme;
137
+ _usePlaybackContext.setMedia;
138
+ var setPlaying = _usePlaybackContext.setPlaying,
139
+ showControls = _usePlaybackContext.showControls,
140
+ hideControls = _usePlaybackContext.hideControls;
141
+
142
+ var mediaRef = usePlaybackMediaRef(current);
143
+ useEffect(function () {
144
+ if (!current) {
145
+ return function () {};
146
+ }
147
+
148
+ if (withControls || withSeekBar) {
149
+ setControls(true);
150
+ setControlsTheme({
151
+ seekBarOnly: withSeekBar && !withControls
152
+ });
153
+ } else {
154
+ setControls(false);
155
+ }
145
156
 
157
+ return function () {
158
+ if (withControls || withSeekBar) {
159
+ setControls(false);
160
+ }
161
+ };
162
+ }, [current, withControls, setControls, withSeekBar, color, progressColor]);
146
163
  useEffect(function () {
147
- if (apiMediaRef !== null && getMediaRef !== null) {
148
- getMediaRef(apiMediaRef.current);
164
+ if (customMediaRef !== null) {
165
+ customMediaRef(mediaRef.current);
149
166
  }
150
- }, [apiMediaRef, getMediaRef]);
151
- var mouseMoveRef = useRef(null);
167
+ }, [mediaRef.current]); // Get api state updates from callback
152
168
 
153
- var _useState = useState(false),
169
+ var _useState = useState(null),
154
170
  _useState2 = _slicedToArray(_useState, 2),
155
- showMediaControls = _useState2[0],
156
- setShowMediaControls = _useState2[1]; // Get api state updates from callback
157
-
171
+ currentTime = _useState2[0],
172
+ setCurrentTime = _useState2[1];
158
173
 
159
174
  var _useState3 = useState(null),
160
175
  _useState4 = _slicedToArray(_useState3, 2),
161
- currentTime = _useState4[0],
162
- setCurrentTime = _useState4[1];
163
-
164
- var _useState5 = useState(null),
165
- _useState6 = _slicedToArray(_useState5, 2),
166
- duration = _useState6[0],
167
- setDuration = _useState6[1];
168
-
169
- var _useState7 = useState(false),
170
- _useState8 = _slicedToArray(_useState7, 2),
171
- playing = _useState8[0],
172
- setPlaying = _useState8[1];
173
-
174
- var _useState9 = useState(false),
175
- _useState10 = _slicedToArray(_useState9, 2),
176
- muted = _useState10[0],
177
- setMuted = _useState10[1];
176
+ duration = _useState4[0],
177
+ setDuration = _useState4[1];
178
178
 
179
+ useEffect(function () {
180
+ if (current && autoPlay && !playing) {
181
+ setPlaying(true);
182
+ }
183
+ }, [current, autoPlay]);
179
184
  var onTimeUpdate = useCallback(function (time) {
180
185
  setCurrentTime(time);
181
186
  }, [setDuration, duration]);
182
187
  var onProgressStep = useCallback(function (step) {
183
188
  trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
184
189
  }, [trackScreenMedia, video]);
185
- var onDurationChanged = useCallback(function (dur) {
190
+ var onDurationChange = useCallback(function (dur) {
186
191
  setDuration(dur);
187
192
  }, [setDuration]);
188
- var onPlay = useCallback(function (_ref5) {
189
- var initial = _ref5.initial;
190
- setPlaying(true);
193
+ var onPlay = useCallback(function (_ref3) {
194
+ var initial = _ref3.initial;
191
195
  trackScreenMedia(video, initial ? 'play' : 'resume');
192
196
  }, [trackScreenMedia, video]);
193
- var onPause = useCallback(function (_ref6) {
194
- var midway = _ref6.midway;
195
- setPlaying(false);
197
+ var onPause = useCallback(function (_ref4) {
198
+ var midway = _ref4.midway;
196
199
  trackScreenMedia(video, midway ? 'pause' : 'ended');
197
200
  }, [trackScreenMedia, video]);
198
- var onVolumeChanged = useCallback(function (isMuted) {
199
- setMuted(isMuted);
200
- trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
201
- }, [trackScreenMedia, video]);
202
- var onSeek = useCallback(function (e) {
203
- seek(e);
204
- play();
205
- }, [seek, play]);
206
201
  var onSeeked = useCallback(function (time) {
207
202
  if (time > 0) {
208
203
  trackScreenMedia(video, 'seek');
209
204
  }
210
205
  }, [trackScreenMedia, video]);
211
- var onToggleMute = useCallback(function () {
212
- if (muted && !playing) {
213
- play();
214
- }
215
-
216
- toggleMute();
217
- }, [muted, toggleMute]);
218
206
  var onEnded = useCallback(function () {
219
207
  if (shouldGotoNextScreenOnEnd) {
220
208
  gotoNextScreen();
221
209
  }
222
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
223
- useEffect(function () {
224
- if (!current && playing) {
225
- pause();
226
- }
227
- }, [playing, current]);
228
- var onMouseMove = useCallback(function (e) {
229
- var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
230
- setShowMediaControls(true);
231
210
 
232
- if (mouseMoveRef.current !== null) {
233
- clearTimeout(mouseMoveRef.current);
211
+ setPlaying(false);
212
+ }, [shouldGotoNextScreenOnEnd, gotoNextScreen, setPlaying]);
213
+
214
+ var _useActivityDetector = useActivityDetector({
215
+ disabled: !current || !isView,
216
+ timeout: 2000
217
+ }),
218
+ activityDetectorRef = _useActivityDetector.ref,
219
+ activityDetected = _useActivityDetector.detected;
220
+
221
+ useEffect(function () {
222
+ if (!current) {
223
+ return;
234
224
  }
235
225
 
236
- mouseMoveRef.current = setTimeout(function () {
237
- setShowMediaControls(false);
238
- mouseMoveRef.current = null;
239
- }, time);
240
- }, [setShowMediaControls]);
241
- var onLongPress = useCallback(function () {
242
- if (!playing) {
243
- play();
244
- } else if (withControls) {
245
- onMouseMove(null, 3000);
226
+ if (activityDetected) {
227
+ showControls();
246
228
  } else {
247
- pause();
229
+ hideControls();
248
230
  }
249
- }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
250
- var longPressBind = useLongPress({
251
- onLongPress: onLongPress,
252
- onClick: onMouseMove
253
- });
231
+ }, [activityDetected, showControls, hideControls]);
254
232
  var fullscreen = layout === 'full';
255
233
 
256
- var _ref7 = background || {},
257
- _ref7$image = _ref7.image,
258
- backgroundImage = _ref7$image === void 0 ? null : _ref7$image,
259
- _ref7$video = _ref7.video,
260
- backgroundVideo = _ref7$video === void 0 ? null : _ref7$video;
234
+ var _ref5 = background || {},
235
+ _ref5$image = _ref5.image,
236
+ backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
237
+ _ref5$video = _ref5.video,
238
+ backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
261
239
 
262
240
  var isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
263
241
  var isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
264
242
  var hasVideo = video !== null;
265
243
 
266
- var _useState11 = useState(hasVideo),
267
- _useState12 = _slicedToArray(_useState11, 2),
268
- ready = _useState12[0],
269
- setReady = _useState12[1];
244
+ var _useState5 = useState(hasVideo),
245
+ _useState6 = _slicedToArray(_useState5, 2),
246
+ ready = _useState6[0],
247
+ setReady = _useState6[1];
270
248
 
271
249
  var transitionPlaying = current && ready;
272
250
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
@@ -276,30 +254,26 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
276
254
  }) : null;
277
255
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
278
256
 
279
- var _ref8 = videoMedia || {},
280
- _ref8$metadata = _ref8.metadata,
281
- videoMetadata = _ref8$metadata === void 0 ? null : _ref8$metadata,
282
- _ref8$url = _ref8.url,
283
- videoUrl = _ref8$url === void 0 ? null : _ref8$url,
284
- _ref8$thumbnail_url = _ref8.thumbnail_url,
285
- thumbnailUrl = _ref8$thumbnail_url === void 0 ? null : _ref8$thumbnail_url;
257
+ var _ref6 = videoMedia || {},
258
+ _ref6$metadata = _ref6.metadata,
259
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
260
+ _ref6$url = _ref6.url,
261
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url,
262
+ _ref6$thumbnail_url = _ref6.thumbnail_url,
263
+ thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
286
264
 
287
265
  var hasVideoUrl = videoUrl !== null;
288
266
 
289
- var _ref9 = videoMetadata || {},
290
- _ref9$width = _ref9.width,
291
- videoWidth = _ref9$width === void 0 ? 0 : _ref9$width,
292
- _ref9$height = _ref9.height,
293
- videoHeight = _ref9$height === void 0 ? 0 : _ref9$height;
294
-
295
- var _useResizeObserver = useResizeObserver(),
296
- titleRef = _useResizeObserver.ref,
297
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
298
- contentRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
267
+ var _ref7 = videoMetadata || {},
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;
299
272
 
300
- var _ref10 = contentRect || {},
301
- _ref10$height = _ref10.height,
302
- titleHeight = _ref10$height === void 0 ? 0 : _ref10$height;
273
+ var _useDimensionObserver = useDimensionObserver(),
274
+ titleRef = _useDimensionObserver.ref,
275
+ _useDimensionObserver2 = _useDimensionObserver.height,
276
+ titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
303
277
 
304
278
  var videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
305
279
 
@@ -317,13 +291,13 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
317
291
  return background;
318
292
  }
319
293
 
320
- var _ref11 = background || {},
321
- _ref11$image = _ref11.image,
322
- bgImage = _ref11$image === void 0 ? null : _ref11$image,
323
- _ref11$video = _ref11.video,
324
- bgVideo = _ref11$video === void 0 ? null : _ref11$video,
325
- _ref11$color = _ref11.color,
326
- bgColor = _ref11$color === void 0 ? null : _ref11$color;
294
+ var _ref8 = background || {},
295
+ _ref8$image = _ref8.image,
296
+ bgImage = _ref8$image === void 0 ? null : _ref8$image,
297
+ _ref8$video = _ref8.video,
298
+ bgVideo = _ref8$video === void 0 ? null : _ref8$video,
299
+ _ref8$color = _ref8.color,
300
+ bgColor = _ref8$color === void 0 ? null : _ref8$color;
327
301
 
328
302
  if (bgImage !== null || bgVideo !== null) {
329
303
  return _objectSpread(_objectSpread({}, defaultBackground), background);
@@ -345,7 +319,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
345
319
  var onVideoReady = useCallback(function () {
346
320
  setReady(true);
347
321
  }, [setReady]);
348
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
349
322
  var items = [/*#__PURE__*/React.createElement(Container, {
350
323
  className: styles.itemsContainer,
351
324
  style: {
@@ -413,7 +386,9 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
413
386
  height: resizedVideoHeight,
414
387
  resolution: resolution
415
388
  }) : /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
416
- ref: apiRef,
389
+ mediaRef: mediaRef,
390
+ paused: !current || !playing,
391
+ muted: muted,
417
392
  width: resizedVideoWidth,
418
393
  height: resizedVideoHeight,
419
394
  className: styles.video,
@@ -422,15 +397,17 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
422
397
  onPause: onPause,
423
398
  onTimeUpdate: onTimeUpdate,
424
399
  onProgressStep: onProgressStep,
425
- onDurationChanged: onDurationChanged,
400
+ onDurationChange: onDurationChange,
426
401
  onSeeked: onSeeked,
427
402
  onEnded: onEnded,
428
- onVolumeChanged: onVolumeChanged,
429
403
  focusable: current && isView,
430
404
  shouldLoad: mediaShouldLoad
431
405
  })), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
432
406
  key: "bottom-content",
433
- className: styles.bottomContent
407
+ className: styles.bottomContent,
408
+ style: {
409
+ transform: "translate(0, -".concat(viewerBottomHeight, "px)")
410
+ }
434
411
  }, /*#__PURE__*/React.createElement(Transitions, {
435
412
  playing: transitionPlaying,
436
413
  transitions: transitions,
@@ -439,29 +416,14 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
439
416
  className: styles.closedCaptions,
440
417
  media: closedCaptions,
441
418
  currentTime: currentTime
442
- }) : null, /*#__PURE__*/React.createElement("div", {
443
- className: classNames([styles.bottom, (_ref12 = {}, _defineProperty(_ref12, styles.visible, visibleControls), _defineProperty(_ref12, styles.withGradient, withSeekBar || withControls || muted), _ref12)])
444
- }, hasVideoUrl ? /*#__PURE__*/React.createElement(MediaControls, {
445
- className: classNames([styles.mediaControls, _defineProperty({}, styles.visible, visibleControls)]),
446
- withSeekBar: withSeekBar,
447
- withControls: withControls,
448
- playing: playing,
449
- muted: muted,
450
- currentTime: currentTime,
451
- duration: duration,
452
- onTogglePlay: togglePlay,
453
- onToggleMute: onToggleMute,
454
- onSeek: onSeek,
455
- focusable: current && isView
456
- }) : null))) : null) : null))];
457
- return /*#__PURE__*/React.createElement("div", Object.assign({
458
- className: classNames([styles.container, (_ref14 = {}, _defineProperty(_ref14, className, className !== null), _defineProperty(_ref14, styles.fullscreen, fullscreen), _ref14)]),
459
- "data-screen-ready": isStatic || isCapture || ready
460
- }, longPressBind, {
461
- onMouseMove: onMouseMove
462
- }), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
419
+ }) : null)) : null) : null))];
420
+ return /*#__PURE__*/React.createElement("div", {
421
+ className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.fullscreen, fullscreen), _ref9)]),
422
+ "data-screen-ready": isStatic || isCapture || ready,
423
+ ref: activityDetectorRef
424
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
463
425
  background: finalBackground,
464
- className: classNames([styles.background, (_ref15 = {}, _defineProperty(_ref15, className, className !== null), _defineProperty(_ref15, styles.isCustomBackground, isCustomBackground), _defineProperty(_ref15, styles.isAnimated, isAnimatedBackground), _ref15)]),
426
+ className: classNames([styles.background, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isCustomBackground, isCustomBackground), _defineProperty(_ref10, styles.isAnimated, isAnimatedBackground), _ref10)]),
465
427
  width: width,
466
428
  height: height,
467
429
  resolution: resolution,
package/lib/index.js CHANGED
@@ -17,12 +17,10 @@ var contexts = require('@micromag/core/contexts');
17
17
  var hooks = require('@micromag/core/hooks');
18
18
  var utils = require('@micromag/core/utils');
19
19
  var Background = require('@micromag/element-background');
20
- require('@micromag/element-call-to-action');
21
20
  var ClosedCaptions = require('@micromag/element-closed-captions');
22
21
  var Container = require('@micromag/element-container');
23
22
  var Heading = require('@micromag/element-heading');
24
23
  var Image = require('@micromag/element-image');
25
- var MediaControls = require('@micromag/element-media-controls');
26
24
  var Video = require('@micromag/element-video');
27
25
 
28
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -39,15 +37,14 @@ var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions)
39
37
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
38
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
41
39
  var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
42
- var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
43
40
  var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
44
41
 
42
+ var styles = {"container":"micromag-screen-urbania-trivia-container","content":"micromag-screen-urbania-trivia-content","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","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
+
45
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";
46
45
 
47
46
  var AnimeLines = "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%22%2312bbd7%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
48
47
 
49
- var styles = {"container":"micromag-screen-urbania-trivia-container","content":"micromag-screen-urbania-trivia-content","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","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"};
50
-
51
48
  var defaultBackground = {
52
49
  image: {
53
50
  type: 'image',
@@ -72,13 +69,12 @@ var propTypes = {
72
69
  video: core.PropTypes.videoElement,
73
70
  gotoNextScreenOnEnd: PropTypes__default["default"].bool,
74
71
  background: core.PropTypes.backgroundElement,
75
- callToAction: core.PropTypes.callToAction,
76
72
  current: PropTypes__default["default"].bool,
77
73
  active: PropTypes__default["default"].bool,
78
74
  transitions: core.PropTypes.transitions,
79
75
  spacing: PropTypes__default["default"].number,
80
76
  padding: PropTypes__default["default"].number,
81
- getMediaRef: PropTypes__default["default"].func,
77
+ mediaRef: PropTypes__default["default"].func,
82
78
  className: PropTypes__default["default"].string
83
79
  };
84
80
  var defaultProps = {
@@ -87,31 +83,29 @@ var defaultProps = {
87
83
  video: null,
88
84
  gotoNextScreenOnEnd: false,
89
85
  background: null,
90
- callToAction: null,
91
86
  current: true,
92
87
  active: true,
93
88
  transitions: null,
94
89
  spacing: 20,
95
90
  padding: 20,
96
- getMediaRef: null,
91
+ mediaRef: null,
97
92
  className: null
98
93
  };
99
94
 
100
95
  var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
101
- var _ref12, _ref14, _ref15;
96
+ var _ref9, _ref10;
102
97
 
103
98
  var layout = _ref.layout,
104
99
  title = _ref.title,
105
100
  video = _ref.video,
106
101
  gotoNextScreenOnEnd = _ref.gotoNextScreenOnEnd,
107
- background = _ref.background;
108
- _ref.callToAction;
109
- var current = _ref.current,
102
+ background = _ref.background,
103
+ current = _ref.current,
110
104
  active = _ref.active,
111
105
  transitions = _ref.transitions,
112
106
  spacing = _ref.spacing,
113
107
  padding = _ref.padding,
114
- getMediaRef = _ref.getMediaRef,
108
+ customMediaRef = _ref.mediaRef,
115
109
  className = _ref.className;
116
110
  var trackScreenMedia = hooks.useTrackScreenMedia('video');
117
111
 
@@ -128,166 +122,149 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
128
122
  isStatic = _useScreenRenderConte.isStatic,
129
123
  isCapture = _useScreenRenderConte.isCapture;
130
124
 
125
+ var _useViewerContext = contexts.useViewerContext(),
126
+ viewerBottomHeight = _useViewerContext.bottomHeight;
127
+
131
128
  var _useViewerNavigation = contexts.useViewerNavigation(),
132
129
  gotoNextScreen = _useViewerNavigation.gotoNextScreen;
133
130
 
134
131
  var hasTitle = utils.isTextFilled(title);
135
132
  var backgroundPlaying = current && (isView || isEdit);
136
133
  var mediaShouldLoad = current || active;
137
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
138
-
139
- var _ref2 = title || {};
140
- _ref2.body;
141
- // get resized video style props
142
-
143
-
144
- var _ref3 = video || {},
145
- _ref3$autoPlay = _ref3.autoPlay,
146
- autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
147
- _ref3$media = _ref3.media,
148
- videoMedia = _ref3$media === void 0 ? null : _ref3$media,
149
- _ref3$closedCaptions = _ref3.closedCaptions,
150
- closedCaptions = _ref3$closedCaptions === void 0 ? null : _ref3$closedCaptions,
151
- _ref3$withSeekBar = _ref3.withSeekBar,
152
- withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
153
- _ref3$withControls = _ref3.withControls,
154
- withControls = _ref3$withControls === void 0 ? false : _ref3$withControls;
155
-
156
- var apiRef = React.useRef();
157
-
158
- var _ref4 = apiRef.current || {},
159
- togglePlay = _ref4.togglePlay,
160
- toggleMute = _ref4.toggleMute,
161
- seek = _ref4.seek,
162
- play = _ref4.play,
163
- pause = _ref4.pause,
164
- _ref4$mediaRef = _ref4.mediaRef,
165
- apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
134
+ var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current; // get resized video style props
135
+
136
+ 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
+
152
+ var _usePlaybackContext = contexts.usePlaybackContext(),
153
+ playing = _usePlaybackContext.playing,
154
+ muted = _usePlaybackContext.muted,
155
+ setControls = _usePlaybackContext.setControls,
156
+ setControlsTheme = _usePlaybackContext.setControlsTheme;
157
+ _usePlaybackContext.setMedia;
158
+ var setPlaying = _usePlaybackContext.setPlaying,
159
+ showControls = _usePlaybackContext.showControls,
160
+ hideControls = _usePlaybackContext.hideControls;
161
+
162
+ var mediaRef = contexts.usePlaybackMediaRef(current);
163
+ React.useEffect(function () {
164
+ if (!current) {
165
+ return function () {};
166
+ }
167
+
168
+ if (withControls || withSeekBar) {
169
+ setControls(true);
170
+ setControlsTheme({
171
+ seekBarOnly: withSeekBar && !withControls
172
+ });
173
+ } else {
174
+ setControls(false);
175
+ }
166
176
 
177
+ return function () {
178
+ if (withControls || withSeekBar) {
179
+ setControls(false);
180
+ }
181
+ };
182
+ }, [current, withControls, setControls, withSeekBar, color, progressColor]);
167
183
  React.useEffect(function () {
168
- if (apiMediaRef !== null && getMediaRef !== null) {
169
- getMediaRef(apiMediaRef.current);
184
+ if (customMediaRef !== null) {
185
+ customMediaRef(mediaRef.current);
170
186
  }
171
- }, [apiMediaRef, getMediaRef]);
172
- var mouseMoveRef = React.useRef(null);
187
+ }, [mediaRef.current]); // Get api state updates from callback
173
188
 
174
- var _useState = React.useState(false),
189
+ var _useState = React.useState(null),
175
190
  _useState2 = _slicedToArray__default["default"](_useState, 2),
176
- showMediaControls = _useState2[0],
177
- setShowMediaControls = _useState2[1]; // Get api state updates from callback
178
-
191
+ currentTime = _useState2[0],
192
+ setCurrentTime = _useState2[1];
179
193
 
180
194
  var _useState3 = React.useState(null),
181
195
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
182
- currentTime = _useState4[0],
183
- setCurrentTime = _useState4[1];
184
-
185
- var _useState5 = React.useState(null),
186
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
187
- duration = _useState6[0],
188
- setDuration = _useState6[1];
189
-
190
- var _useState7 = React.useState(false),
191
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
192
- playing = _useState8[0],
193
- setPlaying = _useState8[1];
194
-
195
- var _useState9 = React.useState(false),
196
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
197
- muted = _useState10[0],
198
- setMuted = _useState10[1];
196
+ duration = _useState4[0],
197
+ setDuration = _useState4[1];
199
198
 
199
+ React.useEffect(function () {
200
+ if (current && autoPlay && !playing) {
201
+ setPlaying(true);
202
+ }
203
+ }, [current, autoPlay]);
200
204
  var onTimeUpdate = React.useCallback(function (time) {
201
205
  setCurrentTime(time);
202
206
  }, [setDuration, duration]);
203
207
  var onProgressStep = React.useCallback(function (step) {
204
208
  trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
205
209
  }, [trackScreenMedia, video]);
206
- var onDurationChanged = React.useCallback(function (dur) {
210
+ var onDurationChange = React.useCallback(function (dur) {
207
211
  setDuration(dur);
208
212
  }, [setDuration]);
209
- var onPlay = React.useCallback(function (_ref5) {
210
- var initial = _ref5.initial;
211
- setPlaying(true);
213
+ var onPlay = React.useCallback(function (_ref3) {
214
+ var initial = _ref3.initial;
212
215
  trackScreenMedia(video, initial ? 'play' : 'resume');
213
216
  }, [trackScreenMedia, video]);
214
- var onPause = React.useCallback(function (_ref6) {
215
- var midway = _ref6.midway;
216
- setPlaying(false);
217
+ var onPause = React.useCallback(function (_ref4) {
218
+ var midway = _ref4.midway;
217
219
  trackScreenMedia(video, midway ? 'pause' : 'ended');
218
220
  }, [trackScreenMedia, video]);
219
- var onVolumeChanged = React.useCallback(function (isMuted) {
220
- setMuted(isMuted);
221
- trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
222
- }, [trackScreenMedia, video]);
223
- var onSeek = React.useCallback(function (e) {
224
- seek(e);
225
- play();
226
- }, [seek, play]);
227
221
  var onSeeked = React.useCallback(function (time) {
228
222
  if (time > 0) {
229
223
  trackScreenMedia(video, 'seek');
230
224
  }
231
225
  }, [trackScreenMedia, video]);
232
- var onToggleMute = React.useCallback(function () {
233
- if (muted && !playing) {
234
- play();
235
- }
236
-
237
- toggleMute();
238
- }, [muted, toggleMute]);
239
226
  var onEnded = React.useCallback(function () {
240
227
  if (shouldGotoNextScreenOnEnd) {
241
228
  gotoNextScreen();
242
229
  }
243
- }, [shouldGotoNextScreenOnEnd, seek, gotoNextScreen]);
244
- React.useEffect(function () {
245
- if (!current && playing) {
246
- pause();
247
- }
248
- }, [playing, current]);
249
- var onMouseMove = React.useCallback(function (e) {
250
- var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1800;
251
- setShowMediaControls(true);
252
230
 
253
- if (mouseMoveRef.current !== null) {
254
- clearTimeout(mouseMoveRef.current);
231
+ setPlaying(false);
232
+ }, [shouldGotoNextScreenOnEnd, gotoNextScreen, setPlaying]);
233
+
234
+ var _useActivityDetector = hooks.useActivityDetector({
235
+ disabled: !current || !isView,
236
+ timeout: 2000
237
+ }),
238
+ activityDetectorRef = _useActivityDetector.ref,
239
+ activityDetected = _useActivityDetector.detected;
240
+
241
+ React.useEffect(function () {
242
+ if (!current) {
243
+ return;
255
244
  }
256
245
 
257
- mouseMoveRef.current = setTimeout(function () {
258
- setShowMediaControls(false);
259
- mouseMoveRef.current = null;
260
- }, time);
261
- }, [setShowMediaControls]);
262
- var onLongPress = React.useCallback(function () {
263
- if (!playing) {
264
- play();
265
- } else if (withControls) {
266
- onMouseMove(null, 3000);
246
+ if (activityDetected) {
247
+ showControls();
267
248
  } else {
268
- pause();
249
+ hideControls();
269
250
  }
270
- }, [play, playing, pause, onMouseMove, withControls, setShowMediaControls]);
271
- var longPressBind = hooks.useLongPress({
272
- onLongPress: onLongPress,
273
- onClick: onMouseMove
274
- });
251
+ }, [activityDetected, showControls, hideControls]);
275
252
  var fullscreen = layout === 'full';
276
253
 
277
- var _ref7 = background || {},
278
- _ref7$image = _ref7.image,
279
- backgroundImage = _ref7$image === void 0 ? null : _ref7$image,
280
- _ref7$video = _ref7.video,
281
- backgroundVideo = _ref7$video === void 0 ? null : _ref7$video;
254
+ var _ref5 = background || {},
255
+ _ref5$image = _ref5.image,
256
+ backgroundImage = _ref5$image === void 0 ? null : _ref5$image,
257
+ _ref5$video = _ref5.video,
258
+ backgroundVideo = _ref5$video === void 0 ? null : _ref5$video;
282
259
 
283
260
  var isCustomBackground = background === null || backgroundImage === null && backgroundVideo === null;
284
261
  var isAnimatedBackground = !isStatic && !isPreview && isCustomBackground;
285
262
  var hasVideo = video !== null;
286
263
 
287
- var _useState11 = React.useState(hasVideo),
288
- _useState12 = _slicedToArray__default["default"](_useState11, 2),
289
- ready = _useState12[0],
290
- setReady = _useState12[1];
264
+ var _useState5 = React.useState(hasVideo),
265
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
266
+ ready = _useState6[0],
267
+ setReady = _useState6[1];
291
268
 
292
269
  var transitionPlaying = current && ready;
293
270
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
@@ -297,30 +274,26 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
297
274
  }) : null;
298
275
  }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
299
276
 
300
- var _ref8 = videoMedia || {},
301
- _ref8$metadata = _ref8.metadata,
302
- videoMetadata = _ref8$metadata === void 0 ? null : _ref8$metadata,
303
- _ref8$url = _ref8.url,
304
- videoUrl = _ref8$url === void 0 ? null : _ref8$url,
305
- _ref8$thumbnail_url = _ref8.thumbnail_url,
306
- thumbnailUrl = _ref8$thumbnail_url === void 0 ? null : _ref8$thumbnail_url;
277
+ var _ref6 = videoMedia || {},
278
+ _ref6$metadata = _ref6.metadata,
279
+ videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
280
+ _ref6$url = _ref6.url,
281
+ videoUrl = _ref6$url === void 0 ? null : _ref6$url,
282
+ _ref6$thumbnail_url = _ref6.thumbnail_url,
283
+ thumbnailUrl = _ref6$thumbnail_url === void 0 ? null : _ref6$thumbnail_url;
307
284
 
308
285
  var hasVideoUrl = videoUrl !== null;
309
286
 
310
- var _ref9 = videoMetadata || {},
311
- _ref9$width = _ref9.width,
312
- videoWidth = _ref9$width === void 0 ? 0 : _ref9$width,
313
- _ref9$height = _ref9.height,
314
- videoHeight = _ref9$height === void 0 ? 0 : _ref9$height;
315
-
316
- var _useResizeObserver = hooks.useResizeObserver(),
317
- titleRef = _useResizeObserver.ref,
318
- _useResizeObserver$en = _useResizeObserver.entry.contentRect,
319
- contentRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
287
+ var _ref7 = videoMetadata || {},
288
+ _ref7$width = _ref7.width,
289
+ videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
290
+ _ref7$height = _ref7.height,
291
+ videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
320
292
 
321
- var _ref10 = contentRect || {},
322
- _ref10$height = _ref10.height,
323
- titleHeight = _ref10$height === void 0 ? 0 : _ref10$height;
293
+ var _useDimensionObserver = hooks.useDimensionObserver(),
294
+ titleRef = _useDimensionObserver.ref,
295
+ _useDimensionObserver2 = _useDimensionObserver.height,
296
+ titleHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
324
297
 
325
298
  var videoMaxHeight = height - titleHeight - (padding ? padding * 2 : 40);
326
299
 
@@ -338,13 +311,13 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
338
311
  return background;
339
312
  }
340
313
 
341
- var _ref11 = background || {},
342
- _ref11$image = _ref11.image,
343
- bgImage = _ref11$image === void 0 ? null : _ref11$image,
344
- _ref11$video = _ref11.video,
345
- bgVideo = _ref11$video === void 0 ? null : _ref11$video,
346
- _ref11$color = _ref11.color,
347
- bgColor = _ref11$color === void 0 ? null : _ref11$color;
314
+ var _ref8 = background || {},
315
+ _ref8$image = _ref8.image,
316
+ bgImage = _ref8$image === void 0 ? null : _ref8$image,
317
+ _ref8$video = _ref8.video,
318
+ bgVideo = _ref8$video === void 0 ? null : _ref8$video,
319
+ _ref8$color = _ref8.color,
320
+ bgColor = _ref8$color === void 0 ? null : _ref8$color;
348
321
 
349
322
  if (bgImage !== null || bgVideo !== null) {
350
323
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultBackground), background);
@@ -366,7 +339,6 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
366
339
  var onVideoReady = React.useCallback(function () {
367
340
  setReady(true);
368
341
  }, [setReady]);
369
- var visibleControls = !autoPlay && !playing || muted || showMediaControls;
370
342
  var items = [/*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
371
343
  className: styles.itemsContainer,
372
344
  style: {
@@ -434,7 +406,9 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
434
406
  height: resizedVideoHeight,
435
407
  resolution: resolution
436
408
  }) : /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, finalVideo, {
437
- ref: apiRef,
409
+ mediaRef: mediaRef,
410
+ paused: !current || !playing,
411
+ muted: muted,
438
412
  width: resizedVideoWidth,
439
413
  height: resizedVideoHeight,
440
414
  className: styles.video,
@@ -443,15 +417,17 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
443
417
  onPause: onPause,
444
418
  onTimeUpdate: onTimeUpdate,
445
419
  onProgressStep: onProgressStep,
446
- onDurationChanged: onDurationChanged,
420
+ onDurationChange: onDurationChange,
447
421
  onSeeked: onSeeked,
448
422
  onEnded: onEnded,
449
- onVolumeChanged: onVolumeChanged,
450
423
  focusable: current && isView,
451
424
  shouldLoad: mediaShouldLoad
452
425
  })), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
453
426
  key: "bottom-content",
454
- className: styles.bottomContent
427
+ className: styles.bottomContent,
428
+ style: {
429
+ transform: "translate(0, -".concat(viewerBottomHeight, "px)")
430
+ }
455
431
  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
456
432
  playing: transitionPlaying,
457
433
  transitions: transitions,
@@ -460,29 +436,14 @@ var UrbaniaTrivia = function UrbaniaTrivia(_ref) {
460
436
  className: styles.closedCaptions,
461
437
  media: closedCaptions,
462
438
  currentTime: currentTime
463
- }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
464
- className: classNames__default["default"]([styles.bottom, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles.visible, visibleControls), _defineProperty__default["default"](_ref12, styles.withGradient, withSeekBar || withControls || muted), _ref12)])
465
- }, hasVideoUrl ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
466
- className: classNames__default["default"]([styles.mediaControls, _defineProperty__default["default"]({}, styles.visible, visibleControls)]),
467
- withSeekBar: withSeekBar,
468
- withControls: withControls,
469
- playing: playing,
470
- muted: muted,
471
- currentTime: currentTime,
472
- duration: duration,
473
- onTogglePlay: togglePlay,
474
- onToggleMute: onToggleMute,
475
- onSeek: onSeek,
476
- focusable: current && isView
477
- }) : null))) : null) : null))];
478
- return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
479
- className: classNames__default["default"]([styles.container, (_ref14 = {}, _defineProperty__default["default"](_ref14, className, className !== null), _defineProperty__default["default"](_ref14, styles.fullscreen, fullscreen), _ref14)]),
480
- "data-screen-ready": isStatic || isCapture || ready
481
- }, longPressBind, {
482
- onMouseMove: onMouseMove
483
- }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
439
+ }) : null)) : null) : null))];
440
+ return /*#__PURE__*/React__default["default"].createElement("div", {
441
+ className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.fullscreen, fullscreen), _ref9)]),
442
+ "data-screen-ready": isStatic || isCapture || ready,
443
+ ref: activityDetectorRef
444
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
484
445
  background: finalBackground,
485
- className: classNames__default["default"]([styles.background, (_ref15 = {}, _defineProperty__default["default"](_ref15, className, className !== null), _defineProperty__default["default"](_ref15, styles.isCustomBackground, isCustomBackground), _defineProperty__default["default"](_ref15, styles.isAnimated, isAnimatedBackground), _ref15)]),
446
+ className: classNames__default["default"]([styles.background, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isCustomBackground, isCustomBackground), _defineProperty__default["default"](_ref10, styles.isAnimated, isAnimatedBackground), _ref10)]),
486
447
  width: width,
487
448
  height: height,
488
449
  resolution: resolution,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-trivia",
3
- "version": "0.3.150",
3
+ "version": "0.3.156",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,16 +50,16 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.150",
54
- "@micromag/element-background": "^0.3.150",
55
- "@micromag/element-call-to-action": "^0.3.150",
56
- "@micromag/element-closed-captions": "^0.3.150",
57
- "@micromag/element-container": "^0.3.150",
58
- "@micromag/element-heading": "^0.3.150",
59
- "@micromag/element-image": "^0.3.150",
60
- "@micromag/element-media-controls": "^0.3.150",
61
- "@micromag/element-video": "^0.3.150",
62
- "@micromag/transforms": "^0.3.150",
53
+ "@micromag/core": "^0.3.156",
54
+ "@micromag/element-background": "^0.3.156",
55
+ "@micromag/element-call-to-action": "^0.3.156",
56
+ "@micromag/element-closed-captions": "^0.3.156",
57
+ "@micromag/element-container": "^0.3.156",
58
+ "@micromag/element-heading": "^0.3.156",
59
+ "@micromag/element-image": "^0.3.156",
60
+ "@micromag/element-media-controls": "^0.3.156",
61
+ "@micromag/element-video": "^0.3.156",
62
+ "@micromag/transforms": "^0.3.156",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
72
+ "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
73
73
  }