@micromag/viewer 0.2.380 → 0.2.381

package/es/index.js

@@ -777,7 +777,8 @@ var propTypes$2 = {
   onInteraction: PropTypes.func,
   onEnd: PropTypes.func,
   onViewModeChange: PropTypes.func,
-  currentMedia: PropTypes$1.ref,
+  currentScreenMedia: PropTypes$1.ref,
+  screensMedias: PropTypes$1.ref,
   className: PropTypes.string
 };
 var defaultProps$2 = {
@@ -802,7 +803,8 @@ var defaultProps$2 = {
   onInteraction: null,
   onEnd: null,
   onViewModeChange: null,
-  currentMedia: null,
+  currentScreenMedia: null,
+  screensMedias: null,
   className: null
 };
 
@@ -830,7 +832,8 @@ var Viewer = function Viewer(_ref) {
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
-      currentMedia = _ref.currentMedia,
+      currentScreenMedia = _ref.currentScreenMedia,
+      screensMedias = _ref.screensMedias,
       className = _ref.className;
   var intl = useIntl();
   var parsedStory = useParsedStory(story, {
@@ -926,7 +929,7 @@ var Viewer = function Viewer(_ref) {
       _ref7$height = _ref7.height,
       menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
 
-  var screensMediaRef = useRef([]); // Screen index
+  var screensMediasRef = useRef([]); // Screen index
 
   var screenIndex = useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
@@ -934,8 +937,12 @@ var Viewer = function Viewer(_ref) {
     }));
   }, [screenId, screens]);
 
-  if (currentMedia !== null) {
-    currentMedia.current = screensMediaRef.current[screenIndex];
+  if (currentScreenMedia !== null) {
+    currentScreenMedia.current = screensMediasRef.current[screenIndex];
+  }
+
+  if (screensMedias !== null) {
+    screensMedias.current = screensMediasRef.current;
   }
 
   var changeIndex = useCallback(function (index) {
@@ -943,8 +950,8 @@ var Viewer = function Viewer(_ref) {
       return;
     }
 
-    if (currentMedia !== null) {
-      currentMedia.current = screensMediaRef.current[index];
+    if (currentScreenMedia !== null) {
+      currentScreenMedia.current = screensMediasRef.current[index];
     }
 
     if (onScreenChange !== null) {
@@ -1365,12 +1372,14 @@ var Viewer = function Viewer(_ref) {
       onEnableInteraction: onEnableInteraction,
       onDisableInteraction: onDisableInteraction,
       getMediaRef: function getMediaRef(mediaRef) {
-        screensMediaRef.current[i] = mediaRef;
+        screensMediasRef.current[i] = mediaRef;
       }
     });
     var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
     var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
-    return /*#__PURE__*/React.createElement(React.Fragment, null, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "sr-only",
       onClick: onScreenPrevious,
@@ -1383,7 +1392,6 @@ var Viewer = function Viewer(_ref) {
       }]
     }), "Go to previous screen") : null, /*#__PURE__*/React.createElement("div", {
       ref: current ? currentScreenRef : null,
-      key: key,
       style: {
         width: landscape ? screenWidth : null,
         height: landscape ? screenHeight : null,

package/lib/index.js

@@ -794,7 +794,8 @@ var propTypes$2 = {
   onInteraction: PropTypes__default["default"].func,
   onEnd: PropTypes__default["default"].func,
   onViewModeChange: PropTypes__default["default"].func,
-  currentMedia: core.PropTypes.ref,
+  currentScreenMedia: core.PropTypes.ref,
+  screensMedias: core.PropTypes.ref,
   className: PropTypes__default["default"].string
 };
 var defaultProps$2 = {
@@ -819,7 +820,8 @@ var defaultProps$2 = {
   onInteraction: null,
   onEnd: null,
   onViewModeChange: null,
-  currentMedia: null,
+  currentScreenMedia: null,
+  screensMedias: null,
   className: null
 };
 
@@ -847,7 +849,8 @@ var Viewer = function Viewer(_ref) {
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
-      currentMedia = _ref.currentMedia,
+      currentScreenMedia = _ref.currentScreenMedia,
+      screensMedias = _ref.screensMedias,
       className = _ref.className;
   var intl = reactIntl.useIntl();
   var parsedStory = hooks.useParsedStory(story, {
@@ -943,7 +946,7 @@ var Viewer = function Viewer(_ref) {
       _ref7$height = _ref7.height,
       menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
 
-  var screensMediaRef = React.useRef([]); // Screen index
+  var screensMediasRef = React.useRef([]); // Screen index
 
   var screenIndex = React.useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
@@ -951,8 +954,12 @@ var Viewer = function Viewer(_ref) {
     }));
   }, [screenId, screens]);
 
-  if (currentMedia !== null) {
-    currentMedia.current = screensMediaRef.current[screenIndex];
+  if (currentScreenMedia !== null) {
+    currentScreenMedia.current = screensMediasRef.current[screenIndex];
+  }
+
+  if (screensMedias !== null) {
+    screensMedias.current = screensMediasRef.current;
   }
 
   var changeIndex = React.useCallback(function (index) {
@@ -960,8 +967,8 @@ var Viewer = function Viewer(_ref) {
       return;
     }
 
-    if (currentMedia !== null) {
-      currentMedia.current = screensMediaRef.current[index];
+    if (currentScreenMedia !== null) {
+      currentScreenMedia.current = screensMediasRef.current[index];
     }
 
     if (onScreenChange !== null) {
@@ -1382,12 +1389,14 @@ var Viewer = function Viewer(_ref) {
       onEnableInteraction: onEnableInteraction,
       onDisableInteraction: onDisableInteraction,
       getMediaRef: function getMediaRef(mediaRef) {
-        screensMediaRef.current[i] = mediaRef;
+        screensMediasRef.current[i] = mediaRef;
       }
     });
     var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
     var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, current && screenIndex > 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: key
+    }, current && screenIndex > 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: "sr-only",
       onClick: onScreenPrevious,
@@ -1400,7 +1409,6 @@ var Viewer = function Viewer(_ref) {
       }]
     }), "Go to previous screen") : null, /*#__PURE__*/React__default["default"].createElement("div", {
       ref: current ? currentScreenRef : null,
-      key: key,
       style: {
         width: landscape ? screenWidth : null,
         height: landscape ? screenHeight : null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.2.380",
+    "version": "0.2.381",
     "description": "",
     "keywords": [
         "javascript"
@@ -60,7 +60,7 @@
         "@micromag/elements": "^0.2.379",
         "@micromag/fields": "^0.2.379",
         "@micromag/intl": "^0.2.379",
-        "@micromag/screens": "^0.2.379",
+        "@micromag/screens": "^0.2.381",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "classnames": "^2.2.6",
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "857ac6e0c89d8edc0f1f9781c093e51d65757f34"
+    "gitHead": "13018a617b7fa2718cfb0220fe1386585055ba80"
 }