@micromag/core 0.3.578 → 0.3.585

package/es/contexts.js

@@ -828,7 +828,8 @@ var defaultValue$1 = {
   controlsSuggestPlay: false,
   controlsVisible: false,
   media: null,
-  controlsTheme: defaultControlsThemeValue
+  controlsTheme: defaultControlsThemeValue,
+  currentQualityLevel: null
 };
 var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
   setMuted: function setMuted() {},
@@ -838,7 +839,8 @@ var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpre
   setControlsTheme: function setControlsTheme() {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {}
+  setMedia: function setMedia() {},
+  setCurrentQualityLevel: function setCurrentQualityLevel() {}
 }));
 var usePlaybackContext = function usePlaybackContext() {
   return useContext(PlaybackContext);
@@ -872,7 +874,8 @@ var propTypes$5 = {
   }),
   muted: PropTypes.bool,
   playing: PropTypes.bool,
-  paused: PropTypes.bool
+  paused: PropTypes.bool,
+  currentQualityLevel: PropTypes.number
 };
 var defaultProps$5 = _objectSpread({}, defaultValue$1);
 var PlaybackProvider = function PlaybackProvider(_ref) {
@@ -883,6 +886,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     initialControlsSuggestPlay = _ref.controlsSuggestPlay,
     initialControlsVisible = _ref.controlsVisible,
     initialControlsTheme = _ref.controlsTheme,
+    initialCurrentQualityLevel = _ref.currentQualityLevel,
     children = _ref.children;
   var _useState = useState(initialMuted),
     _useState2 = _slicedToArray(_useState, 2),
@@ -912,6 +916,10 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     controlsTheme = _useState14[0],
     setControlsTheme = _useState14[1];
+  var _useState15 = useState(initialCurrentQualityLevel),
+    _useState16 = _slicedToArray(_useState15, 2),
+    currentQualityLevel = _useState16[0],
+    setCurrentQualityLevel = _useState16[1];
   var finalSetControls = useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
@@ -955,6 +963,12 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     }
     return media.dataset.hasAudio === 'true' || media.dataset.hasAudio === true;
   }, [media]);
+  var finalSetCurrentQualityLevel = useCallback(function (level) {
+    var fromRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    if (fromRef === null || media === null || fromRef === media) {
+      setCurrentQualityLevel(level);
+    }
+  }, [setCurrentQualityLevel]);
   var value = useMemo(function () {
     return {
       muted: muted,
@@ -965,6 +979,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       media: media,
       hasAudio: hasAudio,
       controlsTheme: controlsTheme,
+      currentQualityLevel: currentQualityLevel,
       setMuted: setMuted,
       setPlaying: finalSetPlaying,
       setControls: finalSetControls,
@@ -973,9 +988,10 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setControlsTheme: finalSetControlsTheme,
       showControls: showControls,
       hideControls: hideControls,
-      setMedia: setMedia
+      setMedia: setMedia,
+      setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/es/hooks.js

@@ -1414,6 +1414,42 @@ var useMediaState = function useMediaState() {
   };
 };
 
+function useMediaTimestampOffset(element) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$attributeName = _ref.attributeName,
+    attributeName = _ref$attributeName === void 0 ? 'data-ts-offset' : _ref$attributeName;
+  var getTimestampOffset = function getTimestampOffset() {
+    return element !== null && element.hasAttribute(attributeName) ? parseFloat(element.getAttribute(attributeName)) : 0;
+  };
+  var _useState = useState(getTimestampOffset()),
+    _useState2 = _slicedToArray(_useState, 2),
+    timestampOffset = _useState2[0],
+    setTimestampOffset = _useState2[1];
+  var observerRef = useRef(null);
+  useEffect(function () {
+    if (element !== null) {
+      observerRef.current = new MutationObserver(function (mutations) {
+        mutations.forEach(function (_ref2) {
+          var mutationType = _ref2.type;
+          if (mutationType === 'attributes') {
+            setTimestampOffset(getTimestampOffset());
+          }
+        });
+      });
+      observerRef.current.observe(element, {
+        attributes: true,
+        attributeFilter: [attributeName]
+      });
+    }
+    return function () {
+      if (observerRef.current !== null) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [element]);
+  return timestampOffset;
+}
+
 function useMediaCurrentTime(element) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$id = _ref.id,
@@ -1429,13 +1465,14 @@ function useMediaCurrentTime(element) {
     currentTime = _useState2[0],
     setCurrentTime = _useState2[1];
   var realCurrentTime = useRef(currentTime);
+  var tsOffset = useMediaTimestampOffset(element);
   var finalId = id || element;
   var lastIdRef = useRef(finalId);
   var idChanged = lastIdRef.current !== finalId;
   var disabledRef = useRef(disabled);
   var disabledChanged = disabledRef.current !== disabled;
   if (idChanged || disabledChanged) {
-    realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
+    realCurrentTime.current = element !== null ? Math.max((element.currentTime || 0) - tsOffset, 0) : 0;
     lastIdRef.current = finalId;
     disabledRef.current = disabled;
   }
@@ -1446,7 +1483,7 @@ function useMediaCurrentTime(element) {
       return function () {};
     }
     function updateTime() {
-      var time = element.currentTime || 0;
+      var time = Math.max((element.currentTime || 0) - tsOffset, 0);
       if (time !== realCurrentTime.current) {
         realCurrentTime.current = time;
         setCurrentTime(time);
@@ -1471,7 +1508,7 @@ function useMediaCurrentTime(element) {
     loop();
     return function () {
       if (element !== null) {
-        realCurrentTime.current = element.currentTime;
+        realCurrentTime.current = element.currentTime - tsOffset;
       }
       if (timeout !== null) {
         clearInterval(timeout);
@@ -1489,12 +1526,13 @@ function useMediaDuration(element) {
     _useState2 = _slicedToArray(_useState, 2),
     duration = _useState2[0],
     setDuration = _useState2[1];
+  var tsOffset = useMediaTimestampOffset(element);
   var realDuration = useRef(duration);
   var finalId = id || element;
   var lastIdRef = useRef(finalId);
   var idChanged = lastIdRef.current !== finalId;
   if (idChanged) {
-    realDuration.current = element !== null ? element.duration || 0 : 0;
+    realDuration.current = element !== null ? Math.max((element.duration || 0) - tsOffset, 0) : 0;
     lastIdRef.current = finalId;
   }
   useEffect(function () {
@@ -1504,7 +1542,7 @@ function useMediaDuration(element) {
       return function () {};
     }
     function updateDuration() {
-      var newDuration = element.duration || 0;
+      var newDuration = Math.max((element.duration || 0) - tsOffset, 0);
       if (newDuration !== realDuration.current) {
         realDuration.current = newDuration;
         setDuration(newDuration);
@@ -2341,4 +2379,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.578",
+    "version": "0.3.585",
     "private": false,
     "description": "",
     "keywords": [
@@ -144,5 +144,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "924e621e3cf56f4d46abed790ef7f1f13ec29fb1"
+    "gitHead": "f8c2902ea472fcb2d1cdd3fe5d6054afd0cc766b"
 }