indicator-ui 0.0.179 → 0.0.181

package/dist/index.js

@@ -11886,10 +11886,22 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function MediaViewer({ media = [], initMediaIndex, nearestElementsOnly = true, onClose }) {
-    const [curMediaIndex, setCurMediaIndex] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(initMediaIndex != null && initMediaIndex >= 0 && initMediaIndex < media.length ? initMediaIndex : 0);
+function MediaViewer({ media = [], mediaIndex, nearestElementsOnly = true, onClose }) {
+    const [curMediaIndex, setCurMediaIndex] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0);
     const [muted, setMuted] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     const [play, setPlay] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
+    const getPrevIndex = (curIndex) => {
+        return curIndex > 0 ? curIndex - 1 : undefined;
+    };
+    const getNextIndex = (curIndex) => {
+        return curIndex < media.length - 1 ? curIndex + 1 : undefined;
+    };
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        const isValid = mediaIndex != null && mediaIndex >= 0 && mediaIndex < media.length ? mediaIndex : 0;
+        if (mediaIndex !== curMediaIndex && isValid) {
+            setCurMediaIndex(mediaIndex);
+        }
+    }, [mediaIndex]);
     const resetVideo = () => {
         setMuted(false);
         setPlay(false);
@@ -11911,21 +11923,21 @@ function MediaViewer({ media = [], initMediaIndex, nearestElementsOnly = true, o
     const isNearestElement = (curEl, el) => {
         const nextEl = curEl + 1 < media.length ? curEl + 1 : media.length - 1;
         const prevEl = curEl - 1 >= 0 ? curEl - 1 : 0;
-        return nextEl === el || prevEl === el;
+        return nextEl === el || prevEl === el || el === curEl;
     };
     const getContent = (item, idx) => {
-        if (item == null || (nearestElementsOnly && !isNearestElement(idx, curMediaIndex)))
+        if (item == null || (nearestElementsOnly && !isNearestElement(curMediaIndex, idx)))
             return undefined;
         switch (item.type) {
             case 'video':
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.VideoViewer, { src: item.src, muted: curMediaIndex === idx ? muted : undefined, play: curMediaIndex === idx ? play : undefined, onChangePlay: curMediaIndex === idx ? (play) => setPlay(play) : undefined }, item.src);
+                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.VideoViewer, { src: item.src, muted: curMediaIndex === idx ? muted : undefined, play: curMediaIndex === idx ? play : undefined, onChangePlay: curMediaIndex === idx ? (play) => setPlay(play) : undefined }, idx);
             case 'image':
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ImageViewer, { src: item.src }, item.src);
+                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ImageViewer, { src: item.src }, idx);
             default:
                 return undefined;
         }
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.Carousel, { activeIndex: curMediaIndex, setActiveIndex: setCurMediaIndex, children: media.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content, children: getContent(item, idx) })) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ControlBar, { muted: muted, play: play, onPlay: media[curMediaIndex]?.type === 'video' ? _play : undefined, onMute: media[curMediaIndex]?.type === 'video' ? mute : undefined, onNext: next, onClose: onClose, onPrev: prev }) })] }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.Carousel, { activeIndex: curMediaIndex, setActiveIndex: setCurMediaIndex, children: media.map((item, idx) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content, children: getContent(item, idx) }, idx)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ControlBar, { muted: muted, play: play, onPlay: media[curMediaIndex]?.type === 'video' ? _play : undefined, onMute: media[curMediaIndex]?.type === 'video' ? mute : undefined, onNext: getNextIndex(curMediaIndex) ? next : undefined, onPrev: getPrevIndex(curMediaIndex) ? prev : undefined, onClose: onClose }) })] }));
 }
 
 
@@ -11951,7 +11963,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function ControlBar({ play, muted, onMute, onPlay, onClose, onPrev, onNext }) {
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_3__.ControlBarStyle.controlBar, children: [onMute != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: muted ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeXSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeMaxSVG, {}), size: 'small', hierarchy: 'secondary-gray', width: 'hug', onClick: onMute }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.ChevronLeftSVG, {}), size: 'large', hierarchy: 'secondary-gray', width: 'hug', onClick: onPrev }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.XCloseSVG, {}), size: 'ultra', hierarchy: 'secondary-gray', width: 'hug', onClick: onClose }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.ChevronRightSVG, {}), size: 'large', hierarchy: 'secondary-gray', width: 'hug', onClick: onNext }), onPlay != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: play ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PauseCircleSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PlaySVG, {}), size: 'small', hierarchy: 'secondary-gray', width: 'hug', onClick: onPlay })] }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_3__.ControlBarStyle.controlBar, children: [onMute != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: muted ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeXSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeMaxSVG, {}), size: 'small', hierarchy: 'secondary-gray', width: 'hug', onClick: onMute }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.ChevronLeftSVG, {}), size: 'large', hierarchy: 'secondary-gray', width: 'hug', disabled: onPrev == null, onClick: onPrev }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.XCloseSVG, {}), size: 'ultra', hierarchy: 'secondary-gray', width: 'hug', disabled: onClose == null, onClick: onClose }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.ChevronRightSVG, {}), size: 'large', hierarchy: 'secondary-gray', width: 'hug', disabled: onNext == null, onClick: onNext }), onPlay != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, { iconLeft: play ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PauseCircleSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PlaySVG, {}), size: 'small', hierarchy: 'secondary-gray', width: 'hug', onClick: onPlay })] }));
 }