@atlaskit/renderer
Version:
Renderer component
424 lines (420 loc) • 20.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mediaIdentifierMap = exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardView = exports.MediaCardInternal = exports.MediaCard = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _traverse = require("@atlaskit/adf-utils/traverse");
var _mediaCard = require("@atlaskit/media-card");
var _mediaClientReact = require("@atlaskit/media-client-react");
var _utils = require("@atlaskit/editor-common/utils");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _analyticsContext = _interopRequireDefault(require("../analytics/analyticsContext"));
var _analytics = require("@atlaskit/editor-common/analytics");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var mediaIdentifierMap = exports.mediaIdentifierMap = new Map();
var getListOfIdentifiersFromDoc = exports.getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
if (!doc) {
return [];
}
return (0, _traverse.filter)(doc, function (node) {
return node.type === 'media';
}).reduce(function (identifierList, mediaNode) {
if (mediaNode.attrs) {
var _mediaNode$attrs = mediaNode.attrs,
type = _mediaNode$attrs.type,
dataURI = _mediaNode$attrs.url,
id = _mediaNode$attrs.id;
if (type === 'file' && id) {
identifierList.push({
mediaItemType: 'file',
id: id
});
} else if (type === 'external' && dataURI) {
identifierList.push({
mediaItemType: 'external-image',
dataURI: dataURI,
name: dataURI
});
}
}
return identifierList;
}, []);
};
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
function MediaCardView() {
var _this;
(0, _classCallCheck2.default)(this, MediaCardView);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, MediaCardView, [].concat(args));
(0, _defineProperty2.default)(_this, "state", {});
(0, _defineProperty2.default)(_this, "saveFileState", /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
var _this$props, collectionName, mediaClient, options, fileState, _t;
return _regenerator.default.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_this$props = _this.props, collectionName = _this$props.collection, mediaClient = _this$props.mediaClient;
options = {
collectionName: collectionName
};
_context.prev = 1;
if (!mediaClient) {
_context.next = 3;
break;
}
_context.next = 2;
return mediaClient.file.getCurrentState(id, options);
case 2:
fileState = _context.sent;
_this.setState({
fileState: fileState
});
case 3:
_context.next = 5;
break;
case 4:
_context.prev = 4;
_t = _context["catch"](1);
case 5:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 4]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}());
(0, _defineProperty2.default)(_this, "onError", function (reason) {
var _this$props$fireAnaly, _this$props3;
var _this$props2 = _this.props,
nestedUnder = _this$props2.nestedUnder,
rendererContext = _this$props2.rendererContext;
(_this$props$fireAnaly = (_this$props3 = _this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 || _this$props$fireAnaly.call(_this$props3, {
action: _analytics.ACTION.ERRORED,
actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
eventType: _analytics.EVENT_TYPE.UI,
attributes: _objectSpread(_objectSpread({
reason: reason,
external: false
}, nestedUnder && (0, _experiments.editorExperiment)('platform_synced_block', true) ? {
nestedUnder: nestedUnder
} : {}), rendererContext !== null && rendererContext !== void 0 && rendererContext.nestedRendererType && (0, _experiments.editorExperiment)('platform_synced_block', true) ? {
nestedRendererType: rendererContext.nestedRendererType
} : {})
});
});
(0, _defineProperty2.default)(_this, "renderLoadingCard", function () {
var cardDimensions = _this.props.cardDimensions;
return /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
dimensions: cardDimensions,
interactionName: "renderer-media-card-loading"
});
});
/**
* We want to call provided `eventHandlers.media.onClick` when it's provided,
* but we also don't want to call it when it's a video and inline video player is enabled.
* This is due to consumers normally process this onClick call by opening media viewer and
* we don't want that to happened described above text.
*/
(0, _defineProperty2.default)(_this, "getOnCardClickCallback", function (isInlinePlayer) {
var eventHandlers = _this.props.eventHandlers;
if (eventHandlers && eventHandlers.media && eventHandlers.media.onClick) {
return function (result, analyticsEvent) {
var isVideo = result.mediaItemDetails && result.mediaItemDetails.mediaType === 'video';
var isVideoWithInlinePlayer = isInlinePlayer && isVideo;
if (!isVideoWithInlinePlayer && eventHandlers && eventHandlers.media && eventHandlers.media.onClick) {
eventHandlers.media.onClick(result, analyticsEvent);
}
};
}
return undefined;
});
return _this;
}
(0, _inherits2.default)(MediaCardView, _Component);
return (0, _createClass2.default)(MediaCardView, [{
key: "componentDidMount",
value: function () {
var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
var _this$props4, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
return _regenerator.default.wrap(function (_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_this$props4 = this.props, rendererContext = _this$props4.rendererContext, contextIdentifierProvider = _this$props4.contextIdentifierProvider, id = _this$props4.id, url = _this$props4.url, collectionName = _this$props4.collection;
if (!contextIdentifierProvider) {
_context2.next = 2;
break;
}
_t2 = this;
_context2.next = 1;
return contextIdentifierProvider;
case 1:
_t3 = _context2.sent;
_t2.setState.call(_t2, {
contextIdentifierProvider: _t3
});
case 2:
nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
if (identifier.mediaItemType === 'file' && identifier.id === id) {
mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
collectionName: collectionName
}));
} else if (identifier.mediaItemType === 'external-image') {
mediaIdentifierMap.set(identifier.dataURI, identifier);
}
});
}
if (id) {
this.saveFileState(id);
}
case 3:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}()
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var oldId = prevProps.id;
if (this.props.id && oldId !== this.props.id) {
this.saveFileState(this.props.id);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var _this$props5 = this.props,
id = _this$props5.id,
dataURI = _this$props5.url;
if (id) {
mediaIdentifierMap.delete(id);
} else if (dataURI) {
mediaIdentifierMap.delete(dataURI);
}
}
}, {
key: "renderExternal",
value: function renderExternal(shouldOpenMediaViewer) {
var _this$props6 = this.props,
cardDimensions = _this$props6.cardDimensions,
resizeMode = _this$props6.resizeMode,
appearance = _this$props6.appearance,
url = _this$props6.url,
imageStatus = _this$props6.imageStatus,
disableOverlay = _this$props6.disableOverlay,
alt = _this$props6.alt,
featureFlags = _this$props6.featureFlags,
ssr = _this$props6.ssr,
mediaClient = _this$props6.mediaClient,
dataAttributes = _this$props6.dataAttributes,
enableSyncMediaCard = _this$props6.enableSyncMediaCard,
localId = _this$props6.localId;
if (imageStatus === 'loading' || !url) {
return this.renderLoadingCard();
}
var identifier = {
dataURI: url,
name: url,
mediaItemType: 'external-image'
};
// we need this statement for the mandatory mediaClientConfig below
var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
return (
/*#__PURE__*/
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
_react.default.createElement("div", (0, _extends2.default)({}, dataAttributes, {
"data-node-type": "media",
"data-local-id": localId
}), /*#__PURE__*/_react.default.createElement(Card
// TODO: MPT-315 - clean up after we move mediaClientConfig into FileIdentifier
// context is not really used when the type is external and we want to render the component asap
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
, {
mediaClientConfig: mediaClientConfig,
alt: alt,
identifier: identifier,
dimensions: cardDimensions,
appearance: appearance,
resizeMode: resizeMode,
disableOverlay: disableOverlay,
shouldOpenMediaViewer: shouldOpenMediaViewer,
mediaViewerItems: Array.from(mediaIdentifierMap.values()),
featureFlags: featureFlags,
ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
shouldHideTooltip: false,
onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
}))
);
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
contextIdentifierProvider = _this$state.contextIdentifierProvider,
fileState = _this$state.fileState;
var _this$props7 = this.props,
id = _this$props7.id,
alt = _this$props7.alt,
type = _this$props7.type,
collection = _this$props7.collection,
occurrenceKey = _this$props7.occurrenceKey,
cardDimensions = _this$props7.cardDimensions,
resizeMode = _this$props7.resizeMode,
disableOverlay = _this$props7.disableOverlay,
useInlinePlayer = _this$props7.useInlinePlayer,
originalDimensions = _this$props7.originalDimensions,
forceOpenMediaViewer = _this$props7.shouldOpenMediaViewer,
featureFlags = _this$props7.featureFlags,
shouldEnableDownloadButton = _this$props7.shouldEnableDownloadButton,
ssr = _this$props7.ssr,
mediaClient = _this$props7.mediaClient,
dataAttributes = _this$props7.dataAttributes,
enableSyncMediaCard = _this$props7.enableSyncMediaCard,
localId = _this$props7.localId,
mediaViewerExtensions = _this$props7.mediaViewerExtensions;
var isMobile = false;
var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
var isInlinePlayer = isMobile ? false : shouldPlayInline;
var onCardClick = this.getOnCardClickCallback(isInlinePlayer);
var shouldOpenMediaViewer = typeof forceOpenMediaViewer === 'boolean' ? forceOpenMediaViewer : !isMobile && !onCardClick;
if (type === 'external') {
return this.renderExternal(shouldOpenMediaViewer);
}
if (type === 'link') {
return null;
}
var mediaClientConfig = !!ssr ? ssr.config : mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
if (!mediaClientConfig || !id) {
return this.renderLoadingCard();
}
if (!id || type !== 'file') {
return /*#__PURE__*/_react.default.createElement(_mediaCard.CardError, {
dimensions: cardDimensions
});
}
var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
var identifier = {
id: id,
mediaItemType: 'file',
collectionName: collection,
occurrenceKey: occurrenceKey
};
var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
// Quick solution to disable lazy loading of images on PDF export pages in Confluence to remedy an issue with images never loading
// More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
var currentUrl = window.location.href;
var shouldDisableLazyLoading = (0, _expValEquals.expValEquals)('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getClipboardAttrs({
id: id,
alt: alt,
collection: collection,
contextIdentifierProvider: contextIdentifierProvider,
originalDimensions: originalDimensions,
fileState: fileState
}), dataAttributes, {
"data-local-id": localId
}), /*#__PURE__*/_react.default.createElement(Card, {
identifier: identifier,
alt: alt,
contextId: contextId,
mediaClientConfig: mediaClientConfig,
dimensions: cardDimensions,
originalDimensions: originalDimensions,
onClick: onCardClick,
resizeMode: resizeMode,
isLazy: !isMobile && !shouldDisableLazyLoading,
disableOverlay: disableOverlay,
useInlinePlayer: isInlinePlayer,
shouldOpenMediaViewer: shouldOpenMediaViewer,
mediaViewerItems: Array.from(mediaIdentifierMap.values()),
featureFlags: featureFlags,
shouldEnableDownloadButton: shouldEnableDownloadButton,
ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
shouldHideTooltip: isMobile,
mediaViewerExtensions: mediaViewerExtensions,
onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
}));
}
}]);
}(_react.Component);
// Needed for copy & paste
var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_ref2) {
var id = _ref2.id,
alt = _ref2.alt,
collection = _ref2.collection,
contextIdentifierProvider = _ref2.contextIdentifierProvider,
originalDimensions = _ref2.originalDimensions,
fileState = _ref2.fileState;
var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
var width = originalDimensions && originalDimensions.width;
var height = originalDimensions && originalDimensions.height;
var fileName = 'file'; // default name is needed for Confluence
var fileSize = 1;
var fileMimeType = '';
if (fileState && fileState.status !== 'error') {
fileSize = fileState.size;
fileName = fileState.name;
fileMimeType = fileState.mimeType;
}
return {
'data-context-id': contextId,
'data-type': 'file',
'data-node-type': 'media',
'data-width': width,
'data-height': height,
'data-id': id,
'data-collection': collection,
'data-file-name': fileName,
'data-file-size': fileSize,
'data-file-mime-type': fileMimeType,
'data-alt': alt
};
};
var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref3) {
var fireAnalyticsEvent = _ref3.fireAnalyticsEvent;
return /*#__PURE__*/_react.default.createElement(MediaCardView
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, (0, _extends2.default)({}, props, {
mediaClient: mediaClient,
fireAnalyticsEvent: fireAnalyticsEvent
}));
});
};
var MediaCard = exports.MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);