@micromag/element-video 0.3.792 → 0.3.796

package/es/index.js

@@ -7,17 +7,26 @@ import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react'
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Spinner } from '@micromag/core/components';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
+import { useSetting } from '@micromag/core/contexts';
 import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 
+// Disabled webm for now
+// const defaultPossibleMimes = ['video/mp4', 'video/webm', 'video/ogg', 'application/vnd.apple.mpegurl'];
+
 function useSources(media) {
-  var _ref = media || {},
-    _ref$files = _ref.files,
-    mediaFiles = _ref$files === void 0 ? null : _ref$files,
-    _ref$metadata = _ref.metadata,
-    metadata = _ref$metadata === void 0 ? null : _ref$metadata;
-  var _ref2 = metadata || {},
-    _ref2$mime = _ref2.mime,
-    mediaMime = _ref2$mime === void 0 ? null : _ref2$mime;
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$possibleMimes = _ref.possibleMimes,
+    possibleMimes = _ref$possibleMimes === void 0 ? null : _ref$possibleMimes;
+  var _ref2 = media || {},
+    _ref2$files = _ref2.files,
+    mediaFiles = _ref2$files === void 0 ? null : _ref2$files,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
+  var _ref3 = metadata || {},
+    _ref3$mime = _ref3.mime,
+    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime;
+  var settingsPossibleMimes = useSetting('supportedVideoMimes');
+  var finalPossibleMimes = possibleMimes || settingsPossibleMimes;
   var files = useMemo(function () {
     return getMediaFilesAsArray(mediaFiles);
   }, [mediaFiles]);
@@ -25,9 +34,9 @@ function useSources(media) {
     if (files.length === 0) {
       return null;
     }
-    var supportedMimes = getVideoSupportedMimes();
+    var supportedMimes = getVideoSupportedMimes(finalPossibleMimes);
     if (supportedMimes.length === 0) {
-      supportedMimes = ['video/mp4', 'video/webm'];
+      supportedMimes = ['video/mp4'];
     }
     var supportedFiles = files.filter(function (file) {
       var fileHandle = file.handle || file.id;
@@ -39,27 +48,27 @@ function useSources(media) {
       var fileHandle = file.handle || file.id;
       return fileHandle !== 'original';
     });
-    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(function (_ref3, _ref4) {
-      var _ref3$size = _ref3.size,
-        a = _ref3$size === void 0 ? Infinity : _ref3$size;
+    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(function (_ref4, _ref5) {
       var _ref4$size = _ref4.size,
-        b = _ref4$size === void 0 ? Infinity : _ref4$size;
+        a = _ref4$size === void 0 ? Infinity : _ref4$size;
+      var _ref5$size = _ref5.size,
+        b = _ref5$size === void 0 ? Infinity : _ref5$size;
       if (a === b) {
         return 0;
       }
       return a > b ? 1 : -1;
     });
-  }, [files]);
+  }, [files, finalPossibleMimes]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref5 = files.find(function (_ref6) {
-      var handle = _ref6.handle;
+  var _ref6 = files.find(function (_ref7) {
+      var handle = _ref7.handle;
       return handle === 'original';
     }) || {},
-    _ref5$type = _ref5.type,
-    originalType = _ref5$type === void 0 ? null : _ref5$type,
-    _ref5$mime = _ref5.mime,
-    originalMime = _ref5$mime === void 0 ? mediaMime : _ref5$mime;
+    _ref6$type = _ref6.type,
+    originalType = _ref6$type === void 0 ? null : _ref6$type,
+    _ref6$mime = _ref6.mime,
+    originalMime = _ref6$mime === void 0 ? mediaMime : _ref6$mime;
   var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   return {
     sources: sources !== null && sources.length > 0 ? sources : null,
@@ -264,31 +273,23 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   var finalPreload = shouldLoad ? preload : 'none';
-  var preloadRef = useRef(finalPreload);
-  var hasPlayedRef = useRef(false);
   useEffect(function () {
     var _ref$current2 = _ref6.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
-    if (element === null) {
+    if (element === null || mediaUrl === null) {
       return;
     }
     var isPaused = element.paused;
     if (paused && !isPaused) {
       element.pause();
     } else if (!paused && isPaused) {
-      if (preloadRef.current === 'none') {
-        element.load();
-        preloadRef.current = finalPreload;
-      }
-      hasPlayedRef.current = true;
       element.play()["catch"](function (e) {
         if (onPlayError !== null) {
           onPlayError(e);
         }
       });
     }
-  }, [paused, media, onPlayError]); // test media here for fun
-
+  }, [paused, media, mediaUrl, onPlayError]);
   useProgressSteps({
     currentTime: currentTime,
     duration: duration,
@@ -317,7 +318,7 @@ var Video = function Video(_ref) {
       }
     },
     src: sources === null && shouldLoad ? "".concat(mediaUrl, "#t=0.001") : null,
-    autoPlay: autoPlay && !paused && !hasPlayedRef.current && muted,
+    autoPlay: autoPlay && !paused,
     loop: loop,
     muted: muted,
     poster: shouldLoad && withPoster && finalThumbnail !== null ? finalThumbnail.url || null : null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.792",
+    "version": "0.3.796",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.789",
-        "@micromag/element-closed-captions": "^0.3.789",
+        "@micromag/core": "^0.3.796",
+        "@micromag/element-closed-captions": "^0.3.796",
         "classnames": "^2.2.6",
         "hls.js": "^1.5.15",
         "lodash": "^4.17.21",
@@ -72,5 +72,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0212271243811112db66fe3393287da15ff28384"
+    "gitHead": "d3bf71e5a23e09d0cd26f543fb1327ff7eb27983"
 }