@micromag/viewer 0.3.588 → 0.3.590

package/es/index.js

@@ -1803,6 +1803,7 @@ var propTypes$8 = {
   screenState: PropTypes.string,
   current: PropTypes.bool,
   active: PropTypes.bool,
+  preload: PropTypes.bool,
   mediaRef: PropTypes.func,
   width: PropTypes.number,
   index: PropTypes.number,
@@ -1817,6 +1818,7 @@ var defaultProps$8 = {
   screenState: null,
   current: false,
   active: true,
+  preload: true,
   index: null,
   mediaRef: null,
   width: null,
@@ -1831,6 +1833,7 @@ function ViewerScreen(_ref) {
     index = _ref.index,
     screenState = _ref.screenState,
     active = _ref.active,
+    preload = _ref.preload,
     current = _ref.current,
     mediaRef = _ref.mediaRef,
     width = _ref.width,
@@ -1871,6 +1874,7 @@ function ViewerScreen(_ref) {
     screenState: screenState,
     index: index,
     active: active,
+    preload: preload,
     current: current,
     mediaRef: mediaRef
   }) : null));
@@ -2547,6 +2551,9 @@ var propTypes$2 = {
   neighborScreensActive: PropTypes.number,
   neighborScreenOffset: PropTypes.number,
   neighborScreenScale: PropTypes.number,
+  neighborPreloadDelay: PropTypes.number,
+  neighborPreloadBackward: PropTypes.number,
+  neighborPreloadScreens: PropTypes.number,
   topSafezoneHeight: PropTypes.number,
   bottomSafezoneHeight: PropTypes.number,
   menuDotsButtons: PropTypes.node,
@@ -2599,6 +2606,9 @@ var defaultProps$2 = {
   neighborScreensActive: 1,
   neighborScreenOffset: 105,
   neighborScreenScale: 0.8,
+  neighborPreloadDelay: 2000,
+  neighborPreloadBackward: false,
+  neighborPreloadScreens: null,
   topSafezoneHeight: null,
   bottomSafezoneHeight: null,
   menuIsScreenWidth: false,
@@ -2646,6 +2656,9 @@ var Viewer = function Viewer(_ref) {
     neighborScreensActive = _ref.neighborScreensActive,
     neighborScreenOffset = _ref.neighborScreenOffset,
     neighborScreenScale = _ref.neighborScreenScale,
+    neighborPreloadDelay = _ref.neighborPreloadDelay,
+    neighborPreloadBackward = _ref.neighborPreloadBackward,
+    neighborPreloadScreens = _ref.neighborPreloadScreens,
     topSafezoneHeight = _ref.topSafezoneHeight,
     bottomSafezoneHeight = _ref.bottomSafezoneHeight,
     menuIsScreenWidth = _ref.menuIsScreenWidth,
@@ -2820,6 +2833,10 @@ var Viewer = function Viewer(_ref) {
       containerRef.current.style.setProperty('--micromag-focus-color', finalFocusColor);
     }
   }, [finalFocusColor]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    preloadNeighbors = _useState2[0],
+    setPreloadNeighbors = _useState2[1];
 
   /**
    * Screen Transitions
@@ -2833,6 +2850,7 @@ var Viewer = function Viewer(_ref) {
     if (index === screenIndex) {
       return;
     }
+    setPreloadNeighbors(false);
     if (currentScreenMedia !== null) {
       currentScreenMedia.current = screensMediasRef.current[index] || null;
     }
@@ -2867,10 +2885,10 @@ var Viewer = function Viewer(_ref) {
   var gotoNextScreen = useCallback(function () {
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
   }, [changeIndex, screenIndex]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasInteracted = _useState2[0],
-    setHasInteracted = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasInteracted = _useState4[0],
+    setHasInteracted = _useState4[1];
   var onInteractionPrivate = useCallback(function () {
     if (onInteraction !== null) {
       onInteraction();
@@ -2940,10 +2958,10 @@ var Viewer = function Viewer(_ref) {
       });
     }
   }, [onScreenNavigate, screenIndex]);
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transitioned = _useState4[0],
-    setTransitioned = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    transitioned = _useState6[0],
+    setTransitioned = _useState6[1];
   var onTransitionStart = useCallback(function () {
     setTransitioned(false);
   }, [setTransitioned]);
@@ -2977,7 +2995,8 @@ var Viewer = function Viewer(_ref) {
     }),
     isDragging = _useDragProgress.dragging,
     progressSpring = _useDragProgress.progress,
-    dragContentBind = _useDragProgress.bind;
+    dragContentBind = _useDragProgress.bind,
+    transitionDirection = _useDragProgress.direction;
   var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
     if (transitionType === 'stack') {
       return {
@@ -3093,14 +3112,14 @@ var Viewer = function Viewer(_ref) {
       }
     }
   }, []);
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentShareIncentive = _useState6[0],
-    setCurrentShareIncentive = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    shareIncentiveVisible = _useState8[0],
-    setShareIncentiveVisible = _useState8[1];
+    currentShareIncentive = _useState8[0],
+    setCurrentShareIncentive = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    shareIncentiveVisible = _useState10[0],
+    setShareIncentiveVisible = _useState10[1];
   var _ref16 = currentScreen || {},
     _ref16$header = _ref16.header,
     header = _ref16$header === void 0 ? null : _ref16$header;
@@ -3135,19 +3154,17 @@ var Viewer = function Viewer(_ref) {
       clearTimeout(timeout);
     };
   }, [shareIncentiveLabel, setShareIncentiveVisible, hasShareIncentive, incentiveLabel, currentIncentiveLabel, setCurrentShareIncentive, isView]);
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    preloadNeighbors = _useState10[0],
-    setPreloadNeighbors = _useState10[1];
   useEffect(function () {
-    setPreloadNeighbors(false);
+    if (preloadNeighbors) {
+      return function () {};
+    }
     var timeout = setTimeout(function () {
       setPreloadNeighbors(true);
-    }, 1000);
+    }, neighborPreloadDelay);
     return function () {
       clearTimeout(timeout);
     };
-  }, [screenIndex]);
+  }, [preloadNeighbors]);
   var topHeight = 0;
   if (topSafezoneHeight !== null) {
     topHeight = topSafezoneHeight / screenScale;
@@ -3291,7 +3308,15 @@ var Viewer = function Viewer(_ref) {
     }
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
-    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive && preloadNeighbors;
+    var isBefore = i < screenIndex;
+    var isAfter = i > screenIndex;
+    var isNext = transitionDirection !== 0 && i === screenIndex + transitionDirection;
+    var activeRange = neighborScreensActive;
+    var isInActiveRange = Math.abs(i - screenIndex) <= activeRange;
+    var preloadRange = neighborPreloadScreens !== null ? neighborPreloadScreens : neighborScreensActive;
+    var isInPreloadRange = Math.abs(i - screenIndex) <= preloadRange;
+    var active = current || isInActiveRange || isNext;
+    var preload = current || preloadNeighbors && (isAfter && isInPreloadRange || neighborPreloadBackward && isBefore && isInPreloadRange) || isNext;
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
@@ -3308,6 +3333,7 @@ var Viewer = function Viewer(_ref) {
       current: current,
       active: active || current,
       ready: current && transitioned,
+      preload: preload || current,
       mediaRef: function mediaRef(ref) {
         screensMediasRef.current[i] = ref;
       },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.588",
+    "version": "0.3.590",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,14 +64,14 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.27",
-        "@micromag/core": "^0.3.588",
-        "@micromag/element-badge": "^0.3.588",
-        "@micromag/element-scroll": "^0.3.588",
-        "@micromag/element-share-options": "^0.3.588",
-        "@micromag/element-webview": "^0.3.588",
-        "@micromag/elements": "^0.3.588",
-        "@micromag/intl": "^0.3.588",
-        "@micromag/screens": "^0.3.588",
+        "@micromag/core": "^0.3.590",
+        "@micromag/element-badge": "^0.3.590",
+        "@micromag/element-scroll": "^0.3.590",
+        "@micromag/element-share-options": "^0.3.590",
+        "@micromag/element-webview": "^0.3.590",
+        "@micromag/elements": "^0.3.590",
+        "@micromag/intl": "^0.3.590",
+        "@micromag/screens": "^0.3.590",
         "@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": "c2ec51edbaf9bb6c78bbaf7996b2ad0fd1651993"
+    "gitHead": "aee5033c29da327111287f71fd59cb77f469306a"
 }