@micromag/viewer 0.4.77 → 0.4.79

package/es/index.js

@@ -5234,7 +5234,7 @@ function updateMediaPlaying(currentMedia, lastMedia, playing) {
 const defaultMenuItems = ['share', 'main'];
 const defaultDeviceScreens = getDeviceScreens();
 function Viewer(t0) {
-  const $ = c(127);
+  const $ = c(128);
   const {
     story: t1,
     basePath: t2,
@@ -5623,10 +5623,14 @@ function Viewer(t0) {
   });
   const [pointerDownTime, setPointerDownTime] = useState(null);
   const [longPressPaused, setLongPressPaused] = useState(false);
-  const [longPressScreenIndex, setLongPressScreenIndex] = useState(null);
+  const [longPressScreenIndex, setLongPressScreenIndex] = useState(screenIndex);
   if (screenIndex !== longPressScreenIndex && (longPressPaused || pointerDownTime !== null)) {
     setLongPressPaused(false);
     setPointerDownTime(null);
+  } else {
+    if (longPressPaused && pointerDownTime !== null) {
+      setPointerDownTime(null);
+    }
   }
   let t87;
   let t88;
@@ -5661,17 +5665,22 @@ function Viewer(t0) {
   }
   useEffect(t87, t88);
   let t89;
-  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t89 = () => {
+  if ($[26] !== screenIndex) {
+    t89 = e => {
+      if (checkClickable(e.target)) {
+        return;
+      }
       setPointerDownTime(Date.now());
+      setLongPressScreenIndex(screenIndex);
     };
-    $[26] = t89;
+    $[26] = screenIndex;
+    $[27] = t89;
   } else {
-    t89 = $[26];
+    t89 = $[27];
   }
   const onPointerDown = t89;
   let t90;
-  if ($[27] !== interactWithScreen || $[28] !== screenIndex || $[29] !== setPlaying || $[30] !== tapMaximumDuration) {
+  if ($[28] !== interactWithScreen || $[29] !== screenIndex || $[30] !== setPlaying || $[31] !== tapMaximumDuration) {
     t90 = t91 => {
       const {
         currentTarget,
@@ -5693,6 +5702,7 @@ function Viewer(t0) {
       if (!currentPlaying && currentLongPressPaused) {
         setPlaying(true);
         setLongPressPaused(false);
+        setPointerDownTime(null);
         return;
       }
       if (tapMaximumDuration !== null && elapsedTime > tapMaximumDuration) {
@@ -5707,13 +5717,13 @@ function Viewer(t0) {
         y
       });
     };
-    $[27] = interactWithScreen;
-    $[28] = screenIndex;
-    $[29] = setPlaying;
-    $[30] = tapMaximumDuration;
-    $[31] = t90;
+    $[28] = interactWithScreen;
+    $[29] = screenIndex;
+    $[30] = setPlaying;
+    $[31] = tapMaximumDuration;
+    $[32] = t90;
   } else {
-    t90 = $[31];
+    t90 = $[32];
   }
   const onTap = t90;
   const computeScreenProgress = t91 => {
@@ -5791,38 +5801,38 @@ function Viewer(t0) {
     }
   });
   let t98;
-  if ($[32] !== dragContentBind || $[33] !== longPressPaused || $[34] !== playing) {
+  if ($[33] !== dragContentBind || $[34] !== longPressPaused || $[35] !== playing) {
     t98 = dragContentBind({
       playing,
       longPressPaused
     });
-    $[32] = dragContentBind;
-    $[33] = longPressPaused;
-    $[34] = playing;
-    $[35] = t98;
+    $[33] = dragContentBind;
+    $[34] = longPressPaused;
+    $[35] = playing;
+    $[36] = t98;
   } else {
-    t98 = $[35];
+    t98 = $[36];
   }
   const originalDragBindings = t98;
   let t99;
-  if ($[36] !== originalDragBindings) {
+  if ($[37] !== originalDragBindings) {
     t99 = {
-      onClickCapture: e => !checkClickable(e.target) ? originalDragBindings?.onClickCapture?.(e) : null,
-      onLostPointerCapture: e_0 => !checkClickable(e_0.target) ? originalDragBindings?.onLostPointerCapture?.(e_0) : null,
-      onPointerCancel: e_1 => !checkClickable(e_1.target) ? originalDragBindings?.onPointerCancel?.(e_1) : null,
-      onPointerDown: e_2 => !checkClickable(e_2.target) ? originalDragBindings?.onPointerDown?.(e_2) : null,
-      onPointerMove: e_3 => !checkClickable(e_3.target) ? originalDragBindings?.onPointerMove?.(e_3) : null,
-      onPointerUp: e_4 => !checkClickable(e_4.target) ? originalDragBindings?.onPointerUp?.(e_4) : null,
-      onScroll: e_5 => !checkClickable(e_5.target) ? originalDragBindings?.onScroll?.(e_5) : null
+      onClickCapture: e_0 => !checkClickable(e_0.target) ? originalDragBindings?.onClickCapture?.(e_0) : null,
+      onLostPointerCapture: e_1 => !checkClickable(e_1.target) ? originalDragBindings?.onLostPointerCapture?.(e_1) : null,
+      onPointerCancel: e_2 => !checkClickable(e_2.target) ? originalDragBindings?.onPointerCancel?.(e_2) : null,
+      onPointerDown: e_3 => !checkClickable(e_3.target) ? originalDragBindings?.onPointerDown?.(e_3) : null,
+      onPointerMove: e_4 => !checkClickable(e_4.target) ? originalDragBindings?.onPointerMove?.(e_4) : null,
+      onPointerUp: e_5 => !checkClickable(e_5.target) ? originalDragBindings?.onPointerUp?.(e_5) : null,
+      onScroll: e_6 => !checkClickable(e_6.target) ? originalDragBindings?.onScroll?.(e_6) : null
     };
-    $[36] = originalDragBindings;
-    $[37] = t99;
+    $[37] = originalDragBindings;
+    $[38] = t99;
   } else {
-    t99 = $[37];
+    t99 = $[38];
   }
   const dragBindings = t99;
   let t100;
-  if ($[38] !== neighborScreenOffset || $[39] !== neighborScreenScale || $[40] !== neighborScreensActive || $[41] !== screensCount || $[42] !== transitionType) {
+  if ($[39] !== neighborScreenOffset || $[40] !== neighborScreenScale || $[41] !== neighborScreensActive || $[42] !== screensCount || $[43] !== transitionType) {
     t100 = (index_1, spring) => {
       if (transitionType === "stack") {
         return {
@@ -5874,14 +5884,14 @@ function Viewer(t0) {
         zIndex: screensCount - index_1
       };
     };
-    $[38] = neighborScreenOffset;
-    $[39] = neighborScreenScale;
-    $[40] = neighborScreensActive;
-    $[41] = screensCount;
-    $[42] = transitionType;
-    $[43] = t100;
+    $[39] = neighborScreenOffset;
+    $[40] = neighborScreenScale;
+    $[41] = neighborScreensActive;
+    $[42] = screensCount;
+    $[43] = transitionType;
+    $[44] = t100;
   } else {
-    t100 = $[43];
+    t100 = $[44];
   }
   const getScreenStylesByIndex = t100;
   const {
@@ -5908,15 +5918,15 @@ function Viewer(t0) {
     });
     changeIndex(index_2);
   };
-  const onContextMenu = e_6 => {
+  const onContextMenu = e_7 => {
     if (!landscape) {
-      e_6.preventDefault();
+      e_7.preventDefault();
       return false;
     }
     return true;
   };
   let t104;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
     t104 = /*#__PURE__*/jsx("style", {
       type: "text/css",
       href: "data-viewer-overscroll",
@@ -5925,29 +5935,29 @@ function Viewer(t0) {
         __html: "body { overscroll-behavior: contain; }"
       }
     });
-    $[44] = t104;
+    $[45] = t104;
   } else {
-    t104 = $[44];
+    t104 = $[45];
   }
   const overscrollStyle = t104;
   let t105;
-  if ($[45] !== toggleFullscreen) {
+  if ($[46] !== toggleFullscreen) {
     t105 = () => toggleFullscreen();
-    $[45] = toggleFullscreen;
-    $[46] = t105;
+    $[46] = toggleFullscreen;
+    $[47] = t105;
   } else {
-    t105 = $[46];
+    t105 = $[47];
   }
   const t106 = renderContext !== "view";
   let t107;
-  if ($[47] !== t106) {
+  if ($[48] !== t106) {
     t107 = {
       disabled: t106
     };
-    $[47] = t106;
-    $[48] = t107;
+    $[48] = t106;
+    $[49] = t107;
   } else {
-    t107 = $[48];
+    t107 = $[49];
   }
   useKeyboardShortcuts({
     f: t105,
@@ -5997,7 +6007,7 @@ function Viewer(t0) {
   }
   let t115;
   let t116;
-  if ($[49] !== isView || $[50] !== shareIncentiveVisible) {
+  if ($[50] !== isView || $[51] !== shareIncentiveVisible) {
     t115 = () => {
       if (!shareIncentiveVisible || !isView) {
         return _temp6;
@@ -6010,18 +6020,18 @@ function Viewer(t0) {
       };
     };
     t116 = [shareIncentiveVisible, isView];
-    $[49] = isView;
-    $[50] = shareIncentiveVisible;
-    $[51] = t115;
-    $[52] = t116;
+    $[50] = isView;
+    $[51] = shareIncentiveVisible;
+    $[52] = t115;
+    $[53] = t116;
   } else {
-    t115 = $[51];
-    t116 = $[52];
+    t115 = $[52];
+    t116 = $[53];
   }
   useEffect(t115, t116);
   let t117;
   let t118;
-  if ($[53] !== neighborPreloadDelay || $[54] !== preloadNeighbors) {
+  if ($[54] !== neighborPreloadDelay || $[55] !== preloadNeighbors) {
     t117 = () => {
       if (preloadNeighbors) {
         return _temp7;
@@ -6034,13 +6044,13 @@ function Viewer(t0) {
       };
     };
     t118 = [preloadNeighbors, neighborPreloadDelay];
-    $[53] = neighborPreloadDelay;
-    $[54] = preloadNeighbors;
-    $[55] = t117;
-    $[56] = t118;
+    $[54] = neighborPreloadDelay;
+    $[55] = preloadNeighbors;
+    $[56] = t117;
+    $[57] = t118;
   } else {
-    t117 = $[55];
-    t118 = $[56];
+    t117 = $[56];
+    t118 = $[57];
   }
   useEffect(t117, t118);
   let topHeight = 0;
@@ -6062,15 +6072,15 @@ function Viewer(t0) {
   const NavigationHint = withNavigationHint === "hand" ? HandTap : ArrowHint;
   const t119 = !isView;
   let t120;
-  if ($[57] !== t119) {
+  if ($[58] !== t119) {
     t120 = {
       disabled: t119,
       timeout: 2000
     };
-    $[57] = t119;
-    $[58] = t120;
+    $[58] = t119;
+    $[59] = t120;
   } else {
-    t120 = $[58];
+    t120 = $[59];
   }
   const {
     ref: activityRef,
@@ -6101,14 +6111,14 @@ function Viewer(t0) {
     children: overscrollStyle
   }) : overscrollStyle;
   let t125;
-  if ($[59] !== finalFonts) {
+  if ($[60] !== finalFonts) {
     t125 = /*#__PURE__*/jsx(FontFaces, {
       fonts: finalFonts
     });
-    $[59] = finalFonts;
-    $[60] = t125;
+    $[60] = finalFonts;
+    $[61] = t125;
   } else {
-    t125 = $[60];
+    t125 = $[61];
   }
   const t126 = classNames([styles$7.container, screenSize.screens.map(_temp9), className, {
     [styles$7.landscape]: landscape,
@@ -6121,19 +6131,19 @@ function Viewer(t0) {
     [styles$7.isDragging]: isDragging
   }]);
   let t127;
-  if ($[61] !== activityRef || $[62] !== containerRef || $[63] !== fullscreenRef || $[64] !== screenSizeRef) {
+  if ($[62] !== activityRef || $[63] !== containerRef || $[64] !== fullscreenRef || $[65] !== screenSizeRef) {
     t127 = mergeRefs(containerRef, fullscreenRef, activityRef, screenSizeRef);
-    $[61] = activityRef;
-    $[62] = containerRef;
-    $[63] = fullscreenRef;
-    $[64] = screenSizeRef;
-    $[65] = t127;
+    $[62] = activityRef;
+    $[63] = containerRef;
+    $[64] = fullscreenRef;
+    $[65] = screenSizeRef;
+    $[66] = t127;
   } else {
-    t127 = $[65];
+    t127 = $[66];
   }
   const t128 = screenIndex + 1;
   let t129;
-  if ($[66] !== screens || $[67] !== t128) {
+  if ($[67] !== screens || $[68] !== t128) {
     t129 = /*#__PURE__*/jsx("div", {
       className: styles$7.ariaAnnouncement,
       id: "announce",
@@ -6147,25 +6157,25 @@ function Viewer(t0) {
         }
       })
     });
-    $[66] = screens;
-    $[67] = t128;
-    $[68] = t129;
+    $[67] = screens;
+    $[68] = t128;
+    $[69] = t129;
   } else {
-    t129 = $[68];
+    t129 = $[69];
   }
   let t130;
-  if ($[69] !== intl) {
+  if ($[70] !== intl) {
     t130 = intl.formatMessage({
       id: "gfZs4J",
       defaultMessage: "Skip Links"
     });
-    $[69] = intl;
-    $[70] = t130;
+    $[70] = intl;
+    $[71] = t130;
   } else {
-    t130 = $[70];
+    t130 = $[71];
   }
   let t131;
-  if ($[71] !== playbackControlsVisible || $[72] !== playbackHelpVisible || $[73] !== withoutPlaybackControls) {
+  if ($[72] !== playbackControlsVisible || $[73] !== playbackHelpVisible || $[74] !== withoutPlaybackControls) {
     t131 = playbackHelpVisible ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Button, {
         onClick: onClickSkipToPlaybackControls,
@@ -6191,25 +6201,25 @@ function Viewer(t0) {
         })
       }) : null]
     }) : null;
-    $[71] = playbackControlsVisible;
-    $[72] = playbackHelpVisible;
-    $[73] = withoutPlaybackControls;
-    $[74] = t131;
+    $[72] = playbackControlsVisible;
+    $[73] = playbackHelpVisible;
+    $[74] = withoutPlaybackControls;
+    $[75] = t131;
   } else {
-    t131 = $[74];
+    t131 = $[75];
   }
   let t132;
-  if ($[75] !== t130 || $[76] !== t131) {
+  if ($[76] !== t130 || $[77] !== t131) {
     t132 = /*#__PURE__*/jsx("nav", {
       "aria-label": t130,
       className: styles$7.accessibilityLinks,
       children: t131
     });
-    $[75] = t130;
-    $[76] = t131;
-    $[77] = t132;
+    $[76] = t130;
+    $[77] = t131;
+    $[78] = t132;
   } else {
-    t132 = $[77];
+    t132 = $[78];
   }
   const t133 = !withoutMenu ? /*#__PURE__*/jsx(ViewerMenu, {
     story: parsedStory,
@@ -6327,87 +6337,87 @@ function Viewer(t0) {
   }]);
   const t136 = isEditor ? 10 : menuDotsContainerHeight - 10;
   let t137;
-  if ($[78] !== t136) {
+  if ($[79] !== t136) {
     t137 = {
       top: t136
     };
-    $[78] = t136;
-    $[79] = t137;
+    $[79] = t136;
+    $[80] = t137;
   } else {
-    t137 = $[79];
+    t137 = $[80];
   }
   let t138;
-  if ($[80] !== currentShareIncentive) {
+  if ($[81] !== currentShareIncentive) {
     t138 = /*#__PURE__*/jsx(ShareIncentive, {
       className: styles$7.shareIncentive,
       ...currentShareIncentive
     });
-    $[80] = currentShareIncentive;
-    $[81] = t138;
+    $[81] = currentShareIncentive;
+    $[82] = t138;
   } else {
-    t138 = $[81];
+    t138 = $[82];
   }
   let t139;
-  if ($[82] !== t135 || $[83] !== t137 || $[84] !== t138) {
+  if ($[83] !== t135 || $[84] !== t137 || $[85] !== t138) {
     t139 = /*#__PURE__*/jsx("div", {
       className: t135,
       style: t137,
       children: t138
     });
-    $[82] = t135;
-    $[83] = t137;
-    $[84] = t138;
-    $[85] = t139;
+    $[83] = t135;
+    $[84] = t137;
+    $[85] = t138;
+    $[86] = t139;
   } else {
-    t139 = $[85];
+    t139 = $[86];
   }
   const t140 = withFullscreenWebView ? null : Math.max(screenContainerWidth, 600);
   let t141;
-  if ($[86] !== t140) {
+  if ($[87] !== t140) {
     t141 = {
       maxWidth: t140
     };
-    $[86] = t140;
-    $[87] = t141;
+    $[87] = t140;
+    $[88] = t141;
   } else {
-    t141 = $[87];
+    t141 = $[88];
   }
   let t142;
-  if ($[88] !== t141 || $[89] !== trackingEnabled) {
+  if ($[89] !== t141 || $[90] !== trackingEnabled) {
     t142 = /*#__PURE__*/jsx(WebViewContainer, {
       className: styles$7.webView,
       trackingEnabled: trackingEnabled,
       style: t141
     });
-    $[88] = t141;
-    $[89] = trackingEnabled;
-    $[90] = t142;
+    $[89] = t141;
+    $[90] = trackingEnabled;
+    $[91] = t142;
   } else {
-    t142 = $[90];
+    t142 = $[91];
   }
   let t143;
-  if ($[91] !== onContextMenu || $[92] !== t126 || $[93] !== t127 || $[94] !== t129 || $[95] !== t132 || $[96] !== t133 || $[97] !== t134 || $[98] !== t139 || $[99] !== t142) {
+  if ($[92] !== onContextMenu || $[93] !== t126 || $[94] !== t127 || $[95] !== t129 || $[96] !== t132 || $[97] !== t133 || $[98] !== t134 || $[99] !== t139 || $[100] !== t142) {
     t143 = /*#__PURE__*/jsxs("div", {
       className: t126,
       ref: t127,
       onContextMenu: onContextMenu,
       children: [t129, t132, t133, t134, t139, t142]
     });
-    $[91] = onContextMenu;
-    $[92] = t126;
-    $[93] = t127;
-    $[94] = t129;
-    $[95] = t132;
-    $[96] = t133;
-    $[97] = t134;
-    $[98] = t139;
-    $[99] = t142;
-    $[100] = t143;
+    $[92] = onContextMenu;
+    $[93] = t126;
+    $[94] = t127;
+    $[95] = t129;
+    $[96] = t132;
+    $[97] = t133;
+    $[98] = t134;
+    $[99] = t139;
+    $[100] = t142;
+    $[101] = t143;
   } else {
-    t143 = $[100];
+    t143 = $[101];
   }
   let t144;
-  if ($[101] !== T2 || $[102] !== activityDetected || $[103] !== bottomHeight || $[104] !== disableInteraction || $[105] !== enableInteraction || $[106] !== eventsManager || $[107] !== gotoNextScreen || $[108] !== gotoPreviousScreen || $[109] !== menuOverScreen || $[110] !== menuVisible || $[111] !== t123 || $[112] !== t124 || $[113] !== t125 || $[114] !== t143 || $[115] !== topHeight || $[116] !== viewerHeight || $[117] !== viewerWidth) {
+  if ($[102] !== T2 || $[103] !== activityDetected || $[104] !== bottomHeight || $[105] !== disableInteraction || $[106] !== enableInteraction || $[107] !== eventsManager || $[108] !== gotoNextScreen || $[109] !== gotoPreviousScreen || $[110] !== menuOverScreen || $[111] !== menuVisible || $[112] !== t123 || $[113] !== t124 || $[114] !== t125 || $[115] !== t143 || $[116] !== topHeight || $[117] !== viewerHeight || $[118] !== viewerWidth) {
     t144 = /*#__PURE__*/jsxs(T2, {
       events: eventsManager,
       menuVisible: menuVisible,
@@ -6424,52 +6434,52 @@ function Viewer(t0) {
       enableInteraction: enableInteraction,
       children: [t124, t125, t143]
     });
-    $[101] = T2;
-    $[102] = activityDetected;
-    $[103] = bottomHeight;
-    $[104] = disableInteraction;
-    $[105] = enableInteraction;
-    $[106] = eventsManager;
-    $[107] = gotoNextScreen;
-    $[108] = gotoPreviousScreen;
-    $[109] = menuOverScreen;
-    $[110] = menuVisible;
-    $[111] = t123;
-    $[112] = t124;
-    $[113] = t125;
-    $[114] = t143;
-    $[115] = topHeight;
-    $[116] = viewerHeight;
-    $[117] = viewerWidth;
-    $[118] = t144;
-  } else {
-    t144 = $[118];
+    $[102] = T2;
+    $[103] = activityDetected;
+    $[104] = bottomHeight;
+    $[105] = disableInteraction;
+    $[106] = enableInteraction;
+    $[107] = eventsManager;
+    $[108] = gotoNextScreen;
+    $[109] = gotoPreviousScreen;
+    $[110] = menuOverScreen;
+    $[111] = menuVisible;
+    $[112] = t123;
+    $[113] = t124;
+    $[114] = t125;
+    $[115] = t143;
+    $[116] = topHeight;
+    $[117] = viewerHeight;
+    $[118] = viewerWidth;
+    $[119] = t144;
+  } else {
+    t144 = $[119];
   }
   let t145;
-  if ($[119] !== T1 || $[120] !== screenSize || $[121] !== t144) {
+  if ($[120] !== T1 || $[121] !== screenSize || $[122] !== t144) {
     t145 = /*#__PURE__*/jsx(T1, {
       size: screenSize,
       children: t144
     });
-    $[119] = T1;
-    $[120] = screenSize;
-    $[121] = t144;
-    $[122] = t145;
+    $[120] = T1;
+    $[121] = screenSize;
+    $[122] = t144;
+    $[123] = t145;
   } else {
-    t145 = $[122];
+    t145 = $[123];
   }
   let t146;
-  if ($[123] !== T0 || $[124] !== parsedStory || $[125] !== t145) {
+  if ($[124] !== T0 || $[125] !== parsedStory || $[126] !== t145) {
     t146 = /*#__PURE__*/jsx(T0, {
       story: parsedStory,
       children: t145
     });
-    $[123] = T0;
-    $[124] = parsedStory;
-    $[125] = t145;
-    $[126] = t146;
+    $[124] = T0;
+    $[125] = parsedStory;
+    $[126] = t145;
+    $[127] = t146;
   } else {
-    t146 = $[126];
+    t146 = $[127];
   }
   return t146;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.4.77",
+    "version": "0.4.79",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,14 +64,14 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/routes": "^0.4.4",
-        "@micromag/core": "^0.4.77",
-        "@micromag/element-badge": "^0.4.77",
-        "@micromag/element-scroll": "^0.4.77",
-        "@micromag/element-share-options": "^0.4.77",
-        "@micromag/element-webview": "^0.4.77",
-        "@micromag/elements": "^0.4.77",
-        "@micromag/intl": "^0.4.77",
-        "@micromag/screens": "^0.4.77",
+        "@micromag/core": "^0.4.79",
+        "@micromag/element-badge": "^0.4.79",
+        "@micromag/element-scroll": "^0.4.79",
+        "@micromag/element-share-options": "^0.4.79",
+        "@micromag/element-webview": "^0.4.79",
+        "@micromag/elements": "^0.4.79",
+        "@micromag/intl": "^0.4.79",
+        "@micromag/screens": "^0.4.79",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -90,6 +90,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b55c2c748383d30c8ff0ca7594e499dbdc8d1c10",
+    "gitHead": "9390fd82c9dbf9c0eeaa15697e34bbc79625383c",
     "types": "es/index.d.ts"
 }