@micromag/core 0.4.65 → 0.4.66

package/es/contexts.d.ts

@@ -369,6 +369,7 @@ interface PlaybackContext {
     controlsVisible: boolean;
     media: MediaElement | null;
     hasAudio: boolean | null;
+    isBackground: boolean;
     controlsTheme: PlaybackControlsTheme | null;
     currentQualityLevel: number | null;
     setMuted: (muted: boolean) => void;

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) {

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) {

package/package.json

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