@micromag/element-video 0.3.579 → 0.3.580

package/es/index.js

@@ -2,6 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+import Hls from 'hls.js';
 import isFunction from 'lodash/isFunction';
 import PropTypes$1 from 'prop-types';
 import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
@@ -9,7 +10,6 @@ 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"};
 
@@ -134,19 +134,19 @@ var Video = function Video(_ref) {
     return getMediaFilesAsArray(files);
   }, [files]);
   var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _ref12 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref12.current, {
+  var _ref14 = useRef(null);
+  var currentTime = useMediaCurrentTime(_ref14.current, {
     id: mediaUrl,
     disabled: paused || onProgressStep === null
   });
-  var duration = useMediaDuration(_ref12.current, {
+  var duration = useMediaDuration(_ref14.current, {
     id: mediaUrl
   });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref12.current, {
+  var ready = useMediaReady(_ref14.current, {
     id: mediaUrl
   });
   useEffect(function () {
@@ -176,16 +176,54 @@ var Video = function Video(_ref) {
       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];
+  useEffect(function () {
+    if (hlsJs !== null && _ref14.current !== null) {
+      hlsJs.attachMedia(_ref14.current);
+    }
+    return function () {
+      if (hlsJs !== null) {
+        hlsJs.detachMedia();
+        hlsJs.destroy();
+      }
+    };
+  }, [hlsJs, _ref14.current]);
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setHlsTsOffset = _useState6[1];
   useEffect(function () {
-    if (_ref12.current === null || !hlsIsSupported) {
+    if (_ref14.current === null || !hlsIsSupported) {
       return;
     }
     if (hlsSources !== null && hlsSources.length > 0) {
+      setHlsTsOffset(0);
       var hls = new Hls();
+      var _onHlsBufferAppended = function onHlsBufferAppended(eventName, _ref5) {
+        var frag = _ref5.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 _ref6 = videoStream || {},
+          _ref6$startPTS = _ref6.startPTS,
+          videoStartPTS = _ref6$startPTS === void 0 ? null : _ref6$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);
-      hls.attachMedia(_ref12.current);
+      setHlsJs(hls);
     }
-  }, [hlsIsSupported, hlsSources, _ref12]);
+  }, [hlsIsSupported, hlsSources, _ref14]);
   var sourceFiles = useMemo(function () {
     if (filesArray.length === 0 || hlsSources !== null && hlsSources.length > 0) {
       return null;
@@ -204,11 +242,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 _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 _ref7 = currentMimeFile || {},
+        _ref7$id = _ref7.id,
+        currentId = _ref7$id === void 0 ? null : _ref7$id,
+        _ref7$handle = _ref7.handle,
+        currentHandle = _ref7$handle === void 0 ? null : _ref7$handle;
       var currentMimeHandle = currentHandle || currentId;
       return currentMimeFile === null || currentMimeHandle === 'original' ? _objectSpread(_objectSpread({}, filesMap), {}, _defineProperty({}, mime, file)) : filesMap;
     }, {});
@@ -218,14 +256,14 @@ var Video = function Video(_ref) {
   }, [filesArray, hlsSources]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref6 = filesArray.find(function (_ref7) {
-      var handle = _ref7.handle;
+  var _ref8 = filesArray.find(function (_ref9) {
+      var handle = _ref9.handle;
       return handle === 'original';
     }) || {},
-    _ref6$type = _ref6.type,
-    originalType = _ref6$type === void 0 ? null : _ref6$type,
-    _ref6$mime = _ref6.mime,
-    originalMime = _ref6$mime === void 0 ? mediaMime : _ref6$mime;
+    _ref8$type = _ref8.type,
+    originalType = _ref8$type === void 0 ? null : _ref8$type,
+    _ref8$mime = _ref8.mime,
+    originalMime = _ref8$mime === void 0 ? mediaMime : _ref8$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;
@@ -235,7 +273,7 @@ var Video = function Video(_ref) {
     }
   }, [duration, customOnDurationChange]);
   var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref12.current,
+    var _ref$current = _ref14.current,
       element = _ref$current === void 0 ? null : _ref$current;
     if (element === null) {
       return;
@@ -246,10 +284,10 @@ var Video = function Video(_ref) {
   }, [customOnVolumeChange]);
 
   // Manage suspend
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSuspended = _useState4[0],
-    setIsSuspended = _useState4[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSuspended = _useState8[0],
+    setIsSuspended = _useState8[1];
   var onPlay = useCallback(function (e) {
     if (isSuspended) {
       setIsSuspended(false);
@@ -280,7 +318,7 @@ var Video = function Video(_ref) {
     }
   }, [ready, onReady]);
   useEffect(function () {
-    var _ref$current2 = _ref12.current,
+    var _ref$current2 = _ref14.current,
       element = _ref$current2 === void 0 ? null : _ref$current2;
     if (element === null) {
       return;
@@ -317,7 +355,7 @@ var Video = function Video(_ref) {
   }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/React.createElement("video", {
     key: mediaUrl,
     ref: function ref(newRef) {
-      _ref12.current = newRef;
+      _ref14.current = newRef;
       if (mediaRef !== null && isFunction(mediaRef)) {
         mediaRef(newRef);
       } else if (mediaRef !== null) {
@@ -346,9 +384,9 @@ var Video = function Video(_ref) {
     "data-has-audio": hasAudio,
     "data-is-suspended": isSuspended,
     "aria-hidden": true
-  }, (sourceFiles || []).map(function (_ref11) {
-    var sourceUrl = _ref11.url,
-      sourceMime = _ref11.mime;
+  }, (sourceFiles || []).map(function (_ref13) {
+    var sourceUrl = _ref13.url,
+      sourceMime = _ref13.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.579",
+    "version": "0.3.580",
     "private": false,
     "description": "",
     "keywords": [
@@ -72,5 +72,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4c435acd50f36704c12652d8df9e5a86cfe0cf08"
+    "gitHead": "8534b331c1ddf17be6cb2bb33dc32f6ed31cf391"
 }