@atlaskit/media-ui 28.4.0 → 28.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-ui
 
+## 28.5.0
+
+### Minor Changes
+
+- [#177511](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177511)
+  [`e25a6c41d6bdb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e25a6c41d6bdb) -
+  Updated UI for Video Captions dropdown controls
+
+### Patch Changes
+
+- Updated dependencies
+
+## 28.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.4.0
 
 ### Minor Changes

package/dist/cjs/customMediaPlayer/dropdownControlCommon.js

@@ -0,0 +1,102 @@
+/* dropdownControlCommon.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.popupSelectComponents = exports.popupCustomStyles = exports.popperProps = exports.createPopupSelectComponentsWithIcon = void 0;
+require("./dropdownControlCommon.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _select = require("@atlaskit/select");
+var _colors = require("@atlaskit/theme/colors");
+var _primitives = require("@atlaskit/primitives");
+var _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep PlaybackSpeedControls to use static colors from the new color palette to support the hybrid
+// theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
+// with the compiled react, we are leaving the static colors in tact for now.
+var popupCustomStyles = exports.popupCustomStyles = {
+  container: function container(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundColor: '#22272b',
+      boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
+    });
+  },
+  // added these overrides to keep the look of the current design
+  // however this does not benefit from the DS a11y changes
+  menuList: function menuList(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      padding: '4px 0px'
+    });
+  },
+  option: function option(styles, _ref) {
+    var isFocused = _ref.isFocused,
+      isSelected = _ref.isSelected;
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      color: isSelected ? '#579dff' : _colors.DN900,
+      backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
+      ':active': {
+        backgroundColor: '#a6c5e229'
+      }
+    });
+  },
+  groupHeading: function groupHeading(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      color: '#9fadbc'
+    });
+  }
+};
+var popperProps = exports.popperProps = {
+  strategy: 'fixed',
+  modifiers: [{
+    name: 'preventOverflow',
+    enabled: true
+  }, {
+    name: 'eventListeners',
+    options: {
+      scroll: true,
+      resize: true
+    }
+  }, {
+    name: 'offset',
+    enabled: true,
+    options: {
+      offset: [0, 10]
+    }
+  }],
+  placement: 'top'
+};
+var selectOptionStyles = {
+  root: "_1di6r5ow"
+};
+var popupSelectComponents = exports.popupSelectComponents = {
+  Option: function Option(props) {
+    return /*#__PURE__*/_react.default.createElement(_select.components.Option, (0, _extends2.default)({}, props, {
+      xcss: selectOptionStyles.root
+    }));
+  }
+};
+var createPopupSelectComponentsWithIcon = exports.createPopupSelectComponentsWithIcon = function createPopupSelectComponentsWithIcon(IconComponent) {
+  return {
+    Option: function Option(_ref2) {
+      var children = _ref2.children,
+        props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      var childrenWithIcon = /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, children, /*#__PURE__*/_react.default.createElement(IconComponent, {
+        label: props.label,
+        value: "".concat(props.data.value)
+      }));
+      return /*#__PURE__*/_react.default.createElement(_select.components.Option, (0, _extends2.default)({}, props, {
+        children: childrenWithIcon,
+        xcss: selectOptionStyles.root
+      }));
+    }
+  };
+};

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.3.4";
+var packageVersion = "28.4.1";
 
 // @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/captionsAdminControls.js

@@ -6,65 +6,95 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports._CaptionsAdminControls = exports.CaptionsAdminControls = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _upload = _interopRequireDefault(require("@atlaskit/icon/core/upload"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
-var _new = require("@atlaskit/button/new");
 var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
 var _messages = require("../../messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
 var _captions = require("./captions");
-var _excluded = ["triggerRef"];
+var _MediaButton = _interopRequireDefault(require("../../MediaButton"));
+var _dropdownControlCommon = require("../dropdownControlCommon");
+var _select = require("@atlaskit/select");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _CaptionsAdminControls = exports._CaptionsAdminControls = function _CaptionsAdminControls(_ref) {
-  var _textTracks$captions;
-  var intl = _ref.intl,
-    _ref$textTracks = _ref.textTracks,
-    textTracks = _ref$textTracks === void 0 ? {} : _ref$textTracks,
-    onUpload = _ref.onUpload,
-    onDelete = _ref.onDelete;
-  var videoSettings = intl.formatMessage(_messages.messages.video_settings);
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-    shouldRenderToParent: true,
-    placement: "top-end",
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: videoSettings,
-        position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
-        ref: triggerRef
-      }, triggerProps, {
-        icon: _settings.default,
-        label: videoSettings,
-        appearance: "subtle"
-      })));
-    }
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
-    title: videoSettings
-  }, (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map(function (track, index) {
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-      key: "".concat(track.lang, "-").concat(index),
-      onClick: function onClick() {
-        return onDelete(track.artifactName);
-      },
-      elemAfter: /*#__PURE__*/_react.default.createElement(_delete.default, {
-        spacing: "spacious",
-        label: "",
-        color: "var(--ds-icon-danger, #C9372C)"
-      })
-    }, "".concat((0, _captions.formatLocale)(intl.locale, track.lang)));
-  }), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_upload.default, {
+var ADD_CAPTIONS_VALUE = 'add-captions';
+var OptionIcon = function OptionIcon(_ref) {
+  var value = _ref.value;
+  if (value === ADD_CAPTIONS_VALUE) {
+    return /*#__PURE__*/_react.default.createElement(_upload.default, {
       spacing: "spacious",
       label: ""
-    }),
-    onClick: onUpload
-  }, "Add Captions")));
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_delete.default, {
+    spacing: "spacious",
+    label: "",
+    color: "var(--ds-icon-danger, #C9372C)"
+  });
+};
+var popupSelectComponents = (0, _dropdownControlCommon.createPopupSelectComponentsWithIcon)(OptionIcon);
+var _CaptionsAdminControls = exports._CaptionsAdminControls = function _CaptionsAdminControls(_ref2) {
+  var intl = _ref2.intl,
+    _ref2$textTracks = _ref2.textTracks,
+    textTracks = _ref2$textTracks === void 0 ? {} : _ref2$textTracks,
+    onUpload = _ref2.onUpload,
+    onDelete = _ref2.onDelete;
+  var manageCaptions = intl.formatMessage(_messages.messages.manage_captions);
+  var addCaptions = intl.formatMessage(_messages.messages.add_captions);
+  var popupSelectOptions = (0, _react.useMemo)(function () {
+    var _textTracks$captions;
+    return [{
+      label: manageCaptions,
+      options: [].concat((0, _toConsumableArray2.default)(((_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map(function (track) {
+        return {
+          label: (0, _captions.formatLocale)(intl.locale, track.lang),
+          value: track.artifactName
+        };
+      })) || []), [{
+        label: addCaptions,
+        value: ADD_CAPTIONS_VALUE
+      }])
+    }];
+  }, [textTracks, intl.locale, manageCaptions, addCaptions]);
+  var handleItemClick = function handleItemClick(option) {
+    if (option !== null && option !== void 0 && option.value) {
+      if (option.value === ADD_CAPTIONS_VALUE) {
+        onUpload();
+      } else {
+        onDelete("".concat(option.value));
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
+    searchThreshold: 100,
+    maxMenuHeight: 500,
+    minMenuWidth: 140,
+    options: popupSelectOptions,
+    onChange: handleItemClick,
+    components: popupSelectComponents,
+    target: function target(_ref3) {
+      var ref = _ref3.ref,
+        isOpen = _ref3.isOpen,
+        onKeyDown = _ref3.onKeyDown;
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: manageCaptions,
+        position: "top"
+      }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+        testId: "custom-media-player-captions-select-button",
+        buttonRef: ref,
+        isSelected: isOpen,
+        onKeyDown: onKeyDown,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_settings.default, {
+          size: "medium",
+          color: "currentColor",
+          label: manageCaptions
+        })
+      }));
+    },
+    styles: _dropdownControlCommon.popupCustomStyles,
+    popperProps: _dropdownControlCommon.popperProps
+  });
 };
 var CaptionsAdminControls = exports.CaptionsAdminControls = (0, _reactIntlNext.injectIntl)(_CaptionsAdminControls);

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

@@ -5,84 +5,93 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._CaptionsSelectControls = exports.CaptionsSelectControls = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.CaptionsSelectControls = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _messages = require("../../messages");
 var _captions = require("./captions");
-var _excluded = ["triggerRef"];
+var _select = require("@atlaskit/select");
+var _MediaButton = _interopRequireDefault(require("../../MediaButton"));
+var _dropdownControlCommon = require("../dropdownControlCommon");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _CaptionsSelectControls = exports._CaptionsSelectControls = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _textTracks$captions;
+var CaptionsSelectControlsWithIntl = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var textTracks = _ref.textTracks,
     onSelected = _ref.onSelected,
     intl = _ref.intl,
     areCaptionsEnabled = _ref.areCaptionsEnabled,
     onCaptionsEnabledChange = _ref.onCaptionsEnabledChange,
     selectedTracksIndex = _ref.selectedTracksIndex;
-  var _useState = (0, _react.useState)(selectedTracksIndex),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedIndex = _useState2[0],
-    setSelectedIndex = _useState2[1];
-  (0, _react.useEffect)(function () {
-    setSelectedIndex(selectedTracksIndex);
-  }, [selectedTracksIndex]);
-  var handleItemClick = function handleItemClick(index) {
-    onSelected(index);
-    setSelectedIndex(index);
+  var closedCaptions = (0, _react.useMemo)(function () {
+    return intl.formatMessage(_messages.messages.video_captions_enable);
+  }, [intl]);
+  var selectCaptions = (0, _react.useMemo)(function () {
+    return intl.formatMessage(_messages.messages.video_captions_select_captions);
+  }, [intl]);
+  var popupSelectOptions = (0, _react.useMemo)(function () {
+    var _textTracks$captions;
+    return [{
+      label: selectCaptions,
+      options: (0, _toConsumableArray2.default)(((_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map(function (track, index) {
+        return {
+          label: "".concat((0, _captions.formatLocale)(intl.locale, track.lang)),
+          value: index
+        };
+      })) || [])
+    }];
+  }, [textTracks, intl.locale, selectCaptions]);
+  var popupSelectValue = (0, _react.useMemo)(function () {
+    return popupSelectOptions[0].options.find(function (option) {
+      return option.value === selectedTracksIndex;
+    });
+  }, [popupSelectOptions, selectedTracksIndex]);
+  var handleItemClick = function handleItemClick(option) {
+    var value = option && parseInt("".concat(option.value), 10) || 0;
+    onSelected(value);
     onCaptionsEnabledChange(true);
   };
-  var closedCaptions = intl.formatMessage(_messages.messages.video_captions_enable);
-  var selectCaptions = intl.formatMessage(_messages.messages.video_captions_select_captions);
   return /*#__PURE__*/_react.default.createElement(_new.SplitButton, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: closedCaptions,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_new.default, {
-    appearance: areCaptionsEnabled ? 'default' : 'subtle',
+  }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+    testId: "custom-media-player-captions-toggle-button",
+    appearance: areCaptionsEnabled ? 'primary' : 'default',
     onClick: function onClick() {
       return onCaptionsEnabledChange(!areCaptionsEnabled);
     },
     "aria-label": closedCaptions
-  }, "CC")), /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-    placement: "top",
-    shouldRenderToParent: true,
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  }, "CC")), /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
+    searchThreshold: 100,
+    components: _dropdownControlCommon.popupSelectComponents,
+    maxMenuHeight: 400,
+    minMenuWidth: 140,
+    options: popupSelectOptions,
+    value: popupSelectValue,
+    onChange: handleItemClick,
+    target: function target(_ref2) {
+      var ref = _ref2.ref,
+        isOpen = _ref2.isOpen,
+        onKeyDown = _ref2.onKeyDown;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: selectCaptions,
         position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
-        ref: triggerRef
-      }, triggerProps, {
-        icon: function icon(iconProps) {
-          return /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({}, iconProps, {
-            size: "small"
-          }));
-        },
-        label: selectCaptions,
-        appearance: "subtle"
-      })));
-    }
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
-    title: selectCaptions
-  }, ((_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map(function (track, index) {
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-      key: "".concat(track.lang, "-").concat(index),
-      onClick: function onClick() {
-        return handleItemClick(index);
-      },
-      isSelected: index === selectedIndex
-    }, "".concat((0, _captions.formatLocale)(intl.locale, track.lang)));
-  })) || /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    isDisabled: true
-  }, closedCaptions))));
+      }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+        testId: "custom-media-player-captions-select-button",
+        buttonRef: ref,
+        isSelected: isOpen,
+        onKeyDown: onKeyDown,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          size: "small",
+          color: "currentColor",
+          label: selectCaptions
+        })
+      }));
+    },
+    styles: _dropdownControlCommon.popupCustomStyles,
+    popperProps: _dropdownControlCommon.popperProps
+  }));
 });
-var CaptionsSelectControls = exports.CaptionsSelectControls = (0, _reactIntlNext.injectIntl)(_CaptionsSelectControls);
+var CaptionsSelectControls = exports.CaptionsSelectControls = (0, _reactIntlNext.injectIntl)(CaptionsSelectControlsWithIntl);

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

@@ -13,7 +13,7 @@ var _mediaPlayerBase = require("./mediaPlayerBase");
 var _useTextTracks = require("./useTextTracks");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.3.4";
+var packageVersion = "28.4.1";
 var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(props) {
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;

package/dist/cjs/customMediaPlayer/playbackSpeedControls.js

@@ -1,4 +1,3 @@
-/* playbackSpeedControls.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PlaybackSpeedControls = void 0;
-require("./playbackSpeedControls.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -18,22 +14,15 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _select = require("@atlaskit/select");
-var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 var _messages = require("../messages");
 var _widthDetector = require("@atlaskit/width-detector");
+var _dropdownControlCommon = require("./dropdownControlCommon");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep PlaybackSpeedControls to use static colors from the new color palette to support the hybrid
-// theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
-// with the compiled react, we are leaving the static colors in tact for now.
-var selectOptionStyles = {
-  root: "_1di6r5ow"
-};
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
   function PlaybackSpeedControls() {
     var _this;
@@ -75,37 +64,6 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
         }]
       }];
     });
-    (0, _defineProperty2.default)(_this, "popupCustomStyles", {
-      container: function container(styles) {
-        return _objectSpread(_objectSpread({}, styles), {}, {
-          backgroundColor: '#22272b',
-          boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
-        });
-      },
-      // added these overrides to keep the look of the current design
-      // however this does not benefit from the DS a11y changes
-      menuList: function menuList(styles) {
-        return _objectSpread(_objectSpread({}, styles), {}, {
-          padding: '4px 0px'
-        });
-      },
-      option: function option(styles, _ref) {
-        var isFocused = _ref.isFocused,
-          isSelected = _ref.isSelected;
-        return _objectSpread(_objectSpread({}, styles), {}, {
-          color: isSelected ? '#579dff' : _colors.DN900,
-          backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
-          ':active': {
-            backgroundColor: '#a6c5e229'
-          }
-        });
-      },
-      groupHeading: function groupHeading(styles) {
-        return _objectSpread(_objectSpread({}, styles), {}, {
-          color: '#9fadbc'
-        });
-      }
-    });
     (0, _defineProperty2.default)(_this, "onResize", function (width) {
       var originalDimensions = _this.props.originalDimensions;
       if (originalDimensions) {
@@ -137,46 +95,19 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
       var value = this.speedOptions()[0].options.find(function (option) {
         return option.value === playbackSpeed;
       });
-      var popperProps = {
-        strategy: 'fixed',
-        modifiers: [{
-          name: 'preventOverflow',
-          enabled: true
-        }, {
-          name: 'eventListeners',
-          options: {
-            scroll: true,
-            resize: true
-          }
-        }, {
-          name: 'offset',
-          enabled: true,
-          options: {
-            offset: [0, 10]
-          }
-        }],
-        placement: 'top'
-      };
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
         setWidth: this.onResize
       }), /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
-        components: {
-          Option: function Option(props) {
-            return /*#__PURE__*/_react.default.createElement(_select.components.Option, (0, _extends2.default)({}, props, {
-              xcss: selectOptionStyles.root
-            }));
-          }
-        },
+        components: _dropdownControlCommon.popupSelectComponents,
         minMenuWidth: 140,
         maxMenuHeight: popupHeight,
         options: this.speedOptions(),
         value: value,
-        closeMenuOnScroll: true,
         onChange: this.onPlaybackSpeedChange,
-        target: function target(_ref2) {
-          var ref = _ref2.ref,
-            isOpen = _ref2.isOpen,
-            popupKeydown = _ref2.onKeyDown;
+        target: function target(_ref) {
+          var ref = _ref.ref,
+            isOpen = _ref.isOpen,
+            popupKeydown = _ref.onKeyDown;
           return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
             content: intl.formatMessage(_messages.messages.playbackSpeed),
             position: "top"
@@ -185,13 +116,11 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
             buttonRef: ref,
             isSelected: isOpen,
             onClick: onClick,
-            onKeyDown: function onKeyDown(event) {
-              popupKeydown(event);
-            }
+            onKeyDown: popupKeydown
           }, playbackSpeed, "x"));
         },
-        styles: this.popupCustomStyles,
-        popperProps: popperProps
+        styles: _dropdownControlCommon.popupCustomStyles,
+        popperProps: _dropdownControlCommon.popperProps
       }));
     }
   }]);

package/dist/cjs/messages.js

@@ -686,10 +686,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'The caption failed to delete.',
     description: 'In the context of a video player, it provides feedback when a caption failed to delete'
   },
-  video_settings: {
-    id: 'fabric.media.video_settings',
-    defaultMessage: 'Video Settings',
-    description: 'In the context of a video player, it allows user to manage video settings'
+  manage_captions: {
+    id: 'fabric.media.manage_captions',
+    defaultMessage: 'Manage Captions',
+    description: 'In the context of a video player, it allows user to manage captions'
+  },
+  add_captions: {
+    id: 'fabric.media.add_captions',
+    defaultMessage: 'Add Captions',
+    description: 'In the context of a video player, it allows user to add captions'
   },
   skipBackward: {
     id: 'fabric.media.skip_backward',