@micromag/screen-timeline 0.3.797 → 0.3.803

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 (2) hide show
  1. package/es/index.js +213 -43
  2. package/package.json +13 -13
package/es/index.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
3
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
4
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
6
6
  import classNames from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
- import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
8
+ import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement } from '@micromag/core/components';
11
- import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
12
- import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
11
+ import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
12
+ import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
13
13
  import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
14
+ import Audio from '@micromag/element-audio';
14
15
  import Background from '@micromag/element-background';
15
16
  import Container from '@micromag/element-container';
16
17
  import Footer from '@micromag/element-footer';
@@ -41,6 +42,7 @@ var propTypes = {
41
42
  header: PropTypes$1.header,
42
43
  footer: PropTypes$1.footer,
43
44
  background: PropTypes$1.backgroundElement,
45
+ alternatives: PropTypes$1.alternatives,
44
46
  current: PropTypes.bool,
45
47
  active: PropTypes.bool,
46
48
  preload: PropTypes.bool,
@@ -63,6 +65,7 @@ var defaultProps = {
63
65
  header: null,
64
66
  footer: null,
65
67
  background: null,
68
+ alternatives: null,
66
69
  current: true,
67
70
  active: true,
68
71
  preload: true,
@@ -88,6 +91,7 @@ var Timeline = function Timeline(_ref) {
88
91
  header = _ref.header,
89
92
  footer = _ref.footer,
90
93
  background = _ref.background,
94
+ alternatives = _ref.alternatives,
91
95
  current = _ref.current,
92
96
  active = _ref.active,
93
97
  preload = _ref.preload,
@@ -105,12 +109,6 @@ var Timeline = function Timeline(_ref) {
105
109
  viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
106
110
  var _useViewerWebView = useViewerWebView(),
107
111
  openWebView = _useViewerWebView.open;
108
- var _usePlaybackContext = usePlaybackContext(),
109
- muted = _usePlaybackContext.muted;
110
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
111
- mediaRef = _usePlaybackMediaRef.ref,
112
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
113
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
114
112
  var _useScreenRenderConte = useScreenRenderContext(),
115
113
  isView = _useScreenRenderConte.isView,
116
114
  isPreview = _useScreenRenderConte.isPreview,
@@ -118,6 +116,145 @@ var Timeline = function Timeline(_ref) {
118
116
  isEdit = _useScreenRenderConte.isEdit,
119
117
  isStatic = _useScreenRenderConte.isStatic,
120
118
  isCapture = _useScreenRenderConte.isCapture;
119
+ var _usePlaybackContext = usePlaybackContext(),
120
+ muted = _usePlaybackContext.muted,
121
+ playing = _usePlaybackContext.playing,
122
+ setControls = _usePlaybackContext.setControls;
123
+ _usePlaybackContext.setControlsSuggestPlay;
124
+ var setControlsTheme = _usePlaybackContext.setControlsTheme,
125
+ setPlaying = _usePlaybackContext.setPlaying;
126
+ _usePlaybackContext.controlsVisible;
127
+ var showControls = _usePlaybackContext.showControls,
128
+ hideControls = _usePlaybackContext.hideControls;
129
+ var _usePlaybackMediaRef = usePlaybackMediaRef(current),
130
+ mediaRef = _usePlaybackMediaRef.ref,
131
+ _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
132
+ isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
133
+ var _ref2 = alternatives || {},
134
+ _ref2$audio = _ref2.audio,
135
+ audioAlternative = _ref2$audio === void 0 ? null : _ref2$audio;
136
+ var _ref3 = audioAlternative || {},
137
+ _ref3$autoPlay = _ref3.autoPlay,
138
+ autoPlay = _ref3$autoPlay === void 0 ? false : _ref3$autoPlay,
139
+ _ref3$loop = _ref3.loop,
140
+ loop = _ref3$loop === void 0 ? false : _ref3$loop,
141
+ _ref3$media = _ref3.media,
142
+ audioAlternativeMedia = _ref3$media === void 0 ? null : _ref3$media,
143
+ _ref3$withSeekBar = _ref3.withSeekBar,
144
+ withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
145
+ _ref3$withControls = _ref3.withControls,
146
+ withControls = _ref3$withControls === void 0 ? false : _ref3$withControls,
147
+ _ref3$color = _ref3.color,
148
+ color = _ref3$color === void 0 ? null : _ref3$color,
149
+ _ref3$progressColor = _ref3.progressColor,
150
+ progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
151
+ var finalAudioAlternative = useMemo(function () {
152
+ return audioAlternative !== null ? _objectSpread(_objectSpread({}, audioAlternative), {}, {
153
+ autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
154
+ }) : null;
155
+ }, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
156
+ var _useState = useState(false),
157
+ _useState2 = _slicedToArray(_useState, 2),
158
+ hasPlayed = _useState2[0],
159
+ setHasPlayed = _useState2[1];
160
+ var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
161
+ var audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
162
+ useEffect(function () {
163
+ if (!current) {
164
+ return function () {};
165
+ }
166
+ setControlsTheme({
167
+ seekBarOnly: withSeekBar && !withControls,
168
+ color: color,
169
+ progressColor: progressColor
170
+ });
171
+ if (withControls || withSeekBar) {
172
+ setControls(true);
173
+ } else {
174
+ setControls(false);
175
+ }
176
+ return function () {
177
+ if (withControls || withSeekBar) {
178
+ setControls(false);
179
+ }
180
+ };
181
+ }, [current, withControls, setControls, withSeekBar, color, progressColor]);
182
+ useEffect(function () {
183
+ if (current && autoPlay) {
184
+ setPlaying(true);
185
+ }
186
+ }, [current, autoPlay]);
187
+ var viewerContainer = useViewerContainer();
188
+ var _useActivityDetector = useActivityDetector({
189
+ element: viewerContainer,
190
+ disabled: !isView,
191
+ timeout: 2000
192
+ }),
193
+ activityDetected = _useActivityDetector.detected;
194
+ var toggleControlsVisibility = useCallback(function () {
195
+ if (activityDetected) {
196
+ showControls();
197
+ } else {
198
+ hideControls();
199
+ }
200
+ }, [activityDetected, showControls, hideControls]);
201
+ useDebounce(toggleControlsVisibility, activityDetected, 1000);
202
+ var trackScreenMedia = useTrackScreenMedia('video');
203
+ var _useState3 = useState(null),
204
+ _useState4 = _slicedToArray(_useState3, 2);
205
+ _useState4[0];
206
+ var setCurrentTime = _useState4[1];
207
+ var _useState5 = useState(null),
208
+ _useState6 = _slicedToArray(_useState5, 2),
209
+ duration = _useState6[0],
210
+ setDuration = _useState6[1];
211
+ var _useState7 = useState(audioAlternativeMedia === null),
212
+ _useState8 = _slicedToArray(_useState7, 2),
213
+ audioReady = _useState8[0],
214
+ setAudioReady = _useState8[1];
215
+ var onAudioReady = useCallback(function () {
216
+ setAudioReady(true);
217
+ }, [setAudioReady]);
218
+ var onAudioTimeUpdate = useCallback(function () {
219
+ var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
220
+ if (time !== null && typeof time.currentTarget !== 'undefined') {
221
+ var _ref4 = time.currentTarget || {},
222
+ _ref4$currentTime = _ref4.currentTime,
223
+ targetTime = _ref4$currentTime === void 0 ? 0 : _ref4$currentTime;
224
+ setCurrentTime(targetTime);
225
+ } else {
226
+ setCurrentTime(0);
227
+ }
228
+ }, [duration, setCurrentTime]);
229
+ var onAudioProgressStep = useCallback(function (step, meta) {
230
+ trackScreenMedia(audioAlternativeMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
231
+ }, [trackScreenMedia, audioAlternativeMedia]);
232
+ var onAudioDurationChange = useCallback(function (dur) {
233
+ setDuration(dur);
234
+ }, [setDuration]);
235
+ var onAudioPlay = useCallback(function (_ref5) {
236
+ var initial = _ref5.initial;
237
+ if (!hasPlayed) {
238
+ setHasPlayed(true);
239
+ }
240
+ trackScreenMedia(audioAlternativeMedia, initial ? 'play' : 'resume');
241
+ }, [trackScreenMedia, audioAlternativeMedia]);
242
+ var onAudioPause = useCallback(function (_ref6) {
243
+ var midway = _ref6.midway;
244
+ trackScreenMedia(audioAlternativeMedia, midway ? 'pause' : 'ended');
245
+ }, [trackScreenMedia, audioAlternativeMedia]);
246
+ var onAudioSeeked = useCallback(function (time) {
247
+ if (time > 0) {
248
+ trackScreenMedia(audioAlternativeMedia, 'seek', {
249
+ currentTime: time
250
+ });
251
+ }
252
+ }, [trackScreenMedia, audioAlternativeMedia]);
253
+ var onAudioEnded = useCallback(function () {
254
+ if (current && !loop) {
255
+ setPlaying(false);
256
+ }
257
+ }, [loop, current]);
121
258
  var finalItems = useMemo(function () {
122
259
  return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
123
260
  return {};
@@ -136,20 +273,19 @@ var Timeline = function Timeline(_ref) {
136
273
  var itemsCount = finalItems !== null ? finalItems.length : 0;
137
274
  var hasItems = finalItems !== null && itemsCount;
138
275
  var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
139
- var _ref2 = curr || {},
140
- _ref2$image = _ref2.image,
141
- image = _ref2$image === void 0 ? null : _ref2$image;
276
+ var _ref7 = curr || {},
277
+ _ref7$image = _ref7.image,
278
+ image = _ref7$image === void 0 ? null : _ref7$image;
142
279
  return acc + (image !== null ? 1 : 0);
143
280
  }, 0) : 0;
144
- var _useState = useState(0),
145
- _useState2 = _slicedToArray(_useState, 2),
146
- imagesLoaded = _useState2[0],
147
- setImagesLoaded = _useState2[1];
148
- var ready = imagesLoaded >= imagesCount;
281
+ var _useState9 = useState(0),
282
+ _useState0 = _slicedToArray(_useState9, 2),
283
+ imagesLoaded = _useState0[0],
284
+ setImagesLoaded = _useState0[1];
285
+ var ready = imagesLoaded >= imagesCount && audioReady;
149
286
  // const transitionsPlaying = current && ready;
150
287
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
151
288
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
152
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
153
289
  var mediaShouldLoad = current || preload;
154
290
  var onImageLoaded = useCallback(function () {
155
291
  setImagesLoaded(function (count) {
@@ -158,10 +294,10 @@ var Timeline = function Timeline(_ref) {
158
294
  }, [setImagesLoaded]);
159
295
  var firstLineRef = useRef(null);
160
296
  var firstContentRef = useRef(null);
161
- var _useState3 = useState(0),
162
- _useState4 = _slicedToArray(_useState3, 2),
163
- imageWidth = _useState4[0],
164
- setImageWidth = _useState4[1];
297
+ var _useState1 = useState(0),
298
+ _useState10 = _slicedToArray(_useState1, 2),
299
+ imageWidth = _useState10[0],
300
+ setImageWidth = _useState10[1];
165
301
  useEffect(function () {
166
302
  if (firstContentRef.current === null) {
167
303
  return;
@@ -173,13 +309,13 @@ var Timeline = function Timeline(_ref) {
173
309
  }
174
310
  }, [width, height, finalItems]);
175
311
  var timelineElements = (finalItems || []).map(function (item, itemI) {
176
- var _ref3 = item || {},
177
- _ref3$title = _ref3.title,
178
- itemTitle = _ref3$title === void 0 ? null : _ref3$title,
179
- _ref3$description = _ref3.description,
180
- description = _ref3$description === void 0 ? null : _ref3$description,
181
- _ref3$image = _ref3.image,
182
- image = _ref3$image === void 0 ? null : _ref3$image;
312
+ var _ref8 = item || {},
313
+ _ref8$title = _ref8.title,
314
+ itemTitle = _ref8$title === void 0 ? null : _ref8$title,
315
+ _ref8$description = _ref8.description,
316
+ description = _ref8$description === void 0 ? null : _ref8$description,
317
+ _ref8$image = _ref8.image,
318
+ image = _ref8$image === void 0 ? null : _ref8$image;
183
319
  var hasItemTitle = isTextFilled(itemTitle);
184
320
  var hasDescription = isTextFilled(description);
185
321
  var hasImage = image !== null;
@@ -190,10 +326,10 @@ var Timeline = function Timeline(_ref) {
190
326
  elementsTypes.splice(imageIndex, 1);
191
327
  }
192
328
  var typesCount = elementsTypes.length;
193
- var _ref4 = itemTitle || {},
194
- titleTextStyle = _ref4.textStyle;
195
- var _ref5 = description || {},
196
- descriptionTextStyle = _ref5.textStyle;
329
+ var _ref9 = itemTitle || {},
330
+ titleTextStyle = _ref9.textStyle;
331
+ var _ref0 = description || {},
332
+ descriptionTextStyle = _ref0.textStyle;
197
333
  return /*#__PURE__*/React.createElement("div", {
198
334
  className: styles.item,
199
335
  key: "item-".concat(itemI)
@@ -310,16 +446,16 @@ var Timeline = function Timeline(_ref) {
310
446
  openWebView: openWebView,
311
447
  isPreview: isPreview
312
448
  });
313
- var _useState5 = useState(false),
314
- _useState6 = _slicedToArray(_useState5, 2),
315
- scrolledBottom = _useState6[0],
316
- setScrolledBottom = _useState6[1];
449
+ var _useState11 = useState(false),
450
+ _useState12 = _slicedToArray(_useState11, 2),
451
+ scrolledBottom = _useState12[0],
452
+ setScrolledBottom = _useState12[1];
317
453
  var _useDimensionObserver = useDimensionObserver(),
318
454
  footerRef = _useDimensionObserver.ref,
319
455
  _useDimensionObserver2 = _useDimensionObserver.height,
320
456
  footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
321
- var onScrolledBottom = useCallback(function (_ref9) {
322
- var initial = _ref9.initial;
457
+ var onScrolledBottom = useCallback(function (_ref12) {
458
+ var initial = _ref12.initial;
323
459
  if (initial) {
324
460
  trackScreenEvent('scroll', 'Screen');
325
461
  }
@@ -393,10 +529,24 @@ var Timeline = function Timeline(_ref) {
393
529
  playing: backgroundPlaying,
394
530
  muted: muted,
395
531
  shouldLoad: mediaShouldLoad,
396
- mediaRef: mediaRef,
532
+ mediaRef: audioAlternativeMedia === null ? mediaRef : null,
397
533
  withoutVideo: isPreview,
398
534
  className: styles.background
399
- }) : null);
535
+ }) : null, audioAlternativeMedia !== null ? /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudioAlternative, {
536
+ paused: !audioPlaying,
537
+ mediaRef: mediaRef,
538
+ muted: muted,
539
+ className: styles.audio,
540
+ shouldLoad: mediaShouldLoad,
541
+ onReady: onAudioReady,
542
+ onPlay: onAudioPlay,
543
+ onPause: onAudioPause,
544
+ onTimeUpdate: onAudioTimeUpdate,
545
+ onProgressStep: onAudioProgressStep,
546
+ onDurationChange: onAudioDurationChange,
547
+ onSeeked: onAudioSeeked,
548
+ onEnded: onAudioEnded
549
+ })) : null);
400
550
  };
401
551
  Timeline.propTypes = propTypes;
402
552
  Timeline.defaultProps = defaultProps;
@@ -598,6 +748,16 @@ var definition = [{
598
748
  "value": "Line color"
599
749
  }]
600
750
  })
751
+ }, {
752
+ name: 'alternatives',
753
+ type: 'alternatives',
754
+ label: defineMessage({
755
+ id: "68NE9W",
756
+ defaultMessage: [{
757
+ "type": 0,
758
+ "value": "Alternatives"
759
+ }]
760
+ })
601
761
  }, {
602
762
  name: 'background',
603
763
  type: 'background',
@@ -845,6 +1005,16 @@ var definition = [{
845
1005
  "value": "Line color"
846
1006
  }]
847
1007
  })
1008
+ }, {
1009
+ name: 'alternatives',
1010
+ type: 'alternatives',
1011
+ label: defineMessage({
1012
+ id: "68NE9W",
1013
+ defaultMessage: [{
1014
+ "type": 0,
1015
+ "value": "Alternatives"
1016
+ }]
1017
+ })
848
1018
  }, {
849
1019
  name: 'background',
850
1020
  type: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.797",
3
+ "version": "0.3.803",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -60,17 +60,17 @@
60
60
  },
61
61
  "dependencies": {
62
62
  "@babel/runtime": "^7.13.10",
63
- "@micromag/core": "^0.3.797",
64
- "@micromag/element-background": "^0.3.797",
65
- "@micromag/element-container": "^0.3.797",
66
- "@micromag/element-footer": "^0.3.797",
67
- "@micromag/element-header": "^0.3.797",
68
- "@micromag/element-heading": "^0.3.797",
69
- "@micromag/element-layout": "^0.3.797",
70
- "@micromag/element-scroll": "^0.3.797",
71
- "@micromag/element-text": "^0.3.797",
72
- "@micromag/element-visual": "^0.3.797",
73
- "@micromag/transforms": "^0.3.797",
63
+ "@micromag/core": "^0.3.803",
64
+ "@micromag/element-background": "^0.3.803",
65
+ "@micromag/element-container": "^0.3.803",
66
+ "@micromag/element-footer": "^0.3.803",
67
+ "@micromag/element-header": "^0.3.803",
68
+ "@micromag/element-heading": "^0.3.803",
69
+ "@micromag/element-layout": "^0.3.803",
70
+ "@micromag/element-scroll": "^0.3.803",
71
+ "@micromag/element-text": "^0.3.803",
72
+ "@micromag/element-visual": "^0.3.803",
73
+ "@micromag/transforms": "^0.3.803",
74
74
  "classnames": "^2.2.6",
75
75
  "lodash": "^4.17.21",
76
76
  "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
81
81
  "access": "public",
82
82
  "registry": "https://registry.npmjs.org/"
83
83
  },
84
- "gitHead": "6944f2be19e84970e0619c79a7f733433633093c"
84
+ "gitHead": "b8d7486367da5144fa0824e48527c44aa4123ddf"
85
85
  }