@atlaskit/media-viewer 46.1.0 → 46.2.0

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @atlaskit/media-viewer
 
+## 46.2.0
+
+### Minor Changes
+
+- [`60136fd1e34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60136fd1e34) - Replicate Media Viewer Reliability Events using UFO client library
+- [`f862d5ae7aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f862d5ae7aa) - remove RxJs peer dependency
+- [`dea110be493`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dea110be493) - [ux] MEX-1334 Implemented code splitting in media-viewer
+- [`118f3af101f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/118f3af101f) - Media Client APIs has been updated to use MediaSubscribable which provides subscription functionality (similar to RxJs observables).
+  It exposes subscribe method that is called with MediaObserver as an argument and returns MediaSubscription.
+  MediaSubscription exposes unsubscribe method.
+
+  getFileState:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const fileStateSubscribable: MediaSubscribable<FileState> = mediaClient.file.getFileState(id);
+
+  const mediaObserver: MediaObserver<FileState> = {
+    next: (fileState) => {
+      nextCallback(fileState)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = fileStateSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+  upload:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const uploadFileSubscribable: MediaSubscribable<FileState> = mediaClient.file.upload(uploadableFile);
+
+  const mediaObserver: MediaObserver<FileState> = {
+    next: (fileState) => {
+      nextCallback(fileState)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = uploadFileSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+  getItems:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const collectionItemsSubscribable: MediaSubscribable<MediaCollectionItem[]> = mediaClient.collection.getItems(collectionName);
+
+  const mediaObserver: MediaObserver<MediaCollectionItem[]> = {
+    next: (items) => {
+      nextCallback(items)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = collectionItemsSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 46.1.0
 
 ### Minor Changes

package/dist/cjs/analytics/ufoExperiences.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.succeedMediaFileUfoExperience = exports.startMediaFileUfoExperience = exports.failMediaFileUfoExperience = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ufo = require("@atlaskit/ufo");
+
+var _version = require("../version.json");
+
+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; }
+
+var ufoExperience;
+
+var getExperience = function getExperience() {
+  if (!ufoExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-viewer'
+      },
+      type: _ufo.ExperienceTypes.Experience,
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+    };
+    ufoExperience = new _ufo.UFOExperience('media-file', inlineExperience);
+  }
+
+  return ufoExperience;
+};
+
+var startMediaFileUfoExperience = function startMediaFileUfoExperience() {
+  getExperience().start();
+};
+
+exports.startMediaFileUfoExperience = startMediaFileUfoExperience;
+
+var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
+  getExperience().success({
+    metadata: {
+      fileAttributes: properties,
+      packageName: _version.name,
+      packageVersion: _version.version
+    }
+  });
+};
+
+exports.succeedMediaFileUfoExperience = succeedMediaFileUfoExperience;
+
+var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
+  var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
+    packageName: _version.name,
+    packageVersion: _version.version
+  });
+
+  getExperience().failure({
+    metadata: refinedMetadata
+  });
+};
+
+exports.failMediaFileUfoExperience = failMediaFileUfoExperience;

package/dist/cjs/errorMessage.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getErrorMessageFromError = exports.errorReasonToMessages = exports.default = exports.ErrorMessage = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -37,6 +39,12 @@ var _loadFailed = require("./analytics/events/operational/loadFailed");
 
 var _previewUnsupported = require("./analytics/events/operational/previewUnsupported");
 
+var _ufoExperiences = require("./analytics/ufoExperiences");
+
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -100,6 +108,15 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       if (supressAnalytics !== true) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         (0, _analytics.fireAnalytics)(payload, props);
+
+        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+
+        if (Object.keys(rawPayload).includes('status')) {
+          delete rawPayload['status'];
+        }
+
+        var failMediaFileUfoExperiencePayload = rawPayload;
+        (0, _ufoExperiences.failMediaFileUfoExperience)(failMediaFileUfoExperiencePayload);
       }
     }
   }, {

package/dist/cjs/item-viewer.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFileStateItem = exports.isExternalImageItem = exports.ItemViewerBase = exports.ItemViewer = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -25,6 +27,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+
 var _mediaClient = require("@atlaskit/media-client");
 
 var _reactIntlNext = require("react-intl-next");
@@ -35,14 +39,6 @@ var _codeViewer = require("@atlaskit/media-ui/codeViewer");
 
 var _domain = require("./domain");
 
-var _image = require("./viewers/image");
-
-var _video = require("./viewers/video");
-
-var _doc = require("./viewers/doc");
-
-var _codeViewer2 = require("./viewers/codeViewer");
-
 var _loading = require("./loading");
 
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
@@ -61,16 +57,81 @@ var _loadSucceeded = require("./analytics/events/operational/loadSucceeded");
 
 var _analytics = require("./analytics");
 
-var _audio = require("./viewers/audio");
-
 var _interactiveImg = require("./viewers/image/interactive-img");
 
 var _archiveViewerLoader = _interopRequireDefault(require("./viewers/archiveSidebar/archiveViewerLoader"));
 
+var _ufoExperiences = require("./analytics/ufoExperiences");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 
+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 || (0, _typeof2.default)(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 ImageViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/image'));
+    }).then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var VideoViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/video'));
+    }).then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var AudioViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/audio'));
+    }).then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var DocViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/doc'));
+    }).then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var CodeViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/codeViewer'));
+    }).then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+
 var isExternalImageItem = function isExternalImageItem(fileItem) {
   return fileItem === 'external-image';
 };
@@ -108,6 +169,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
           (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes), _this.props);
+          (0, _ufoExperiences.succeedMediaFileUfoExperience)(fileAttributes);
         }
       });
     });
@@ -120,6 +182,9 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
         fileId: 'external-image'
       }), _this.props);
+      (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+        fileId: 'external-image'
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
       _this.setState({
@@ -174,7 +239,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       };
 
       if ((0, _codeViewer.isCodeViewerItem)(fileState.name)) {
-        return /*#__PURE__*/_react.default.createElement(_codeViewer2.CodeViewer, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(CodeViewer, (0, _extends2.default)({
           onSuccess: this.onSuccess,
           onError: this.onLoadFail
         }, viewerProps));
@@ -182,28 +247,28 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       switch (fileState.mediaType) {
         case 'image':
-          return /*#__PURE__*/_react.default.createElement(_image.ImageViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
             contextId: contextId
           }, viewerProps));
 
         case 'audio':
-          return /*#__PURE__*/_react.default.createElement(_audio.AudioViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(AudioViewer, (0, _extends2.default)({
             showControls: showControls,
             onCanPlay: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
 
         case 'video':
-          return /*#__PURE__*/_react.default.createElement(_video.VideoViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(VideoViewer, (0, _extends2.default)({
             showControls: showControls,
             onCanPlay: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
 
         case 'doc':
-          return /*#__PURE__*/_react.default.createElement(_doc.DocViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(DocViewer, (0, _extends2.default)({
             onSuccess: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
@@ -326,6 +391,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       var id = identifier.id;
       (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id), this.props);
+      (0, _ufoExperiences.startMediaFileUfoExperience)();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName
       }).subscribe({

package/dist/cjs/styled.js

@@ -176,7 +176,7 @@ var Audio = _styledComponents.default.audio(_templateObject33 || (_templateObjec
 
 exports.Audio = Audio;
 
-var AudioCover = _styledComponents.default.img(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000000;\n"])));
+var AudioCover = _styledComponents.default.img(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 
 exports.AudioCover = AudioCover;
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.1.0",
+	"version": "46.2.0",
 	"sideEffects": false
 }

package/dist/cjs/viewers/archiveSidebar/styled.js

@@ -63,11 +63,11 @@ var Separator = _styledComponents.default.div(_templateObject10 || (_templateObj
 
 exports.Separator = Separator;
 
-var SidebarHeaderWrapper = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex\n  align-items: center\n  flex-shrink: 0,\n"])));
+var SidebarHeaderWrapper = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 
 exports.SidebarHeaderWrapper = SidebarHeaderWrapper;
 
-var SidebarHeaderIcon = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex\n  align-items: center\n  margin-right: 10px;\n  flex-shrink: 0\n"])));
+var SidebarHeaderIcon = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
 
 exports.SidebarHeaderIcon = SidebarHeaderIcon;
 

package/dist/es2019/analytics/ufoExperiences.js

@@ -0,0 +1,40 @@
+import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { name as packageName, version as packageVersion } from '../version.json';
+let ufoExperience;
+
+const getExperience = () => {
+  if (!ufoExperience) {
+    const inlineExperience = {
+      platform: {
+        component: 'media-viewer'
+      },
+      type: ExperienceTypes.Experience,
+      performanceType: ExperiencePerformanceTypes.InlineResult
+    };
+    ufoExperience = new UFOExperience('media-file', inlineExperience);
+  }
+
+  return ufoExperience;
+};
+
+export const startMediaFileUfoExperience = () => {
+  getExperience().start();
+};
+export const succeedMediaFileUfoExperience = properties => {
+  getExperience().success({
+    metadata: {
+      fileAttributes: properties,
+      packageName,
+      packageVersion
+    }
+  });
+};
+export const failMediaFileUfoExperience = properties => {
+  const refinedMetadata = { ...properties,
+    packageName,
+    packageVersion
+  };
+  getExperience().failure({
+    metadata: refinedMetadata
+  });
+};

package/dist/es2019/errorMessage.js

@@ -8,6 +8,7 @@ import { fireAnalytics } from './analytics';
 import { getPrimaryErrorReason, getSecondaryErrorReason } from './errors';
 import { createLoadFailedEvent } from './analytics/events/operational/loadFailed';
 import { createPreviewUnsupportedEvent } from './analytics/events/operational/previewUnsupported';
+import { failMediaFileUfoExperience } from './analytics/ufoExperiences';
 
 const errorLoadingFileImage = formatMessage => /*#__PURE__*/React.createElement(ErrorImage, {
   src: errorLoadingFile,
@@ -54,6 +55,15 @@ export class ErrorMessage extends React.Component {
     if (supressAnalytics !== true) {
       const payload = ErrorMessage.getEventPayload(error, fileId, fileState);
       fireAnalytics(payload, props);
+      const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes)
+      };
+
+      if (Object.keys(rawPayload).includes('status')) {
+        delete rawPayload['status'];
+      }
+
+      const failMediaFileUfoExperiencePayload = rawPayload;
+      failMediaFileUfoExperience(failMediaFileUfoExperiencePayload);
     }
   }
 

package/dist/es2019/item-viewer.js

@@ -1,15 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
 import { Outcome } from './domain';
-import { ImageViewer } from './viewers/image';
-import { VideoViewer } from './viewers/video';
-import { DocViewer } from './viewers/doc';
-import { CodeViewer } from './viewers/codeViewer';
 import { Spinner } from './loading';
 import deepEqual from 'deep-equal';
 import ErrorMessage from './errorMessage';
@@ -19,9 +16,29 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createCommencedEvent } from './analytics/events/operational/commenced';
 import { createLoadSucceededEvent } from './analytics/events/operational/loadSucceeded';
 import { fireAnalytics, getFileAttributes } from './analytics';
-import { AudioViewer } from './viewers/audio';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
+const ImageViewer = Loadable({
+  loader: () => import('./viewers/image').then(mod => mod.ImageViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const VideoViewer = Loadable({
+  loader: () => import('./viewers/video').then(mod => mod.VideoViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const AudioViewer = Loadable({
+  loader: () => import('./viewers/audio').then(mod => mod.AudioViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const DocViewer = Loadable({
+  loader: () => import('./viewers/doc').then(mod => mod.DocViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const CodeViewer = Loadable({
+  loader: () => import('./viewers/codeViewer').then(mod => mod.CodeViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
 export const isExternalImageItem = fileItem => fileItem === 'external-image';
 export const isFileStateItem = fileItem => !isExternalImageItem(fileItem);
 const initialState = {
@@ -41,6 +58,7 @@ export class ItemViewerBase extends React.Component {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), this.props);
+          succeedMediaFileUfoExperience(fileAttributes);
         }
       });
     });
@@ -55,6 +73,9 @@ export class ItemViewerBase extends React.Component {
       fireAnalytics(createLoadSucceededEvent({
         fileId: 'external-image'
       }), this.props);
+      succeedMediaFileUfoExperience({
+        fileId: 'external-image'
+      });
     });
 
     _defineProperty(this, "onExternalImgError", () => {
@@ -256,6 +277,7 @@ export class ItemViewerBase extends React.Component {
       id
     } = identifier;
     fireAnalytics(createCommencedEvent(id), this.props);
+    startMediaFileUfoExperience();
     this.subscription = mediaClient.file.getFileState(id, {
       collectionName: identifier.collectionName
     }).subscribe({

package/dist/es2019/styled.js

@@ -266,7 +266,7 @@ export const AudioCover = styled.img`
   width: 100%;
   height: 100%;
   object-fit: scale-down;
-  background-color: #000000;
+  background-color: #000;
 `;
 export const DefaultCoverWrapper = styled.div`
   width: 100%;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.1.0",
+	"version": "46.2.0",
 	"sideEffects": false
 }

package/dist/es2019/viewers/archiveSidebar/styled.js

@@ -80,15 +80,15 @@ export const Separator = styled.div`
   flex-shrink: 0;
 `;
 export const SidebarHeaderWrapper = styled.span`
-  display: flex
-  align-items: center
-  flex-shrink: 0,
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 `;
 export const SidebarHeaderIcon = styled.div`
-  display: flex
-  align-items: center
+  display: flex;
+  align-items: center;
   margin-right: 10px;
-  flex-shrink: 0
+  flex-shrink: 0;
 `;
 export const SidebarHeaderEntry = styled.div`
   flex: 1 1 auto;

package/dist/esm/analytics/ufoExperiences.js

@@ -0,0 +1,47 @@
+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; }
+
+import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { name as packageName, version as packageVersion } from '../version.json';
+var ufoExperience;
+
+var getExperience = function getExperience() {
+  if (!ufoExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-viewer'
+      },
+      type: ExperienceTypes.Experience,
+      performanceType: ExperiencePerformanceTypes.InlineResult
+    };
+    ufoExperience = new UFOExperience('media-file', inlineExperience);
+  }
+
+  return ufoExperience;
+};
+
+export var startMediaFileUfoExperience = function startMediaFileUfoExperience() {
+  getExperience().start();
+};
+export var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
+  getExperience().success({
+    metadata: {
+      fileAttributes: properties,
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  });
+};
+export var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
+  var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+
+  getExperience().failure({
+    metadata: refinedMetadata
+  });
+};

package/dist/esm/errorMessage.js

@@ -1,9 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
+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 _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; } }
@@ -18,6 +23,7 @@ import { fireAnalytics } from './analytics';
 import { getPrimaryErrorReason, getSecondaryErrorReason } from './errors';
 import { createLoadFailedEvent } from './analytics/events/operational/loadFailed';
 import { createPreviewUnsupportedEvent } from './analytics/events/operational/previewUnsupported';
+import { failMediaFileUfoExperience } from './analytics/ufoExperiences';
 
 var errorLoadingFileImage = function errorLoadingFileImage(formatMessage) {
   return /*#__PURE__*/React.createElement(ErrorImage, {
@@ -74,6 +80,15 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       if (supressAnalytics !== true) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         fireAnalytics(payload, props);
+
+        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+
+        if (Object.keys(rawPayload).includes('status')) {
+          delete rawPayload['status'];
+        }
+
+        var failMediaFileUfoExperiencePayload = rawPayload;
+        failMediaFileUfoExperience(failMediaFileUfoExperiencePayload);
       }
     }
   }, {

package/dist/esm/item-viewer.js

@@ -12,15 +12,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
 import { Outcome } from './domain';
-import { ImageViewer } from './viewers/image';
-import { VideoViewer } from './viewers/video';
-import { DocViewer } from './viewers/doc';
-import { CodeViewer } from './viewers/codeViewer';
 import { Spinner } from './loading';
 import deepEqual from 'deep-equal';
 import ErrorMessage from './errorMessage';
@@ -30,9 +27,59 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createCommencedEvent } from './analytics/events/operational/commenced';
 import { createLoadSucceededEvent } from './analytics/events/operational/loadSucceeded';
 import { fireAnalytics, getFileAttributes } from './analytics';
-import { AudioViewer } from './viewers/audio';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
+var ImageViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/image').then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var VideoViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/video').then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var AudioViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/audio').then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var DocViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/doc').then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var CodeViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/codeViewer').then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
 export var isExternalImageItem = function isExternalImageItem(fileItem) {
   return fileItem === 'external-image';
 };
@@ -66,6 +113,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), _this.props);
+          succeedMediaFileUfoExperience(fileAttributes);
         }
       });
     });
@@ -80,6 +128,9 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       fireAnalytics(createLoadSucceededEvent({
         fileId: 'external-image'
       }), _this.props);
+      succeedMediaFileUfoExperience({
+        fileId: 'external-image'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "onExternalImgError", function () {
@@ -288,6 +339,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       var id = identifier.id;
       fireAnalytics(createCommencedEvent(id), this.props);
+      startMediaFileUfoExperience();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName
       }).subscribe({

package/dist/esm/styled.js

@@ -66,7 +66,7 @@ export var CustomAudioPlayerWrapper = styled.div(_templateObject31 || (_template
 export var AudioPlayer = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  align-items: center;\n  justify-content: center;\n  width: 400px;\n  height: 400px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), blanketColor, borderRadius());
 AudioPlayer.displayName = 'AudioPlayer';
 export var Audio = styled.audio(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])));
-export var AudioCover = styled.img(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000000;\n"])));
+export var AudioCover = styled.img(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 export var DefaultCoverWrapper = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > * {\n    transform: scale(2);\n  }\n"])));
 export var DownloadButtonWrapper = styled.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin-top: 28px;\n  text-align: center;\n\n  button {\n    font-weight: bold;\n  }\n"])));
 export var CustomVideoPlayerWrapper = styled.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  video {\n    flex: 1;\n    width: 100vw;\n    height: 100vh;\n    max-height: 100vh;\n  }\n"])));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.1.0",
+	"version": "46.2.0",
 	"sideEffects": false
 }

package/dist/esm/viewers/archiveSidebar/styled.js

@@ -16,8 +16,8 @@ export var ArchiveSidebarFileEntryWrapper = styled.div(_templateObject7 || (_tem
 export var ArchiveLayout = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
 export var ArchiveViewerWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  display: flex;\n"])), ArchiveSideBarWidth);
 export var Separator = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: rgb(36, 50, 76);\n  flex-shrink: 0;\n"])), (gridSize() * 5 - 2) / 2);
-export var SidebarHeaderWrapper = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex\n  align-items: center\n  flex-shrink: 0,\n"])));
-export var SidebarHeaderIcon = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex\n  align-items: center\n  margin-right: 10px;\n  flex-shrink: 0\n"])));
+export var SidebarHeaderWrapper = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+export var SidebarHeaderIcon = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
 export var SidebarHeaderEntry = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), DN500);
 /** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
 

package/dist/types/analytics/ufoExperiences.d.ts

@@ -0,0 +1,13 @@
+import { FileAttributes } from '@atlaskit/media-common';
+import { RequestMetadata } from '@atlaskit/media-client';
+import { PrimaryErrorReason } from '../errors';
+export declare type UFOFailedEventPayload = {
+    failReason?: PrimaryErrorReason;
+    error?: string;
+    errorDetail?: string;
+    request?: RequestMetadata;
+    fileAttributes: FileAttributes;
+};
+export declare const startMediaFileUfoExperience: () => void;
+export declare const succeedMediaFileUfoExperience: (properties?: FileAttributes | undefined) => void;
+export declare const failMediaFileUfoExperience: (properties?: UFOFailedEventPayload | undefined) => void;

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

@@ -38,4 +38,4 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     private needsReset;
     private release;
 }
-export declare const ItemViewer: React.ForwardRefExoticComponent<Pick<Props, "onClose" | "mediaClient" | "identifier" | "contextId" | "previewCount" | "showControls" | "featureFlags"> & React.RefAttributes<any>>;
+export declare const ItemViewer: React.ForwardRefExoticComponent<Pick<Props, "mediaClient" | "identifier" | "onClose" | "featureFlags" | "showControls" | "contextId" | "previewCount"> & React.RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "46.1.0",
+  "version": "46.2.0",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,33 +32,34 @@
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^14.4.0",
+    "@atlaskit/media-client": "^15.0.0",
     "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-ui": "^20.0.0",
+    "@atlaskit/media-ui": "^21.0.0",
     "@atlaskit/side-navigation": "^1.2.3",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "@kenjiuno/msgreader": "^1.2.6",
     "deep-equal": "^1.0.1",
     "mime": "^2.4.6",
     "pdfjs-dist": "2.0.943",
     "perf-marks": "^1.5.0",
+    "react-loadable": "^5.1.0",
     "unzipit": "^1.3.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "rxjs": "^5.5.0",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^73.3.0",
-    "@atlaskit/media-core": "^32.2.0",
+    "@atlaskit/media-card": "^73.4.0",
+    "@atlaskit/media-core": "^32.3.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^29.2.0",
+    "@atlaskit/media-test-helpers": "^29.3.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -67,11 +68,13 @@
     "@types/deep-equal": "^1.0.1",
     "@types/enzyme": "^3.1.15",
     "@types/mime": "^2.0.1",
+    "@types/react-loadable": "^5.4.1",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
     "jsverify": "^0.8.3",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
+    "rxjs": "^5.5.0",
     "typescript": "3.9.6",
     "wait-for-expect": "^1.2.0"
   },