@micromag/element-video 0.3.576 → 0.3.578

package/es/index.js

@@ -9,6 +9,7 @@ import { PropTypes } from '@micromag/core';
 import { Spinner } from '@micromag/core/components';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
 import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
+import Hls from 'hls.js';
 
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner"};
 
@@ -27,6 +28,7 @@ var propTypes = {
   playsInline: PropTypes$1.bool,
   preload: PropTypes$1.oneOf(['auto', 'metadata', 'none', null]),
   disablePictureInPicture: PropTypes$1.bool,
+  disableHls: PropTypes$1.bool,
   shouldLoad: PropTypes$1.bool,
   withoutCors: PropTypes$1.bool,
   className: PropTypes$1.string,
@@ -60,6 +62,7 @@ var defaultProps = {
   playsInline: true,
   preload: 'auto',
   disablePictureInPicture: true,
+  disableHls: false,
   shouldLoad: true,
   withoutCors: false,
   className: null,
@@ -111,7 +114,8 @@ var Video = function Video(_ref) {
     focusable = _ref.focusable,
     withPoster = _ref.withPoster,
     withLoading = _ref.withLoading,
-    disablePictureInPicture = _ref.disablePictureInPicture;
+    disablePictureInPicture = _ref.disablePictureInPicture,
+    disableHls = _ref.disableHls;
   var _ref2 = media || {},
     _ref2$url = _ref2.url,
     mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
@@ -130,19 +134,19 @@ var Video = function Video(_ref) {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _ref11 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref11.current, {
+  var _ref12 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref12.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
   });
-  var duration = useMediaDuration(_ref11.current, {
+  var duration = useMediaDuration(_ref12.current, {
     id: mediaUrl
   });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref11.current, {
+  var ready = useMediaReady(_ref12.current, {
     id: mediaUrl
   });
   useEffect(function () {
@@ -157,8 +161,33 @@ var Video = function Video(_ref) {
       clearTimeout(id);
     };
   }, [mediaUrl, withLoading]);
+  var hlsIsSupported = useMemo(function () {
+    return Hls.isSupported();
+  }, [Hls]);
+  var hlsSources = useMemo(function () {
+    if (filesArray.length === 0 || disableHls) {
+      return null;
+    }
+    return filesArray.filter(function (_ref4) {
+      var _ref4$mime = _ref4.mime,
+        mime = _ref4$mime === void 0 ? null : _ref4$mime,
+        _ref4$name = _ref4.name,
+        name = _ref4$name === void 0 ? null : _ref4$name;
+      return mime === 'application/vnd.apple.mpegurl' || (name || '').endsWith('.m3u8');
+    });
+  }, [filesArray, hlsIsSupported, disableHls]);
+  useEffect(function () {
+    if (_ref12.current === null || !hlsIsSupported) {
+      return;
+    }
+    if (hlsSources !== null && hlsSources.length > 0) {
+      var hls = new Hls();
+      hls.loadSource(hlsSources[0].url);
+      hls.attachMedia(_ref12.current);
+    }
+  }, [hlsIsSupported, hlsSources, _ref12]);
   var sourceFiles = useMemo(function () {
-    if (filesArray.length === 0) {
+    if (filesArray.length === 0 || hlsSources !== null && hlsSources.length > 0) {
       return null;
     }
     var supportedMimes = getVideoSupportedMimes();
@@ -166,32 +195,37 @@ var Video = function Video(_ref) {
       return null;
     }
     var sourceFilesMap = filesArray.filter(function (file) {
+      var fileHandle = file.handle || file.id;
       var _file$mime = file.mime,
-        mime = _file$mime === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime;
+        mime = _file$mime === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime;
       return supportedMimes.indexOf(mime) !== -1;
     }).reduce(function (filesMap, file) {
+      var fileHandle = file.handle || file.id;
       var _file$mime2 = file.mime,
-        mime = _file$mime2 === void 0 ? "video/".concat(file.id === 'h264' ? 'mp4' : file.id) : _file$mime2;
+        mime = _file$mime2 === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime2;
       var currentMimeFile = filesMap[mime] || null;
-      var _ref4 = currentMimeFile || {},
-        _ref4$id = _ref4.id,
-        currentMimeId = _ref4$id === void 0 ? null : _ref4$id;
-      return currentMimeFile === null || currentMimeId !== 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
+      var _ref5 = currentMimeFile || {},
+        _ref5$id = _ref5.id,
+        currentId = _ref5$id === void 0 ? null : _ref5$id,
+        _ref5$handle = _ref5.handle,
+        currentHandle = _ref5$handle === void 0 ? null : _ref5$handle;
+      var currentMimeHandle = currentHandle || currentId;
+      return currentMimeFile === null || currentMimeHandle === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
     }, {});
     return Object.keys(sourceFilesMap).map(function (mime) {
       return sourceFilesMap[mime];
     });
-  }, [filesArray]);
+  }, [filesArray, hlsSources]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref5 = filesArray.find(function (_ref6) {
-      var handle = _ref6.handle;
+  var _ref6 = filesArray.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;
   var isImageWithoutSourceFile = originalFileIsImage && (sourceFiles === null || sourceFiles.length === 0);
   var withSize = width !== null && height !== null;
@@ -201,7 +235,7 @@ var Video = function Video(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref11.current,
+    var _ref$current = _ref12.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -246,7 +280,7 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref11.current,
+    var _ref$current2 = _ref12.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
@@ -283,14 +317,14 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: function ref(newRef) {
-      _ref11.current = newRef;
+      _ref12.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
         mediaRef.current = newRef;
       }
     },
-    src: sourceFiles === null || sourceFiles.length === 0 ? "".concat(mediaUrl, "#t=0.001") : null,
+    src: (sourceFiles === null || sourceFiles.length === 0) && (hlsSources === null || hlsSources.length === 0) ? "".concat(mediaUrl, "#t=0.001") : null,
     autoPlay: autoPlay && !paused,
     loop: loop,
     muted: muted,
@@ -312,9 +346,9 @@ var Video = function Video(_ref) {
     "data-has-audio": hasAudio,
     "data-is-suspended": isSuspended,
     "aria-hidden": true
-  }, (sourceFiles || []).map(function (_ref10) {
-    var sourceUrl = _ref10.url,
-      sourceMime = _ref10.mime;
+  }, (sourceFiles || []).map(function (_ref11) {
+    var sourceUrl = _ref11.url,
+      sourceMime = _ref11.mime;
     return /*#__PURE__*/React.createElement("source", {
       key: "".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.001") : null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.576",
+    "version": "0.3.578",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.576",
-        "@micromag/element-closed-captions": "^0.3.576",
+        "@micromag/core": "^0.3.578",
+        "@micromag/element-closed-captions": "^0.3.578",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "fa6ef8f8ed78d40e2a96e669c9cd794a50269c4b"
+    "gitHead": "924e621e3cf56f4d46abed790ef7f1f13ec29fb1"
 }