@atlaskit/media-viewer 48.2.13 → 48.2.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-viewer
 
+## 48.2.15
+
+### Patch Changes
+
+- [#72472](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72472) [`575bba0b9bbf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/575bba0b9bbf) - Fixed issue where quickly switching between images in Media Viewer would result in broken preview.
+
+## 48.2.14
+
+### Patch Changes
+
+- [#69045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69045) [`284fc8e26be1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/284fc8e26be1) - Fixed potential memory leak by checking for mounting before updating state
+- Updated dependencies
+
 ## 48.2.13
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

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

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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 = "48.2.13";
+var packageVersion = "48.2.15";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/components/media-viewer-loader.js

@@ -32,6 +32,7 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -69,10 +70,12 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
               MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
               AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
               AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-              this.setState({
-                MediaViewer: MediaViewerWithClient,
-                MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-              });
+              if (this.isMounted) {
+                this.setState({
+                  MediaViewer: MediaViewerWithClient,
+                  MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+                });
+              }
               _context.next = 17;
               break;
             case 15:
@@ -89,6 +92,16 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
       }
       return UNSAFE_componentWillMount;
     }()
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMounted = false;
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/cjs/item-viewer.js

@@ -123,9 +123,15 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
       traceId: (0, _mediaCommon.getRandomHex)(8)
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (newState) {
+      if (_this.isMounted) {
+        _this.setState(newState);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
@@ -140,7 +146,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLoadFail", function (mediaViewerError) {
-      _this.setState({
+      _this.safeSetState({
         item: _domain.Outcome.failed(mediaViewerError)
       });
     });
@@ -156,7 +162,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
-      _this.setState({
+      _this.safeSetState({
         item: _domain.Outcome.failed(new _errors.MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -167,7 +173,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.needsReset(this.props, nextProps)) {
         this.release();
-        this.setState(initialState);
+        this.safeSetState(initialState);
       }
     }
   }, {
@@ -180,11 +186,13 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.isMounted = false;
       this.release();
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.isMounted = true;
       this.init(this.props);
     }
   }, {
@@ -358,7 +366,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
         // just set a successful outcome of type "external-image".
-        this.setState({
+        this.safeSetState({
           item: _domain.Outcome.successful('external-image')
         });
         return;
@@ -371,12 +379,12 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       }).subscribe({
         next: function next(file) {
           _this3.updateFileStateFlag(file);
-          _this3.setState({
+          _this3.safeSetState({
             item: _domain.Outcome.successful(file)
           });
         },
         error: function error(_error) {
-          _this3.setState({
+          _this3.safeSetState({
             item: _domain.Outcome.failed(new _errors.MediaViewerError('itemviewer-fetch-metadata', _error))
           });
         }

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

@@ -62,7 +62,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, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, response, imgError;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -73,50 +73,50 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               }
               return _context.abrupt("return");
             case 3:
-              _context.prev = 3;
+              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
+              _context.prev = 4;
               orientation = 1;
               isLocalFileReference = false;
               preview = fileState.preview;
               if (!preview) {
-                _context.next = 24;
+                _context.next = 25;
                 break;
               }
-              _context.next = 10;
+              _context.next = 11;
               return preview;
-            case 10:
+            case 11:
               _yield$preview = _context.sent;
               value = _yield$preview.value;
               origin = _yield$preview.origin;
               if (!(value instanceof Blob)) {
-                _context.next = 21;
+                _context.next = 22;
                 break;
               }
-              _context.next = 16;
+              _context.next = 17;
               return (0, _mediaUi.getOrientation)(value);
-            case 16:
+            case 17:
               orientation = _context.sent;
               objectUrl = URL.createObjectURL(value);
               isLocalFileReference = origin === 'local';
-              _context.next = 22;
+              _context.next = 23;
               break;
-            case 21:
-              objectUrl = value;
             case 22:
+              objectUrl = value;
+            case 23:
               _context.next = 38;
               break;
-            case 24:
+            case 25:
               if (!(0, _mediaClient.isImageRepresentationReady)(fileState)) {
                 _context.next = 36;
                 break;
               }
               item = processedFileStateToMediaItem(fileState);
-              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
               response = mediaClient.getImage(item.details.id, {
                 collection: collectionName,
                 mode: 'fit'
               }, controller, true, traceContext);
               this.cancelImageFetch = function () {
-                return controller && controller.abort();
+                return controller === null || controller === void 0 ? void 0 : controller.abort();
               };
               _context.t0 = URL;
               _context.next = 32;
@@ -154,9 +154,9 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               break;
             case 45:
               _context.prev = 45;
-              _context.t2 = _context["catch"](3);
+              _context.t2 = _context["catch"](4);
               // TODO : properly handle aborted requests (MS-2843)
-              if (!(0, _mediaClient.isAbortedRequestError)(_context.t2)) {
+              if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
                 imgError = new _errors.MediaViewerError('imageviewer-fetch-url', _context.t2 instanceof Error ? _context.t2 : undefined);
                 this.setState({
                   content: _domain.Outcome.failed(imgError)
@@ -167,7 +167,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[3, 45]]);
+        }, _callee, this, [[4, 45]]);
       }));
       function init() {
         return _init.apply(this, arguments);

package/dist/es2019/analytics/index.js

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

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.2.13";
+const packageVersion = "48.2.15";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/components/media-viewer-loader.js

@@ -4,6 +4,7 @@ import ModalSpinner from '../viewers/modalSpinner';
 export class AsyncMediaViewer extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "isMounted", false);
     _defineProperty(this, "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -17,15 +18,23 @@ export class AsyncMediaViewer extends React.PureComponent {
         const MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
         AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
         AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-        this.setState({
-          MediaViewer: MediaViewerWithClient,
-          MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-        });
+        if (this.isMounted) {
+          this.setState({
+            MediaViewer: MediaViewerWithClient,
+            MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+          });
+        }
       } catch (error) {
         // TODO [MS-2277]: Add operational error to catch async import error
       }
     }
   }
+  componentDidMount() {
+    this.isMounted = true;
+  }
+  componentWillUnmount() {
+    this.isMounted = false;
+  }
   render() {
     const {
       MediaViewer,

package/dist/es2019/item-viewer.js

@@ -54,9 +54,15 @@ export class ItemViewerBase extends React.Component {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    _defineProperty(this, "isMounted", false);
     _defineProperty(this, "traceContext", {
       traceId: getRandomHex(8)
     });
+    _defineProperty(this, "safeSetState", newState => {
+      if (this.isMounted) {
+        this.setState(newState);
+      }
+    });
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -73,7 +79,7 @@ export class ItemViewerBase extends React.Component {
       });
     });
     _defineProperty(this, "onLoadFail", mediaViewerError => {
-      this.setState({
+      this.safeSetState({
         item: Outcome.failed(mediaViewerError)
       });
     });
@@ -89,7 +95,7 @@ export class ItemViewerBase extends React.Component {
       });
     });
     _defineProperty(this, "onExternalImgError", () => {
-      this.setState({
+      this.safeSetState({
         item: Outcome.failed(new MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -97,7 +103,7 @@ export class ItemViewerBase extends React.Component {
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.needsReset(this.props, nextProps)) {
       this.release();
-      this.setState(initialState);
+      this.safeSetState(initialState);
     }
   }
   componentDidUpdate(oldProps) {
@@ -106,9 +112,11 @@ export class ItemViewerBase extends React.Component {
     }
   }
   componentWillUnmount() {
+    this.isMounted = false;
     this.release();
   }
   componentDidMount() {
+    this.isMounted = true;
     this.init(this.props);
   }
   renderItem(fileState) {
@@ -277,7 +285,7 @@ export class ItemViewerBase extends React.Component {
       // external images do not need to talk to our backend,
       // so therefore no need for media-client subscriptions.
       // just set a successful outcome of type "external-image".
-      this.setState({
+      this.safeSetState({
         item: Outcome.successful('external-image')
       });
       return;
@@ -292,12 +300,12 @@ export class ItemViewerBase extends React.Component {
     }).subscribe({
       next: file => {
         this.updateFileStateFlag(file);
-        this.setState({
+        this.safeSetState({
           item: Outcome.successful(file)
         });
       },
       error: error => {
-        this.setState({
+        this.safeSetState({
           item: Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', error))
         });
       }

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { isAbortedRequestError, isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
+import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { Outcome } from '../../domain';
@@ -41,6 +41,7 @@ export class ImageViewer extends BaseViewer {
     if (fileState.status === 'error') {
       return;
     }
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
     try {
       let orientation = 1;
       let objectUrl;
@@ -63,12 +64,11 @@ export class ImageViewer extends BaseViewer {
         }
       } else if (isImageRepresentationReady(fileState)) {
         const item = processedFileStateToMediaItem(fileState);
-        const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
         const response = mediaClient.getImage(item.details.id, {
           collection: collectionName,
           mode: 'fit'
         }, controller, true, traceContext);
-        this.cancelImageFetch = () => controller && controller.abort();
+        this.cancelImageFetch = () => controller === null || controller === void 0 ? void 0 : controller.abort();
         objectUrl = URL.createObjectURL(await response);
       } else {
         this.setState({
@@ -90,7 +90,7 @@ export class ImageViewer extends BaseViewer {
       });
     } catch (err) {
       // TODO : properly handle aborted requests (MS-2843)
-      if (!isAbortedRequestError(err)) {
+      if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
         const imgError = new MediaViewerError('imageviewer-fetch-url', err instanceof Error ? err : undefined);
         this.setState({
           content: Outcome.failed(imgError)

package/dist/esm/analytics/index.js

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

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.2.13";
+var packageVersion = "48.2.15";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/components/media-viewer-loader.js

@@ -22,6 +22,7 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
     _defineProperty(_assertThisInitialized(_this), "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -53,10 +54,12 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
               MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
               AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
               AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-              this.setState({
-                MediaViewer: MediaViewerWithClient,
-                MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-              });
+              if (this.isMounted) {
+                this.setState({
+                  MediaViewer: MediaViewerWithClient,
+                  MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+                });
+              }
               _context.next = 17;
               break;
             case 15:
@@ -73,6 +76,16 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
       }
       return UNSAFE_componentWillMount;
     }()
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMounted = false;
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/esm/item-viewer.js

@@ -103,9 +103,15 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
     _defineProperty(_assertThisInitialized(_this), "traceContext", {
       traceId: getRandomHex(8)
     });
+    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (newState) {
+      if (_this.isMounted) {
+        _this.setState(newState);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
@@ -120,7 +126,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onLoadFail", function (mediaViewerError) {
-      _this.setState({
+      _this.safeSetState({
         item: Outcome.failed(mediaViewerError)
       });
     });
@@ -136,7 +142,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onExternalImgError", function () {
-      _this.setState({
+      _this.safeSetState({
         item: Outcome.failed(new MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -147,7 +153,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.needsReset(this.props, nextProps)) {
         this.release();
-        this.setState(initialState);
+        this.safeSetState(initialState);
       }
     }
   }, {
@@ -160,11 +166,13 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.isMounted = false;
       this.release();
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.isMounted = true;
       this.init(this.props);
     }
   }, {
@@ -338,7 +346,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
         // just set a successful outcome of type "external-image".
-        this.setState({
+        this.safeSetState({
           item: Outcome.successful('external-image')
         });
         return;
@@ -351,12 +359,12 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }).subscribe({
         next: function next(file) {
           _this3.updateFileStateFlag(file);
-          _this3.setState({
+          _this3.safeSetState({
             item: Outcome.successful(file)
           });
         },
         error: function error(_error) {
-          _this3.setState({
+          _this3.safeSetState({
             item: Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', _error))
           });
         }

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

@@ -10,7 +10,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
-import { isAbortedRequestError, isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
+import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { Outcome } from '../../domain';
@@ -55,7 +55,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, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, response, imgError;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -66,50 +66,50 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               }
               return _context.abrupt("return");
             case 3:
-              _context.prev = 3;
+              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
+              _context.prev = 4;
               orientation = 1;
               isLocalFileReference = false;
               preview = fileState.preview;
               if (!preview) {
-                _context.next = 24;
+                _context.next = 25;
                 break;
               }
-              _context.next = 10;
+              _context.next = 11;
               return preview;
-            case 10:
+            case 11:
               _yield$preview = _context.sent;
               value = _yield$preview.value;
               origin = _yield$preview.origin;
               if (!(value instanceof Blob)) {
-                _context.next = 21;
+                _context.next = 22;
                 break;
               }
-              _context.next = 16;
+              _context.next = 17;
               return getOrientation(value);
-            case 16:
+            case 17:
               orientation = _context.sent;
               objectUrl = URL.createObjectURL(value);
               isLocalFileReference = origin === 'local';
-              _context.next = 22;
+              _context.next = 23;
               break;
-            case 21:
-              objectUrl = value;
             case 22:
+              objectUrl = value;
+            case 23:
               _context.next = 38;
               break;
-            case 24:
+            case 25:
               if (!isImageRepresentationReady(fileState)) {
                 _context.next = 36;
                 break;
               }
               item = processedFileStateToMediaItem(fileState);
-              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
               response = mediaClient.getImage(item.details.id, {
                 collection: collectionName,
                 mode: 'fit'
               }, controller, true, traceContext);
               this.cancelImageFetch = function () {
-                return controller && controller.abort();
+                return controller === null || controller === void 0 ? void 0 : controller.abort();
               };
               _context.t0 = URL;
               _context.next = 32;
@@ -147,9 +147,9 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               break;
             case 45:
               _context.prev = 45;
-              _context.t2 = _context["catch"](3);
+              _context.t2 = _context["catch"](4);
               // TODO : properly handle aborted requests (MS-2843)
-              if (!isAbortedRequestError(_context.t2)) {
+              if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
                 imgError = new MediaViewerError('imageviewer-fetch-url', _context.t2 instanceof Error ? _context.t2 : undefined);
                 this.setState({
                   content: Outcome.failed(imgError)
@@ -160,7 +160,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[3, 45]]);
+        }, _callee, this, [[4, 45]]);
       }));
       function init() {
         return _init.apply(this, arguments);

package/dist/types/components/media-viewer-loader.d.ts

@@ -13,8 +13,11 @@ export declare class AsyncMediaViewer extends React.PureComponent<MediaViewerWit
     static displayName: string;
     static MediaViewer?: MediaViewerWithMediaClientConfigComponent;
     static MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+    isMounted: boolean;
     state: AsyncMediaViewerState;
     UNSAFE_componentWillMount(): Promise<void>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }
 export default AsyncMediaViewer;

package/dist/types/item-viewer.d.ts

@@ -24,7 +24,9 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    isMounted: boolean;
     private traceContext;
+    safeSetState: (newState: State) => void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/dist/types-ts4.5/components/media-viewer-loader.d.ts

@@ -13,8 +13,11 @@ export declare class AsyncMediaViewer extends React.PureComponent<MediaViewerWit
     static displayName: string;
     static MediaViewer?: MediaViewerWithMediaClientConfigComponent;
     static MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+    isMounted: boolean;
     state: AsyncMediaViewerState;
     UNSAFE_componentWillMount(): Promise<void>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }
 export default AsyncMediaViewer;

package/dist/types-ts4.5/item-viewer.d.ts

@@ -24,7 +24,9 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    isMounted: boolean;
     private traceContext;
+    safeSetState: (newState: State) => void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.2.13",
+  "version": "48.2.15",
   "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/"
@@ -35,20 +35,20 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/button": "^17.3.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/icon-file-type": "^6.4.0",
-    "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/media-ui": "^25.0.0",
+    "@atlaskit/media-ui": "^25.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/side-navigation": "^3.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@kenjiuno/msgreader": "^1.2.6",
@@ -70,10 +70,10 @@
   },
   "devDependencies": {
     "@af/integration-testing": "*",
-    "@atlaskit/media-core": "^34.1.0",
+    "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-state": "^1.0.0",
-    "@atlaskit/media-test-data": "^1.1.0",
+    "@atlaskit/media-test-data": "^1.2.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",