linkmore-design
Version:
๐ ๐lm็ปไปถๅบใ๐
137 lines (135 loc) โข 6.74 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _lightgallery = _interopRequireDefault(require("lightgallery"));
var _autoplay = _interopRequireDefault(require("lightgallery/plugins/autoplay"));
var _fullscreen = _interopRequireDefault(require("lightgallery/plugins/fullscreen"));
var _rotate = _interopRequireDefault(require("lightgallery/plugins/rotate"));
var _thumbnail = _interopRequireDefault(require("lightgallery/plugins/thumbnail"));
var _video = _interopRequireDefault(require("lightgallery/plugins/video"));
var _zoom = _interopRequireDefault(require("lightgallery/plugins/zoom"));
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
// import 'lightgallery/css/lightgallery.css'
// import 'lightgallery/css/lg-zoom.css'
// import 'lightgallery/css/lg-thumbnail.css'
// import 'lightgallery/css/lg-fullscreen.css'
// import 'lightgallery/css/lg-video.css'
// import 'lightgallery/css/lg-autoplay.css'
// import 'lightgallery/css/lg-rotate.css'
const videoImg = `data:image/png;base64,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`;
const getIsVideo = url => {
const fileExtension = url.replace(/.*\./, '').toLowerCase();
return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
};
const imgTransformFun = urlList => {
return urlList?.map(item => {
if (typeof item === 'string') {
const isVideo = getIsVideo(item);
return isVideo ? {
video: {
source: [{
src: item,
type: 'video/mp4'
}],
attributes: {
preload: false,
controls: true
}
},
thumb: videoImg,
subHtml: '',
downloadUrl: item
} : {
src: item,
subHtml: '',
thumb: item,
responsive: item
};
} else {
const isVideo = getIsVideo(item?.url || '');
return isVideo ? {
video: {
source: [{
src: item?.url,
type: 'video/mp4'
}],
attributes: {
preload: false,
controls: true
}
},
thumb: item?.thumb || videoImg,
subHtml: item?.subHtml || '',
downloadUrl: item?.url
} : {
src: item?.url,
subHtml: item?.subHtml || '',
thumb: item?.thumb || item?.url,
responsive: item?.responsive || item?.url
};
}
});
};
const LmImageViewer = ({
...resetProps
}, ref) => {
const {
visible = false,
urlList = [],
initialIndex = 0,
close
} = resetProps;
const defaultRef = (0, _react.useRef)(null);
const dynamicGalleryRef = (0, _react.useRef)(null);
const [list, setList] = (0, _react.useState)([]);
const initialIndexRef = (0, _react.useRef)(0);
(0, _react.useEffect)(() => {
if (!(0, _lodash.isEqual)(urlList, list)) {
setList(urlList);
}
}, [urlList]);
(0, _react.useEffect)(() => {
initialIndexRef.current = initialIndex;
}, [initialIndex]);
const closeViewModal = () => {
close?.();
};
(0, _react.useEffect)(() => {
if (list?.length) {
dynamicGalleryRef.current?.destroyGallery();
dynamicGalleryRef.current = (0, _lightgallery.default)(defaultRef.current, {
dynamic: true,
plugins: [_zoom.default, _thumbnail.default, _fullscreen.default, _video.default, _autoplay.default, _rotate.default],
/** TODO: ็ๆ้ฎ้ข๏ผๅๆๅค็ */
// licenseKey: 'your_license_key',
dynamicEl: imgTransformFun(list),
speed: 500
});
defaultRef.current?.addEventListener('lgAfterClose', closeViewModal);
if (visible) {
dynamicGalleryRef.current?.openGallery(initialIndexRef.current);
}
}
return () => {
defaultRef.current?.removeEventListener('lgAfterClose', closeViewModal);
};
}, [list]);
(0, _react.useEffect)(() => {
if (visible) {
dynamicGalleryRef.current?.openGallery(initialIndexRef.current);
}
}, [visible]);
return /*#__PURE__*/_react.default.createElement("div", {
ref: defaultRef,
style: {
display: 'none'
}
});
};
var _default = /*#__PURE__*/(0, _react.forwardRef)(LmImageViewer);
exports.default = _default;