@micromag/screen-video-360 0.4.71 → 0.4.74

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ForwardedRef } from 'react';
-import { VideoElement, Header, Footer, BackgroundElement } from '@micromag/core';
+import { VideoElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
 
 interface Video360ScreenProps {
     layout?: 'full';
@@ -12,7 +12,7 @@ interface Video360ScreenProps {
     preload?: boolean;
     type?: string | null;
     spacing?: number;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 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

@@ -1,13 +1,10 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { ScreenElement, PlaceholderVideo360 } from '@micromag/core/components';
-import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useTrackScreenMedia, useDevicePixelRatio, useActivityDetector, useDebounce, useAnimationFrame } from '@micromag/core/hooks';
+import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useTrackScreenMedia, useDevicePixelRatio, useDebounce, useAnimationFrame } from '@micromag/core/hooks';
 import { isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import ClosedCaptions from '@micromag/element-closed-captions';
@@ -21,48 +18,48 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 /**
  * Locale loader
  */
-var packageCache = null;
-var useThree = function useThree() {
+let packageCache = null;
+const useThree = () => {
   // transport
-  var _useState = useState({
-      "package": packageCache
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    loadedPackage = _useState2[0]["package"],
-    setLoadedPackage = _useState2[1];
-  useEffect(function () {
-    var canceled = false;
+  const [{
+    package: loadedPackage
+  }, setLoadedPackage] = useState({
+    package: packageCache
+  });
+  useEffect(() => {
+    let canceled = false;
     if (loadedPackage !== null) {
-      return function () {
+      return () => {
         canceled = true;
       };
     }
-    import('three').then(function (_ref) {
-      var Scene = _ref.Scene,
-        PerspectiveCamera = _ref.PerspectiveCamera,
-        SphereBufferGeometry = _ref.SphereBufferGeometry,
-        VideoTexture = _ref.VideoTexture,
-        MeshBasicMaterial = _ref.MeshBasicMaterial,
-        Mesh = _ref.Mesh,
-        WebGLRenderer = _ref.WebGLRenderer,
-        MathUtils = _ref.MathUtils;
+    import('three').then(({
+      Scene,
+      PerspectiveCamera,
+      SphereBufferGeometry,
+      VideoTexture,
+      MeshBasicMaterial,
+      Mesh,
+      WebGLRenderer,
+      MathUtils
+    }) => {
       packageCache = {
-        Scene: Scene,
-        PerspectiveCamera: PerspectiveCamera,
-        SphereBufferGeometry: SphereBufferGeometry,
-        VideoTexture: VideoTexture,
-        MeshBasicMaterial: MeshBasicMaterial,
-        Mesh: Mesh,
-        WebGLRenderer: WebGLRenderer,
-        MathUtils: MathUtils
+        Scene,
+        PerspectiveCamera,
+        SphereBufferGeometry,
+        VideoTexture,
+        MeshBasicMaterial,
+        Mesh,
+        WebGLRenderer,
+        MathUtils
       };
       if (!canceled) {
         setLoadedPackage({
-          "package": packageCache
+          package: packageCache
         });
       }
     });
-    return function () {
+    return () => {
       canceled = true;
     };
   }, [loadedPackage, setLoadedPackage]);
@@ -71,135 +68,120 @@ var useThree = function useThree() {
 
 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"};
 
-function Video360Screen(_ref) {
-  _ref.layout;
-    var _ref$video = _ref.video,
-    video = _ref$video === void 0 ? null : _ref$video,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var THREE = useThree();
-  var trackScreenEvent = useTrackScreenEvent(type);
-  var trackScreenMedia = useTrackScreenMedia('video_360');
-  var _useViewerInteraction = useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _useViewerNavigation = useViewerNavigation(),
-    gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    landscape = _useScreenSize.landscape,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var devicePixelRatio = useDevicePixelRatio();
-  var mediaShouldLoad = current || preload;
-  var _ref2 = video || {},
-    _ref2$media = _ref2.media,
-    videoMedia = _ref2$media === void 0 ? null : _ref2$media,
-    _ref2$closedCaptions = _ref2.closedCaptions,
-    closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-    _ref2$captions = _ref2.captions,
-    captions = _ref2$captions === void 0 ? null : _ref2$captions,
-    _ref2$withSeekBar = _ref2.withSeekBar,
-    withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
-    _ref2$withControls = _ref2.withControls,
-    withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
-    _ref2$autoPlay = _ref2.autoPlay,
-    autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? null : _ref2$color,
-    _ref2$progressColor = _ref2.progressColor,
-    progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
-  var videoContainerRef = useRef();
-  var _usePlaybackContext = usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setMedia = _usePlaybackContext.setMedia,
-    setPlaying = _usePlaybackContext.setPlaying,
-    showControls = _usePlaybackContext.showControls,
-    hideControls = _usePlaybackContext.hideControls,
-    currentQualityLevel = _usePlaybackContext.currentQualityLevel,
-    setCurrentQualityLevel = _usePlaybackContext.setCurrentQualityLevel;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
-  useEffect(function () {
+function Video360Screen({
+  layout: _layout = 'full',
+  video = null,
+  header = null,
+  footer = null,
+  background = null,
+  current = true,
+  preload = true,
+  type = null,
+  spacing = 20,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const THREE = useThree();
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const trackScreenMedia = useTrackScreenMedia('video_360');
+  const {
+    enableInteraction,
+    disableInteraction
+  } = useViewerInteraction();
+  const {
+    gotoPreviousScreen,
+    gotoNextScreen
+  } = useViewerNavigation();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    width,
+    height,
+    landscape,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const devicePixelRatio = useDevicePixelRatio();
+  const mediaShouldLoad = current || preload;
+  const {
+    media: videoMedia = null,
+    closedCaptions = null,
+    captions = null,
+    withSeekBar = false,
+    withControls = false,
+    autoPlay = true,
+    color = null,
+    progressColor = null
+  } = video || {};
+  const videoContainerRef = useRef();
+  const {
+    playing,
+    muted,
+    setControls,
+    setControlsTheme,
+    setControlsSuggestPlay,
+    setMedia,
+    setPlaying,
+    showControls,
+    hideControls,
+    currentQualityLevel,
+    setCurrentQualityLevel
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
+  useEffect(() => {
     if (!current) {
-      return function () {};
+      return () => {};
     }
     if (withControls || withSeekBar) {
       setControls(true);
       setControlsTheme({
         seekBarOnly: withSeekBar && !withControls,
-        color: color,
-        progressColor: progressColor
+        color,
+        progressColor
       });
     } else {
       setControls(false);
     }
-    return function () {
+    return () => {
       if (withControls || withSeekBar) {
         setControls(false);
       }
     };
   }, [current, withControls, setControls, withSeekBar, color, progressColor]);
-  useEffect(function () {
+  useEffect(() => {
     if (!current) {
-      return function () {};
+      return () => {};
     }
     setMedia(mediaRef.current);
-    return function () {
+    return () => {
       setMedia(null);
     };
   }, [current]);
-  useEffect(function () {
+  useEffect(() => {
     if (current && autoPlay && !playing) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
-  var viewerContainer = useViewerContainer();
-  var _useActivityDetector = useActivityDetector({
-      element: viewerContainer,
-      disabled: !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  var toggleControlsVisibility = useCallback(function () {
+  const activityDetected = useViewerActivityDetected();
+  const toggleControlsVisibility = useCallback(() => {
     if (activityDetected) {
       showControls();
     } else {
@@ -207,37 +189,33 @@ function Video360Screen(_ref) {
     }
   }, [activityDetected, showControls, hideControls]);
   useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentTime = _useState2[0],
-    setCurrentTime = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    duration = _useState4[0],
-    setDuration = _useState4[1];
-  var onTimeUpdate = useCallback(function (time) {
+  const [currentTime, setCurrentTime] = useState(null);
+  const [duration, setDuration] = useState(null);
+  const onTimeUpdate = useCallback(time => {
     setCurrentTime(time);
   }, [setDuration, duration]);
-  var onProgressStep = useCallback(function (step, meta) {
-    trackScreenMedia(videoMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
+  const onProgressStep = useCallback((step, meta) => {
+    trackScreenMedia(videoMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
   }, [trackScreenMedia, videoMedia]);
-  var onDurationChange = useCallback(function (dur) {
+  const onDurationChange = useCallback(dur => {
     setDuration(dur);
   }, [setDuration]);
-  var onPlay = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  const onPlay = useCallback(({
+    initial
+  }) => {
     trackScreenMedia(videoMedia, initial ? 'play' : 'resume');
   }, [trackScreenMedia, videoMedia]);
-  var onPause = useCallback(function (_ref4) {
-    var midway = _ref4.midway;
+  const onPause = useCallback(({
+    midway
+  }) => {
     trackScreenMedia(videoMedia, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, videoMedia]);
-  var onSeeked = useCallback(function (time) {
-    if (time > 0) {
+  const onSeeked = useCallback(time_0 => {
+    if (time_0 > 0) {
       trackScreenMedia(videoMedia, 'seek');
     }
   }, [trackScreenMedia, videoMedia]);
-  var onEnded = useCallback(function () {
+  const onEnded = useCallback(() => {
     if (current) {
       setPlaying(false);
     }
@@ -245,91 +223,86 @@ function Video360Screen(_ref) {
 
   // ------------------------------------
 
-  var hasVideo = video !== null;
-  var _useState5 = useState(!hasVideo),
-    _useState6 = _slicedToArray(_useState5, 2),
-    ready = _useState6[0],
-    setReady = _useState6[1];
+  const hasVideo = video !== null;
+  const [ready, setReady] = useState(!hasVideo);
 
   // const transitionPlaying = current && ready;
   // const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
 
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview,
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
+  const hasHeader = isHeaderFilled(header);
+  const hasFooter = isFooterFilled(footer);
+  const footerProps = getFooterProps(footer, {
+    isView,
+    current,
+    openWebView,
+    isPreview,
+    enableInteraction,
+    disableInteraction
   });
-  var finalVideo = hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
+  const finalVideo = hasVideo ? {
+    ...video,
     autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-  }) : null;
-  var _ref5 = videoMedia || {},
-    _ref5$metadata = _ref5.metadata,
-    videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata,
-    _ref5$url = _ref5.url,
-    videoUrl = _ref5$url === void 0 ? null : _ref5$url,
-    _ref5$thumbnail_url = _ref5.thumbnail_url,
-    thumbnailUrl = _ref5$thumbnail_url === void 0 ? null : _ref5$thumbnail_url;
-  var hasVideoUrl = videoUrl !== null;
-  var _ref6 = videoMetadata || {},
-    _ref6$width = _ref6.width,
-    videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
-  var hasThumbnail = thumbnailUrl !== null;
-  var _useState7 = useState(!hasThumbnail),
-    _useState8 = _slicedToArray(_useState7, 2),
-    posterReady = _useState8[0],
-    setPosterReady = _useState8[1];
-  var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
-  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
-      cover: true
-    }),
-    resizedVideoWidth = _getSizeWithinBounds.width,
-    resizedVideoHeight = _getSizeWithinBounds.height;
-  var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
-  var resizedVideoTop = -(resizedVideoHeight - height) / 2;
-  useEffect(function () {
+  } : null;
+  const {
+    metadata: videoMetadata = null,
+    url: videoUrl = null,
+    thumbnail_url: thumbnailUrl = null
+  } = videoMedia || {};
+  const hasVideoUrl = videoUrl !== null;
+  const {
+    width: videoWidth = 0,
+    height: videoHeight = 0
+  } = videoMetadata || {};
+  const hasThumbnail = thumbnailUrl !== null;
+  const [posterReady, setPosterReady] = useState(!hasThumbnail);
+  const withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
+  const {
+    width: resizedVideoWidth,
+    height: resizedVideoHeight
+  } = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
+    cover: true
+  });
+  const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
+  const resizedVideoTop = -(resizedVideoHeight - height) / 2;
+  useEffect(() => {
     setReady(!hasVideoUrl);
   }, [videoUrl, hasVideoUrl, setReady]);
-  useEffect(function () {
+  useEffect(() => {
     setPosterReady(!hasThumbnail);
   }, [thumbnailUrl, hasThumbnail, setPosterReady]);
-  var onVideoReady = useCallback(function () {
+  const onVideoReady = useCallback(() => {
     setReady(true);
   }, [setReady]);
-  var onPosterLoaded = useCallback(function () {
+  const onPosterLoaded = useCallback(() => {
     setPosterReady(true);
   }, [posterReady]);
 
   // 3D layer  --------------------------
 
-  var canvasRef = useRef(null);
-  var camera = useRef(null);
-  var scene = useRef(null);
-  var renderer = useRef(null);
-  var lon = useRef(0);
-  var lat = useRef(0);
-  var phi = useRef(0);
-  var theta = useRef(0);
-  var distance = useRef(50);
-  var pointerDown = useRef(false);
-  var pointerDownX = useRef(0);
-  var pointerDownY = useRef(0);
-  var pointerLon = useRef(0);
-  var pointerLat = useRef(0);
+  const canvasRef = useRef(null);
+  const camera = useRef(null);
+  const scene = useRef(null);
+  const renderer = useRef(null);
+  const lon = useRef(0);
+  const lat = useRef(0);
+  const phi = useRef(0);
+  const theta = useRef(0);
+  const distance = useRef(50);
+  const pointerDown = useRef(false);
+  const pointerDownX = useRef(0);
+  const pointerDownY = useRef(0);
+  const pointerLon = useRef(0);
+  const pointerLat = useRef(0);
 
   // render 3D frame
 
-  var render3D = useCallback(function () {
+  const render3D = useCallback(() => {
     if (THREE === null) {
       return;
     }
-    var MathUtils = THREE.MathUtils;
+    const {
+      MathUtils
+    } = THREE;
     lat.current = Math.max(-85, Math.min(85, lat.current));
     phi.current = MathUtils.degToRad(90 - lat.current);
     theta.current = MathUtils.degToRad(lon.current);
@@ -342,45 +315,40 @@ function Video360Screen(_ref) {
 
   // Init 3D layer
 
-  useEffect(function () {
+  useEffect(() => {
     if (THREE !== null && hasVideoUrl && withVideoSphere) {
-      var _ref7 = THREE || {},
-        _ref7$Scene = _ref7.Scene,
-        Scene = _ref7$Scene === void 0 ? null : _ref7$Scene,
-        _ref7$PerspectiveCame = _ref7.PerspectiveCamera,
-        PerspectiveCamera = _ref7$PerspectiveCame === void 0 ? null : _ref7$PerspectiveCame,
-        _ref7$SphereBufferGeo = _ref7.SphereBufferGeometry,
-        SphereBufferGeometry = _ref7$SphereBufferGeo === void 0 ? null : _ref7$SphereBufferGeo,
-        _ref7$VideoTexture = _ref7.VideoTexture,
-        VideoTexture = _ref7$VideoTexture === void 0 ? null : _ref7$VideoTexture,
-        _ref7$MeshBasicMateri = _ref7.MeshBasicMaterial,
-        MeshBasicMaterial = _ref7$MeshBasicMateri === void 0 ? null : _ref7$MeshBasicMateri,
-        _ref7$Mesh = _ref7.Mesh,
-        Mesh = _ref7$Mesh === void 0 ? null : _ref7$Mesh,
-        _ref7$WebGLRenderer = _ref7.WebGLRenderer,
-        WebGLRenderer = _ref7$WebGLRenderer === void 0 ? null : _ref7$WebGLRenderer;
+      const {
+        Scene = null,
+        PerspectiveCamera = null,
+        SphereBufferGeometry = null,
+        VideoTexture = null,
+        MeshBasicMaterial = null,
+        Mesh = null,
+        WebGLRenderer = null
+      } = THREE || {};
       if (Scene === null || PerspectiveCamera === null || SphereBufferGeometry === null || VideoTexture === null || MeshBasicMaterial === null || Mesh === null || WebGLRenderer === null) {
-        return function () {
+        return () => {
           camera.current = null;
           scene.current = null;
           renderer.current = null;
         };
       }
-      var _canvasRef$current = canvasRef.current,
-        canvasWidth = _canvasRef$current.offsetWidth,
-        canvasHeight = _canvasRef$current.offsetHeight;
+      const {
+        offsetWidth: canvasWidth,
+        offsetHeight: canvasHeight
+      } = canvasRef.current;
       camera.current = new PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1100);
       scene.current = new Scene();
-      var geometry = new SphereBufferGeometry(500, 60, 40);
+      const geometry = new SphereBufferGeometry(500, 60, 40);
       geometry.scale(-1, 1, 1);
-      var _ref8 = mediaRef || {},
-        _ref8$current = _ref8.current,
-        videoElement = _ref8$current === void 0 ? null : _ref8$current;
-      var videoTexture = new VideoTexture(videoElement);
-      var videoMaterial = new MeshBasicMaterial({
+      const {
+        current: videoElement = null
+      } = mediaRef || {};
+      const videoTexture = new VideoTexture(videoElement);
+      const videoMaterial = new MeshBasicMaterial({
         map: videoTexture
       });
-      var mesh = new Mesh(geometry, videoMaterial);
+      const mesh = new Mesh(geometry, videoMaterial);
       scene.current.add(mesh);
       renderer.current = new WebGLRenderer({
         canvas: canvasRef.current
@@ -389,7 +357,7 @@ function Video360Screen(_ref) {
       renderer.current.setSize(canvasWidth, canvasHeight);
       render3D();
     }
-    return function () {
+    return () => {
       if (withVideoSphere) {
         camera.current = null;
         scene.current = null;
@@ -403,7 +371,7 @@ function Video360Screen(_ref) {
 
   // Resize 3D layer
 
-  useEffect(function () {
+  useEffect(() => {
     if (camera.current !== null && renderer.current !== null) {
       camera.current.aspect = width / height;
       camera.current.updateProjectionMatrix();
@@ -412,8 +380,8 @@ function Video360Screen(_ref) {
   }, [width, height]);
 
   // Pointer interaction
-  var togglePlayTimeout = useRef(null);
-  var onPointerDown = useCallback(function (e) {
+  const togglePlayTimeout = useRef(null);
+  const onPointerDown = useCallback(e => {
     pointerDown.current = true;
     pointerDownX.current = e.clientX;
     pointerDownY.current = e.clientY;
@@ -429,27 +397,25 @@ function Video360Screen(_ref) {
   }, [
     /* togglePlay */
   ]);
-  var pixelsMoved = useRef(0);
-  var lastPointerClient = useRef(null);
-  var pixelsMovedTracked = useRef(false);
-  var onPointerMove = useCallback(function (e) {
+  const pixelsMoved = useRef(0);
+  const lastPointerClient = useRef(null);
+  const pixelsMovedTracked = useRef(false);
+  const onPointerMove = useCallback(e_0 => {
     if (pointerDown.current) {
-      var _ref9 = e || {},
-        _ref9$clientX = _ref9.clientX,
-        clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
-        _ref9$clientY = _ref9.clientY,
-        clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
-      var downDeltaX = pointerDownX.current - clientX;
-      var downDeltaY = pointerDownY.current - clientY;
+      const {
+        clientX = null,
+        clientY = null
+      } = e_0 || {};
+      const downDeltaX = pointerDownX.current - clientX;
+      const downDeltaY = pointerDownY.current - clientY;
       lon.current = downDeltaX * 0.2 + pointerLon.current;
       lat.current = downDeltaY * 0.2 + pointerLat.current;
-      var _ref0 = lastPointerClient.current || {},
-        _ref0$x = _ref0.x,
-        lastX = _ref0$x === void 0 ? clientX : _ref0$x,
-        _ref0$y = _ref0.y,
-        lastY = _ref0$y === void 0 ? clientY : _ref0$y;
-      var deltaX = Math.abs(lastX - clientX) || 0;
-      var deltaY = Math.abs(lastY - clientY) || 0;
+      const {
+        x: lastX = clientX,
+        y: lastY = clientY
+      } = lastPointerClient.current || {};
+      const deltaX = Math.abs(lastX - clientX) || 0;
+      const deltaY = Math.abs(lastY - clientY) || 0;
       pixelsMoved.current += deltaX + deltaY;
       if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
         trackScreenEvent('drag_sphere', video.name);
@@ -467,21 +433,21 @@ function Video360Screen(_ref) {
       }
     }
   }, [width, height, trackScreenEvent, video]);
-  var onPointerUp = useCallback(function (e) {
-    var videoContainer = videoContainerRef.current;
+  const onPointerUp = useCallback(e_1 => {
+    const videoContainer = videoContainerRef.current;
     if (pointerDown.current && videoContainer !== null) {
-      var distX = Math.abs(pointerDownX.current - e.clientX);
-      var distY = Math.abs(pointerDownY.current - e.clientY);
-      var pixelsMovedTolerance = 3;
-      var tapNextScreenWidthPercent = 0.5;
-      var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
-      var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
+      const distX = Math.abs(pointerDownX.current - e_1.clientX);
+      const distY = Math.abs(pointerDownY.current - e_1.clientY);
+      const pixelsMovedTolerance = 3;
+      const tapNextScreenWidthPercent = 0.5;
+      const canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
+      const validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
       if (validNavigateTap) {
-        var _videoContainer$getBo = videoContainer.getBoundingClientRect(),
-          _videoContainer$getBo2 = _videoContainer$getBo.left,
-          containerX = _videoContainer$getBo2 === void 0 ? 0 : _videoContainer$getBo2,
-          containerWidth = _videoContainer$getBo.width;
-        var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
+        const {
+          left: containerX = 0,
+          width: containerWidth
+        } = videoContainer.getBoundingClientRect();
+        const hasTappedLeft = e_1.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
         if (hasTappedLeft) {
           if (gotoPreviousScreen !== null) {
             gotoPreviousScreen();
@@ -497,14 +463,16 @@ function Video360Screen(_ref) {
     }
     pointerDown.current = false;
   }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-  var onPlayError = useCallback(function () {
+  const onPlayError = useCallback(() => {
     if (isView && playing && current && hasVideoUrl && autoPlay) {
       setPlaying(false);
       setControlsSuggestPlay(true);
     }
   }, [isView, current, playing, hasVideoUrl, autoPlay, setPlaying, setControlsSuggestPlay]);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.showVideo, isPreview || isStatic || isCapture)]),
+    className: classNames([styles.container, className, {
+      [styles.showVideo]: isPreview || isStatic || isCapture
+    }]),
     "data-screen-ready": (isStatic || isCapture) && posterReady || ready,
     children: [/*#__PURE__*/jsxs(Container, {
       width: width,
@@ -519,7 +487,8 @@ function Video360Screen(_ref) {
           left: resizedVideoLeft,
           top: resizedVideoTop
         },
-        children: /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
+        children: /*#__PURE__*/jsx(Video, {
+          ...finalVideo,
           mediaRef: mergeRefs(mediaRef, customMediaRef),
           className: styles.video,
           paused: !videoPlaying,
@@ -540,7 +509,7 @@ function Video360Screen(_ref) {
           shouldLoad: mediaShouldLoad,
           qualityStartLevel: currentQualityLevel,
           onQualityLevelChange: setCurrentQualityLevel
-        }))
+        })
       }) : null, /*#__PURE__*/jsxs("div", {
         className: styles.inner,
         children: [/*#__PURE__*/jsxs(ScreenElement, {
@@ -552,10 +521,7 @@ function Video360Screen(_ref) {
           emptyClassName: styles.empty,
           emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
             id: "oLtEu6",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Video 360"
-            }]
+            defaultMessage: "Video 360"
           }),
           isEmpty: !withVideoSphere,
           children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
@@ -564,9 +530,11 @@ function Video360Screen(_ref) {
               paddingTop: spacing / 2,
               paddingLeft: spacing,
               paddingRight: spacing,
-              transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+              transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
             },
-            children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+            children: /*#__PURE__*/jsx(Header, {
+              ...header
+            })
           }, "header") : null, withVideoSphere ? /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx("canvas", {
               ref: canvasRef,
@@ -605,20 +573,21 @@ function Video360Screen(_ref) {
         }, "video"), !isPlaceholder ? /*#__PURE__*/jsxs("div", {
           className: styles.bottom,
           style: {
-            transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+            transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
             paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
             paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
             paddingBottom: spacing / 2,
             paddingTop: 0
           },
-          children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, _objectSpread(_objectSpread({
+          children: [(closedCaptions !== null || captions !== null) && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/jsx(ClosedCaptions, {
             className: styles.closedCaptions,
-            media: closedCaptions
-          }, captions), {}, {
+            media: closedCaptions,
+            ...captions,
             currentTime: currentTime
-          })) : null, hasFooter ? /*#__PURE__*/jsx(Footer, _objectSpread(_objectSpread({}, footerProps), {}, {
+          }) : null, hasFooter ? /*#__PURE__*/jsx(Footer, {
+            ...footerProps,
             className: styles.callToAction
-          })) : null]
+          }) : null]
         }, "bottom-content") : null]
       })]
     }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
@@ -643,19 +612,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "+9akmg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio and Video"
-      }]
+      defaultMessage: "Audio and Video"
     }),
     order: 5
   },
   title: defineMessage({
     id: "GRVidW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "360 Video"
-    }]
+    defaultMessage: "360 Video"
   }),
   component: Video360Screen,
   layouts: ['full'],
@@ -671,30 +634,21 @@ var definition = {
     },
     label: defineMessage({
       id: "tvl2Zc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
+      defaultMessage: "Video"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -709,10 +663,7 @@ var definition = {
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "version": "0.4.71",
+    "version": "0.4.74",
     "private": false,
     "description": "",
     "keywords": [
@@ -36,6 +36,7 @@
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -52,25 +53,25 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-closed-captions": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-footer": "^0.4.71",
-        "@micromag/element-header": "^0.4.71",
-        "@micromag/element-image": "^0.4.71",
-        "@micromag/element-video": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-background": "^0.4.74",
+        "@micromag/element-closed-captions": "^0.4.74",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-footer": "^0.4.74",
+        "@micromag/element-header": "^0.4.74",
+        "@micromag/element-image": "^0.4.74",
+        "@micromag/element-video": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }