@micromag/screen-timeline 0.3.796 → 0.3.801

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 +211 -42
  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
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
4
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
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, { useState, useEffect, useCallback, useMemo, 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,144 @@ 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
+ audioAlternative = _ref2.audio;
135
+ var _ref3 = audioAlternative || {},
136
+ _ref3$autoPlay = _ref3.autoPlay,
137
+ autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
138
+ _ref3$loop = _ref3.loop,
139
+ loop = _ref3$loop === void 0 ? false : _ref3$loop,
140
+ _ref3$media = _ref3.media,
141
+ audioAlternativeMedia = _ref3$media === void 0 ? null : _ref3$media,
142
+ _ref3$withSeekBar = _ref3.withSeekBar,
143
+ withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
144
+ _ref3$withControls = _ref3.withControls,
145
+ withControls = _ref3$withControls === void 0 ? false : _ref3$withControls,
146
+ _ref3$color = _ref3.color,
147
+ color = _ref3$color === void 0 ? null : _ref3$color,
148
+ _ref3$progressColor = _ref3.progressColor,
149
+ progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
150
+ var _useState = useState(false),
151
+ _useState2 = _slicedToArray(_useState, 2),
152
+ hasPlayed = _useState2[0],
153
+ setHasPlayed = _useState2[1];
154
+ var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
155
+ var audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
156
+ console.log({
157
+ playing: playing,
158
+ audioPlaying: audioPlaying
159
+ });
160
+ useEffect(function () {
161
+ if (!current) {
162
+ return function () {};
163
+ }
164
+ setControlsTheme({
165
+ seekBarOnly: withSeekBar && !withControls,
166
+ color: color,
167
+ progressColor: progressColor
168
+ });
169
+ if (withControls || withSeekBar) {
170
+ setControls(true);
171
+ } else {
172
+ setControls(false);
173
+ }
174
+ return function () {
175
+ if (withControls || withSeekBar) {
176
+ setControls(false);
177
+ }
178
+ };
179
+ }, [current, withControls, setControls, withSeekBar, color, progressColor]);
180
+ useEffect(function () {
181
+ if (current && autoPlay) {
182
+ setPlaying(true);
183
+ }
184
+ }, [current, autoPlay]);
185
+ var viewerContainer = useViewerContainer();
186
+ var _useActivityDetector = useActivityDetector({
187
+ element: viewerContainer,
188
+ disabled: !isView,
189
+ timeout: 2000
190
+ }),
191
+ activityDetected = _useActivityDetector.detected;
192
+ var toggleControlsVisibility = useCallback(function () {
193
+ if (activityDetected) {
194
+ showControls();
195
+ } else {
196
+ hideControls();
197
+ }
198
+ }, [activityDetected, showControls, hideControls]);
199
+ useDebounce(toggleControlsVisibility, activityDetected, 1000);
200
+ var trackScreenMedia = useTrackScreenMedia('video');
201
+ var _useState3 = useState(null),
202
+ _useState4 = _slicedToArray(_useState3, 2);
203
+ _useState4[0];
204
+ var setCurrentTime = _useState4[1];
205
+ var _useState5 = useState(null),
206
+ _useState6 = _slicedToArray(_useState5, 2),
207
+ duration = _useState6[0],
208
+ setDuration = _useState6[1];
209
+ var _useState7 = useState(audioAlternativeMedia === null),
210
+ _useState8 = _slicedToArray(_useState7, 2),
211
+ audioReady = _useState8[0],
212
+ setAudioReady = _useState8[1];
213
+ var onAudioReady = useCallback(function () {
214
+ setAudioReady(true);
215
+ }, [setAudioReady]);
216
+ var onAudioTimeUpdate = useCallback(function () {
217
+ var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
218
+ if (time !== null && typeof time.currentTarget !== 'undefined') {
219
+ var _ref4 = time.currentTarget || {},
220
+ _ref4$currentTime = _ref4.currentTime,
221
+ targetTime = _ref4$currentTime === void 0 ? 0 : _ref4$currentTime;
222
+ setCurrentTime(targetTime);
223
+ } else {
224
+ setCurrentTime(0);
225
+ }
226
+ }, [duration, setCurrentTime]);
227
+ var onAudioProgressStep = useCallback(function (step, meta) {
228
+ trackScreenMedia(audioAlternativeMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
229
+ }, [trackScreenMedia, audioAlternativeMedia]);
230
+ var onAudioDurationChange = useCallback(function (dur) {
231
+ setDuration(dur);
232
+ }, [setDuration]);
233
+ var onAudioPlay = useCallback(function (_ref5) {
234
+ var initial = _ref5.initial;
235
+ if (!hasPlayed) {
236
+ setHasPlayed(true);
237
+ }
238
+ trackScreenMedia(audioAlternativeMedia, initial ? 'play' : 'resume');
239
+ }, [trackScreenMedia, audioAlternativeMedia]);
240
+ var onAudioPause = useCallback(function (_ref6) {
241
+ var midway = _ref6.midway;
242
+ trackScreenMedia(audioAlternativeMedia, midway ? 'pause' : 'ended');
243
+ }, [trackScreenMedia, audioAlternativeMedia]);
244
+ var onAudioSeeked = useCallback(function (time) {
245
+ if (time > 0) {
246
+ trackScreenMedia(audioAlternativeMedia, 'seek', {
247
+ currentTime: time
248
+ });
249
+ }
250
+ }, [trackScreenMedia, audioAlternativeMedia]);
251
+ var onAudioEnded = useCallback(function () {
252
+ console.log('ENDED');
253
+ if (current && !loop) {
254
+ setPlaying(false);
255
+ }
256
+ }, [loop, current]);
121
257
  var finalItems = useMemo(function () {
122
258
  return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
123
259
  return {};
@@ -136,20 +272,19 @@ var Timeline = function Timeline(_ref) {
136
272
  var itemsCount = finalItems !== null ? finalItems.length : 0;
137
273
  var hasItems = finalItems !== null && itemsCount;
138
274
  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;
275
+ var _ref7 = curr || {},
276
+ _ref7$image = _ref7.image,
277
+ image = _ref7$image === void 0 ? null : _ref7$image;
142
278
  return acc + (image !== null ? 1 : 0);
143
279
  }, 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;
280
+ var _useState9 = useState(0),
281
+ _useState0 = _slicedToArray(_useState9, 2),
282
+ imagesLoaded = _useState0[0],
283
+ setImagesLoaded = _useState0[1];
284
+ var ready = imagesLoaded >= imagesCount && audioReady;
149
285
  // const transitionsPlaying = current && ready;
150
286
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
151
287
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
152
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
153
288
  var mediaShouldLoad = current || preload;
154
289
  var onImageLoaded = useCallback(function () {
155
290
  setImagesLoaded(function (count) {
@@ -158,10 +293,10 @@ var Timeline = function Timeline(_ref) {
158
293
  }, [setImagesLoaded]);
159
294
  var firstLineRef = useRef(null);
160
295
  var firstContentRef = useRef(null);
161
- var _useState3 = useState(0),
162
- _useState4 = _slicedToArray(_useState3, 2),
163
- imageWidth = _useState4[0],
164
- setImageWidth = _useState4[1];
296
+ var _useState1 = useState(0),
297
+ _useState10 = _slicedToArray(_useState1, 2),
298
+ imageWidth = _useState10[0],
299
+ setImageWidth = _useState10[1];
165
300
  useEffect(function () {
166
301
  if (firstContentRef.current === null) {
167
302
  return;
@@ -173,13 +308,13 @@ var Timeline = function Timeline(_ref) {
173
308
  }
174
309
  }, [width, height, finalItems]);
175
310
  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;
311
+ var _ref8 = item || {},
312
+ _ref8$title = _ref8.title,
313
+ itemTitle = _ref8$title === void 0 ? null : _ref8$title,
314
+ _ref8$description = _ref8.description,
315
+ description = _ref8$description === void 0 ? null : _ref8$description,
316
+ _ref8$image = _ref8.image,
317
+ image = _ref8$image === void 0 ? null : _ref8$image;
183
318
  var hasItemTitle = isTextFilled(itemTitle);
184
319
  var hasDescription = isTextFilled(description);
185
320
  var hasImage = image !== null;
@@ -190,10 +325,10 @@ var Timeline = function Timeline(_ref) {
190
325
  elementsTypes.splice(imageIndex, 1);
191
326
  }
192
327
  var typesCount = elementsTypes.length;
193
- var _ref4 = itemTitle || {},
194
- titleTextStyle = _ref4.textStyle;
195
- var _ref5 = description || {},
196
- descriptionTextStyle = _ref5.textStyle;
328
+ var _ref9 = itemTitle || {},
329
+ titleTextStyle = _ref9.textStyle;
330
+ var _ref0 = description || {},
331
+ descriptionTextStyle = _ref0.textStyle;
197
332
  return /*#__PURE__*/React.createElement("div", {
198
333
  className: styles.item,
199
334
  key: "item-".concat(itemI)
@@ -310,16 +445,16 @@ var Timeline = function Timeline(_ref) {
310
445
  openWebView: openWebView,
311
446
  isPreview: isPreview
312
447
  });
313
- var _useState5 = useState(false),
314
- _useState6 = _slicedToArray(_useState5, 2),
315
- scrolledBottom = _useState6[0],
316
- setScrolledBottom = _useState6[1];
448
+ var _useState11 = useState(false),
449
+ _useState12 = _slicedToArray(_useState11, 2),
450
+ scrolledBottom = _useState12[0],
451
+ setScrolledBottom = _useState12[1];
317
452
  var _useDimensionObserver = useDimensionObserver(),
318
453
  footerRef = _useDimensionObserver.ref,
319
454
  _useDimensionObserver2 = _useDimensionObserver.height,
320
455
  footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
321
- var onScrolledBottom = useCallback(function (_ref9) {
322
- var initial = _ref9.initial;
456
+ var onScrolledBottom = useCallback(function (_ref12) {
457
+ var initial = _ref12.initial;
323
458
  if (initial) {
324
459
  trackScreenEvent('scroll', 'Screen');
325
460
  }
@@ -393,10 +528,24 @@ var Timeline = function Timeline(_ref) {
393
528
  playing: backgroundPlaying,
394
529
  muted: muted,
395
530
  shouldLoad: mediaShouldLoad,
396
- mediaRef: mediaRef,
531
+ mediaRef: audioAlternativeMedia === null ? mediaRef : null,
397
532
  withoutVideo: isPreview,
398
533
  className: styles.background
399
- }) : null);
534
+ }) : null, audioAlternativeMedia !== null ? /*#__PURE__*/React.createElement(Audio, Object.assign({}, audioAlternative, {
535
+ paused: !audioPlaying,
536
+ mediaRef: mediaRef,
537
+ muted: muted,
538
+ className: styles.audio,
539
+ shouldLoad: mediaShouldLoad,
540
+ onReady: onAudioReady,
541
+ onPlay: onAudioPlay,
542
+ onPause: onAudioPause,
543
+ onTimeUpdate: onAudioTimeUpdate,
544
+ onProgressStep: onAudioProgressStep,
545
+ onDurationChange: onAudioDurationChange,
546
+ onSeeked: onAudioSeeked,
547
+ onEnded: onAudioEnded
548
+ })) : null);
400
549
  };
401
550
  Timeline.propTypes = propTypes;
402
551
  Timeline.defaultProps = defaultProps;
@@ -598,6 +747,16 @@ var definition = [{
598
747
  "value": "Line color"
599
748
  }]
600
749
  })
750
+ }, {
751
+ name: 'alternatives',
752
+ type: 'alternatives',
753
+ label: defineMessage({
754
+ id: "68NE9W",
755
+ defaultMessage: [{
756
+ "type": 0,
757
+ "value": "Alternatives"
758
+ }]
759
+ })
601
760
  }, {
602
761
  name: 'background',
603
762
  type: 'background',
@@ -845,6 +1004,16 @@ var definition = [{
845
1004
  "value": "Line color"
846
1005
  }]
847
1006
  })
1007
+ }, {
1008
+ name: 'alternatives',
1009
+ type: 'alternatives',
1010
+ label: defineMessage({
1011
+ id: "68NE9W",
1012
+ defaultMessage: [{
1013
+ "type": 0,
1014
+ "value": "Alternatives"
1015
+ }]
1016
+ })
848
1017
  }, {
849
1018
  name: 'background',
850
1019
  type: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.796",
3
+ "version": "0.3.801",
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.796",
64
- "@micromag/element-background": "^0.3.796",
65
- "@micromag/element-container": "^0.3.796",
66
- "@micromag/element-footer": "^0.3.796",
67
- "@micromag/element-header": "^0.3.796",
68
- "@micromag/element-heading": "^0.3.796",
69
- "@micromag/element-layout": "^0.3.796",
70
- "@micromag/element-scroll": "^0.3.796",
71
- "@micromag/element-text": "^0.3.796",
72
- "@micromag/element-visual": "^0.3.796",
73
- "@micromag/transforms": "^0.3.796",
63
+ "@micromag/core": "^0.3.801",
64
+ "@micromag/element-background": "^0.3.801",
65
+ "@micromag/element-container": "^0.3.801",
66
+ "@micromag/element-footer": "^0.3.801",
67
+ "@micromag/element-header": "^0.3.801",
68
+ "@micromag/element-heading": "^0.3.801",
69
+ "@micromag/element-layout": "^0.3.801",
70
+ "@micromag/element-scroll": "^0.3.801",
71
+ "@micromag/element-text": "^0.3.801",
72
+ "@micromag/element-visual": "^0.3.801",
73
+ "@micromag/transforms": "^0.3.801",
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": "d3bf71e5a23e09d0cd26f543fb1327ff7eb27983"
84
+ "gitHead": "0ce6f19eff38a6fff58c0f156d3f53d741f5113e"
85
85
  }