@micromag/viewer 0.2.375 → 0.2.379
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +23 -7
- package/lib/index.js +23 -7
- package/package.json +8 -8
package/es/index.js
CHANGED
|
@@ -41,7 +41,8 @@ var propTypes$8 = {
|
|
|
41
41
|
onPrevious: PropTypes.func,
|
|
42
42
|
onNext: PropTypes.func,
|
|
43
43
|
onEnableInteraction: PropTypes.func,
|
|
44
|
-
onDisableInteraction: PropTypes.func
|
|
44
|
+
onDisableInteraction: PropTypes.func,
|
|
45
|
+
getMediaRef: PropTypes.func
|
|
45
46
|
};
|
|
46
47
|
var defaultProps$8 = {
|
|
47
48
|
screen: null,
|
|
@@ -51,7 +52,8 @@ var defaultProps$8 = {
|
|
|
51
52
|
onPrevious: null,
|
|
52
53
|
onNext: null,
|
|
53
54
|
onEnableInteraction: null,
|
|
54
|
-
onDisableInteraction: null
|
|
55
|
+
onDisableInteraction: null,
|
|
56
|
+
getMediaRef: null
|
|
55
57
|
};
|
|
56
58
|
|
|
57
59
|
var ViewerScreen = function ViewerScreen(_ref) {
|
|
@@ -64,7 +66,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
|
|
|
64
66
|
onPrevious = _ref.onPrevious,
|
|
65
67
|
onNext = _ref.onNext,
|
|
66
68
|
onEnableInteraction = _ref.onEnableInteraction,
|
|
67
|
-
onDisableInteraction = _ref.onDisableInteraction
|
|
69
|
+
onDisableInteraction = _ref.onDisableInteraction,
|
|
70
|
+
getMediaRef = _ref.getMediaRef;
|
|
68
71
|
return screen !== null ? /*#__PURE__*/React.createElement("div", {
|
|
69
72
|
className: classNames([styles$6.container, (_ref2 = {}, _defineProperty(_ref2, styles$6.active, active), _defineProperty(_ref2, styles$6.current, current), _ref2)]),
|
|
70
73
|
"aria-hidden": current ? null : 'true'
|
|
@@ -76,7 +79,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
|
|
|
76
79
|
onPrevious: onPrevious,
|
|
77
80
|
onNext: onNext,
|
|
78
81
|
onEnableInteraction: onEnableInteraction,
|
|
79
|
-
onDisableInteraction: onDisableInteraction
|
|
82
|
+
onDisableInteraction: onDisableInteraction,
|
|
83
|
+
getMediaRef: getMediaRef
|
|
80
84
|
})) : null;
|
|
81
85
|
};
|
|
82
86
|
|
|
@@ -773,6 +777,7 @@ var propTypes$2 = {
|
|
|
773
777
|
onInteraction: PropTypes.func,
|
|
774
778
|
onEnd: PropTypes.func,
|
|
775
779
|
onViewModeChange: PropTypes.func,
|
|
780
|
+
currentMedia: PropTypes$1.ref,
|
|
776
781
|
className: PropTypes.string
|
|
777
782
|
};
|
|
778
783
|
var defaultProps$2 = {
|
|
@@ -797,6 +802,7 @@ var defaultProps$2 = {
|
|
|
797
802
|
onInteraction: null,
|
|
798
803
|
onEnd: null,
|
|
799
804
|
onViewModeChange: null,
|
|
805
|
+
currentMedia: null,
|
|
800
806
|
className: null
|
|
801
807
|
};
|
|
802
808
|
|
|
@@ -824,6 +830,7 @@ var Viewer = function Viewer(_ref) {
|
|
|
824
830
|
onInteraction = _ref.onInteraction,
|
|
825
831
|
onEnd = _ref.onEnd,
|
|
826
832
|
onViewModeChange = _ref.onViewModeChange,
|
|
833
|
+
currentMedia = _ref.currentMedia,
|
|
827
834
|
className = _ref.className;
|
|
828
835
|
var intl = useIntl();
|
|
829
836
|
var parsedStory = useParsedStory(story, {
|
|
@@ -892,7 +899,7 @@ var Viewer = function Viewer(_ref) {
|
|
|
892
899
|
menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
|
|
893
900
|
|
|
894
901
|
var hasSize = screenWidth > 0 && screenHeight > 0;
|
|
895
|
-
var ready = hasSize; // && fontsLoaded;
|
|
902
|
+
var ready = hasSize; // && fontsLoaded;
|
|
896
903
|
|
|
897
904
|
useEffect(function () {
|
|
898
905
|
if (ready && onViewModeChange !== null) {
|
|
@@ -917,14 +924,20 @@ var Viewer = function Viewer(_ref) {
|
|
|
917
924
|
|
|
918
925
|
var _ref7 = menuPreviewContainerRect || {},
|
|
919
926
|
_ref7$height = _ref7.height,
|
|
920
|
-
menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
927
|
+
menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
921
928
|
|
|
929
|
+
var screensMediaRef = useRef([]); // Screen index
|
|
922
930
|
|
|
923
931
|
var screenIndex = useMemo(function () {
|
|
924
932
|
return Math.max(0, screens.findIndex(function (it) {
|
|
925
933
|
return String(it.id) === String(screenId);
|
|
926
934
|
}));
|
|
927
935
|
}, [screenId, screens]);
|
|
936
|
+
|
|
937
|
+
if (currentMedia !== null) {
|
|
938
|
+
currentMedia.current = screensMediaRef.current[screenIndex];
|
|
939
|
+
}
|
|
940
|
+
|
|
928
941
|
var changeIndex = useCallback(function (index) {
|
|
929
942
|
if (index === screenIndex) {
|
|
930
943
|
return;
|
|
@@ -1346,7 +1359,10 @@ var Viewer = function Viewer(_ref) {
|
|
|
1346
1359
|
onPrevious: onScreenPrevious,
|
|
1347
1360
|
onNext: onScreenNext,
|
|
1348
1361
|
onEnableInteraction: onEnableInteraction,
|
|
1349
|
-
onDisableInteraction: onDisableInteraction
|
|
1362
|
+
onDisableInteraction: onDisableInteraction,
|
|
1363
|
+
getMediaRef: function getMediaRef(mediaRef) {
|
|
1364
|
+
screensMediaRef.current[i] = mediaRef;
|
|
1365
|
+
}
|
|
1350
1366
|
});
|
|
1351
1367
|
var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
|
|
1352
1368
|
var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
|
package/lib/index.js
CHANGED
|
@@ -58,7 +58,8 @@ var propTypes$8 = {
|
|
|
58
58
|
onPrevious: PropTypes__default["default"].func,
|
|
59
59
|
onNext: PropTypes__default["default"].func,
|
|
60
60
|
onEnableInteraction: PropTypes__default["default"].func,
|
|
61
|
-
onDisableInteraction: PropTypes__default["default"].func
|
|
61
|
+
onDisableInteraction: PropTypes__default["default"].func,
|
|
62
|
+
getMediaRef: PropTypes__default["default"].func
|
|
62
63
|
};
|
|
63
64
|
var defaultProps$8 = {
|
|
64
65
|
screen: null,
|
|
@@ -68,7 +69,8 @@ var defaultProps$8 = {
|
|
|
68
69
|
onPrevious: null,
|
|
69
70
|
onNext: null,
|
|
70
71
|
onEnableInteraction: null,
|
|
71
|
-
onDisableInteraction: null
|
|
72
|
+
onDisableInteraction: null,
|
|
73
|
+
getMediaRef: null
|
|
72
74
|
};
|
|
73
75
|
|
|
74
76
|
var ViewerScreen = function ViewerScreen(_ref) {
|
|
@@ -81,7 +83,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
|
|
|
81
83
|
onPrevious = _ref.onPrevious,
|
|
82
84
|
onNext = _ref.onNext,
|
|
83
85
|
onEnableInteraction = _ref.onEnableInteraction,
|
|
84
|
-
onDisableInteraction = _ref.onDisableInteraction
|
|
86
|
+
onDisableInteraction = _ref.onDisableInteraction,
|
|
87
|
+
getMediaRef = _ref.getMediaRef;
|
|
85
88
|
return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
86
89
|
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)]),
|
|
87
90
|
"aria-hidden": current ? null : 'true'
|
|
@@ -93,7 +96,8 @@ var ViewerScreen = function ViewerScreen(_ref) {
|
|
|
93
96
|
onPrevious: onPrevious,
|
|
94
97
|
onNext: onNext,
|
|
95
98
|
onEnableInteraction: onEnableInteraction,
|
|
96
|
-
onDisableInteraction: onDisableInteraction
|
|
99
|
+
onDisableInteraction: onDisableInteraction,
|
|
100
|
+
getMediaRef: getMediaRef
|
|
97
101
|
})) : null;
|
|
98
102
|
};
|
|
99
103
|
|
|
@@ -790,6 +794,7 @@ var propTypes$2 = {
|
|
|
790
794
|
onInteraction: PropTypes__default["default"].func,
|
|
791
795
|
onEnd: PropTypes__default["default"].func,
|
|
792
796
|
onViewModeChange: PropTypes__default["default"].func,
|
|
797
|
+
currentMedia: core.PropTypes.ref,
|
|
793
798
|
className: PropTypes__default["default"].string
|
|
794
799
|
};
|
|
795
800
|
var defaultProps$2 = {
|
|
@@ -814,6 +819,7 @@ var defaultProps$2 = {
|
|
|
814
819
|
onInteraction: null,
|
|
815
820
|
onEnd: null,
|
|
816
821
|
onViewModeChange: null,
|
|
822
|
+
currentMedia: null,
|
|
817
823
|
className: null
|
|
818
824
|
};
|
|
819
825
|
|
|
@@ -841,6 +847,7 @@ var Viewer = function Viewer(_ref) {
|
|
|
841
847
|
onInteraction = _ref.onInteraction,
|
|
842
848
|
onEnd = _ref.onEnd,
|
|
843
849
|
onViewModeChange = _ref.onViewModeChange,
|
|
850
|
+
currentMedia = _ref.currentMedia,
|
|
844
851
|
className = _ref.className;
|
|
845
852
|
var intl = reactIntl.useIntl();
|
|
846
853
|
var parsedStory = hooks.useParsedStory(story, {
|
|
@@ -909,7 +916,7 @@ var Viewer = function Viewer(_ref) {
|
|
|
909
916
|
menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
|
|
910
917
|
|
|
911
918
|
var hasSize = screenWidth > 0 && screenHeight > 0;
|
|
912
|
-
var ready = hasSize; // && fontsLoaded;
|
|
919
|
+
var ready = hasSize; // && fontsLoaded;
|
|
913
920
|
|
|
914
921
|
React.useEffect(function () {
|
|
915
922
|
if (ready && onViewModeChange !== null) {
|
|
@@ -934,14 +941,20 @@ var Viewer = function Viewer(_ref) {
|
|
|
934
941
|
|
|
935
942
|
var _ref7 = menuPreviewContainerRect || {},
|
|
936
943
|
_ref7$height = _ref7.height,
|
|
937
|
-
menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
944
|
+
menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
|
|
938
945
|
|
|
946
|
+
var screensMediaRef = React.useRef([]); // Screen index
|
|
939
947
|
|
|
940
948
|
var screenIndex = React.useMemo(function () {
|
|
941
949
|
return Math.max(0, screens.findIndex(function (it) {
|
|
942
950
|
return String(it.id) === String(screenId);
|
|
943
951
|
}));
|
|
944
952
|
}, [screenId, screens]);
|
|
953
|
+
|
|
954
|
+
if (currentMedia !== null) {
|
|
955
|
+
currentMedia.current = screensMediaRef.current[screenIndex];
|
|
956
|
+
}
|
|
957
|
+
|
|
945
958
|
var changeIndex = React.useCallback(function (index) {
|
|
946
959
|
if (index === screenIndex) {
|
|
947
960
|
return;
|
|
@@ -1363,7 +1376,10 @@ var Viewer = function Viewer(_ref) {
|
|
|
1363
1376
|
onPrevious: onScreenPrevious,
|
|
1364
1377
|
onNext: onScreenNext,
|
|
1365
1378
|
onEnableInteraction: onEnableInteraction,
|
|
1366
|
-
onDisableInteraction: onDisableInteraction
|
|
1379
|
+
onDisableInteraction: onDisableInteraction,
|
|
1380
|
+
getMediaRef: function getMediaRef(mediaRef) {
|
|
1381
|
+
screensMediaRef.current[i] = mediaRef;
|
|
1382
|
+
}
|
|
1367
1383
|
});
|
|
1368
1384
|
var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
|
|
1369
1385
|
var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/viewer",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.379",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
56
56
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
57
57
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
58
|
-
"@micromag/core": "^0.2.
|
|
59
|
-
"@micromag/element-scroll": "^0.2.
|
|
60
|
-
"@micromag/elements": "^0.2.
|
|
61
|
-
"@micromag/fields": "^0.2.
|
|
62
|
-
"@micromag/intl": "^0.2.
|
|
63
|
-
"@micromag/screens": "^0.2.
|
|
58
|
+
"@micromag/core": "^0.2.379",
|
|
59
|
+
"@micromag/element-scroll": "^0.2.379",
|
|
60
|
+
"@micromag/elements": "^0.2.379",
|
|
61
|
+
"@micromag/fields": "^0.2.379",
|
|
62
|
+
"@micromag/intl": "^0.2.379",
|
|
63
|
+
"@micromag/screens": "^0.2.379",
|
|
64
64
|
"@react-spring/core": "^9.1.1",
|
|
65
65
|
"@react-spring/web": "^9.1.1",
|
|
66
66
|
"classnames": "^2.2.6",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "b3261cde1fac196f335a2f2b3091494919dd62b2"
|
|
80
80
|
}
|