@atlaskit/media-viewer 54.3.7 → 54.4.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/media-viewer
 
+## 54.4.0
+
+### Minor Changes
+
+- [`ecf905d329e42`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ecf905d329e42) -
+  Add diagnostic context to the imageviewer-src-onerror failure (errorDetail now report mimeType,
+  decode dimensions and failed source type instead of unknown)
+- [`a654b7573d0a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a654b7573d0a2) -
+  Route image MIME types that the browser cannot natively decode (e.g. HEIC/HEIF, PSD, TIFF) to the
+  unsupported/download preview view instead of a guaranteed-failing `<img>`. These are reported via
+  the `previewUnsupported` analytics event rather than `loadFailed`. Behind the
+  `platform_media_unsupported_mime_routing` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 54.3.8
+
+### Patch Changes
+
+- [`bea4da79c297d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bea4da79c297d) -
+  [ux] EDITOR-7679 use fallback media name for filename in download
+- Updated dependencies
+
 ## 54.3.7
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "54.3.6";
+var packageVersion = exports.packageVersion = "54.4.0";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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-viewer";
-var packageVersion = "54.3.6";
+var packageVersion = "54.4.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/download.js

@@ -22,6 +22,7 @@ var _download2 = require("./analytics/events/operational/download");
 var _analytics = require("./analytics");
 var _failedPreviewDownloadButtonClicked = require("./analytics/events/ui/failedPreviewDownloadButtonClicked");
 var _styleWrappers = require("./styleWrappers");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _errors = require("./errors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _abuseModal = require("@atlaskit/media-ui/abuseModal");
@@ -56,13 +57,14 @@ function DownloadButton(_ref) {
 }
 var createItemDownloader = function createItemDownloader(file, mediaClient, options) {
   return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var collectionName, traceContext, createAnalyticsEvent, id, name;
+    var collectionName, traceContext, createAnalyticsEvent, fallbackMediaName, id, fileStateName, name;
     return _regenerator.default.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          collectionName = options.collectionName, traceContext = options.traceContext, createAnalyticsEvent = options.createAnalyticsEvent;
+          collectionName = options.collectionName, traceContext = options.traceContext, createAnalyticsEvent = options.createAnalyticsEvent, fallbackMediaName = options.fallbackMediaName;
           id = file.id;
-          name = !(0, _mediaClient.isErrorFileState)(file) ? file.name : undefined;
+          fileStateName = !(0, _mediaClient.isErrorFileState)(file) ? file.name : undefined;
+          name = fileStateName || ((0, _expValEquals.expValEquals)('platform_editor_media_download_fallback_name', 'isEnabled', true) ? fallbackMediaName : undefined);
           mediaClient.file.downloadBinary(id, name, collectionName, traceContext).then(function () {
             (0, _analytics.fireAnalytics)((0, _download2.createDownloadSucceededEventPayload)(file, traceContext), createAnalyticsEvent);
           }).catch(function (e) {
@@ -94,7 +96,8 @@ var DownloadItem = function DownloadItem(_ref3) {
     analyticspayload = _ref3.analyticspayload,
     traceContext = _ref3.traceContext,
     iconBefore = _ref3.iconBefore,
-    children = _ref3.children;
+    children = _ref3.children,
+    fallbackMediaName = _ref3.fallbackMediaName;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isAbuseModalOpen = _useState2[0],
@@ -108,7 +111,8 @@ var DownloadItem = function DownloadItem(_ref3) {
   var itemDownloader = createItemDownloader(fileState, mediaClient, {
     collectionName: collectionName,
     createAnalyticsEvent: createAnalyticsEvent,
-    traceContext: traceContext
+    traceContext: traceContext,
+    fallbackMediaName: fallbackMediaName
   });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldRenderAbuseModal && /*#__PURE__*/_react.default.createElement(_abuseModal.AbuseModal, {
     isOpen: isAbuseModalOpen,
@@ -154,7 +158,8 @@ var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDown
   var state = _ref5.state,
     mediaClient = _ref5.mediaClient,
     identifier = _ref5.identifier,
-    traceContext = _ref5.traceContext;
+    traceContext = _ref5.traceContext,
+    fallbackMediaName = _ref5.fallbackMediaName;
   // TODO [MS-1731]: make it work for external files as well
   if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
     return null;
@@ -168,7 +173,8 @@ var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDown
     mediaClient: mediaClient,
     collectionName: identifier.collectionName,
     traceContext: traceContext,
-    iconBefore: downloadIcon
+    iconBefore: downloadIcon,
+    fallbackMediaName: fallbackMediaName
   });
 };
 var DisabledToolbarDownloadButton = exports.DisabledToolbarDownloadButton = /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {

package/dist/cjs/errorMessage.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getErrorMessageFromError = exports.errorReasonToMessages = exports.default = exports.ErrorMessage = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
@@ -51,11 +51,12 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
       var _this$props = this.props,
         formatMessage = _this$props.intl.formatMessage,
         error = _this$props.error;
-      // Non-ZIP archives (e.g. RAR, TAR, 7z) aren't a load failure - the
+      // Non-ZIP archives (e.g. RAR, TAR, 7z) and image MIME types that no browser
+      // can natively decode (e.g. HEIC/HEIF, PSD, TIFF) aren't load failures - the
       // browser-based viewer simply can't preview them. Show a dedicated
       // "Unsupported file format" heading instead of the generic
       // "Something went wrong" copy.
-      if ((0, _errors.getPrimaryErrorReason)(error) === 'archiveviewer-not-zip') {
+      if ((0, _errors.getPrimaryErrorReason)(error) === 'archiveviewer-not-zip' || (0, _errors.getPrimaryErrorReason)(error) === 'imageviewer-unsupported-mime') {
         return {
           icon: errorLoadingFileImage(formatMessage),
           messages: [_mediaUi.messages.unsupported_file_format, _mediaUi.messages.archive_format_not_supported]
@@ -95,6 +96,10 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
         (0, _ufoExperiences.failMediaFileUfoExperience)(failMediaFileUfoExperiencePayload);
       }
     }
+
+    // Error reasons that represent a format the browser-based viewer simply can't
+    // preview (not a load failure). These are reported as the informational,
+    // non-SLI `previewUnsupported` metric instead of `loadFailed`.
   }, {
     key: "render",
     value: function render() {
@@ -112,10 +117,16 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
       })), this.props.children);
     }
   }], [{
+    key: "isPreviewUnsupported",
+    value: function isPreviewUnsupported(error) {
+      return ErrorMessage.previewUnsupportedReasons.includes((0, _errors.getPrimaryErrorReason)(error));
+    }
+  }, {
     key: "getEventPayload",
     value: function getEventPayload(error, fileId, fileState, traceContext) {
-      if (fileState && (0, _errors.getPrimaryErrorReason)(error) === 'unsupported') {
-        // this is not an SLI, its just a useful metric for unsupported
+      if (fileState && ErrorMessage.isPreviewUnsupported(error)) {
+        // this is not an SLI (load failure), its just a useful metric for files
+        // whose format the browser-based viewer can't preview.
         return (0, _previewUnsupported.createPreviewUnsupportedEvent)(fileState);
       } else {
         return (0, _loadFailed.createLoadFailedEvent)(fileId, error, fileState, traceContext);
@@ -123,5 +134,6 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
     }
   }]);
 }(_react.default.Component); // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+(0, _defineProperty2.default)(ErrorMessage, "previewUnsupportedReasons", ['unsupported', 'imageviewer-unsupported-mime']);
 var ErroMsg = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntl.injectIntl)(ErrorMessage));
 var _default = exports.default = ErroMsg;

package/dist/cjs/errors.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaViewerError = exports.ArchiveViewerError = void 0;
+exports.buildImgErrorDiagnostics = buildImgErrorDiagnostics;
+exports.classifyFailedSrc = classifyFailedSrc;
 exports.getErrorDetail = getErrorDetail;
 exports.getPrimaryErrorReason = getPrimaryErrorReason;
 exports.getRequestMetadata = getRequestMetadata;
 exports.getSecondaryErrorReason = getSecondaryErrorReason;
 exports.isArchiveViewerError = isArchiveViewerError;
 exports.isMediaViewerError = isMediaViewerError;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -18,6 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
 var _mediaClient = require("@atlaskit/media-client");
+var _isMimeTypeSupportedByBrowser = require("@atlaskit/media-common/isMimeTypeSupportedByBrowser");
 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 MediaViewerError = exports.MediaViewerError = /*#__PURE__*/function (_Error) {
@@ -91,4 +95,64 @@ function getRequestMetadata(error) {
   if ((0, _mediaClient.isCommonMediaClientError)(secondaryError)) {
     return secondaryError.metadata;
   }
+}
+
+/**
+ * Classifies the failed `<img>` source into a coarse, non-sensitive enum so we can
+ * tell which kind of source failed without leaking the (potentially signed) url.
+ */
+function classifyFailedSrc(currentSrc) {
+  if (!currentSrc) {
+    return 'unknown';
+  }
+  if (currentSrc.startsWith('blob:')) {
+    return 'blob';
+  }
+  if (currentSrc.startsWith('data:')) {
+    return 'data';
+  }
+  if (currentSrc.startsWith('http:') || currentSrc.startsWith('https:')) {
+    return 'remote';
+  }
+  return 'unknown';
+}
+
+/**
+ * Builds a descriptive `secondaryError` for an `<img>` onerror so the downstream
+ * `loadFailed` analytics event reports a meaningful `error`/`errorDetail` instead of
+ * the opaque `unknown`/`unknown`. The returned Error's `message` captures decode
+ * diagnostics as a comma-separated `key=value` string (undefined fields are omitted):
+ * - whether the browser decoded any pixels (`naturalWidth`/`naturalHeight === 0`)
+ * - the file MIME type and whether it is natively browser-decodable
+ * - which source failed (preview blob vs. original-binary/HD url)
+ *
+ * @example
+ * // message:
+ * "mimeType=image/png, isBrowserDecodable=true, naturalWidth=0, naturalHeight=0, failedSrcType=blob"
+ */
+function buildImgErrorDiagnostics(item, event) {
+  var img = event === null || event === void 0 ? void 0 : event.currentTarget;
+  var mimeType = item && !(0, _mediaClient.isErrorFileState)(item) ? item.mimeType : undefined;
+  var isBrowserDecodable = !!mimeType && (0, _isMimeTypeSupportedByBrowser.isImageMimeTypeSupportedByBrowser)(mimeType);
+  var naturalWidth = img === null || img === void 0 ? void 0 : img.naturalWidth;
+  var naturalHeight = img === null || img === void 0 ? void 0 : img.naturalHeight;
+  var failedSrcType = classifyFailedSrc(img === null || img === void 0 ? void 0 : img.currentSrc);
+  var diagnostics = {
+    mimeType: mimeType,
+    isBrowserDecodable: isBrowserDecodable,
+    naturalWidth: naturalWidth,
+    naturalHeight: naturalHeight,
+    failedSrcType: failedSrcType
+  };
+  var detail = Object.entries(diagnostics).filter(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+      value = _ref4[1];
+    return value !== undefined;
+  }).map(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    return "".concat(key, "=").concat(value);
+  }).join(', ');
+  return new Error(detail);
 }

package/dist/cjs/header.js

@@ -205,7 +205,8 @@ var Header = exports.Header = function Header(_ref) {
         state: item,
         identifier: identifier,
         mediaClient: mediaClient,
-        traceContext: traceContext
+        traceContext: traceContext,
+        fallbackMediaName: fallbackMediaName
       });
     }
   })));

package/dist/cjs/viewers/image/index.js

@@ -17,6 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaUi = require("@atlaskit/media-ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _domain = require("../../domain");
 var _errors = require("../../errors");
 var _interactiveImg = require("./interactive-img");
@@ -43,8 +44,14 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
       _this.props.onLoad();
       _this.onMediaDisplayed();
     });
-    (0, _defineProperty2.default)(_this, "onImgError", function () {
-      _this.props.onError(new _errors.MediaViewerError('imageviewer-src-onerror'));
+    (0, _defineProperty2.default)(_this, "onImgError", function (event) {
+      var secondaryError;
+      try {
+        secondaryError = (0, _errors.buildImgErrorDiagnostics)(_this.props.item, event);
+      } catch (_unused) {
+        secondaryError = undefined;
+      }
+      _this.props.onError(new _errors.MediaViewerError('imageviewer-src-onerror', secondaryError));
     });
     return _this;
   }
@@ -60,7 +67,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, clientId, preview, _yield$preview, value, origin, item, response, imgError, _t, _t2, _t3;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, clientId, preview, _yield$preview, value, origin, item, response, unsupportedError, imgError, _t, _t2, _t3;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -142,7 +149,11 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
             case 14:
               if (!(!isLocalFileReference &&
               // objectUrl at this point is binary file already
-              !(0, _mediaClient.isErrorFileState)(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image' && (0, _mediaCommon.isImageMimeTypeSupportedByBrowser)(fileState.mimeType))) {
+              !(0, _mediaClient.isErrorFileState)(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image')) {
+                _context.next = 17;
+                break;
+              }
+              if (!(0, _mediaCommon.isImageMimeTypeSupportedByBrowser)(fileState.mimeType)) {
                 _context.next = 16;
                 break;
               }
@@ -150,7 +161,25 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               return mediaClient.file.getFileBinaryURL(fileState.id, collectionName);
             case 15:
               originalBinaryImageUrl = _context.sent;
+              _context.next = 17;
+              break;
             case 16:
+              if (!(0, _platformFeatureFlags.fg)('platform_media_unsupported_mime_routing')) {
+                _context.next = 17;
+                break;
+              }
+              // Route unsupported MIME types browser can't natively decode straight to the
+              // unsupported/download view instead of handing a guaranteed-undecodable blob
+              // to <img>, which would only ever fire onerror and
+              // surface as an opaque `imageviewer-src-onerror` failure.
+              this.revokeObjectUrl(objectUrl);
+              unsupportedError = new _errors.MediaViewerError('imageviewer-unsupported-mime');
+              this.setState({
+                content: _domain.Outcome.failed(unsupportedError)
+              });
+              this.props.onError(unsupportedError);
+              return _context.abrupt("return");
+            case 17:
               this.setState({
                 content: _domain.Outcome.successful({
                   objectUrl: objectUrl,
@@ -159,10 +188,10 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                   clientId: clientId
                 })
               });
-              _context.next = 18;
+              _context.next = 19;
               break;
-            case 17:
-              _context.prev = 17;
+            case 18:
+              _context.prev = 18;
               _t3 = _context["catch"](2);
               // TODO : properly handle aborted requests (MS-2843)
               if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
@@ -172,11 +201,11 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 });
                 this.props.onError(imgError);
               }
-            case 18:
+            case 19:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 17], [3, 5]]);
+        }, _callee, this, [[2, 18], [3, 5]]);
       }));
       function init() {
         return _init.apply(this, arguments);

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "54.3.6";
+const packageVersion = "54.4.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -3,7 +3,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "54.3.6";
+const packageVersion = "54.4.0";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/download.js

@@ -10,6 +10,7 @@ import { createDownloadFailedEventPayload, createDownloadSucceededEventPayload }
 import { fireAnalytics } from './analytics';
 import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/events/ui/failedPreviewDownloadButtonClicked';
 import { DownloadButtonWrapper } from './styleWrappers';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { MediaViewerError } from './errors';
 import Tooltip from '@atlaskit/tooltip';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
@@ -45,10 +46,12 @@ const createItemDownloader = (file, mediaClient, options) => async () => {
   const {
     collectionName,
     traceContext,
-    createAnalyticsEvent
+    createAnalyticsEvent,
+    fallbackMediaName
   } = options;
   const id = file.id;
-  const name = !isErrorFileState(file) ? file.name : undefined;
+  const fileStateName = !isErrorFileState(file) ? file.name : undefined;
+  const name = fileStateName || (expValEquals('platform_editor_media_download_fallback_name', 'isEnabled', true) ? fallbackMediaName : undefined);
   mediaClient.file.downloadBinary(id, name, collectionName, traceContext).then(() => {
     fireAnalytics(createDownloadSucceededEventPayload(file, traceContext), createAnalyticsEvent);
   }).catch(e => {
@@ -75,7 +78,8 @@ const DownloadItem = ({
   analyticspayload,
   traceContext,
   iconBefore,
-  children
+  children,
+  fallbackMediaName
 }) => {
   const [isAbuseModalOpen, setIsAbuseModalOpen] = useState(false);
   const {
@@ -89,7 +93,8 @@ const DownloadItem = ({
   const itemDownloader = createItemDownloader(fileState, mediaClient, {
     collectionName: collectionName,
     createAnalyticsEvent,
-    traceContext
+    traceContext,
+    fallbackMediaName
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderAbuseModal && /*#__PURE__*/React.createElement(AbuseModal, {
     isOpen: isAbuseModalOpen,
@@ -134,7 +139,8 @@ export const ToolbarDownloadButton = ({
   state,
   mediaClient,
   identifier,
-  traceContext
+  traceContext,
+  fallbackMediaName
 }) => {
   // TODO [MS-1731]: make it work for external files as well
   if (isExternalImageIdentifier(identifier)) {
@@ -149,7 +155,8 @@ export const ToolbarDownloadButton = ({
     mediaClient: mediaClient,
     collectionName: identifier.collectionName,
     traceContext: traceContext,
-    iconBefore: downloadIcon
+    iconBefore: downloadIcon,
+    fallbackMediaName: fallbackMediaName
   });
 };
 export const DisabledToolbarDownloadButton = /*#__PURE__*/React.createElement(MediaButton, {

package/dist/es2019/errorMessage.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { messages as i18nMessages } from '@atlaskit/media-ui';
@@ -26,11 +27,12 @@ export class ErrorMessage extends React.Component {
       },
       error
     } = this.props;
-    // Non-ZIP archives (e.g. RAR, TAR, 7z) aren't a load failure - the
+    // Non-ZIP archives (e.g. RAR, TAR, 7z) and image MIME types that no browser
+    // can natively decode (e.g. HEIC/HEIF, PSD, TIFF) aren't load failures - the
     // browser-based viewer simply can't preview them. Show a dedicated
     // "Unsupported file format" heading instead of the generic
     // "Something went wrong" copy.
-    if (getPrimaryErrorReason(error) === 'archiveviewer-not-zip') {
+    if (getPrimaryErrorReason(error) === 'archiveviewer-not-zip' || getPrimaryErrorReason(error) === 'imageviewer-unsupported-mime') {
       return {
         icon: errorLoadingFileImage(formatMessage),
         messages: [i18nMessages.unsupported_file_format, i18nMessages.archive_format_not_supported]
@@ -73,9 +75,18 @@ export class ErrorMessage extends React.Component {
       failMediaFileUfoExperience(failMediaFileUfoExperiencePayload);
     }
   }
+
+  // Error reasons that represent a format the browser-based viewer simply can't
+  // preview (not a load failure). These are reported as the informational,
+  // non-SLI `previewUnsupported` metric instead of `loadFailed`.
+
+  static isPreviewUnsupported(error) {
+    return ErrorMessage.previewUnsupportedReasons.includes(getPrimaryErrorReason(error));
+  }
   static getEventPayload(error, fileId, fileState, traceContext) {
-    if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
-      // this is not an SLI, its just a useful metric for unsupported
+    if (fileState && ErrorMessage.isPreviewUnsupported(error)) {
+      // this is not an SLI (load failure), its just a useful metric for files
+      // whose format the browser-based viewer can't preview.
       return createPreviewUnsupportedEvent(fileState);
     } else {
       return createLoadFailedEvent(fileId, error, fileState, traceContext);
@@ -95,5 +106,6 @@ export class ErrorMessage extends React.Component {
 }
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+_defineProperty(ErrorMessage, "previewUnsupportedReasons", ['unsupported', 'imageviewer-unsupported-mime']);
 const ErroMsg = withAnalyticsEvents()(injectIntl(ErrorMessage));
 export default ErroMsg;

package/dist/es2019/errors.js

@@ -1,4 +1,5 @@
-import { isCommonMediaClientError } from '@atlaskit/media-client';
+import { isCommonMediaClientError, isErrorFileState } from '@atlaskit/media-client';
+import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common/isMimeTypeSupportedByBrowser';
 export class MediaViewerError extends Error {
   constructor(primaryReason, secondaryError) {
     super(primaryReason);
@@ -64,4 +65,55 @@ export function getRequestMetadata(error) {
   if (isCommonMediaClientError(secondaryError)) {
     return secondaryError.metadata;
   }
+}
+
+/**
+ * Classifies the failed `<img>` source into a coarse, non-sensitive enum so we can
+ * tell which kind of source failed without leaking the (potentially signed) url.
+ */
+export function classifyFailedSrc(currentSrc) {
+  if (!currentSrc) {
+    return 'unknown';
+  }
+  if (currentSrc.startsWith('blob:')) {
+    return 'blob';
+  }
+  if (currentSrc.startsWith('data:')) {
+    return 'data';
+  }
+  if (currentSrc.startsWith('http:') || currentSrc.startsWith('https:')) {
+    return 'remote';
+  }
+  return 'unknown';
+}
+
+/**
+ * Builds a descriptive `secondaryError` for an `<img>` onerror so the downstream
+ * `loadFailed` analytics event reports a meaningful `error`/`errorDetail` instead of
+ * the opaque `unknown`/`unknown`. The returned Error's `message` captures decode
+ * diagnostics as a comma-separated `key=value` string (undefined fields are omitted):
+ * - whether the browser decoded any pixels (`naturalWidth`/`naturalHeight === 0`)
+ * - the file MIME type and whether it is natively browser-decodable
+ * - which source failed (preview blob vs. original-binary/HD url)
+ *
+ * @example
+ * // message:
+ * "mimeType=image/png, isBrowserDecodable=true, naturalWidth=0, naturalHeight=0, failedSrcType=blob"
+ */
+export function buildImgErrorDiagnostics(item, event) {
+  const img = event === null || event === void 0 ? void 0 : event.currentTarget;
+  const mimeType = item && !isErrorFileState(item) ? item.mimeType : undefined;
+  const isBrowserDecodable = !!mimeType && isImageMimeTypeSupportedByBrowser(mimeType);
+  const naturalWidth = img === null || img === void 0 ? void 0 : img.naturalWidth;
+  const naturalHeight = img === null || img === void 0 ? void 0 : img.naturalHeight;
+  const failedSrcType = classifyFailedSrc(img === null || img === void 0 ? void 0 : img.currentSrc);
+  const diagnostics = {
+    mimeType,
+    isBrowserDecodable,
+    naturalWidth,
+    naturalHeight,
+    failedSrcType
+  };
+  const detail = Object.entries(diagnostics).filter(([, value]) => value !== undefined).map(([key, value]) => `${key}=${value}`).join(', ');
+  return new Error(detail);
 }

package/dist/es2019/header.js

@@ -181,7 +181,8 @@ export const Header = ({
       state: item,
       identifier: identifier,
       mediaClient: mediaClient,
-      traceContext: traceContext
+      traceContext: traceContext,
+      fallbackMediaName: fallbackMediaName
     })
   })));
 };

package/dist/es2019/viewers/image/index.js

@@ -3,8 +3,9 @@ import React from 'react';
 import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Outcome } from '../../domain';
-import { MediaViewerError } from '../../errors';
+import { buildImgErrorDiagnostics, MediaViewerError } from '../../errors';
 import { InteractiveImg } from './interactive-img';
 import { BaseViewer } from '../base-viewer';
 function processedFileStateToMediaItem(file) {
@@ -22,8 +23,14 @@ export class ImageViewer extends BaseViewer {
       this.props.onLoad();
       this.onMediaDisplayed();
     });
-    _defineProperty(this, "onImgError", () => {
-      this.props.onError(new MediaViewerError('imageviewer-src-onerror'));
+    _defineProperty(this, "onImgError", event => {
+      let secondaryError;
+      try {
+        secondaryError = buildImgErrorDiagnostics(this.props.item, event);
+      } catch {
+        secondaryError = undefined;
+      }
+      this.props.onError(new MediaViewerError('imageviewer-src-onerror', secondaryError));
     });
   }
   get initialState() {
@@ -86,8 +93,22 @@ export class ImageViewer extends BaseViewer {
       }
       if (!isLocalFileReference &&
       // objectUrl at this point is binary file already
-      !isErrorFileState(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image' && isImageMimeTypeSupportedByBrowser(fileState.mimeType)) {
-        originalBinaryImageUrl = await mediaClient.file.getFileBinaryURL(fileState.id, collectionName);
+      !isErrorFileState(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image') {
+        if (isImageMimeTypeSupportedByBrowser(fileState.mimeType)) {
+          originalBinaryImageUrl = await mediaClient.file.getFileBinaryURL(fileState.id, collectionName);
+        } else if (fg('platform_media_unsupported_mime_routing')) {
+          // Route unsupported MIME types browser can't natively decode straight to the
+          // unsupported/download view instead of handing a guaranteed-undecodable blob
+          // to <img>, which would only ever fire onerror and
+          // surface as an opaque `imageviewer-src-onerror` failure.
+          this.revokeObjectUrl(objectUrl);
+          const unsupportedError = new MediaViewerError('imageviewer-unsupported-mime');
+          this.setState({
+            content: Outcome.failed(unsupportedError)
+          });
+          this.props.onError(unsupportedError);
+          return;
+        }
       }
       this.setState({
         content: Outcome.successful({

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "54.3.6";
+var packageVersion = "54.4.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -6,7 +6,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "54.3.6";
+var packageVersion = "54.4.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/download.js

@@ -15,6 +15,7 @@ import { createDownloadFailedEventPayload, createDownloadSucceededEventPayload }
 import { fireAnalytics } from './analytics';
 import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/events/ui/failedPreviewDownloadButtonClicked';
 import { DownloadButtonWrapper } from './styleWrappers';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { MediaViewerError } from './errors';
 import Tooltip from '@atlaskit/tooltip';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
@@ -47,13 +48,14 @@ function DownloadButton(_ref) {
 }
 var createItemDownloader = function createItemDownloader(file, mediaClient, options) {
   return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var collectionName, traceContext, createAnalyticsEvent, id, name;
+    var collectionName, traceContext, createAnalyticsEvent, fallbackMediaName, id, fileStateName, name;
     return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          collectionName = options.collectionName, traceContext = options.traceContext, createAnalyticsEvent = options.createAnalyticsEvent;
+          collectionName = options.collectionName, traceContext = options.traceContext, createAnalyticsEvent = options.createAnalyticsEvent, fallbackMediaName = options.fallbackMediaName;
           id = file.id;
-          name = !isErrorFileState(file) ? file.name : undefined;
+          fileStateName = !isErrorFileState(file) ? file.name : undefined;
+          name = fileStateName || (expValEquals('platform_editor_media_download_fallback_name', 'isEnabled', true) ? fallbackMediaName : undefined);
           mediaClient.file.downloadBinary(id, name, collectionName, traceContext).then(function () {
             fireAnalytics(createDownloadSucceededEventPayload(file, traceContext), createAnalyticsEvent);
           }).catch(function (e) {
@@ -85,7 +87,8 @@ var DownloadItem = function DownloadItem(_ref3) {
     analyticspayload = _ref3.analyticspayload,
     traceContext = _ref3.traceContext,
     iconBefore = _ref3.iconBefore,
-    children = _ref3.children;
+    children = _ref3.children,
+    fallbackMediaName = _ref3.fallbackMediaName;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAbuseModalOpen = _useState2[0],
@@ -99,7 +102,8 @@ var DownloadItem = function DownloadItem(_ref3) {
   var itemDownloader = createItemDownloader(fileState, mediaClient, {
     collectionName: collectionName,
     createAnalyticsEvent: createAnalyticsEvent,
-    traceContext: traceContext
+    traceContext: traceContext,
+    fallbackMediaName: fallbackMediaName
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderAbuseModal && /*#__PURE__*/React.createElement(AbuseModal, {
     isOpen: isAbuseModalOpen,
@@ -145,7 +149,8 @@ export var ToolbarDownloadButton = function ToolbarDownloadButton(_ref5) {
   var state = _ref5.state,
     mediaClient = _ref5.mediaClient,
     identifier = _ref5.identifier,
-    traceContext = _ref5.traceContext;
+    traceContext = _ref5.traceContext,
+    fallbackMediaName = _ref5.fallbackMediaName;
   // TODO [MS-1731]: make it work for external files as well
   if (isExternalImageIdentifier(identifier)) {
     return null;
@@ -159,7 +164,8 @@ export var ToolbarDownloadButton = function ToolbarDownloadButton(_ref5) {
     mediaClient: mediaClient,
     collectionName: identifier.collectionName,
     traceContext: traceContext,
-    iconBefore: downloadIcon
+    iconBefore: downloadIcon,
+    fallbackMediaName: fallbackMediaName
   });
 };
 export var DisabledToolbarDownloadButton = /*#__PURE__*/React.createElement(MediaButton, {

package/dist/esm/errorMessage.js

@@ -1,9 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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 = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -44,11 +44,12 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         formatMessage = _this$props.intl.formatMessage,
         error = _this$props.error;
-      // Non-ZIP archives (e.g. RAR, TAR, 7z) aren't a load failure - the
+      // Non-ZIP archives (e.g. RAR, TAR, 7z) and image MIME types that no browser
+      // can natively decode (e.g. HEIC/HEIF, PSD, TIFF) aren't load failures - the
       // browser-based viewer simply can't preview them. Show a dedicated
       // "Unsupported file format" heading instead of the generic
       // "Something went wrong" copy.
-      if (getPrimaryErrorReason(error) === 'archiveviewer-not-zip') {
+      if (getPrimaryErrorReason(error) === 'archiveviewer-not-zip' || getPrimaryErrorReason(error) === 'imageviewer-unsupported-mime') {
         return {
           icon: errorLoadingFileImage(formatMessage),
           messages: [i18nMessages.unsupported_file_format, i18nMessages.archive_format_not_supported]
@@ -88,6 +89,10 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         failMediaFileUfoExperience(failMediaFileUfoExperiencePayload);
       }
     }
+
+    // Error reasons that represent a format the browser-based viewer simply can't
+    // preview (not a load failure). These are reported as the informational,
+    // non-SLI `previewUnsupported` metric instead of `loadFailed`.
   }, {
     key: "render",
     value: function render() {
@@ -105,10 +110,16 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       })), this.props.children);
     }
   }], [{
+    key: "isPreviewUnsupported",
+    value: function isPreviewUnsupported(error) {
+      return ErrorMessage.previewUnsupportedReasons.includes(getPrimaryErrorReason(error));
+    }
+  }, {
     key: "getEventPayload",
     value: function getEventPayload(error, fileId, fileState, traceContext) {
-      if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
-        // this is not an SLI, its just a useful metric for unsupported
+      if (fileState && ErrorMessage.isPreviewUnsupported(error)) {
+        // this is not an SLI (load failure), its just a useful metric for files
+        // whose format the browser-based viewer can't preview.
         return createPreviewUnsupportedEvent(fileState);
       } else {
         return createLoadFailedEvent(fileId, error, fileState, traceContext);
@@ -118,5 +129,6 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+_defineProperty(ErrorMessage, "previewUnsupportedReasons", ['unsupported', 'imageviewer-unsupported-mime']);
 var ErroMsg = withAnalyticsEvents()(injectIntl(ErrorMessage));
 export default ErroMsg;

package/dist/esm/errors.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -6,7 +7,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
-import { isCommonMediaClientError } from '@atlaskit/media-client';
+import { isCommonMediaClientError, isErrorFileState } from '@atlaskit/media-client';
+import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common/isMimeTypeSupportedByBrowser';
 export var MediaViewerError = /*#__PURE__*/function (_Error) {
   function MediaViewerError(primaryReason, secondaryError) {
     var _this;
@@ -78,4 +80,64 @@ export function getRequestMetadata(error) {
   if (isCommonMediaClientError(secondaryError)) {
     return secondaryError.metadata;
   }
+}
+
+/**
+ * Classifies the failed `<img>` source into a coarse, non-sensitive enum so we can
+ * tell which kind of source failed without leaking the (potentially signed) url.
+ */
+export function classifyFailedSrc(currentSrc) {
+  if (!currentSrc) {
+    return 'unknown';
+  }
+  if (currentSrc.startsWith('blob:')) {
+    return 'blob';
+  }
+  if (currentSrc.startsWith('data:')) {
+    return 'data';
+  }
+  if (currentSrc.startsWith('http:') || currentSrc.startsWith('https:')) {
+    return 'remote';
+  }
+  return 'unknown';
+}
+
+/**
+ * Builds a descriptive `secondaryError` for an `<img>` onerror so the downstream
+ * `loadFailed` analytics event reports a meaningful `error`/`errorDetail` instead of
+ * the opaque `unknown`/`unknown`. The returned Error's `message` captures decode
+ * diagnostics as a comma-separated `key=value` string (undefined fields are omitted):
+ * - whether the browser decoded any pixels (`naturalWidth`/`naturalHeight === 0`)
+ * - the file MIME type and whether it is natively browser-decodable
+ * - which source failed (preview blob vs. original-binary/HD url)
+ *
+ * @example
+ * // message:
+ * "mimeType=image/png, isBrowserDecodable=true, naturalWidth=0, naturalHeight=0, failedSrcType=blob"
+ */
+export function buildImgErrorDiagnostics(item, event) {
+  var img = event === null || event === void 0 ? void 0 : event.currentTarget;
+  var mimeType = item && !isErrorFileState(item) ? item.mimeType : undefined;
+  var isBrowserDecodable = !!mimeType && isImageMimeTypeSupportedByBrowser(mimeType);
+  var naturalWidth = img === null || img === void 0 ? void 0 : img.naturalWidth;
+  var naturalHeight = img === null || img === void 0 ? void 0 : img.naturalHeight;
+  var failedSrcType = classifyFailedSrc(img === null || img === void 0 ? void 0 : img.currentSrc);
+  var diagnostics = {
+    mimeType: mimeType,
+    isBrowserDecodable: isBrowserDecodable,
+    naturalWidth: naturalWidth,
+    naturalHeight: naturalHeight,
+    failedSrcType: failedSrcType
+  };
+  var detail = Object.entries(diagnostics).filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      value = _ref4[1];
+    return value !== undefined;
+  }).map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    return "".concat(key, "=").concat(value);
+  }).join(', ');
+  return new Error(detail);
 }

package/dist/esm/header.js

@@ -196,7 +196,8 @@ export var Header = function Header(_ref) {
         state: item,
         identifier: identifier,
         mediaClient: mediaClient,
-        traceContext: traceContext
+        traceContext: traceContext,
+        fallbackMediaName: fallbackMediaName
       });
     }
   })));

package/dist/esm/viewers/image/index.js

@@ -12,8 +12,9 @@ import React from 'react';
 import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Outcome } from '../../domain';
-import { MediaViewerError } from '../../errors';
+import { buildImgErrorDiagnostics, MediaViewerError } from '../../errors';
 import { InteractiveImg } from './interactive-img';
 import { BaseViewer } from '../base-viewer';
 function processedFileStateToMediaItem(file) {
@@ -36,8 +37,14 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
       _this.props.onLoad();
       _this.onMediaDisplayed();
     });
-    _defineProperty(_this, "onImgError", function () {
-      _this.props.onError(new MediaViewerError('imageviewer-src-onerror'));
+    _defineProperty(_this, "onImgError", function (event) {
+      var secondaryError;
+      try {
+        secondaryError = buildImgErrorDiagnostics(_this.props.item, event);
+      } catch (_unused) {
+        secondaryError = undefined;
+      }
+      _this.props.onError(new MediaViewerError('imageviewer-src-onerror', secondaryError));
     });
     return _this;
   }
@@ -53,7 +60,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, clientId, preview, _yield$preview, value, origin, item, response, imgError, _t, _t2, _t3;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, clientId, preview, _yield$preview, value, origin, item, response, unsupportedError, imgError, _t, _t2, _t3;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -135,7 +142,11 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
             case 14:
               if (!(!isLocalFileReference &&
               // objectUrl at this point is binary file already
-              !isErrorFileState(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image' && isImageMimeTypeSupportedByBrowser(fileState.mimeType))) {
+              !isErrorFileState(fileState) && fileState.status !== 'uploading' && fileState.mediaType === 'image')) {
+                _context.next = 17;
+                break;
+              }
+              if (!isImageMimeTypeSupportedByBrowser(fileState.mimeType)) {
                 _context.next = 16;
                 break;
               }
@@ -143,7 +154,25 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               return mediaClient.file.getFileBinaryURL(fileState.id, collectionName);
             case 15:
               originalBinaryImageUrl = _context.sent;
+              _context.next = 17;
+              break;
             case 16:
+              if (!fg('platform_media_unsupported_mime_routing')) {
+                _context.next = 17;
+                break;
+              }
+              // Route unsupported MIME types browser can't natively decode straight to the
+              // unsupported/download view instead of handing a guaranteed-undecodable blob
+              // to <img>, which would only ever fire onerror and
+              // surface as an opaque `imageviewer-src-onerror` failure.
+              this.revokeObjectUrl(objectUrl);
+              unsupportedError = new MediaViewerError('imageviewer-unsupported-mime');
+              this.setState({
+                content: Outcome.failed(unsupportedError)
+              });
+              this.props.onError(unsupportedError);
+              return _context.abrupt("return");
+            case 17:
               this.setState({
                 content: Outcome.successful({
                   objectUrl: objectUrl,
@@ -152,10 +181,10 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                   clientId: clientId
                 })
               });
-              _context.next = 18;
+              _context.next = 19;
               break;
-            case 17:
-              _context.prev = 17;
+            case 18:
+              _context.prev = 18;
               _t3 = _context["catch"](2);
               // TODO : properly handle aborted requests (MS-2843)
               if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
@@ -165,11 +194,11 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 });
                 this.props.onError(imgError);
               }
-            case 18:
+            case 19:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 17], [3, 5]]);
+        }, _callee, this, [[2, 18], [3, 5]]);
       }));
       function init() {
         return _init.apply(this, arguments);

package/dist/types/download.d.ts

@@ -15,6 +15,7 @@ export type ToolbarDownloadButtonProps = {
     identifier: Identifier;
     mediaClient: MediaClient;
     traceContext: MediaTraceContext;
+    fallbackMediaName?: string;
 };
-export declare const ToolbarDownloadButton: ({ state, mediaClient, identifier, traceContext, }: ToolbarDownloadButtonProps) => React.JSX.Element | null;
+export declare const ToolbarDownloadButton: ({ state, mediaClient, identifier, traceContext, fallbackMediaName, }: ToolbarDownloadButtonProps) => React.JSX.Element | null;
 export declare const DisabledToolbarDownloadButton: React.JSX.Element;

package/dist/types/errorMessage.d.ts

@@ -26,6 +26,8 @@ export declare const getErrorMessageFromError: (error: MediaViewerError) => Mess
 export declare class ErrorMessage extends React.Component<Props & WrappedComponentProps & WithAnalyticsEventsProps, {}> {
     private getErrorInfo;
     componentDidMount(): void;
+    private static readonly previewUnsupportedReasons;
+    static isPreviewUnsupported(error: MediaViewerError): boolean;
     static getEventPayload(error: MediaViewerError, fileId: string, fileState?: FileState, traceContext?: MediaTraceContext): PreviewUnsupportedEventPayload | LoadFailedEventPayload;
     render(): React.JSX.Element;
 }

package/dist/types/errors.d.ts

@@ -1,4 +1,5 @@
-import { type MediaClientErrorReason, type RequestErrorMetadata } from '@atlaskit/media-client';
+import { type SyntheticEvent } from 'react';
+import { type FileState, type MediaClientErrorReason, type RequestErrorMetadata } from '@atlaskit/media-client';
 import { type ZipEntry } from 'unzipit';
 export declare class MediaViewerError extends Error {
     readonly primaryReason: MediaViewerErrorReason | ArchiveViewerErrorReason;
@@ -13,7 +14,8 @@ export declare class ArchiveViewerError extends MediaViewerError {
     constructor(primaryReason: ArchiveViewerErrorReason, secondaryError?: Error | undefined, zipEntry?: ZipEntry | undefined);
 }
 export declare function isArchiveViewerError(err: Error): err is ArchiveViewerError;
-export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-content-fetch-failed' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'svg-blob-to-datauri' | 'unsupported' | 'custom-viewer-error' | 'download';
+type srcType = 'blob' | 'remote' | 'data' | 'unknown';
+export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'imageviewer-unsupported-mime' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-content-fetch-failed' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'svg-blob-to-datauri' | 'unsupported' | 'custom-viewer-error' | 'download';
 export type ArchiveViewerErrorReason = 'archiveviewer-bundle-loader' | 'archiveviewer-read-binary' | 'archiveviewer-not-zip' | 'archiveviewer-create-url' | 'archiveviewer-imageviewer-onerror' | 'archiveviewer-videoviewer-onerror' | 'archiveviewer-audioviewer-onerror' | 'archiveviewer-docviewer-onerror' | 'archiveviewer-codeviewer-onerror' | 'archiveviewer-codeviewer-file-size-exceeds' | 'archiveviewer-missing-name-src' | 'archiveviewer-unsupported' | 'archiveviewer-encrypted-entry' | 'archiveviewer-customrenderer-onerror';
 export type PrimaryErrorReason = MediaViewerErrorReason | ArchiveViewerErrorReason;
 export type SecondaryErrorReason = MediaClientErrorReason | 'unknown' | 'nativeError' | undefined;
@@ -21,3 +23,23 @@ export declare function getPrimaryErrorReason(error: MediaViewerError): PrimaryE
 export declare function getSecondaryErrorReason(error: MediaViewerError): SecondaryErrorReason;
 export declare function getErrorDetail(error?: MediaViewerError): string;
 export declare function getRequestMetadata(error?: MediaViewerError): RequestErrorMetadata | undefined;
+/**
+ * Classifies the failed `<img>` source into a coarse, non-sensitive enum so we can
+ * tell which kind of source failed without leaking the (potentially signed) url.
+ */
+export declare function classifyFailedSrc(currentSrc?: string): srcType;
+/**
+ * Builds a descriptive `secondaryError` for an `<img>` onerror so the downstream
+ * `loadFailed` analytics event reports a meaningful `error`/`errorDetail` instead of
+ * the opaque `unknown`/`unknown`. The returned Error's `message` captures decode
+ * diagnostics as a comma-separated `key=value` string (undefined fields are omitted):
+ * - whether the browser decoded any pixels (`naturalWidth`/`naturalHeight === 0`)
+ * - the file MIME type and whether it is natively browser-decodable
+ * - which source failed (preview blob vs. original-binary/HD url)
+ *
+ * @example
+ * // message:
+ * "mimeType=image/png, isBrowserDecodable=true, naturalWidth=0, naturalHeight=0, failedSrcType=blob"
+ */
+export declare function buildImgErrorDiagnostics(item: FileState | undefined, event?: SyntheticEvent<HTMLImageElement, Event>): Error;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "54.3.7",
+	"version": "54.4.0",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,9 +12,7 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": [
-		"*.compiled.css"
-	],
+	"sideEffects": ["*.compiled.css"],
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
 		"react-compiler": {
@@ -41,20 +39,20 @@
 		"@atlaskit/icon-lab": "^7.3.0",
 		"@atlaskit/media-client": "^37.2.0",
 		"@atlaskit/media-client-react": "^6.1.0",
-		"@atlaskit/media-common": "^14.2.0",
+		"@atlaskit/media-common": "^14.3.0",
 		"@atlaskit/media-document-viewer": "^1.1.0",
 		"@atlaskit/media-state": "^3.0.0",
 		"@atlaskit/media-svg": "^3.1.0",
-		"@atlaskit/media-ui": "^30.5.0",
+		"@atlaskit/media-ui": "^30.6.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/portal": "^6.1.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.4.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-navigation": "^12.2.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^121.0.0",
+		"@atlaskit/tmp-editor-statsig": "^121.3.0",
 		"@atlaskit/tokens": "^15.4.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -89,12 +87,12 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-data": "^4.0.0",
-		"@atlaskit/media-test-helpers": "^42.1.0",
+		"@atlaskit/media-test-helpers": "^42.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^17.1.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/testing-library": "^0.8.0",
+		"@atlassian/testing-library": "^0.10.0",
 		"@atlassian/ufo": "^0.8.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^16.3.0",
@@ -143,14 +141,14 @@
 		},
 		"platform_media_archive_zip_guard": {
 			"type": "boolean"
+		},
+		"platform_media_unsupported_mime_routing": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {
 		"@repo/internal": {
-			"design-tokens": [
-				"color",
-				"spacing"
-			]
+			"design-tokens": ["color", "spacing"]
 		}
 	}
 }