@atlaskit/media-client 23.1.3 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/media-client
 
+## 24.0.0
+
+### Major Changes
+
+- [`7b6a2c6671b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b6a2c6671b) - Introducing 'media-state' for handling media internal file state.
+  Introducing 'media-client-react' to provide hooks for seamless media-client integration with React.
+  Introducing 'MediaCardV2' with a feature flag to replace rxjs based fileState subscription with 'useFileState' hook.
+  Removed unused feature flags APIs from 'media-client' and its helper functions from 'media-common'.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.2.0
+
+### Minor Changes
+
+- [`ede6ee7aaab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ede6ee7aaab) - Updated tests, examples and moving towards /test-helper export in packages to prevent circular dependancies
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.1.3
 
 ### Patch Changes

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

@@ -29,7 +29,7 @@ require("setimmediate");
 var _mediaCore = require("@atlaskit/media-core");
 var _downloadUrl = require("@atlaskit/media-common/downloadUrl");
 var _mediaStore = require("../media-store");
-var _fileState = require("../../models/file-state");
+var _fileState2 = require("../../models/file-state");
 var _error = require("./error");
 var _uploader = require("../../uploader");
 var _fileStreamsCache = require("../../file-streams-cache");
@@ -47,13 +47,36 @@ var _mediaTypeUtils = require("@atlaskit/media-common/mediaTypeUtils");
 var _shouldFetchRemoteFileStates = require("../../utils/shouldFetchRemoteFileStates");
 var _polling = require("../../utils/polling");
 var _detectEmptyFile = require("../../utils/detectEmptyFile");
-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) { (0, _defineProperty2.default)(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; } // import setimmediate to temporary fix dataloader 2.0.0 bug
+var _mediaState = require("@atlaskit/media-state");
+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; } // import setimmediate to temporary fix dataloader 2.0.0 bug
 // @see https://github.com/graphql/dataloader/issues/249
 var FileFetcherImpl = /*#__PURE__*/function () {
-  function FileFetcherImpl(mediaStore) {
+  function FileFetcherImpl(mediaApi) {
     var _this = this;
+    var store = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _mediaState.mediaStore;
     (0, _classCallCheck2.default)(this, FileFetcherImpl);
+    (0, _defineProperty2.default)(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
+      };
+    });
+    (0, _defineProperty2.default)(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
     (0, _defineProperty2.default)(this, "createDownloadFileStream", function (id, collectionName, occurrenceKey) {
       var subject = (0, _createMediaSubject.createMediaSubject)();
@@ -93,7 +116,7 @@ var FileFetcherImpl = /*#__PURE__*/function () {
                 occurrenceKey: occurrenceKey
               });
             case 7:
-              fileState = (0, _fileState.mapMediaItemToFileState)(id, response);
+              fileState = (0, _fileState2.mapMediaItemToFileState)(id, response);
               subject.next(fileState);
               _context.t0 = fileState.status;
               _context.next = _context.t0 === 'processing' ? 12 : _context.t0 === 'processed' ? 14 : 16;
@@ -148,8 +171,9 @@ var FileFetcherImpl = /*#__PURE__*/function () {
         preview: preview
       };
     });
-    this.mediaStore = mediaStore;
-    this.dataloader = (0, _createFileDataLoader.createFileDataloader)(mediaStore);
+    this.mediaApi = mediaApi;
+    this.store = store;
+    this.dataloader = (0, _createFileDataLoader.createFileDataloader)(mediaApi);
   }
   (0, _createClass2.default)(FileFetcherImpl, [{
     key: "getFileState",
@@ -160,14 +184,34 @@ var FileFetcherImpl = /*#__PURE__*/function () {
         occurrenceKey = options.occurrenceKey;
       if (!(0, _uuidValidate.default)(id)) {
         var subject = (0, _createMediaSubject.createMediaSubject)();
-        subject.error(new _error.FileFetcherError('invalidFileId', id, {
+        var err = new _error.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 (0, _mediaSubscribable.fromObservable)(subject);
       }
       return (0, _mediaSubscribable.fromObservable)((0, _fileStreamsCache.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;
       }));
     }
   }, {
@@ -178,17 +222,17 @@ 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
@@ -274,6 +318,7 @@ var FileFetcherImpl = /*#__PURE__*/function () {
               subject.next(fileState);
               // we save it into the cache as soon as possible, in case someone subscribes
               (0, _fileStreamsCache.getFileStreamsCache)().set(id, subject);
+              this.setFileState(id, fileState);
               return _context4.abrupt("return", new Promise( /*#__PURE__*/function () {
                 var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(resolve, reject) {
                   var blob, type, size, file, mediaType, dimensions;
@@ -329,7 +374,7 @@ var FileFetcherImpl = /*#__PURE__*/function () {
                   return _ref4.apply(this, arguments);
                 };
               }()));
-            case 10:
+            case 11:
             case "end":
               return _context4.stop();
           }
@@ -352,22 +397,37 @@ var FileFetcherImpl = /*#__PURE__*/function () {
       var subject = (0, _createMediaSubject.createMediaSubject)();
       (0, _fileStreamsCache.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.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((0, _map.map)(function (remoteFileState) {
           return _objectSpread(_objectSpread(_objectSpread({}, stateBase), remoteFileState), (0, _overrideMediaTypeIfUnknown.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 = (0, _uploader.uploadFile)(file, this.mediaStore, upfrontId, {
+      var _uploadFile = (0, _uploader.uploadFile)(file, this.mediaApi, upfrontId, {
           onUploadFinish: onUploadFinish,
           onProgress: onProgress
         }, traceContext),
@@ -384,8 +444,6 @@ var FileFetcherImpl = /*#__PURE__*/function () {
       setTimeout(onProgress, 0, 0);
       return (0, _mediaSubscribable.fromObservable)(subject);
     }
-
-    // TODO: ----- ADD TICKET
   }, {
     key: "downloadBinary",
     value: function () {
@@ -400,7 +458,7 @@ 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;
               (0, _downloadUrl.downloadUrl)(url, {
@@ -426,6 +484,7 @@ var FileFetcherImpl = /*#__PURE__*/function () {
     key: "copyFile",
     value: function () {
       var _copyFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(source, destination) {
+        var _this5 = this;
         var options,
           traceContext,
           authProvider,
@@ -453,7 +512,12 @@ var FileFetcherImpl = /*#__PURE__*/function () {
           fileCache,
           subject,
           previewOverride,
+          fileState,
+          _fileState,
           _fileCache,
+          replaceFileState,
+          key,
+          errorFileState,
           _args6 = arguments;
         return _regenerator.default.wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
@@ -500,15 +564,15 @@ var FileFetcherImpl = /*#__PURE__*/function () {
               copiedId = copiedFileWithMimeType.id, copiedMimeType = copiedFileWithMimeType.mimeType; // backend may return an "unknown" mediaType just after the copy
               // it's better to deduce it from "copiedMimeType" using getMediaTypeFromMimeType()
               mediaType = copiedMimeType ? (0, _mediaTypeUtils.getMediaTypeFromMimeType)(copiedMimeType) : 'unknown';
-              copiedFileState = (0, _fileState.mapMediaFileToFileState)({
+              copiedFileState = (0, _fileState2.mapMediaFileToFileState)({
                 data: copiedFileWithMimeType
               });
               fileCache = cache.get(copiedId);
               subject = fileCache || (0, _createMediaSubject.createMediaSubject)(); // if we were passed a "preview", we propagate it into the copiedFileState
-              previewOverride = !(0, _fileState.isErrorFileState)(copiedFileState) && !!preview ? {
+              previewOverride = !(0, _fileState2.isErrorFileState)(copiedFileState) && !!preview ? {
                 preview: preview
               } : {};
-              _context6.t2 = !(0, _fileState.isFinalFileState)(copiedFileState) &&
+              _context6.t2 = !(0, _fileState2.isFinalFileState)(copiedFileState) &&
               // mimeType should always be returned by "copyFileWithToken"
               // but in case it's not, we don't want to penalize "copyFile"
               copiedMimeType;
@@ -522,53 +586,65 @@ 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), (0, _overrideMediaTypeIfUnknown.overrideMediaTypeIfUnknown)(copiedFileState, mediaType)), previewOverride));
+              fileState = _objectSpread(_objectSpread(_objectSpread({}, copiedFileState), (0, _overrideMediaTypeIfUnknown.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), (0, _overrideMediaTypeIfUnknown.overrideMediaTypeIfUnknown)(remoteFileState, mediaType)), !(0, _fileState.isErrorFileState)(remoteFileState) && previewOverride));
+                  var fileState = _objectSpread(_objectSpread(_objectSpread({}, remoteFileState), (0, _overrideMediaTypeIfUnknown.overrideMediaTypeIfUnknown)(remoteFileState, mediaType)), !(0, _fileState2.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:
-              if (!(0, _fileState.isProcessingFileState)(copiedFileState)) {
-                subject.next(_objectSpread(_objectSpread({}, copiedFileState), !(0, _fileState.isErrorFileState)(copiedFileState) && previewOverride));
+            case 38:
+              if (!(0, _fileState2.isProcessingFileState)(copiedFileState)) {
+                _fileState = _objectSpread(_objectSpread({}, copiedFileState), !(0, _fileState2.isErrorFileState)(copiedFileState) && previewOverride);
+                subject.next(_fileState);
+                this.setFileState(copiedId, _fileState);
               }
-            case 37:
+            case 39:
               if (!cache.has(copiedId)) {
                 (0, _fileStreamsCache.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, (0, _createMediaSubject.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/cjs/client/media-client.js

@@ -14,6 +14,7 @@ var _eventemitter = require("eventemitter2");
 var _mediaStore = require("./media-store");
 var _fileFetcher = require("./file-fetcher");
 var _stargateClient = require("./stargate-client");
+var _mediaState = require("@atlaskit/media-state");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var MediaClient = /*#__PURE__*/function () {
@@ -21,20 +22,31 @@ var MediaClient = /*#__PURE__*/function () {
 
   // 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] : _mediaState.mediaStore;
+    var mediaApi = arguments.length > 2 ? arguments[2] : undefined;
     (0, _classCallCheck2.default)(this, MediaClient);
     this.mediaClientConfig = mediaClientConfig;
-    this.featureFlags = featureFlags;
-    this.mediaStore = new _mediaStore.MediaStore({
+    this.store = store;
+    this.mediaStore = mediaApi !== null && mediaApi !== void 0 ? mediaApi : new _mediaStore.MediaStore({
       authProvider: mediaClientConfig.authProvider,
       initialAuth: mediaClientConfig.initialAuth
-    }, featureFlags);
+    });
     this.config = mediaClientConfig;
-    this.file = new _fileFetcher.FileFetcherImpl(this.mediaStore);
+    this.file = new _fileFetcher.FileFetcherImpl(this.mediaStore, this.store);
     this.eventEmitter = new _eventemitter.EventEmitter2();
     this.stargate = new _stargateClient.StargateClient(mediaClientConfig.stargateBaseUrl);
   }
+
+  /**
+   * @internal
+   */
   (0, _createClass2.default)(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);
@@ -91,7 +103,7 @@ var MediaClient = /*#__PURE__*/function () {
               });
             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/cjs/client/media-store/index.js

@@ -30,8 +30,8 @@ var _request3 = require("../../utils/request");
 var _helpers = require("../../utils/request/helpers");
 var _resolveAuth = require("./resolveAuth");
 var _error = require("./error");
-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) { (0, _defineProperty2.default)(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) { (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 MEDIA_API_REGION = 'media-api-region';
 var MEDIA_API_ENVIRONMENT = 'media-api-environment';
 var defaultImageOptions = {
@@ -51,7 +51,7 @@ var jsonHeaders = {
   'Content-Type': 'application/json'
 };
 var MediaStore = /*#__PURE__*/function () {
-  function MediaStore(config, featureFlags) {
+  function MediaStore(config) {
     var _this = this;
     (0, _classCallCheck2.default)(this, MediaStore);
     (0, _defineProperty2.default)(this, "resolveAuth", function (authContext) {
@@ -61,7 +61,6 @@ var MediaStore = /*#__PURE__*/function () {
       return (0, _resolveAuth.resolveInitialAuth)(_this.config.initialAuth);
     });
     this.config = config;
-    this.featureFlags = featureFlags;
   }
   (0, _createClass2.default)(MediaStore, [{
     key: "removeCollectionFile",

package/dist/cjs/client/mobile-upload.js

@@ -7,19 +7,46 @@ Object.defineProperty(exports, "__esModule", {
 exports.MobileUploadImpl = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaCommon = require("@atlaskit/media-common");
+var _mediaState = require("@atlaskit/media-state");
 var _fileStreamsCache = require("../file-streams-cache");
 var _createFileDataLoader = require("../utils/createFileDataLoader");
 var _mobileUpload = require("../utils/mobileUpload");
 var MobileUploadImpl = /*#__PURE__*/function () {
-  function MobileUploadImpl(mediaStore) {
+  function MobileUploadImpl(mediaApi) {
+    var _this = this;
+    var store = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _mediaState.mediaStore;
     (0, _classCallCheck2.default)(this, MobileUploadImpl);
-    this.dataloader = (0, _createFileDataLoader.createFileDataloader)(mediaStore);
+    (0, _defineProperty2.default)(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
+      };
+    });
+    (0, _defineProperty2.default)(this, "setFileState", function (id, fileState) {
+      _this.store.setState(function (state) {
+        state.files[id] = fileState;
+      });
+    });
+    this.store = store;
+    this.dataloader = (0, _createFileDataLoader.createFileDataloader)(mediaApi);
     this.servicesCache = (0, _mobileUpload.createServicesCache)();
   }
   (0, _createClass2.default)(MobileUploadImpl, [{
     key: "notifyUploadStart",
     value: function notifyUploadStart(event) {
+      var _this2 = this;
       var fileId = event.fileId,
         collectionName = event.collectionName,
         occurrenceKey = event.occurrenceKey,
@@ -43,6 +70,15 @@ var MobileUploadImpl = /*#__PURE__*/function () {
       };
       var service = (0, _mobileUpload.createMobileUploadService)((0, _mobileUpload.createMobileUploadStateMachine)(this.dataloader, initialState, collectionName));
       var subject = (0, _mobileUpload.createMobileFileStateSubject)(service);
+      subject.subscribe({
+        next: function next(fileState) {
+          _this2.setFileState(fileId, fileState);
+        },
+        error: function error(err) {
+          var errorFileState = _this2.getErrorFileState(err, fileId, occurrenceKey);
+          _this2.setFileState(fileId, errorFileState);
+        }
+      });
       this.servicesCache.set(fileId, service);
       (0, _fileStreamsCache.getFileStreamsCache)().set(fileId, subject);
     }

package/dist/cjs/index.js

@@ -135,6 +135,12 @@ Object.defineProperty(exports, "getDimensionsFromBlob", {
     return _getDimensionsFromBlob.getDimensionsFromBlob;
   }
 });
+Object.defineProperty(exports, "getFileStreamsCache", {
+  enumerable: true,
+  get: function get() {
+    return _fileStreamsCache.getFileStreamsCache;
+  }
+});
 Object.defineProperty(exports, "getMediaClient", {
   enumerable: true,
   get: function get() {
@@ -384,6 +390,7 @@ var _globalMediaEventEmitter = require("./globalMediaEventEmitter");
 var _url = require("./utils/url");
 var _mediaSubscribable = require("./utils/mediaSubscribable");
 var _constants = require("./constants");
+var _fileStreamsCache = require("./file-streams-cache");
 var _mediaTypeUtils = require("@atlaskit/media-common/mediaTypeUtils");
 // TODO MEX-659 Remove these exports when all the usages from media-client are replaced with media-common.
 

package/dist/cjs/models/file-state.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapMediaItemToFileState = exports.mapMediaFileToFileState = exports.isUploadingFileState = exports.isProcessingFileState = exports.isProcessedFileState = exports.isPreviewableFileState = exports.isImageRepresentationReady = exports.isFinalFileState = exports.isErrorFileState = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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) { (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 isUploadingFileState = function isUploadingFileState(fileState) {
   return fileState.status === 'uploading';
 };

package/dist/cjs/test-helpers/_numbers.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.numbers = numbers;
+function numbers(count) {
+  return Array.from(Array(count).keys());
+}

package/dist/cjs/test-helpers/authProvider.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryBookAuthProvider = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _collectionNames = require("./collectionNames");
+var cachedAuths = {};
+var authProviderBaseURL = 'https://media-playground.dev.atl-paas.net/';
+var StoryBookAuthProvider = /*#__PURE__*/function () {
+  function StoryBookAuthProvider() {
+    (0, _classCallCheck2.default)(this, StoryBookAuthProvider);
+  }
+  (0, _createClass2.default)(StoryBookAuthProvider, null, [{
+    key: "create",
+    value: function create(isAsapEnvironment, access) {
+      var loadTenatAuth = /*#__PURE__*/function () {
+        var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(collectionName) {
+          var environment, headers, config, url, response;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                environment = isAsapEnvironment ? 'asap' : '';
+                headers = new Headers();
+                headers.append('Content-Type', 'application/json; charset=utf-8');
+                headers.append('Accept', 'text/plain, */*; q=0.01');
+                config = {
+                  method: 'POST',
+                  headers: headers,
+                  body: access ? JSON.stringify({
+                    access: access
+                  }) : undefined
+                };
+                url = "".concat(authProviderBaseURL, "/token/tenant?collection=").concat(collectionName, "&environment=").concat(environment);
+                response = fetch(url, config); // We leverage the fact, that our internal /toke/tenant API returns data in the same format as Auth
+                _context.next = 9;
+                return response;
+              case 9:
+                _context.next = 11;
+                return _context.sent.json();
+              case 11:
+                return _context.abrupt("return", _context.sent);
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function loadTenatAuth(_x) {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      return function (authContext) {
+        var collectionName = authContext && authContext.collectionName || _collectionNames.defaultCollectionName;
+        var accessStr = access ? JSON.stringify(access) : '';
+        var cacheKey = "".concat(collectionName, "-").concat(accessStr, "-").concat(isAsapEnvironment);
+        if (!cachedAuths[cacheKey]) {
+          cachedAuths[cacheKey] = loadTenatAuth(collectionName);
+        }
+        return cachedAuths[cacheKey];
+      };
+    }
+  }]);
+  return StoryBookAuthProvider;
+}();
+exports.StoryBookAuthProvider = StoryBookAuthProvider;

package/dist/cjs/test-helpers/collectionNames.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onlyAnimatedGifsCollectionName = exports.fileCollectionName = exports.defaultMediaPickerCollectionName = exports.defaultCollectionName = exports.collectionNames = void 0;
+var defaultCollectionName = 'MediaServicesSample';
+exports.defaultCollectionName = defaultCollectionName;
+var onlyAnimatedGifsCollectionName = 'only-animated-gifs';
+exports.onlyAnimatedGifsCollectionName = onlyAnimatedGifsCollectionName;
+var fileCollectionName = "".concat(defaultCollectionName, "Files");
+exports.fileCollectionName = fileCollectionName;
+var defaultMediaPickerCollectionName = 'mediapicker-test';
+exports.defaultMediaPickerCollectionName = defaultMediaPickerCollectionName;
+var collectionNames = [defaultCollectionName, 'MediaServicesSampleAtlaskit', 'MediaServicesSampleHulk', 'MediaServicesSampleFabric', fileCollectionName, onlyAnimatedGifsCollectionName, defaultMediaPickerCollectionName];
+exports.collectionNames = collectionNames;