@micromag/screen-quiz 0.3.150 → 0.3.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +182 -118
  3. package/lib/index.js +181 -115
  4. package/package.json +12 -12
package/assets/css/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .micromag-screen-quiz-answers-emptyAnswer{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{width:100%;height:40px;margin:0 auto;font-size:.75em}.micromag-screen-quiz-answers-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-isUserAnswer{opacity:1!important}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item{opacity:.3}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer,.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:.99}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item,.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;opacity:0}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;opacity:1}.micromag-screen-quiz-answers-didCollapsed .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-answers-withoutGoodAnswer .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-button{position:relative;width:100%;padding:10px;color:#fff}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withGoodAnswer .micromag-screen-quiz-answers-button{padding-right:42px;padding-left:42px}.micromag-screen-quiz-answers-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
2
2
  .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;width:100%;margin-bottom:1em;text-align:center}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;opacity:0;pointer-events:none}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{width:100%;margin:0 auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{position:relative;opacity:1;pointer-events:all}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);mix-blend-mode:difference;font-size:8px}
3
- .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
3
+ .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-quiz-callToAction a{padding:0}.micromag-screen-quiz-callToAction.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease;position:absolute;top:0;left:0;width:100%;min-height:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease;position:absolute;top:0;left:0;width:100%;min-height:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
4
4
  .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{width:100%;margin:0 auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}
5
5
  .micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-description,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-title{margin-bottom:10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{width:100%;margin:0 auto 10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{height:60px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription{height:100px}.micromag-screen-quiz-title-container.micromag-screen-quiz-title-isPlaceholder{padding:10px}
package/es/index.js CHANGED
@@ -5,12 +5,13 @@ import classNames from 'classnames';
5
5
  import PropTypes$1 from 'prop-types';
6
6
  import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
7
7
  import { PropTypes } from '@micromag/core';
8
- import { useScreenRenderContext, useScreenSize, useViewer, useScreenState } from '@micromag/core/contexts';
9
- import { useResizeObserver, useTrackScreenEvent } from '@micromag/core/hooks';
8
+ import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
9
+ import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
10
10
  import { useQuizCreate } from '@micromag/data';
11
11
  import Background from '@micromag/element-background';
12
12
  import CallToAction from '@micromag/element-call-to-action';
13
13
  import Container from '@micromag/element-container';
14
+ import Scroll from '@micromag/element-scroll';
14
15
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
15
16
  import { ScreenElement, Transitions } from '@micromag/core/components';
16
17
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
@@ -73,7 +74,7 @@ var defaultProps$5 = {
73
74
  };
74
75
 
75
76
  var Answers = function Answers(_ref) {
76
- var _ref5;
77
+ var _ref3;
77
78
 
78
79
  var items = _ref.items,
79
80
  answeredIndex = _ref.answeredIndex,
@@ -111,19 +112,13 @@ var Answers = function Answers(_ref) {
111
112
  // we also get the right answer's Y to animate its position
112
113
 
113
114
 
114
- var _useResizeObserver = useResizeObserver(),
115
- answerRef = _useResizeObserver.ref,
116
- answerContentRect = _useResizeObserver.entry.contentRect;
115
+ var _useDimensionObserver = useDimensionObserver(),
116
+ answerRef = _useDimensionObserver.ref,
117
+ answerHeight = _useDimensionObserver.height;
117
118
 
118
- var _ref3 = answerContentRect || {},
119
- answerHeight = _ref3.height;
120
-
121
- var _useResizeObserver2 = useResizeObserver(),
122
- rightAnswerRef = _useResizeObserver2.ref,
123
- rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
124
-
125
- var _ref4 = rightAnswerContentRect || {},
126
- rightAnswerHeight = _ref4.height;
119
+ var _useDimensionObserver2 = useDimensionObserver(),
120
+ rightAnswerRef = _useDimensionObserver2.ref,
121
+ rightAnswerHeight = _useDimensionObserver2.height;
127
122
 
128
123
  var rightAnswerTop = useMemo(function () {
129
124
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
@@ -173,7 +168,7 @@ var Answers = function Answers(_ref) {
173
168
  }
174
169
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
175
170
  return /*#__PURE__*/React.createElement("div", {
176
- className: classNames([styles$4.container, (_ref5 = {}, _defineProperty(_ref5, styles$4.answered, answered), _defineProperty(_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref5, className, className !== null), _ref5)]),
171
+ className: classNames([styles$4.container, (_ref3 = {}, _defineProperty(_ref3, styles$4.answered, answered), _defineProperty(_ref3, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref3, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref3, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref3, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref3, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref3, className, className !== null), _ref3)]),
177
172
  ref: answerRef,
178
173
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
179
174
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -181,23 +176,23 @@ var Answers = function Answers(_ref) {
181
176
  }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
182
177
  className: styles$4.items
183
178
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
184
- var _ref8;
179
+ var _ref6;
185
180
 
186
181
  var userAnswer = answerI === answeredIndex;
187
182
 
188
- var _ref6 = answer || {},
189
- _ref6$good = _ref6.good,
190
- rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
191
- _ref6$label = _ref6.label,
192
- label = _ref6$label === void 0 ? null : _ref6$label,
193
- _ref6$buttonStyle = _ref6.buttonStyle,
194
- answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle,
195
- _ref6$textStyle = _ref6.textStyle,
196
- answerButtonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
183
+ var _ref4 = answer || {},
184
+ _ref4$good = _ref4.good,
185
+ rightAnswer = _ref4$good === void 0 ? false : _ref4$good,
186
+ _ref4$label = _ref4.label,
187
+ label = _ref4$label === void 0 ? null : _ref4$label,
188
+ _ref4$buttonStyle = _ref4.buttonStyle,
189
+ answerButtonStyle = _ref4$buttonStyle === void 0 ? null : _ref4$buttonStyle,
190
+ _ref4$textStyle = _ref4.textStyle,
191
+ answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
197
192
 
198
- var _ref7 = label || {},
199
- _ref7$textStyle = _ref7.textStyle,
200
- textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
193
+ var _ref5 = label || {},
194
+ _ref5$textStyle = _ref5.textStyle,
195
+ textStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
201
196
 
202
197
  var hasAnswer = isTextFilled(label);
203
198
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -214,7 +209,7 @@ var Answers = function Answers(_ref) {
214
209
  return /*#__PURE__*/React.createElement("div", {
215
210
  key: "answer-".concat(answerI),
216
211
  ref: rightAnswer ? rightAnswerRef : null,
217
- className: classNames([styles$4.item, (_ref8 = {}, _defineProperty(_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
212
+ className: classNames([styles$4.item, (_ref6 = {}, _defineProperty(_ref6, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref6, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref6, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref6)]),
218
213
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
219
214
  transform: "translateY(".concat(-rightAnswerTop, "px)")
220
215
  } : null,
@@ -336,7 +331,7 @@ var defaultProps$4 = {
336
331
  };
337
332
 
338
333
  var Question = function Question(_ref) {
339
- var _ref4;
334
+ var _ref3;
340
335
 
341
336
  var question = _ref.question,
342
337
  answers = _ref.answers,
@@ -385,22 +380,12 @@ var Question = function Question(_ref) {
385
380
  setResultVisible = _useState2[1];
386
381
 
387
382
  var answered = answeredIndex !== null;
388
-
389
- var _useResizeObserver = useResizeObserver(),
390
- resultRef = _useResizeObserver.ref,
391
- resultContentRect = _useResizeObserver.entry.contentRect;
392
-
393
- var _ref3 = resultContentRect || {};
394
- _ref3.height; // eslint-disable-line
395
-
396
-
397
383
  var onAnswersCollapse = useCallback(function () {
398
384
  setResultVisible(true);
399
385
  }, [setResultVisible]);
400
386
  var hasIndex = index !== null && totalCount !== null;
401
387
  return /*#__PURE__*/React.createElement(Layout, {
402
- className: classNames([styles$3.container, (_ref4 = {}, _defineProperty(_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles$3.resultVisible, resultVisible), _defineProperty(_ref4, className, className !== null), _ref4)]),
403
- fullscreen: true,
388
+ className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
404
389
  verticalAlign: verticalAlign,
405
390
  style: style
406
391
  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
@@ -456,8 +441,7 @@ var Question = function Question(_ref) {
456
441
  onTransitionEnd: onAnswerTransitionEnd
457
442
  }), withResult ? /*#__PURE__*/React.createElement("div", {
458
443
  className: styles$3.result,
459
- key: "results",
460
- ref: resultRef
444
+ key: "results"
461
445
  }, /*#__PURE__*/React.createElement("div", {
462
446
  className: styles$3.resultContent
463
447
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -511,8 +495,6 @@ var propTypes$3 = {
511
495
  transitions: PropTypes.transitions,
512
496
  transitionStagger: PropTypes$1.number,
513
497
  type: PropTypes$1.string,
514
- enableInteraction: PropTypes$1.func,
515
- disableInteraction: PropTypes$1.func,
516
498
  className: PropTypes$1.string
517
499
  };
518
500
  var defaultProps$3 = {
@@ -534,8 +516,6 @@ var defaultProps$3 = {
534
516
  transitions: null,
535
517
  transitionStagger: 100,
536
518
  type: null,
537
- enableInteraction: null,
538
- disableInteraction: null,
539
519
  className: null
540
520
  };
541
521
 
@@ -558,8 +538,6 @@ var QuizScreen = function QuizScreen(_ref) {
558
538
  transitions = _ref.transitions,
559
539
  transitionStagger = _ref.transitionStagger,
560
540
  type = _ref.type,
561
- enableInteraction = _ref.enableInteraction,
562
- disableInteraction = _ref.disableInteraction,
563
541
  className = _ref.className;
564
542
  var screenId = id || 'screen-id';
565
543
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -567,12 +545,8 @@ var QuizScreen = function QuizScreen(_ref) {
567
545
  var _useScreenSize = useScreenSize(),
568
546
  width = _useScreenSize.width,
569
547
  height = _useScreenSize.height,
570
- menuOverScreen = _useScreenSize.menuOverScreen,
571
548
  resolution = _useScreenSize.resolution;
572
549
 
573
- var _useViewer = useViewer(),
574
- menuSize = _useViewer.menuSize;
575
-
576
550
  var _useScreenRenderConte = useScreenRenderContext(),
577
551
  isView = _useScreenRenderConte.isView,
578
552
  isPreview = _useScreenRenderConte.isPreview,
@@ -581,20 +555,31 @@ var QuizScreen = function QuizScreen(_ref) {
581
555
  isStatic = _useScreenRenderConte.isStatic,
582
556
  isCapture = _useScreenRenderConte.isCapture;
583
557
 
558
+ var _useViewerContext = useViewerContext(),
559
+ viewerTopHeight = _useViewerContext.topHeight,
560
+ viewerBottomHeight = _useViewerContext.bottomHeight,
561
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
562
+
563
+ var _useViewerWebView = useViewerWebView(),
564
+ openWebView = _useViewerWebView.open;
565
+
566
+ var _usePlaybackContext = usePlaybackContext(),
567
+ muted = _usePlaybackContext.muted;
568
+
569
+ var mediaRef = usePlaybackMediaRef(current);
584
570
  var transitionPlaying = current;
585
571
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
586
572
  var backgroundPlaying = current && (isView || isEdit);
587
573
  var mediaShouldLoad = current || active; // Call to Action
588
574
 
589
- var hasCallToAction = callToAction !== null && callToAction.active === true;
590
-
591
- var _useResizeObserver = useResizeObserver(),
592
- callToActionRef = _useResizeObserver.ref,
593
- callToActionRect = _useResizeObserver.entry.contentRect;
575
+ var _ref2 = callToAction || {},
576
+ _ref2$active = _ref2.active,
577
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
594
578
 
595
- var _ref2 = callToActionRect || {},
596
- _ref2$height = _ref2.height,
597
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
579
+ var _useDimensionObserver = useDimensionObserver(),
580
+ callToActionRef = _useDimensionObserver.ref,
581
+ _useDimensionObserver2 = _useDimensionObserver.height,
582
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
598
583
 
599
584
  var showInstantAnswer = isStatic || isCapture;
600
585
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
@@ -645,6 +630,27 @@ var QuizScreen = function QuizScreen(_ref) {
645
630
  });
646
631
  }
647
632
  }, [userAnswerIndex, answers, submitQuiz]);
633
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
634
+
635
+ var _useState3 = useState(false),
636
+ _useState4 = _slicedToArray(_useState3, 2),
637
+ scrolledBottom = _useState4[0],
638
+ setScrolledBottom = _useState4[1];
639
+
640
+ var onScrolledBottom = useCallback(function (_ref5) {
641
+ var initial = _ref5.initial;
642
+
643
+ if (initial) {
644
+ trackScreenEvent('scroll', 'Screen');
645
+ }
646
+
647
+ setScrolledBottom(true);
648
+ }, [trackScreenEvent]);
649
+ var onScrolledNotBottom = useCallback(function () {
650
+ setScrolledBottom(false);
651
+ }, [setScrolledBottom]);
652
+ var isSplitted = layout === 'split';
653
+ var verticalAlign = isSplitted ? null : layout;
648
654
  return /*#__PURE__*/React.createElement("div", {
649
655
  className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
650
656
  "data-screen-ready": true
@@ -654,10 +660,17 @@ var QuizScreen = function QuizScreen(_ref) {
654
660
  height: height,
655
661
  resolution: resolution,
656
662
  playing: backgroundPlaying,
657
- shouldLoad: mediaShouldLoad
663
+ muted: muted,
664
+ shouldLoad: mediaShouldLoad,
665
+ mediaRef: mediaRef
658
666
  }) : null, /*#__PURE__*/React.createElement(Container, {
659
667
  width: width,
660
668
  height: height
669
+ }, /*#__PURE__*/React.createElement(Scroll, {
670
+ verticalAlign: verticalAlign,
671
+ disabled: scrollingDisabled,
672
+ onScrolledBottom: onScrolledBottom,
673
+ onScrolledNotBottom: onScrolledNotBottom
661
674
  }, /*#__PURE__*/React.createElement(Question, {
662
675
  question: question,
663
676
  answers: answers,
@@ -672,7 +685,6 @@ var QuizScreen = function QuizScreen(_ref) {
672
685
  showInstantAnswer: showInstantAnswer,
673
686
  withResult: true,
674
687
  layout: layout,
675
- callToActionHeight: callToActionHeight,
676
688
  transitions: transitions,
677
689
  transitionPlaying: transitionPlaying,
678
690
  transitionStagger: transitionStagger,
@@ -681,21 +693,24 @@ var QuizScreen = function QuizScreen(_ref) {
681
693
  className: styles$2.question,
682
694
  style: !isPlaceholder ? {
683
695
  padding: spacing,
684
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
696
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
697
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
685
698
  } : null
686
- }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
699
+ })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
687
700
  ref: callToActionRef,
688
- className: styles$2.callToAction,
689
- callToAction: callToAction,
701
+ className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
702
+ style: {
703
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
704
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
705
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
706
+ paddingTop: spacing / 2,
707
+ paddingBottom: spacing / 2
708
+ }
709
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
690
710
  animationDisabled: isPreview,
691
711
  focusable: current && isView,
692
- screenSize: {
693
- width: width,
694
- height: height
695
- },
696
- enableInteraction: enableInteraction,
697
- disableInteraction: disableInteraction
698
- }) : null));
712
+ openWebView: openWebView
713
+ }))) : null));
699
714
  };
700
715
 
701
716
  QuizScreen.propTypes = propTypes$3;
@@ -1029,11 +1044,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1029
1044
  var _useScreenSize = useScreenSize(),
1030
1045
  width = _useScreenSize.width,
1031
1046
  height = _useScreenSize.height,
1032
- menuOverScreen = _useScreenSize.menuOverScreen,
1033
1047
  resolution = _useScreenSize.resolution;
1034
1048
 
1035
- var _useViewer = useViewer(),
1036
- menuSize = _useViewer.menuSize;
1049
+ var _useViewerContext = useViewerContext(),
1050
+ viewerTopHeight = _useViewerContext.topHeight,
1051
+ viewerBottomHeight = _useViewerContext.bottomHeight,
1052
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1037
1053
 
1038
1054
  var _useScreenRenderConte = useScreenRenderContext(),
1039
1055
  isView = _useScreenRenderConte.isView,
@@ -1043,6 +1059,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1043
1059
  isStatic = _useScreenRenderConte.isStatic,
1044
1060
  isCapture = _useScreenRenderConte.isCapture;
1045
1061
 
1062
+ var _usePlaybackContext = usePlaybackContext(),
1063
+ muted = _usePlaybackContext.muted;
1064
+
1065
+ var mediaRef = usePlaybackMediaRef(current);
1066
+
1067
+ var _useViewerWebView = useViewerWebView(),
1068
+ openWebView = _useViewerWebView.open;
1069
+
1046
1070
  var screenState = useScreenState();
1047
1071
 
1048
1072
  var _ref2 = screenState !== null ? screenState.split('.') : [],
@@ -1059,13 +1083,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1059
1083
 
1060
1084
  var hasCallToAction = callToAction !== null && callToAction.active === true;
1061
1085
 
1062
- var _useResizeObserver = useResizeObserver(),
1063
- callToActionRef = _useResizeObserver.ref,
1064
- callToActionRect = _useResizeObserver.entry.contentRect;
1065
-
1066
- var _ref4 = callToActionRect || {},
1067
- _ref4$height = _ref4.height,
1068
- callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
1086
+ var _useDimensionObserver = useDimensionObserver(),
1087
+ callToActionRef = _useDimensionObserver.ref,
1088
+ _useDimensionObserver2 = _useDimensionObserver.height,
1089
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1069
1090
 
1070
1091
  var showInstantAnswer = isStatic || isCapture;
1071
1092
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
@@ -1133,15 +1154,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1133
1154
  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1134
1155
  var currentPoints = useMemo(function () {
1135
1156
  return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1136
- var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1137
- _ref5$answers = _ref5.answers,
1138
- questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
1157
+ var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1158
+ _ref4$answers = _ref4.answers,
1159
+ questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1139
1160
 
1140
1161
  var answerIndex = userAnswers[answerQuestionIndex];
1141
1162
 
1142
- var _ref6 = questionAnswers[answerIndex] || {},
1143
- _ref6$points = _ref6.points,
1144
- points = _ref6$points === void 0 ? 0 : _ref6$points;
1163
+ var _ref5 = questionAnswers[answerIndex] || {},
1164
+ _ref5$points = _ref5.points,
1165
+ points = _ref5$points === void 0 ? 0 : _ref5$points;
1145
1166
 
1146
1167
  return points + totalPoints;
1147
1168
  }, 0) : 0;
@@ -1158,11 +1179,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1158
1179
  return (results || [])[parseInt(stateIndex, 10)] || null;
1159
1180
  }
1160
1181
 
1161
- return (results || []).sort(function (_ref7, _ref8) {
1182
+ return (results || []).sort(function (_ref6, _ref7) {
1183
+ var _ref6$points = _ref6.points,
1184
+ pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1162
1185
  var _ref7$points = _ref7.points,
1163
- pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
1164
- var _ref8$points = _ref8.points,
1165
- pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
1186
+ pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1166
1187
 
1167
1188
  if (pointsA === pointsB) {
1168
1189
  return 0;
@@ -1170,23 +1191,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1170
1191
 
1171
1192
  return pointsA > pointsB ? 1 : -1;
1172
1193
  }).reduce(function (lastResult, result) {
1173
- var _ref9 = lastResult || {},
1174
- _ref9$points = _ref9.points,
1175
- lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
1194
+ var _ref8 = lastResult || {},
1195
+ _ref8$points = _ref8.points,
1196
+ lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1176
1197
 
1177
- var _ref10 = result || {},
1178
- _ref10$points = _ref10.points,
1179
- points = _ref10$points === void 0 ? 0 : _ref10$points;
1198
+ var _ref9 = result || {},
1199
+ _ref9$points = _ref9.points,
1200
+ points = _ref9$points === void 0 ? 0 : _ref9$points;
1180
1201
 
1181
1202
  return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
1182
1203
  }, null);
1183
1204
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1184
1205
 
1185
- var _ref11 = currentResult || {},
1186
- _ref11$background = _ref11.background,
1187
- resultBackground = _ref11$background === void 0 ? null : _ref11$background,
1188
- _ref11$layout = _ref11.layout,
1189
- resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
1206
+ var _ref10 = currentResult || {},
1207
+ _ref10$background = _ref10.background,
1208
+ resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1209
+ _ref10$layout = _ref10.layout,
1210
+ resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1190
1211
 
1191
1212
  var _useQuizCreate = useQuizCreate({
1192
1213
  screenId: screenId
@@ -1248,6 +1269,35 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1248
1269
  lastQuestionIndexRef.current = questionIndex;
1249
1270
  return 'right';
1250
1271
  }, [questionIndex]);
1272
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
1273
+
1274
+ var _useState5 = useState(false),
1275
+ _useState6 = _slicedToArray(_useState5, 2),
1276
+ scrolledBottom = _useState6[0],
1277
+ setScrolledBottom = _useState6[1];
1278
+
1279
+ var onScrolledBottom = useCallback(function (_ref11) {
1280
+ var initial = _ref11.initial;
1281
+
1282
+ if (initial) {
1283
+ trackScreenEvent('scroll', 'Screen');
1284
+ }
1285
+
1286
+ setScrolledBottom(true);
1287
+ }, [trackScreenEvent]);
1288
+ var onScrolledNotBottom = useCallback(function () {
1289
+ setScrolledBottom(false);
1290
+ }, [setScrolledBottom]);
1291
+ var verticalAlign = layout;
1292
+
1293
+ if (isIntro && introLayout !== null) {
1294
+ verticalAlign = introLayout;
1295
+ } else if (isQuestion && questionLayout !== null) {
1296
+ verticalAlign = questionLayout;
1297
+ } else if (isResults && resultLayout !== null) {
1298
+ verticalAlign = questionLayout;
1299
+ }
1300
+
1251
1301
  return /*#__PURE__*/React.createElement("div", {
1252
1302
  className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1253
1303
  "data-screen-ready": true
@@ -1261,11 +1311,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1261
1311
  height: height,
1262
1312
  resolution: resolution,
1263
1313
  playing: backgroundPlaying,
1314
+ muted: muted,
1264
1315
  shouldLoad: backgroundShouldLoad,
1316
+ mediaRef: mediaRef,
1265
1317
  className: styles$2.background
1266
1318
  }))) : null, /*#__PURE__*/React.createElement(Container, {
1267
1319
  width: width,
1268
1320
  height: height
1321
+ }, /*#__PURE__*/React.createElement(Scroll, {
1322
+ verticalAlign: verticalAlign,
1323
+ disabled: scrollingDisabled,
1324
+ onScrolledBottom: onScrolledBottom,
1325
+ onScrolledNotBottom: onScrolledNotBottom
1269
1326
  }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
1270
1327
  key: "intro",
1271
1328
  classNames: styles$2,
@@ -1283,7 +1340,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1283
1340
  className: styles$2.intro,
1284
1341
  style: !isPlaceholder ? {
1285
1342
  padding: spacing,
1286
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1343
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1344
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1287
1345
  } : null,
1288
1346
  onClickButton: onClickIntroButton
1289
1347
  })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -1315,7 +1373,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1315
1373
  className: styles$2.question,
1316
1374
  style: !isPlaceholder ? {
1317
1375
  padding: spacing,
1318
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1376
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1377
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1319
1378
  } : null
1320
1379
  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
1321
1380
  key: "results",
@@ -1332,19 +1391,24 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1332
1391
  className: styles$2.results,
1333
1392
  style: !isPlaceholder ? {
1334
1393
  padding: spacing,
1335
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1394
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1395
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1336
1396
  } : null
1337
- }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
1397
+ }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
1338
1398
  ref: callToActionRef,
1339
- className: styles$2.callToAction,
1340
- callToAction: callToAction,
1399
+ className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
1400
+ style: {
1401
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1402
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1403
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1404
+ paddingTop: spacing / 2,
1405
+ paddingBottom: spacing / 2
1406
+ }
1407
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
1341
1408
  animationDisabled: isPreview,
1342
1409
  focusable: current && isView,
1343
- screenSize: {
1344
- width: width,
1345
- height: height
1346
- }
1347
- }) : null));
1410
+ openWebView: openWebView
1411
+ }))) : null));
1348
1412
  };
1349
1413
 
1350
1414
  QuizMultipleScreen.propTypes = propTypes;
@@ -1813,4 +1877,4 @@ var definition = [{
1813
1877
  }]
1814
1878
  }];
1815
1879
 
1816
- export { QuizScreen, definition as default };
1880
+ export { QuizMultipleScreen, QuizScreen, definition as default };
package/lib/index.js CHANGED
@@ -15,6 +15,7 @@ var data = require('@micromag/data');
15
15
  var Background = require('@micromag/element-background');
16
16
  var CallToAction = require('@micromag/element-call-to-action');
17
17
  var Container = require('@micromag/element-container');
18
+ var Scroll = require('@micromag/element-scroll');
18
19
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
19
20
  var components = require('@micromag/core/components');
20
21
  var utils = require('@micromag/core/utils');
@@ -38,6 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
39
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
40
  var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
40
41
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
42
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
41
43
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
42
44
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
43
45
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
@@ -94,7 +96,7 @@ var defaultProps$5 = {
94
96
  };
95
97
 
96
98
  var Answers = function Answers(_ref) {
97
- var _ref5;
99
+ var _ref3;
98
100
 
99
101
  var items = _ref.items,
100
102
  answeredIndex = _ref.answeredIndex,
@@ -132,19 +134,13 @@ var Answers = function Answers(_ref) {
132
134
  // we also get the right answer's Y to animate its position
133
135
 
134
136
 
135
- var _useResizeObserver = hooks.useResizeObserver(),
136
- answerRef = _useResizeObserver.ref,
137
- answerContentRect = _useResizeObserver.entry.contentRect;
137
+ var _useDimensionObserver = hooks.useDimensionObserver(),
138
+ answerRef = _useDimensionObserver.ref,
139
+ answerHeight = _useDimensionObserver.height;
138
140
 
139
- var _ref3 = answerContentRect || {},
140
- answerHeight = _ref3.height;
141
-
142
- var _useResizeObserver2 = hooks.useResizeObserver(),
143
- rightAnswerRef = _useResizeObserver2.ref,
144
- rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
145
-
146
- var _ref4 = rightAnswerContentRect || {},
147
- rightAnswerHeight = _ref4.height;
141
+ var _useDimensionObserver2 = hooks.useDimensionObserver(),
142
+ rightAnswerRef = _useDimensionObserver2.ref,
143
+ rightAnswerHeight = _useDimensionObserver2.height;
148
144
 
149
145
  var rightAnswerTop = React.useMemo(function () {
150
146
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
@@ -194,7 +190,7 @@ var Answers = function Answers(_ref) {
194
190
  }
195
191
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
196
192
  return /*#__PURE__*/React__default["default"].createElement("div", {
197
- className: classNames__default["default"]([styles$4.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$4.answered, answered), _defineProperty__default["default"](_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, className, className !== null), _ref5)]),
193
+ className: classNames__default["default"]([styles$4.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$4.answered, answered), _defineProperty__default["default"](_ref3, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref3, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref3, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref3, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref3, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
198
194
  ref: answerRef,
199
195
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
200
196
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -202,23 +198,23 @@ var Answers = function Answers(_ref) {
202
198
  }, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
203
199
  className: styles$4.items
204
200
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
205
- var _ref8;
201
+ var _ref6;
206
202
 
207
203
  var userAnswer = answerI === answeredIndex;
208
204
 
209
- var _ref6 = answer || {},
210
- _ref6$good = _ref6.good,
211
- rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
212
- _ref6$label = _ref6.label,
213
- label = _ref6$label === void 0 ? null : _ref6$label,
214
- _ref6$buttonStyle = _ref6.buttonStyle,
215
- answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle,
216
- _ref6$textStyle = _ref6.textStyle,
217
- answerButtonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
205
+ var _ref4 = answer || {},
206
+ _ref4$good = _ref4.good,
207
+ rightAnswer = _ref4$good === void 0 ? false : _ref4$good,
208
+ _ref4$label = _ref4.label,
209
+ label = _ref4$label === void 0 ? null : _ref4$label,
210
+ _ref4$buttonStyle = _ref4.buttonStyle,
211
+ answerButtonStyle = _ref4$buttonStyle === void 0 ? null : _ref4$buttonStyle,
212
+ _ref4$textStyle = _ref4.textStyle,
213
+ answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
218
214
 
219
- var _ref7 = label || {},
220
- _ref7$textStyle = _ref7.textStyle,
221
- textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
215
+ var _ref5 = label || {},
216
+ _ref5$textStyle = _ref5.textStyle,
217
+ textStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
222
218
 
223
219
  var hasAnswer = utils.isTextFilled(label);
224
220
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -235,7 +231,7 @@ var Answers = function Answers(_ref) {
235
231
  return /*#__PURE__*/React__default["default"].createElement("div", {
236
232
  key: "answer-".concat(answerI),
237
233
  ref: rightAnswer ? rightAnswerRef : null,
238
- className: classNames__default["default"]([styles$4.item, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
234
+ className: classNames__default["default"]([styles$4.item, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref6, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref6, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref6)]),
239
235
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
240
236
  transform: "translateY(".concat(-rightAnswerTop, "px)")
241
237
  } : null,
@@ -357,7 +353,7 @@ var defaultProps$4 = {
357
353
  };
358
354
 
359
355
  var Question = function Question(_ref) {
360
- var _ref4;
356
+ var _ref3;
361
357
 
362
358
  var question = _ref.question,
363
359
  answers = _ref.answers,
@@ -406,22 +402,12 @@ var Question = function Question(_ref) {
406
402
  setResultVisible = _useState2[1];
407
403
 
408
404
  var answered = answeredIndex !== null;
409
-
410
- var _useResizeObserver = hooks.useResizeObserver(),
411
- resultRef = _useResizeObserver.ref,
412
- resultContentRect = _useResizeObserver.entry.contentRect;
413
-
414
- var _ref3 = resultContentRect || {};
415
- _ref3.height; // eslint-disable-line
416
-
417
-
418
405
  var onAnswersCollapse = React.useCallback(function () {
419
406
  setResultVisible(true);
420
407
  }, [setResultVisible]);
421
408
  var hasIndex = index !== null && totalCount !== null;
422
409
  return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
423
- className: classNames__default["default"]([styles$3.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
424
- fullscreen: true,
410
+ className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
425
411
  verticalAlign: verticalAlign,
426
412
  style: style
427
413
  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -477,8 +463,7 @@ var Question = function Question(_ref) {
477
463
  onTransitionEnd: onAnswerTransitionEnd
478
464
  }), withResult ? /*#__PURE__*/React__default["default"].createElement("div", {
479
465
  className: styles$3.result,
480
- key: "results",
481
- ref: resultRef
466
+ key: "results"
482
467
  }, /*#__PURE__*/React__default["default"].createElement("div", {
483
468
  className: styles$3.resultContent
484
469
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -532,8 +517,6 @@ var propTypes$3 = {
532
517
  transitions: core.PropTypes.transitions,
533
518
  transitionStagger: PropTypes__default["default"].number,
534
519
  type: PropTypes__default["default"].string,
535
- enableInteraction: PropTypes__default["default"].func,
536
- disableInteraction: PropTypes__default["default"].func,
537
520
  className: PropTypes__default["default"].string
538
521
  };
539
522
  var defaultProps$3 = {
@@ -555,8 +538,6 @@ var defaultProps$3 = {
555
538
  transitions: null,
556
539
  transitionStagger: 100,
557
540
  type: null,
558
- enableInteraction: null,
559
- disableInteraction: null,
560
541
  className: null
561
542
  };
562
543
 
@@ -579,8 +560,6 @@ var QuizScreen = function QuizScreen(_ref) {
579
560
  transitions = _ref.transitions,
580
561
  transitionStagger = _ref.transitionStagger,
581
562
  type = _ref.type,
582
- enableInteraction = _ref.enableInteraction,
583
- disableInteraction = _ref.disableInteraction,
584
563
  className = _ref.className;
585
564
  var screenId = id || 'screen-id';
586
565
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -588,12 +567,8 @@ var QuizScreen = function QuizScreen(_ref) {
588
567
  var _useScreenSize = contexts.useScreenSize(),
589
568
  width = _useScreenSize.width,
590
569
  height = _useScreenSize.height,
591
- menuOverScreen = _useScreenSize.menuOverScreen,
592
570
  resolution = _useScreenSize.resolution;
593
571
 
594
- var _useViewer = contexts.useViewer(),
595
- menuSize = _useViewer.menuSize;
596
-
597
572
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
598
573
  isView = _useScreenRenderConte.isView,
599
574
  isPreview = _useScreenRenderConte.isPreview,
@@ -602,20 +577,31 @@ var QuizScreen = function QuizScreen(_ref) {
602
577
  isStatic = _useScreenRenderConte.isStatic,
603
578
  isCapture = _useScreenRenderConte.isCapture;
604
579
 
580
+ var _useViewerContext = contexts.useViewerContext(),
581
+ viewerTopHeight = _useViewerContext.topHeight,
582
+ viewerBottomHeight = _useViewerContext.bottomHeight,
583
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
584
+
585
+ var _useViewerWebView = contexts.useViewerWebView(),
586
+ openWebView = _useViewerWebView.open;
587
+
588
+ var _usePlaybackContext = contexts.usePlaybackContext(),
589
+ muted = _usePlaybackContext.muted;
590
+
591
+ var mediaRef = contexts.usePlaybackMediaRef(current);
605
592
  var transitionPlaying = current;
606
593
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
607
594
  var backgroundPlaying = current && (isView || isEdit);
608
595
  var mediaShouldLoad = current || active; // Call to Action
609
596
 
610
- var hasCallToAction = callToAction !== null && callToAction.active === true;
611
-
612
- var _useResizeObserver = hooks.useResizeObserver(),
613
- callToActionRef = _useResizeObserver.ref,
614
- callToActionRect = _useResizeObserver.entry.contentRect;
597
+ var _ref2 = callToAction || {},
598
+ _ref2$active = _ref2.active,
599
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
615
600
 
616
- var _ref2 = callToActionRect || {},
617
- _ref2$height = _ref2.height,
618
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
601
+ var _useDimensionObserver = hooks.useDimensionObserver(),
602
+ callToActionRef = _useDimensionObserver.ref,
603
+ _useDimensionObserver2 = _useDimensionObserver.height,
604
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
619
605
 
620
606
  var showInstantAnswer = isStatic || isCapture;
621
607
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
@@ -666,6 +652,27 @@ var QuizScreen = function QuizScreen(_ref) {
666
652
  });
667
653
  }
668
654
  }, [userAnswerIndex, answers, submitQuiz]);
655
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
656
+
657
+ var _useState3 = React.useState(false),
658
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
659
+ scrolledBottom = _useState4[0],
660
+ setScrolledBottom = _useState4[1];
661
+
662
+ var onScrolledBottom = React.useCallback(function (_ref5) {
663
+ var initial = _ref5.initial;
664
+
665
+ if (initial) {
666
+ trackScreenEvent('scroll', 'Screen');
667
+ }
668
+
669
+ setScrolledBottom(true);
670
+ }, [trackScreenEvent]);
671
+ var onScrolledNotBottom = React.useCallback(function () {
672
+ setScrolledBottom(false);
673
+ }, [setScrolledBottom]);
674
+ var isSplitted = layout === 'split';
675
+ var verticalAlign = isSplitted ? null : layout;
669
676
  return /*#__PURE__*/React__default["default"].createElement("div", {
670
677
  className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
671
678
  "data-screen-ready": true
@@ -675,10 +682,17 @@ var QuizScreen = function QuizScreen(_ref) {
675
682
  height: height,
676
683
  resolution: resolution,
677
684
  playing: backgroundPlaying,
678
- shouldLoad: mediaShouldLoad
685
+ muted: muted,
686
+ shouldLoad: mediaShouldLoad,
687
+ mediaRef: mediaRef
679
688
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
680
689
  width: width,
681
690
  height: height
691
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
692
+ verticalAlign: verticalAlign,
693
+ disabled: scrollingDisabled,
694
+ onScrolledBottom: onScrolledBottom,
695
+ onScrolledNotBottom: onScrolledNotBottom
682
696
  }, /*#__PURE__*/React__default["default"].createElement(Question, {
683
697
  question: question,
684
698
  answers: answers,
@@ -693,7 +707,6 @@ var QuizScreen = function QuizScreen(_ref) {
693
707
  showInstantAnswer: showInstantAnswer,
694
708
  withResult: true,
695
709
  layout: layout,
696
- callToActionHeight: callToActionHeight,
697
710
  transitions: transitions,
698
711
  transitionPlaying: transitionPlaying,
699
712
  transitionStagger: transitionStagger,
@@ -702,21 +715,24 @@ var QuizScreen = function QuizScreen(_ref) {
702
715
  className: styles$2.question,
703
716
  style: !isPlaceholder ? {
704
717
  padding: spacing,
705
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
718
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
719
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
706
720
  } : null
707
- }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
721
+ })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
708
722
  ref: callToActionRef,
709
- className: styles$2.callToAction,
710
- callToAction: callToAction,
723
+ className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
724
+ style: {
725
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
726
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
727
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
728
+ paddingTop: spacing / 2,
729
+ paddingBottom: spacing / 2
730
+ }
731
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
711
732
  animationDisabled: isPreview,
712
733
  focusable: current && isView,
713
- screenSize: {
714
- width: width,
715
- height: height
716
- },
717
- enableInteraction: enableInteraction,
718
- disableInteraction: disableInteraction
719
- }) : null));
734
+ openWebView: openWebView
735
+ }))) : null));
720
736
  };
721
737
 
722
738
  QuizScreen.propTypes = propTypes$3;
@@ -1050,11 +1066,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1050
1066
  var _useScreenSize = contexts.useScreenSize(),
1051
1067
  width = _useScreenSize.width,
1052
1068
  height = _useScreenSize.height,
1053
- menuOverScreen = _useScreenSize.menuOverScreen,
1054
1069
  resolution = _useScreenSize.resolution;
1055
1070
 
1056
- var _useViewer = contexts.useViewer(),
1057
- menuSize = _useViewer.menuSize;
1071
+ var _useViewerContext = contexts.useViewerContext(),
1072
+ viewerTopHeight = _useViewerContext.topHeight,
1073
+ viewerBottomHeight = _useViewerContext.bottomHeight,
1074
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1058
1075
 
1059
1076
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
1060
1077
  isView = _useScreenRenderConte.isView,
@@ -1064,6 +1081,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1064
1081
  isStatic = _useScreenRenderConte.isStatic,
1065
1082
  isCapture = _useScreenRenderConte.isCapture;
1066
1083
 
1084
+ var _usePlaybackContext = contexts.usePlaybackContext(),
1085
+ muted = _usePlaybackContext.muted;
1086
+
1087
+ var mediaRef = contexts.usePlaybackMediaRef(current);
1088
+
1089
+ var _useViewerWebView = contexts.useViewerWebView(),
1090
+ openWebView = _useViewerWebView.open;
1091
+
1067
1092
  var screenState = contexts.useScreenState();
1068
1093
 
1069
1094
  var _ref2 = screenState !== null ? screenState.split('.') : [],
@@ -1080,13 +1105,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1080
1105
 
1081
1106
  var hasCallToAction = callToAction !== null && callToAction.active === true;
1082
1107
 
1083
- var _useResizeObserver = hooks.useResizeObserver(),
1084
- callToActionRef = _useResizeObserver.ref,
1085
- callToActionRect = _useResizeObserver.entry.contentRect;
1086
-
1087
- var _ref4 = callToActionRect || {},
1088
- _ref4$height = _ref4.height,
1089
- callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
1108
+ var _useDimensionObserver = hooks.useDimensionObserver(),
1109
+ callToActionRef = _useDimensionObserver.ref,
1110
+ _useDimensionObserver2 = _useDimensionObserver.height,
1111
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1090
1112
 
1091
1113
  var showInstantAnswer = isStatic || isCapture;
1092
1114
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
@@ -1154,15 +1176,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1154
1176
  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1155
1177
  var currentPoints = React.useMemo(function () {
1156
1178
  return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1157
- var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1158
- _ref5$answers = _ref5.answers,
1159
- questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
1179
+ var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1180
+ _ref4$answers = _ref4.answers,
1181
+ questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1160
1182
 
1161
1183
  var answerIndex = userAnswers[answerQuestionIndex];
1162
1184
 
1163
- var _ref6 = questionAnswers[answerIndex] || {},
1164
- _ref6$points = _ref6.points,
1165
- points = _ref6$points === void 0 ? 0 : _ref6$points;
1185
+ var _ref5 = questionAnswers[answerIndex] || {},
1186
+ _ref5$points = _ref5.points,
1187
+ points = _ref5$points === void 0 ? 0 : _ref5$points;
1166
1188
 
1167
1189
  return points + totalPoints;
1168
1190
  }, 0) : 0;
@@ -1179,11 +1201,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1179
1201
  return (results || [])[parseInt(stateIndex, 10)] || null;
1180
1202
  }
1181
1203
 
1182
- return (results || []).sort(function (_ref7, _ref8) {
1204
+ return (results || []).sort(function (_ref6, _ref7) {
1205
+ var _ref6$points = _ref6.points,
1206
+ pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1183
1207
  var _ref7$points = _ref7.points,
1184
- pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
1185
- var _ref8$points = _ref8.points,
1186
- pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
1208
+ pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1187
1209
 
1188
1210
  if (pointsA === pointsB) {
1189
1211
  return 0;
@@ -1191,23 +1213,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1191
1213
 
1192
1214
  return pointsA > pointsB ? 1 : -1;
1193
1215
  }).reduce(function (lastResult, result) {
1194
- var _ref9 = lastResult || {},
1195
- _ref9$points = _ref9.points,
1196
- lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
1216
+ var _ref8 = lastResult || {},
1217
+ _ref8$points = _ref8.points,
1218
+ lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1197
1219
 
1198
- var _ref10 = result || {},
1199
- _ref10$points = _ref10.points,
1200
- points = _ref10$points === void 0 ? 0 : _ref10$points;
1220
+ var _ref9 = result || {},
1221
+ _ref9$points = _ref9.points,
1222
+ points = _ref9$points === void 0 ? 0 : _ref9$points;
1201
1223
 
1202
1224
  return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
1203
1225
  }, null);
1204
1226
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1205
1227
 
1206
- var _ref11 = currentResult || {},
1207
- _ref11$background = _ref11.background,
1208
- resultBackground = _ref11$background === void 0 ? null : _ref11$background,
1209
- _ref11$layout = _ref11.layout,
1210
- resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
1228
+ var _ref10 = currentResult || {},
1229
+ _ref10$background = _ref10.background,
1230
+ resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1231
+ _ref10$layout = _ref10.layout,
1232
+ resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1211
1233
 
1212
1234
  var _useQuizCreate = data.useQuizCreate({
1213
1235
  screenId: screenId
@@ -1269,6 +1291,35 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1269
1291
  lastQuestionIndexRef.current = questionIndex;
1270
1292
  return 'right';
1271
1293
  }, [questionIndex]);
1294
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
1295
+
1296
+ var _useState5 = React.useState(false),
1297
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1298
+ scrolledBottom = _useState6[0],
1299
+ setScrolledBottom = _useState6[1];
1300
+
1301
+ var onScrolledBottom = React.useCallback(function (_ref11) {
1302
+ var initial = _ref11.initial;
1303
+
1304
+ if (initial) {
1305
+ trackScreenEvent('scroll', 'Screen');
1306
+ }
1307
+
1308
+ setScrolledBottom(true);
1309
+ }, [trackScreenEvent]);
1310
+ var onScrolledNotBottom = React.useCallback(function () {
1311
+ setScrolledBottom(false);
1312
+ }, [setScrolledBottom]);
1313
+ var verticalAlign = layout;
1314
+
1315
+ if (isIntro && introLayout !== null) {
1316
+ verticalAlign = introLayout;
1317
+ } else if (isQuestion && questionLayout !== null) {
1318
+ verticalAlign = questionLayout;
1319
+ } else if (isResults && resultLayout !== null) {
1320
+ verticalAlign = questionLayout;
1321
+ }
1322
+
1272
1323
  return /*#__PURE__*/React__default["default"].createElement("div", {
1273
1324
  className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
1274
1325
  "data-screen-ready": true
@@ -1282,11 +1333,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1282
1333
  height: height,
1283
1334
  resolution: resolution,
1284
1335
  playing: backgroundPlaying,
1336
+ muted: muted,
1285
1337
  shouldLoad: backgroundShouldLoad,
1338
+ mediaRef: mediaRef,
1286
1339
  className: styles$2.background
1287
1340
  }))) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
1288
1341
  width: width,
1289
1342
  height: height
1343
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1344
+ verticalAlign: verticalAlign,
1345
+ disabled: scrollingDisabled,
1346
+ onScrolledBottom: onScrolledBottom,
1347
+ onScrolledNotBottom: onScrolledNotBottom
1290
1348
  }, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1291
1349
  key: "intro",
1292
1350
  classNames: styles$2,
@@ -1304,7 +1362,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1304
1362
  className: styles$2.intro,
1305
1363
  style: !isPlaceholder ? {
1306
1364
  padding: spacing,
1307
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1365
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1366
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1308
1367
  } : null,
1309
1368
  onClickButton: onClickIntroButton
1310
1369
  })) : null, isQuestion ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -1336,7 +1395,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1336
1395
  className: styles$2.question,
1337
1396
  style: !isPlaceholder ? {
1338
1397
  padding: spacing,
1339
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1398
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1399
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1340
1400
  } : null
1341
1401
  })) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1342
1402
  key: "results",
@@ -1353,19 +1413,24 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1353
1413
  className: styles$2.results,
1354
1414
  style: !isPlaceholder ? {
1355
1415
  padding: spacing,
1356
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1416
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1417
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1357
1418
  } : null
1358
- }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
1419
+ }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
1359
1420
  ref: callToActionRef,
1360
- className: styles$2.callToAction,
1361
- callToAction: callToAction,
1421
+ className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
1422
+ style: {
1423
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1424
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1425
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1426
+ paddingTop: spacing / 2,
1427
+ paddingBottom: spacing / 2
1428
+ }
1429
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
1362
1430
  animationDisabled: isPreview,
1363
1431
  focusable: current && isView,
1364
- screenSize: {
1365
- width: width,
1366
- height: height
1367
- }
1368
- }) : null));
1432
+ openWebView: openWebView
1433
+ }))) : null));
1369
1434
  };
1370
1435
 
1371
1436
  QuizMultipleScreen.propTypes = propTypes;
@@ -1834,5 +1899,6 @@ var definition = [{
1834
1899
  }]
1835
1900
  }];
1836
1901
 
1902
+ exports.QuizMultipleScreen = QuizMultipleScreen;
1837
1903
  exports.QuizScreen = QuizScreen;
1838
1904
  exports["default"] = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.150",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,16 +52,16 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.150",
56
- "@micromag/data": "^0.3.150",
57
- "@micromag/element-background": "^0.3.150",
58
- "@micromag/element-button": "^0.3.150",
59
- "@micromag/element-call-to-action": "^0.3.150",
60
- "@micromag/element-container": "^0.3.150",
61
- "@micromag/element-heading": "^0.3.150",
62
- "@micromag/element-layout": "^0.3.150",
63
- "@micromag/element-text": "^0.3.150",
64
- "@micromag/transforms": "^0.3.150",
55
+ "@micromag/core": "^0.3.152",
56
+ "@micromag/data": "^0.3.152",
57
+ "@micromag/element-background": "^0.3.152",
58
+ "@micromag/element-button": "^0.3.152",
59
+ "@micromag/element-call-to-action": "^0.3.152",
60
+ "@micromag/element-container": "^0.3.152",
61
+ "@micromag/element-heading": "^0.3.152",
62
+ "@micromag/element-layout": "^0.3.152",
63
+ "@micromag/element-text": "^0.3.152",
64
+ "@micromag/transforms": "^0.3.152",
65
65
  "classnames": "^2.2.6",
66
66
  "lodash": "^4.17.21",
67
67
  "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  },
75
- "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
75
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
76
76
  }