@micromag/viewer 0.2.378 → 0.2.382

package/es/index.js

@@ -41,7 +41,8 @@ var propTypes$8 = {
   onPrevious: PropTypes.func,
   onNext: PropTypes.func,
   onEnableInteraction: PropTypes.func,
-  onDisableInteraction: PropTypes.func
+  onDisableInteraction: PropTypes.func,
+  getMediaRef: PropTypes.func
 };
 var defaultProps$8 = {
   screen: null,
@@ -51,7 +52,8 @@ var defaultProps$8 = {
   onPrevious: null,
   onNext: null,
   onEnableInteraction: null,
-  onDisableInteraction: null
+  onDisableInteraction: null,
+  getMediaRef: null
 };
 
 var ViewerScreen = function ViewerScreen(_ref) {
@@ -64,7 +66,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
       onPrevious = _ref.onPrevious,
       onNext = _ref.onNext,
       onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction;
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
   return screen !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.container, (_ref2 = {}, _defineProperty(_ref2, styles$6.active, active), _defineProperty(_ref2, styles$6.current, current), _ref2)]),
     "aria-hidden": current ? null : 'true'
@@ -76,7 +79,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
     onPrevious: onPrevious,
     onNext: onNext,
     onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
   })) : null;
 };
 
@@ -773,6 +777,8 @@ var propTypes$2 = {
   onInteraction: PropTypes.func,
   onEnd: PropTypes.func,
   onViewModeChange: PropTypes.func,
+  currentScreenMedia: PropTypes$1.ref,
+  screensMedias: PropTypes$1.ref,
   className: PropTypes.string
 };
 var defaultProps$2 = {
@@ -797,6 +803,8 @@ var defaultProps$2 = {
   onInteraction: null,
   onEnd: null,
   onViewModeChange: null,
+  currentScreenMedia: null,
+  screensMedias: null,
   className: null
 };
 
@@ -824,6 +832,8 @@ var Viewer = function Viewer(_ref) {
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
+      currentScreenMedia = _ref.currentScreenMedia,
+      screensMedias = _ref.screensMedias,
       className = _ref.className;
   var intl = useIntl();
   var parsedStory = useParsedStory(story, {
@@ -892,7 +902,7 @@ var Viewer = function Viewer(_ref) {
       menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
 
   var hasSize = screenWidth > 0 && screenHeight > 0;
-  var ready = hasSize; // && fontsLoaded;    
+  var ready = hasSize; // && fontsLoaded;
 
   useEffect(function () {
     if (ready && onViewModeChange !== null) {
@@ -917,19 +927,33 @@ var Viewer = function Viewer(_ref) {
 
   var _ref7 = menuPreviewContainerRect || {},
       _ref7$height = _ref7.height,
-      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height; // Screen index
+      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
 
+  var screensMediasRef = useRef([]); // Screen index
 
   var screenIndex = useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
       return String(it.id) === String(screenId);
     }));
   }, [screenId, screens]);
+
+  if (currentScreenMedia !== null) {
+    currentScreenMedia.current = screensMediasRef.current[screenIndex];
+  }
+
+  if (screensMedias !== null) {
+    screensMedias.current = screensMediasRef.current;
+  }
+
   var changeIndex = useCallback(function (index) {
     if (index === screenIndex) {
       return;
     }
 
+    if (currentScreenMedia !== null) {
+      currentScreenMedia.current = screensMediasRef.current[index];
+    }
+
     if (onScreenChange !== null) {
       onScreenChange(screens[index], index);
     }
@@ -1346,11 +1370,16 @@ var Viewer = function Viewer(_ref) {
       onPrevious: onScreenPrevious,
       onNext: onScreenNext,
       onEnableInteraction: onEnableInteraction,
-      onDisableInteraction: onDisableInteraction
+      onDisableInteraction: onDisableInteraction,
+      getMediaRef: function getMediaRef(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,
@@ -1363,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

@@ -58,7 +58,8 @@ var propTypes$8 = {
   onPrevious: PropTypes__default["default"].func,
   onNext: PropTypes__default["default"].func,
   onEnableInteraction: PropTypes__default["default"].func,
-  onDisableInteraction: PropTypes__default["default"].func
+  onDisableInteraction: PropTypes__default["default"].func,
+  getMediaRef: PropTypes__default["default"].func
 };
 var defaultProps$8 = {
   screen: null,
@@ -68,7 +69,8 @@ var defaultProps$8 = {
   onPrevious: null,
   onNext: null,
   onEnableInteraction: null,
-  onDisableInteraction: null
+  onDisableInteraction: null,
+  getMediaRef: null
 };
 
 var ViewerScreen = function ViewerScreen(_ref) {
@@ -81,7 +83,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
       onPrevious = _ref.onPrevious,
       onNext = _ref.onNext,
       onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction;
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
   return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$6.active, active), _defineProperty__default["default"](_ref2, styles$6.current, current), _ref2)]),
     "aria-hidden": current ? null : 'true'
@@ -93,7 +96,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
     onPrevious: onPrevious,
     onNext: onNext,
     onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
   })) : null;
 };
 
@@ -790,6 +794,8 @@ var propTypes$2 = {
   onInteraction: PropTypes__default["default"].func,
   onEnd: PropTypes__default["default"].func,
   onViewModeChange: PropTypes__default["default"].func,
+  currentScreenMedia: core.PropTypes.ref,
+  screensMedias: core.PropTypes.ref,
   className: PropTypes__default["default"].string
 };
 var defaultProps$2 = {
@@ -814,6 +820,8 @@ var defaultProps$2 = {
   onInteraction: null,
   onEnd: null,
   onViewModeChange: null,
+  currentScreenMedia: null,
+  screensMedias: null,
   className: null
 };
 
@@ -841,6 +849,8 @@ var Viewer = function Viewer(_ref) {
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
+      currentScreenMedia = _ref.currentScreenMedia,
+      screensMedias = _ref.screensMedias,
       className = _ref.className;
   var intl = reactIntl.useIntl();
   var parsedStory = hooks.useParsedStory(story, {
@@ -909,7 +919,7 @@ var Viewer = function Viewer(_ref) {
       menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
 
   var hasSize = screenWidth > 0 && screenHeight > 0;
-  var ready = hasSize; // && fontsLoaded;    
+  var ready = hasSize; // && fontsLoaded;
 
   React.useEffect(function () {
     if (ready && onViewModeChange !== null) {
@@ -934,19 +944,33 @@ var Viewer = function Viewer(_ref) {
 
   var _ref7 = menuPreviewContainerRect || {},
       _ref7$height = _ref7.height,
-      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height; // Screen index
+      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
 
+  var screensMediasRef = React.useRef([]); // Screen index
 
   var screenIndex = React.useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
       return String(it.id) === String(screenId);
     }));
   }, [screenId, screens]);
+
+  if (currentScreenMedia !== null) {
+    currentScreenMedia.current = screensMediasRef.current[screenIndex];
+  }
+
+  if (screensMedias !== null) {
+    screensMedias.current = screensMediasRef.current;
+  }
+
   var changeIndex = React.useCallback(function (index) {
     if (index === screenIndex) {
       return;
     }
 
+    if (currentScreenMedia !== null) {
+      currentScreenMedia.current = screensMediasRef.current[index];
+    }
+
     if (onScreenChange !== null) {
       onScreenChange(screens[index], index);
     }
@@ -1363,11 +1387,16 @@ var Viewer = function Viewer(_ref) {
       onPrevious: onScreenPrevious,
       onNext: onScreenNext,
       onEnableInteraction: onEnableInteraction,
-      onDisableInteraction: onDisableInteraction
+      onDisableInteraction: onDisableInteraction,
+      getMediaRef: function getMediaRef(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,
@@ -1380,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.378",
+    "version": "0.2.382",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,12 +55,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.375",
-        "@micromag/element-scroll": "^0.2.375",
-        "@micromag/elements": "^0.2.375",
-        "@micromag/fields": "^0.2.378",
-        "@micromag/intl": "^0.2.377",
-        "@micromag/screens": "^0.2.375",
+        "@micromag/core": "^0.2.379",
+        "@micromag/element-scroll": "^0.2.379",
+        "@micromag/elements": "^0.2.379",
+        "@micromag/fields": "^0.2.379",
+        "@micromag/intl": "^0.2.379",
+        "@micromag/screens": "^0.2.382",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "classnames": "^2.2.6",
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "238b7d66e352b610b80f09af858ba95d1fabb249"
+    "gitHead": "45fb095754e40c8cc89b4e0ed04c69c04b1033dc"
 }