@micromag/screen-video 0.4.71 → 0.4.76

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 (3) hide show
  1. package/es/index.d.ts +2 -2
  2. package/es/index.js +554 -350
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ForwardedRef } from 'react';
3
- import { VideoElement, Header, Footer, BackgroundElement } from '@micromag/core';
3
+ import { VideoElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface VideoScreenProps {
6
6
  layout?: 'middle' | 'full';
@@ -13,7 +13,7 @@ interface VideoScreenProps {
13
13
  active?: boolean;
14
14
  preload?: boolean;
15
15
  spacing?: number;
16
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
16
+ mediaRef?: ForwardedRef<MediaElement> | null;
17
17
  className?: string | null;
18
18
  }
19
19
  declare function VideoScreen({ layout, video, gotoNextScreenOnEnd, header, footer, background, current, active: _active, preload, spacing, mediaRef: customMediaRef, className, }: VideoScreenProps): react_jsx_runtime.JSX.Element;
package/es/index.js CHANGED
@@ -1,14 +1,12 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
+ import { c } from 'react/compiler-runtime';
5
3
  import { getSizeWithinBounds } from '@folklore/size';
6
4
  import classNames from 'classnames';
7
- import { useState, useEffect, useCallback, useMemo } from 'react';
8
- import { ScreenElement, Empty, PlaceholderVideo } from '@micromag/core/components';
9
- import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
10
- import { useTrackScreenMedia, useActivityDetector, useDebounce, useMediaThumbnail } from '@micromag/core/hooks';
11
- import { isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
5
+ import { useState, useEffect } from 'react';
6
+ import { PlaceholderVideo, Empty, ScreenElement } from '@micromag/core/components';
7
+ import { useScreenSize, useScreenRenderContext, useViewerNavigation, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
8
+ import { useTrackScreenMedia, useDebounce } from '@micromag/core/hooks';
9
+ import { isHeaderFilled, isFooterFilled, getFooterProps, getMediaThumbnail, mergeRefs } from '@micromag/core/utils';
12
10
  import Background from '@micromag/element-background';
13
11
  import ClosedCaptions from '@micromag/element-closed-captions';
14
12
  import Container from '@micromag/element-container';
@@ -16,353 +14,554 @@ import Footer from '@micromag/element-footer';
16
14
  import Header from '@micromag/element-header';
17
15
  import Image from '@micromag/element-image';
18
16
  import Video from '@micromag/element-video';
19
- import { jsxs, jsx } from 'react/jsx-runtime';
17
+ import { jsx, jsxs } from 'react/jsx-runtime';
20
18
 
21
19
  var styles = {"container":"micromag-screen-video-container","content":"micromag-screen-video-content","emptyContainer":"micromag-screen-video-emptyContainer","empty":"micromag-screen-video-empty","inner":"micromag-screen-video-inner","header":"micromag-screen-video-header","bottom":"micromag-screen-video-bottom","placeholder":"micromag-screen-video-placeholder","videoContainer":"micromag-screen-video-videoContainer","fullscreen":"micromag-screen-video-fullscreen","image":"micromag-screen-video-image","video":"micromag-screen-video-video"};
22
20
 
23
- function VideoScreen(_ref) {
24
- var _ref$layout = _ref.layout,
25
- layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
26
- _ref$video = _ref.video,
27
- video = _ref$video === void 0 ? null : _ref$video,
28
- _ref$gotoNextScreenOn = _ref.gotoNextScreenOnEnd,
29
- gotoNextScreenOnEnd = _ref$gotoNextScreenOn === void 0 ? false : _ref$gotoNextScreenOn,
30
- _ref$header = _ref.header,
31
- header = _ref$header === void 0 ? null : _ref$header,
32
- _ref$footer = _ref.footer,
33
- footer = _ref$footer === void 0 ? null : _ref$footer,
34
- _ref$background = _ref.background,
35
- background = _ref$background === void 0 ? null : _ref$background,
36
- _ref$current = _ref.current,
37
- current = _ref$current === void 0 ? true : _ref$current;
38
- _ref.active;
39
- var _ref$preload = _ref.preload,
40
- preload = _ref$preload === void 0 ? true : _ref$preload,
41
- _ref$spacing = _ref.spacing,
42
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
43
- _ref$mediaRef = _ref.mediaRef,
44
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
45
- _ref$className = _ref.className,
46
- className = _ref$className === void 0 ? null : _ref$className;
47
- var trackScreenMedia = useTrackScreenMedia('video');
48
- var _useScreenSize = useScreenSize(),
49
- width = _useScreenSize.width,
50
- height = _useScreenSize.height,
51
- resolution = _useScreenSize.resolution;
52
- var _useScreenRenderConte = useScreenRenderContext(),
53
- isView = _useScreenRenderConte.isView,
54
- isPreview = _useScreenRenderConte.isPreview,
55
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
56
- isEdit = _useScreenRenderConte.isEdit,
57
- isStatic = _useScreenRenderConte.isStatic,
58
- isCapture = _useScreenRenderConte.isCapture;
59
- var _useViewerNavigation = useViewerNavigation(),
60
- gotoNextScreen = _useViewerNavigation.gotoNextScreen;
61
- var _useViewerContext = useViewerContext(),
62
- viewerTopHeight = _useViewerContext.topHeight,
63
- viewerBottomHeight = _useViewerContext.bottomHeight,
64
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
65
- var _useViewerWebView = useViewerWebView(),
66
- openWebView = _useViewerWebView.open;
67
- var mediaShouldLoad = current || preload;
68
- var shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
69
- var _ref2 = video || {},
70
- _ref2$autoPlay = _ref2.autoPlay,
71
- autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
72
- _ref2$loop = _ref2.loop,
73
- loop = _ref2$loop === void 0 ? false : _ref2$loop,
74
- _ref2$media = _ref2.media,
75
- videoMedia = _ref2$media === void 0 ? null : _ref2$media,
76
- _ref2$thumbnail = _ref2.thumbnail,
77
- thumbnail = _ref2$thumbnail === void 0 ? null : _ref2$thumbnail,
78
- _ref2$captions = _ref2.captions,
79
- captions = _ref2$captions === void 0 ? null : _ref2$captions,
80
- _ref2$closedCaptions = _ref2.closedCaptions,
81
- closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
82
- _ref2$withSeekBar = _ref2.withSeekBar,
83
- withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
84
- _ref2$withControls = _ref2.withControls,
85
- withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
86
- _ref2$color = _ref2.color,
87
- color = _ref2$color === void 0 ? null : _ref2$color,
88
- _ref2$progressColor = _ref2.progressColor,
89
- progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
90
- var _usePlaybackContext = usePlaybackContext(),
91
- playing = _usePlaybackContext.playing,
92
- muted = _usePlaybackContext.muted,
93
- setControls = _usePlaybackContext.setControls,
94
- setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
95
- setControlsTheme = _usePlaybackContext.setControlsTheme,
96
- setPlaying = _usePlaybackContext.setPlaying,
97
- controlsVisible = _usePlaybackContext.controlsVisible,
98
- showControls = _usePlaybackContext.showControls,
99
- hideControls = _usePlaybackContext.hideControls,
100
- currentQualityLevel = _usePlaybackContext.currentQualityLevel,
101
- setCurrentQualityLevel = _usePlaybackContext.setCurrentQualityLevel;
102
- var _usePlaybackMediaRef = usePlaybackMediaRef(current),
103
- mediaRef = _usePlaybackMediaRef.ref,
104
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
105
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
106
- var _useState = useState(false),
107
- _useState2 = _slicedToArray(_useState, 2),
108
- hasPlayed = _useState2[0],
109
- setHasPlayed = _useState2[1];
110
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
111
- var videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
112
- var shouldDisplayPoster = isPreview || isCapture;
113
- useEffect(function () {
21
+ function VideoScreen(t0) {
22
+ const $ = c(112);
23
+ const {
24
+ layout: t1,
25
+ video: t2,
26
+ gotoNextScreenOnEnd: t3,
27
+ header: t4,
28
+ footer: t5,
29
+ background: t6,
30
+ current: t7,
31
+ active: t8,
32
+ preload: t9,
33
+ spacing: t10,
34
+ mediaRef: t11,
35
+ className: t12
36
+ } = t0;
37
+ const layout = t1 === undefined ? "middle" : t1;
38
+ const video = t2 === undefined ? null : t2;
39
+ const gotoNextScreenOnEnd = t3 === undefined ? false : t3;
40
+ const header = t4 === undefined ? null : t4;
41
+ const footer = t5 === undefined ? null : t5;
42
+ const background = t6 === undefined ? null : t6;
43
+ const current = t7 === undefined ? true : t7;
44
+ const preload = t9 === undefined ? true : t9;
45
+ const spacing = t10 === undefined ? 20 : t10;
46
+ const customMediaRef = t11 === undefined ? null : t11;
47
+ const className = t12 === undefined ? null : t12;
48
+ const trackScreenMedia = useTrackScreenMedia("video");
49
+ const {
50
+ width,
51
+ height,
52
+ resolution
53
+ } = useScreenSize();
54
+ const {
55
+ isView,
56
+ isPreview,
57
+ isPlaceholder,
58
+ isEdit,
59
+ isStatic,
60
+ isCapture
61
+ } = useScreenRenderContext();
62
+ const {
63
+ gotoNextScreen
64
+ } = useViewerNavigation();
65
+ const {
66
+ topHeight: viewerTopHeight,
67
+ bottomHeight: viewerBottomHeight,
68
+ bottomSidesWidth: viewerBottomSidesWidth
69
+ } = useViewerContext();
70
+ const {
71
+ open: openWebView
72
+ } = useViewerWebView();
73
+ const mediaShouldLoad = current || preload;
74
+ const shouldGotoNextScreenOnEnd = gotoNextScreenOnEnd && isView && current;
75
+ const {
76
+ autoPlay: t13,
77
+ loop: t14,
78
+ media: t15,
79
+ thumbnail: t16,
80
+ captions: t17,
81
+ closedCaptions: t18,
82
+ withSeekBar: t19,
83
+ withControls: t20,
84
+ color: t21,
85
+ progressColor: t22
86
+ } = video || {};
87
+ const autoPlay = t13 === undefined ? true : t13;
88
+ const loop = t14 === undefined ? false : t14;
89
+ const videoMedia = t15 === undefined ? null : t15;
90
+ const thumbnail = t16 === undefined ? null : t16;
91
+ const captions = t17 === undefined ? null : t17;
92
+ const closedCaptions = t18 === undefined ? null : t18;
93
+ const withSeekBar = t19 === undefined ? false : t19;
94
+ const withControls = t20 === undefined ? false : t20;
95
+ const color = t21 === undefined ? null : t21;
96
+ const progressColor = t22 === undefined ? null : t22;
97
+ const {
98
+ playing,
99
+ muted,
100
+ setControls,
101
+ setControlsSuggestPlay,
102
+ setControlsTheme,
103
+ setPlaying,
104
+ controlsVisible,
105
+ showControls,
106
+ hideControls,
107
+ currentQualityLevel,
108
+ setCurrentQualityLevel
109
+ } = usePlaybackContext();
110
+ const {
111
+ ref: mediaRef,
112
+ isCurrent: t23
113
+ } = usePlaybackMediaRef(current);
114
+ const isCurrentMedia = t23 === undefined ? false : t23;
115
+ const [hasPlayed, setHasPlayed] = useState(false);
116
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
117
+ const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
118
+ const shouldDisplayPoster = isPreview || isCapture;
119
+ useEffect(() => {
114
120
  if (!current) {
115
- return function () {};
121
+ return _temp;
116
122
  }
117
123
  setControlsTheme({
118
124
  seekBarOnly: withSeekBar && !withControls,
119
- color: color,
120
- progressColor: progressColor
125
+ color,
126
+ progressColor
121
127
  });
122
128
  if (withControls || withSeekBar) {
123
129
  setControls(true);
124
130
  } else {
125
131
  setControls(false);
126
132
  }
127
- return function () {
133
+ return () => {
128
134
  if (withControls || withSeekBar) {
129
135
  setControls(false);
130
136
  }
131
137
  };
132
138
  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
133
- useEffect(function () {
139
+ useEffect(() => {
134
140
  if (current && autoPlay) {
135
141
  setPlaying(true);
136
142
  }
137
143
  }, [current, autoPlay]);
138
- var viewerContainer = useViewerContainer();
139
- var _useActivityDetector = useActivityDetector({
140
- element: viewerContainer,
141
- disabled: !isView,
142
- timeout: 2000
143
- }),
144
- activityDetected = _useActivityDetector.detected;
145
- var toggleControlsVisibility = useCallback(function () {
146
- if (activityDetected) {
147
- showControls();
148
- } else {
149
- hideControls();
150
- }
151
- }, [activityDetected, showControls, hideControls]);
144
+ const activityDetected = useViewerActivityDetected();
145
+ let t24;
146
+ if ($[0] !== activityDetected || $[1] !== hideControls || $[2] !== showControls) {
147
+ t24 = () => {
148
+ if (activityDetected) {
149
+ showControls();
150
+ } else {
151
+ hideControls();
152
+ }
153
+ };
154
+ $[0] = activityDetected;
155
+ $[1] = hideControls;
156
+ $[2] = showControls;
157
+ $[3] = t24;
158
+ } else {
159
+ t24 = $[3];
160
+ }
161
+ const toggleControlsVisibility = t24;
152
162
  useDebounce(toggleControlsVisibility, activityDetected, 1000);
153
- var _useState3 = useState(null),
154
- _useState4 = _slicedToArray(_useState3, 2),
155
- currentTime = _useState4[0],
156
- setCurrentTime = _useState4[1];
157
- var _useState5 = useState(null),
158
- _useState6 = _slicedToArray(_useState5, 2),
159
- duration = _useState6[0],
160
- setDuration = _useState6[1];
161
- var onTimeUpdate = useCallback(function () {
162
- var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
163
- if (time !== null && typeof time.currentTarget !== 'undefined') {
164
- var _ref3 = time.currentTarget || {},
165
- _ref3$currentTime = _ref3.currentTime,
166
- targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
167
- setCurrentTime(targetTime);
168
- } else {
169
- setCurrentTime(0);
170
- }
171
- }, [duration, setCurrentTime]);
172
- var onProgressStep = useCallback(function (step, meta) {
173
- trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
174
- }, [trackScreenMedia, videoMedia]);
175
- var onDurationChange = useCallback(function (dur) {
176
- setDuration(dur);
177
- }, [setDuration]);
178
- var onPlay = useCallback(function (_ref4) {
179
- var initial = _ref4.initial;
163
+ const [currentTime, setCurrentTime] = useState(null);
164
+ const [, setDuration] = useState(null);
165
+ let t25;
166
+ if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
167
+ t25 = t26 => {
168
+ const time = t26 === undefined ? null : t26;
169
+ if (time !== null && typeof time.currentTarget !== "undefined") {
170
+ const {
171
+ currentTime: t27
172
+ } = time.currentTarget || {};
173
+ const targetTime = t27 === undefined ? 0 : t27;
174
+ setCurrentTime(targetTime);
175
+ } else {
176
+ setCurrentTime(0);
177
+ }
178
+ };
179
+ $[4] = t25;
180
+ } else {
181
+ t25 = $[4];
182
+ }
183
+ const onTimeUpdate = t25;
184
+ const onProgressStep = (step, meta) => {
185
+ trackScreenMedia(videoMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
186
+ };
187
+ let t26;
188
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
189
+ t26 = dur => {
190
+ setDuration(dur);
191
+ };
192
+ $[5] = t26;
193
+ } else {
194
+ t26 = $[5];
195
+ }
196
+ const onDurationChange = t26;
197
+ const onPlay = t27 => {
198
+ const {
199
+ initial
200
+ } = t27;
180
201
  if (!hasPlayed) {
181
202
  setHasPlayed(true);
182
203
  }
183
- trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
184
- }, [trackScreenMedia, videoMedia]);
185
- var onPause = useCallback(function (_ref5) {
186
- var midway = _ref5.midway;
187
- trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
188
- }, [trackScreenMedia, videoMedia]);
189
- var onSeeked = useCallback(function (time) {
190
- if (time > 0) {
191
- trackScreenMedia(videoMedia, 'seek', {
192
- currentTime: time
204
+ trackScreenMedia(videoMedia, initial ? "play" : "resume");
205
+ };
206
+ const onPause = t28 => {
207
+ const {
208
+ midway
209
+ } = t28;
210
+ trackScreenMedia(videoMedia, midway ? "pause" : "ended");
211
+ };
212
+ const onSeeked = time_0 => {
213
+ if (time_0 > 0) {
214
+ trackScreenMedia(videoMedia, "seek", {
215
+ currentTime: time_0
193
216
  });
194
217
  }
195
- }, [trackScreenMedia, videoMedia]);
196
- var onEnded = useCallback(function () {
218
+ };
219
+ const onEnded = () => {
197
220
  if (current && !loop) {
198
221
  setPlaying(false);
199
222
  }
200
223
  if (current && shouldGotoNextScreenOnEnd) {
201
224
  gotoNextScreen();
202
225
  }
203
- }, [loop, current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
204
- var fullscreen = layout === 'full';
205
- var hasHeader = isHeaderFilled(header);
206
- var hasFooter = isFooterFilled(footer);
207
- var footerProps = getFooterProps(footer, {
208
- isView: isView,
209
- current: current,
210
- openWebView: openWebView,
211
- isPreview: isPreview
226
+ };
227
+ const fullscreen = layout === "full";
228
+ let t29;
229
+ if ($[6] !== header) {
230
+ t29 = isHeaderFilled(header);
231
+ $[6] = header;
232
+ $[7] = t29;
233
+ } else {
234
+ t29 = $[7];
235
+ }
236
+ const hasHeader = t29;
237
+ let t30;
238
+ if ($[8] !== footer) {
239
+ t30 = isFooterFilled(footer);
240
+ $[8] = footer;
241
+ $[9] = t30;
242
+ } else {
243
+ t30 = $[9];
244
+ }
245
+ const hasFooter = t30;
246
+ let t31;
247
+ if ($[10] !== current || $[11] !== footer || $[12] !== isPreview || $[13] !== isView || $[14] !== openWebView) {
248
+ t31 = getFooterProps(footer, {
249
+ isView,
250
+ current,
251
+ openWebView,
252
+ isPreview
253
+ });
254
+ $[10] = current;
255
+ $[11] = footer;
256
+ $[12] = isPreview;
257
+ $[13] = isView;
258
+ $[14] = openWebView;
259
+ $[15] = t31;
260
+ } else {
261
+ t31 = $[15];
262
+ }
263
+ const footerProps = t31;
264
+ const hasVideo = video !== null;
265
+ const [ready, setReady] = useState(hasVideo);
266
+ const finalVideo = hasVideo ? {
267
+ ...video,
268
+ autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
269
+ } : null;
270
+ const {
271
+ metadata: t32,
272
+ url: t33
273
+ } = videoMedia || {};
274
+ const videoMetadata = t32 === undefined ? null : t32;
275
+ const videoUrl = t33 === undefined ? null : t33;
276
+ const finalThumbnail = getMediaThumbnail(videoMedia, thumbnail);
277
+ const hasVideoUrl = videoUrl !== null;
278
+ const {
279
+ width: t34,
280
+ height: t35
281
+ } = videoMetadata || {};
282
+ const videoWidth = t34 === undefined ? 0 : t34;
283
+ const videoHeight = t35 === undefined ? 0 : t35;
284
+ const {
285
+ width: resizedVideoWidth,
286
+ height: resizedVideoHeight
287
+ } = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
288
+ cover: fullscreen
212
289
  });
213
- var hasVideo = video !== null;
214
- var _useState7 = useState(hasVideo),
215
- _useState8 = _slicedToArray(_useState7, 2),
216
- ready = _useState8[0],
217
- setReady = _useState8[1];
218
- var finalVideo = useMemo(function () {
219
- return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
220
- autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
290
+ const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
291
+ const resizedVideoTop = -(resizedVideoHeight - height) / 2;
292
+ let t36;
293
+ if ($[16] !== fullscreen) {
294
+ t36 = fullscreen ? {
295
+ width: "100%",
296
+ height: "100%"
297
+ } : {
298
+ width: "100%"
299
+ };
300
+ $[16] = fullscreen;
301
+ $[17] = t36;
302
+ } else {
303
+ t36 = $[17];
304
+ }
305
+ const placeholderProps = t36;
306
+ if (!hasVideoUrl && ready) {
307
+ setReady(false);
308
+ }
309
+ let t37;
310
+ if ($[18] !== setReady) {
311
+ t37 = () => {
312
+ setReady(true);
313
+ };
314
+ $[18] = setReady;
315
+ $[19] = t37;
316
+ } else {
317
+ t37 = $[19];
318
+ }
319
+ const onVideoReady = t37;
320
+ let t38;
321
+ if ($[20] !== autoPlay || $[21] !== current || $[22] !== hasVideoUrl || $[23] !== isView || $[24] !== playing || $[25] !== setControlsSuggestPlay || $[26] !== setPlaying) {
322
+ t38 = () => {
323
+ if (isView && playing && current && hasVideoUrl && autoPlay) {
324
+ setPlaying(false);
325
+ setControlsSuggestPlay(true);
326
+ }
327
+ };
328
+ $[20] = autoPlay;
329
+ $[21] = current;
330
+ $[22] = hasVideoUrl;
331
+ $[23] = isView;
332
+ $[24] = playing;
333
+ $[25] = setControlsSuggestPlay;
334
+ $[26] = setPlaying;
335
+ $[27] = t38;
336
+ } else {
337
+ t38 = $[27];
338
+ }
339
+ const onPlayError = t38;
340
+ let t39;
341
+ if ($[28] !== className || $[29] !== fullscreen) {
342
+ t39 = classNames([styles.container, className, {
343
+ [styles.fullscreen]: fullscreen
344
+ }]);
345
+ $[28] = className;
346
+ $[29] = fullscreen;
347
+ $[30] = t39;
348
+ } else {
349
+ t39 = $[30];
350
+ }
351
+ const t40 = isStatic || isCapture || ready;
352
+ let t41;
353
+ if ($[31] !== controlsVisible || $[32] !== current || $[33] !== hasHeader || $[34] !== header || $[35] !== isPlaceholder || $[36] !== isPreview || $[37] !== spacing || $[38] !== viewerTopHeight) {
354
+ t41 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
355
+ className: styles.header,
356
+ style: {
357
+ paddingTop: spacing / 2,
358
+ paddingLeft: spacing,
359
+ paddingRight: spacing,
360
+ transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
361
+ },
362
+ children: /*#__PURE__*/jsx(Header, {
363
+ fade: current && !controlsVisible,
364
+ ...header
365
+ })
366
+ }, "header") : null;
367
+ $[31] = controlsVisible;
368
+ $[32] = current;
369
+ $[33] = hasHeader;
370
+ $[34] = header;
371
+ $[35] = isPlaceholder;
372
+ $[36] = isPreview;
373
+ $[37] = spacing;
374
+ $[38] = viewerTopHeight;
375
+ $[39] = t41;
376
+ } else {
377
+ t41 = $[39];
378
+ }
379
+ let t42;
380
+ if ($[40] !== placeholderProps) {
381
+ t42 = /*#__PURE__*/jsx(PlaceholderVideo, {
382
+ className: styles.placeholder,
383
+ ...placeholderProps
384
+ });
385
+ $[40] = placeholderProps;
386
+ $[41] = t42;
387
+ } else {
388
+ t42 = $[41];
389
+ }
390
+ let t43;
391
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
392
+ t43 = /*#__PURE__*/jsx("div", {
393
+ className: styles.emptyContainer,
394
+ children: /*#__PURE__*/jsx(Empty, {
395
+ className: styles.empty,
396
+ children: /*#__PURE__*/jsx(FormattedMessage, {
397
+ id: "3ext9Q",
398
+ defaultMessage: "Video"
399
+ })
400
+ })
401
+ });
402
+ $[42] = t43;
403
+ } else {
404
+ t43 = $[42];
405
+ }
406
+ const t44 = !hasVideoUrl;
407
+ let t45;
408
+ if ($[43] !== current || $[44] !== currentQualityLevel || $[45] !== customMediaRef || $[46] !== finalThumbnail || $[47] !== finalVideo || $[48] !== hasVideoUrl || $[49] !== isView || $[50] !== mediaRef || $[51] !== mediaShouldLoad || $[52] !== muted || $[53] !== onDurationChange || $[54] !== onEnded || $[55] !== onPause || $[56] !== onPlay || $[57] !== onPlayError || $[58] !== onProgressStep || $[59] !== onSeeked || $[60] !== onTimeUpdate || $[61] !== onVideoReady || $[62] !== resizedVideoHeight || $[63] !== resizedVideoLeft || $[64] !== resizedVideoTop || $[65] !== resizedVideoWidth || $[66] !== resolution || $[67] !== setCurrentQualityLevel || $[68] !== shouldDisplayPoster || $[69] !== videoPlaying) {
409
+ t45 = hasVideoUrl ? /*#__PURE__*/jsx("div", {
410
+ className: styles.videoContainer,
411
+ style: {
412
+ width: resizedVideoWidth,
413
+ height: resizedVideoHeight,
414
+ left: resizedVideoLeft,
415
+ top: resizedVideoTop
416
+ },
417
+ children: shouldDisplayPoster ? /*#__PURE__*/jsx(Image, {
418
+ className: styles.image,
419
+ media: finalThumbnail,
420
+ width: resizedVideoWidth,
421
+ height: resizedVideoHeight,
422
+ objectFit: {
423
+ fit: "cover"
424
+ },
425
+ resolution: resolution,
426
+ shouldLoad: mediaShouldLoad
427
+ }) : /*#__PURE__*/jsx(Video, {
428
+ ...finalVideo,
429
+ width: resizedVideoWidth,
430
+ height: resizedVideoHeight,
431
+ paused: !videoPlaying,
432
+ muted: muted,
433
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
434
+ className: styles.video,
435
+ onReady: onVideoReady,
436
+ onPlay: onPlay,
437
+ onPause: onPause,
438
+ onTimeUpdate: onTimeUpdate,
439
+ onProgressStep: onProgressStep,
440
+ onDurationChange: onDurationChange,
441
+ onSeeked: onSeeked,
442
+ onEnded: onEnded,
443
+ onPlayError: onPlayError,
444
+ disablePictureInPicture: true,
445
+ focusable: current && isView,
446
+ shouldLoad: mediaShouldLoad,
447
+ qualityStartLevel: currentQualityLevel,
448
+ onQualityLevelChange: setCurrentQualityLevel
449
+ })
221
450
  }) : null;
222
- }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
223
- var _ref6 = videoMedia || {},
224
- _ref6$metadata = _ref6.metadata,
225
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
226
- _ref6$url = _ref6.url,
227
- videoUrl = _ref6$url === void 0 ? null : _ref6$url;
228
- var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
229
- var hasVideoUrl = videoUrl !== null;
230
- var _ref7 = videoMetadata || {},
231
- _ref7$width = _ref7.width,
232
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
233
- _ref7$height = _ref7.height,
234
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
235
- var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
236
- cover: fullscreen
237
- }),
238
- resizedVideoWidth = _getSizeWithinBounds.width,
239
- resizedVideoHeight = _getSizeWithinBounds.height;
240
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
241
- var resizedVideoTop = -(resizedVideoHeight - height) / 2;
242
- var placeholderProps = fullscreen ? {
243
- width: '100%',
244
- height: '100%'
245
- } : {
246
- width: '100%'
247
- };
248
- useEffect(function () {
249
- setReady(!hasVideoUrl);
250
- }, [videoUrl, hasVideoUrl, setReady]);
251
- var onVideoReady = useCallback(function () {
252
- setReady(true);
253
- }, [setReady]);
254
-
255
- // const onSuspended = useCallback(() => {
256
- // if (playing && current) {
257
- // setPlaying(false);
258
- // }
259
- // }, [current, playing, setPlaying]);
260
-
261
- var onPlayError = useCallback(function () {
262
- if (isView && playing && current && hasVideoUrl && autoPlay) {
263
- setPlaying(false);
264
- setControlsSuggestPlay(true);
265
- }
266
- }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
267
- return /*#__PURE__*/jsxs("div", {
268
- className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
269
- "data-screen-ready": isStatic || isCapture || ready,
270
- children: [/*#__PURE__*/jsx(Container, {
451
+ $[43] = current;
452
+ $[44] = currentQualityLevel;
453
+ $[45] = customMediaRef;
454
+ $[46] = finalThumbnail;
455
+ $[47] = finalVideo;
456
+ $[48] = hasVideoUrl;
457
+ $[49] = isView;
458
+ $[50] = mediaRef;
459
+ $[51] = mediaShouldLoad;
460
+ $[52] = muted;
461
+ $[53] = onDurationChange;
462
+ $[54] = onEnded;
463
+ $[55] = onPause;
464
+ $[56] = onPlay;
465
+ $[57] = onPlayError;
466
+ $[58] = onProgressStep;
467
+ $[59] = onSeeked;
468
+ $[60] = onTimeUpdate;
469
+ $[61] = onVideoReady;
470
+ $[62] = resizedVideoHeight;
471
+ $[63] = resizedVideoLeft;
472
+ $[64] = resizedVideoTop;
473
+ $[65] = resizedVideoWidth;
474
+ $[66] = resolution;
475
+ $[67] = setCurrentQualityLevel;
476
+ $[68] = shouldDisplayPoster;
477
+ $[69] = videoPlaying;
478
+ $[70] = t45;
479
+ } else {
480
+ t45 = $[70];
481
+ }
482
+ let t46;
483
+ if ($[71] !== t42 || $[72] !== t44 || $[73] !== t45) {
484
+ t46 = /*#__PURE__*/jsx(ScreenElement, {
485
+ placeholder: t42,
486
+ empty: t43,
487
+ isEmpty: t44,
488
+ children: t45
489
+ }, "video");
490
+ $[71] = t42;
491
+ $[72] = t44;
492
+ $[73] = t45;
493
+ $[74] = t46;
494
+ } else {
495
+ t46 = $[74];
496
+ }
497
+ let t47;
498
+ if ($[75] !== captions || $[76] !== closedCaptions || $[77] !== current || $[78] !== currentTime || $[79] !== footerProps || $[80] !== hasFooter || $[81] !== isCapture || $[82] !== isPlaceholder || $[83] !== isPreview || $[84] !== isStatic || $[85] !== spacing || $[86] !== viewerBottomHeight || $[87] !== viewerBottomSidesWidth) {
499
+ t47 = !isPlaceholder ? /*#__PURE__*/jsxs("div", {
500
+ className: styles.bottom,
501
+ style: {
502
+ transform: current && !isPreview ? `translate3d(0, -${viewerBottomHeight}px, 0)` : null,
503
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
504
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
505
+ paddingBottom: spacing / 2,
506
+ paddingTop: 0
507
+ },
508
+ children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
509
+ className: styles.closedCaptions,
510
+ media: closedCaptions,
511
+ ...captions,
512
+ currentTime: currentTime
513
+ }) : null, hasFooter ? /*#__PURE__*/jsx(Footer, {
514
+ ...footerProps
515
+ }) : null]
516
+ }, "bottom-content") : null;
517
+ $[75] = captions;
518
+ $[76] = closedCaptions;
519
+ $[77] = current;
520
+ $[78] = currentTime;
521
+ $[79] = footerProps;
522
+ $[80] = hasFooter;
523
+ $[81] = isCapture;
524
+ $[82] = isPlaceholder;
525
+ $[83] = isPreview;
526
+ $[84] = isStatic;
527
+ $[85] = spacing;
528
+ $[86] = viewerBottomHeight;
529
+ $[87] = viewerBottomSidesWidth;
530
+ $[88] = t47;
531
+ } else {
532
+ t47 = $[88];
533
+ }
534
+ let t48;
535
+ if ($[89] !== t41 || $[90] !== t46 || $[91] !== t47) {
536
+ t48 = /*#__PURE__*/jsxs("div", {
537
+ className: styles.inner,
538
+ children: [t41, t46, t47]
539
+ });
540
+ $[89] = t41;
541
+ $[90] = t46;
542
+ $[91] = t47;
543
+ $[92] = t48;
544
+ } else {
545
+ t48 = $[92];
546
+ }
547
+ let t49;
548
+ if ($[93] !== height || $[94] !== t48 || $[95] !== width) {
549
+ t49 = /*#__PURE__*/jsx(Container, {
271
550
  width: width,
272
551
  height: height,
273
552
  className: styles.content,
274
- children: /*#__PURE__*/jsxs("div", {
275
- className: styles.inner,
276
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
277
- className: styles.header,
278
- style: {
279
- paddingTop: spacing / 2,
280
- paddingLeft: spacing,
281
- paddingRight: spacing,
282
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
283
- },
284
- children: /*#__PURE__*/jsx(Header, _objectSpread({
285
- fade: current && !controlsVisible
286
- }, header))
287
- }, "header") : null, /*#__PURE__*/jsx(ScreenElement, {
288
- placeholder: /*#__PURE__*/jsx(PlaceholderVideo, _objectSpread({
289
- className: styles.placeholder
290
- }, placeholderProps)),
291
- empty: /*#__PURE__*/jsx("div", {
292
- className: styles.emptyContainer,
293
- children: /*#__PURE__*/jsx(Empty, {
294
- className: styles.empty,
295
- children: /*#__PURE__*/jsx(FormattedMessage, {
296
- id: "3ext9Q",
297
- defaultMessage: [{
298
- "type": 0,
299
- "value": "Video"
300
- }]
301
- })
302
- })
303
- }),
304
- isEmpty: !hasVideoUrl,
305
- children: hasVideoUrl ? /*#__PURE__*/jsx("div", {
306
- className: styles.videoContainer,
307
- style: {
308
- width: resizedVideoWidth,
309
- height: resizedVideoHeight,
310
- left: resizedVideoLeft,
311
- top: resizedVideoTop
312
- },
313
- children: shouldDisplayPoster ? /*#__PURE__*/jsx(Image, {
314
- className: styles.image,
315
- media: finalThumbnail,
316
- width: resizedVideoWidth,
317
- height: resizedVideoHeight,
318
- objectFit: {
319
- fit: 'cover'
320
- },
321
- resolution: resolution,
322
- shouldLoad: mediaShouldLoad
323
- }) : /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
324
- width: resizedVideoWidth,
325
- height: resizedVideoHeight,
326
- paused: !videoPlaying,
327
- muted: muted,
328
- mediaRef: mergeRefs(mediaRef, customMediaRef),
329
- className: styles.video,
330
- onReady: onVideoReady,
331
- onPlay: onPlay,
332
- onPause: onPause,
333
- onTimeUpdate: onTimeUpdate,
334
- onProgressStep: onProgressStep,
335
- onDurationChange: onDurationChange,
336
- onSeeked: onSeeked,
337
- onEnded: onEnded
338
- // onSuspended={onSuspended}
339
- ,
340
- onPlayError: onPlayError,
341
- disablePictureInPicture: true,
342
- focusable: current && isView,
343
- shouldLoad: mediaShouldLoad,
344
- qualityStartLevel: currentQualityLevel,
345
- onQualityLevelChange: setCurrentQualityLevel
346
- }))
347
- }) : null
348
- }, "video"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
349
- className: styles.bottom,
350
- style: {
351
- transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
352
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
353
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
354
- paddingBottom: spacing / 2,
355
- paddingTop: 0
356
- },
357
- children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
358
- className: styles.closedCaptions,
359
- media: closedCaptions // BW Compat
360
- }, captions), {}, {
361
- currentTime: currentTime
362
- })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps)) : null]
363
- }, "bottom-content") : null]
364
- })
365
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
553
+ children: t48
554
+ });
555
+ $[93] = height;
556
+ $[94] = t48;
557
+ $[95] = width;
558
+ $[96] = t49;
559
+ } else {
560
+ t49 = $[96];
561
+ }
562
+ let t50;
563
+ if ($[97] !== background || $[98] !== backgroundPlaying || $[99] !== height || $[100] !== isPlaceholder || $[101] !== isPreview || $[102] !== mediaShouldLoad || $[103] !== muted || $[104] !== resolution || $[105] !== width) {
564
+ t50 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
366
565
  background: background,
367
566
  width: width,
368
567
  height: height,
@@ -371,9 +570,38 @@ function VideoScreen(_ref) {
371
570
  muted: muted,
372
571
  shouldLoad: mediaShouldLoad,
373
572
  withoutVideo: isPreview
374
- }) : null]
375
- });
573
+ }) : null;
574
+ $[97] = background;
575
+ $[98] = backgroundPlaying;
576
+ $[99] = height;
577
+ $[100] = isPlaceholder;
578
+ $[101] = isPreview;
579
+ $[102] = mediaShouldLoad;
580
+ $[103] = muted;
581
+ $[104] = resolution;
582
+ $[105] = width;
583
+ $[106] = t50;
584
+ } else {
585
+ t50 = $[106];
586
+ }
587
+ let t51;
588
+ if ($[107] !== t39 || $[108] !== t40 || $[109] !== t49 || $[110] !== t50) {
589
+ t51 = /*#__PURE__*/jsxs("div", {
590
+ className: t39,
591
+ "data-screen-ready": t40,
592
+ children: [t49, t50]
593
+ });
594
+ $[107] = t39;
595
+ $[108] = t40;
596
+ $[109] = t49;
597
+ $[110] = t50;
598
+ $[111] = t51;
599
+ } else {
600
+ t51 = $[111];
601
+ }
602
+ return t51;
376
603
  }
604
+ function _temp() {}
377
605
 
378
606
  var definition = {
379
607
  id: 'video',
@@ -381,19 +609,13 @@ var definition = {
381
609
  group: {
382
610
  label: defineMessage({
383
611
  id: "+9akmg",
384
- defaultMessage: [{
385
- "type": 0,
386
- "value": "Audio and Video"
387
- }]
612
+ defaultMessage: "Audio and Video"
388
613
  }),
389
614
  order: 5
390
615
  },
391
616
  title: defineMessage({
392
617
  id: "UBXIYP",
393
- defaultMessage: [{
394
- "type": 0,
395
- "value": "Video"
396
- }]
618
+ defaultMessage: "Video"
397
619
  }),
398
620
  component: VideoScreen,
399
621
  layouts: ['middle', 'full'],
@@ -404,10 +626,7 @@ var definition = {
404
626
  defaultValue: 'middle',
405
627
  label: defineMessage({
406
628
  id: "4iBXj2",
407
- defaultMessage: [{
408
- "type": 0,
409
- "value": "Layout"
410
- }]
629
+ defaultMessage: "Layout"
411
630
  })
412
631
  }, {
413
632
  name: 'video',
@@ -420,10 +639,7 @@ var definition = {
420
639
  },
421
640
  label: defineMessage({
422
641
  id: "tvl2Zc",
423
- defaultMessage: [{
424
- "type": 0,
425
- "value": "Video"
426
- }]
642
+ defaultMessage: "Video"
427
643
  })
428
644
  }, {
429
645
  name: 'gotoNextScreenOnEnd',
@@ -431,30 +647,21 @@ var definition = {
431
647
  defaultValue: false,
432
648
  label: defineMessage({
433
649
  id: "n8zmLY",
434
- defaultMessage: [{
435
- "type": 0,
436
- "value": "Go to next screen on end"
437
- }]
650
+ defaultMessage: "Go to next screen on end"
438
651
  })
439
652
  }, {
440
653
  name: 'background',
441
654
  type: 'background',
442
655
  label: defineMessage({
443
656
  id: "+MPZRu",
444
- defaultMessage: [{
445
- "type": 0,
446
- "value": "Background"
447
- }]
657
+ defaultMessage: "Background"
448
658
  })
449
659
  }, {
450
660
  name: 'header',
451
661
  type: 'header',
452
662
  label: defineMessage({
453
663
  id: "rhuDxI",
454
- defaultMessage: [{
455
- "type": 0,
456
- "value": "Header"
457
- }]
664
+ defaultMessage: "Header"
458
665
  }),
459
666
  theme: {
460
667
  badge: {
@@ -469,10 +676,7 @@ var definition = {
469
676
  type: 'footer',
470
677
  label: defineMessage({
471
678
  id: "g4nybp",
472
- defaultMessage: [{
473
- "type": 0,
474
- "value": "Footer"
475
- }]
679
+ defaultMessage: "Footer"
476
680
  }),
477
681
  theme: {
478
682
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.4.71",
3
+ "version": "0.4.76",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,25 +53,25 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
65
  "@folklore/size": "^0.1.20",
65
- "@micromag/core": "^0.4.71",
66
- "@micromag/element-background": "^0.4.71",
67
- "@micromag/element-closed-captions": "^0.4.71",
68
- "@micromag/element-container": "^0.4.71",
69
- "@micromag/element-footer": "^0.4.71",
70
- "@micromag/element-header": "^0.4.71",
71
- "@micromag/element-image": "^0.4.71",
72
- "@micromag/element-video": "^0.4.71",
73
- "@micromag/transforms": "^0.4.71",
66
+ "@micromag/core": "^0.4.74",
67
+ "@micromag/element-background": "^0.4.76",
68
+ "@micromag/element-closed-captions": "^0.4.74",
69
+ "@micromag/element-container": "^0.4.74",
70
+ "@micromag/element-footer": "^0.4.76",
71
+ "@micromag/element-header": "^0.4.74",
72
+ "@micromag/element-image": "^0.4.74",
73
+ "@micromag/element-video": "^0.4.76",
74
+ "@micromag/transforms": "^0.4.74",
74
75
  "classnames": "^2.2.6",
75
76
  "lodash": "^4.17.23",
76
77
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -80,6 +81,6 @@
80
81
  "access": "public",
81
82
  "registry": "https://registry.npmjs.org/"
82
83
  },
83
- "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
84
+ "gitHead": "42a24f578994b23090271013f136b7f78956b632",
84
85
  "types": "es/index.d.ts"
85
86
  }