@micromag/screen-video-360 0.4.69 → 0.4.71

package/es/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ForwardedRef } from 'react';
 import { VideoElement, Header, Footer, BackgroundElement } from '@micromag/core';
 
 interface Video360ScreenProps {
@@ -11,7 +12,7 @@ interface Video360ScreenProps {
     preload?: boolean;
     type?: string | null;
     spacing?: number;
-    mediaRef?: ((...args: unknown[]) => void) | null;
+    mediaRef?: ForwardedRef<HTMLMediaElement> | 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

@@ -6,9 +6,9 @@ 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, useViewerContainer } from '@micromag/core/contexts';
+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 { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import ClosedCaptions from '@micromag/element-closed-captions';
 import Container from '@micromag/element-container';
@@ -121,7 +121,6 @@ function Video360Screen(_ref) {
   var _useViewerWebView = useViewerWebView(),
     openWebView = _useViewerWebView.open;
   var devicePixelRatio = useDevicePixelRatio();
-  var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || preload;
   var _ref2 = video || {},
     _ref2$media = _ref2.media,
@@ -153,7 +152,12 @@ function Video360Screen(_ref) {
     hideControls = _usePlaybackContext.hideControls,
     currentQualityLevel = _usePlaybackContext.currentQualityLevel,
     setCurrentQualityLevel = _usePlaybackContext.setCurrentQualityLevel;
-  var mediaRef = useRef(null);
+  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 () {
     if (!current) {
       return function () {};
@@ -183,11 +187,6 @@ function Video360Screen(_ref) {
       setMedia(null);
     };
   }, [current]);
-  useEffect(function () {
-    if (customMediaRef !== null) {
-      customMediaRef(mediaRef.current);
-    }
-  }, [mediaRef.current]);
   useEffect(function () {
     if (current && autoPlay && !playing) {
       setPlaying(true);
@@ -521,9 +520,9 @@ function Video360Screen(_ref) {
           top: resizedVideoTop
         },
         children: /*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, finalVideo), {}, {
-          mediaRef: mediaRef,
+          mediaRef: mergeRefs(mediaRef, customMediaRef),
           className: styles.video,
-          paused: !current || !playing,
+          paused: !videoPlaying,
           muted: muted,
           withoutCors: true,
           onReady: onVideoReady,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "version": "0.4.69",
+    "version": "0.4.71",
     "private": false,
     "description": "",
     "keywords": [
@@ -62,15 +62,15 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.69",
-        "@micromag/element-background": "^0.4.69",
-        "@micromag/element-closed-captions": "^0.4.69",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.69",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-image": "^0.4.69",
-        "@micromag/element-video": "^0.4.69",
-        "@micromag/transforms": "^0.4.69",
+        "@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",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "509e113dc06022d6092e4aac9f47ccd5facfd59d",
+    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
     "types": "es/index.d.ts"
 }