@micromag/viewer 0.3.161 → 0.3.162

package/es/index.js

@@ -21,7 +21,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
-import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaDuration, useMediaCurrentTime, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
+import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
@@ -1396,8 +1396,6 @@ var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"mi
 
 var propTypes$5 = {
   media: PropTypes.node,
-  currentTime: PropTypes.number,
-  duration: PropTypes.number,
   playing: PropTypes.bool,
   backgroundColor: PropTypes.string,
   progressColor: PropTypes.string,
@@ -1410,8 +1408,6 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   media: null,
-  currentTime: null,
-  duration: null,
   playing: false,
   backgroundColor: null,
   progressColor: null,
@@ -1427,8 +1423,6 @@ var SeekBar = function SeekBar(_ref) {
   var _ref3;
 
   var media = _ref.media,
-      currentTime = _ref.currentTime,
-      duration = _ref.duration,
       playing = _ref.playing,
       backgroundColor = _ref.backgroundColor,
       progressColor = _ref.progressColor,
@@ -1439,86 +1433,45 @@ var SeekBar = function SeekBar(_ref) {
       className = _ref.className,
       withSeekHead = _ref.withSeekHead;
   var intl = useIntl();
-
-  var _useSpring = useSpring(function () {
-    return {
-      x: currentTime !== null && duration !== null ? currentTime / duration : 0,
-      config: {
-        duration: 0
-      }
-    };
-  }),
-      _useSpring2 = _slicedToArray(_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
-  var lastMediaRef = useRef(media);
-  var mediaChanged = lastMediaRef.current !== media;
-  lastMediaRef.current = media;
-
-  var _useDimensionObserver = useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
-
-  useEffect(function () {
-    if (currentTime === null || duration === null) {
+  var progress = useMediaProgress(media, {
+    disabled: !playing
+  });
+  var onDrag = useCallback(function (_ref2) {
+    var _ref2$xy = _slicedToArray(_ref2.xy, 1),
+        x = _ref2$xy[0],
+        elapsedTime = _ref2.elapsedTime,
+        active = _ref2.active,
+        tap = _ref2.tap,
+        currentTarget = _ref2.currentTarget;
+
+    if (!active && elapsedTime > 300) {
       return;
     }
 
-    var progress = duration > 0 ? currentTime / duration : 0;
-    setSpringProps.start({
-      reset: true,
-      immediate: !playing || mediaChanged,
-      from: {
-        x: progress
-      },
-      to: {
-        x: playing ? 1 : progress
-      },
-      config: {
-        duration: (duration - currentTime) * 1000
-      }
-    });
-  }, [playing, duration, currentTime, mediaChanged, setSpringProps]); // User events
+    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
+        elX = _currentTarget$getBou.left,
+        elWidth = _currentTarget$getBou.width;
 
-  var seekFromX = useCallback(function (x) {
-    var elX = elRef.current.getBoundingClientRect().left;
-    var progress = Math.max(0, Math.min(1, (x - elX) / elWidth));
-    setSpringProps.start({
-      immediate: true,
-      to: {
-        x: progress
-      }
-    });
+    var newProgress = Math.max(0, Math.min(1, (x - elX) / elWidth));
 
-    if (onSeek !== null && duration !== null) {
-      onSeek(progress * duration);
+    if (onSeek !== null) {
+      onSeek(newProgress, tap);
     }
-  }, [duration, playing, onSeek]);
-  var bind = useGesture({
-    onDrag: function onDrag(_ref2) {
-      var _ref2$xy = _slicedToArray(_ref2.xy, 1),
-          x = _ref2$xy[0],
-          elapsedTime = _ref2.elapsedTime,
-          active = _ref2.active;
-
-      if (!active && elapsedTime > 300) {
-        return;
-      }
-
-      seekFromX(x);
-    },
-    onPointerDown: function onPointerDown() {
-      if (onSeekStart !== null) {
-        onSeekStart();
-      }
-    },
-    onPointerUp: function onPointerUp() {
-      if (onSeekEnd !== null) {
-        onSeekEnd();
-      }
+  }, [onSeek]);
+  var onDragStart = useCallback(function () {
+    if (onSeekStart !== null) {
+      onSeekStart();
     }
+  }, [onSeekStart]);
+  var onDragEnd = useCallback(function () {
+    if (onSeekEnd !== null) {
+      onSeekEnd();
+    }
+  }, [onSeekEnd]);
+  var bind = useGesture({
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
   }, {
     drag: {
       axis: 'x',
@@ -1534,25 +1487,19 @@ var SeekBar = function SeekBar(_ref) {
     style: {
       backgroundColor: backgroundColor
     }
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.playHead,
     style: {
-      left: springProps.x.to(function (x) {
-        return "".concat(x * 100, "%");
-      }),
+      left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
-  }), /*#__PURE__*/React.createElement(animated.div, {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$2.progress,
     style: {
-      transform: springProps.x.to(function (x) {
-        return "scaleX(".concat(x, ")");
-      }),
+      transform: "scaleX(".concat(progress, ")"),
       backgroundColor: progressColor
     }
-  })), /*#__PURE__*/React.createElement("button", Object.assign({
-    ref: elRef
-  }, bind(), {
+  })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
     type: "button",
     className: styles$2.track,
     title: intl.formatMessage({
@@ -1607,12 +1554,6 @@ function PlaybackControls(_ref) {
       controlsTheme = _usePlaybackContext.controlsTheme,
       showControls = _usePlaybackContext.showControls;
 
-  var duration = useMediaDuration(mediaElement);
-  var currentTime = useMediaCurrentTime(mediaElement, {
-    disabled: !playing,
-    updateInterval: 100
-  });
-
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       customControlsTheme = _useState2[0],
@@ -1665,20 +1606,25 @@ function PlaybackControls(_ref) {
   }, [setMuted, controlsVisible, showControls]);
   var onSeekStart = useCallback(function () {
     setWasPlaying(playing);
-    if (playing) setPlaying(false);
-  }, [playing, setWasPlaying]);
-  var onSeek = useCallback(function (time) {
+
+    if (playing) {
+      setPlaying(false);
+    }
+  }, [playing, setWasPlaying, setPlaying]);
+  var onSeek = useCallback(function (progress) {
     if (mediaElement !== null) {
-      mediaElement.currentTime = time;
+      mediaElement.currentTime = progress * mediaElement.duration;
     }
 
     if (!controlsVisible && controls) {
       showControls();
     }
-  }, [mediaElement, controlsVisible, controls, setWasPlaying, playing, setPlaying, showControls]);
+  }, [mediaElement, controlsVisible, controls, showControls]);
   var onSeekEnd = useCallback(function () {
-    if (wasPlaying) setPlaying(true);
-  }, [playing, setPlaying, wasPlaying]);
+    if (wasPlaying) {
+      setPlaying(true);
+    }
+  }, [setPlaying, wasPlaying]);
   var mediaHasAudio = mediaElement !== null && (hasAudio === null || hasAudio === true);
 
   var _ref3 = customControlsTheme || {},
@@ -1716,10 +1662,8 @@ function PlaybackControls(_ref) {
     icon: playing ? faPause : faPlay
   })), /*#__PURE__*/React.createElement(SeekBar, {
     className: styles$1.seekBar,
-    duration: duration,
-    currentTime: currentTime,
-    playing: playing,
     media: mediaElement,
+    playing: playing,
     onSeek: onSeek,
     onSeekStart: onSeekStart,
     onSeekEnd: onSeekEnd,
@@ -2316,6 +2260,7 @@ var Viewer = function Viewer(_ref) {
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ViewerProvider, {
+    containerRef: containerRef,
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,

package/lib/index.js

@@ -1416,8 +1416,6 @@ var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"mi
 
 var propTypes$5 = {
   media: PropTypes__default["default"].node,
-  currentTime: PropTypes__default["default"].number,
-  duration: PropTypes__default["default"].number,
   playing: PropTypes__default["default"].bool,
   backgroundColor: PropTypes__default["default"].string,
   progressColor: PropTypes__default["default"].string,
@@ -1430,8 +1428,6 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   media: null,
-  currentTime: null,
-  duration: null,
   playing: false,
   backgroundColor: null,
   progressColor: null,
@@ -1447,8 +1443,6 @@ var SeekBar = function SeekBar(_ref) {
   var _ref3;
 
   var media = _ref.media,
-      currentTime = _ref.currentTime,
-      duration = _ref.duration,
       playing = _ref.playing,
       backgroundColor = _ref.backgroundColor,
       progressColor = _ref.progressColor,
@@ -1459,86 +1453,45 @@ var SeekBar = function SeekBar(_ref) {
       className = _ref.className,
       withSeekHead = _ref.withSeekHead;
   var intl = reactIntl.useIntl();
-
-  var _useSpring = core.useSpring(function () {
-    return {
-      x: currentTime !== null && duration !== null ? currentTime / duration : 0,
-      config: {
-        duration: 0
-      }
-    };
-  }),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
-  var lastMediaRef = React.useRef(media);
-  var mediaChanged = lastMediaRef.current !== media;
-  lastMediaRef.current = media;
-
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-      elRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      elWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
-
-  React.useEffect(function () {
-    if (currentTime === null || duration === null) {
+  var progress = hooks.useMediaProgress(media, {
+    disabled: !playing
+  });
+  var onDrag = React.useCallback(function (_ref2) {
+    var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 1),
+        x = _ref2$xy[0],
+        elapsedTime = _ref2.elapsedTime,
+        active = _ref2.active,
+        tap = _ref2.tap,
+        currentTarget = _ref2.currentTarget;
+
+    if (!active && elapsedTime > 300) {
       return;
     }
 
-    var progress = duration > 0 ? currentTime / duration : 0;
-    setSpringProps.start({
-      reset: true,
-      immediate: !playing || mediaChanged,
-      from: {
-        x: progress
-      },
-      to: {
-        x: playing ? 1 : progress
-      },
-      config: {
-        duration: (duration - currentTime) * 1000
-      }
-    });
-  }, [playing, duration, currentTime, mediaChanged, setSpringProps]); // User events
+    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
+        elX = _currentTarget$getBou.left,
+        elWidth = _currentTarget$getBou.width;
 
-  var seekFromX = React.useCallback(function (x) {
-    var elX = elRef.current.getBoundingClientRect().left;
-    var progress = Math.max(0, Math.min(1, (x - elX) / elWidth));
-    setSpringProps.start({
-      immediate: true,
-      to: {
-        x: progress
-      }
-    });
+    var newProgress = Math.max(0, Math.min(1, (x - elX) / elWidth));
 
-    if (onSeek !== null && duration !== null) {
-      onSeek(progress * duration);
+    if (onSeek !== null) {
+      onSeek(newProgress, tap);
     }
-  }, [duration, playing, onSeek]);
-  var bind = react.useGesture({
-    onDrag: function onDrag(_ref2) {
-      var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 1),
-          x = _ref2$xy[0],
-          elapsedTime = _ref2.elapsedTime,
-          active = _ref2.active;
-
-      if (!active && elapsedTime > 300) {
-        return;
-      }
-
-      seekFromX(x);
-    },
-    onPointerDown: function onPointerDown() {
-      if (onSeekStart !== null) {
-        onSeekStart();
-      }
-    },
-    onPointerUp: function onPointerUp() {
-      if (onSeekEnd !== null) {
-        onSeekEnd();
-      }
+  }, [onSeek]);
+  var onDragStart = React.useCallback(function () {
+    if (onSeekStart !== null) {
+      onSeekStart();
     }
+  }, [onSeekStart]);
+  var onDragEnd = React.useCallback(function () {
+    if (onSeekEnd !== null) {
+      onSeekEnd();
+    }
+  }, [onSeekEnd]);
+  var bind = react.useGesture({
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
   }, {
     drag: {
       axis: 'x',
@@ -1554,25 +1507,19 @@ var SeekBar = function SeekBar(_ref) {
     style: {
       backgroundColor: backgroundColor
     }
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$2.playHead,
     style: {
-      left: springProps.x.to(function (x) {
-        return "".concat(x * 100, "%");
-      }),
+      left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
-  }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$2.progress,
     style: {
-      transform: springProps.x.to(function (x) {
-        return "scaleX(".concat(x, ")");
-      }),
+      transform: "scaleX(".concat(progress, ")"),
       backgroundColor: progressColor
     }
-  })), /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
-    ref: elRef
-  }, bind(), {
+  })), /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, bind(), {
     type: "button",
     className: styles$2.track,
     title: intl.formatMessage({
@@ -1627,12 +1574,6 @@ function PlaybackControls(_ref) {
       controlsTheme = _usePlaybackContext.controlsTheme,
       showControls = _usePlaybackContext.showControls;
 
-  var duration = hooks.useMediaDuration(mediaElement);
-  var currentTime = hooks.useMediaCurrentTime(mediaElement, {
-    disabled: !playing,
-    updateInterval: 100
-  });
-
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       customControlsTheme = _useState2[0],
@@ -1685,20 +1626,25 @@ function PlaybackControls(_ref) {
   }, [setMuted, controlsVisible, showControls]);
   var onSeekStart = React.useCallback(function () {
     setWasPlaying(playing);
-    if (playing) setPlaying(false);
-  }, [playing, setWasPlaying]);
-  var onSeek = React.useCallback(function (time) {
+
+    if (playing) {
+      setPlaying(false);
+    }
+  }, [playing, setWasPlaying, setPlaying]);
+  var onSeek = React.useCallback(function (progress) {
     if (mediaElement !== null) {
-      mediaElement.currentTime = time;
+      mediaElement.currentTime = progress * mediaElement.duration;
     }
 
     if (!controlsVisible && controls) {
       showControls();
     }
-  }, [mediaElement, controlsVisible, controls, setWasPlaying, playing, setPlaying, showControls]);
+  }, [mediaElement, controlsVisible, controls, showControls]);
   var onSeekEnd = React.useCallback(function () {
-    if (wasPlaying) setPlaying(true);
-  }, [playing, setPlaying, wasPlaying]);
+    if (wasPlaying) {
+      setPlaying(true);
+    }
+  }, [setPlaying, wasPlaying]);
   var mediaHasAudio = mediaElement !== null && (hasAudio === null || hasAudio === true);
 
   var _ref3 = customControlsTheme || {},
@@ -1736,10 +1682,8 @@ function PlaybackControls(_ref) {
     icon: playing ? faPause.faPause : faPlay.faPlay
   })), /*#__PURE__*/React__default["default"].createElement(SeekBar, {
     className: styles$1.seekBar,
-    duration: duration,
-    currentTime: currentTime,
-    playing: playing,
     media: mediaElement,
+    playing: playing,
     onSeek: onSeek,
     onSeekStart: onSeekStart,
     onSeekEnd: onSeekEnd,
@@ -2336,6 +2280,7 @@ var Viewer = function Viewer(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
+    containerRef: containerRef,
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.161",
+    "version": "0.3.162",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,13 +59,13 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.161",
-        "@micromag/element-scroll": "^0.3.161",
-        "@micromag/element-share-options": "^0.3.161",
-        "@micromag/elements": "^0.3.161",
-        "@micromag/fields": "^0.3.161",
-        "@micromag/intl": "^0.3.161",
-        "@micromag/screens": "^0.3.161",
+        "@micromag/core": "^0.3.162",
+        "@micromag/element-scroll": "^0.3.162",
+        "@micromag/element-share-options": "^0.3.162",
+        "@micromag/elements": "^0.3.162",
+        "@micromag/fields": "^0.3.162",
+        "@micromag/intl": "^0.3.162",
+        "@micromag/screens": "^0.3.162",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "badf4dd6125aa3169f3d01afc712be5b8181d898"
+    "gitHead": "ffd4deb967b364580d292f0e02af777abac02967"
 }