@collectionspace/cspace-public-browser/lib/components/detail/ImageGallery.js

CollectionSpace public browser

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactIntl = require("react-intl");
var _immutable = _interopRequireDefault(require("immutable"));
var _reactImageGallery = _interopRequireDefault(require("react-image-gallery"));
require("react-image-gallery/styles/css/image-gallery.css");
var _config = _interopRequireDefault(require("../../config"));
var _urlHelpers = require("../../helpers/urlHelpers");
var _ImageGallery = _interopRequireDefault(require("../../../styles/cspace/ImageGallery.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/* global window */

const propTypes = {
  findMedia: _propTypes.default.func,
  institutionId: _propTypes.default.string,
  intl: _propTypes.default.shape({
    formatMessage: _propTypes.default.func.isRequired
  }).isRequired,
  media: _propTypes.default.instanceOf(_immutable.default.Map),
  referenceValue: _propTypes.default.string.isRequired
};
const defaultProps = {
  institutionId: undefined,
  media: undefined,
  findMedia: () => undefined
};
const messages = (0, _reactIntl.defineMessages)({
  defaultAltText: {
    "id": "imageGallery.defaultAltText",
    "defaultMessage": "Image {num}"
  },
  titledAltText: {
    "id": "imageGallery.titledAltText",
    "defaultMessage": "{title} Image {num}"
  },
  thumbnailAltText: {
    "id": "imageGallery.thumbnailAltText",
    "defaultMessage": "Thumbnail: {altText}"
  }
});
const getInstitutionIds = () => {
  const institutionsConfig = _config.default.get('institutions');
  return institutionsConfig ? Object.keys(institutionsConfig) : [];
};
const handleImageClick = event => {
  const imageUrl = event.target.src;
  if (typeof window !== 'undefined') {
    window.open(imageUrl, '_blank');
  }
};
class ImageGallery extends _react.Component {
  componentDidMount() {
    this.findMedia();
  }
  componentDidUpdate(prevProps) {
    const {
      referenceValue
    } = this.props;
    const {
      referenceValue: prevReferenceValue
    } = prevProps;
    if (referenceValue !== prevReferenceValue) {
      this.findMedia();
    }
  }
  findMedia() {
    const {
      findMedia,
      institutionId,
      media,
      referenceValue
    } = this.props;
    const institutionIds = typeof institutionId === 'undefined' ? [null, ...getInstitutionIds()] : [institutionId];
    institutionIds.forEach(instId => {
      if (!media || !media.get(instId)) {
        findMedia(referenceValue, instId);
      }
    });
  }
  render() {
    const {
      institutionId,
      intl,
      media
    } = this.props;
    if (!media) {
      return null;
    }
    const institutionIds = typeof institutionId === 'undefined' ? [null, ...getInstitutionIds()] : [institutionId];
    const items = [];
    institutionIds.forEach(instId => {
      const mediaMap = media.get(instId) || _immutable.default.Map();
      const title = mediaMap.get('title');
      const mediaCsids = mediaMap.get('csids') || _immutable.default.List();
      const mediaAltTexts = mediaMap.get('altTexts') || _immutable.default.List();
      if (mediaCsids && mediaCsids.size > 0) {
        const gatewayUrl = instId ? _config.default.get(['institutions', instId, 'gatewayUrl']) : _config.default.get('gatewayUrl');
        mediaCsids.forEach((mediaCsid, index) => {
          let altText = mediaAltTexts.get(index);
          if (!altText) {
            const num = index + 1;
            altText = title ? intl.formatMessage(messages.titledAltText, {
              title,
              num
            }) : intl.formatMessage(messages.defaultAltText, {
              num
            });
          }
          items.push({
            original: (0, _urlHelpers.blobUrl)(gatewayUrl, mediaCsid, _config.default.get('detailImageDerivative')),
            thumbnail: (0, _urlHelpers.blobUrl)(gatewayUrl, mediaCsid, 'Thumbnail'),
            originalAlt: altText,
            thumbnailAlt: intl.formatMessage(messages.thumbnailAltText, {
              altText
            })
          });
        });
      }
    });
    if (items.length > 0) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: _ImageGallery.default.common
      }, /*#__PURE__*/_react.default.createElement(_reactImageGallery.default, {
        disableArrowKeys: true,
        items: items,
        onClick: handleImageClick,
        showFullscreenButton: false,
        showPlayButton: false,
        showThumbnails: items.length > 1
      }));
    }
    return /*#__PURE__*/_react.default.createElement("div", null);
  }
}
ImageGallery.propTypes = propTypes;
ImageGallery.defaultProps = defaultProps;
var _default = exports.default = (0, _reactIntl.injectIntl)(ImageGallery);