@micromag/screen-video 0.4.70 → 0.4.74

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 +3 -2
  2. package/es/index.js +554 -355
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { VideoElement, Header, Footer, BackgroundElement } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { VideoElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface VideoScreenProps {
5
6
  layout?: 'middle' | 'full';
@@ -12,7 +13,7 @@ interface VideoScreenProps {
12
13
  active?: boolean;
13
14
  preload?: boolean;
14
15
  spacing?: number;
15
- mediaRef?: ((...args: unknown[]) => void) | null;
16
+ mediaRef?: ForwardedRef<MediaElement> | null;
16
17
  className?: string | null;
17
18
  }
18
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 } 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,358 +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 () {
134
- if (customMediaRef !== null) {
135
- customMediaRef(mediaRef.current);
136
- }
137
- }, [mediaRef.current]);
138
- useEffect(function () {
139
+ useEffect(() => {
139
140
  if (current && autoPlay) {
140
141
  setPlaying(true);
141
142
  }
142
143
  }, [current, autoPlay]);
143
- var viewerContainer = useViewerContainer();
144
- var _useActivityDetector = useActivityDetector({
145
- element: viewerContainer,
146
- disabled: !isView,
147
- timeout: 2000
148
- }),
149
- activityDetected = _useActivityDetector.detected;
150
- var toggleControlsVisibility = useCallback(function () {
151
- if (activityDetected) {
152
- showControls();
153
- } else {
154
- hideControls();
155
- }
156
- }, [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;
157
162
  useDebounce(toggleControlsVisibility, activityDetected, 1000);
158
- var _useState3 = useState(null),
159
- _useState4 = _slicedToArray(_useState3, 2),
160
- currentTime = _useState4[0],
161
- setCurrentTime = _useState4[1];
162
- var _useState5 = useState(null),
163
- _useState6 = _slicedToArray(_useState5, 2),
164
- duration = _useState6[0],
165
- setDuration = _useState6[1];
166
- var onTimeUpdate = useCallback(function () {
167
- var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
168
- if (time !== null && typeof time.currentTarget !== 'undefined') {
169
- var _ref3 = time.currentTarget || {},
170
- _ref3$currentTime = _ref3.currentTime,
171
- targetTime = _ref3$currentTime === void 0 ? 0 : _ref3$currentTime;
172
- setCurrentTime(targetTime);
173
- } else {
174
- setCurrentTime(0);
175
- }
176
- }, [duration, setCurrentTime]);
177
- var onProgressStep = useCallback(function (step, meta) {
178
- trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
179
- }, [trackScreenMedia, videoMedia]);
180
- var onDurationChange = useCallback(function (dur) {
181
- setDuration(dur);
182
- }, [setDuration]);
183
- var onPlay = useCallback(function (_ref4) {
184
- 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;
185
201
  if (!hasPlayed) {
186
202
  setHasPlayed(true);
187
203
  }
188
- trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
189
- }, [trackScreenMedia, videoMedia]);
190
- var onPause = useCallback(function (_ref5) {
191
- var midway = _ref5.midway;
192
- trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
193
- }, [trackScreenMedia, videoMedia]);
194
- var onSeeked = useCallback(function (time) {
195
- if (time > 0) {
196
- trackScreenMedia(videoMedia, 'seek', {
197
- 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
198
216
  });
199
217
  }
200
- }, [trackScreenMedia, videoMedia]);
201
- var onEnded = useCallback(function () {
218
+ };
219
+ const onEnded = () => {
202
220
  if (current && !loop) {
203
221
  setPlaying(false);
204
222
  }
205
223
  if (current && shouldGotoNextScreenOnEnd) {
206
224
  gotoNextScreen();
207
225
  }
208
- }, [loop, current, shouldGotoNextScreenOnEnd, gotoNextScreen]);
209
- var fullscreen = layout === 'full';
210
- var hasHeader = isHeaderFilled(header);
211
- var hasFooter = isFooterFilled(footer);
212
- var footerProps = getFooterProps(footer, {
213
- isView: isView,
214
- current: current,
215
- openWebView: openWebView,
216
- 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
217
289
  });
218
- var hasVideo = video !== null;
219
- var _useState7 = useState(hasVideo),
220
- _useState8 = _slicedToArray(_useState7, 2),
221
- ready = _useState8[0],
222
- setReady = _useState8[1];
223
- var finalVideo = useMemo(function () {
224
- return hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
225
- 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
+ })
226
450
  }) : null;
227
- }, [hasVideo, video, isPreview, isStatic, isCapture, autoPlay, current]);
228
- var _ref6 = videoMedia || {},
229
- _ref6$metadata = _ref6.metadata,
230
- videoMetadata = _ref6$metadata === void 0 ? null : _ref6$metadata,
231
- _ref6$url = _ref6.url,
232
- videoUrl = _ref6$url === void 0 ? null : _ref6$url;
233
- var finalThumbnail = useMediaThumbnail(videoMedia, thumbnail);
234
- var hasVideoUrl = videoUrl !== null;
235
- var _ref7 = videoMetadata || {},
236
- _ref7$width = _ref7.width,
237
- videoWidth = _ref7$width === void 0 ? 0 : _ref7$width,
238
- _ref7$height = _ref7.height,
239
- videoHeight = _ref7$height === void 0 ? 0 : _ref7$height;
240
- var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
241
- cover: fullscreen
242
- }),
243
- resizedVideoWidth = _getSizeWithinBounds.width,
244
- resizedVideoHeight = _getSizeWithinBounds.height;
245
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
246
- var resizedVideoTop = -(resizedVideoHeight - height) / 2;
247
- var placeholderProps = fullscreen ? {
248
- width: '100%',
249
- height: '100%'
250
- } : {
251
- width: '100%'
252
- };
253
- useEffect(function () {
254
- setReady(!hasVideoUrl);
255
- }, [videoUrl, hasVideoUrl, setReady]);
256
- var onVideoReady = useCallback(function () {
257
- setReady(true);
258
- }, [setReady]);
259
-
260
- // const onSuspended = useCallback(() => {
261
- // if (playing && current) {
262
- // setPlaying(false);
263
- // }
264
- // }, [current, playing, setPlaying]);
265
-
266
- var onPlayError = useCallback(function () {
267
- if (isView && playing && current && hasVideoUrl && autoPlay) {
268
- setPlaying(false);
269
- setControlsSuggestPlay(true);
270
- }
271
- }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
272
- return /*#__PURE__*/jsxs("div", {
273
- className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
274
- "data-screen-ready": isStatic || isCapture || ready,
275
- 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, {
276
550
  width: width,
277
551
  height: height,
278
552
  className: styles.content,
279
- children: /*#__PURE__*/jsxs("div", {
280
- className: styles.inner,
281
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
282
- className: styles.header,
283
- style: {
284
- paddingTop: spacing / 2,
285
- paddingLeft: spacing,
286
- paddingRight: spacing,
287
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
288
- },
289
- children: /*#__PURE__*/jsx(Header, _objectSpread({
290
- fade: current && !controlsVisible
291
- }, header))
292
- }, "header") : null, /*#__PURE__*/jsx(ScreenElement, {
293
- placeholder: /*#__PURE__*/jsx(PlaceholderVideo, _objectSpread({
294
- className: styles.placeholder
295
- }, placeholderProps)),
296
- empty: /*#__PURE__*/jsx("div", {
297
- className: styles.emptyContainer,
298
- children: /*#__PURE__*/jsx(Empty, {
299
- className: styles.empty,
300
- children: /*#__PURE__*/jsx(FormattedMessage, {
301
- id: "3ext9Q",
302
- defaultMessage: [{
303
- "type": 0,
304
- "value": "Video"
305
- }]
306
- })
307
- })
308
- }),
309
- isEmpty: !hasVideoUrl,
310
- children: hasVideoUrl ? /*#__PURE__*/jsx("div", {
311
- className: styles.videoContainer,
312
- style: {
313
- width: resizedVideoWidth,
314
- height: resizedVideoHeight,
315
- left: resizedVideoLeft,
316
- top: resizedVideoTop
317
- },
318
- children: shouldDisplayPoster ? /*#__PURE__*/jsx(Image, {
319
- className: styles.image,
320
- media: finalThumbnail,
321
- width: resizedVideoWidth,
322
- height: resizedVideoHeight,
323
- objectFit: {
324
- fit: 'cover'
325
- },
326
- resolution: resolution,
327
- shouldLoad: mediaShouldLoad
328
- }) : /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
329
- width: resizedVideoWidth,
330
- height: resizedVideoHeight,
331
- paused: !videoPlaying,
332
- muted: muted,
333
- mediaRef: mediaRef,
334
- className: styles.video,
335
- onReady: onVideoReady,
336
- onPlay: onPlay,
337
- onPause: onPause,
338
- onTimeUpdate: onTimeUpdate,
339
- onProgressStep: onProgressStep,
340
- onDurationChange: onDurationChange,
341
- onSeeked: onSeeked,
342
- onEnded: onEnded
343
- // onSuspended={onSuspended}
344
- ,
345
- onPlayError: onPlayError,
346
- disablePictureInPicture: true,
347
- focusable: current && isView,
348
- shouldLoad: mediaShouldLoad,
349
- qualityStartLevel: currentQualityLevel,
350
- onQualityLevelChange: setCurrentQualityLevel
351
- }))
352
- }) : null
353
- }, "video"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
354
- className: styles.bottom,
355
- style: {
356
- transform: current && !isPreview ? "translate3d(0, -".concat(viewerBottomHeight, "px, 0)") : null,
357
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
358
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
359
- paddingBottom: spacing / 2,
360
- paddingTop: 0
361
- },
362
- children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
363
- className: styles.closedCaptions,
364
- media: closedCaptions // BW Compat
365
- }, captions), {}, {
366
- currentTime: currentTime
367
- })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps)) : null]
368
- }, "bottom-content") : null]
369
- })
370
- }), !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, {
371
565
  background: background,
372
566
  width: width,
373
567
  height: height,
@@ -376,9 +570,38 @@ function VideoScreen(_ref) {
376
570
  muted: muted,
377
571
  shouldLoad: mediaShouldLoad,
378
572
  withoutVideo: isPreview
379
- }) : null]
380
- });
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;
381
603
  }
604
+ function _temp() {}
382
605
 
383
606
  var definition = {
384
607
  id: 'video',
@@ -386,19 +609,13 @@ var definition = {
386
609
  group: {
387
610
  label: defineMessage({
388
611
  id: "+9akmg",
389
- defaultMessage: [{
390
- "type": 0,
391
- "value": "Audio and Video"
392
- }]
612
+ defaultMessage: "Audio and Video"
393
613
  }),
394
614
  order: 5
395
615
  },
396
616
  title: defineMessage({
397
617
  id: "UBXIYP",
398
- defaultMessage: [{
399
- "type": 0,
400
- "value": "Video"
401
- }]
618
+ defaultMessage: "Video"
402
619
  }),
403
620
  component: VideoScreen,
404
621
  layouts: ['middle', 'full'],
@@ -409,10 +626,7 @@ var definition = {
409
626
  defaultValue: 'middle',
410
627
  label: defineMessage({
411
628
  id: "4iBXj2",
412
- defaultMessage: [{
413
- "type": 0,
414
- "value": "Layout"
415
- }]
629
+ defaultMessage: "Layout"
416
630
  })
417
631
  }, {
418
632
  name: 'video',
@@ -425,10 +639,7 @@ var definition = {
425
639
  },
426
640
  label: defineMessage({
427
641
  id: "tvl2Zc",
428
- defaultMessage: [{
429
- "type": 0,
430
- "value": "Video"
431
- }]
642
+ defaultMessage: "Video"
432
643
  })
433
644
  }, {
434
645
  name: 'gotoNextScreenOnEnd',
@@ -436,30 +647,21 @@ var definition = {
436
647
  defaultValue: false,
437
648
  label: defineMessage({
438
649
  id: "n8zmLY",
439
- defaultMessage: [{
440
- "type": 0,
441
- "value": "Go to next screen on end"
442
- }]
650
+ defaultMessage: "Go to next screen on end"
443
651
  })
444
652
  }, {
445
653
  name: 'background',
446
654
  type: 'background',
447
655
  label: defineMessage({
448
656
  id: "+MPZRu",
449
- defaultMessage: [{
450
- "type": 0,
451
- "value": "Background"
452
- }]
657
+ defaultMessage: "Background"
453
658
  })
454
659
  }, {
455
660
  name: 'header',
456
661
  type: 'header',
457
662
  label: defineMessage({
458
663
  id: "rhuDxI",
459
- defaultMessage: [{
460
- "type": 0,
461
- "value": "Header"
462
- }]
664
+ defaultMessage: "Header"
463
665
  }),
464
666
  theme: {
465
667
  badge: {
@@ -474,10 +676,7 @@ var definition = {
474
676
  type: 'footer',
475
677
  label: defineMessage({
476
678
  id: "g4nybp",
477
- defaultMessage: [{
478
- "type": 0,
479
- "value": "Footer"
480
- }]
679
+ defaultMessage: "Footer"
481
680
  }),
482
681
  theme: {
483
682
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video",
3
- "version": "0.4.70",
3
+ "version": "0.4.74",
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.69",
66
- "@micromag/element-background": "^0.4.70",
67
- "@micromag/element-closed-captions": "^0.4.69",
68
- "@micromag/element-container": "^0.4.69",
69
- "@micromag/element-footer": "^0.4.70",
70
- "@micromag/element-header": "^0.4.69",
71
- "@micromag/element-image": "^0.4.69",
72
- "@micromag/element-video": "^0.4.70",
73
- "@micromag/transforms": "^0.4.69",
66
+ "@micromag/core": "^0.4.74",
67
+ "@micromag/element-background": "^0.4.74",
68
+ "@micromag/element-closed-captions": "^0.4.74",
69
+ "@micromag/element-container": "^0.4.74",
70
+ "@micromag/element-footer": "^0.4.74",
71
+ "@micromag/element-header": "^0.4.74",
72
+ "@micromag/element-image": "^0.4.74",
73
+ "@micromag/element-video": "^0.4.74",
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": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
84
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
84
85
  "types": "es/index.d.ts"
85
86
  }