@atlaskit/editor-plugin-media-insert/dist/cjs/ui/MediaCard.js

Media Insert plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaCard = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/messages");
var _mediaCard = require("@atlaskit/media-card");
var maxDimensions = {
  width: '100%',
  height: '100%'
};
var MediaCard = exports.MediaCard = function MediaCard(_ref) {
  var attrs = _ref.attrs,
    mediaProvider = _ref.mediaProvider;
  var intl = (0, _reactIntl.useIntl)();
  var mediaAlt = intl.formatMessage(_messages.mediaInsertMessages.mediaAlt);
  var dimensions = _react.default.useMemo(function () {
    return {
      width: attrs.dimensions.width,
      height: attrs.dimensions.height
    };
  }, [attrs.dimensions.width, attrs.dimensions.height]);
  var identifier = _react.default.useMemo(function () {
    return {
      id: attrs.id,
      mediaItemType: 'file',
      collectionName: attrs.collection
    };
  }, [attrs.collection, attrs.id]);
  if (!mediaProvider) {
    return /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
      dimensions: dimensions,
      interactionName: "editor-media-insert-card-loading"
    });
  }
  return /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
    mediaClientConfig: mediaProvider.viewMediaClientConfig,
    resizeMode: "stretchy-fit",
    dimensions: maxDimensions,
    originalDimensions: dimensions,
    identifier: identifier,
    alt: mediaAlt,
    disableOverlay: true
  });
};