@micromag/element-video 0.3.582 → 0.3.585

package/es/index.js

@@ -85,7 +85,7 @@ var defaultProps = {
   focusable: true,
   withPoster: false,
   withLoading: false,
-  qualityStartLevel: -1
+  qualityStartLevel: null
 };
 var Video = function Video(_ref) {
   var media = _ref.media,
@@ -140,19 +140,19 @@ var Video = function Video(_ref) {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _ref15 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref15.current, {
+  var _ref16 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref16.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
   });
-  var duration = useMediaDuration(_ref15.current, {
+  var duration = useMediaDuration(_ref16.current, {
     id: mediaUrl
   });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref15.current, {
+  var ready = useMediaReady(_ref16.current, {
     id: mediaUrl
   });
   useEffect(function () {
@@ -167,11 +167,12 @@ var Video = function Video(_ref) {
       clearTimeout(id);
     };
   }, [mediaUrl, withLoading]);
-  var hlsIsSupported = useMemo(function () {
-    return Hls.isSupported();
-  }, [Hls]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hlsFailed = _useState4[0],
+    setHlsFailed = _useState4[1];
   var hlsSources = useMemo(function () {
-    if (filesArray.length === 0 || disableHls) {
+    if (filesArray.length === 0 || disableHls || !Hls.isSupported() || hlsFailed) {
       return null;
     }
     return filesArray.filter(function (_ref4) {
@@ -181,45 +182,62 @@ var Video = function Video(_ref) {
         name = _ref4$name === void 0 ? null : _ref4$name;
       return mime === 'application/vnd.apple.mpegurl' || (name || '').endsWith('.m3u8');
     });
-  }, [filesArray, hlsIsSupported, disableHls]);
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hlsJs = _useState4[0],
-    setHlsJs = _useState4[1];
-  var _useState5 = useState(0),
+  }, [filesArray, disableHls, hlsFailed]);
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    hlsTsOffset = _useState6[0],
-    setHlsTsOffset = _useState6[1];
+    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 () {
-    if (_ref15.current === null || !hlsIsSupported) {
-      return;
-    }
     setHlsTsOffset(0);
-    if (shouldLoad && hlsSources !== null && hlsSources.length > 0) {
+    setHlsFailed(false);
+    if (shouldLoad && _ref16.current !== null && hlsSources !== null && hlsSources.length > 0) {
       var hls = new Hls({
-        startLevel: qualityStartLevel
+        maxBufferLength: 15,
+        // seconds. prevents loading too much per screen.
+        startLevel: qualityStartLevel !== null ? qualityStartLevel : -1
       });
       hls.on(Hls.Events.LEVEL_SWITCHED, function (_, _ref5) {
         var level = _ref5.level;
         if (onQualityLevelChange !== null) {
-          onQualityLevelChange(level);
+          onQualityLevelChange(level, _ref16.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(_, _ref6) {
-        var frag = _ref6.frag;
+      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 _ref7 = videoStream || {},
-          _ref7$startPTS = _ref7.startPTS,
-          videoStartPTS = _ref7$startPTS === void 0 ? null : _ref7$startPTS;
+        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);
@@ -229,13 +247,15 @@ var Video = function Video(_ref) {
       hls.on(Hls.Events.BUFFER_APPENDED, _onHlsBufferAppended);
       hls.loadSource(hlsSources[0].url);
       setHlsJs(hls);
+    } else {
+      setHlsJs(null);
     }
-  }, [shouldLoad, hlsIsSupported, hlsSources, _ref15]);
+  }, [shouldLoad, hlsSources, _ref16]);
 
   // attach hls.js when the <video> ref is ready
   useEffect(function () {
-    if (hlsJs !== null && _ref15.current !== null) {
-      hlsJs.attachMedia(_ref15.current);
+    if (hlsJs !== null && _ref16.current !== null) {
+      hlsJs.attachMedia(_ref16.current);
     }
     return function () {
       if (hlsJs !== null) {
@@ -243,12 +263,16 @@ var Video = function Video(_ref) {
         hlsJs.destroy();
       }
     };
-  }, [hlsJs, _ref15.current]);
+  }, [hlsJs, _ref16.current]);
 
   // handle changes of qualityStartLevel when an hls.js instance exists
   useEffect(function () {
     if (hlsJs !== null) {
-      hlsJs.startLevel = qualityStartLevel;
+      var qualityLevel = qualityStartLevel !== null ? qualityStartLevel : -1;
+      hlsJs.startLevel = qualityLevel;
+      if (_ref16.current !== null && _ref16.current.paused) {
+        hlsJs.currentLevel = qualityLevel;
+      }
     }
   }, [qualityStartLevel]);
   var sourceFiles = useMemo(function () {
@@ -269,11 +293,11 @@ var Video = function Video(_ref) {
       var _file$mime2 = file.mime,
         mime = _file$mime2 === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime2;
       var currentMimeFile = filesMap[mime] || null;
-      var _ref8 = currentMimeFile || {},
-        _ref8$id = _ref8.id,
-        currentId = _ref8$id === void 0 ? null : _ref8$id,
-        _ref8$handle = _ref8.handle,
-        currentHandle = _ref8$handle === void 0 ? null : _ref8$handle;
+      var _ref9 = currentMimeFile || {},
+        _ref9$id = _ref9.id,
+        currentId = _ref9$id === void 0 ? null : _ref9$id,
+        _ref9$handle = _ref9.handle,
+        currentHandle = _ref9$handle === void 0 ? null : _ref9$handle;
       var currentMimeHandle = currentHandle || currentId;
       return currentMimeFile === null || currentMimeHandle === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
     }, {});
@@ -283,14 +307,14 @@ var Video = function Video(_ref) {
   }, [filesArray, hlsSources]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref9 = filesArray.find(function (_ref10) {
-      var handle = _ref10.handle;
+  var _ref10 = filesArray.find(function (_ref11) {
+      var handle = _ref11.handle;
       return handle === 'original';
     }) || {},
-    _ref9$type = _ref9.type,
-    originalType = _ref9$type === void 0 ? null : _ref9$type,
-    _ref9$mime = _ref9.mime,
-    originalMime = _ref9$mime === void 0 ? mediaMime : _ref9$mime;
+    _ref10$type = _ref10.type,
+    originalType = _ref10$type === void 0 ? null : _ref10$type,
+    _ref10$mime = _ref10.mime,
+    originalMime = _ref10$mime === void 0 ? mediaMime : _ref10$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;
@@ -300,7 +324,7 @@ var Video = function Video(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref15.current,
+    var _ref$current = _ref16.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -311,10 +335,10 @@ var Video = function Video(_ref) {
   }, [customOnVolumeChange]);
 
   // Manage suspend
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isSuspended = _useState8[0],
-    setIsSuspended = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isSuspended = _useState10[0],
+    setIsSuspended = _useState10[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
@@ -345,7 +369,7 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref15.current,
+    var _ref$current2 = _ref16.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
@@ -382,7 +406,7 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: function ref(newRef) {
-      _ref15.current = newRef;
+      _ref16.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -413,9 +437,9 @@ var Video = function Video(_ref) {
     "data-hls": hlsJs !== null,
     "data-ts-offset": hlsTsOffset,
     "aria-hidden": true
-  }, (sourceFiles || []).map(function (_ref14) {
-    var sourceUrl = _ref14.url,
-      sourceMime = _ref14.mime;
+  }, (sourceFiles || []).map(function (_ref15) {
+    var sourceUrl = _ref15.url,
+      sourceMime = _ref15.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.582",
+    "version": "0.3.585",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,8 +59,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.578",
-        "@micromag/element-closed-captions": "^0.3.578",
+        "@micromag/core": "^0.3.585",
+        "@micromag/element-closed-captions": "^0.3.585",
         "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": "95704cba6bce8f9329171fbcb06acba2543decc0"
+    "gitHead": "f8c2902ea472fcb2d1cdd3fe5d6054afd0cc766b"
 }