@atlaskit/media-card 81.0.4 → 81.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/media-card
 
+## 81.1.1
+
+### Patch Changes
+
+- [`49f682f5edc7b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49f682f5edc7b) -
+  Clean up experiment `cc_editor_ttvc_media_hold_fix`
+- Updated dependencies
+
+## 81.1.0
+
+### Minor Changes
+
+- [`19773530cd51c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19773530cd51c) -
+  Add fallbackMediaNameFetcher support to MediaCard (FileCard) and MediaViewer (header display),
+  gated behind the platform_editor_media_name_fallback_viewer_card experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 81.0.4
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/fileCard.js

@@ -17,6 +17,7 @@ var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaViewer = require("@atlaskit/media-viewer");
 var _react = _interopRequireWildcard(require("react"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _useCallbackRef = require("use-callback-ref");
 var _errors = require("../errors");
 var _types = require("../types");
@@ -98,7 +99,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     ssrItemDetails = _ref.ssrItemDetails,
     ssrFileState = _ref.ssrFileState,
     onError = _ref.onError,
-    mediaViewerExtensions = _ref.mediaViewerExtensions;
+    mediaViewerExtensions = _ref.mediaViewerExtensions,
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(false),
@@ -150,6 +152,12 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       initialFileState: initialFileState
     }),
     fileState = _useFileState.fileState;
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    fallbackMediaName = _useState8[0],
+    setFallbackMediaName = _useState8[1];
+  var fallbackMediaNameFetchAttempted = (0, _react.useRef)(false);
+  var lastFetchedFileId = (0, _react.useRef)();
   var prevFileState = (0, _usePrevious.usePrevious)(fileState && (0, _mediaClient.isErrorFileState)(fileState) ? undefined : fileState);
   var fileStateValue = (0, _react.useMemo)(function () {
     if (fileState && !(0, _mediaClient.isErrorFileState)(fileState)) {
@@ -158,6 +166,23 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  (0, _react.useEffect)(function () {
+    // Reset fetch state when the file identity changes
+    var currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
+    if (currentId && currentId !== lastFetchedFileId.current && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = false;
+      setFallbackMediaName(undefined);
+      lastFetchedFileId.current = currentId;
+    }
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = true;
+      fallbackMediaNameFetcher(fileStateValue.id).then(function (name) {
+        setFallbackMediaName(name);
+      }, function () {
+        // Silently ignore fetch failures
+      });
+    }
+  }, [fileStateValue, fallbackMediaNameFetcher]);
   var dateOverrides = (0, _react.useContext)(_dateOverrideContext.DateOverrideContext);
   var overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
@@ -179,22 +204,22 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
 
   // Generate unique traceId for file
   var traceContext = (0, _react.useMemo)(traceContextRetriever, []);
-  var _useState7 = (0, _react.useState)('loading'),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)('loading'),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    isPlayingFile = _useState0[0],
-    setIsPlayingFile = _useState0[1];
+    status = _useState0[0],
+    setStatus = _useState0[1];
   var _useState1 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    shouldAutoplay = _useState10[0],
-    setShouldAutoplay = _useState10[1];
+    isPlayingFile = _useState10[0],
+    setIsPlayingFile = _useState10[1];
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    previewDidRender = _useState12[0],
-    setPreviewDidRender = _useState12[1];
+    shouldAutoplay = _useState12[0],
+    setShouldAutoplay = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    previewDidRender = _useState14[0],
+    setPreviewDidRender = _useState14[1];
   var mediaBlobUrlAttrs = (0, _react.useMemo)(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -243,18 +268,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     instanceId: internalOccurrenceKey,
     enabled: shouldSendPerformanceEvent
   });
-  var _useState13 = (0, _react.useState)(),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
+  var _useState15 = (0, _react.useState)(),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    error = _useState16[0],
+    setError = _useState16[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  var _useState15 = (0, _react.useState)(null),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    mediaViewerSelectedItem = _useState16[0],
-    setMediaViewerSelectedItem = _useState16[1];
+  var _useState17 = (0, _react.useState)(null),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = (0, _react.useRef)();
 
   // Store latest auth provider event (emit with fireOperationalEventRef)
@@ -270,11 +295,12 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           return 'failed';
       }
     };
+    var resolvedFallbackName = (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if ((0, _platformFeatureFlags.fg)('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -294,7 +320,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name,
+          name: fileStateValue.name || resolvedFallbackName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -308,7 +334,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         };
       }
     }
-  }, [fileStateValue, identifier.id, ssrItemDetails]);
+  }, [fileStateValue, identifier.id, ssrItemDetails, fallbackMediaName]);
   var fileAttributes = (0, _react.useMemo)(function () {
     return {
       fileMediatype: metadata.mediaType,
@@ -804,6 +830,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
-    extensions: mediaViewerExtensions
+    extensions: mediaViewerExtensions,
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher
   }) : null, getSsrScriptProps && /*#__PURE__*/_react.default.createElement("script", getSsrScriptProps()));
 };

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/ui/imageRenderer/imageRendererV2.js

@@ -19,7 +19,6 @@ var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _customData = _interopRequireDefault(require("@atlaskit/react-ufo/custom-data"));
 var _interactionContext = require("@atlaskit/react-ufo/interaction-context");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); 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; }
@@ -60,7 +59,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     setResolvedDimensions = _useState4[1];
   (0, _react.useLayoutEffect)(function () {
     if (!didRender && (0, _platformFeatureFlags.fg)('platfrom_close_blindspot_for_img')) {
-      if (!cardPreview && (0, _expValEquals.expValEquals)('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
+      if (!cardPreview) {
         return;
       }
       return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
@@ -73,9 +72,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
   };
   var onError = function onError() {
-    if ((0, _expValEquals.expValEquals)('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
-      setDidRender(true);
-    }
+    setDidRender(true);
     onImageError && cardPreview && onImageError(cardPreview);
   };
   (0, _react.useEffect)(function () {

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.0.3",
+        packageName: "81.1.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineCard.js

@@ -120,7 +120,8 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose,
-        viewerOptions: viewerOptions
+        viewerOptions: viewerOptions,
+        fallbackMediaNameFetcher: (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
       }), document.body);
     }
     return null;

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,7 @@ var _globalScope = require("./globalScope/globalScope");
 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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.0.3";
+const packageVersion = "81.1.0";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/fileCard.js

@@ -4,6 +4,7 @@ import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useMergeRefs } from 'use-callback-ref';
 import { MediaCardError } from '../errors';
 import { isSSRPreview } from '../types';
@@ -79,7 +80,8 @@ export const FileCard = ({
   ssrItemDetails,
   ssrFileState,
   onError,
-  mediaViewerExtensions
+  mediaViewerExtensions,
+  fallbackMediaNameFetcher
 }) => {
   const {
     formatMessage
@@ -123,6 +125,9 @@ export const FileCard = ({
     includeHashForDuplicateFiles,
     initialFileState
   });
+  const [fallbackMediaName, setFallbackMediaName] = useState();
+  const fallbackMediaNameFetchAttempted = useRef(false);
+  const lastFetchedFileId = useRef();
   const prevFileState = usePrevious(fileState && isErrorFileState(fileState) ? undefined : fileState);
   const fileStateValue = useMemo(() => {
     if (fileState && !isErrorFileState(fileState)) {
@@ -131,6 +136,23 @@ export const FileCard = ({
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  useEffect(() => {
+    // Reset fetch state when the file identity changes
+    const currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
+    if (currentId && currentId !== lastFetchedFileId.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = false;
+      setFallbackMediaName(undefined);
+      lastFetchedFileId.current = currentId;
+    }
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = true;
+      fallbackMediaNameFetcher(fileStateValue.id).then(name => {
+        setFallbackMediaName(name);
+      }, () => {
+        // Silently ignore fetch failures
+      });
+    }
+  }, [fileStateValue, fallbackMediaNameFetcher]);
   const dateOverrides = useContext(DateOverrideContext);
   const overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
@@ -223,11 +245,12 @@ export const FileCard = ({
           return 'failed';
       }
     };
+    const resolvedFallbackName = expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if (fg('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -247,7 +270,7 @@ export const FileCard = ({
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name,
+          name: fileStateValue.name || resolvedFallbackName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -261,7 +284,7 @@ export const FileCard = ({
         };
       }
     }
-  }, [fileStateValue, identifier.id, ssrItemDetails]);
+  }, [fileStateValue, identifier.id, ssrItemDetails, fallbackMediaName]);
   const fileAttributes = useMemo(() => {
     return {
       fileMediatype: metadata.mediaType,
@@ -722,6 +745,7 @@ export const FileCard = ({
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
-    extensions: mediaViewerExtensions
+    extensions: mediaViewerExtensions,
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher
   }) : null, getSsrScriptProps && /*#__PURE__*/React.createElement("script", getSsrScriptProps()));
 };

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.0.3";
+const packageVersion = "81.1.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/imageRenderer/imageRendererV2.js

@@ -9,7 +9,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const baseStyles = null;
 const backgroundStyles = null;
 export const ImageRenderer = ({
@@ -40,7 +39,7 @@ export const ImageRenderer = ({
   const [resolvedDimensions, setResolvedDimensions] = useState(calculateInitialDimensions(resizeMode));
   useLayoutEffect(() => {
     if (!didRender && fg('platfrom_close_blindspot_for_img')) {
-      if (!cardPreview && expValEquals('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
+      if (!cardPreview) {
         return;
       }
       return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
@@ -53,9 +52,7 @@ export const ImageRenderer = ({
     cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
   };
   const onError = () => {
-    if (expValEquals('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
-      setDidRender(true);
-    }
+    setDidRender(true);
     onImageError && cardPreview && onImageError(cardPreview);
   };
   useEffect(() => {

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "81.0.3",
+      packageName: "81.1.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineCard.js

@@ -88,7 +88,8 @@ export const MediaInlineCardInternal = ({
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose,
-        viewerOptions: viewerOptions
+        viewerOptions: viewerOptions,
+        fallbackMediaNameFetcher: expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
       }), document.body);
     }
     return null;

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.0.3";
+const packageVersion = "81.1.0";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/fileCard.js

@@ -11,6 +11,7 @@ import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useMergeRefs } from 'use-callback-ref';
 import { MediaCardError } from '../errors';
 import { isSSRPreview } from '../types';
@@ -90,7 +91,8 @@ export var FileCard = function FileCard(_ref) {
     ssrItemDetails = _ref.ssrItemDetails,
     ssrFileState = _ref.ssrFileState,
     onError = _ref.onError,
-    mediaViewerExtensions = _ref.mediaViewerExtensions;
+    mediaViewerExtensions = _ref.mediaViewerExtensions,
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useState = useState(false),
@@ -142,6 +144,12 @@ export var FileCard = function FileCard(_ref) {
       initialFileState: initialFileState
     }),
     fileState = _useFileState.fileState;
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fallbackMediaName = _useState8[0],
+    setFallbackMediaName = _useState8[1];
+  var fallbackMediaNameFetchAttempted = useRef(false);
+  var lastFetchedFileId = useRef();
   var prevFileState = usePrevious(fileState && isErrorFileState(fileState) ? undefined : fileState);
   var fileStateValue = useMemo(function () {
     if (fileState && !isErrorFileState(fileState)) {
@@ -150,6 +158,23 @@ export var FileCard = function FileCard(_ref) {
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  useEffect(function () {
+    // Reset fetch state when the file identity changes
+    var currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
+    if (currentId && currentId !== lastFetchedFileId.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = false;
+      setFallbackMediaName(undefined);
+      lastFetchedFileId.current = currentId;
+    }
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+      fallbackMediaNameFetchAttempted.current = true;
+      fallbackMediaNameFetcher(fileStateValue.id).then(function (name) {
+        setFallbackMediaName(name);
+      }, function () {
+        // Silently ignore fetch failures
+      });
+    }
+  }, [fileStateValue, fallbackMediaNameFetcher]);
   var dateOverrides = useContext(DateOverrideContext);
   var overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
@@ -171,22 +196,22 @@ export var FileCard = function FileCard(_ref) {
 
   // Generate unique traceId for file
   var traceContext = useMemo(traceContextRetriever, []);
-  var _useState7 = useState('loading'),
-    _useState8 = _slicedToArray(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
-  var _useState9 = useState(false),
+  var _useState9 = useState('loading'),
     _useState0 = _slicedToArray(_useState9, 2),
-    isPlayingFile = _useState0[0],
-    setIsPlayingFile = _useState0[1];
+    status = _useState0[0],
+    setStatus = _useState0[1];
   var _useState1 = useState(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    shouldAutoplay = _useState10[0],
-    setShouldAutoplay = _useState10[1];
+    isPlayingFile = _useState10[0],
+    setIsPlayingFile = _useState10[1];
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    previewDidRender = _useState12[0],
-    setPreviewDidRender = _useState12[1];
+    shouldAutoplay = _useState12[0],
+    setShouldAutoplay = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    previewDidRender = _useState14[0],
+    setPreviewDidRender = _useState14[1];
   var mediaBlobUrlAttrs = useMemo(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -235,18 +260,18 @@ export var FileCard = function FileCard(_ref) {
     instanceId: internalOccurrenceKey,
     enabled: shouldSendPerformanceEvent
   });
-  var _useState13 = useState(),
-    _useState14 = _slicedToArray(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
+  var _useState15 = useState(),
+    _useState16 = _slicedToArray(_useState15, 2),
+    error = _useState16[0],
+    setError = _useState16[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  var _useState15 = useState(null),
-    _useState16 = _slicedToArray(_useState15, 2),
-    mediaViewerSelectedItem = _useState16[0],
-    setMediaViewerSelectedItem = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = useRef();
 
   // Store latest auth provider event (emit with fireOperationalEventRef)
@@ -262,11 +287,12 @@ export var FileCard = function FileCard(_ref) {
           return 'failed';
       }
     };
+    var resolvedFallbackName = expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if (fg('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -286,7 +312,7 @@ export var FileCard = function FileCard(_ref) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name,
+          name: fileStateValue.name || resolvedFallbackName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -300,7 +326,7 @@ export var FileCard = function FileCard(_ref) {
         };
       }
     }
-  }, [fileStateValue, identifier.id, ssrItemDetails]);
+  }, [fileStateValue, identifier.id, ssrItemDetails, fallbackMediaName]);
   var fileAttributes = useMemo(function () {
     return {
       fileMediatype: metadata.mediaType,
@@ -796,6 +822,7 @@ export var FileCard = function FileCard(_ref) {
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
-    extensions: mediaViewerExtensions
+    extensions: mediaViewerExtensions,
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher
   }) : null, getSsrScriptProps && /*#__PURE__*/React.createElement("script", getSsrScriptProps()));
 };

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/imageRenderer/imageRendererV2.js

@@ -13,7 +13,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var baseStyles = null;
 var backgroundStyles = null;
 export var ImageRenderer = function ImageRenderer(_ref) {
@@ -51,7 +50,7 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     setResolvedDimensions = _useState4[1];
   useLayoutEffect(function () {
     if (!didRender && fg('platfrom_close_blindspot_for_img')) {
-      if (!cardPreview && expValEquals('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
+      if (!cardPreview) {
         return;
       }
       return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
@@ -64,9 +63,7 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
   };
   var onError = function onError() {
-    if (expValEquals('cc_editor_ttvc_media_hold_fix', 'isEnabled', true)) {
-      setDidRender(true);
-    }
+    setDidRender(true);
     onImageError && cardPreview && onImageError(cardPreview);
   };
   useEffect(function () {

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.0.3",
+        packageName: "81.1.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineCard.js

@@ -111,7 +111,8 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose,
-        viewerOptions: viewerOptions
+        viewerOptions: viewerOptions,
+        fallbackMediaNameFetcher: expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
       }), document.body);
     }
     return null;

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.0.3";
+var packageVersion = "81.1.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/fileCard.d.ts

@@ -77,5 +77,11 @@ export interface FileCardProps extends CardEventProps {
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
+    /**
+     * Optional fallback fetcher to retrieve the media filename from another service.
+     * Workaround for #hot-301450 where media service is missing filenames for DC -> Cloud migrated media.
+     * Receives the file ID and should resolve to the filename string.
+     */
+    readonly fallbackMediaNameFetcher?: (id: string) => Promise<string>;
 }
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, }: FileCardProps) => React.JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, fallbackMediaNameFetcher, }: FileCardProps) => React.JSX.Element;

package/dist/types/types.d.ts

@@ -124,6 +124,12 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
+    /**
+     * Optional fallback fetcher to retrieve the media filename from another service.
+     * Workaround for #hot-301450 where media service is missing filenames for DC -> Cloud migrated media.
+     * Receives the file ID and should resolve to the filename string.
+     */
+    readonly fallbackMediaNameFetcher?: (id: string) => Promise<string>;
 }
 export interface CardState {
     status: CardStatus;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "81.0.4",
+	"version": "81.1.1",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,14 +43,14 @@
 		"@atlaskit/media-state": "^3.0.0",
 		"@atlaskit/media-svg": "^3.0.0",
 		"@atlaskit/media-ui": "^30.1.0",
-		"@atlaskit/media-viewer": "^54.0.0",
+		"@atlaskit/media-viewer": "^54.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/progress-bar": "^5.0.0",
 		"@atlaskit/react-ufo": "^7.1.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.0.0",
+		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",