@atlaskit/media-ui 30.0.0 → 30.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/media-ui
 
+## 30.0.1
+
+### Patch Changes
+
+- [`c28141dd43748`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c28141dd43748) -
+  [ux] Fix video player popup controls (captions admin, captions select, playback speed) not visible
+  in fullscreen mode. Uses Popper onFirstUpdate callback to reposition popups within the fullscreen
+  container, gated behind platform_editor_video_caption_commit
+
 ## 30.0.0
 
 ### Major Changes

package/dist/cjs/customMediaPlayer/dropdownControlCommon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.popupSelectComponents = exports.popupCustomStyles = exports.popperProps = exports.createPopupSelectComponentsWithIcon = void 0;
+exports.popupSelectComponents = exports.popupCustomStyles = exports.popperProps = exports.getPopperPropsForFullscreen = exports.createPopupSelectComponentsWithIcon = void 0;
 require("./dropdownControlCommon.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,6 +13,7 @@ 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 _browserApis = require("@atlaskit/browser-apis");
 var _compiled = require("@atlaskit/primitives/compiled");
 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; }
@@ -51,6 +52,9 @@ var popupCustomStyles = exports.popupCustomStyles = {
     });
   }
 };
+
+/** Distance (px) between the trigger element and the popup menu. */
+var POPUP_OFFSET = 10;
 var popperProps = exports.popperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -66,11 +70,62 @@ var popperProps = exports.popperProps = {
     name: 'offset',
     enabled: true,
     options: {
-      offset: [0, 10]
+      offset: [0, POPUP_OFFSET]
     }
   }],
   placement: 'top'
 };
+
+/**
+ * Repositions a popup-select element when the video player is in fullscreen mode.
+ *
+ * When fullscreen is active, the browser's Fullscreen API makes the fullscreen element
+ * the containing block for `position: fixed` descendants. Popper.js computes transform
+ * coordinates assuming the viewport is the containing block, which results in the popup
+ * being rendered off-screen inside the fullscreen container.
+ *
+ * This function is called by Popper's `onFirstUpdate` callback with the Popper state,
+ * which provides direct references to both the popup and trigger elements — avoiding
+ * fragile DOM traversal like `previousElementSibling`.
+ */
+var repositionPopupInFullscreen = function repositionPopupInFullscreen(state) {
+  var _getDocument, _state$elements, _state$elements2;
+  var fullscreenEl = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.fullscreenElement;
+  if (!fullscreenEl) {
+    return;
+  }
+  var popupEl = (_state$elements = state.elements) === null || _state$elements === void 0 ? void 0 : _state$elements.popper;
+  var triggerEl = (_state$elements2 = state.elements) === null || _state$elements2 === void 0 ? void 0 : _state$elements2.reference;
+  if (!popupEl || !triggerEl || !fullscreenEl.contains(popupEl) || !popupEl.isConnected) {
+    return;
+  }
+  var triggerRect = triggerEl.getBoundingClientRect();
+  var popupRect = popupEl.getBoundingClientRect();
+  var left = Math.round(Math.max(0, Math.min(fullscreenEl.clientWidth - popupRect.width, triggerRect.left + triggerRect.width / 2 - popupRect.width / 2)));
+  var bottom = Math.round(fullscreenEl.clientHeight - triggerRect.top + POPUP_OFFSET);
+  popupEl.style.setProperty('position', 'fixed');
+  popupEl.style.setProperty('inset', "auto auto ".concat(bottom, "px ").concat(left, "px"));
+  popupEl.style.setProperty('transform', 'none');
+};
+var fullscreenPopperProps = _objectSpread(_objectSpread({}, popperProps), {}, {
+  onFirstUpdate: function onFirstUpdate(state) {
+    // Double rAF ensures the popup content has rendered so we get accurate dimensions
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        repositionPopupInFullscreen(state);
+      });
+    });
+  }
+});
+
+/**
+ * Returns the appropriate popperProps based on fullscreen state.
+ * When in fullscreen, includes an `onFirstUpdate` callback that repositions the popup
+ * after Popper's initial (incorrect) positioning.
+ */
+var getPopperPropsForFullscreen = exports.getPopperPropsForFullscreen = function getPopperPropsForFullscreen(isFullScreen) {
+  return isFullScreen ? fullscreenPopperProps : popperProps;
+};
 var selectOptionStyles = {
   root: "_1di6r5ow"
 };

package/dist/cjs/customMediaPlayer/index.js

@@ -14,7 +14,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "29.3.1";
+var packageVersion = "30.0.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/captionsAdminControls.js

@@ -18,6 +18,7 @@ var _captions = require("./captions");
 var _MediaButton = _interopRequireDefault(require("../../MediaButton"));
 var _dropdownControlCommon = require("../dropdownControlCommon");
 var _select = require("@atlaskit/select");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 ADD_CAPTIONS_VALUE = 'add-captions';
 var OptionIcon = function OptionIcon(_ref) {
@@ -40,7 +41,9 @@ var _CaptionsAdminControls = exports._CaptionsAdminControls = function _Captions
     _ref2$textTracks = _ref2.textTracks,
     textTracks = _ref2$textTracks === void 0 ? {} : _ref2$textTracks,
     onUpload = _ref2.onUpload,
-    onDelete = _ref2.onDelete;
+    onDelete = _ref2.onDelete,
+    _ref2$isFullScreen = _ref2.isFullScreen,
+    isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen;
   var manageCaptions = intl.formatMessage(_messages.messages.manage_captions);
   var addCaptions = intl.formatMessage(_messages.messages.add_captions);
   var popupSelectOptions = (0, _react.useMemo)(function () {
@@ -94,7 +97,7 @@ var _CaptionsAdminControls = exports._CaptionsAdminControls = function _Captions
       }));
     },
     styles: _dropdownControlCommon.popupCustomStyles,
-    popperProps: _dropdownControlCommon.popperProps
+    popperProps: (0, _platformFeatureFlags.fg)('platform_editor_video_caption_commit') ? (0, _dropdownControlCommon.getPopperPropsForFullscreen)(isFullScreen) : _dropdownControlCommon.popperProps
   });
 };
 var CaptionsAdminControls = exports.CaptionsAdminControls = (0, _reactIntl.injectIntl)(_CaptionsAdminControls);

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

@@ -17,6 +17,7 @@ var _captions = require("./captions");
 var _select = require("@atlaskit/select");
 var _MediaButton = _interopRequireDefault(require("../../MediaButton"));
 var _dropdownControlCommon = require("../dropdownControlCommon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 CaptionsSelectControlsWithIntl = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var textTracks = _ref.textTracks,
@@ -24,7 +25,9 @@ var CaptionsSelectControlsWithIntl = /*#__PURE__*/(0, _react.memo)(function (_re
     intl = _ref.intl,
     areCaptionsEnabled = _ref.areCaptionsEnabled,
     onCaptionsEnabledChange = _ref.onCaptionsEnabledChange,
-    selectedTracksIndex = _ref.selectedTracksIndex;
+    selectedTracksIndex = _ref.selectedTracksIndex,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
   var closedCaptions = (0, _react.useMemo)(function () {
     return intl.formatMessage(_messages.messages.video_captions_enable);
   }, [intl]);
@@ -92,7 +95,7 @@ var CaptionsSelectControlsWithIntl = /*#__PURE__*/(0, _react.memo)(function (_re
       }));
     },
     styles: _dropdownControlCommon.popupCustomStyles,
-    popperProps: _dropdownControlCommon.popperProps
+    popperProps: (0, _platformFeatureFlags.fg)('platform_editor_video_caption_commit') ? (0, _dropdownControlCommon.getPopperPropsForFullscreen)(isFullScreen) : _dropdownControlCommon.popperProps
   }));
 });
 var CaptionsSelectControls = exports.CaptionsSelectControls = (0, _reactIntl.injectIntl)(CaptionsSelectControlsWithIntl);

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

@@ -15,7 +15,7 @@ var _useTextTracks2 = require("./useTextTracks");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _excluded = ["onPlay"];
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "29.3.1";
+var packageVersion = "30.0.0";
 var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(_ref) {
   var _onPlay = _ref.onPlay,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -236,7 +236,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       return breakpointControls.speedControls(_this.state.playerWidth);
     });
     (0, _defineProperty2.default)(_this, "renderSpeedControls", function () {
-      var playbackSpeed = _this.state.playbackSpeed;
+      var _this$state2 = _this.state,
+        playbackSpeed = _this$state2.playbackSpeed,
+        isFullScreenEnabled = _this$state2.isFullScreenEnabled;
       var originalDimensions = _this.props.originalDimensions;
       return /*#__PURE__*/_react.default.createElement(_playbackSpeedControls.default, {
         originalDimensions: originalDimensions,
@@ -244,7 +246,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         onPlaybackSpeedChange: _this.onPlaybackSpeedChange,
         onClick: function onClick() {
           return _this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton');
-        }
+        },
+        isFullScreen: isFullScreenEnabled
       });
     });
     (0, _defineProperty2.default)(_this, "shouldRenderVolume", function () {
@@ -497,9 +500,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDAvailable = _this$props9.isHDAvailable,
         isHDActive = _this$props9.isHDActive,
         type = _this$props9.type;
-      var _this$state2 = _this.state,
-        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-        playbackSpeed = _this$state2.playbackSpeed;
+      var _this$state3 = _this.state,
+        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+        playbackSpeed = _this$state3.playbackSpeed;
       var _this3 = _this,
         playerSize = _this3.playerSize;
       var status = videoState.status,
@@ -571,12 +574,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         _ref2$selectedTrackIn = _ref2.selectedTrackIndex,
         selectedTrackIndex = _ref2$selectedTrackIn === void 0 ? -1 : _ref2$selectedTrackIn;
       var areCaptionsEnabled = _this.props.areCaptionsEnabled;
+      var isFullScreenEnabled = _this.state.isFullScreenEnabled;
       return textTracks && /*#__PURE__*/_react.default.createElement(_captionsSelectControls.CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: _this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: _this.onCaptionsEnabledChange,
-        selectedTracksIndex: selectedTrackIndex
+        selectedTracksIndex: selectedTrackIndex,
+        isFullScreen: isFullScreenEnabled
       });
     });
     (0, _defineProperty2.default)(_this, "shouldRenderCaptionsAdminControls", function () {
@@ -585,9 +590,10 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       return (!_this.props.fileState || _this.props.fileState.status !== 'uploading') && breakpointControls.captionsAdminControls(playerWidth) && !!((_this$props$mediaSett = _this.props.mediaSettings) !== null && _this$props$mediaSett !== void 0 && _this$props$mediaSett.canUpdateVideoCaptions);
     });
     (0, _defineProperty2.default)(_this, "renderCaptionsAdminControls", function () {
-      var _this$state3 = _this.state,
-        isArtifactUploaderOpen = _this$state3.isArtifactUploaderOpen,
-        artifactToDelete = _this$state3.artifactToDelete;
+      var _this$state4 = _this.state,
+        isArtifactUploaderOpen = _this$state4.isArtifactUploaderOpen,
+        artifactToDelete = _this$state4.artifactToDelete,
+        isFullScreenEnabled = _this$state4.isFullScreenEnabled;
       var _this$props10 = _this.props,
         textTracks = _this$props10.textTracks,
         identifier = _this$props10.identifier;
@@ -598,7 +604,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
             isArtifactUploaderOpen: true
           });
         },
-        onDelete: _this.onCaptionDelete
+        onDelete: _this.onCaptionDelete,
+        isFullScreen: isFullScreenEnabled
       }), /*#__PURE__*/_react.default.createElement(_artifactUploader.CaptionsUploaderBrowser, {
         identifier: identifier,
         isOpen: isArtifactUploaderOpen,
@@ -655,9 +662,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDActive = _this$props11.isHDActive,
         onFirstPlay = _this$props11.onFirstPlay,
         createAnalyticsEvent = _this$props11.createAnalyticsEvent;
-      var _this$state4 = this.state,
-        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
-        playbackSpeed = _this$state4.playbackSpeed;
+      var _this$state5 = this.state,
+        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
+        playbackSpeed = _this$state5.playbackSpeed;
       var playerSize = this.playerSize;
       (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCustomMediaPlayerScreenEvent)(type, {
         isAutoPlay: isAutoPlay,
@@ -719,9 +726,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDAvailable = _this$props14.isHDAvailable,
         isAutoPlay = _this$props14.isAutoPlay,
         createAnalyticsEvent = _this$props14.createAnalyticsEvent;
-      var _this$state5 = this.state,
-        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
-        playbackSpeed = _this$state5.playbackSpeed;
+      var _this$state6 = this.state,
+        isFullScreenEnabled = _this$state6.isFullScreenEnabled,
+        playbackSpeed = _this$state6.playbackSpeed;
       var playerSize = this.playerSize;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,

package/dist/cjs/customMediaPlayer/playbackSpeedControls.js

@@ -20,6 +20,7 @@ var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 var _messages = require("../messages");
 var _widthDetector = require("@atlaskit/width-detector");
 var _dropdownControlCommon = require("./dropdownControlCommon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 _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; })(); }
@@ -90,7 +91,9 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
       var _this$props = this.props,
         playbackSpeed = _this$props.playbackSpeed,
         intl = _this$props.intl,
-        onClick = _this$props.onClick;
+        onClick = _this$props.onClick,
+        _this$props$isFullScr = _this$props.isFullScreen,
+        isFullScreen = _this$props$isFullScr === void 0 ? false : _this$props$isFullScr;
       var popupHeight = this.state.popupHeight;
       var value = this.speedOptions()[0].options.find(function (option) {
         return option.value === playbackSpeed;
@@ -122,7 +125,7 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
           }, playbackSpeed, "x"));
         },
         styles: _dropdownControlCommon.popupCustomStyles,
-        popperProps: _dropdownControlCommon.popperProps
+        popperProps: (0, _platformFeatureFlags.fg)('platform_editor_video_caption_commit') ? (0, _dropdownControlCommon.getPopperPropsForFullscreen)(isFullScreen) : _dropdownControlCommon.popperProps
       }));
     }
   }]);

package/dist/es2019/customMediaPlayer/dropdownControlCommon.js

@@ -8,6 +8,7 @@ import { ax, ix } from "@compiled/react/runtime";
 // with the compiled react, we are leaving the static colors in tact for now.
 import React from 'react';
 import { components } from '@atlaskit/select';
+import { getDocument } from '@atlaskit/browser-apis';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Flex } from '@atlaskit/primitives/compiled';
 export const popupCustomStyles = {
@@ -38,6 +39,9 @@ export const popupCustomStyles = {
     color: '#9fadbc'
   })
 };
+
+/** Distance (px) between the trigger element and the popup menu. */
+const POPUP_OFFSET = 10;
 export const popperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -53,11 +57,63 @@ export const popperProps = {
     name: 'offset',
     enabled: true,
     options: {
-      offset: [0, 10]
+      offset: [0, POPUP_OFFSET]
     }
   }],
   placement: 'top'
 };
+
+/**
+ * Repositions a popup-select element when the video player is in fullscreen mode.
+ *
+ * When fullscreen is active, the browser's Fullscreen API makes the fullscreen element
+ * the containing block for `position: fixed` descendants. Popper.js computes transform
+ * coordinates assuming the viewport is the containing block, which results in the popup
+ * being rendered off-screen inside the fullscreen container.
+ *
+ * This function is called by Popper's `onFirstUpdate` callback with the Popper state,
+ * which provides direct references to both the popup and trigger elements — avoiding
+ * fragile DOM traversal like `previousElementSibling`.
+ */
+const repositionPopupInFullscreen = state => {
+  var _getDocument, _state$elements, _state$elements2;
+  const fullscreenEl = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.fullscreenElement;
+  if (!fullscreenEl) {
+    return;
+  }
+  const popupEl = (_state$elements = state.elements) === null || _state$elements === void 0 ? void 0 : _state$elements.popper;
+  const triggerEl = (_state$elements2 = state.elements) === null || _state$elements2 === void 0 ? void 0 : _state$elements2.reference;
+  if (!popupEl || !triggerEl || !fullscreenEl.contains(popupEl) || !popupEl.isConnected) {
+    return;
+  }
+  const triggerRect = triggerEl.getBoundingClientRect();
+  const popupRect = popupEl.getBoundingClientRect();
+  const left = Math.round(Math.max(0, Math.min(fullscreenEl.clientWidth - popupRect.width, triggerRect.left + triggerRect.width / 2 - popupRect.width / 2)));
+  const bottom = Math.round(fullscreenEl.clientHeight - triggerRect.top + POPUP_OFFSET);
+  popupEl.style.setProperty('position', 'fixed');
+  popupEl.style.setProperty('inset', `auto auto ${bottom}px ${left}px`);
+  popupEl.style.setProperty('transform', 'none');
+};
+const fullscreenPopperProps = {
+  ...popperProps,
+  onFirstUpdate: state => {
+    // Double rAF ensures the popup content has rendered so we get accurate dimensions
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        repositionPopupInFullscreen(state);
+      });
+    });
+  }
+};
+
+/**
+ * Returns the appropriate popperProps based on fullscreen state.
+ * When in fullscreen, includes an `onFirstUpdate` callback that repositions the popup
+ * after Popper's initial (incorrect) positioning.
+ */
+export const getPopperPropsForFullscreen = isFullScreen => {
+  return isFullScreen ? fullscreenPopperProps : popperProps;
+};
 const selectOptionStyles = {
   root: "_1di6r5ow"
 };

package/dist/es2019/customMediaPlayer/index.js

@@ -5,7 +5,7 @@ import { CustomMediaPlayerBase as CompiledCustomMediaPlayerBase } from './index-
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "29.3.1";
+const packageVersion = "30.0.0";
 
 // @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/captionsAdminControls.js

@@ -7,9 +7,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl';
 import { formatLocale } from './captions';
 import MediaButton from '../../MediaButton';
-import { popupCustomStyles, createPopupSelectComponentsWithIcon } from '../dropdownControlCommon';
+import { popupCustomStyles, createPopupSelectComponentsWithIcon, popperProps, getPopperPropsForFullscreen } from '../dropdownControlCommon';
 import { PopupSelect } from '@atlaskit/select';
-import { popperProps } from '../dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 const ADD_CAPTIONS_VALUE = 'add-captions';
 const OptionIcon = ({
   value
@@ -31,7 +31,8 @@ export const _CaptionsAdminControls = ({
   intl,
   textTracks = {},
   onUpload,
-  onDelete
+  onDelete,
+  isFullScreen = false
 }) => {
   const manageCaptions = intl.formatMessage(messages.manage_captions);
   const addCaptions = intl.formatMessage(messages.add_captions);
@@ -83,7 +84,7 @@ export const _CaptionsAdminControls = ({
       })
     })),
     styles: popupCustomStyles,
-    popperProps: popperProps
+    popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
   });
 };
 export const CaptionsAdminControls = injectIntl(_CaptionsAdminControls);

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

@@ -7,14 +7,16 @@ import { messages } from '../../messages';
 import { formatLocale } from './captions';
 import { PopupSelect } from '@atlaskit/select';
 import MediaButton from '../../MediaButton';
-import { popperProps, popupCustomStyles, popupSelectComponents } from '../dropdownControlCommon';
+import { popperProps, popupCustomStyles, popupSelectComponents, getPopperPropsForFullscreen } from '../dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 const CaptionsSelectControlsWithIntl = /*#__PURE__*/memo(({
   textTracks,
   onSelected,
   intl,
   areCaptionsEnabled,
   onCaptionsEnabledChange,
-  selectedTracksIndex
+  selectedTracksIndex,
+  isFullScreen = false
 }) => {
   const closedCaptions = useMemo(() => intl.formatMessage(messages.video_captions_enable), [intl]);
   const selectCaptions = useMemo(() => intl.formatMessage(messages.video_captions_select_captions), [intl]);
@@ -70,7 +72,7 @@ const CaptionsSelectControlsWithIntl = /*#__PURE__*/memo(({
       })
     })),
     styles: popupCustomStyles,
-    popperProps: popperProps
+    popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
   }));
 });
 export const CaptionsSelectControls = injectIntl(CaptionsSelectControlsWithIntl);

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

@@ -6,7 +6,7 @@ import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "29.3.1";
+const packageVersion = "30.0.0";
 export const MediaPlayerWihtoutContext = ({
   onPlay,
   ...props

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

@@ -196,7 +196,8 @@ class _MediaPlayerBase extends Component {
     _defineProperty(this, "shouldRenderSpeedControls", () => breakpointControls.speedControls(this.state.playerWidth));
     _defineProperty(this, "renderSpeedControls", () => {
       const {
-        playbackSpeed
+        playbackSpeed,
+        isFullScreenEnabled
       } = this.state;
       const {
         originalDimensions
@@ -205,7 +206,8 @@ class _MediaPlayerBase extends Component {
         originalDimensions: originalDimensions,
         playbackSpeed: playbackSpeed,
         onPlaybackSpeedChange: this.onPlaybackSpeedChange,
-        onClick: () => this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton')
+        onClick: () => this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton'),
+        isFullScreen: isFullScreenEnabled
       });
     });
     _defineProperty(this, "shouldRenderVolume", () => breakpointControls.volume(this.state.playerWidth));
@@ -543,12 +545,16 @@ class _MediaPlayerBase extends Component {
       const {
         areCaptionsEnabled
       } = this.props;
+      const {
+        isFullScreenEnabled
+      } = this.state;
       return textTracks && /*#__PURE__*/React.createElement(CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: this.onCaptionsEnabledChange,
-        selectedTracksIndex: selectedTrackIndex
+        selectedTracksIndex: selectedTrackIndex,
+        isFullScreen: isFullScreenEnabled
       });
     });
     _defineProperty(this, "shouldRenderCaptionsAdminControls", () => {
@@ -561,7 +567,8 @@ class _MediaPlayerBase extends Component {
     _defineProperty(this, "renderCaptionsAdminControls", () => {
       const {
         isArtifactUploaderOpen,
-        artifactToDelete
+        artifactToDelete,
+        isFullScreenEnabled
       } = this.state;
       const {
         textTracks,
@@ -572,7 +579,8 @@ class _MediaPlayerBase extends Component {
         onUpload: () => this.setState({
           isArtifactUploaderOpen: true
         }),
-        onDelete: this.onCaptionDelete
+        onDelete: this.onCaptionDelete,
+        isFullScreen: isFullScreenEnabled
       }), /*#__PURE__*/React.createElement(CaptionsUploaderBrowser, {
         identifier: identifier,
         isOpen: isArtifactUploaderOpen,

package/dist/es2019/customMediaPlayer/playbackSpeedControls.js

@@ -7,7 +7,8 @@ import Tooltip from '@atlaskit/tooltip';
 import MediaButton from '../MediaButton';
 import { messages } from '../messages';
 import { WidthObserver } from '@atlaskit/width-detector';
-import { popperProps, popupCustomStyles, popupSelectComponents } from './dropdownControlCommon';
+import { popperProps, popupCustomStyles, popupSelectComponents, getPopperPropsForFullscreen } from './dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class PlaybackSpeedControls extends Component {
   constructor(...args) {
     super(...args);
@@ -68,7 +69,8 @@ export class PlaybackSpeedControls extends Component {
     const {
       playbackSpeed,
       intl,
-      onClick
+      onClick,
+      isFullScreen = false
     } = this.props;
     const {
       popupHeight
@@ -100,7 +102,7 @@ export class PlaybackSpeedControls extends Component {
         "aria-expanded": isOpen
       }, playbackSpeed, "x")),
       styles: popupCustomStyles,
-      popperProps: popperProps
+      popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
     }));
   }
 }

package/dist/esm/customMediaPlayer/dropdownControlCommon.js

@@ -13,6 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // with the compiled react, we are leaving the static colors in tact for now.
 import React from 'react';
 import { components } from '@atlaskit/select';
+import { getDocument } from '@atlaskit/browser-apis';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Flex } from '@atlaskit/primitives/compiled';
 export var popupCustomStyles = {
@@ -46,6 +47,9 @@ export var popupCustomStyles = {
     });
   }
 };
+
+/** Distance (px) between the trigger element and the popup menu. */
+var POPUP_OFFSET = 10;
 export var popperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -61,11 +65,62 @@ export var popperProps = {
     name: 'offset',
     enabled: true,
     options: {
-      offset: [0, 10]
+      offset: [0, POPUP_OFFSET]
     }
   }],
   placement: 'top'
 };
+
+/**
+ * Repositions a popup-select element when the video player is in fullscreen mode.
+ *
+ * When fullscreen is active, the browser's Fullscreen API makes the fullscreen element
+ * the containing block for `position: fixed` descendants. Popper.js computes transform
+ * coordinates assuming the viewport is the containing block, which results in the popup
+ * being rendered off-screen inside the fullscreen container.
+ *
+ * This function is called by Popper's `onFirstUpdate` callback with the Popper state,
+ * which provides direct references to both the popup and trigger elements — avoiding
+ * fragile DOM traversal like `previousElementSibling`.
+ */
+var repositionPopupInFullscreen = function repositionPopupInFullscreen(state) {
+  var _getDocument, _state$elements, _state$elements2;
+  var fullscreenEl = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.fullscreenElement;
+  if (!fullscreenEl) {
+    return;
+  }
+  var popupEl = (_state$elements = state.elements) === null || _state$elements === void 0 ? void 0 : _state$elements.popper;
+  var triggerEl = (_state$elements2 = state.elements) === null || _state$elements2 === void 0 ? void 0 : _state$elements2.reference;
+  if (!popupEl || !triggerEl || !fullscreenEl.contains(popupEl) || !popupEl.isConnected) {
+    return;
+  }
+  var triggerRect = triggerEl.getBoundingClientRect();
+  var popupRect = popupEl.getBoundingClientRect();
+  var left = Math.round(Math.max(0, Math.min(fullscreenEl.clientWidth - popupRect.width, triggerRect.left + triggerRect.width / 2 - popupRect.width / 2)));
+  var bottom = Math.round(fullscreenEl.clientHeight - triggerRect.top + POPUP_OFFSET);
+  popupEl.style.setProperty('position', 'fixed');
+  popupEl.style.setProperty('inset', "auto auto ".concat(bottom, "px ").concat(left, "px"));
+  popupEl.style.setProperty('transform', 'none');
+};
+var fullscreenPopperProps = _objectSpread(_objectSpread({}, popperProps), {}, {
+  onFirstUpdate: function onFirstUpdate(state) {
+    // Double rAF ensures the popup content has rendered so we get accurate dimensions
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        repositionPopupInFullscreen(state);
+      });
+    });
+  }
+});
+
+/**
+ * Returns the appropriate popperProps based on fullscreen state.
+ * When in fullscreen, includes an `onFirstUpdate` callback that repositions the popup
+ * after Popper's initial (incorrect) positioning.
+ */
+export var getPopperPropsForFullscreen = function getPopperPropsForFullscreen(isFullScreen) {
+  return isFullScreen ? fullscreenPopperProps : popperProps;
+};
 var selectOptionStyles = {
   root: "_1di6r5ow"
 };

package/dist/esm/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ export var CustomMediaPlayerBase = function CustomMediaPlayerBase(props) {
   return /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "29.3.1";
+var packageVersion = "30.0.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export var CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/esm/customMediaPlayer/mediaPlayer/captionsAdminControls.js

@@ -8,9 +8,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl';
 import { formatLocale } from './captions';
 import MediaButton from '../../MediaButton';
-import { popupCustomStyles, createPopupSelectComponentsWithIcon } from '../dropdownControlCommon';
+import { popupCustomStyles, createPopupSelectComponentsWithIcon, popperProps, getPopperPropsForFullscreen } from '../dropdownControlCommon';
 import { PopupSelect } from '@atlaskit/select';
-import { popperProps } from '../dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 var ADD_CAPTIONS_VALUE = 'add-captions';
 var OptionIcon = function OptionIcon(_ref) {
   var value = _ref.value;
@@ -32,7 +32,9 @@ export var _CaptionsAdminControls = function _CaptionsAdminControls(_ref2) {
     _ref2$textTracks = _ref2.textTracks,
     textTracks = _ref2$textTracks === void 0 ? {} : _ref2$textTracks,
     onUpload = _ref2.onUpload,
-    onDelete = _ref2.onDelete;
+    onDelete = _ref2.onDelete,
+    _ref2$isFullScreen = _ref2.isFullScreen,
+    isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen;
   var manageCaptions = intl.formatMessage(messages.manage_captions);
   var addCaptions = intl.formatMessage(messages.add_captions);
   var popupSelectOptions = useMemo(function () {
@@ -86,7 +88,7 @@ export var _CaptionsAdminControls = function _CaptionsAdminControls(_ref2) {
       }));
     },
     styles: popupCustomStyles,
-    popperProps: popperProps
+    popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
   });
 };
 export var CaptionsAdminControls = injectIntl(_CaptionsAdminControls);

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

@@ -8,14 +8,17 @@ import { messages } from '../../messages';
 import { formatLocale } from './captions';
 import { PopupSelect } from '@atlaskit/select';
 import MediaButton from '../../MediaButton';
-import { popperProps, popupCustomStyles, popupSelectComponents } from '../dropdownControlCommon';
+import { popperProps, popupCustomStyles, popupSelectComponents, getPopperPropsForFullscreen } from '../dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 var CaptionsSelectControlsWithIntl = /*#__PURE__*/memo(function (_ref) {
   var textTracks = _ref.textTracks,
     onSelected = _ref.onSelected,
     intl = _ref.intl,
     areCaptionsEnabled = _ref.areCaptionsEnabled,
     onCaptionsEnabledChange = _ref.onCaptionsEnabledChange,
-    selectedTracksIndex = _ref.selectedTracksIndex;
+    selectedTracksIndex = _ref.selectedTracksIndex,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
   var closedCaptions = useMemo(function () {
     return intl.formatMessage(messages.video_captions_enable);
   }, [intl]);
@@ -83,7 +86,7 @@ var CaptionsSelectControlsWithIntl = /*#__PURE__*/memo(function (_ref) {
       }));
     },
     styles: popupCustomStyles,
-    popperProps: popperProps
+    popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
   }));
 });
 export var CaptionsSelectControls = injectIntl(CaptionsSelectControlsWithIntl);

package/dist/esm/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -8,7 +8,7 @@ import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "29.3.1";
+var packageVersion = "30.0.0";
 export var MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(_ref) {
   var _onPlay = _ref.onPlay,
     props = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/customMediaPlayer/mediaPlayer/mediaPlayerBase.js

@@ -230,7 +230,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       return breakpointControls.speedControls(_this.state.playerWidth);
     });
     _defineProperty(_this, "renderSpeedControls", function () {
-      var playbackSpeed = _this.state.playbackSpeed;
+      var _this$state2 = _this.state,
+        playbackSpeed = _this$state2.playbackSpeed,
+        isFullScreenEnabled = _this$state2.isFullScreenEnabled;
       var originalDimensions = _this.props.originalDimensions;
       return /*#__PURE__*/React.createElement(PlaybackSpeedControls, {
         originalDimensions: originalDimensions,
@@ -238,7 +240,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         onPlaybackSpeedChange: _this.onPlaybackSpeedChange,
         onClick: function onClick() {
           return _this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton');
-        }
+        },
+        isFullScreen: isFullScreenEnabled
       });
     });
     _defineProperty(_this, "shouldRenderVolume", function () {
@@ -491,9 +494,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDAvailable = _this$props9.isHDAvailable,
         isHDActive = _this$props9.isHDActive,
         type = _this$props9.type;
-      var _this$state2 = _this.state,
-        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-        playbackSpeed = _this$state2.playbackSpeed;
+      var _this$state3 = _this.state,
+        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+        playbackSpeed = _this$state3.playbackSpeed;
       var _this3 = _this,
         playerSize = _this3.playerSize;
       var status = videoState.status,
@@ -565,12 +568,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         _ref2$selectedTrackIn = _ref2.selectedTrackIndex,
         selectedTrackIndex = _ref2$selectedTrackIn === void 0 ? -1 : _ref2$selectedTrackIn;
       var areCaptionsEnabled = _this.props.areCaptionsEnabled;
+      var isFullScreenEnabled = _this.state.isFullScreenEnabled;
       return textTracks && /*#__PURE__*/React.createElement(CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: _this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: _this.onCaptionsEnabledChange,
-        selectedTracksIndex: selectedTrackIndex
+        selectedTracksIndex: selectedTrackIndex,
+        isFullScreen: isFullScreenEnabled
       });
     });
     _defineProperty(_this, "shouldRenderCaptionsAdminControls", function () {
@@ -579,9 +584,10 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       return (!_this.props.fileState || _this.props.fileState.status !== 'uploading') && breakpointControls.captionsAdminControls(playerWidth) && !!((_this$props$mediaSett = _this.props.mediaSettings) !== null && _this$props$mediaSett !== void 0 && _this$props$mediaSett.canUpdateVideoCaptions);
     });
     _defineProperty(_this, "renderCaptionsAdminControls", function () {
-      var _this$state3 = _this.state,
-        isArtifactUploaderOpen = _this$state3.isArtifactUploaderOpen,
-        artifactToDelete = _this$state3.artifactToDelete;
+      var _this$state4 = _this.state,
+        isArtifactUploaderOpen = _this$state4.isArtifactUploaderOpen,
+        artifactToDelete = _this$state4.artifactToDelete,
+        isFullScreenEnabled = _this$state4.isFullScreenEnabled;
       var _this$props10 = _this.props,
         textTracks = _this$props10.textTracks,
         identifier = _this$props10.identifier;
@@ -592,7 +598,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
             isArtifactUploaderOpen: true
           });
         },
-        onDelete: _this.onCaptionDelete
+        onDelete: _this.onCaptionDelete,
+        isFullScreen: isFullScreenEnabled
       }), /*#__PURE__*/React.createElement(CaptionsUploaderBrowser, {
         identifier: identifier,
         isOpen: isArtifactUploaderOpen,
@@ -649,9 +656,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDActive = _this$props11.isHDActive,
         onFirstPlay = _this$props11.onFirstPlay,
         createAnalyticsEvent = _this$props11.createAnalyticsEvent;
-      var _this$state4 = this.state,
-        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
-        playbackSpeed = _this$state4.playbackSpeed;
+      var _this$state5 = this.state,
+        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
+        playbackSpeed = _this$state5.playbackSpeed;
       var playerSize = this.playerSize;
       fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
         isAutoPlay: isAutoPlay,
@@ -713,9 +720,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         isHDAvailable = _this$props14.isHDAvailable,
         isAutoPlay = _this$props14.isAutoPlay,
         createAnalyticsEvent = _this$props14.createAnalyticsEvent;
-      var _this$state5 = this.state,
-        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
-        playbackSpeed = _this$state5.playbackSpeed;
+      var _this$state6 = this.state,
+        isFullScreenEnabled = _this$state6.isFullScreenEnabled,
+        playbackSpeed = _this$state6.playbackSpeed;
       var playerSize = this.playerSize;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,

package/dist/esm/customMediaPlayer/playbackSpeedControls.js

@@ -14,7 +14,8 @@ import Tooltip from '@atlaskit/tooltip';
 import MediaButton from '../MediaButton';
 import { messages } from '../messages';
 import { WidthObserver } from '@atlaskit/width-detector';
-import { popperProps, popupCustomStyles, popupSelectComponents } from './dropdownControlCommon';
+import { popperProps, popupCustomStyles, popupSelectComponents, getPopperPropsForFullscreen } from './dropdownControlCommon';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
   function PlaybackSpeedControls() {
     var _this;
@@ -82,7 +83,9 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         playbackSpeed = _this$props.playbackSpeed,
         intl = _this$props.intl,
-        onClick = _this$props.onClick;
+        onClick = _this$props.onClick,
+        _this$props$isFullScr = _this$props.isFullScreen,
+        isFullScreen = _this$props$isFullScr === void 0 ? false : _this$props$isFullScr;
       var popupHeight = this.state.popupHeight;
       var value = this.speedOptions()[0].options.find(function (option) {
         return option.value === playbackSpeed;
@@ -114,7 +117,7 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
           }, playbackSpeed, "x"));
         },
         styles: popupCustomStyles,
-        popperProps: popperProps
+        popperProps: fg('platform_editor_video_caption_commit') ? getPopperPropsForFullscreen(isFullScreen) : popperProps
       }));
     }
   }]);

package/dist/types/customMediaPlayer/dropdownControlCommon.d.ts

@@ -2,6 +2,12 @@ import React from 'react';
 import { type PopupSelect, type OptionType, type StylesConfig } from '@atlaskit/select';
 export declare const popupCustomStyles: StylesConfig<OptionType>;
 export declare const popperProps: PopupSelect['props']['popperProps'];
+/**
+ * Returns the appropriate popperProps based on fullscreen state.
+ * When in fullscreen, includes an `onFirstUpdate` callback that repositions the popup
+ * after Popper's initial (incorrect) positioning.
+ */
+export declare const getPopperPropsForFullscreen: (isFullScreen: boolean) => PopupSelect["props"]["popperProps"];
 export declare const popupSelectComponents: PopupSelect['props']['components'];
 export declare const createPopupSelectComponentsWithIcon: (IconComponent: React.ComponentType<{
     label: string;

package/dist/types/customMediaPlayer/mediaPlayer/captionsAdminControls.d.ts

@@ -5,8 +5,9 @@ export interface CaptionsAdminControlsProps {
     textTracks?: VideoTextTracks;
     onUpload: () => void;
     onDelete: (artifactName: string) => void;
+    isFullScreen?: boolean;
 }
-export declare const _CaptionsAdminControls: ({ intl, textTracks, onUpload, onDelete, }: CaptionsAdminControlsProps & WrappedComponentProps) => React.JSX.Element;
+export declare const _CaptionsAdminControls: ({ intl, textTracks, onUpload, onDelete, isFullScreen, }: CaptionsAdminControlsProps & WrappedComponentProps) => React.JSX.Element;
 export declare const CaptionsAdminControls: React.FC<WithIntlProps<CaptionsAdminControlsProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<CaptionsAdminControlsProps & WrappedComponentProps>;
 };

package/dist/types/customMediaPlayer/mediaPlayer/captionsSelectControls.d.ts

@@ -7,6 +7,7 @@ export interface CaptionsSelectControlsProps {
     areCaptionsEnabled: boolean;
     onCaptionsEnabledChange: (areCaptionsEnabled: boolean) => void;
     selectedTracksIndex: number;
+    isFullScreen?: boolean;
 }
 export declare const CaptionsSelectControls: React.FC<WithIntlProps<CaptionsSelectControlsProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<CaptionsSelectControlsProps & WrappedComponentProps>;

package/dist/types/customMediaPlayer/playbackSpeedControls.d.ts

@@ -8,6 +8,7 @@ export interface PlaybackSpeedControlsProps {
     originalDimensions?: NumericalCardDimensions;
     onClick?: () => void;
     onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    isFullScreen?: boolean;
 }
 export interface PlaybackSpeedControlsState {
     popupHeight: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "30.0.0",
+	"version": "30.0.1",
 	"description": "Includes common components and utilities used by other media packages",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-media-media-ui": "2.130.0",
 		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/browser-apis": "^1.0.0",
 		"@atlaskit/button": "^24.0.0",
 		"@atlaskit/code": "^18.0.0",
 		"@atlaskit/css": "^1.0.0",
@@ -58,6 +59,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"@emotion/styled": "^11.0.0",
+		"@popperjs/core": "^2.11.8",
 		"blueimp-load-image": "2.19.0",
 		"bytes": "^3.1.0",
 		"exenv": "^1.2.2",
@@ -95,6 +97,10 @@
 	"platform-feature-flags": {
 		"platform_media_resume_video_on_token_expiry": {
 			"type": "boolean"
+		},
+		"platform_editor_video_caption_commit": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"techstack": {