@atlaskit/media-ui 28.3.3 → 28.4.0

package/dist/cjs/customMediaPlayer/mediaPlayer/testHelpers/_MockedMediaProvider.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMockedMediaProvider = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
+var _testHelpers = require("@atlaskit/media-client/test-helpers");
+var _mediaState = require("@atlaskit/media-state");
+var _testHelpers2 = require("@atlaskit/media-client-react/test-helpers");
+var _helpers = require("./_helpers");
+var createSubscribeFileItem = function createSubscribeFileItem(_ref) {
+  var mediaApi = _ref.mediaApi,
+    mediaStore = _ref.mediaStore;
+  var mediaClient = new _mediaClient.MediaClient({
+    authProvider: function () {
+      var _authProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", {
+                clientId: 'MockedMediaProvider-uploader-client-id',
+                token: 'MockedMediaProvider-uploader-token',
+                baseUrl: 'MockedMediaProvider-uploader-service-host'
+              });
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function authProvider() {
+        return _authProvider.apply(this, arguments);
+      }
+      return authProvider;
+    }()
+  }, mediaStore, mediaApi);
+  return function (fileId, collectionName) {
+    mediaClient.file.getFileState(fileId, {
+      collectionName: collectionName
+    });
+  };
+};
+var createGetLocalPreviewHelper = function createGetLocalPreviewHelper(mediaStore) {
+  return function (fileId) {
+    var fileState = mediaStore.getState().files[fileId];
+    return (0, _mediaClient.isUploadingFileState)(fileState) ? fileState.preview : undefined;
+  };
+};
+var createUploadHelper = function createUploadHelper(_ref2) {
+  var setItems = _ref2.setItems,
+    mediaStore = _ref2.mediaStore,
+    subscribeToFileState = _ref2.subscribeToFileState;
+  return function (fileItem, progress, binary) {
+    if (progress === 'error') {
+      mediaStore.setState(function (state) {
+        state.files[fileItem.id] = (0, _testHelpers.createErrorFileState)(fileItem);
+      });
+    } else if (progress === 1) {
+      // Complete Upload
+      var uploadedFileItem = (0, _testHelpers.createProcessingFileItem)(fileItem, 0);
+      setItems(uploadedFileItem);
+      // TODO: This set state is probaly unneeded
+      mediaStore.setState(function (state) {
+        state.files[fileItem.id] = (0, _testHelpers.createFileState)(uploadedFileItem);
+      });
+
+      // A subscription to file state is required after the upload is complete to start polling from the mocked backend
+      // TODO: This subscription is removing the local preview from the store
+      subscribeToFileState(fileItem.id, fileItem.collection);
+    } else {
+      setItems((0, _testHelpers.createEmptyFileItem)(fileItem.id, fileItem.collection));
+      var localBinary = typeof binary === 'string' ? (0, _helpers.dataURItoBlob)(binary) : binary;
+      var uploadingFileState = (0, _testHelpers.createUploadingFileState)(fileItem, progress, localBinary);
+      mediaStore.setState(function (state) {
+        state.files[fileItem.id] = uploadingFileState;
+      });
+    }
+  };
+};
+var createProcessHelper = function createProcessHelper(_ref3) {
+  var setItems = _ref3.setItems;
+  return function (fileItem, progress) {
+    setItems((0, _testHelpers.createProcessingFileItem)(fileItem, progress));
+  };
+};
+var createMockedMediaProviderWithApi = function createMockedMediaProviderWithApi(_ref4) {
+  var mediaApi = _ref4.mediaApi,
+    mediaStore = _ref4.mediaStore,
+    mediaClientConfig = _ref4.mediaClientConfig,
+    mediaSettings = _ref4.mediaSettings;
+  return function (_ref5) {
+    var children = _ref5.children;
+    return /*#__PURE__*/_react.default.createElement(_testHelpers2.MockedMediaProvider, {
+      mediaStore: mediaStore,
+      mockedMediaApi: mediaApi,
+      mediaClientConfig: mediaClientConfig,
+      mediaSettings: mediaSettings
+    }, children);
+  };
+};
+/**
+ * Creates a MockedMediaProvider with the given optional parameters mediaStore, initialItems and mediaClientConfig.
+ * NOTE:
+ * If mediaStore is skipped, this function will create a new default one.
+ * This is useful to keep stores in isolation when running unit tests.
+ * Skipping mediaStore is not recommended when using this method in React components,
+ * since it will recreate a default store on every rerender.
+ */
+var createMockedMediaProvider = exports.createMockedMediaProvider = function createMockedMediaProvider(_ref6) {
+  var _ref6$mediaStore = _ref6.mediaStore,
+    mediaStore = _ref6$mediaStore === void 0 ? (0, _mediaState.createMediaStore)() : _ref6$mediaStore,
+    initialItems = _ref6.initialItems,
+    mediaClientConfig = _ref6.mediaClientConfig,
+    mediaSettings = _ref6.mediaSettings;
+  var _createMockedMediaApi = (0, _testHelpers.createMockedMediaApi)(initialItems),
+    mediaApi = _createMockedMediaApi.mediaApi,
+    setItems = _createMockedMediaApi.setItems,
+    getItem = _createMockedMediaApi.getItem;
+  var subscribeToFileState = createSubscribeFileItem({
+    mediaStore: mediaStore,
+    mediaApi: mediaApi
+  });
+  var uploadItem = createUploadHelper({
+    setItems: setItems,
+    mediaStore: mediaStore,
+    subscribeToFileState: subscribeToFileState
+  });
+  var processItem = createProcessHelper({
+    setItems: setItems
+  });
+  var getLocalPreview = createGetLocalPreviewHelper(mediaStore);
+  var MockedMediaProvider = createMockedMediaProviderWithApi({
+    mediaStore: mediaStore,
+    mediaApi: mediaApi,
+    mediaClientConfig: mediaClientConfig,
+    mediaSettings: mediaSettings
+  });
+  return {
+    mediaApi: mediaApi,
+    mediaStore: mediaStore,
+    setItems: setItems,
+    getItem: getItem,
+    uploadItem: uploadItem,
+    processItem: processItem,
+    getLocalPreview: getLocalPreview,
+    MockedMediaProvider: MockedMediaProvider
+  };
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/testHelpers/_helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normaliseInput = exports.dataURItoBlob = void 0;
+var normaliseInput = exports.normaliseInput = function normaliseInput(input) {
+  return !input ? [] : input instanceof Array ? input : [input];
+};
+var dataURItoBlob = exports.dataURItoBlob = function dataURItoBlob(dataURI) {
+  var byteString = atob(dataURI.split(',')[1]);
+  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+  var ab = new ArrayBuffer(byteString.length);
+  var ia = new Uint8Array(ab);
+  for (var i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  var blob = new Blob([ab], {
+    type: mimeString
+  });
+  return blob;
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/useTextTracks.js

@@ -44,19 +44,20 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, me
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _ref3 = (0, _slicedToArray2.default)(_ref, 2), artifactName = _ref3[0], mimeType = _ref3[1].mimeType;
+                _context.prev = 1;
                 artifacts = fileState.artifacts;
                 _context.t0 = artifacts;
                 if (!_context.t0) {
-                  _context.next = 7;
+                  _context.next = 8;
                   break;
                 }
-                _context.next = 6;
+                _context.next = 7;
                 return mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaStore.getArtifactBinary(artifacts, artifactName, {
                   collectionName: collectionName
                 });
-              case 6:
-                _context.t0 = _context.sent;
               case 7:
+                _context.t0 = _context.sent;
+              case 8:
                 baseUrl = _context.t0;
                 src = baseUrl && URL.createObjectURL(baseUrl) || '';
                 _decodeMimetype = decodeMimetype(mimeType), lang = _decodeMimetype.lang, label = _decodeMimetype.label;
@@ -66,11 +67,14 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, me
                   label: label,
                   artifactName: artifactName
                 });
-              case 11:
+              case 14:
+                _context.prev = 14;
+                _context.t1 = _context["catch"](1);
+              case 16:
               case "end":
                 return _context.stop();
             }
-          }, _callee);
+          }, _callee, null, [[1, 14]]);
         }));
         return function (_x) {
           return _ref2.apply(this, arguments);
@@ -80,11 +84,13 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, me
           captions: {
             selectedTrackIndex: 1,
             tracks: tracks.filter(function (track) {
-              return !!track.src;
+              return !!(track !== null && track !== void 0 && track.src);
             })
           }
         });
       });
+    } else {
+      setTextTracks(undefined);
     }
   }, [fileState, collectionName, mediaClient]);
   return textTracks;

package/dist/es2019/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.3.2";
+const packageVersion = "28.3.4";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export const CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/apiFeedback.js

@@ -11,30 +11,36 @@ function ApiFeedback({
   errorDescription,
   intl
 }) {
+  let flag;
+  if (notificationType === 'success') {
+    flag = /*#__PURE__*/React.createElement(AutoDismissFlag, {
+      id: 'success',
+      icon: /*#__PURE__*/React.createElement(SuccessIcon, {
+        label: "Success",
+        color: "var(--ds-icon-success, #22A06B)",
+        LEGACY_size: "medium",
+        spacing: "spacious"
+      }),
+      key: 'success',
+      title: intl.formatMessage(messages.success),
+      description: successDescription
+    });
+  } else if (notificationType === 'error') {
+    flag = /*#__PURE__*/React.createElement(AutoDismissFlag, {
+      id: 'error',
+      icon: /*#__PURE__*/React.createElement(ErrorIcon, {
+        label: "Error",
+        color: "var(--ds-icon-danger, #C9372C)",
+        LEGACY_size: "medium",
+        spacing: "spacious"
+      }),
+      key: 'error',
+      title: intl.formatMessage(messages.error),
+      description: errorDescription
+    });
+  }
   return /*#__PURE__*/React.createElement(FlagGroup, {
     onDismissed: onDismissed
-  }, notificationType === 'success' ? /*#__PURE__*/React.createElement(AutoDismissFlag, {
-    id: 'success',
-    icon: /*#__PURE__*/React.createElement(SuccessIcon, {
-      label: "Success",
-      color: "var(--ds-icon-success, #22A06B)",
-      LEGACY_size: "medium",
-      spacing: "spacious"
-    }),
-    key: 'success',
-    title: intl.formatMessage(messages.success),
-    description: successDescription
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), notificationType === 'error' ? /*#__PURE__*/React.createElement(AutoDismissFlag, {
-    id: 'error',
-    icon: /*#__PURE__*/React.createElement(ErrorIcon, {
-      label: "Error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_size: "medium",
-      spacing: "spacious"
-    }),
-    key: 'error',
-    title: intl.formatMessage(messages.error),
-    description: errorDescription
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  }, flag);
 }
 export default injectIntl(ApiFeedback);

package/dist/es2019/customMediaPlayer/mediaPlayer/captionsSelectControls.js

@@ -32,7 +32,8 @@ export const _CaptionsSelectControls = /*#__PURE__*/memo(({
     position: "top"
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: areCaptionsEnabled ? 'default' : 'subtle',
-    onClick: () => onCaptionsEnabledChange(!areCaptionsEnabled)
+    onClick: () => onCaptionsEnabledChange(!areCaptionsEnabled),
+    "aria-label": closedCaptions
   }, "CC")), /*#__PURE__*/React.createElement(DropdownMenu, {
     placement: "top",
     shouldRenderToParent: true,

package/dist/es2019/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -4,15 +4,13 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { useFileState, useMediaClient, useMediaSettings } from '@atlaskit/media-client-react';
 import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.3.2";
-const MediaPlayerBaseWithContext = withMediaAnalyticsContext({
-  packageVersion,
-  packageName,
-  componentName: 'MediaPlayer',
-  component: 'MediaPlayer'
-})(MediaPlayerBase);
-export const MediaPlayer = props => {
+const packageVersion = "28.3.4";
+export const MediaPlayerWihtoutContext = props => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const mediaSettings = useMediaSettings();
   const mediaClient = useMediaClient();
   const {
@@ -25,8 +23,16 @@ export const MediaPlayer = props => {
     collectionName
   });
   const textTracks = useTextTracks(fileState, mediaClient, collectionName);
-  return /*#__PURE__*/React.createElement(MediaPlayerBaseWithContext, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(MediaPlayerBase, _extends({}, props, {
+    fileState: fileState,
     mediaSettings: mediaSettings,
-    textTracks: textTracks
+    textTracks: textTracks,
+    createAnalyticsEvent: createAnalyticsEvent
   }));
-};
+};
+export const MediaPlayer = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'MediaPlayer',
+  component: 'MediaPlayer'
+})(MediaPlayerWihtoutContext);