@micromag/core 0.3.156 → 0.3.162

package/es/contexts.js

@@ -986,7 +986,11 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       return true;
     }
 
-    return typeof media.dataset.hasAudio !== 'undefined' ? media.dataset.hasAudio : null;
+    if (typeof media.dataset.hasAudio === 'undefined') {
+      return null;
+    }
+
+    return media.dataset.hasAudio === 'true' || media.dataset.hasAudio === true;
   }, [media]);
   var value = useMemo(function () {
     return {
@@ -1931,10 +1935,17 @@ var useViewerEvents = function useViewerEvents() {
 
   return events;
 };
-var useViewerInteraction = function useViewerInteraction() {
+var useViewerContainer = function useViewerContainer() {
   var _useViewerContext3 = useViewerContext(),
-      disableInteraction = _useViewerContext3.disableInteraction,
-      enableInteraction = _useViewerContext3.enableInteraction;
+      _useViewerContext3$co = _useViewerContext3.containerRef,
+      containerRef = _useViewerContext3$co === void 0 ? null : _useViewerContext3$co;
+
+  return containerRef !== null ? containerRef.current : null;
+};
+var useViewerInteraction = function useViewerInteraction() {
+  var _useViewerContext4 = useViewerContext(),
+      disableInteraction = _useViewerContext4.disableInteraction,
+      enableInteraction = _useViewerContext4.enableInteraction;
 
   return {
     disableInteraction: disableInteraction,
@@ -1942,9 +1953,9 @@ var useViewerInteraction = function useViewerInteraction() {
   };
 };
 var useViewerWebView = function useViewerWebView() {
-  var _useViewerContext4 = useViewerContext(),
-      webView = _useViewerContext4.webView,
-      setWebView = _useViewerContext4.setWebView;
+  var _useViewerContext5 = useViewerContext(),
+      webView = _useViewerContext5.webView,
+      setWebView = _useViewerContext5.setWebView;
 
   var value = useMemo(function () {
     return _objectSpread(_objectSpread({}, webView), {}, {
@@ -1967,6 +1978,10 @@ var useViewerWebView = function useViewerWebView() {
 var propTypes$1 = {
   children: PropTypes.node.isRequired,
   events: PropTypes.instanceOf(EventEmitter),
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.any
+  })]),
   menuVisible: PropTypes.bool,
   menuOverScreen: PropTypes.bool,
   topHeight: PropTypes.number,
@@ -1982,6 +1997,7 @@ var defaultProps$1 = _objectSpread({}, defaultValue);
 
 var ViewerProvider = function ViewerProvider(_ref) {
   var children = _ref.children,
+      containerRef = _ref.containerRef,
       events = _ref.events,
       menuVisible = _ref.menuVisible,
       menuOverScreen = _ref.menuOverScreen,
@@ -2000,6 +2016,7 @@ var ViewerProvider = function ViewerProvider(_ref) {
 
   var value = useMemo(function () {
     return {
+      containerRef: containerRef,
       events: events,
       menuVisible: menuVisible,
       menuOverScreen: menuOverScreen,
@@ -2013,7 +2030,7 @@ var ViewerProvider = function ViewerProvider(_ref) {
       webView: webView,
       setWebView: setWebView
     };
-  }, [events, menuVisible, menuOverScreen, topHeight, bottomHeight, bottomSidesWidth, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction, webView, setWebView]);
+  }, [containerRef, events, menuVisible, menuOverScreen, topHeight, bottomHeight, bottomSidesWidth, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction, webView, setWebView]);
   return /*#__PURE__*/React.createElement(ViewerContext.Provider, {
     value: value
   }, children);
@@ -2076,4 +2093,4 @@ var VisitorProvider = function VisitorProvider(_ref) {
 VisitorProvider.propTypes = propTypes;
 VisitorProvider.defaultProps = defaultProps;
 
-export { ComponentsContext, ComponentsProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, RoutesContext, RoutesProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, StoryContext, StoryProvider, TrackingProvider, UppyContext, UppyProvider, UserInteractionContext, UserInteractionProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, useComponent, useComponents, useComponentsManager, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useRoutes, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useStory, useStoryContext, useTracking, useUppy, useUrlGenerator, useUserInteracted, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
+export { ComponentsContext, ComponentsProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FieldsValueContext, FieldsValueContextProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PlaybackContext, PlaybackProvider, RoutesContext, RoutesProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, StoryContext, StoryProvider, TrackingProvider, UppyContext, UppyProvider, UserInteractionContext, UserInteractionProvider, ViewerContext, ViewerProvider, VisitorContext, VisitorProvider, useComponent, useComponents, useComponentsManager, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFieldsValue, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, usePlaybackContext, usePlaybackMediaRef, useRouteBack, useRoutePush, useRoutes, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useSetVisitor, useStory, useStoryContext, useTracking, useUppy, useUrlGenerator, useUserInteracted, useViewerContainer, useViewerContext, useViewerEvents, useViewerInteraction, useViewerNavigation, useViewerWebView, useVisitor, useVisitorContext, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };

package/es/hooks.js

@@ -14,6 +14,7 @@ import screenfull from 'screenfull';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import raf from 'raf';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import { match } from 'css-mediaquery';
 import { useSprings } from '@react-spring/core';
@@ -22,18 +23,26 @@ import clamp from 'lodash/clamp';
 
 function useActivityDetector() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$element = _ref.element,
+      providedElement = _ref$element === void 0 ? null : _ref$element,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$timeout = _ref.timeout,
       timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
 
-  var ref = useRef(null);
+  var ref = useRef(providedElement);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       detected = _useState2[0],
       setDetected = _useState2[1];
 
+  var detectedRef = useRef(detected);
+
+  if (providedElement !== null && providedElement !== ref.current) {
+    ref.current = providedElement;
+  }
+
   useEffect(function () {
     var _ref$current = ref.current,
         element = _ref$current === void 0 ? null : _ref$current;
@@ -44,28 +53,49 @@ function useActivityDetector() {
 
     var timeout = null;
 
-    function onMove() {
+    function onActivity() {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      setDetected(true);
+      if (!detectedRef.current) {
+        detectedRef.current = true;
+        setDetected(true);
+      }
+
       timeout = setTimeout(function () {
+        detectedRef.current = false;
         setDetected(false);
       }, timeoutDelay);
     }
 
-    element.addEventListener('mousemove', onMove);
+    element.addEventListener('keydown', onActivity);
+    element.addEventListener('mousedown', onActivity);
+    element.addEventListener('mousemove', onActivity);
+    element.addEventListener('mouseup', onActivity);
+    element.addEventListener('pointerdown', onActivity);
+    element.addEventListener('pointermove', onActivity);
+    element.addEventListener('pointerup', onActivity);
+    element.addEventListener('touchmove', onActivity);
+    element.addEventListener('touchstart', onActivity);
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      element.removeEventListener('mousemove', onMove);
+      element.removeEventListener('keydown', onActivity);
+      element.removeEventListener('mousedown', onActivity);
+      element.removeEventListener('mousemove', onActivity);
+      element.removeEventListener('mouseup', onActivity);
+      element.removeEventListener('pointerdown', onActivity);
+      element.removeEventListener('pointermove', onActivity);
+      element.removeEventListener('pointerup', onActivity);
+      element.removeEventListener('touchmove', onActivity);
+      element.removeEventListener('touchstart', onActivity);
     };
-  }, [disabled, timeoutDelay]);
+  }, [providedElement, disabled, timeoutDelay]);
   return {
     ref: ref,
     detected: detected
@@ -166,7 +196,7 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 var useDocumentEvent = createUseEvent(eventsManager$1);
 
-var _excluded$2 = ["fields", "injectInFields"],
+var _excluded$3 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
 var useForm = function useForm() {
@@ -175,7 +205,7 @@ var useForm = function useForm() {
       providedFields = _ref$fields === void 0 ? [] : _ref$fields,
       _ref$injectInFields = _ref.injectInFields,
       injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
-      opts = _objectWithoutProperties(_ref, _excluded$2);
+      opts = _objectWithoutProperties(_ref, _excluded$3);
 
   var fieldsNames = useMemo(function () {
     return providedFields.length > 0 ? providedFields.map(function (_ref2) {
@@ -282,7 +312,7 @@ var useFullscreen = function useFullscreen(element) {
   };
 };
 
-var _excluded$1 = ["entry"];
+var _excluded$2 = ["entry"];
 
 var buildThresholdArray = function buildThresholdArray() {
   return [0, 1.0];
@@ -528,7 +558,7 @@ var useResizeObserver = function useResizeObserver() {
 var useDimensionObserver = function useDimensionObserver() {
   var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
       entry = _useResizeObserver.entry,
-      rest = _objectWithoutProperties(_useResizeObserver, _excluded$1);
+      rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
 
   var _ref5 = entry || {},
       _ref5$contentRect = _ref5.contentRect,
@@ -1165,47 +1195,63 @@ function useMediaCurrentTime(element) {
       setCurrentTime = _useState2[1];
 
   var realCurrentTime = useRef(currentTime);
-  var lastIdRef = useRef(id);
-  var idChanged = lastIdRef.current !== id;
-
-  if (idChanged) {
-    realCurrentTime.current = 0;
-    lastIdRef.current = id;
+  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;
+    lastIdRef.current = finalId;
+    disabledRef.current = disabled;
   } // Check time update
 
 
   useEffect(function () {
-    if (disabled || element === null) {
+    if (element === null) {
       return function () {};
     }
 
-    var canceled = false;
+    function updateTime() {
+      var time = element.currentTime || 0;
 
-    var updateTime = function updateTime(time) {
-      if (canceled) {
-        return;
+      if (time !== realCurrentTime.current) {
+        realCurrentTime.current = time;
+        setCurrentTime(time);
+
+        if (customOnUpdate !== null) {
+          customOnUpdate(time);
+        }
       }
 
-      realCurrentTime.current = time;
-      setCurrentTime(time);
+      return time;
+    }
 
-      if (customOnUpdate !== null) {
-        customOnUpdate(time);
-      }
-    };
+    if (disabled) {
+      updateTime();
+      return function () {};
+    }
 
-    var interval = setInterval(function () {
-      var time = element.currentTime;
+    var timeout = null;
 
-      if (typeof time.then !== 'undefined') {
-        time.then(updateTime);
-      } else {
-        updateTime(time);
-      }
-    }, updateInterval);
+    function loop() {
+      var _element$duration = element.duration,
+          duration = _element$duration === void 0 ? 0 : _element$duration;
+      var time = updateTime();
+      var remainingTime = Math.floor(((duration || 0) - time) * 1000);
+      timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
+    }
+
+    loop();
     return function () {
-      canceled = true;
-      clearInterval(interval);
+      if (element !== null) {
+        realCurrentTime.current = element.currentTime;
+      }
+
+      if (timeout !== null) {
+        clearInterval(timeout);
+      }
     };
   }, [id, element, setCurrentTime, disabled, updateInterval]);
   return realCurrentTime.current;
@@ -1222,12 +1268,13 @@ function useMediaDuration(element) {
       setDuration = _useState2[1];
 
   var realDuration = useRef(duration);
-  var lastIdRef = useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
     realDuration.current = element !== null ? element.duration || 0 : 0;
-    lastIdRef.current = id;
+    lastIdRef.current = finalId;
   }
 
   useEffect(function () {
@@ -1236,14 +1283,20 @@ function useMediaDuration(element) {
     }
 
     function updateDuration() {
-      realDuration.current = element.duration || 0;
-      setDuration(element.duration || 0);
+      var newDuration = element.duration || 0;
+
+      if (newDuration !== realDuration.current) {
+        realDuration.current = newDuration;
+        setDuration(newDuration);
+      }
     }
 
     updateDuration();
+    element.addEventListener('canplay', updateDuration);
     element.addEventListener('loadedmetadata', updateDuration);
     element.addEventListener('durationchange', updateDuration);
     return function () {
+      element.removeEventListener('canplay', updateDuration);
       element.removeEventListener('loadedmetadata', updateDuration);
       element.removeEventListener('durationchange', updateDuration);
     };
@@ -1274,6 +1327,113 @@ function useMediaLoad(element) {
   }, [element, shouldLoad, preload]);
 }
 
+var _excluded$1 = ["disabled"];
+
+function useMediaProgress(media) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useState = useState(!disabled),
+      _useState2 = _slicedToArray(_useState, 2),
+      playing = _useState2[0],
+      setPlaying = _useState2[1];
+
+  var currentTime = useMediaCurrentTime(media, _objectSpread({
+    disabled: disabled || !playing
+  }, props));
+  var duration = useMediaDuration(media, _objectSpread({
+    disabled: disabled || !playing
+  }, props));
+
+  var _useState3 = useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      progress = _useState4[0],
+      setProgress = _useState4[1];
+
+  var realProgressRef = useRef(progress);
+  var updateTimeRef = useRef(new Date().getTime());
+  var updateProgress = useCallback(function (newProgress) {
+    updateTimeRef.current = new Date().getTime();
+    realProgressRef.current = newProgress;
+    setProgress(newProgress);
+  }, [setProgress]);
+  useEffect(function () {
+    if (media === null) {
+      return function () {};
+    }
+
+    function onResume() {
+      setPlaying(true);
+      updateProgress(media.currentTime / media.duration);
+    }
+
+    function onPause() {
+      setPlaying(false);
+      updateProgress(media.currentTime / media.duration);
+    }
+
+    media.addEventListener('play', onResume);
+    media.addEventListener('seeked', onResume);
+    media.addEventListener('playing', onResume);
+    media.addEventListener('pause', onPause);
+    media.addEventListener('ended', onPause);
+    media.addEventListener('waiting', onPause);
+    media.addEventListener('stalled', onPause);
+    media.addEventListener('seeking', onPause); // media.addEventListener('suspend', onPause);
+    // if (media.paused) {
+    //     onPause();
+    // } else {
+    //     onResume();
+    // }
+
+    return function () {
+      media.removeEventListener('play', onResume);
+      media.removeEventListener('seeked', onResume);
+      media.removeEventListener('playing', onResume);
+      media.removeEventListener('pause', onPause);
+      media.removeEventListener('ended', onPause);
+      media.removeEventListener('waiting', onPause);
+      media.removeEventListener('stalled', onPause);
+      media.removeEventListener('seeking', onPause); // media.removeEventListener('suspend', onPause);
+    };
+  }, [media, updateProgress]);
+  useEffect(function () {
+    if (media === null) {
+      return function () {};
+    }
+
+    if (!playing || disabled) {
+      return function () {};
+    }
+
+    var handle;
+    var canceled = false;
+
+    function tick() {
+      if (canceled) {
+        return;
+      }
+
+      var newTime = new Date().getTime();
+      var elapsed = newTime - updateTimeRef.current;
+      updateTimeRef.current = newTime;
+      var step = elapsed / (duration * 1000);
+      var newProgress = realProgressRef.current + step;
+      updateProgress(newProgress);
+      handle = raf(tick);
+    }
+
+    tick();
+    return function () {
+      canceled = true;
+      raf.cancel(handle);
+    };
+  }, [media, playing, disabled, duration, updateProgress]);
+  return realProgressRef.current;
+}
+
 function useMediaReady(element) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$id = _ref.id,
@@ -2012,4 +2172,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/lib/contexts.js

@@ -1021,7 +1021,11 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       return true;
     }
 
-    return typeof media.dataset.hasAudio !== 'undefined' ? media.dataset.hasAudio : null;
+    if (typeof media.dataset.hasAudio === 'undefined') {
+      return null;
+    }
+
+    return media.dataset.hasAudio === 'true' || media.dataset.hasAudio === true;
   }, [media]);
   var value = React.useMemo(function () {
     return {
@@ -1966,10 +1970,17 @@ var useViewerEvents = function useViewerEvents() {
 
   return events;
 };
-var useViewerInteraction = function useViewerInteraction() {
+var useViewerContainer = function useViewerContainer() {
   var _useViewerContext3 = useViewerContext(),
-      disableInteraction = _useViewerContext3.disableInteraction,
-      enableInteraction = _useViewerContext3.enableInteraction;
+      _useViewerContext3$co = _useViewerContext3.containerRef,
+      containerRef = _useViewerContext3$co === void 0 ? null : _useViewerContext3$co;
+
+  return containerRef !== null ? containerRef.current : null;
+};
+var useViewerInteraction = function useViewerInteraction() {
+  var _useViewerContext4 = useViewerContext(),
+      disableInteraction = _useViewerContext4.disableInteraction,
+      enableInteraction = _useViewerContext4.enableInteraction;
 
   return {
     disableInteraction: disableInteraction,
@@ -1977,9 +1988,9 @@ var useViewerInteraction = function useViewerInteraction() {
   };
 };
 var useViewerWebView = function useViewerWebView() {
-  var _useViewerContext4 = useViewerContext(),
-      webView = _useViewerContext4.webView,
-      setWebView = _useViewerContext4.setWebView;
+  var _useViewerContext5 = useViewerContext(),
+      webView = _useViewerContext5.webView,
+      setWebView = _useViewerContext5.setWebView;
 
   var value = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, webView), {}, {
@@ -2002,6 +2013,10 @@ var useViewerWebView = function useViewerWebView() {
 var propTypes$1 = {
   children: PropTypes__default["default"].node.isRequired,
   events: PropTypes__default["default"].instanceOf(EventEmitter__default["default"]),
+  containerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes__default["default"].any
+  })]),
   menuVisible: PropTypes__default["default"].bool,
   menuOverScreen: PropTypes__default["default"].bool,
   topHeight: PropTypes__default["default"].number,
@@ -2017,6 +2032,7 @@ var defaultProps$1 = _objectSpread__default["default"]({}, defaultValue);
 
 var ViewerProvider = function ViewerProvider(_ref) {
   var children = _ref.children,
+      containerRef = _ref.containerRef,
       events = _ref.events,
       menuVisible = _ref.menuVisible,
       menuOverScreen = _ref.menuOverScreen,
@@ -2035,6 +2051,7 @@ var ViewerProvider = function ViewerProvider(_ref) {
 
   var value = React.useMemo(function () {
     return {
+      containerRef: containerRef,
       events: events,
       menuVisible: menuVisible,
       menuOverScreen: menuOverScreen,
@@ -2048,7 +2065,7 @@ var ViewerProvider = function ViewerProvider(_ref) {
       webView: webView,
       setWebView: setWebView
     };
-  }, [events, menuVisible, menuOverScreen, topHeight, bottomHeight, bottomSidesWidth, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction, webView, setWebView]);
+  }, [containerRef, events, menuVisible, menuOverScreen, topHeight, bottomHeight, bottomSidesWidth, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction, webView, setWebView]);
   return /*#__PURE__*/React__default["default"].createElement(ViewerContext.Provider, {
     value: value
   }, children);
@@ -2213,6 +2230,7 @@ exports.useTracking = useTracking;
 exports.useUppy = useUppy;
 exports.useUrlGenerator = useUrlGenerator;
 exports.useUserInteracted = useUserInteracted;
+exports.useViewerContainer = useViewerContainer;
 exports.useViewerContext = useViewerContext;
 exports.useViewerEvents = useViewerEvents;
 exports.useViewerInteraction = useViewerInteraction;

package/lib/hooks.js

@@ -18,6 +18,7 @@ var screenfull = require('screenfull');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
+var raf = require('raf');
 var contexts = require('@micromag/core/contexts');
 var cssMediaquery = require('css-mediaquery');
 var core$1 = require('@react-spring/core');
@@ -55,22 +56,31 @@ var screenfull__default = /*#__PURE__*/_interopDefaultLegacy(screenfull);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
+var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
 var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
 
 function useActivityDetector() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$element = _ref.element,
+      providedElement = _ref$element === void 0 ? null : _ref$element,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$timeout = _ref.timeout,
       timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
 
-  var ref = react.useRef(null);
+  var ref = react.useRef(providedElement);
 
   var _useState = react.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       detected = _useState2[0],
       setDetected = _useState2[1];
 
+  var detectedRef = react.useRef(detected);
+
+  if (providedElement !== null && providedElement !== ref.current) {
+    ref.current = providedElement;
+  }
+
   react.useEffect(function () {
     var _ref$current = ref.current,
         element = _ref$current === void 0 ? null : _ref$current;
@@ -81,28 +91,49 @@ function useActivityDetector() {
 
     var timeout = null;
 
-    function onMove() {
+    function onActivity() {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      setDetected(true);
+      if (!detectedRef.current) {
+        detectedRef.current = true;
+        setDetected(true);
+      }
+
       timeout = setTimeout(function () {
+        detectedRef.current = false;
         setDetected(false);
       }, timeoutDelay);
     }
 
-    element.addEventListener('mousemove', onMove);
+    element.addEventListener('keydown', onActivity);
+    element.addEventListener('mousedown', onActivity);
+    element.addEventListener('mousemove', onActivity);
+    element.addEventListener('mouseup', onActivity);
+    element.addEventListener('pointerdown', onActivity);
+    element.addEventListener('pointermove', onActivity);
+    element.addEventListener('pointerup', onActivity);
+    element.addEventListener('touchmove', onActivity);
+    element.addEventListener('touchstart', onActivity);
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
         timeout = null;
       }
 
-      element.removeEventListener('mousemove', onMove);
+      element.removeEventListener('keydown', onActivity);
+      element.removeEventListener('mousedown', onActivity);
+      element.removeEventListener('mousemove', onActivity);
+      element.removeEventListener('mouseup', onActivity);
+      element.removeEventListener('pointerdown', onActivity);
+      element.removeEventListener('pointermove', onActivity);
+      element.removeEventListener('pointerup', onActivity);
+      element.removeEventListener('touchmove', onActivity);
+      element.removeEventListener('touchstart', onActivity);
     };
-  }, [disabled, timeoutDelay]);
+  }, [providedElement, disabled, timeoutDelay]);
   return {
     ref: ref,
     detected: detected
@@ -203,7 +234,7 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
 var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
-var _excluded$2 = ["fields", "injectInFields"],
+var _excluded$3 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
 var useForm = function useForm() {
@@ -212,7 +243,7 @@ var useForm = function useForm() {
       providedFields = _ref$fields === void 0 ? [] : _ref$fields,
       _ref$injectInFields = _ref.injectInFields,
       injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
-      opts = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+      opts = _objectWithoutProperties__default["default"](_ref, _excluded$3);
 
   var fieldsNames = react.useMemo(function () {
     return providedFields.length > 0 ? providedFields.map(function (_ref2) {
@@ -319,7 +350,7 @@ var useFullscreen = function useFullscreen(element) {
   };
 };
 
-var _excluded$1 = ["entry"];
+var _excluded$2 = ["entry"];
 
 var buildThresholdArray = function buildThresholdArray() {
   return [0, 1.0];
@@ -565,7 +596,7 @@ var useResizeObserver = function useResizeObserver() {
 var useDimensionObserver = function useDimensionObserver() {
   var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
       entry = _useResizeObserver.entry,
-      rest = _objectWithoutProperties__default["default"](_useResizeObserver, _excluded$1);
+      rest = _objectWithoutProperties__default["default"](_useResizeObserver, _excluded$2);
 
   var _ref5 = entry || {},
       _ref5$contentRect = _ref5.contentRect,
@@ -1202,47 +1233,63 @@ function useMediaCurrentTime(element) {
       setCurrentTime = _useState2[1];
 
   var realCurrentTime = react.useRef(currentTime);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
-
-  if (idChanged) {
-    realCurrentTime.current = 0;
-    lastIdRef.current = id;
+  var finalId = id || element;
+  var lastIdRef = react.useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
+  var disabledRef = react.useRef(disabled);
+  var disabledChanged = disabledRef.current !== disabled;
+
+  if (idChanged || disabledChanged) {
+    realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
+    lastIdRef.current = finalId;
+    disabledRef.current = disabled;
   } // Check time update
 
 
   react.useEffect(function () {
-    if (disabled || element === null) {
+    if (element === null) {
       return function () {};
     }
 
-    var canceled = false;
+    function updateTime() {
+      var time = element.currentTime || 0;
 
-    var updateTime = function updateTime(time) {
-      if (canceled) {
-        return;
+      if (time !== realCurrentTime.current) {
+        realCurrentTime.current = time;
+        setCurrentTime(time);
+
+        if (customOnUpdate !== null) {
+          customOnUpdate(time);
+        }
       }
 
-      realCurrentTime.current = time;
-      setCurrentTime(time);
+      return time;
+    }
 
-      if (customOnUpdate !== null) {
-        customOnUpdate(time);
-      }
-    };
+    if (disabled) {
+      updateTime();
+      return function () {};
+    }
 
-    var interval = setInterval(function () {
-      var time = element.currentTime;
+    var timeout = null;
 
-      if (typeof time.then !== 'undefined') {
-        time.then(updateTime);
-      } else {
-        updateTime(time);
-      }
-    }, updateInterval);
+    function loop() {
+      var _element$duration = element.duration,
+          duration = _element$duration === void 0 ? 0 : _element$duration;
+      var time = updateTime();
+      var remainingTime = Math.floor(((duration || 0) - time) * 1000);
+      timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
+    }
+
+    loop();
     return function () {
-      canceled = true;
-      clearInterval(interval);
+      if (element !== null) {
+        realCurrentTime.current = element.currentTime;
+      }
+
+      if (timeout !== null) {
+        clearInterval(timeout);
+      }
     };
   }, [id, element, setCurrentTime, disabled, updateInterval]);
   return realCurrentTime.current;
@@ -1259,12 +1306,13 @@ function useMediaDuration(element) {
       setDuration = _useState2[1];
 
   var realDuration = react.useRef(duration);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
+  var finalId = id || element;
+  var lastIdRef = react.useRef(finalId);
+  var idChanged = lastIdRef.current !== finalId;
 
   if (idChanged) {
     realDuration.current = element !== null ? element.duration || 0 : 0;
-    lastIdRef.current = id;
+    lastIdRef.current = finalId;
   }
 
   react.useEffect(function () {
@@ -1273,14 +1321,20 @@ function useMediaDuration(element) {
     }
 
     function updateDuration() {
-      realDuration.current = element.duration || 0;
-      setDuration(element.duration || 0);
+      var newDuration = element.duration || 0;
+
+      if (newDuration !== realDuration.current) {
+        realDuration.current = newDuration;
+        setDuration(newDuration);
+      }
     }
 
     updateDuration();
+    element.addEventListener('canplay', updateDuration);
     element.addEventListener('loadedmetadata', updateDuration);
     element.addEventListener('durationchange', updateDuration);
     return function () {
+      element.removeEventListener('canplay', updateDuration);
       element.removeEventListener('loadedmetadata', updateDuration);
       element.removeEventListener('durationchange', updateDuration);
     };
@@ -1311,6 +1365,113 @@ function useMediaLoad(element) {
   }, [element, shouldLoad, preload]);
 }
 
+var _excluded$1 = ["disabled"];
+
+function useMediaProgress(media) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+
+  var _useState = react.useState(!disabled),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      playing = _useState2[0],
+      setPlaying = _useState2[1];
+
+  var currentTime = useMediaCurrentTime(media, _objectSpread__default["default"]({
+    disabled: disabled || !playing
+  }, props));
+  var duration = useMediaDuration(media, _objectSpread__default["default"]({
+    disabled: disabled || !playing
+  }, props));
+
+  var _useState3 = react.useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      progress = _useState4[0],
+      setProgress = _useState4[1];
+
+  var realProgressRef = react.useRef(progress);
+  var updateTimeRef = react.useRef(new Date().getTime());
+  var updateProgress = react.useCallback(function (newProgress) {
+    updateTimeRef.current = new Date().getTime();
+    realProgressRef.current = newProgress;
+    setProgress(newProgress);
+  }, [setProgress]);
+  react.useEffect(function () {
+    if (media === null) {
+      return function () {};
+    }
+
+    function onResume() {
+      setPlaying(true);
+      updateProgress(media.currentTime / media.duration);
+    }
+
+    function onPause() {
+      setPlaying(false);
+      updateProgress(media.currentTime / media.duration);
+    }
+
+    media.addEventListener('play', onResume);
+    media.addEventListener('seeked', onResume);
+    media.addEventListener('playing', onResume);
+    media.addEventListener('pause', onPause);
+    media.addEventListener('ended', onPause);
+    media.addEventListener('waiting', onPause);
+    media.addEventListener('stalled', onPause);
+    media.addEventListener('seeking', onPause); // media.addEventListener('suspend', onPause);
+    // if (media.paused) {
+    //     onPause();
+    // } else {
+    //     onResume();
+    // }
+
+    return function () {
+      media.removeEventListener('play', onResume);
+      media.removeEventListener('seeked', onResume);
+      media.removeEventListener('playing', onResume);
+      media.removeEventListener('pause', onPause);
+      media.removeEventListener('ended', onPause);
+      media.removeEventListener('waiting', onPause);
+      media.removeEventListener('stalled', onPause);
+      media.removeEventListener('seeking', onPause); // media.removeEventListener('suspend', onPause);
+    };
+  }, [media, updateProgress]);
+  react.useEffect(function () {
+    if (media === null) {
+      return function () {};
+    }
+
+    if (!playing || disabled) {
+      return function () {};
+    }
+
+    var handle;
+    var canceled = false;
+
+    function tick() {
+      if (canceled) {
+        return;
+      }
+
+      var newTime = new Date().getTime();
+      var elapsed = newTime - updateTimeRef.current;
+      updateTimeRef.current = newTime;
+      var step = elapsed / (duration * 1000);
+      var newProgress = realProgressRef.current + step;
+      updateProgress(newProgress);
+      handle = raf__default["default"](tick);
+    }
+
+    tick();
+    return function () {
+      canceled = true;
+      raf__default["default"].cancel(handle);
+    };
+  }, [media, playing, disabled, duration, updateProgress]);
+  return realProgressRef.current;
+}
+
 function useMediaReady(element) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$id = _ref.id,
@@ -2067,6 +2228,7 @@ exports.useMediaApi = useMediaApi;
 exports.useMediaCurrentTime = useMediaCurrentTime;
 exports.useMediaDuration = useMediaDuration;
 exports.useMediaLoad = useMediaLoad;
+exports.useMediaProgress = useMediaProgress;
 exports.useMediaReady = useMediaReady;
 exports.useMediaThumbnail = useMediaThumbnail;
 exports.useMediaWaveform = useMediaWaveform;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.156",
+    "version": "0.3.162",
     "description": "",
     "keywords": [
         "javascript"
@@ -117,6 +117,7 @@
         "lodash": "^4.17.21",
         "param-case": "^3.0.4",
         "prop-types": "^15.7.2",
+        "raf": "^3.4.1",
         "react-helmet": "^6.1.0",
         "react-intl": "^5.12.1",
         "react-router": "^5.2.0",
@@ -132,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
+    "gitHead": "ffd4deb967b364580d292f0e02af777abac02967"
 }