@micromag/element-video 0.3.682 → 0.3.700

package/es/index.js

@@ -1,7 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
-import Hls from 'hls.js';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
 import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
@@ -10,6 +9,65 @@ import { Spinner } from '@micromag/core/components';
 import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
 import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 
+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 files = useMemo(function () {
+    return getMediaFilesAsArray(mediaFiles);
+  }, [mediaFiles]);
+  var sources = useMemo(function () {
+    if (files.length === 0) {
+      return null;
+    }
+    var supportedMimes = getVideoSupportedMimes();
+    if (supportedMimes.length === 0) {
+      supportedMimes = ['video/mp4', 'video/webm'];
+    }
+    var supportedFiles = files.filter(function (file) {
+      var fileHandle = file.handle || file.id;
+      var _file$mime = file.mime,
+        mime = _file$mime === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime;
+      return supportedMimes.indexOf(mime) !== -1;
+    });
+    var supportedFilesWithoutOriginal = supportedFiles.filter(function (file) {
+      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;
+      var _ref4$size = _ref4.size,
+        b = _ref4$size === void 0 ? Infinity : _ref4$size;
+      if (a === b) {
+        return 0;
+      }
+      return a > b ? 1 : -1;
+    });
+  }, [files]);
+
+  // @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;
+      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;
+  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
+  return {
+    sources: sources !== null && sources.length > 0 ? sources : null,
+    files: files,
+    isImage: originalFileIsImage
+  };
+}
+
 var styles = {"container":"micromag-element-video-container","withSize":"micromag-element-video-withSize","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner"};
 
 var propTypes = {
@@ -27,7 +85,6 @@ var propTypes = {
   playsInline: PropTypes.bool,
   preload: PropTypes.oneOf(['auto', 'metadata', 'none', null]),
   disablePictureInPicture: PropTypes.bool,
-  disableHls: PropTypes.bool,
   shouldLoad: PropTypes.bool,
   withoutCors: PropTypes.bool,
   className: PropTypes.string,
@@ -44,11 +101,9 @@ var propTypes = {
   onSuspend: PropTypes.func,
   onSuspended: PropTypes.func,
   onPlayError: PropTypes.func,
-  onQualityLevelChange: PropTypes.func,
   focusable: PropTypes.bool,
   withPoster: PropTypes.bool,
-  withLoading: PropTypes.bool,
-  qualityStartLevel: PropTypes.number
+  withLoading: PropTypes.bool
 };
 var defaultProps = {
   media: null,
@@ -63,7 +118,6 @@ var defaultProps = {
   playsInline: true,
   preload: 'auto',
   disablePictureInPicture: true,
-  disableHls: true,
   shouldLoad: true,
   withoutCors: false,
   className: null,
@@ -80,11 +134,9 @@ var defaultProps = {
   onSuspend: null,
   onSuspended: null,
   onPlayError: null,
-  onQualityLevelChange: null,
   focusable: true,
   withPoster: false,
-  withLoading: false,
-  qualityStartLevel: null
+  withLoading: false
 };
 var Video = function Video(_ref) {
   var media = _ref.media,
@@ -114,44 +166,38 @@ var Video = function Video(_ref) {
     customOnSuspend = _ref.onSuspend,
     onSuspended = _ref.onSuspended,
     onPlayError = _ref.onPlayError,
-    onQualityLevelChange = _ref.onQualityLevelChange,
     focusable = _ref.focusable,
     withPoster = _ref.withPoster,
     withLoading = _ref.withLoading,
-    disablePictureInPicture = _ref.disablePictureInPicture,
-    disableHls = _ref.disableHls,
-    qualityStartLevel = _ref.qualityStartLevel;
+    disablePictureInPicture = _ref.disablePictureInPicture;
   var _ref2 = media || {},
     _ref2$url = _ref2.url,
     mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$files = _ref2.files,
-    files = _ref2$files === void 0 ? null : _ref2$files,
     _ref2$metadata = _ref2.metadata,
     metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
   var _ref3 = metadata || {},
     _ref3$description = _ref3.description,
     description = _ref3$description === void 0 ? null : _ref3$description,
-    _ref3$mime = _ref3.mime,
-    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime,
     _ref3$has_audio = _ref3.has_audio,
     hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-  var filesArray = useMemo(function () {
-    return getMediaFilesAsArray(files);
-  }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _ref17 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref17.current, {
+  var _useSources = useSources(media),
+    sources = _useSources.sources,
+    isImage = _useSources.isImage;
+  var isImageWithoutSourceFile = isImage && (sources === null || sources.length === 0);
+  var _ref6 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref6.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
   });
-  var duration = useMediaDuration(_ref17.current, {
+  var duration = useMediaDuration(_ref6.current, {
     id: mediaUrl
   });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref17.current, {
+  var ready = useMediaReady(_ref6.current, {
     id: mediaUrl
   });
   useEffect(function () {
@@ -166,176 +212,6 @@ var Video = function Video(_ref) {
       clearTimeout(id);
     };
   }, [mediaUrl, withLoading]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hlsFailed = _useState4[0],
-    setHlsFailed = _useState4[1];
-  var hlsSources = useMemo(function () {
-    if (filesArray.length === 0 || disableHls || !Hls.isSupported() || hlsFailed) {
-      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, disableHls, hlsFailed]);
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hlsJs = _useState6[0],
-    setHlsJs = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    hlsTsOffset = _useState8[0],
-    setHlsTsOffset = _useState8[1];
-
-  // initialize hls instance if an hls source is provided
-  useEffect(function () {
-    setHlsTsOffset(0);
-    setHlsFailed(false);
-    if (!shouldLoad || hlsSources === null || hlsSources.length === 0) {
-      setHlsJs(null);
-      return;
-    }
-    var hls = new Hls({
-      maxBufferLength: 15,
-      // seconds. prevents loading too much per screen.
-      startLevel: qualityStartLevel !== null ? qualityStartLevel : -1,
-      enableWorker: true
-      // debug: true,
-      // lowLatencyMode: true,
-      // backBufferLength: 90,
-      // testBandwidth: qualityStartLevel === null,
-      // startFragPrefetch: true,
-    });
-    hls.on(Hls.Events.LEVEL_SWITCHED, function (_, _ref5) {
-      var level = _ref5.level;
-      if (onQualityLevelChange !== null) {
-        onQualityLevelChange(level, _ref17.current);
-      }
-    });
-    hls.on(Hls.Events.ERROR, function (_, _ref6) {
-      var isFatal = _ref6.fatal,
-        errorType = _ref6.type;
-      if (isFatal) {
-        switch (errorType) {
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            // automatically try to recover from media errors
-            hls.recoverMediaError();
-            break;
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            // happens when all retries and media options have been exhausted. in that case, fallback to mp4/webm playback
-            setHlsJs(null);
-            setHlsFailed(true);
-            break;
-        }
-      }
-    });
-
-    // compute hls timestamp offset when we get the first video fragment
-    var _onHlsBufferAppended = function onHlsBufferAppended(_, _ref7) {
-      var frag = _ref7.frag;
-      var fragStart = frag.start,
-        fragType = frag.type,
-        _frag$sn = frag.sn,
-        fragSn = _frag$sn === void 0 ? null : _frag$sn,
-        _frag$elementaryStrea = frag.elementaryStreams.video,
-        videoStream = _frag$elementaryStrea === void 0 ? null : _frag$elementaryStrea;
-      var _ref8 = videoStream || {},
-        _ref8$startPTS = _ref8.startPTS,
-        videoStartPTS = _ref8$startPTS === void 0 ? null : _ref8$startPTS;
-      if (fragType === 'main' && fragSn !== 'initSegment' && videoStartPTS !== null) {
-        var tOffset = videoStartPTS - fragStart;
-        hls.off(Hls.Events.BUFFER_APPENDED, _onHlsBufferAppended);
-        setHlsTsOffset(tOffset);
-      }
-    };
-    hls.on(Hls.Events.BUFFER_APPENDED, _onHlsBufferAppended);
-    hls.loadSource(hlsSources[0].url);
-    setHlsJs(hls);
-  }, [shouldLoad, hlsSources]);
-
-  // attach hls.js when the <video> ref or the hls.js instance is ready
-  useEffect(function () {
-    if (hlsJs !== null && _ref17.current !== null) {
-      hlsJs.attachMedia(_ref17.current);
-      // if (onQualityLevelChange !== null) {
-      //     onQualityLevelChange(hlsJs.currentLevel, ref.current);
-      // }
-    }
-    return function () {
-      if (hlsJs !== null) {
-        hlsJs.detachMedia();
-      }
-    };
-  }, [hlsJs, _ref17.current]);
-
-  // cleanup hls.js instance when it is no longer needed
-  useEffect(function () {
-    return (
-      // teardown func
-      function () {
-        if (hlsJs !== null) {
-          hlsJs.destroy();
-        }
-      }
-    );
-  }, [hlsJs]);
-
-  // handle changes of qualityStartLevel when an hls.js instance exists
-  useEffect(function () {
-    if (hlsJs !== null) {
-      var qualityLevel = qualityStartLevel !== null ? qualityStartLevel : -1;
-      hlsJs.startLevel = qualityLevel;
-      if (_ref17.current !== null && _ref17.current.paused) {
-        hlsJs.currentLevel = qualityLevel;
-        hlsJs.nextLevel = -1; // force auto quality selection for the next fragment
-      }
-    }
-  }, [qualityStartLevel]);
-  var sourceFiles = useMemo(function () {
-    if (filesArray.length === 0 || hlsSources !== null && hlsSources.length > 0) {
-      return null;
-    }
-    var supportedMimes = getVideoSupportedMimes();
-    if (supportedMimes.length === 0) {
-      supportedMimes = ['video/mp4', 'video/webm'];
-    }
-    var supportedFiles = filesArray.filter(function (file) {
-      var fileHandle = file.handle || file.id;
-      var _file$mime = file.mime,
-        mime = _file$mime === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime;
-      return supportedMimes.indexOf(mime) !== -1;
-    });
-    var supportedFilesWithoutOriginal = supportedFiles.filter(function (file) {
-      var fileHandle = file.handle || file.id;
-      return fileHandle !== 'original';
-    });
-    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(function (_ref9, _ref10) {
-      var _ref9$size = _ref9.size,
-        a = _ref9$size === void 0 ? '' : _ref9$size;
-      var _ref10$size = _ref10.size,
-        b = _ref10$size === void 0 ? '' : _ref10$size;
-      if (a === b) {
-        return 0;
-      }
-      return a > b ? 1 : -1;
-    });
-  }, [filesArray, hlsSources]);
-
-  // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref11 = filesArray.find(function (_ref12) {
-      var handle = _ref12.handle;
-      return handle === 'original';
-    }) || {},
-    _ref11$type = _ref11.type,
-    originalType = _ref11$type === void 0 ? null : _ref11$type,
-    _ref11$mime = _ref11.mime,
-    originalMime = _ref11$mime === void 0 ? mediaMime : _ref11$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;
   useEffect(function () {
     if (duration > 0 && customOnDurationChange !== null) {
@@ -343,7 +219,7 @@ var Video = function Video(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref17.current,
+    var _ref$current = _ref6.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -354,10 +230,10 @@ var Video = function Video(_ref) {
   }, [customOnVolumeChange]);
 
   // Manage suspend
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isSuspended = _useState10[0],
-    setIsSuspended = _useState10[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSuspended = _useState4[0],
+    setIsSuspended = _useState4[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
@@ -388,7 +264,7 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref17.current,
+    var _ref$current2 = _ref6.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
@@ -412,7 +288,7 @@ var Video = function Video(_ref) {
     onStep: onProgressStep
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.withSize, withSize)]),
+    className: classNames([styles.container, _defineProperty({}, styles.withSize, withSize), className]),
     style: withSize ? {
       width: width,
       height: height
@@ -421,18 +297,18 @@ var Video = function Video(_ref) {
     src: mediaUrl,
     alt: description,
     tabIndex: "-1",
-    className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)])
+    className: classNames([styles.media, innerClassName])
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: function ref(newRef) {
-      _ref17.current = newRef;
+      _ref6.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
         mediaRef.current = newRef;
       }
     },
-    src: (sourceFiles === null || sourceFiles.length === 0) && (hlsSources === null || hlsSources.length === 0) && shouldLoad ? "".concat(mediaUrl, "#t=0.001") : null,
+    src: sources === null && shouldLoad ? "".concat(mediaUrl, "#t=0.001") : null,
     autoPlay: autoPlay && !paused,
     loop: loop,
     muted: muted,
@@ -442,7 +318,7 @@ var Video = function Video(_ref) {
     crossOrigin: withoutCors ? 'anonymous' : null,
     disablePictureInPicture: disablePictureInPicture,
     tabIndex: focusable ? '0' : '-1',
-    className: classNames([styles.media, _defineProperty({}, innerClassName, innerClassName !== null)]),
+    className: classNames([styles.media, innerClassName]),
     onPlay: onPlay,
     onPlaying: onPlaying,
     onPause: onPause,
@@ -453,14 +329,12 @@ var Video = function Video(_ref) {
     onSuspend: onSuspend,
     "data-has-audio": hasAudio,
     "data-is-suspended": isSuspended,
-    "data-hls": hlsJs !== null,
-    "data-ts-offset": hlsTsOffset,
     "aria-hidden": true
-  }, (shouldLoad ? sourceFiles || [] : []).map(function (_ref16) {
-    var sourceUrl = _ref16.url,
-      sourceMime = _ref16.mime;
+  }, (shouldLoad && sources !== null ? sources : []).map(function (_ref5) {
+    var sourceUrl = _ref5.url,
+      sourceMime = _ref5.mime;
     return /*#__PURE__*/React.createElement("source", {
-      key: "".concat(sourceUrl, "-").concat(sourceMime),
+      key: "source-".concat(sourceUrl, "-").concat(sourceMime),
       src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.001") : null,
       type: sourceMime
     });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.3.682",
+    "version": "0.3.700",
     "private": false,
     "description": "",
     "keywords": [
@@ -72,5 +72,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ff77a57d44913b0e5afa373445ae9f014799e183"
+    "gitHead": "b335d7d45cc5a556a4b4bb9c68e52809501cc6e1"
 }