@micromag/screen-image-360 0.4.70 → 0.4.74

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageMedia, BackgroundElement, Header, Footer } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { ImageMedia, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
 
 interface Image360ScreenProps {
     layout?: 'full';
@@ -11,9 +12,10 @@ interface Image360ScreenProps {
     preload?: boolean;
     type?: string | null;
     spacing?: number;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
-declare function Image360Screen({ layout: _layout, image, background, header, footer, current, preload, type, spacing, className, }: Image360ScreenProps): react_jsx_runtime.JSX.Element;
+declare function Image360Screen({ layout: _layout, image, background, header, footer, current, preload, type, spacing, mediaRef: customMediaRef, className, }: Image360ScreenProps): react_jsx_runtime.JSX.Element;
 
 declare const _default: {
     id: string;

package/es/index.js

@@ -1,68 +1,66 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { c } from 'react/compiler-runtime';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { ScreenElement, PlaceholderVideo360 } from '@micromag/core/components';
+import { useState, useEffect, useRef } from 'react';
+import { PlaceholderVideo360, ScreenElement } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerNavigation, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDevicePixelRatio, useAnimationFrame } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Image from '@micromag/element-image';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, 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,
-        TextureLoader = _ref.TextureLoader,
-        MeshBasicMaterial = _ref.MeshBasicMaterial,
-        Mesh = _ref.Mesh,
-        WebGLRenderer = _ref.WebGLRenderer,
-        MathUtils = _ref.MathUtils;
+    import('three').then(({
+      Scene,
+      PerspectiveCamera,
+      SphereBufferGeometry,
+      VideoTexture,
+      TextureLoader,
+      MeshBasicMaterial,
+      Mesh,
+      WebGLRenderer,
+      MathUtils
+    }) => {
       packageCache = {
-        Scene: Scene,
-        PerspectiveCamera: PerspectiveCamera,
-        SphereBufferGeometry: SphereBufferGeometry,
-        VideoTexture: VideoTexture,
-        TextureLoader: TextureLoader,
-        MeshBasicMaterial: MeshBasicMaterial,
-        Mesh: Mesh,
-        WebGLRenderer: WebGLRenderer,
-        MathUtils: MathUtils
+        Scene,
+        PerspectiveCamera,
+        SphereBufferGeometry,
+        VideoTexture,
+        TextureLoader,
+        MeshBasicMaterial,
+        Mesh,
+        WebGLRenderer,
+        MathUtils
       };
       if (!canceled) {
         setLoadedPackage({
-          "package": packageCache
+          package: packageCache
         });
       }
     });
-    return function () {
+    return () => {
       canceled = true;
     };
   }, [loadedPackage, setLoadedPackage]);
@@ -71,374 +69,618 @@ var useThree = function useThree() {
 
 var styles = {"container":"micromag-screen-image-360-container","background":"micromag-screen-image-360-background","content":"micromag-screen-image-360-content","empty":"micromag-screen-image-360-empty","inner":"micromag-screen-image-360-inner","canvas":"micromag-screen-image-360-canvas","canvasButton":"micromag-screen-image-360-canvasButton","video":"micromag-screen-image-360-video","videoContainer":"micromag-screen-image-360-videoContainer","placeholder":"micromag-screen-image-360-placeholder","header":"micromag-screen-image-360-header","footer":"micromag-screen-image-360-footer","showVideo":"micromag-screen-image-360-showVideo"};
 
-function Image360Screen(_ref) {
-  _ref.layout;
-    var _ref$image = _ref.image,
-    image = _ref$image === void 0 ? null : _ref$image,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _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$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$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var THREE = useThree();
-  var trackScreenEvent = useTrackScreenEvent(type);
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    landscape = _useScreenSize.landscape,
-    resolution = _useScreenSize.resolution;
-  var _useViewerNavigation = useViewerNavigation(),
-    gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
-    gotoNextScreen = _useViewerNavigation.gotoNextScreen;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _useViewerContext = useViewerContext(),
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var mediaShouldLoad = current || preload;
-  var canvasContainerRef = useRef();
-  var devicePixelRatio = useDevicePixelRatio();
-
-  // ------------------------------------
-
-  var hasMedia = image !== null;
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+function Image360Screen(t0) {
+  const $ = c(119);
+  const {
+    layout: t1,
+    image: t2,
+    background: t3,
+    header: t4,
+    footer: t5,
+    current: t6,
+    preload: t7,
+    type: t8,
+    spacing: t9,
+    mediaRef: t10,
+    className: t11
+  } = t0;
+  const image = t2 === undefined ? null : t2;
+  const background = t3 === undefined ? null : t3;
+  const header = t4 === undefined ? null : t4;
+  const footer = t5 === undefined ? null : t5;
+  const current = t6 === undefined ? true : t6;
+  const preload = t7 === undefined ? true : t7;
+  const type = t8 === undefined ? null : t8;
+  const spacing = t9 === undefined ? 20 : t9;
+  const customMediaRef = t10 === undefined ? null : t10;
+  const className = t11 === undefined ? null : t11;
+  const THREE = useThree();
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    width,
+    height,
+    landscape,
+    resolution
+  } = useScreenSize();
+  const {
+    gotoPreviousScreen,
+    gotoNextScreen
+  } = useViewerNavigation();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: t12
+  } = usePlaybackMediaRef(current, true);
+  const isCurrentMedia = t12 === undefined ? false : t12;
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = current || preload;
+  const canvasContainerRef = useRef();
+  const devicePixelRatio = useDevicePixelRatio();
+  const hasMedia = image !== null;
+  let t13;
+  if ($[0] !== header) {
+    t13 = isHeaderFilled(header);
+    $[0] = header;
+    $[1] = t13;
+  } else {
+    t13 = $[1];
+  }
+  const hasHeader = t13;
+  let t14;
+  if ($[2] !== footer) {
+    t14 = isFooterFilled(footer);
+    $[2] = footer;
+    $[3] = t14;
+  } else {
+    t14 = $[3];
+  }
+  const hasFooter = t14;
+  let t15;
+  if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
+    t15 = getFooterProps(footer, {
+      isView,
+      current,
+      openWebView,
+      isPreview
+    });
+    $[4] = current;
+    $[5] = footer;
+    $[6] = isPreview;
+    $[7] = isView;
+    $[8] = openWebView;
+    $[9] = t15;
+  } else {
+    t15 = $[9];
+  }
+  const footerProps = t15;
+  const [ready, setReady] = useState(!hasMedia);
+  const {
+    metadata: t16,
+    url: t17,
+    thumbnail_url: t18
+  } = image || {};
+  const imageMetadata = t16 === undefined ? null : t16;
+  const imageUrl = t17 === undefined ? null : t17;
+  const thumbnailUrl = t18 === undefined ? null : t18;
+  const hasMediaUrl = imageUrl !== null;
+  const {
+    width: t19,
+    height: t20
+  } = imageMetadata || {};
+  const imageWidth = t19 === undefined ? 0 : t19;
+  const imageHeight = t20 === undefined ? 0 : t20;
+  const hasThumbnail = thumbnailUrl !== null;
+  const [posterReady, setPosterReady] = useState(!hasThumbnail);
+  const withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
+  const {
+    width: resizedImageWidth,
+    height: resizedImageHeight
+  } = getSizeWithinBounds(imageWidth, imageHeight, width, height, {
+    cover: true
   });
-  var _useState = useState(!hasMedia),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var _ref2 = image || {},
-    _ref2$metadata = _ref2.metadata,
-    imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
-    _ref2$url = _ref2.url,
-    imageUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$thumbnail_url = _ref2.thumbnail_url,
-    thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
-  var hasMediaUrl = imageUrl !== null;
-  var _ref3 = imageMetadata || {},
-    _ref3$width = _ref3.width,
-    imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-    _ref3$height = _ref3.height,
-    imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
-  var hasThumbnail = thumbnailUrl !== null;
-  var _useState3 = useState(!hasThumbnail),
-    _useState4 = _slicedToArray(_useState3, 2),
-    posterReady = _useState4[0],
-    setPosterReady = _useState4[1];
-  var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
-  var _getSizeWithinBounds = getSizeWithinBounds(imageWidth, imageHeight, width, height, {
-      cover: true
-    }),
-    resizedImageWidth = _getSizeWithinBounds.width,
-    resizedImageHeight = _getSizeWithinBounds.height;
-  var resizedImageLeft = -(resizedImageWidth - width) / 2;
-  var resizedImageTop = -(resizedImageHeight - height) / 2;
-  useEffect(function () {
-    setReady(!hasMediaUrl);
-  }, [imageUrl, hasMediaUrl, setReady]);
-  useEffect(function () {
-    setPosterReady(!hasThumbnail);
-  }, [thumbnailUrl, hasThumbnail, setPosterReady]);
-
-  // 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);
-  // const distance = useRef(50);
-  var pointerDown = useRef(false);
-  var pointerDownX = useRef(0);
-  var pointerDownY = useRef(0);
-  var pointerLon = useRef(0);
-  var pointerLat = useRef(0);
-
-  // render 3D frame
-
-  var render3D = useCallback(function () {
-    if (THREE === null) {
-      return;
-    }
-
-    // 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);
-
-    // camera.current.position.x =
-    //     distance.current * Math.sin(phi.current) * Math.cos(theta.current);
-    // camera.current.position.y = distance.current * Math.cos(phi.current);
-    // camera.current.position.z =
-    //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
-
-    // camera.current.lookAt(0, 0, 0);
-
-    lat.current = Math.max(-85, Math.min(85, lat.current));
-    phi.current = THREE.MathUtils.degToRad(90 - lat.current);
-    theta.current = THREE.MathUtils.degToRad(lon.current);
-    var x = 500 * Math.sin(phi.current) * Math.cos(theta.current);
-    var y = 500 * Math.cos(phi.current);
-    var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
-    camera.current.lookAt(x, y, z);
-    renderer.current.render(scene.current, camera.current);
-  }, [THREE]);
-
-  // Init 3D layer
-
-  useEffect(function () {
-    if (THREE !== null && hasMediaUrl && withSphere) {
-      var Scene = THREE.Scene,
-        PerspectiveCamera = THREE.PerspectiveCamera,
-        SphereBufferGeometry = THREE.SphereBufferGeometry,
-        MeshBasicMaterial = THREE.MeshBasicMaterial,
-        Mesh = THREE.Mesh,
-        WebGLRenderer = THREE.WebGLRenderer,
-        TextureLoader = THREE.TextureLoader;
-      var _canvasRef$current = canvasRef.current,
-        canvasWidth = _canvasRef$current.offsetWidth,
-        canvasHeight = _canvasRef$current.offsetHeight;
-      camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
-      scene.current = new Scene();
-      var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
-      geometry.scale(-1, 1, 1);
-      var texture = new TextureLoader().load(imageUrl);
-      var material = new MeshBasicMaterial({
-        map: texture
-      });
-      var mesh = new Mesh(geometry, material);
-      scene.current.add(mesh);
-      renderer.current = new WebGLRenderer({
-        canvas: canvasRef.current
-      });
-      renderer.current.setPixelRatio(devicePixelRatio);
-      renderer.current.setSize(canvasWidth, canvasHeight);
-      render3D();
-    }
-    return function () {
-      if (withSphere) {
-        camera.current = null;
-        scene.current = null;
-        renderer.current = null;
+  const resizedImageLeft = -(resizedImageWidth - width) / 2;
+  const resizedImageTop = -(resizedImageHeight - height) / 2;
+  let t21;
+  if ($[10] !== hasMediaUrl) {
+    t21 = () => {
+      setReady(!hasMediaUrl);
+    };
+    $[10] = hasMediaUrl;
+    $[11] = t21;
+  } else {
+    t21 = $[11];
+  }
+  let t22;
+  if ($[12] !== hasMediaUrl || $[13] !== imageUrl) {
+    t22 = [imageUrl, hasMediaUrl, setReady];
+    $[12] = hasMediaUrl;
+    $[13] = imageUrl;
+    $[14] = t22;
+  } else {
+    t22 = $[14];
+  }
+  useEffect(t21, t22);
+  let t23;
+  if ($[15] !== hasThumbnail || $[16] !== setPosterReady) {
+    t23 = () => {
+      setPosterReady(!hasThumbnail);
+    };
+    $[15] = hasThumbnail;
+    $[16] = setPosterReady;
+    $[17] = t23;
+  } else {
+    t23 = $[17];
+  }
+  let t24;
+  if ($[18] !== hasThumbnail || $[19] !== setPosterReady || $[20] !== thumbnailUrl) {
+    t24 = [thumbnailUrl, hasThumbnail, setPosterReady];
+    $[18] = hasThumbnail;
+    $[19] = setPosterReady;
+    $[20] = thumbnailUrl;
+    $[21] = t24;
+  } else {
+    t24 = $[21];
+  }
+  useEffect(t23, t24);
+  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 pointerDown = useRef(false);
+  const pointerDownX = useRef(0);
+  const pointerDownY = useRef(0);
+  const pointerLon = useRef(0);
+  const pointerLat = useRef(0);
+  let t25;
+  if ($[22] !== THREE) {
+    t25 = () => {
+      if (THREE === null) {
+        return;
       }
+      lat.current = Math.max(-85, Math.min(85, lat.current));
+      phi.current = THREE.MathUtils.degToRad(90 - lat.current);
+      theta.current = THREE.MathUtils.degToRad(lon.current);
+      const x = 500 * Math.sin(phi.current) * Math.cos(theta.current);
+      const y = 500 * Math.cos(phi.current);
+      const z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
+      camera.current.lookAt(x, y, z);
+      renderer.current.render(scene.current, camera.current);
     };
-  }, [hasMediaUrl, withSphere, render3D, THREE]);
-  useAnimationFrame(render3D, {
-    disabled: !withSphere || THREE === null
-  });
-
-  // Resize 3D layer
-
-  useEffect(function () {
-    if (camera.current !== null && renderer.current !== null) {
-      camera.current.aspect = width / height;
-      camera.current.updateProjectionMatrix();
-      renderer.current.setSize(width, height);
-    }
-  }, [width, height]);
-
-  // Pointer interaction
-  var togglePlayTimeout = useRef(null);
-  var onPointerDown = useCallback(function (e) {
-    pointerDown.current = true;
-    pointerDownX.current = e.clientX;
-    pointerDownY.current = e.clientY;
-    pointerLon.current = lon.current;
-    pointerLat.current = lat.current;
-  }, []);
-  var pixelsMoved = useRef(0);
-  var lastPointerClient = useRef(null);
-  var pixelsMovedTracked = useRef(false);
-  var onPointerMove = useCallback(function (e) {
-    if (pointerDown.current) {
-      var _ref4 = e || {},
-        _ref4$clientX = _ref4.clientX,
-        clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
-        _ref4$clientY = _ref4.clientY,
-        clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
-      var downDeltaX = pointerDownX.current - clientX;
-      var downDeltaY = pointerDownY.current - clientY;
-      lon.current = downDeltaX * 0.2 + pointerLon.current;
-      lat.current = downDeltaY * 0.2 + pointerLat.current;
-      var _ref5 = lastPointerClient.current || {},
-        _ref5$x = _ref5.x,
-        lastX = _ref5$x === void 0 ? clientX : _ref5$x,
-        _ref5$y = _ref5.y,
-        lastY = _ref5$y === void 0 ? clientY : _ref5$y;
-      var deltaX = Math.abs(lastX - clientX) || 0;
-      var deltaY = Math.abs(lastY - clientY) || 0;
-      pixelsMoved.current += deltaX + deltaY;
-      if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
-        trackScreenEvent('drag_sphere');
-        pixelsMovedTracked.current = true;
+    $[22] = THREE;
+    $[23] = t25;
+  } else {
+    t25 = $[23];
+  }
+  const render3D = t25;
+  let t26;
+  if ($[24] !== THREE || $[25] !== devicePixelRatio || $[26] !== hasMediaUrl || $[27] !== imageUrl || $[28] !== render3D || $[29] !== withSphere) {
+    t26 = () => {
+      if (THREE !== null && hasMediaUrl && withSphere) {
+        const {
+          Scene,
+          PerspectiveCamera,
+          SphereBufferGeometry,
+          MeshBasicMaterial,
+          Mesh,
+          WebGLRenderer,
+          TextureLoader
+        } = THREE;
+        const {
+          offsetWidth: canvasWidth,
+          offsetHeight: canvasHeight
+        } = canvasRef.current;
+        camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
+        scene.current = new Scene();
+        const geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
+        geometry.scale(-1, 1, 1);
+        const texture = new TextureLoader().load(imageUrl);
+        const material = new MeshBasicMaterial({
+          map: texture
+        });
+        const mesh = new Mesh(geometry, material);
+        scene.current.add(mesh);
+        renderer.current = new WebGLRenderer({
+          canvas: canvasRef.current
+        });
+        renderer.current.setPixelRatio(devicePixelRatio);
+        renderer.current.setSize(canvasWidth, canvasHeight);
+        render3D();
       }
-      lastPointerClient.current = {
-        x: clientX,
-        y: clientY
+      return () => {
+        if (withSphere) {
+          camera.current = null;
+          scene.current = null;
+          renderer.current = null;
+        }
       };
-      if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
-        if (togglePlayTimeout.current !== null) {
-          clearTimeout(togglePlayTimeout.current);
-          togglePlayTimeout.current = null;
+    };
+    $[24] = THREE;
+    $[25] = devicePixelRatio;
+    $[26] = hasMediaUrl;
+    $[27] = imageUrl;
+    $[28] = render3D;
+    $[29] = withSphere;
+    $[30] = t26;
+  } else {
+    t26 = $[30];
+  }
+  let t27;
+  if ($[31] !== THREE || $[32] !== hasMediaUrl || $[33] !== render3D || $[34] !== withSphere) {
+    t27 = [hasMediaUrl, withSphere, render3D, THREE];
+    $[31] = THREE;
+    $[32] = hasMediaUrl;
+    $[33] = render3D;
+    $[34] = withSphere;
+    $[35] = t27;
+  } else {
+    t27 = $[35];
+  }
+  useEffect(t26, t27);
+  const t28 = !withSphere || THREE === null;
+  let t29;
+  if ($[36] !== t28) {
+    t29 = {
+      disabled: t28
+    };
+    $[36] = t28;
+    $[37] = t29;
+  } else {
+    t29 = $[37];
+  }
+  useAnimationFrame(render3D, t29);
+  let t30;
+  let t31;
+  if ($[38] !== height || $[39] !== width) {
+    t30 = () => {
+      if (camera.current !== null && renderer.current !== null) {
+        camera.current.aspect = width / height;
+        camera.current.updateProjectionMatrix();
+        renderer.current.setSize(width, height);
+      }
+    };
+    t31 = [width, height];
+    $[38] = height;
+    $[39] = width;
+    $[40] = t30;
+    $[41] = t31;
+  } else {
+    t30 = $[40];
+    t31 = $[41];
+  }
+  useEffect(t30, t31);
+  const togglePlayTimeout = useRef(null);
+  let t32;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = e => {
+      pointerDown.current = true;
+      pointerDownX.current = e.clientX;
+      pointerDownY.current = e.clientY;
+      pointerLon.current = lon.current;
+      pointerLat.current = lat.current;
+    };
+    $[42] = t32;
+  } else {
+    t32 = $[42];
+  }
+  const onPointerDown = t32;
+  const pixelsMoved = useRef(0);
+  const lastPointerClient = useRef(null);
+  const pixelsMovedTracked = useRef(false);
+  let t33;
+  if ($[43] !== height || $[44] !== trackScreenEvent || $[45] !== width) {
+    t33 = e_0 => {
+      if (pointerDown.current) {
+        const {
+          clientX: t34,
+          clientY: t35
+        } = e_0 || {};
+        const clientX = t34 === undefined ? null : t34;
+        const clientY = t35 === undefined ? null : t35;
+        const downDeltaX = pointerDownX.current - clientX;
+        const downDeltaY = pointerDownY.current - clientY;
+        lon.current = downDeltaX * 0.2 + pointerLon.current;
+        lat.current = downDeltaY * 0.2 + pointerLat.current;
+        const {
+          x: t36,
+          y: t37
+        } = lastPointerClient.current || {};
+        const lastX = t36 === undefined ? clientX : t36;
+        const lastY = t37 === undefined ? clientY : t37;
+        const deltaX = Math.abs(lastX - clientX) || 0;
+        const deltaY = Math.abs(lastY - clientY) || 0;
+        pixelsMoved.current = pixelsMoved.current + (deltaX + deltaY);
+        if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
+          trackScreenEvent("drag_sphere");
+          pixelsMovedTracked.current = true;
+        }
+        lastPointerClient.current = {
+          x: clientX,
+          y: clientY
+        };
+        if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
+          if (togglePlayTimeout.current !== null) {
+            clearTimeout(togglePlayTimeout.current);
+            togglePlayTimeout.current = null;
+          }
         }
       }
-    }
-  }, [width, height, trackScreenEvent]);
-  var onPointerUp = useCallback(function (e) {
-    var canvasContainer = canvasContainerRef.current;
-    if (pointerDown.current && canvasContainer !== 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;
-      if (validNavigateTap) {
-        var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
-          _canvasContainer$getB2 = _canvasContainer$getB.left,
-          containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
-          containerWidth = _canvasContainer$getB.width;
-        var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
-        if (hasTappedLeft) {
-          if (gotoPreviousScreen !== null) {
-            gotoPreviousScreen();
+    };
+    $[43] = height;
+    $[44] = trackScreenEvent;
+    $[45] = width;
+    $[46] = t33;
+  } else {
+    t33 = $[46];
+  }
+  const onPointerMove = t33;
+  let t34;
+  if ($[47] !== gotoNextScreen || $[48] !== gotoPreviousScreen || $[49] !== landscape) {
+    t34 = e_1 => {
+      const canvasContainer = canvasContainerRef.current;
+      if (pointerDown.current && canvasContainer !== null) {
+        const distX = Math.abs(pointerDownX.current - e_1.clientX);
+        const distY = Math.abs(pointerDownY.current - e_1.clientY);
+        const canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
+        const validNavigateTap = canTapToNavigate && distX < 3 && distY < 3;
+        if (validNavigateTap) {
+          const {
+            left: t35,
+            width: containerWidth
+          } = canvasContainer.getBoundingClientRect();
+          const containerX = t35 === undefined ? 0 : t35;
+          const hasTappedLeft = e_1.clientX - containerX < containerWidth * 0.5;
+          if (hasTappedLeft) {
+            if (gotoPreviousScreen !== null) {
+              gotoPreviousScreen();
+            }
+          } else {
+            if (gotoNextScreen !== null) {
+              gotoNextScreen();
+            }
           }
-        } else if (gotoNextScreen !== null) {
-          gotoNextScreen();
+        }
+        if (togglePlayTimeout.current !== null) {
+          clearTimeout(togglePlayTimeout.current);
+          togglePlayTimeout.current = null;
         }
       }
-      if (togglePlayTimeout.current !== null) {
-        clearTimeout(togglePlayTimeout.current);
-        togglePlayTimeout.current = null;
+      pointerDown.current = false;
+    };
+    $[47] = gotoNextScreen;
+    $[48] = gotoPreviousScreen;
+    $[49] = landscape;
+    $[50] = t34;
+  } else {
+    t34 = $[50];
+  }
+  const onPointerUp = t34;
+  const t35 = isPreview || isStatic || isCapture;
+  let t36;
+  if ($[51] !== className || $[52] !== t35) {
+    t36 = classNames([styles.container, className, {
+      [styles.showVideo]: t35
+    }]);
+    $[51] = className;
+    $[52] = t35;
+    $[53] = t36;
+  } else {
+    t36 = $[53];
+  }
+  const t37 = (isStatic || isCapture) && posterReady || ready;
+  let t38;
+  if ($[54] !== resizedImageHeight || $[55] !== resizedImageLeft || $[56] !== resizedImageTop || $[57] !== resizedImageWidth) {
+    t38 = /*#__PURE__*/jsx("div", {
+      ref: canvasContainerRef,
+      className: styles.videoContainer,
+      style: {
+        width: resizedImageWidth,
+        height: resizedImageHeight,
+        left: resizedImageLeft,
+        top: resizedImageTop
       }
-    }
-    pointerDown.current = false;
-  }, [gotoPreviousScreen, gotoNextScreen, landscape]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.showVideo, isPreview || isStatic || isCapture)]),
-    "data-screen-ready": (isStatic || isCapture) && posterReady || ready,
-    children: [/*#__PURE__*/jsxs(Container, {
+    });
+    $[54] = resizedImageHeight;
+    $[55] = resizedImageLeft;
+    $[56] = resizedImageTop;
+    $[57] = resizedImageWidth;
+    $[58] = t38;
+  } else {
+    t38 = $[58];
+  }
+  let t39;
+  if ($[59] !== hasHeader || $[60] !== header || $[61] !== isPlaceholder || $[62] !== spacing) {
+    t39 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      className: styles.header,
+      style: {
+        paddingTop: spacing / 2,
+        paddingLeft: spacing,
+        paddingRight: spacing
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        ...header
+      })
+    }) : null;
+    $[59] = hasHeader;
+    $[60] = header;
+    $[61] = isPlaceholder;
+    $[62] = spacing;
+    $[63] = t39;
+  } else {
+    t39 = $[63];
+  }
+  let t40;
+  if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+    t40 = /*#__PURE__*/jsx(PlaceholderVideo360, {
+      className: styles.placeholder,
+      width: "100%",
+      height: "100%"
+    });
+    $[64] = t40;
+  } else {
+    t40 = $[64];
+  }
+  let t41;
+  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+    t41 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "/YQ+xP",
+      defaultMessage: "Image 360"
+    });
+    $[65] = t41;
+  } else {
+    t41 = $[65];
+  }
+  const t42 = !withSphere;
+  let t43;
+  if ($[66] !== current || $[67] !== imageHeight || $[68] !== imageWidth || $[69] !== isView || $[70] !== mediaShouldLoad || $[71] !== onPointerMove || $[72] !== onPointerUp || $[73] !== resizedImageHeight || $[74] !== resizedImageLeft || $[75] !== resizedImageTop || $[76] !== resizedImageWidth || $[77] !== resolution || $[78] !== thumbnailUrl || $[79] !== withSphere) {
+    t43 = withSphere ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("canvas", {
+        ref: canvasRef,
+        className: styles.canvas
+      }), /*#__PURE__*/jsx("button", {
+        className: styles.canvasButton,
+        type: "button",
+        "aria-label": "canvas-interaction",
+        onPointerDown: onPointerDown,
+        onPointerMove: onPointerMove,
+        onPointerUp: onPointerUp,
+        tabIndex: current && isView ? null : "-1"
+      })]
+    }) : /*#__PURE__*/jsx("div", {
+      className: styles.videoContainer,
+      style: {
+        width: resizedImageWidth,
+        height: resizedImageHeight,
+        left: resizedImageLeft,
+        top: resizedImageTop
+      },
+      children: /*#__PURE__*/jsx(Image, {
+        className: styles.video,
+        media: {
+          url: thumbnailUrl,
+          metadata: {
+            width: imageWidth,
+            height: imageHeight
+          }
+        },
+        width: resizedImageWidth,
+        height: resizedImageHeight,
+        resolution: resolution,
+        shouldLoad: mediaShouldLoad
+      })
+    });
+    $[66] = current;
+    $[67] = imageHeight;
+    $[68] = imageWidth;
+    $[69] = isView;
+    $[70] = mediaShouldLoad;
+    $[71] = onPointerMove;
+    $[72] = onPointerUp;
+    $[73] = resizedImageHeight;
+    $[74] = resizedImageLeft;
+    $[75] = resizedImageTop;
+    $[76] = resizedImageWidth;
+    $[77] = resolution;
+    $[78] = thumbnailUrl;
+    $[79] = withSphere;
+    $[80] = t43;
+  } else {
+    t43 = $[80];
+  }
+  let t44;
+  if ($[81] !== t42 || $[82] !== t43) {
+    t44 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: t40,
+      emptyClassName: styles.empty,
+      emptyLabel: t41,
+      isEmpty: t42,
+      children: t43
+    });
+    $[81] = t42;
+    $[82] = t43;
+    $[83] = t44;
+  } else {
+    t44 = $[83];
+  }
+  let t45;
+  if ($[84] !== current || $[85] !== footerProps || $[86] !== hasFooter || $[87] !== isPlaceholder || $[88] !== isPreview || $[89] !== spacing || $[90] !== viewerBottomHeight || $[91] !== viewerBottomSidesWidth) {
+    t45 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+      className: styles.footer,
+      style: {
+        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: /*#__PURE__*/jsx(Footer, {
+        ...footerProps
+      })
+    }) : null;
+    $[84] = current;
+    $[85] = footerProps;
+    $[86] = hasFooter;
+    $[87] = isPlaceholder;
+    $[88] = isPreview;
+    $[89] = spacing;
+    $[90] = viewerBottomHeight;
+    $[91] = viewerBottomSidesWidth;
+    $[92] = t45;
+  } else {
+    t45 = $[92];
+  }
+  let t46;
+  if ($[93] !== t39 || $[94] !== t44 || $[95] !== t45) {
+    t46 = /*#__PURE__*/jsxs("div", {
+      className: styles.inner,
+      children: [t39, t44, t45]
+    });
+    $[93] = t39;
+    $[94] = t44;
+    $[95] = t45;
+    $[96] = t46;
+  } else {
+    t46 = $[96];
+  }
+  let t47;
+  if ($[97] !== height || $[98] !== t38 || $[99] !== t46 || $[100] !== width) {
+    t47 = /*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
       className: styles.content,
-      children: [/*#__PURE__*/jsx("div", {
-        ref: canvasContainerRef,
-        className: styles.videoContainer,
-        style: {
-          width: resizedImageWidth,
-          height: resizedImageHeight,
-          left: resizedImageLeft,
-          top: resizedImageTop
-        }
-      }), /*#__PURE__*/jsxs("div", {
-        className: styles.inner,
-        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-          className: styles.header,
-          style: {
-            paddingTop: spacing / 2,
-            paddingLeft: spacing,
-            paddingRight: spacing
-          },
-          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
-        }) : null, /*#__PURE__*/jsx(ScreenElement, {
-          placeholder: /*#__PURE__*/jsx(PlaceholderVideo360, {
-            className: styles.placeholder,
-            width: "100%",
-            height: "100%"
-          }),
-          emptyClassName: styles.empty,
-          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-            id: "/YQ+xP",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Image 360"
-            }]
-          }),
-          isEmpty: !withSphere,
-          children: withSphere ? /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx("canvas", {
-              ref: canvasRef,
-              className: styles.canvas
-            }), /*#__PURE__*/jsx("button", {
-              className: styles.canvasButton,
-              type: "button",
-              "aria-label": "canvas-interaction",
-              onPointerDown: onPointerDown,
-              onPointerMove: onPointerMove,
-              onPointerUp: onPointerUp,
-              tabIndex: current && isView ? null : '-1'
-            })]
-          }) : /*#__PURE__*/jsx("div", {
-            className: styles.videoContainer,
-            style: {
-              width: resizedImageWidth,
-              height: resizedImageHeight,
-              left: resizedImageLeft,
-              top: resizedImageTop
-            },
-            children: /*#__PURE__*/jsx(Image, {
-              className: styles.video,
-              media: {
-                url: thumbnailUrl,
-                metadata: {
-                  width: imageWidth,
-                  height: imageHeight
-                }
-              },
-              width: resizedImageWidth,
-              height: resizedImageHeight,
-              resolution: resolution,
-              shouldLoad: mediaShouldLoad
-            })
-          })
-        }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
-          className: styles.footer,
-          style: {
-            transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-            paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-            paddingBottom: spacing / 2,
-            paddingTop: 0
-          },
-          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
-        }) : null]
-      })]
-    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      children: [t38, t46]
+    });
+    $[97] = height;
+    $[98] = t38;
+    $[99] = t46;
+    $[100] = width;
+    $[101] = t47;
+  } else {
+    t47 = $[101];
+  }
+  let t48;
+  if ($[102] !== background || $[103] !== backgroundPlaying || $[104] !== customMediaRef || $[105] !== height || $[106] !== isPlaceholder || $[107] !== isPreview || $[108] !== mediaRef || $[109] !== mediaShouldLoad || $[110] !== muted || $[111] !== resolution || $[112] !== width) {
+    t48 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -446,11 +688,41 @@ function Image360Screen(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       withoutVideo: isPreview,
       className: styles.background
-    }) : null]
-  });
+    }) : null;
+    $[102] = background;
+    $[103] = backgroundPlaying;
+    $[104] = customMediaRef;
+    $[105] = height;
+    $[106] = isPlaceholder;
+    $[107] = isPreview;
+    $[108] = mediaRef;
+    $[109] = mediaShouldLoad;
+    $[110] = muted;
+    $[111] = resolution;
+    $[112] = width;
+    $[113] = t48;
+  } else {
+    t48 = $[113];
+  }
+  let t49;
+  if ($[114] !== t36 || $[115] !== t37 || $[116] !== t47 || $[117] !== t48) {
+    t49 = /*#__PURE__*/jsxs("div", {
+      className: t36,
+      "data-screen-ready": t37,
+      children: [t47, t48]
+    });
+    $[114] = t36;
+    $[115] = t37;
+    $[116] = t47;
+    $[117] = t48;
+    $[118] = t49;
+  } else {
+    t49 = $[118];
+  }
+  return t49;
 }
 
 // import * as transforms from './transforms/index';
@@ -461,19 +733,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: Image360Screen,
   layouts: ['full'],
@@ -489,30 +755,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: {
@@ -527,10 +784,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-image-360",
-    "version": "0.4.70",
+    "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.69",
-        "@micromag/element-background": "^0.4.70",
-        "@micromag/element-closed-captions": "^0.4.69",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.70",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-image": "^0.4.69",
-        "@micromag/element-video": "^0.4.70",
-        "@micromag/transforms": "^0.4.69",
+        "@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": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }