@micromag/screen-timeline 0.4.70 → 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 { HeadingElement, TextElement, TextStyle, Color, Header, Footer, BackgroundElement, Alternatives } from '@micromag/core';
 
 interface TimelineProps {
@@ -22,9 +23,10 @@ interface TimelineProps {
     active?: boolean;
     preload?: boolean;
     type?: string | null;
+    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
     className?: string | null;
 }
-declare function Timeline({ layout, title, items, itemTitleStyle, itemDescriptionStyle, withoutLine, bulletColor, lineColor, bulletShape, bulletFilled, illustrated, spacing: initialSpacing, itemBottomSpacing: initialItemBottomSpacing, header, footer, background, alternatives, current, active, preload, type, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare function Timeline({ layout, title, items, itemTitleStyle, itemDescriptionStyle, withoutLine, bulletColor, lineColor, bulletShape, bulletFilled, illustrated, spacing: initialSpacing, itemBottomSpacing: initialItemBottomSpacing, header, footer, background, alternatives, current, active, preload, type, mediaRef: customMediaRef, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
 
 declare function TimelineIllustratedScreen({ ...props }: {
     [x: string]: any;

package/es/index.js

@@ -8,7 +8,7 @@ import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
-import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
 import Audio from '@micromag/element-audio';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
@@ -69,6 +69,8 @@ function Timeline(_ref) {
     preload = _ref$preload === void 0 ? true : _ref$preload,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? null : _ref$type,
+    _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 trackScreenEvent = useTrackScreenEvent(type);
@@ -536,7 +538,7 @@ function Timeline(_ref) {
       }) : null]
     }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, _objectSpread(_objectSpread({}, finalAudioAlternative), {}, {
       paused: !audioPlaying,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       muted: muted,
       className: styles.audio,
       shouldLoad: mediaShouldLoad,
@@ -556,7 +558,7 @@ function Timeline(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: audioAlternativeMedia === null ? mediaRef : null,
+      mediaRef: audioAlternativeMedia === null ? mergeRefs(mediaRef, customMediaRef) : null,
       withoutVideo: isPreview,
       className: styles.background
     }) : null]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.4.70",
+    "version": "0.4.71",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,17 +61,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.69",
-        "@micromag/element-background": "^0.4.70",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.70",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-heading": "^0.4.69",
-        "@micromag/element-layout": "^0.4.69",
-        "@micromag/element-scroll": "^0.4.69",
-        "@micromag/element-text": "^0.4.69",
-        "@micromag/element-visual": "^0.4.70",
-        "@micromag/transforms": "^0.4.69",
+        "@micromag/core": "^0.4.71",
+        "@micromag/element-background": "^0.4.71",
+        "@micromag/element-container": "^0.4.71",
+        "@micromag/element-footer": "^0.4.71",
+        "@micromag/element-header": "^0.4.71",
+        "@micromag/element-heading": "^0.4.71",
+        "@micromag/element-layout": "^0.4.71",
+        "@micromag/element-scroll": "^0.4.71",
+        "@micromag/element-text": "^0.4.71",
+        "@micromag/element-visual": "^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": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
     "types": "es/index.d.ts"
 }