cspace-ui/lib/components/media/MediaViewer.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _immutable = _interopRequireDefault(require("immutable"));

var _get = _interopRequireDefault(require("lodash/get"));

var _reactImageGallery = _interopRequireDefault(require("react-image-gallery"));

var _cspaceInput = require("cspace-input");

var _ImageContainer = _interopRequireDefault(require("../../containers/media/ImageContainer"));

var _contentHelpers = require("../../helpers/contentHelpers");

var _blobHelpers = require("../../helpers/blobHelpers");

var _MediaViewer = _interopRequireDefault(require("../../../styles/cspace-ui/MediaViewer.css"));

require("!style-loader!css-loader!react-image-gallery/styles/css/image-gallery-no-icon.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

/* global window */

/* eslint-disable import/imports-first, import/no-unresolved */

/* eslint-enable import/imports-first, import/no-unresolved */
const {
  MiniButton
} = _cspaceInput.baseComponents;

const renderItem = item => _react.default.createElement("div", {
  className: "image-gallery-image"
}, _react.default.createElement(_ImageContainer.default, {
  src: item.snapshot,
  alt: item.snapshotAlt,
  srcSet: item.srcSet,
  sizes: item.sizes,
  title: item.snapshotTitle,
  "data-csid": item.blobCsid
}));

const renderThumbInner = item => _react.default.createElement("div", null, _react.default.createElement(_ImageContainer.default, {
  src: item.thumbnail,
  alt: item.thumbnailAlt,
  title: item.thumbnailTitle
}), _react.default.createElement("div", {
  className: "image-gallery-thumbnail-label"
}, item.thumbnailLabel));

const renderLeftNav = (onClick, disabled) => _react.default.createElement(MiniButton, {
  name: "mediaViewerPrev",
  disabled: disabled,
  onClick: onClick
}, "<");

const renderRightNav = (onClick, disabled) => _react.default.createElement(MiniButton, {
  name: "mediaViewerNext",
  disabled: disabled,
  onClick: onClick
}, ">");

const propTypes = {
  config: _propTypes.default.object.isRequired,
  isSearchPending: _propTypes.default.bool,
  listType: _propTypes.default.string,
  ownBlobCsid: _propTypes.default.string,
  searchResult: _propTypes.default.instanceOf(_immutable.default.Map),
  readRecord: _propTypes.default.func
};
const defaultProps = {
  listType: 'common',
  readRecord: () => Promise.resolve()
};

class MediaViewer extends _react.Component {
  constructor() {
    super();
    this.handleImageGalleryClick = this.handleImageGalleryClick.bind(this);
  }

  getPopupImagePath(blobCsid) {
    const {
      config,
      readRecord
    } = this.props;
    const recordTypeConfig = (0, _get.default)(config, ['recordTypes', 'blob']);
    const popupSubresource = (0, _get.default)(recordTypeConfig, ['content', 'popup', 'subresource']);
    return readRecord(config, recordTypeConfig, undefined, blobCsid).then(blobData => (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, popupSubresource, blobData));
  }

  handleImageGalleryClick(event) {
    const {
      target
    } = event;

    if (target.nodeName === 'IMG') {
      this.getPopupImagePath(target.dataset.csid).then(popupImagePath => {
        window.open((0, _blobHelpers.getImageViewerPath)(this.props.config, popupImagePath), _blobHelpers.VIEWER_WINDOW_NAME);
      });
    }
  }

  createGalleryImage(blobCsid) {
    const {
      config
    } = this.props;
    const content = (0, _get.default)(config, ['recordTypes', 'blob', 'content']);
    const snapshotSubresource = (0, _get.default)(content, ['snapshot', 'subresource']);
    const thumbnailSubresource = (0, _get.default)(content, ['thumbnail', 'subresource']);
    return {
      blobCsid,
      snapshot: (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, snapshotSubresource),
      thumbnail: (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, thumbnailSubresource)
    };
  }

  render() {
    const {
      config,
      isSearchPending,
      listType,
      ownBlobCsid,
      searchResult
    } = this.props;
    const images = [];

    if (ownBlobCsid) {
      images.push(this.createGalleryImage(ownBlobCsid));
    }

    if (searchResult) {
      const listTypeConfig = config.listTypes[listType];
      const {
        listNodeName,
        itemNodeName
      } = listTypeConfig;
      const list = searchResult.get(listNodeName);
      const totalItems = parseInt(list.get('totalItems'), 10);

      if (!isNaN(totalItems)) {
        let items = list.get(itemNodeName);

        if (items) {
          if (!_immutable.default.List.isList(items)) {
            items = _immutable.default.List.of(items);
          }

          items.forEach(item => {
            const blobCsid = item.get('blobCsid');

            if (blobCsid) {
              images.push(this.createGalleryImage(blobCsid));
            }
          });
        }
      }
    }

    if (images.length > 0) {
      return _react.default.createElement("div", {
        className: _MediaViewer.default.normal
      }, _react.default.createElement(_reactImageGallery.default, {
        items: images,
        disableArrowKeys: true,
        lazyLoad: true,
        renderLeftNav: renderLeftNav,
        renderRightNav: renderRightNav,
        showThumbnails: images.length > 1,
        showFullscreenButton: false,
        showPlayButton: false,
        onClick: this.handleImageGalleryClick,
        renderItem: renderItem,
        renderThumbInner: renderThumbInner
      }));
    }

    if (isSearchPending) {
      return null;
    }

    return _react.default.createElement("div", {
      className: _MediaViewer.default.empty
    });
  }

}

exports.default = MediaViewer;
MediaViewer.propTypes = propTypes;
MediaViewer.defaultProps = defaultProps;