@atlaskit/media-client 23.1.3 → 24.0.0

package/dist/es2019/test-helpers/fakeMediaClient.js

@@ -0,0 +1,63 @@
+import { MediaClient } from '../';
+import { asMock, getJest } from '@atlaskit/media-common/test-helpers';
+const jest = getJest();
+export const getDefaultMediaClientConfig = () => ({
+  authProvider: jest.fn().mockReturnValue(Promise.resolve({
+    clientId: 'some-client-id',
+    token: 'some-token',
+    baseUrl: 'some-service-host'
+  }))
+});
+export const fakeMediaClient = (config = getDefaultMediaClientConfig()) => {
+  if (jest && jest.genMockFromModule) {
+    const {
+      MediaClient: MockMediaClient,
+      FileFetcherImpl,
+      MediaStore: MockMediaStore,
+      StargateClient
+    } = jest.genMockFromModule('@atlaskit/media-client');
+    const mediaClient = new MockMediaClient();
+    const fileFetcher = new FileFetcherImpl();
+    const mockMediaStore = new MockMediaStore({
+      authProvider: config.authProvider
+    });
+    const stargateClient = new StargateClient();
+    mediaClient.file = fileFetcher;
+    mediaClient.stargate = stargateClient;
+    mediaClient.config = config; // <- deprecated
+    mediaClient.mediaClientConfig = config;
+    mediaClient.mediaStore = mockMediaStore;
+    mediaClient.mediaStore.getItems = jest.fn().mockResolvedValue({
+      data: {
+        items: []
+      }
+    });
+    asMock(mediaClient.getImageUrl).mockResolvedValue('some-image-url');
+    asMock(mediaClient.getImageUrlSync).mockReturnValue('some-image-url');
+    asMock(mediaClient.getImage).mockImplementation(mockMediaStore.getImage);
+    asMock(mediaClient.file.copyFile).mockReturnValue({
+      id: 'copied-file-id'
+    });
+    asMock(mediaClient.file.getCurrentState).mockReturnValue(Promise.resolve({
+      id: 'file-id',
+      status: 'processed',
+      mediaType: 'image',
+      name: 'file_name'
+    }));
+    asMock(mediaClient.file.getFileState).mockImplementation(() => ({
+      subscribe: jest.fn()
+    }));
+    asMock(mediaClient.stargate.fetchToken).mockImplementation(() => Promise.resolve({
+      data: {
+        clientId: 'some-client-id-from-smart-edge',
+        token: 'some-token-from-smart-edge',
+        baseUrl: 'some-base-url-from-smart-edge',
+        expiresIn: 34000,
+        iat: new Date().getTime() / 1000
+      }
+    }));
+    return mediaClient;
+  } else {
+    return new MediaClient(config);
+  }
+};

package/dist/es2019/test-helpers/index.js

@@ -0,0 +1,7 @@
+export { StoryBookAuthProvider } from './authProvider';
+export { createStorybookMediaClient, createStorybookMediaClientConfig, createUploadMediaClient, createUploadMediaClientConfig, defaultBaseUrl, defaultParams } from './mediaClientProvider';
+export { collectionNames, defaultCollectionName, defaultMediaPickerCollectionName, fileCollectionName, onlyAnimatedGifsCollectionName } from './collectionNames';
+export { animatedFileId, archiveFileId, atlassianLogoUrl, audioFileDetails, audioFileId, audioNoCoverFileId, bigDocFileId, docFileDetails, docFileId, emptyImageFileId, errorFileId, externalImageIdentifier, externalSmallImageIdentifier, externaBrokenlIdentifier, genericDataURI, genericFileDetails, genericFileId, gifFileId, imageFileDetails, imageFileId, largeImageFileId, largePdfFileId, noMetadataFileId, passwordProtectedPdfFileId, smallImageFileId, unknownFileDetails, unknownFileId, verticalImageFileId, videoFileDetails, videoFileId, videoHorizontalFileId, videoLargeFileId, videoProcessingFailedId, videoSquareFileId, wideImageFileId, zipFileId, zipFileWithNestedFolderId, zipItemLargeInnerFileId, zipItemMultipleFoldersAtRootId, zipJiraArchiveFileId, zipEncryptedFileId, codeFileId, emailFileId, emailUnsupportedFileId, vrVideoDetails } from './exampleMediaItems';
+export const authProviderBaseURL = 'https://media.dev.atl-paas.net';
+export { mediaPickerAuthProvider, defaultMediaPickerAuthProvider } from './mediaPickerAuthProvider';
+export { fakeMediaClient } from './fakeMediaClient';

package/dist/es2019/test-helpers/mediaClientProvider.js

@@ -0,0 +1,42 @@
+import { MediaClient } from '../';
+import { StoryBookAuthProvider } from './authProvider';
+import { collectionNames } from './collectionNames';
+import { mediaPickerAuthProvider } from './mediaPickerAuthProvider';
+export const defaultBaseUrl = 'https://media.dev.atl-paas.net';
+export const defaultParams = {
+  clientId: '5a9812fc-d029-4a39-8a46-d3cc36eed7ab',
+  asapIssuer: 'micros/media-playground',
+  baseUrl: defaultBaseUrl
+};
+const defaultAuthParameter = {
+  authType: 'client'
+};
+
+/**
+ * Creates and returns `MediaClient` (from `media-client`) based on the data provided in parameter object.
+ *
+ * @param {AuthParameter} authParameter specifies serviceName and whatever auth should be done with clientId or asapIssuer
+ * @returns {Context}
+ */
+export const createStorybookMediaClient = (authParameter = defaultAuthParameter) => {
+  return new MediaClient(createStorybookMediaClientConfig(authParameter));
+};
+export const createStorybookMediaClientConfig = (authParameter = defaultAuthParameter) => {
+  const scopes = {
+    'urn:filestore:file:*': ['read'],
+    'urn:filestore:chunk:*': ['read']
+  };
+  collectionNames.forEach(c => {
+    scopes[`urn:filestore:collection:${c}`] = ['read', 'update'];
+  });
+  const isAsapEnvironment = authParameter.authType === 'asap';
+  const authProvider = StoryBookAuthProvider.create(isAsapEnvironment, scopes);
+  return {
+    authProvider
+  };
+};
+export const createUploadMediaClient = () => new MediaClient(createUploadMediaClientConfig());
+export const createUploadMediaClientConfig = (stargateBaseUrl, env) => ({
+  authProvider: mediaPickerAuthProvider('asap', env),
+  stargateBaseUrl
+});

package/dist/es2019/test-helpers/mediaPickerAuthProvider.js

@@ -0,0 +1,56 @@
+import { defaultCollectionName } from './collectionNames';
+export const authProviderBaseURL = 'https://media.dev.atl-paas.net';
+const cachedAuths = {};
+const accessUrns = {
+  MediaServicesSample: {
+    'urn:filestore:collection:MediaServicesSample': ['read', 'insert'],
+    'urn:filestore:chunk:*': ['create', 'read'],
+    'urn:filestore:upload': ['create'],
+    'urn:filestore:upload:*': ['read', 'update'],
+    'urn:filestore:file': ['create'],
+    'urn:filestore:file:*': ['read', 'update']
+  },
+  'mediapicker-test': {
+    'urn:filestore:collection': ['create'],
+    'urn:filestore:collection:mediapicker-test': ['read', 'insert'],
+    'urn:filestore:chunk:*': ['create', 'read'],
+    'urn:filestore:upload': ['create'],
+    'urn:filestore:upload:*': ['read', 'update'],
+    'urn:filestore:file': ['create'],
+    'urn:filestore:file:*': ['read', 'update']
+  }
+};
+const requestAuthProvider = async (authEnvironment, collectionName, env = 'dev') => {
+  const url = `https://media-playground.${env}.atl-paas.net/token/tenant?environment=${authEnvironment}`;
+  const body = JSON.stringify({
+    access: accessUrns[collectionName] || {}
+  });
+  const headers = new Headers();
+  headers.append('Content-Type', 'application/json; charset=utf-8');
+  headers.append('Accept', 'text/plain, */*; q=0.01');
+  const response = await fetch(url, {
+    method: 'POST',
+    body,
+    headers
+  });
+
+  // We leverage the fact, that our internal /toke/tenant API returns data in the same format as Auth
+  return response.json();
+};
+export const mediaPickerAuthProvider = (authEnvironment = 'asap', env) => context => {
+  const collectionName = context && context.collectionName || defaultCollectionName;
+  authEnvironment = authEnvironment === 'asap' ? 'asap' : '';
+  const cacheKey = `${collectionName}:${authEnvironment}`;
+  if (!cachedAuths[cacheKey]) {
+    cachedAuths[cacheKey] = requestAuthProvider(authEnvironment, collectionName, env);
+  }
+  return cachedAuths[cacheKey];
+};
+export const defaultMediaPickerAuthProvider = () => () => {
+  const auth = {
+    clientId: 'a89be2a1-f91f-485c-9962-a8fb25ccfa13',
+    token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhODliZTJhMS1mOTFmLTQ4NWMtOTk2Mi1hOGZiMjVjY2ZhMTMiLCJ1bnNhZmUiOnRydWUsImlhdCI6MTQ3MzIyNTEzNn0.6Isj5jKgKzWDnPqfoMLiC_LVIlGM8kg_wxG6eGGwhTw',
+    baseUrl: authProviderBaseURL
+  };
+  return Promise.resolve(auth);
+};

package/dist/es2019/utils/with-media-client-hoc.js

@@ -1,24 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { MediaClient } from '../client/media-client';
-const NO_FLAGS = 'NO_FLAGS';
 const mediaClientsMap = new Map();
-export const getMediaClient = (mediaClientConfig, featureFlags) => {
-  var _mediaClientsMap$get;
-  const flagsMapKey = featureFlags || NO_FLAGS;
-  let mediaClient = (_mediaClientsMap$get = mediaClientsMap.get(mediaClientConfig)) === null || _mediaClientsMap$get === void 0 ? void 0 : _mediaClientsMap$get.get(flagsMapKey);
+export const getMediaClient = mediaClientConfig => {
+  let mediaClient = mediaClientsMap.get(mediaClientConfig);
   if (!mediaClient) {
-    let subMap = mediaClientsMap.get(mediaClientConfig);
-    if (!subMap) {
-      subMap = new Map();
-      mediaClientsMap.set(mediaClientConfig, subMap);
-    }
-    mediaClient = new MediaClient(mediaClientConfig, featureFlags);
-    subMap.set(flagsMapKey, mediaClient);
+    mediaClient = new MediaClient(mediaClientConfig);
+    mediaClientsMap.set(mediaClientConfig, mediaClient);
   }
   return mediaClient;
 };
-const createEmptyMediaClient = featureFlags => {
+const createEmptyMediaClient = () => {
   const emptyConfig = {
     authProvider: () => Promise.resolve({
       clientId: '',
@@ -26,9 +18,9 @@ const createEmptyMediaClient = featureFlags => {
       baseUrl: ''
     })
   };
-  return new MediaClient(emptyConfig, featureFlags);
+  return new MediaClient(emptyConfig);
 };
-export const withMediaClient = (Component, featureFlags) => {
+export const withMediaClient = Component => {
   return class extends React.Component {
     render() {
       // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
@@ -36,7 +28,7 @@ export const withMediaClient = (Component, featureFlags) => {
         mediaClientConfig,
         ...otherProps
       } = this.props;
-      const mediaClient = !mediaClientConfig ? createEmptyMediaClient(featureFlags) : getMediaClient(mediaClientConfig, featureFlags);
+      const mediaClient = !mediaClientConfig ? createEmptyMediaClient() : getMediaClient(mediaClientConfig);
       return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
         mediaClient: mediaClient
       }));

package/dist/esm/client/file-fetcher/index.js

@@ -2,8 +2,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Subscription } from 'rxjs/Subscription';
 import { map } from 'rxjs/operators/map';
@@ -13,7 +13,7 @@ import uuid from 'uuid/v4';
 import 'setimmediate';
 import { authToOwner } from '@atlaskit/media-core';
 import { downloadUrl } from '@atlaskit/media-common/downloadUrl';
-import { MediaStore } from '../media-store';
+import { MediaStore as MediaApi } from '../media-store';
 import { isErrorFileState, isFinalFileState, isProcessingFileState, mapMediaFileToFileState, mapMediaItemToFileState } from '../../models/file-state';
 import { FileFetcherError } from './error';
 import { uploadFile } from '../../uploader';
@@ -32,11 +32,34 @@ import { isMimeTypeSupportedByBrowser, getMediaTypeFromMimeType } from '@atlaski
 import { shouldFetchRemoteFileStates } from '../../utils/shouldFetchRemoteFileStates';
 import { PollingFunction } from '../../utils/polling';
 import { isEmptyFile } from '../../utils/detectEmptyFile';
+import { mediaStore } from '@atlaskit/media-state';
 export { isFileFetcherError, FileFetcherError } from './error';
 export var FileFetcherImpl = /*#__PURE__*/function () {
-  function FileFetcherImpl(mediaStore) {
+  function FileFetcherImpl(mediaApi) {
     var _this = this;
+    var store = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mediaStore;
     _classCallCheck(this, FileFetcherImpl);
+    _defineProperty(this, "getErrorFileState", function (error, id, occurrenceKey) {
+      return typeof error === 'string' ? {
+        status: 'error',
+        id: id,
+        reason: error,
+        occurrenceKey: occurrenceKey,
+        message: error
+      } : {
+        status: 'error',
+        id: id,
+        reason: error === null || error === void 0 ? void 0 : error.reason,
+        details: error === null || error === void 0 ? void 0 : error.attributes,
+        occurrenceKey: occurrenceKey,
+        message: error === null || error === void 0 ? void 0 : error.message
+      };
+    });
+    _defineProperty(this, "setFileState", function (id, fileState) {
+      _this.store.setState(function (state) {
+        state.files[id] = fileState;
+      });
+    });
     // TODO: ----- ADD TICKET TO PASS TRACE ID to this.dataloader.load
     _defineProperty(this, "createDownloadFileStream", function (id, collectionName, occurrenceKey) {
       var subject = createMediaSubject();
@@ -131,8 +154,9 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
         preview: preview
       };
     });
-    this.mediaStore = mediaStore;
-    this.dataloader = createFileDataloader(mediaStore);
+    this.mediaApi = mediaApi;
+    this.store = store;
+    this.dataloader = createFileDataloader(mediaApi);
   }
   _createClass(FileFetcherImpl, [{
     key: "getFileState",
@@ -143,14 +167,34 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
         occurrenceKey = options.occurrenceKey;
       if (!isValidId(id)) {
         var subject = createMediaSubject();
-        subject.error(new FileFetcherError('invalidFileId', id, {
+        var err = new FileFetcherError('invalidFileId', id, {
           collectionName: collectionName,
           occurrenceKey: occurrenceKey
-        }));
+        });
+        var errorFileState = {
+          status: 'error',
+          id: id,
+          reason: err === null || err === void 0 ? void 0 : err.reason,
+          message: err === null || err === void 0 ? void 0 : err.message,
+          occurrenceKey: occurrenceKey,
+          details: err === null || err === void 0 ? void 0 : err.attributes
+        };
+        subject.error(err);
+        this.setFileState(id, errorFileState);
         return fromObservable(subject);
       }
       return fromObservable(getFileStreamsCache().getOrInsert(id, function () {
-        return _this2.createDownloadFileStream(id, collectionName);
+        var subject = _this2.createDownloadFileStream(id, collectionName);
+        subject.subscribe({
+          next: function next(fileState) {
+            _this2.setFileState(id, fileState);
+          },
+          error: function error(err) {
+            var errorFileState = _this2.getErrorFileState(err, id, occurrenceKey);
+            _this2.setFileState(id, errorFileState);
+          }
+        });
+        return subject;
       }));
     }
   }, {
@@ -161,17 +205,17 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
   }, {
     key: "getArtifactURL",
     value: function getArtifactURL(artifacts, artifactName, collectionName) {
-      return this.mediaStore.getArtifactURL(artifacts, artifactName, collectionName);
+      return this.mediaApi.getArtifactURL(artifacts, artifactName, collectionName);
     }
   }, {
     key: "getFileBinaryURL",
     value: function getFileBinaryURL(id, collectionName) {
-      return this.mediaStore.getFileBinaryURL(id, collectionName);
+      return this.mediaApi.getFileBinaryURL(id, collectionName);
     }
   }, {
     key: "touchFiles",
     value: function touchFiles(descriptors, collection, traceContext) {
-      return this.mediaStore.touchFiles({
+      return this.mediaApi.touchFiles({
         descriptors: descriptors
       }, {
         collection: collection
@@ -257,6 +301,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
               subject.next(fileState);
               // we save it into the cache as soon as possible, in case someone subscribes
               getFileStreamsCache().set(id, subject);
+              this.setFileState(id, fileState);
               return _context4.abrupt("return", new Promise( /*#__PURE__*/function () {
                 var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(resolve, reject) {
                   var blob, type, size, file, mediaType, dimensions;
@@ -312,7 +357,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
                   return _ref4.apply(this, arguments);
                 };
               }()));
-            case 10:
+            case 11:
             case "end":
               return _context4.stop();
           }
@@ -335,22 +380,37 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
       var subject = createMediaSubject();
       getFileStreamsCache().set(id, subject);
       var onProgress = function onProgress(progress) {
-        subject.next(_objectSpread(_objectSpread({
+        var fileState = _objectSpread(_objectSpread({
           status: 'uploading'
         }, stateBase), {}, {
           progress: progress
-        }));
+        });
+        subject.next(fileState);
+        _this4.setFileState(id, fileState);
       };
       var processingSubscription = new Subscription();
       var onUploadFinish = function onUploadFinish(error) {
         if (error) {
+          var errorFileState = _this4.getErrorFileState(error, id, occurrenceKey);
+          _this4.setFileState(id, errorFileState);
           return subject.error(error);
         }
         processingSubscription = _this4.createDownloadFileStream(id, collection, occurrenceKey).pipe(map(function (remoteFileState) {
           return _objectSpread(_objectSpread(_objectSpread({}, stateBase), remoteFileState), overrideMediaTypeIfUnknown(remoteFileState, stateBase.mediaType));
-        })).subscribe(subject);
+        })).subscribe({
+          next: function next(fileState) {
+            subject.next(fileState);
+            _this4.setFileState(id, fileState);
+          },
+          error: function error(err) {
+            var errorFileState = _this4.getErrorFileState(err, id, occurrenceKey);
+            subject.error(err);
+            _this4.setFileState(id, errorFileState);
+          },
+          complete: subject.complete
+        });
       };
-      var _uploadFile = uploadFile(file, this.mediaStore, upfrontId, {
+      var _uploadFile = uploadFile(file, this.mediaApi, upfrontId, {
           onUploadFinish: onUploadFinish,
           onProgress: onProgress
         }, traceContext),
@@ -367,8 +427,6 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
       setTimeout(onProgress, 0, 0);
       return fromObservable(subject);
     }
-
-    // TODO: ----- ADD TICKET
   }, {
     key: "downloadBinary",
     value: function () {
@@ -383,7 +441,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
               name = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : 'download';
               collectionName = _args5.length > 2 ? _args5[2] : undefined;
               _context5.next = 4;
-              return this.mediaStore.getFileBinaryURL(id, collectionName);
+              return this.mediaApi.getFileBinaryURL(id, collectionName);
             case 4:
               url = _context5.sent;
               downloadUrl(url, {
@@ -409,6 +467,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
     key: "copyFile",
     value: function () {
       var _copyFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(source, destination) {
+        var _this5 = this;
         var options,
           traceContext,
           authProvider,
@@ -436,7 +495,12 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
           fileCache,
           subject,
           previewOverride,
+          fileState,
+          _fileState,
           _fileCache,
+          replaceFileState,
+          key,
+          errorFileState,
           _args6 = arguments;
         return _regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
@@ -446,7 +510,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
               authProvider = source.authProvider, sourceCollection = source.collection, id = source.id;
               destinationAuthProvider = destination.authProvider, destinationCollectionName = destination.collection, replaceFileId = destination.replaceFileId, occurrenceKey = destination.occurrenceKey;
               preview = options.preview, mimeType = options.mimeType;
-              mediaStore = destination.mediaStore || new MediaStore({
+              mediaStore = destination.mediaStore || new MediaApi({
                 authProvider: destinationAuthProvider
               });
               _context6.t0 = authToOwner;
@@ -505,53 +569,65 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
               _context6.t2 = _context6.sent;
             case 31:
               if (!_context6.t2) {
-                _context6.next = 36;
+                _context6.next = 38;
                 break;
               }
-              subject.next(_objectSpread(_objectSpread(_objectSpread({}, copiedFileState), overrideMediaTypeIfUnknown(copiedFileState, mediaType)), previewOverride));
+              fileState = _objectSpread(_objectSpread(_objectSpread({}, copiedFileState), overrideMediaTypeIfUnknown(copiedFileState, mediaType)), previewOverride);
+              subject.next(fileState);
+              this.setFileState(copiedId, fileState);
               processingSubscription = this.createDownloadFileStream(copiedId, destinationCollectionName, occurrenceKey).subscribe({
                 next: function next(remoteFileState) {
-                  return subject.next(_objectSpread(_objectSpread(_objectSpread({}, remoteFileState), overrideMediaTypeIfUnknown(remoteFileState, mediaType)), !isErrorFileState(remoteFileState) && previewOverride));
+                  var fileState = _objectSpread(_objectSpread(_objectSpread({}, remoteFileState), overrideMediaTypeIfUnknown(remoteFileState, mediaType)), !isErrorFileState(remoteFileState) && previewOverride);
+                  _this5.setFileState(copiedId, fileState);
+                  return subject.next(fileState);
                 },
                 error: function error(err) {
+                  var errorFileState = _this5.getErrorFileState(err, id, occurrenceKey);
+                  _this5.setFileState(copiedId, errorFileState);
                   return subject.error(err);
                 },
                 complete: function complete() {
                   return subject.complete();
                 }
               });
-              _context6.next = 37;
+              _context6.next = 39;
               break;
-            case 36:
+            case 38:
               if (!isProcessingFileState(copiedFileState)) {
-                subject.next(_objectSpread(_objectSpread({}, copiedFileState), !isErrorFileState(copiedFileState) && previewOverride));
+                _fileState = _objectSpread(_objectSpread({}, copiedFileState), !isErrorFileState(copiedFileState) && previewOverride);
+                subject.next(_fileState);
+                this.setFileState(copiedId, _fileState);
               }
-            case 37:
+            case 39:
               if (!cache.has(copiedId)) {
                 getFileStreamsCache().set(copiedId, subject);
               }
               return _context6.abrupt("return", copiedFile);
-            case 41:
-              _context6.prev = 41;
+            case 43:
+              _context6.prev = 43;
               _context6.t3 = _context6["catch"](14);
               if (processingSubscription) {
                 processingSubscription.unsubscribe();
               }
               if (replaceFileId) {
                 _fileCache = cache.get(replaceFileId);
+                replaceFileState = this.store.getState().files[replaceFileId];
                 if (_fileCache) {
                   _fileCache.error(_context6.t3);
                 } else {
                   // Create a new subject with the error state for new subscriptions
                   cache.set(id, createMediaSubject(_context6.t3));
                 }
+                key = replaceFileState ? replaceFileId : id;
+                errorFileState = this.getErrorFileState(_context6.t3, id, occurrenceKey);
+                this.setFileState(key, errorFileState);
               }
               throw _context6.t3;
-            case 46:
+            case 48:
             case "end":
               return _context6.stop();
           }
-        }, _callee6, this, [[14, 41]]);
+        }, _callee6, this, [[14, 43]]);
       }));
       function copyFile(_x9, _x10) {
         return _copyFile.apply(this, arguments);

package/dist/esm/client/media-client.js

@@ -3,28 +3,40 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { EventEmitter2 } from 'eventemitter2';
-import { MediaStore } from './media-store';
+import { MediaStore as MediaApi } from './media-store';
 import { FileFetcherImpl } from './file-fetcher';
 import { StargateClient } from './stargate-client';
+import { mediaStore } from '@atlaskit/media-state';
 export var MediaClient = /*#__PURE__*/function () {
   // mobile upload is lazily loaded
 
   // Deprecated value introduced for backward compatibility with Context
 
-  function MediaClient(mediaClientConfig, featureFlags) {
+  function MediaClient(mediaClientConfig) {
+    var store = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mediaStore;
+    var mediaApi = arguments.length > 2 ? arguments[2] : undefined;
     _classCallCheck(this, MediaClient);
     this.mediaClientConfig = mediaClientConfig;
-    this.featureFlags = featureFlags;
-    this.mediaStore = new MediaStore({
+    this.store = store;
+    this.mediaStore = mediaApi !== null && mediaApi !== void 0 ? mediaApi : new MediaApi({
       authProvider: mediaClientConfig.authProvider,
       initialAuth: mediaClientConfig.initialAuth
-    }, featureFlags);
+    });
     this.config = mediaClientConfig;
-    this.file = new FileFetcherImpl(this.mediaStore);
+    this.file = new FileFetcherImpl(this.mediaStore, this.store);
     this.eventEmitter = new EventEmitter2();
     this.stargate = new StargateClient(mediaClientConfig.stargateBaseUrl);
   }
+
+  /**
+   * @internal
+   */
   _createClass(MediaClient, [{
+    key: "__DO_NOT_USE__getMediaStore",
+    value: function __DO_NOT_USE__getMediaStore() {
+      return this.store;
+    }
+  }, {
     key: "getImage",
     value: function getImage(id, params, controller, fetchMaxRes, traceContext) {
       return this.mediaStore.getImage(id, params, controller, fetchMaxRes, traceContext);
@@ -79,7 +91,7 @@ export var MediaClient = /*#__PURE__*/function () {
               return import( /* webpackChunkName: "@atlaskit-internal_media-client-mobile-upload" */'./mobile-upload');
             case 4:
               module = _context2.sent;
-              this.mobileUpload = new module.MobileUploadImpl(this.mediaStore);
+              this.mobileUpload = new module.MobileUploadImpl(this.mediaStore, this.store);
               return _context2.abrupt("return", this.mobileUpload);
             case 7:
             case "end":

package/dist/esm/client/media-store/index.js

@@ -3,8 +3,8 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 import { getRandomHex } from '@atlaskit/media-common';
 import { FILE_CACHE_MAX_AGE, MAX_RESOLUTION } from '../../constants';
 import { getArtifactUrl } from '../../models/artifacts';
@@ -31,7 +31,7 @@ var jsonHeaders = {
   'Content-Type': 'application/json'
 };
 export var MediaStore = /*#__PURE__*/function () {
-  function MediaStore(config, featureFlags) {
+  function MediaStore(config) {
     var _this = this;
     _classCallCheck(this, MediaStore);
     _defineProperty(this, "resolveAuth", function (authContext) {
@@ -41,7 +41,6 @@ export var MediaStore = /*#__PURE__*/function () {
       return resolveInitialAuth(_this.config.initialAuth);
     });
     this.config = config;
-    this.featureFlags = featureFlags;
   }
   _createClass(MediaStore, [{
     key: "removeCollectionFile",