@atlaskit/media-viewer 46.1.0 → 46.2.2

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @atlaskit/media-viewer
 
+## 46.2.2
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
+## 46.2.1
+
+### Patch Changes
+
+- [`a44c7c42fa7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a44c7c42fa7) - Added payload publisher wrapper for logging ufo events in examples
+- [`5a79ea6f7d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a79ea6f7d6) - Add support for assessing the mimetype of a file when deciding what viewer to show
+- [`065ae19cb44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/065ae19cb44) - Enforced "up to date" logged feature flags via type checks
+- Updated dependencies
+
+## 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/header.js

@@ -117,10 +117,10 @@ var Header = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFileTypeText", function (item) {
       // render appropriate header if its a code/email item and the feature flag is enabled
-      if ((0, _codeViewer.isCodeViewerItem)(item.name)) {
+      if ((0, _codeViewer.isCodeViewerItem)(item.name, item.mimeType)) {
         // gather language and extension
         // i.e test.py would have a language of 'python' and an extension of 'py'
-        var language = (0, _codeViewer.getLanguageType)(item.name);
+        var language = (0, _codeViewer.getLanguageType)(item.name, item.mimeType);
         var ext = (0, _codeViewer.getExtension)(item.name); // specific cases for if we want a certain word translated in other languages
 
         switch (ext) {

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({
@@ -173,8 +238,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         previewCount: previewCount
       };
 
-      if ((0, _codeViewer.isCodeViewerItem)(fileState.name)) {
-        return /*#__PURE__*/_react.default.createElement(_codeViewer2.CodeViewer, (0, _extends2.default)({
+      if ((0, _codeViewer.isCodeViewerItem)(fileState.name, fileState.mimeType)) {
+        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/media-viewer.js

@@ -212,7 +212,14 @@ var MediaViewer = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: _analytics.component,
   componentName: _analytics.componentName
 }, {
-  filterFeatureFlags: []
+  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
+    newCardExperience: false,
+    captions: false,
+    timestampOnVideo: false,
+    observedWidth: false,
+    mediaInline: false,
+    folderUploads: false
+  })
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerComponent, {
   enforceContext: false
 })));

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.2",
 	"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/cjs/viewers/codeViewer/index.js

@@ -225,7 +225,7 @@ var CodeViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "getCodeLanguage",
     value: function getCodeLanguage(item) {
       if (!(0, _mediaClient.isErrorFileState)(item)) {
-        return (0, _codeViewer.getLanguageType)(item.name);
+        return (0, _codeViewer.getLanguageType)(item.name, item.mimeType);
       }
 
       return _util.DEFAULT_LANGUAGE;

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/header.js

@@ -70,10 +70,10 @@ export class Header extends React.Component {
 
     _defineProperty(this, "renderFileTypeText", item => {
       // render appropriate header if its a code/email item and the feature flag is enabled
-      if (isCodeViewerItem(item.name)) {
+      if (isCodeViewerItem(item.name, item.mimeType)) {
         // gather language and extension
         // i.e test.py would have a language of 'python' and an extension of 'py'
-        const language = getLanguageType(item.name);
+        const language = getLanguageType(item.name, item.mimeType);
         const ext = getExtension(item.name); // specific cases for if we want a certain word translated in other languages
 
         switch (ext) {

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", () => {
@@ -103,7 +124,7 @@ export class ItemViewerBase extends React.Component {
       previewCount
     };
 
-    if (isCodeViewerItem(fileState.name)) {
+    if (isCodeViewerItem(fileState.name, fileState.mimeType)) {
       return /*#__PURE__*/React.createElement(CodeViewer, _extends({
         onSuccess: this.onSuccess,
         onError: this.onLoadFail
@@ -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/media-viewer.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
 import { IntlProvider, injectIntl } from 'react-intl-next';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -172,7 +172,14 @@ export const MediaViewer = withMediaAnalyticsContext({
   component,
   componentName
 }, {
-  filterFeatureFlags: []
+  filterFeatureFlags: filterFeatureFlagNames({
+    newCardExperience: false,
+    captions: false,
+    timestampOnVideo: false,
+    observedWidth: false,
+    mediaInline: false,
+    folderUploads: false
+  })
 })(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
   enforceContext: false
 })));