@atlaskit/media-ui 28.1.11 → 28.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 28.2.0
+
+### Minor Changes
+
+- [#152568](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152568)
+  [`f7e270ccfd27c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f7e270ccfd27c) -
+  Exposes new MediaPlayer component with support for upload and display Captions
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.1.11
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/index.js

@@ -16,7 +16,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props) : /*#__PURE__*/_react.default.createElement(_indexEmotion.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.1.11";
+var packageVersion = "28.2.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var CustomMediaPlayer = exports.CustomMediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UploadCaptionsForm", {
+  enumerable: true,
+  get: function get() {
+    return _uploadForm.default;
+  }
+});
+Object.defineProperty(exports, "createUploadCaptionsFn", {
+  enumerable: true,
+  get: function get() {
+    return _uploader.createUploadCaptionsFn;
+  }
+});
+var _uploader = require("./uploader");
+var _uploadForm = _interopRequireDefault(require("./uploadForm"));

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/languageDetector.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectLanguage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _LocaleSelect = require("@atlaskit/locale/LocaleSelect");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var normalize = function normalize(locale) {
+  return locale.toLowerCase();
+};
+var normalizeNoRegion = function normalizeNoRegion(locale) {
+  return normalize(locale).split('-')[0];
+};
+var detectVtt = function detectVtt(file, _content) {
+  // TODO: detect language from content
+
+  var name = file.name;
+  var sections = name.split('.');
+
+  // Section match with a default locale language and region
+  var _iterator = _createForOfIteratorHelper(sections),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var section = _step.value;
+        var detected = _LocaleSelect.defaultLocales.find(function (locale) {
+          return normalize(section) === normalize(locale.value);
+        });
+        if (detected) {
+          return {
+            v: section
+          };
+        }
+      },
+      _ret;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _ret = _loop();
+      if (_ret) return _ret.v;
+    }
+    // Section match with a default locale language
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(sections),
+    _step2;
+  try {
+    var _loop2 = function _loop2() {
+        var section = _step2.value;
+        var detected = _LocaleSelect.defaultLocales.find(function (locale) {
+          return normalizeNoRegion(section) === normalizeNoRegion(locale.value);
+        });
+        if (detected) {
+          return {
+            v: section
+          };
+        }
+      },
+      _ret2;
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      _ret2 = _loop2();
+      if (_ret2) return _ret2.v;
+    }
+
+    // Section results in a valid Intl.Locale
+    /* 
+    	new Intl.Locale is quite permisive with its input.
+    	It allows several text that do not really represent a locale. This is why we prioritize the previous checks 
+    */
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var _iterator3 = _createForOfIteratorHelper(sections),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var section = _step3.value;
+      try {
+        return new Intl.Locale(section).baseName;
+      } catch (error) {
+        // silence is golden
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return null;
+};
+var detectLanguage = exports.detectLanguage = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
+    var reader, result;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          reader = new FileReader();
+          result = new Promise(function (resolve, reject) {
+            reader.onload = function (event) {
+              var _event$target;
+              var text = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+              if (file.type === 'text/vtt') {
+                var language = detectVtt(file, text);
+                resolve(language);
+              }
+              resolve(null);
+            };
+            reader.onerror = function (event) {
+              var _event$target2;
+              reject((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.error);
+            };
+          });
+          reader.readAsText(file);
+          return _context.abrupt("return", result);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function detectLanguage(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/uploadForm.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _LocaleSelect = _interopRequireWildcard(require("@atlaskit/locale/LocaleSelect"));
+var _primitives = require("@atlaskit/primitives");
+var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
+var _form = require("@atlaskit/form");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _messages = require("../../../../../messages");
+var _formatLocale = require("../../formatLocale");
+var _languageDetector = require("./languageDetector");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var detectLocale = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, intl) {
+    var detectedLocale, defaultLocale, customLocale;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return (0, _languageDetector.detectLanguage)(file);
+        case 2:
+          detectedLocale = _context.sent;
+          if (!detectedLocale) {
+            _context.next = 9;
+            break;
+          }
+          defaultLocale = _LocaleSelect.defaultLocales.find(function (l) {
+            return l.value === detectedLocale;
+          });
+          if (!defaultLocale) {
+            _context.next = 7;
+            break;
+          }
+          return _context.abrupt("return", {
+            selectedLocale: defaultLocale,
+            locales: _LocaleSelect.defaultLocales
+          });
+        case 7:
+          customLocale = customLocaleOption(intl, detectedLocale);
+          return _context.abrupt("return", {
+            selectedLocale: customLocale,
+            locales: [].concat((0, _toConsumableArray2.default)(_LocaleSelect.defaultLocales), [customLocale])
+          });
+        case 9:
+          return _context.abrupt("return", {
+            selectedLocale: _LocaleSelect.defaultLocales[0],
+            locales: _LocaleSelect.defaultLocales
+          });
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function detectLocale(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var customLocaleOption = function customLocaleOption(intl, detectedLocale) {
+  return {
+    label: (0, _formatLocale.formatLocale)(intl.locale, detectedLocale),
+    value: detectedLocale
+  };
+};
+function UploadCaptionsForm(_ref2) {
+  var isOpen = _ref2.isOpen,
+    uploadFn = _ref2.uploadFn,
+    onClose = _ref2.onClose,
+    file = _ref2.file,
+    intl = _ref2.intl;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedLocale = _useState2[0],
+    setSelectedLocale = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    locales = _useState4[0],
+    setLocales = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isUploading = _useState6[0],
+    setIsUploading = _useState6[1];
+  var close = function close() {
+    onClose();
+    setSelectedLocale(undefined);
+    setLocales([]);
+  };
+  var submit = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(selectedLocale && file)) {
+              _context2.next = 9;
+              break;
+            }
+            setIsUploading(true);
+            _context2.prev = 2;
+            _context2.next = 5;
+            return uploadFn(file, selectedLocale.value);
+          case 5:
+            _context2.prev = 5;
+            setIsUploading(false);
+            close();
+            return _context2.finish(5);
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2,, 5, 9]]);
+    }));
+    return function submit() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    file && detectLocale(file, intl).then(function (_ref4) {
+      var selectedLocale = _ref4.selectedLocale,
+        locales = _ref4.locales;
+      setLocales(locales);
+      setSelectedLocale(selectedLocale);
+    });
+  }, [file, intl]);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: close
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, intl.formatMessage(_messages.messages.video_captions_upload_captions_form_header))), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    paddingBlock: "space.100",
+    paddingInline: "space.400"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.100"
+  }, /*#__PURE__*/_react.default.createElement(_file.default, {
+    label: "file",
+    color: "var(--ds-icon-accent-purple, #8270DB)"
+  }), file === null || file === void 0 ? void 0 : file.name, isUploading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    testId: "spinner",
+    interactionName: "uploading",
+    label: "Uploading",
+    size: "small"
+  }))), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    paddingBlock: "space.100",
+    paddingInline: "space.400"
+  }, /*#__PURE__*/_react.default.createElement(_form.Label, {
+    htmlFor: "captions-upload-language-picker"
+  }, intl.formatMessage(_messages.messages.video_captions_upload_captions_form_language_picker)), /*#__PURE__*/_react.default.createElement(_LocaleSelect.default, {
+    id: "captions-upload-language-picker",
+    defaultLocale: selectedLocale,
+    locale: selectedLocale,
+    locales: locales,
+    onLocaleChange: function onLocaleChange(locale) {
+      return setSelectedLocale(locale);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: close
+  }, intl.formatMessage(_messages.messages.cancel)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "primary",
+    onClick: submit
+  }, intl.formatMessage(_messages.messages.upload)))));
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(UploadCaptionsForm);

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/uploader.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUploadCaptionsFn = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var parseError = function parseError(error) {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error(String(error));
+};
+var upladFile = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, identifier, file, locale) {
+    var result;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return mediaClient.file.uploadArtifact(identifier.id, file, {
+            type: 'caption',
+            language: locale
+          }, identifier.collectionName);
+        case 2:
+          result = _context.sent;
+          return _context.abrupt("return", result);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function upladFile(_x, _x2, _x3, _x4) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var createUploadCaptionsFn = exports.createUploadCaptionsFn = function createUploadCaptionsFn(mediaClient, identifier, onStart, onEnd, onError) {
+  return /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(file, locale) {
+      var result;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!file) {
+              _context2.next = 12;
+              break;
+            }
+            onStart === null || onStart === void 0 || onStart(file);
+            _context2.prev = 2;
+            _context2.next = 5;
+            return upladFile(mediaClient, identifier, file, locale);
+          case 5:
+            result = _context2.sent;
+            onEnd === null || onEnd === void 0 || onEnd(result);
+            _context2.next = 12;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](2);
+            onError === null || onError === void 0 || onError(parseError(_context2.t0));
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 9]]);
+    }));
+    return function (_x5, _x6) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/captionsUploaderBrowser.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CaptionsUploaderBrowser = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _browser = require("./filePickers/browser");
+var _captions = require("./captions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var CaptionsUploaderBrowser = exports.CaptionsUploaderBrowser = function CaptionsUploaderBrowser(_ref) {
+  var identifier = _ref.identifier,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd,
+    onError = _ref.onError;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isFormOpen = _useState2[0],
+    setIsFormOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    file = _useState4[0],
+    setFile = _useState4[1];
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var close = function close() {
+    setIsFormOpen(false);
+    setFile(undefined);
+    onClose();
+  };
+  var onFilesPicked = function onFilesPicked(files) {
+    var file = files[0];
+    if (!file) {
+      return;
+    }
+    setFile(file);
+    setIsFormOpen(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_browser.BrowserPicker, {
+    isOpen: isOpen,
+    type: 'captions',
+    onFilesPicked: onFilesPicked,
+    onClose: close
+  }), /*#__PURE__*/_react.default.createElement(_captions.UploadCaptionsForm, {
+    isOpen: isFormOpen,
+    file: file,
+    uploadFn: (0, _captions.createUploadCaptionsFn)(mediaClient, identifier, onStart, onEnd, onError),
+    onClose: close
+  }));
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/filePickers/browser.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowserPicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _types = require("../types");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var BrowserPicker = exports.BrowserPicker = function BrowserPicker(_ref) {
+  var isOpen = _ref.isOpen,
+    type = _ref.type,
+    onFilesPicked = _ref.onFilesPicked,
+    onClose = _ref.onClose;
+  var browserRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      var _browserRef$current;
+      (_browserRef$current = browserRef.current) === null || _browserRef$current === void 0 || _browserRef$current.click();
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    var _browserRef$current2;
+    (_browserRef$current2 = browserRef.current) === null || _browserRef$current2 === void 0 || _browserRef$current2.addEventListener('cancel', function () {
+      onClose === null || onClose === void 0 || onClose();
+    });
+  }, [onClose]);
+  var onFilesPickedInternal = function onFilesPickedInternal(event) {
+    if (!event.target) {
+      return;
+    }
+    var files = event.target.files;
+    if (files) {
+      onFilesPicked === null || onFilesPicked === void 0 || onFilesPicked(files);
+      if (browserRef.current) {
+        // Clear the input value to allow picking the same file again
+        browserRef.current.value = '';
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("input", {
+    "data-testid": "media-picker-artifact-input",
+    ref: browserRef,
+    type: "file"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      display: 'none'
+    },
+    multiple: false,
+    accept: _types.artifactUploadTypes[type].join(','),
+    onChange: onFilesPickedInternal
+  });
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CaptionsUploaderBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _captionsUploaderBrowser.CaptionsUploaderBrowser;
+  }
+});
+var _captionsUploaderBrowser = require("./captionsUploaderBrowser");

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/types.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.artifactUploadTypes = void 0;
+var artifactUploadTypes = exports.artifactUploadTypes = {
+  captions: ['text/vtt'] // Probbly need to add '.vtt' to the list, but the content-type header is restricted to text/vtt anyway.
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/formatLocale.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatLocale = void 0;
+var formatLocale = exports.formatLocale = function formatLocale(baseLocale, locale) {
+  try {
+    var formatted = new Intl.DisplayNames(baseLocale, {
+      type: 'language',
+      languageDisplay: 'standard'
+    }).of(locale);
+    return formatted !== null && formatted !== void 0 ? formatted : locale;
+  } catch (error) {
+    return locale;
+  }
+};

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "findPreselectedTrackIndex", {
+  enumerable: true,
+  get: function get() {
+    return _selectTracks.findPreselectedTrackIndex;
+  }
+});
+Object.defineProperty(exports, "formatLocale", {
+  enumerable: true,
+  get: function get() {
+    return _formatLocale.formatLocale;
+  }
+});
+Object.defineProperty(exports, "getUserCaptionsEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _userPreferences.getUserCaptionsEnabled;
+  }
+});
+Object.defineProperty(exports, "getUserCaptionsLocale", {
+  enumerable: true,
+  get: function get() {
+    return _userPreferences.getUserCaptionsLocale;
+  }
+});
+Object.defineProperty(exports, "setUserCaptionsEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _userPreferences.setUserCaptionsEnabled;
+  }
+});
+Object.defineProperty(exports, "setUserCaptionsLocale", {
+  enumerable: true,
+  get: function get() {
+    return _userPreferences.setUserCaptionsLocale;
+  }
+});
+var _selectTracks = require("./selectTracks");
+var _formatLocale = require("./formatLocale");
+var _userPreferences = require("./userPreferences");