@micromag/viewer 0.3.191 → 0.3.194

package/es/index.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import { Switch, Route, MemoryRouter } from 'react-router';
 import { Link, BrowserRouter } from 'react-router-dom';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { usePlaybackContext, useViewerWebView, useViewerInteraction, VisitorProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
+import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, VisitorProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
 import fieldsManager from '@micromag/fields/manager';
 import { IntlProvider } from '@micromag/intl';
 import { ScreensProvider } from '@micromag/screens';
@@ -1372,6 +1372,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       _ref4$menuTheme = _ref4.menuTheme,
       menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
 
+  var _useViewerSize = useViewerSize(),
+      viewerHeight = _useViewerSize.height;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       menuOpened = _useState2[0],
@@ -1473,7 +1476,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref7$velocity = _slicedToArray(_ref7.velocity, 2),
         vy = _ref7$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1482,7 +1485,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [onOpenShare]);
+  }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = useCallback(function (_ref8) {
     var active = _ref8.active,
         _ref8$direction = _slicedToArray(_ref8.direction, 2),
@@ -1492,7 +1495,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref8$velocity = _slicedToArray(_ref8.velocity, 2),
         vy = _ref8$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1501,17 +1504,20 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return 1 - progress;
-  }, [onCloseShare]);
-
-  var _useDragProgress = useDragProgress({
-    progress: shareOpened ? 1 : 0,
-    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-    springParams: {
+  }, [onCloseShare, viewerHeight]);
+  var springParams = useMemo(function () {
+    return {
       config: {
         tension: 300,
         friction: 30
       }
-    }
+    };
+  }, []);
+
+  var _useDragProgress = useDragProgress({
+    progress: shareOpened ? 1 : 0,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+    springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
       shareOpenedProgress = _useDragProgress.progress;
@@ -1558,12 +1564,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useDragProgress2 = useDragProgress({
     progress: menuOpened ? 1 : 0,
     computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-    springParams: {
-      config: {
-        tension: 300,
-        friction: 30
-      }
-    }
+    springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
       menuOpenedProgress = _useDragProgress2.progress;
@@ -2565,6 +2566,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
+      viewerWidth = _useScreenSizeFromEle.fullWidth,
+      viewerHeight = _useScreenSizeFromEle.fullHeight,
       screenSize = _useScreenSizeFromEle.screenSize,
       screenScale = _useScreenSizeFromEle.scale;
 
@@ -2841,6 +2844,8 @@ var Viewer = function Viewer(_ref) {
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,
+    width: viewerWidth,
+    height: viewerHeight,
     topHeight: menuOverScreen && currentScreenInteractionEnabled ? menuDotsContainerHeight / screenScale : 0,
     bottomHeight: playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled ? playbackControlsContainerHeight / screenScale : 0,
     bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
@@ -2892,8 +2897,7 @@ var Viewer = function Viewer(_ref) {
       overflow: !withNeighborScreens ? 'hidden' : null
     }
   }, screens.map(function (screen, i) {
-    var current = i === Math.round(screenIndexProgress); // base current on transition
-
+    var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
     var screenStyles = getScreenStylesByIndex(i, screenIndexProgress);
     return /*#__PURE__*/React.createElement("div", {

package/lib/index.js

@@ -1392,6 +1392,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       _ref4$menuTheme = _ref4.menuTheme,
       menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
 
+  var _useViewerSize = contexts.useViewerSize(),
+      viewerHeight = _useViewerSize.height;
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       menuOpened = _useState2[0],
@@ -1493,7 +1496,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref7$velocity = _slicedToArray__default["default"](_ref7.velocity, 2),
         vy = _ref7$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1502,7 +1505,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [onOpenShare]);
+  }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = React.useCallback(function (_ref8) {
     var active = _ref8.active,
         _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
@@ -1512,7 +1515,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref8$velocity = _slicedToArray__default["default"](_ref8.velocity, 2),
         vy = _ref8$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1521,17 +1524,20 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return 1 - progress;
-  }, [onCloseShare]);
-
-  var _useDragProgress = hooks.useDragProgress({
-    progress: shareOpened ? 1 : 0,
-    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-    springParams: {
+  }, [onCloseShare, viewerHeight]);
+  var springParams = React.useMemo(function () {
+    return {
       config: {
         tension: 300,
         friction: 30
       }
-    }
+    };
+  }, []);
+
+  var _useDragProgress = hooks.useDragProgress({
+    progress: shareOpened ? 1 : 0,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+    springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
       shareOpenedProgress = _useDragProgress.progress;
@@ -1578,12 +1584,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useDragProgress2 = hooks.useDragProgress({
     progress: menuOpened ? 1 : 0,
     computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-    springParams: {
-      config: {
-        tension: 300,
-        friction: 30
-      }
-    }
+    springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
       menuOpenedProgress = _useDragProgress2.progress;
@@ -2585,6 +2586,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
+      viewerWidth = _useScreenSizeFromEle.fullWidth,
+      viewerHeight = _useScreenSizeFromEle.fullHeight,
       screenSize = _useScreenSizeFromEle.screenSize,
       screenScale = _useScreenSizeFromEle.scale;
 
@@ -2861,6 +2864,8 @@ var Viewer = function Viewer(_ref) {
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,
+    width: viewerWidth,
+    height: viewerHeight,
     topHeight: menuOverScreen && currentScreenInteractionEnabled ? menuDotsContainerHeight / screenScale : 0,
     bottomHeight: playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled ? playbackControlsContainerHeight / screenScale : 0,
     bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
@@ -2912,8 +2917,7 @@ var Viewer = function Viewer(_ref) {
       overflow: !withNeighborScreens ? 'hidden' : null
     }
   }, screens.map(function (screen, i) {
-    var current = i === Math.round(screenIndexProgress); // base current on transition
-
+    var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
     var screenStyles = getScreenStylesByIndex(i, screenIndexProgress);
     return /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.191",
+    "version": "0.3.194",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,14 +59,14 @@
         "@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.190",
-        "@micromag/element-scroll": "^0.3.190",
-        "@micromag/element-share-options": "^0.3.190",
-        "@micromag/element-webview": "^0.3.190",
-        "@micromag/elements": "^0.3.190",
-        "@micromag/fields": "^0.3.190",
-        "@micromag/intl": "^0.3.190",
-        "@micromag/screens": "^0.3.191",
+        "@micromag/core": "^0.3.194",
+        "@micromag/element-scroll": "^0.3.194",
+        "@micromag/element-share-options": "^0.3.194",
+        "@micromag/element-webview": "^0.3.194",
+        "@micromag/elements": "^0.3.194",
+        "@micromag/fields": "^0.3.194",
+        "@micromag/intl": "^0.3.194",
+        "@micromag/screens": "^0.3.194",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1b0a2f385defa01c95d01bd67f8e2bfc54186778"
+    "gitHead": "b873f7d8957f26dcfbe27d1ad78f2102810e8c4d"
 }