linkmore-design/es/image-viewer/LmImageViewer.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import Gallery from 'lightgallery';
import lgAutoplay from 'lightgallery/plugins/autoplay';
import lgFull from 'lightgallery/plugins/fullscreen';
import lgRotate from 'lightgallery/plugins/rotate';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgVideo from 'lightgallery/plugins/video';
import lgZoom from 'lightgallery/plugins/zoom';
import { isEqual } from 'lodash';
import React, { forwardRef, useEffect, useRef, useState } from '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'

var videoImg = "data:image/png;base64,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";
var getIsVideo = function getIsVideo(url) {
  var fileExtension = url.replace(/.*\./, '').toLowerCase();
  return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
};
var imgTransformFun = function imgTransformFun(urlList) {
  return urlList === null || urlList === void 0 ? void 0 : urlList.map(function (item) {
    if (typeof item === 'string') {
      var 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 {
      var _isVideo = getIsVideo((item === null || item === void 0 ? void 0 : item.url) || '');
      return _isVideo ? {
        video: {
          source: [{
            src: item === null || item === void 0 ? void 0 : item.url,
            type: 'video/mp4'
          }],
          attributes: {
            preload: false,
            controls: true
          }
        },
        thumb: (item === null || item === void 0 ? void 0 : item.thumb) || videoImg,
        subHtml: (item === null || item === void 0 ? void 0 : item.subHtml) || '',
        downloadUrl: item === null || item === void 0 ? void 0 : item.url
      } : {
        src: item === null || item === void 0 ? void 0 : item.url,
        subHtml: (item === null || item === void 0 ? void 0 : item.subHtml) || '',
        thumb: (item === null || item === void 0 ? void 0 : item.thumb) || (item === null || item === void 0 ? void 0 : item.url),
        responsive: (item === null || item === void 0 ? void 0 : item.responsive) || (item === null || item === void 0 ? void 0 : item.url)
      };
    }
  });
};
var LmImageViewer = function LmImageViewer(_ref, ref) {
  var resetProps = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
  var _resetProps$visible = resetProps.visible,
    visible = _resetProps$visible === void 0 ? false : _resetProps$visible,
    _resetProps$urlList = resetProps.urlList,
    urlList = _resetProps$urlList === void 0 ? [] : _resetProps$urlList,
    _resetProps$initialIn = resetProps.initialIndex,
    initialIndex = _resetProps$initialIn === void 0 ? 0 : _resetProps$initialIn,
    close = resetProps.close;
  var defaultRef = useRef(null);
  var dynamicGalleryRef = useRef(null);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    list = _useState2[0],
    setList = _useState2[1];
  var initialIndexRef = useRef(0);
  useEffect(function () {
    if (!isEqual(urlList, list)) {
      setList(urlList);
    }
  }, [urlList]);
  useEffect(function () {
    initialIndexRef.current = initialIndex;
  }, [initialIndex]);
  var closeViewModal = function closeViewModal() {
    close === null || close === void 0 ? void 0 : close();
  };
  useEffect(function () {
    if (list !== null && list !== void 0 && list.length) {
      var _dynamicGalleryRef$cu, _defaultRef$current;
      (_dynamicGalleryRef$cu = dynamicGalleryRef.current) === null || _dynamicGalleryRef$cu === void 0 ? void 0 : _dynamicGalleryRef$cu.destroyGallery();
      dynamicGalleryRef.current = Gallery(defaultRef.current, {
        dynamic: true,
        plugins: [lgZoom, lgThumbnail, lgFull, lgVideo, lgAutoplay, lgRotate],
        /** TODO: 版权问题？后期处理 */
        // licenseKey: 'your_license_key',
        dynamicEl: imgTransformFun(list),
        speed: 500
      });
      (_defaultRef$current = defaultRef.current) === null || _defaultRef$current === void 0 ? void 0 : _defaultRef$current.addEventListener('lgAfterClose', closeViewModal);
      if (visible) {
        var _dynamicGalleryRef$cu2;
        (_dynamicGalleryRef$cu2 = dynamicGalleryRef.current) === null || _dynamicGalleryRef$cu2 === void 0 ? void 0 : _dynamicGalleryRef$cu2.openGallery(initialIndexRef.current);
      }
    }
    return function () {
      var _defaultRef$current2;
      (_defaultRef$current2 = defaultRef.current) === null || _defaultRef$current2 === void 0 ? void 0 : _defaultRef$current2.removeEventListener('lgAfterClose', closeViewModal);
    };
  }, [list]);
  useEffect(function () {
    if (visible) {
      var _dynamicGalleryRef$cu3;
      (_dynamicGalleryRef$cu3 = dynamicGalleryRef.current) === null || _dynamicGalleryRef$cu3 === void 0 ? void 0 : _dynamicGalleryRef$cu3.openGallery(initialIndexRef.current);
    }
  }, [visible]);
  return /*#__PURE__*/React.createElement("div", {
    ref: defaultRef,
    style: {
      display: 'none'
    }
  });
};
export default /*#__PURE__*/forwardRef(LmImageViewer);