@micromag/screen-video-360 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 +276 -326
  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 Video360ScreenProps {
5
6
  layout?: 'full';
@@ -11,7 +12,7 @@ interface Video360ScreenProps {
11
12
  preload?: boolean;
12
13
  type?: string | null;
13
14
  spacing?: number;
14
- mediaRef?: ((...args: unknown[]) => void) | null;
15
+ mediaRef?: ForwardedRef<MediaElement> | null;
15
16
  className?: string | null;
16
17
  }
17
18
  declare function Video360Screen({ layout: _layout, video, header, footer, background, current, preload, type, spacing, mediaRef: customMediaRef, className, }: Video360ScreenProps): react_jsx_runtime.JSX.Element;
package/es/index.js CHANGED
@@ -1,14 +1,11 @@
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';
5
2
  import { getSizeWithinBounds } from '@folklore/size';
6
3
  import classNames from 'classnames';
7
4
  import { useState, useEffect, useRef, useCallback } from 'react';
8
5
  import { ScreenElement, PlaceholderVideo360 } from '@micromag/core/components';
9
- import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, useViewerContainer } from '@micromag/core/contexts';
10
- import { useTrackScreenEvent, useTrackScreenMedia, useDevicePixelRatio, useActivityDetector, useDebounce, useAnimationFrame } from '@micromag/core/hooks';
11
- import { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
6
+ import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
7
+ import { useTrackScreenEvent, useTrackScreenMedia, useDevicePixelRatio, useDebounce, useAnimationFrame } from '@micromag/core/hooks';
8
+ import { isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
12
9
  import Background from '@micromag/element-background';
13
10
  import ClosedCaptions from '@micromag/element-closed-captions';
14
11
  import Container from '@micromag/element-container';
@@ -21,48 +18,48 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
21
18
  /**
22
19
  * Locale loader
23
20
  */
24
- var packageCache = null;
25
- var useThree = function useThree() {
21
+ let packageCache = null;
22
+ const useThree = () => {
26
23
  // transport
27
- var _useState = useState({
28
- "package": packageCache
29
- }),
30
- _useState2 = _slicedToArray(_useState, 2),
31
- loadedPackage = _useState2[0]["package"],
32
- setLoadedPackage = _useState2[1];
33
- useEffect(function () {
34
- var canceled = false;
24
+ const [{
25
+ package: loadedPackage
26
+ }, setLoadedPackage] = useState({
27
+ package: packageCache
28
+ });
29
+ useEffect(() => {
30
+ let canceled = false;
35
31
  if (loadedPackage !== null) {
36
- return function () {
32
+ return () => {
37
33
  canceled = true;
38
34
  };
39
35
  }
40
- import('three').then(function (_ref) {
41
- var Scene = _ref.Scene,
42
- PerspectiveCamera = _ref.PerspectiveCamera,
43
- SphereBufferGeometry = _ref.SphereBufferGeometry,
44
- VideoTexture = _ref.VideoTexture,
45
- MeshBasicMaterial = _ref.MeshBasicMaterial,
46
- Mesh = _ref.Mesh,
47
- WebGLRenderer = _ref.WebGLRenderer,
48
- MathUtils = _ref.MathUtils;
36
+ import('three').then(({
37
+ Scene,
38
+ PerspectiveCamera,
39
+ SphereBufferGeometry,
40
+ VideoTexture,
41
+ MeshBasicMaterial,
42
+ Mesh,
43
+ WebGLRenderer,
44
+ MathUtils
45
+ }) => {
49
46
  packageCache = {
50
- Scene: Scene,
51
- PerspectiveCamera: PerspectiveCamera,
52
- SphereBufferGeometry: SphereBufferGeometry,
53
- VideoTexture: VideoTexture,
54
- MeshBasicMaterial: MeshBasicMaterial,
55
- Mesh: Mesh,
56
- WebGLRenderer: WebGLRenderer,
57
- MathUtils: MathUtils
47
+ Scene,
48
+ PerspectiveCamera,
49
+ SphereBufferGeometry,
50
+ VideoTexture,
51
+ MeshBasicMaterial,
52
+ Mesh,
53
+ WebGLRenderer,
54
+ MathUtils
58
55
  };
59
56
  if (!canceled) {
60
57
  setLoadedPackage({
61
- "package": packageCache
58
+ package: packageCache
62
59
  });
63
60
  }
64
61
  });
65
- return function () {
62
+ return () => {
66
63
  canceled = true;
67
64
  };
68
65
  }, [loadedPackage, setLoadedPackage]);
@@ -71,136 +68,120 @@ var useThree = function useThree() {
71
68
 
72
69
  var styles = {"container":"micromag-screen-video-360-container","background":"micromag-screen-video-360-background","content":"micromag-screen-video-360-content","empty":"micromag-screen-video-360-empty","inner":"micromag-screen-video-360-inner","canvas":"micromag-screen-video-360-canvas","canvasButton":"micromag-screen-video-360-canvasButton","video":"micromag-screen-video-360-video","videoContainer":"micromag-screen-video-360-videoContainer","placeholder":"micromag-screen-video-360-placeholder","header":"micromag-screen-video-360-header","bottom":"micromag-screen-video-360-bottom","showVideo":"micromag-screen-video-360-showVideo"};
73
70
 
74
- function Video360Screen(_ref) {
75
- _ref.layout;
76
- var _ref$video = _ref.video,
77
- video = _ref$video === void 0 ? null : _ref$video,
78
- _ref$header = _ref.header,
79
- header = _ref$header === void 0 ? null : _ref$header,
80
- _ref$footer = _ref.footer,
81
- footer = _ref$footer === void 0 ? null : _ref$footer,
82
- _ref$background = _ref.background,
83
- background = _ref$background === void 0 ? null : _ref$background,
84
- _ref$current = _ref.current,
85
- current = _ref$current === void 0 ? true : _ref$current,
86
- _ref$preload = _ref.preload,
87
- preload = _ref$preload === void 0 ? true : _ref$preload,
88
- _ref$type = _ref.type,
89
- type = _ref$type === void 0 ? null : _ref$type,
90
- _ref$spacing = _ref.spacing,
91
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
92
- _ref$mediaRef = _ref.mediaRef,
93
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
94
- _ref$className = _ref.className,
95
- className = _ref$className === void 0 ? null : _ref$className;
96
- var THREE = useThree();
97
- var trackScreenEvent = useTrackScreenEvent(type);
98
- var trackScreenMedia = useTrackScreenMedia('video_360');
99
- var _useViewerInteraction = useViewerInteraction(),
100
- enableInteraction = _useViewerInteraction.enableInteraction,
101
- disableInteraction = _useViewerInteraction.disableInteraction;
102
- var _useViewerNavigation = useViewerNavigation(),
103
- gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
104
- gotoNextScreen = _useViewerNavigation.gotoNextScreen;
105
- var _useViewerContext = useViewerContext(),
106
- viewerTopHeight = _useViewerContext.topHeight,
107
- viewerBottomHeight = _useViewerContext.bottomHeight,
108
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
109
- var _useScreenSize = useScreenSize(),
110
- width = _useScreenSize.width,
111
- height = _useScreenSize.height,
112
- landscape = _useScreenSize.landscape,
113
- resolution = _useScreenSize.resolution;
114
- var _useScreenRenderConte = useScreenRenderContext(),
115
- isView = _useScreenRenderConte.isView,
116
- isPreview = _useScreenRenderConte.isPreview,
117
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
118
- isEdit = _useScreenRenderConte.isEdit,
119
- isStatic = _useScreenRenderConte.isStatic,
120
- isCapture = _useScreenRenderConte.isCapture;
121
- var _useViewerWebView = useViewerWebView(),
122
- openWebView = _useViewerWebView.open;
123
- var devicePixelRatio = useDevicePixelRatio();
124
- var backgroundPlaying = current && (isView || isEdit);
125
- var mediaShouldLoad = current || preload;
126
- var _ref2 = video || {},
127
- _ref2$media = _ref2.media,
128
- videoMedia = _ref2$media === void 0 ? null : _ref2$media,
129
- _ref2$closedCaptions = _ref2.closedCaptions,
130
- closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
131
- _ref2$captions = _ref2.captions,
132
- captions = _ref2$captions === void 0 ? null : _ref2$captions,
133
- _ref2$withSeekBar = _ref2.withSeekBar,
134
- withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
135
- _ref2$withControls = _ref2.withControls,
136
- withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
137
- _ref2$autoPlay = _ref2.autoPlay,
138
- autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
139
- _ref2$color = _ref2.color,
140
- color = _ref2$color === void 0 ? null : _ref2$color,
141
- _ref2$progressColor = _ref2.progressColor,
142
- progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
143
- var videoContainerRef = useRef();
144
- var _usePlaybackContext = usePlaybackContext(),
145
- playing = _usePlaybackContext.playing,
146
- muted = _usePlaybackContext.muted,
147
- setControls = _usePlaybackContext.setControls,
148
- setControlsTheme = _usePlaybackContext.setControlsTheme,
149
- setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
150
- setMedia = _usePlaybackContext.setMedia,
151
- setPlaying = _usePlaybackContext.setPlaying,
152
- showControls = _usePlaybackContext.showControls,
153
- hideControls = _usePlaybackContext.hideControls,
154
- currentQualityLevel = _usePlaybackContext.currentQualityLevel,
155
- setCurrentQualityLevel = _usePlaybackContext.setCurrentQualityLevel;
156
- var mediaRef = useRef(null);
157
- useEffect(function () {
71
+ function Video360Screen({
72
+ layout: _layout = 'full',
73
+ video = null,
74
+ header = null,
75
+ footer = null,
76
+ background = null,
77
+ current = true,
78
+ preload = true,
79
+ type = null,
80
+ spacing = 20,
81
+ mediaRef: customMediaRef = null,
82
+ className = null
83
+ }) {
84
+ const THREE = useThree();
85
+ const trackScreenEvent = useTrackScreenEvent(type);
86
+ const trackScreenMedia = useTrackScreenMedia('video_360');
87
+ const {
88
+ enableInteraction,
89
+ disableInteraction
90
+ } = useViewerInteraction();
91
+ const {
92
+ gotoPreviousScreen,
93
+ gotoNextScreen
94
+ } = useViewerNavigation();
95
+ const {
96
+ topHeight: viewerTopHeight,
97
+ bottomHeight: viewerBottomHeight,
98
+ bottomSidesWidth: viewerBottomSidesWidth
99
+ } = useViewerContext();
100
+ const {
101
+ width,
102
+ height,
103
+ landscape,
104
+ resolution
105
+ } = useScreenSize();
106
+ const {
107
+ isView,
108
+ isPreview,
109
+ isPlaceholder,
110
+ isEdit,
111
+ isStatic,
112
+ isCapture
113
+ } = useScreenRenderContext();
114
+ const {
115
+ open: openWebView
116
+ } = useViewerWebView();
117
+ const devicePixelRatio = useDevicePixelRatio();
118
+ const mediaShouldLoad = current || preload;
119
+ const {
120
+ media: videoMedia = null,
121
+ closedCaptions = null,
122
+ captions = null,
123
+ withSeekBar = false,
124
+ withControls = false,
125
+ autoPlay = true,
126
+ color = null,
127
+ progressColor = null
128
+ } = video || {};
129
+ const videoContainerRef = useRef();
130
+ const {
131
+ playing,
132
+ muted,
133
+ setControls,
134
+ setControlsTheme,
135
+ setControlsSuggestPlay,
136
+ setMedia,
137
+ setPlaying,
138
+ showControls,
139
+ hideControls,
140
+ currentQualityLevel,
141
+ setCurrentQualityLevel
142
+ } = usePlaybackContext();
143
+ const {
144
+ ref: mediaRef,
145
+ isCurrent: isCurrentMedia = false
146
+ } = usePlaybackMediaRef(current);
147
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
148
+ const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
149
+ useEffect(() => {
158
150
  if (!current) {
159
- return function () {};
151
+ return () => {};
160
152
  }
161
153
  if (withControls || withSeekBar) {
162
154
  setControls(true);
163
155
  setControlsTheme({
164
156
  seekBarOnly: withSeekBar && !withControls,
165
- color: color,
166
- progressColor: progressColor
157
+ color,
158
+ progressColor
167
159
  });
168
160
  } else {
169
161
  setControls(false);
170
162
  }
171
- return function () {
163
+ return () => {
172
164
  if (withControls || withSeekBar) {
173
165
  setControls(false);
174
166
  }
175
167
  };
176
168
  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
177
- useEffect(function () {
169
+ useEffect(() => {
178
170
  if (!current) {
179
- return function () {};
171
+ return () => {};
180
172
  }
181
173
  setMedia(mediaRef.current);
182
- return function () {
174
+ return () => {
183
175
  setMedia(null);
184
176
  };
185
177
  }, [current]);
186
- useEffect(function () {
187
- if (customMediaRef !== null) {
188
- customMediaRef(mediaRef.current);
189
- }
190
- }, [mediaRef.current]);
191
- useEffect(function () {
178
+ useEffect(() => {
192
179
  if (current && autoPlay && !playing) {
193
180
  setPlaying(true);
194
181
  }
195
182
  }, [current, autoPlay]);
196
- var viewerContainer = useViewerContainer();
197
- var _useActivityDetector = useActivityDetector({
198
- element: viewerContainer,
199
- disabled: !isView,
200
- timeout: 2000
201
- }),
202
- activityDetected = _useActivityDetector.detected;
203
- var toggleControlsVisibility = useCallback(function () {
183
+ const activityDetected = useViewerActivityDetected();
184
+ const toggleControlsVisibility = useCallback(() => {
204
185
  if (activityDetected) {
205
186
  showControls();
206
187
  } else {
@@ -208,37 +189,33 @@ function Video360Screen(_ref) {
208
189
  }
209
190
  }, [activityDetected, showControls, hideControls]);
210
191
  useDebounce(toggleControlsVisibility, activityDetected, 1000);
211
- var _useState = useState(null),
212
- _useState2 = _slicedToArray(_useState, 2),
213
- currentTime = _useState2[0],
214
- setCurrentTime = _useState2[1];
215
- var _useState3 = useState(null),
216
- _useState4 = _slicedToArray(_useState3, 2),
217
- duration = _useState4[0],
218
- setDuration = _useState4[1];
219
- var onTimeUpdate = useCallback(function (time) {
192
+ const [currentTime, setCurrentTime] = useState(null);
193
+ const [duration, setDuration] = useState(null);
194
+ const onTimeUpdate = useCallback(time => {
220
195
  setCurrentTime(time);
221
196
  }, [setDuration, duration]);
222
- var onProgressStep = useCallback(function (step, meta) {
223
- trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
197
+ const onProgressStep = useCallback((step, meta) => {
198
+ trackScreenMedia(videoMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
224
199
  }, [trackScreenMedia, videoMedia]);
225
- var onDurationChange = useCallback(function (dur) {
200
+ const onDurationChange = useCallback(dur => {
226
201
  setDuration(dur);
227
202
  }, [setDuration]);
228
- var onPlay = useCallback(function (_ref3) {
229
- var initial = _ref3.initial;
203
+ const onPlay = useCallback(({
204
+ initial
205
+ }) => {
230
206
  trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
231
207
  }, [trackScreenMedia, videoMedia]);
232
- var onPause = useCallback(function (_ref4) {
233
- var midway = _ref4.midway;
208
+ const onPause = useCallback(({
209
+ midway
210
+ }) => {
234
211
  trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
235
212
  }, [trackScreenMedia, videoMedia]);
236
- var onSeeked = useCallback(function (time) {
237
- if (time > 0) {
213
+ const onSeeked = useCallback(time_0 => {
214
+ if (time_0 > 0) {
238
215
  trackScreenMedia(videoMedia, 'seek');
239
216
  }
240
217
  }, [trackScreenMedia, videoMedia]);
241
- var onEnded = useCallback(function () {
218
+ const onEnded = useCallback(() => {
242
219
  if (current) {
243
220
  setPlaying(false);
244
221
  }
@@ -246,91 +223,86 @@ function Video360Screen(_ref) {
246
223
 
247
224
  // ------------------------------------
248
225
 
249
- var hasVideo = video !== null;
250
- var _useState5 = useState(!hasVideo),
251
- _useState6 = _slicedToArray(_useState5, 2),
252
- ready = _useState6[0],
253
- setReady = _useState6[1];
226
+ const hasVideo = video !== null;
227
+ const [ready, setReady] = useState(!hasVideo);
254
228
 
255
229
  // const transitionPlaying = current && ready;
256
230
  // const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
257
231
 
258
- var hasHeader = isHeaderFilled(header);
259
- var hasFooter = isFooterFilled(footer);
260
- var footerProps = getFooterProps(footer, {
261
- isView: isView,
262
- current: current,
263
- openWebView: openWebView,
264
- isPreview: isPreview,
265
- enableInteraction: enableInteraction,
266
- disableInteraction: disableInteraction
232
+ const hasHeader = isHeaderFilled(header);
233
+ const hasFooter = isFooterFilled(footer);
234
+ const footerProps = getFooterProps(footer, {
235
+ isView,
236
+ current,
237
+ openWebView,
238
+ isPreview,
239
+ enableInteraction,
240
+ disableInteraction
267
241
  });
268
- var finalVideo = hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
242
+ const finalVideo = hasVideo ? {
243
+ ...video,
269
244
  autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
270
- }) : null;
271
- var _ref5 = videoMedia || {},
272
- _ref5$metadata = _ref5.metadata,
273
- videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
274
- _ref5$url = _ref5.url,
275
- videoUrl = _ref5$url === void 0 ? null : _ref5$url,
276
- _ref5$thumbnail_url = _ref5.thumbnail_url,
277
- thumbnailUrl = _ref5$thumbnail_url === void 0 ? null : _ref5$thumbnail_url;
278
- var hasVideoUrl = videoUrl !== null;
279
- var _ref6 = videoMetadata || {},
280
- _ref6$width = _ref6.width,
281
- videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
282
- _ref6$height = _ref6.height,
283
- videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
284
- var hasThumbnail = thumbnailUrl !== null;
285
- var _useState7 = useState(!hasThumbnail),
286
- _useState8 = _slicedToArray(_useState7, 2),
287
- posterReady = _useState8[0],
288
- setPosterReady = _useState8[1];
289
- var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
290
- var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
291
- cover: true
292
- }),
293
- resizedVideoWidth = _getSizeWithinBounds.width,
294
- resizedVideoHeight = _getSizeWithinBounds.height;
295
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
296
- var resizedVideoTop = -(resizedVideoHeight - height) / 2;
297
- useEffect(function () {
245
+ } : null;
246
+ const {
247
+ metadata: videoMetadata = null,
248
+ url: videoUrl = null,
249
+ thumbnail_url: thumbnailUrl = null
250
+ } = videoMedia || {};
251
+ const hasVideoUrl = videoUrl !== null;
252
+ const {
253
+ width: videoWidth = 0,
254
+ height: videoHeight = 0
255
+ } = videoMetadata || {};
256
+ const hasThumbnail = thumbnailUrl !== null;
257
+ const [posterReady, setPosterReady] = useState(!hasThumbnail);
258
+ const withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
259
+ const {
260
+ width: resizedVideoWidth,
261
+ height: resizedVideoHeight
262
+ } = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
263
+ cover: true
264
+ });
265
+ const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
266
+ const resizedVideoTop = -(resizedVideoHeight - height) / 2;
267
+ useEffect(() => {
298
268
  setReady(!hasVideoUrl);
299
269
  }, [videoUrl, hasVideoUrl, setReady]);
300
- useEffect(function () {
270
+ useEffect(() => {
301
271
  setPosterReady(!hasThumbnail);
302
272
  }, [thumbnailUrl, hasThumbnail, setPosterReady]);
303
- var onVideoReady = useCallback(function () {
273
+ const onVideoReady = useCallback(() => {
304
274
  setReady(true);
305
275
  }, [setReady]);
306
- var onPosterLoaded = useCallback(function () {
276
+ const onPosterLoaded = useCallback(() => {
307
277
  setPosterReady(true);
308
278
  }, [posterReady]);
309
279
 
310
280
  // 3D layer --------------------------
311
281
 
312
- var canvasRef = useRef(null);
313
- var camera = useRef(null);
314
- var scene = useRef(null);
315
- var renderer = useRef(null);
316
- var lon = useRef(0);
317
- var lat = useRef(0);
318
- var phi = useRef(0);
319
- var theta = useRef(0);
320
- var distance = useRef(50);
321
- var pointerDown = useRef(false);
322
- var pointerDownX = useRef(0);
323
- var pointerDownY = useRef(0);
324
- var pointerLon = useRef(0);
325
- var pointerLat = useRef(0);
282
+ const canvasRef = useRef(null);
283
+ const camera = useRef(null);
284
+ const scene = useRef(null);
285
+ const renderer = useRef(null);
286
+ const lon = useRef(0);
287
+ const lat = useRef(0);
288
+ const phi = useRef(0);
289
+ const theta = useRef(0);
290
+ const distance = useRef(50);
291
+ const pointerDown = useRef(false);
292
+ const pointerDownX = useRef(0);
293
+ const pointerDownY = useRef(0);
294
+ const pointerLon = useRef(0);
295
+ const pointerLat = useRef(0);
326
296
 
327
297
  // render 3D frame
328
298
 
329
- var render3D = useCallback(function () {
299
+ const render3D = useCallback(() => {
330
300
  if (THREE === null) {
331
301
  return;
332
302
  }
333
- var MathUtils = THREE.MathUtils;
303
+ const {
304
+ MathUtils
305
+ } = THREE;
334
306
  lat.current = Math.max(-85, Math.min(85, lat.current));
335
307
  phi.current = MathUtils.degToRad(90 - lat.current);
336
308
  theta.current = MathUtils.degToRad(lon.current);
@@ -343,45 +315,40 @@ function Video360Screen(_ref) {
343
315
 
344
316
  // Init 3D layer
345
317
 
346
- useEffect(function () {
318
+ useEffect(() => {
347
319
  if (THREE !== null && hasVideoUrl && withVideoSphere) {
348
- var _ref7 = THREE || {},
349
- _ref7$Scene = _ref7.Scene,
350
- Scene = _ref7$Scene === void 0 ? null : _ref7$Scene,
351
- _ref7$PerspectiveCame = _ref7.PerspectiveCamera,
352
- PerspectiveCamera = _ref7$PerspectiveCame === void 0 ? null : _ref7$PerspectiveCame,
353
- _ref7$SphereBufferGeo = _ref7.SphereBufferGeometry,
354
- SphereBufferGeometry = _ref7$SphereBufferGeo === void 0 ? null : _ref7$SphereBufferGeo,
355
- _ref7$VideoTexture = _ref7.VideoTexture,
356
- VideoTexture = _ref7$VideoTexture === void 0 ? null : _ref7$VideoTexture,
357
- _ref7$MeshBasicMateri = _ref7.MeshBasicMaterial,
358
- MeshBasicMaterial = _ref7$MeshBasicMateri === void 0 ? null : _ref7$MeshBasicMateri,
359
- _ref7$Mesh = _ref7.Mesh,
360
- Mesh = _ref7$Mesh === void 0 ? null : _ref7$Mesh,
361
- _ref7$WebGLRenderer = _ref7.WebGLRenderer,
362
- WebGLRenderer = _ref7$WebGLRenderer === void 0 ? null : _ref7$WebGLRenderer;
320
+ const {
321
+ Scene = null,
322
+ PerspectiveCamera = null,
323
+ SphereBufferGeometry = null,
324
+ VideoTexture = null,
325
+ MeshBasicMaterial = null,
326
+ Mesh = null,
327
+ WebGLRenderer = null
328
+ } = THREE || {};
363
329
  if (Scene === null || PerspectiveCamera === null || SphereBufferGeometry === null || VideoTexture === null || MeshBasicMaterial === null || Mesh === null || WebGLRenderer === null) {
364
- return function () {
330
+ return () => {
365
331
  camera.current = null;
366
332
  scene.current = null;
367
333
  renderer.current = null;
368
334
  };
369
335
  }
370
- var _canvasRef$current = canvasRef.current,
371
- canvasWidth = _canvasRef$current.offsetWidth,
372
- canvasHeight = _canvasRef$current.offsetHeight;
336
+ const {
337
+ offsetWidth: canvasWidth,
338
+ offsetHeight: canvasHeight
339
+ } = canvasRef.current;
373
340
  camera.current = new PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1100);
374
341
  scene.current = new Scene();
375
- var geometry = new SphereBufferGeometry(500, 60, 40);
342
+ const geometry = new SphereBufferGeometry(500, 60, 40);
376
343
  geometry.scale(-1, 1, 1);
377
- var _ref8 = mediaRef || {},
378
- _ref8$current = _ref8.current,
379
- videoElement = _ref8$current === void 0 ? null : _ref8$current;
380
- var videoTexture = new VideoTexture(videoElement);
381
- var videoMaterial = new MeshBasicMaterial({
344
+ const {
345
+ current: videoElement = null
346
+ } = mediaRef || {};
347
+ const videoTexture = new VideoTexture(videoElement);
348
+ const videoMaterial = new MeshBasicMaterial({
382
349
  map: videoTexture
383
350
  });
384
- var mesh = new Mesh(geometry, videoMaterial);
351
+ const mesh = new Mesh(geometry, videoMaterial);
385
352
  scene.current.add(mesh);
386
353
  renderer.current = new WebGLRenderer({
387
354
  canvas: canvasRef.current
@@ -390,7 +357,7 @@ function Video360Screen(_ref) {
390
357
  renderer.current.setSize(canvasWidth, canvasHeight);
391
358
  render3D();
392
359
  }
393
- return function () {
360
+ return () => {
394
361
  if (withVideoSphere) {
395
362
  camera.current = null;
396
363
  scene.current = null;
@@ -404,7 +371,7 @@ function Video360Screen(_ref) {
404
371
 
405
372
  // Resize 3D layer
406
373
 
407
- useEffect(function () {
374
+ useEffect(() => {
408
375
  if (camera.current !== null && renderer.current !== null) {
409
376
  camera.current.aspect = width / height;
410
377
  camera.current.updateProjectionMatrix();
@@ -413,8 +380,8 @@ function Video360Screen(_ref) {
413
380
  }, [width, height]);
414
381
 
415
382
  // Pointer interaction
416
- var togglePlayTimeout = useRef(null);
417
- var onPointerDown = useCallback(function (e) {
383
+ const togglePlayTimeout = useRef(null);
384
+ const onPointerDown = useCallback(e => {
418
385
  pointerDown.current = true;
419
386
  pointerDownX.current = e.clientX;
420
387
  pointerDownY.current = e.clientY;
@@ -430,27 +397,25 @@ function Video360Screen(_ref) {
430
397
  }, [
431
398
  /* togglePlay */
432
399
  ]);
433
- var pixelsMoved = useRef(0);
434
- var lastPointerClient = useRef(null);
435
- var pixelsMovedTracked = useRef(false);
436
- var onPointerMove = useCallback(function (e) {
400
+ const pixelsMoved = useRef(0);
401
+ const lastPointerClient = useRef(null);
402
+ const pixelsMovedTracked = useRef(false);
403
+ const onPointerMove = useCallback(e_0 => {
437
404
  if (pointerDown.current) {
438
- var _ref9 = e || {},
439
- _ref9$clientX = _ref9.clientX,
440
- clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
441
- _ref9$clientY = _ref9.clientY,
442
- clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
443
- var downDeltaX = pointerDownX.current - clientX;
444
- var downDeltaY = pointerDownY.current - clientY;
405
+ const {
406
+ clientX = null,
407
+ clientY = null
408
+ } = e_0 || {};
409
+ const downDeltaX = pointerDownX.current - clientX;
410
+ const downDeltaY = pointerDownY.current - clientY;
445
411
  lon.current = downDeltaX * 0.2 + pointerLon.current;
446
412
  lat.current = downDeltaY * 0.2 + pointerLat.current;
447
- var _ref0 = lastPointerClient.current || {},
448
- _ref0$x = _ref0.x,
449
- lastX = _ref0$x === void 0 ? clientX : _ref0$x,
450
- _ref0$y = _ref0.y,
451
- lastY = _ref0$y === void 0 ? clientY : _ref0$y;
452
- var deltaX = Math.abs(lastX - clientX) || 0;
453
- var deltaY = Math.abs(lastY - clientY) || 0;
413
+ const {
414
+ x: lastX = clientX,
415
+ y: lastY = clientY
416
+ } = lastPointerClient.current || {};
417
+ const deltaX = Math.abs(lastX - clientX) || 0;
418
+ const deltaY = Math.abs(lastY - clientY) || 0;
454
419
  pixelsMoved.current += deltaX + deltaY;
455
420
  if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
456
421
  trackScreenEvent('drag_sphere', video.name);
@@ -468,21 +433,21 @@ function Video360Screen(_ref) {
468
433
  }
469
434
  }
470
435
  }, [width, height, trackScreenEvent, video]);
471
- var onPointerUp = useCallback(function (e) {
472
- var videoContainer = videoContainerRef.current;
436
+ const onPointerUp = useCallback(e_1 => {
437
+ const videoContainer = videoContainerRef.current;
473
438
  if (pointerDown.current && videoContainer !== null) {
474
- var distX = Math.abs(pointerDownX.current - e.clientX);
475
- var distY = Math.abs(pointerDownY.current - e.clientY);
476
- var pixelsMovedTolerance = 3;
477
- var tapNextScreenWidthPercent = 0.5;
478
- var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
479
- var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
439
+ const distX = Math.abs(pointerDownX.current - e_1.clientX);
440
+ const distY = Math.abs(pointerDownY.current - e_1.clientY);
441
+ const pixelsMovedTolerance = 3;
442
+ const tapNextScreenWidthPercent = 0.5;
443
+ const canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
444
+ const validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
480
445
  if (validNavigateTap) {
481
- var _videoContainer$getBo = videoContainer.getBoundingClientRect(),
482
- _videoContainer$getBo2 = _videoContainer$getBo.left,
483
- containerX = _videoContainer$getBo2 === void 0 ? 0 : _videoContainer$getBo2,
484
- containerWidth = _videoContainer$getBo.width;
485
- var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
446
+ const {
447
+ left: containerX = 0,
448
+ width: containerWidth
449
+ } = videoContainer.getBoundingClientRect();
450
+ const hasTappedLeft = e_1.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
486
451
  if (hasTappedLeft) {
487
452
  if (gotoPreviousScreen !== null) {
488
453
  gotoPreviousScreen();
@@ -498,14 +463,16 @@ function Video360Screen(_ref) {
498
463
  }
499
464
  pointerDown.current = false;
500
465
  }, [gotoPreviousScreen, gotoNextScreen, landscape]);
501
- var onPlayError = useCallback(function () {
466
+ const onPlayError = useCallback(() => {
502
467
  if (isView && playing && current && hasVideoUrl && autoPlay) {
503
468
  setPlaying(false);
504
469
  setControlsSuggestPlay(true);
505
470
  }
506
471
  }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
507
472
  return /*#__PURE__*/jsxs("div", {
508
- className: classNames([styles.container, className, _defineProperty({}, styles.showVideo, isPreview || isStatic || isCapture)]),
473
+ className: classNames([styles.container, className, {
474
+ [styles.showVideo]: isPreview || isStatic || isCapture
475
+ }]),
509
476
  "data-screen-ready": (isStatic || isCapture) && posterReady || ready,
510
477
  children: [/*#__PURE__*/jsxs(Container, {
511
478
  width: width,
@@ -520,10 +487,11 @@ function Video360Screen(_ref) {
520
487
  left: resizedVideoLeft,
521
488
  top: resizedVideoTop
522
489
  },
523
- children: /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
524
- mediaRef: mediaRef,
490
+ children: /*#__PURE__*/jsx(Video, {
491
+ ...finalVideo,
492
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
525
493
  className: styles.video,
526
- paused: !current || !playing,
494
+ paused: !videoPlaying,
527
495
  muted: muted,
528
496
  withoutCors: true,
529
497
  onReady: onVideoReady,
@@ -541,7 +509,7 @@ function Video360Screen(_ref) {
541
509
  shouldLoad: mediaShouldLoad,
542
510
  qualityStartLevel: currentQualityLevel,
543
511
  onQualityLevelChange: setCurrentQualityLevel
544
- }))
512
+ })
545
513
  }) : null, /*#__PURE__*/jsxs("div", {
546
514
  className: styles.inner,
547
515
  children: [/*#__PURE__*/jsxs(ScreenElement, {
@@ -553,10 +521,7 @@ function Video360Screen(_ref) {
553
521
  emptyClassName: styles.empty,
554
522
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
555
523
  id: "oLtEu6",
556
- defaultMessage: [{
557
- "type": 0,
558
- "value": "Video 360"
559
- }]
524
+ defaultMessage: "Video 360"
560
525
  }),
561
526
  isEmpty: !withVideoSphere,
562
527
  children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
@@ -565,9 +530,11 @@ function Video360Screen(_ref) {
565
530
  paddingTop: spacing / 2,
566
531
  paddingLeft: spacing,
567
532
  paddingRight: spacing,
568
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
533
+ transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
569
534
  },
570
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
535
+ children: /*#__PURE__*/jsx(Header, {
536
+ ...header
537
+ })
571
538
  }, "header") : null, withVideoSphere ? /*#__PURE__*/jsxs(Fragment, {
572
539
  children: [/*#__PURE__*/jsx("canvas", {
573
540
  ref: canvasRef,
@@ -606,20 +573,21 @@ function Video360Screen(_ref) {
606
573
  }, "video"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
607
574
  className: styles.bottom,
608
575
  style: {
609
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
576
+ transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
610
577
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
611
578
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
612
579
  paddingBottom: spacing / 2,
613
580
  paddingTop: 0
614
581
  },
615
- children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
582
+ children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
616
583
  className: styles.closedCaptions,
617
- media: closedCaptions
618
- }, captions), {}, {
584
+ media: closedCaptions,
585
+ ...captions,
619
586
  currentTime: currentTime
620
- })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread(_objectSpread({}, footerProps), {}, {
587
+ }) : null, hasFooter ? /*#__PURE__*/jsx(Footer, {
588
+ ...footerProps,
621
589
  className: styles.callToAction
622
- })) : null]
590
+ }) : null]
623
591
  }, "bottom-content") : null]
624
592
  })]
625
593
  }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
@@ -644,19 +612,13 @@ var definition = {
644
612
  group: {
645
613
  label: defineMessage({
646
614
  id: "+9akmg",
647
- defaultMessage: [{
648
- "type": 0,
649
- "value": "Audio and Video"
650
- }]
615
+ defaultMessage: "Audio and Video"
651
616
  }),
652
617
  order: 5
653
618
  },
654
619
  title: defineMessage({
655
620
  id: "GRVidW",
656
- defaultMessage: [{
657
- "type": 0,
658
- "value": "360 Video"
659
- }]
621
+ defaultMessage: "360 Video"
660
622
  }),
661
623
  component: Video360Screen,
662
624
  layouts: ['full'],
@@ -672,30 +634,21 @@ var definition = {
672
634
  },
673
635
  label: defineMessage({
674
636
  id: "tvl2Zc",
675
- defaultMessage: [{
676
- "type": 0,
677
- "value": "Video"
678
- }]
637
+ defaultMessage: "Video"
679
638
  })
680
639
  }, {
681
640
  name: 'background',
682
641
  type: 'background',
683
642
  label: defineMessage({
684
643
  id: "+MPZRu",
685
- defaultMessage: [{
686
- "type": 0,
687
- "value": "Background"
688
- }]
644
+ defaultMessage: "Background"
689
645
  })
690
646
  }, {
691
647
  name: 'header',
692
648
  type: 'header',
693
649
  label: defineMessage({
694
650
  id: "rhuDxI",
695
- defaultMessage: [{
696
- "type": 0,
697
- "value": "Header"
698
- }]
651
+ defaultMessage: "Header"
699
652
  }),
700
653
  theme: {
701
654
  badge: {
@@ -710,10 +663,7 @@ var definition = {
710
663
  type: 'footer',
711
664
  label: defineMessage({
712
665
  id: "g4nybp",
713
- defaultMessage: [{
714
- "type": 0,
715
- "value": "Footer"
716
- }]
666
+ defaultMessage: "Footer"
717
667
  }),
718
668
  theme: {
719
669
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-video-360",
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",
@@ -81,6 +82,6 @@
81
82
  "access": "public",
82
83
  "registry": "https://registry.npmjs.org/"
83
84
  },
84
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }