@micromag/core 0.4.65 → 0.4.69

package/es/contexts.d.ts

@@ -360,6 +360,7 @@ interface PlaybackControlsTheme {
     progressColor?: unknown;
 }
 type MediaElement = HTMLVideoElement | HTMLAudioElement | HTMLMediaElement;
+declare function mediaElementIsPlaying(media: MediaElement | null): boolean;
 interface PlaybackContext {
     playing: boolean;
     completed: boolean;
@@ -369,6 +370,7 @@ interface PlaybackContext {
     controlsVisible: boolean;
     media: MediaElement | null;
     hasAudio: boolean | null;
+    isBackground: boolean;
     controlsTheme: PlaybackControlsTheme | null;
     currentQualityLevel: number | null;
     setMuted: (muted: boolean) => void;
@@ -525,4 +527,4 @@ interface VisitorProviderProps {
 }
 declare function VisitorProvider({ visitor: providedVisitor, children, }: VisitorProviderProps): react_jsx_runtime.JSX.Element;
 
-export { ComponentsContext, ComponentsProvider, ConsentContext, ConsentProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, SettingsContext, SettingsProvider, StoryContext, StoryProvider, TrackingProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, useComponent, useComponents, useComponentsManager, useConsent, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useSetting, useSettings, useStory, useStoryContext, useTracking, useViewerContainer, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerSize, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
+export { ComponentsContext, ComponentsProvider, ConsentContext, ConsentProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, SettingsContext, SettingsProvider, StoryContext, StoryProvider, TrackingProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, mediaElementIsPlaying, useComponent, useComponents, useComponentsManager, useConsent, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useSetting, useSettings, useStory, useStoryContext, useTracking, useViewerContainer, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerSize, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };

package/es/contexts.js

@@ -1006,6 +1006,9 @@ function PanelsProvider(_ref2) {
   });
 }
 
+function mediaElementIsPlaying(media) {
+  return media !== null && !!(media.currentTime > 0 && !media.paused && !media.ended && media.readyState > 2);
+}
 var defaultControlsThemeValue = {
   seekBarOnly: false,
   color: null,
@@ -1019,6 +1022,7 @@ var PlaybackContext = /*#__PURE__*/createContext({
   controlsSuggestPlay: false,
   controlsVisible: false,
   hasAudio: false,
+  isBackground: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
   currentQualityLevel: null,
@@ -1044,26 +1048,37 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
     media = _usePlaybackContext.media,
-    isBackground = _usePlaybackContext.isBackground;
+    isBackground = _usePlaybackContext.isBackground,
+    playing = _usePlaybackContext.playing;
   var mediaRef = useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   useEffect(function () {
-    var currentMedia = mediaRef.current;
+    var _mediaRef$current = mediaRef.current,
+      currentMedia = _mediaRef$current === void 0 ? null : _mediaRef$current;
     return function () {
       if (active) {
-        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
+        var shouldPause = currentMedia !== null && mediaElementIsPlaying(currentMedia);
         setMedia(null);
         setIsBackground(false);
-        if (playing) {
+        if (shouldPause) {
           currentMedia.pause();
         }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
+  // Play early in the process
+  var currentMedia = mediaRef.current;
+  var forcePlayingRef = useRef(false);
+  var shouldForcePlaying = active && currentMedia !== null && playing && !forcePlayingRef.current && !mediaElementIsPlaying(currentMedia);
+  if (shouldForcePlaying) {
+    forcePlayingRef.current = true;
+    currentMedia.play();
+  }
+
   // Register media with context when active and no media is registered
   useEffect(function () {
     if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
@@ -1617,4 +1632,4 @@ function VisitorProvider(_ref) {
   });
 }
 
-export { ComponentsContext, ComponentsProvider, ConsentContext, ConsentProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, SettingsContext, SettingsProvider, StoryContext, StoryProvider, TrackingProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, useComponent, useComponents, useComponentsManager, useConsent, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useSetting, useSettings, useStory, useStoryContext, useTracking, useViewerContainer, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerSize, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
+export { ComponentsContext, ComponentsProvider, ConsentContext, ConsentProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, SettingsContext, SettingsProvider, StoryContext, StoryProvider, TrackingProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, mediaElementIsPlaying, useComponent, useComponents, useComponentsManager, useConsent, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useSetting, useSettings, useStory, useStoryContext, useTracking, useViewerContainer, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerSize, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };

package/lib/contexts.js

@@ -1006,6 +1006,9 @@ function PanelsProvider(_ref2) {
   });
 }
 
+function mediaElementIsPlaying(media) {
+  return media !== null && !!(media.currentTime > 0 && !media.paused && !media.ended && media.readyState > 2);
+}
 var defaultControlsThemeValue = {
   seekBarOnly: false,
   color: null,
@@ -1019,6 +1022,7 @@ var PlaybackContext = /*#__PURE__*/React.createContext({
   controlsSuggestPlay: false,
   controlsVisible: false,
   hasAudio: false,
+  isBackground: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
   currentQualityLevel: null,
@@ -1044,26 +1048,37 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
     media = _usePlaybackContext.media,
-    isBackground = _usePlaybackContext.isBackground;
+    isBackground = _usePlaybackContext.isBackground,
+    playing = _usePlaybackContext.playing;
   var mediaRef = React.useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   React.useEffect(function () {
-    var currentMedia = mediaRef.current;
+    var _mediaRef$current = mediaRef.current,
+      currentMedia = _mediaRef$current === void 0 ? null : _mediaRef$current;
     return function () {
       if (active) {
-        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
+        var shouldPause = currentMedia !== null && mediaElementIsPlaying(currentMedia);
         setMedia(null);
         setIsBackground(false);
-        if (playing) {
+        if (shouldPause) {
           currentMedia.pause();
         }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
+  // Play early in the process
+  var currentMedia = mediaRef.current;
+  var forcePlayingRef = React.useRef(false);
+  var shouldForcePlaying = active && currentMedia !== null && playing && !forcePlayingRef.current && !mediaElementIsPlaying(currentMedia);
+  if (shouldForcePlaying) {
+    forcePlayingRef.current = true;
+    currentMedia.play();
+  }
+
   // Register media with context when active and no media is registered
   React.useEffect(function () {
     if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
@@ -1683,6 +1698,7 @@ exports.ViewerContext = ViewerContext;
 exports.ViewerProvider = ViewerProvider;
 exports.VisitorContext = VisitorContext;
 exports.VisitorProvider = VisitorProvider;
+exports.mediaElementIsPlaying = mediaElementIsPlaying;
 exports.useComponent = useComponent;
 exports.useComponents = useComponents;
 exports.useComponentsManager = useComponentsManager;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.65",
+    "version": "0.4.69",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "33460a352e56298ae450392b04c09503ecfeae05",
+    "gitHead": "509e113dc06022d6092e4aac9f47ccd5facfd59d",
     "types": "es/index.d.ts"
 }