@micromag/viewer 0.3.762 → 0.3.763

package/es/index.js

@@ -2738,6 +2738,8 @@ var propTypes$2 = {
   renderContext: PropTypes$1.renderContext,
   onScreenChange: PropTypes.func,
   tapNextScreenWidthPercent: PropTypes.number,
+  tapMaximumDuration: PropTypes.number,
+  longPressPauseDelay: PropTypes.number,
   storyIsParsed: PropTypes.bool,
   neighborScreensActive: PropTypes.number,
   neighborScreenOffset: PropTypes.number,
@@ -2795,6 +2797,8 @@ var defaultProps$2 = {
   renderContext: 'view',
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
+  tapMaximumDuration: 1500,
+  longPressPauseDelay: 300,
   storyIsParsed: false,
   neighborScreensActive: 1,
   neighborScreenOffset: 105,
@@ -2847,6 +2851,8 @@ var Viewer = function Viewer(_ref) {
     deviceScreens = _ref.deviceScreens,
     renderContext = _ref.renderContext,
     tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
+    tapMaximumDuration = _ref.tapMaximumDuration,
+    longPressPauseDelay = _ref.longPressPauseDelay,
     storyIsParsed = _ref.storyIsParsed,
     neighborScreensActive = _ref.neighborScreensActive,
     neighborScreenOffset = _ref.neighborScreenOffset,
@@ -2973,6 +2979,7 @@ var Viewer = function Viewer(_ref) {
   var withoutScreensTransforms = isStatic || isCapture;
   var _usePlaybackContext = usePlaybackContext(),
     playing = _usePlaybackContext.playing,
+    setPlaying = _usePlaybackContext.setPlaying,
     _usePlaybackContext$c = _usePlaybackContext.controls,
     playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
     _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
@@ -3111,13 +3118,59 @@ var Viewer = function Viewer(_ref) {
     currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
     enableInteraction = _useScreenInteraction.enableInteraction,
     disableInteraction = _useScreenInteraction.disableInteraction;
+
+  // Long press to pause playback
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pointerDownTime = _useState6[0],
+    setPointerDownTime = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    longPressPaused = _useState8[0],
+    setLongPressPaused = _useState8[1];
+  useEffect(function () {
+    setLongPressPaused(false);
+    setPointerDownTime(null);
+  }, [screenIndex]);
+  useEffect(function () {
+    if (pointerDownTime === null || !playing) {
+      return function () {};
+    }
+    var interval = setTimeout(function () {
+      setPlaying(false);
+      setLongPressPaused(true);
+    }, longPressPauseDelay);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [playing, pointerDownTime, longPressPauseDelay]);
+  var onPointerDown = useCallback(function () {
+    setPointerDownTime(Date.now());
+  }, []);
   var onTap = useCallback(function (_ref1) {
     var currentTarget = _ref1.currentTarget,
       event = _ref1.event,
       target = _ref1.target,
       _ref1$xy = _slicedToArray(_ref1.xy, 2),
       x = _ref1$xy[0],
-      y = _ref1$xy[1];
+      y = _ref1$xy[1],
+      elapsedTime = _ref1.elapsedTime,
+      _ref1$args = _slicedToArray(_ref1.args, 1),
+      bindState = _ref1$args[0];
+    setPointerDownTime(null);
+    var _ref10 = bindState || {},
+      _ref10$playing = _ref10.playing,
+      currentPlaying = _ref10$playing === void 0 ? false : _ref10$playing,
+      _ref10$longPressPause = _ref10.longPressPaused,
+      currentLongPressPaused = _ref10$longPressPause === void 0 ? false : _ref10$longPressPause;
+    if (!currentPlaying && currentLongPressPaused) {
+      setPlaying(true);
+      setLongPressPaused(false);
+      return;
+    }
+    if (tapMaximumDuration !== null && elapsedTime > tapMaximumDuration) {
+      return;
+    }
     // if (event) {
     //     event.stopPropagation();
     // }
@@ -3129,13 +3182,13 @@ var Viewer = function Viewer(_ref) {
       x: x,
       y: y
     });
-  }, [interactWithScreen, screenIndex]);
-  var computeScreenProgress = useCallback(function (_ref10) {
-    var active = _ref10.active,
-      _ref10$movement = _slicedToArray(_ref10.movement, 1),
-      mx = _ref10$movement[0],
-      _ref10$velocity = _slicedToArray(_ref10.velocity, 1),
-      vx = _ref10$velocity[0];
+  }, [interactWithScreen, screenIndex, tapMaximumDuration]);
+  var computeScreenProgress = useCallback(function (_ref11) {
+    var active = _ref11.active,
+      _ref11$movement = _slicedToArray(_ref11.movement, 1),
+      mx = _ref11$movement[0],
+      _ref11$velocity = _slicedToArray(_ref11.velocity, 1),
+      vx = _ref11$velocity[0];
     var p = mx / screenContainerWidth; // drag "ratio": how much of the screen width has been swiped?
     var forwards = mx < 0; // true if swiping to left (to navigate forwards)
     var newIndex = !forwards ? screenIndex - 1 : screenIndex + 1; // which item index are we moving towards?
@@ -3148,8 +3201,19 @@ var Viewer = function Viewer(_ref) {
     }
     return screenIndex - progress;
   }, [screenContainerWidth, screenIndex]);
-  var onScreenProgress = useCallback(function (progress, _ref11) {
-    var active = _ref11.active;
+  var onScreenProgress = useCallback(function (progress, _ref12) {
+    var active = _ref12.active,
+      _ref12$args = _slicedToArray(_ref12.args, 1),
+      bindState = _ref12$args[0];
+    var _ref13 = bindState || {},
+      _ref13$playing = _ref13.playing,
+      currentPlaying = _ref13$playing === void 0 ? false : _ref13$playing,
+      _ref13$longPressPause = _ref13.longPressPaused,
+      currentLongPressPaused = _ref13$longPressPause === void 0 ? false : _ref13$longPressPause;
+    if (!active && !currentPlaying && currentLongPressPaused) {
+      setPlaying(true);
+      setLongPressPaused(false);
+    }
     var delta = Math.abs(progress - screenIndex);
     var reachedBounds = progress < 0 || progress >= screensCount; // have we reached the end of the stack?
     if (!active && delta === 1 && !reachedBounds) {
@@ -3159,10 +3223,10 @@ var Viewer = function Viewer(_ref) {
       });
     }
   }, [onScreenNavigate, screenIndex]);
-  var _useState5 = useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    transitioned = _useState6[0],
-    setTransitioned = _useState6[1];
+  var _useState9 = useState(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    transitioned = _useState0[0],
+    setTransitioned = _useState0[1];
   var onTransitionStart = useCallback(function () {
     setTransitioned(false);
   }, [setTransitioned]);
@@ -3191,6 +3255,7 @@ var Viewer = function Viewer(_ref) {
       dragDisabled: withoutGestures || !currentScreenInteractionEnabled,
       computeProgress: computeScreenProgress,
       onProgress: onScreenProgress,
+      onPointerDown: onPointerDown,
       onTap: onTap,
       springParams: springParams,
       dragOptions: {
@@ -3260,11 +3325,11 @@ var Viewer = function Viewer(_ref) {
     menuDotsContainerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var onClickScreen = useCallback(function (_ref12) {
-    var itemScreenId = _ref12.screenId;
+  var onClickScreen = useCallback(function (_ref14) {
+    var itemScreenId = _ref14.screenId;
     onInteractionPrivate();
-    var index = screens.findIndex(function (_ref13) {
-      var id = _ref13.id;
+    var index = screens.findIndex(function (_ref15) {
+      var id = _ref15.id;
       return id === itemScreenId;
     });
     changeIndex(index);
@@ -3327,34 +3392,34 @@ var Viewer = function Viewer(_ref) {
       }
     }
   }, []);
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    currentShareIncentive = _useState8[0],
-    setCurrentShareIncentive = _useState8[1];
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    shareIncentiveVisible = _useState0[0],
-    setShareIncentiveVisible = _useState0[1];
-  var _ref14 = currentScreen || {},
-    _ref14$header = _ref14.header,
-    header = _ref14$header === void 0 ? null : _ref14$header;
-  var _ref15 = header || {},
-    _ref15$shareIncentive = _ref15.shareIncentive,
-    shareIncentive = _ref15$shareIncentive === void 0 ? null : _ref15$shareIncentive;
-  var _ref16 = shareIncentive || {},
-    _ref16$active = _ref16.active,
-    hasShareIncentive = _ref16$active === void 0 ? false : _ref16$active,
-    _ref16$label = _ref16.label,
-    shareIncentiveLabel = _ref16$label === void 0 ? null : _ref16$label;
-  var _ref17 = currentShareIncentive || {},
-    _ref17$label = _ref17.label,
-    currentShareIncentiveLabel = _ref17$label === void 0 ? null : _ref17$label;
-  var _ref18 = shareIncentiveLabel || {},
-    _ref18$body = _ref18.body,
-    incentiveLabel = _ref18$body === void 0 ? null : _ref18$body;
-  var _ref19 = currentShareIncentiveLabel || {},
-    _ref19$body = _ref19.body,
-    currentIncentiveLabel = _ref19$body === void 0 ? null : _ref19$body;
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    currentShareIncentive = _useState10[0],
+    setCurrentShareIncentive = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    shareIncentiveVisible = _useState12[0],
+    setShareIncentiveVisible = _useState12[1];
+  var _ref16 = currentScreen || {},
+    _ref16$header = _ref16.header,
+    header = _ref16$header === void 0 ? null : _ref16$header;
+  var _ref17 = header || {},
+    _ref17$shareIncentive = _ref17.shareIncentive,
+    shareIncentive = _ref17$shareIncentive === void 0 ? null : _ref17$shareIncentive;
+  var _ref18 = shareIncentive || {},
+    _ref18$active = _ref18.active,
+    hasShareIncentive = _ref18$active === void 0 ? false : _ref18$active,
+    _ref18$label = _ref18.label,
+    shareIncentiveLabel = _ref18$label === void 0 ? null : _ref18$label;
+  var _ref19 = currentShareIncentive || {},
+    _ref19$label = _ref19.label,
+    currentShareIncentiveLabel = _ref19$label === void 0 ? null : _ref19$label;
+  var _ref20 = shareIncentiveLabel || {},
+    _ref20$body = _ref20.body,
+    incentiveLabel = _ref20$body === void 0 ? null : _ref20$body;
+  var _ref21 = currentShareIncentiveLabel || {},
+    _ref21$body = _ref21.body,
+    currentIncentiveLabel = _ref21$body === void 0 ? null : _ref21$body;
   useEffect(function () {
     setShareIncentiveVisible(true);
     if (hasShareIncentive && shareIncentiveLabel !== currentShareIncentiveLabel) {
@@ -3512,7 +3577,10 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$7.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  }, dragContentBind({
+    playing: playing,
+    longPressPaused: longPressPaused
+  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "previous",
     className: classNames([styles$7.navButton, styles$7.previous]),
     onClick: gotoPreviousScreen,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.762",
+    "version": "0.3.763",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,14 +64,14 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.36",
-        "@micromag/core": "^0.3.757",
-        "@micromag/element-badge": "^0.3.757",
-        "@micromag/element-scroll": "^0.3.762",
-        "@micromag/element-share-options": "^0.3.757",
-        "@micromag/element-webview": "^0.3.757",
-        "@micromag/elements": "^0.3.762",
-        "@micromag/intl": "^0.3.757",
-        "@micromag/screens": "^0.3.762",
+        "@micromag/core": "^0.3.763",
+        "@micromag/element-badge": "^0.3.763",
+        "@micromag/element-scroll": "^0.3.763",
+        "@micromag/element-share-options": "^0.3.763",
+        "@micromag/element-webview": "^0.3.763",
+        "@micromag/elements": "^0.3.763",
+        "@micromag/intl": "^0.3.763",
+        "@micromag/screens": "^0.3.763",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "cb061071018260522046a4c3112f39058c1289ea"
+    "gitHead": "843084e78ba9bf2de883b2c958bd38853cdc20e6"
 }