@micromag/element-video 0.4.66 → 0.4.69

package/es/index.js

@@ -6,8 +6,8 @@ import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { Spinner } from '@micromag/core/components';
+import { useSetting, mediaElementIsPlaying } from '@micromag/core/contexts';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
-import { useSetting } from '@micromag/core/contexts';
 import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -250,38 +250,40 @@ function Video(_ref) {
       onReady();
     }
   }, [ready, onReady]);
-  var finalPreload = shouldLoad ? preload : 'none';
-  var _useState5 = useState(finalPreload === 'auto' || finalPreload === 'metadata'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    wasPreloaded = _useState6[0],
-    setWasPreloaded = _useState6[1];
+  var _useState5 = useState(shouldLoad ? preload : 'none'),
+    _useState6 = _slicedToArray(_useState5, 1),
+    finalPreload = _useState6[0];
+  var _useState7 = useState(finalPreload === 'auto' || finalPreload === 'metadata'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    wasPreloaded = _useState8[0],
+    setWasPreloaded = _useState8[1];
   useEffect(function () {
     var _ref$current2 = _ref6.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
-    if (shouldLoad && !wasPreloaded && element !== null) {
+    if (element !== null && shouldLoad && (!wasPreloaded || element.readyState === 0)) {
       try {
         element.load();
       } catch (_unused) {}
       setWasPreloaded(true);
     }
-  }, [shouldLoad, wasPreloaded]);
+  }, [shouldLoad, wasPreloaded, mediaUrl, paused]);
   useEffect(function () {
     var _ref$current3 = _ref6.current,
       element = _ref$current3 === void 0 ? null : _ref$current3;
     if (element === null || mediaUrl === null) {
       return;
     }
-    var isPaused = element.paused;
-    if (paused && !isPaused) {
+    var isPlaying = mediaElementIsPlaying(element);
+    if (paused && isPlaying) {
       element.pause();
-    } else if (!paused && isPaused) {
+    } else if (!paused && !isPlaying) {
       element.play()["catch"](function (e) {
         if (onPlayError !== null) {
           onPlayError(e);
         }
       });
     }
-  }, [paused, media, mediaUrl, onPlayError]);
+  }, [paused, media, mediaUrl, shouldLoad, wasPreloaded]);
   useProgressSteps({
     currentTime: currentTime,
     duration: duration,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.4.66",
+    "version": "0.4.69",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,8 +60,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.66",
-        "@micromag/element-closed-captions": "^0.4.66",
+        "@micromag/core": "^0.4.69",
+        "@micromag/element-closed-captions": "^0.4.69",
         "classnames": "^2.2.6",
         "hls.js": "^1.5.15",
         "lodash": "^4.17.23",
@@ -72,6 +72,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "61e9d9511073041dc7900185d49a559126119450",
+    "gitHead": "509e113dc06022d6092e4aac9f47ccd5facfd59d",
     "types": "es/index.d.ts"
 }