@atlaskit/media-ui 25.0.13 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 25.2.0
+
+### Minor Changes
+
+- [#69454](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69454) [`41f49439d5da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/41f49439d5da) - [ux] ECA11Y-198: Add Shift + F10 shortcut to focus play/pause button when video is selected
+
+## 25.1.0
+
+### Minor Changes
+
+- [#69045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69045) [`b4de23a94d1f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b4de23a94d1f) - Added new intl message for button to open Media viewer in Media Card
+
 ## 25.0.13
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/getControlsWrapperClassName.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getControlsWrapperClassName = void 0;
 var _classNames = require("../classNames");
-var getControlsWrapperClassName = exports.getControlsWrapperClassName = function getControlsWrapperClassName(wasPlayedOnce) {
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var getControlsWrapperClassName = exports.getControlsWrapperClassName = function getControlsWrapperClassName(wasPlayedOnce, areVideoControlsFocused) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    return !wasPlayedOnce || areVideoControlsFocused ? '' : _classNames.hideControlsClassName;
+  }
   return !wasPlayedOnce ? '' : _classNames.hideControlsClassName;
 };

package/dist/cjs/customMediaPlayer/index.js

@@ -23,6 +23,7 @@ var _outgoingSound = _interopRequireDefault(require("@atlaskit/icon/glyph/hipcha
 var _vidHdCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-hd-circle"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _mediaCommon = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _widthDetector = require("@atlaskit/width-detector");
@@ -51,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep media player components used in media-viewer 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
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "25.0.13";
+var packageVersion = "25.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -67,6 +68,8 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "videoWrapperRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "controlsWrapperRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "videoPlayPauseButtonRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "videoState", {
       isLoading: true,
       buffered: 0,
@@ -82,7 +85,8 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isFullScreenEnabled: false,
       playerSize: 'large',
-      playbackSpeed: 1
+      playbackSpeed: 1,
+      areVideoControlsFocused: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireFirstPlayedTrackEvent", function () {
       var _this$props = _this.props,
@@ -105,6 +109,14 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
         playbackSpeed: playbackSpeed
       }, fileId), createAnalyticsEvent);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocusChange", function () {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        //Check if element or any of it's children is focused
+        _this.setState({
+          areVideoControlsFocused: !!_this.controlsWrapperRef.current && !!_this.controlsWrapperRef.current.contains(document.activeElement)
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullScreenChange", function (e) {
       if (e.target !== _this.videoWrapperRef.current) {
         return;
@@ -119,6 +131,15 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
         });
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      if (event.shiftKey && (event.key === 'F10' || event.keyCode === 121) && _this.videoPlayPauseButtonRef.current && _this.props.isVideoSelected) {
+        event.preventDefault();
+        _this.videoPlayPauseButtonRef.current.focus();
+        if (_this.props.showControls) {
+          _this.props.showControls();
+        }
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChanged", function () {
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
@@ -304,6 +325,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
         testId: "custom-media-player-play-toggle-button",
         "data-test-is-playing": isPlaying,
         iconBefore: toggleButtonIcon,
+        buttonRef: _this.videoPlayPauseButtonRef,
         onClick: isPlaying ? _this.pausePlayByButtonClick : _this.startPlayByButtonClick
       }));
     });
@@ -451,6 +473,11 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
       if (this.videoWrapperRef.current) {
         this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        document.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('focus', this.onFocusChange, true);
+        window.addEventListener('blur', this.onFocusChange, true);
+      }
       _simultaneousPlayManager.default.subscribe(this);
       if (isAutoPlay) {
         _simultaneousPlayManager.default.pauseOthers(this);
@@ -471,6 +498,11 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
         var _this$props$onFullscr2, _this$props7;
         (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props7, false);
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('focus', this.onFocusChange, true);
+        window.removeEventListener('blur', this.onFocusChange, true);
+      }
       _simultaneousPlayManager.default.unsubscribe(this);
     }
   }, {
@@ -593,7 +625,8 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
           onClick: isPlaying ? _this2.pausePlayByBlanketClick : _this2.startPlayByBlanketClick,
           "data-testid": "play-pause-blanket"
         }, video), /*#__PURE__*/_react.default.createElement(_styled.ControlsWrapper, {
-          className: (0, _getControlsWrapperClassName.getControlsWrapperClassName)(_this2.wasPlayedOnce)
+          ref: _this2.controlsWrapperRef,
+          className: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? (0, _getControlsWrapperClassName.getControlsWrapperClassName)(_this2.wasPlayedOnce, _this2.state.areVideoControlsFocused) : (0, _getControlsWrapperClassName.getControlsWrapperClassName)(_this2.wasPlayedOnce)
         }, /*#__PURE__*/_react.default.createElement(_styled.TimeWrapper, null, /*#__PURE__*/_react.default.createElement(_timeRange.TimeRange, {
           currentTime: currentTime,
           bufferedTime: buffered,

package/dist/cjs/messages.js

@@ -675,5 +675,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.media.file_is_selected',
     defaultMessage: 'File {name} is selected',
     description: '{name} it is the parameter, which saying alt text or file name of uploaded file'
+  },
+  open_file_in_viewer: {
+    id: 'fabric.media.open_file_in_viewer',
+    defaultMessage: 'Open {name}',
+    description: 'Shown when user focuses on preview to open the full screen viewer of the file with {name}'
   }
 });

package/dist/es2019/customMediaPlayer/getControlsWrapperClassName.js

@@ -1,2 +1,8 @@
 import { hideControlsClassName } from '../classNames';
-export const getControlsWrapperClassName = wasPlayedOnce => !wasPlayedOnce ? '' : hideControlsClassName;
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export const getControlsWrapperClassName = (wasPlayedOnce, areVideoControlsFocused) => {
+  if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    return !wasPlayedOnce || areVideoControlsFocused ? '' : hideControlsClassName;
+  }
+  return !wasPlayedOnce ? '' : hideControlsClassName;
+};

package/dist/es2019/customMediaPlayer/index.js

@@ -13,6 +13,7 @@ import SoundIcon from '@atlaskit/icon/glyph/hipchat/outgoing-sound';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -34,7 +35,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "25.0.13";
+const packageVersion = "25.2.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -43,6 +44,8 @@ export class CustomMediaPlayerBase extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "videoWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "controlsWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "videoPlayPauseButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "videoState", {
       isLoading: true,
       buffered: 0,
@@ -58,7 +61,8 @@ export class CustomMediaPlayerBase extends Component {
     _defineProperty(this, "state", {
       isFullScreenEnabled: false,
       playerSize: 'large',
-      playbackSpeed: 1
+      playbackSpeed: 1,
+      areVideoControlsFocused: false
     });
     _defineProperty(this, "fireFirstPlayedTrackEvent", () => {
       const {
@@ -83,6 +87,14 @@ export class CustomMediaPlayerBase extends Component {
         playbackSpeed
       }, fileId), createAnalyticsEvent);
     });
+    _defineProperty(this, "onFocusChange", () => {
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        //Check if element or any of it's children is focused
+        this.setState({
+          areVideoControlsFocused: !!this.controlsWrapperRef.current && !!this.controlsWrapperRef.current.contains(document.activeElement)
+        });
+      }
+    });
     _defineProperty(this, "onFullScreenChange", e => {
       if (e.target !== this.videoWrapperRef.current) {
         return;
@@ -99,6 +111,15 @@ export class CustomMediaPlayerBase extends Component {
         });
       }
     });
+    _defineProperty(this, "handleKeyDown", event => {
+      if (event.shiftKey && (event.key === 'F10' || event.keyCode === 121) && this.videoPlayPauseButtonRef.current && this.props.isVideoSelected) {
+        event.preventDefault();
+        this.videoPlayPauseButtonRef.current.focus();
+        if (this.props.showControls) {
+          this.props.showControls();
+        }
+      }
+    });
     _defineProperty(this, "onTimeChanged", () => {
       this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
@@ -300,6 +321,7 @@ export class CustomMediaPlayerBase extends Component {
         testId: "custom-media-player-play-toggle-button",
         "data-test-is-playing": isPlaying,
         iconBefore: toggleButtonIcon,
+        buttonRef: this.videoPlayPauseButtonRef,
         onClick: isPlaying ? this.pausePlayByButtonClick : this.startPlayByButtonClick
       }));
     });
@@ -457,6 +479,11 @@ export class CustomMediaPlayerBase extends Component {
     if (this.videoWrapperRef.current) {
       this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
     }
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+      document.addEventListener('keydown', this.handleKeyDown);
+      window.addEventListener('focus', this.onFocusChange, true);
+      window.addEventListener('blur', this.onFocusChange, true);
+    }
     simultaneousPlayManager.subscribe(this);
     if (isAutoPlay) {
       simultaneousPlayManager.pauseOthers(this);
@@ -475,6 +502,11 @@ export class CustomMediaPlayerBase extends Component {
       var _this$props$onFullscr2, _this$props2;
       (_this$props$onFullscr2 = (_this$props2 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props2, false);
     }
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+      document.removeEventListener('keydown', this.handleKeyDown);
+      window.removeEventListener('focus', this.onFocusChange, true);
+      window.removeEventListener('blur', this.onFocusChange, true);
+    }
     simultaneousPlayManager.unsubscribe(this);
   }
   setActions(actions) {
@@ -598,7 +630,8 @@ export class CustomMediaPlayerBase extends Component {
         onClick: isPlaying ? this.pausePlayByBlanketClick : this.startPlayByBlanketClick,
         "data-testid": "play-pause-blanket"
       }, video), /*#__PURE__*/React.createElement(ControlsWrapper, {
-        className: getControlsWrapperClassName(this.wasPlayedOnce)
+        ref: this.controlsWrapperRef,
+        className: getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? getControlsWrapperClassName(this.wasPlayedOnce, this.state.areVideoControlsFocused) : getControlsWrapperClassName(this.wasPlayedOnce)
       }, /*#__PURE__*/React.createElement(TimeWrapper, null, /*#__PURE__*/React.createElement(TimeRange, {
         currentTime: currentTime,
         bufferedTime: buffered,

package/dist/es2019/messages.js

@@ -669,5 +669,10 @@ export const messages = defineMessages({
     id: 'fabric.media.file_is_selected',
     defaultMessage: 'File {name} is selected',
     description: '{name} it is the parameter, which saying alt text or file name of uploaded file'
+  },
+  open_file_in_viewer: {
+    id: 'fabric.media.open_file_in_viewer',
+    defaultMessage: 'Open {name}',
+    description: 'Shown when user focuses on preview to open the full screen viewer of the file with {name}'
   }
 });

package/dist/esm/customMediaPlayer/getControlsWrapperClassName.js

@@ -1,4 +1,8 @@
 import { hideControlsClassName } from '../classNames';
-export var getControlsWrapperClassName = function getControlsWrapperClassName(wasPlayedOnce) {
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export var getControlsWrapperClassName = function getControlsWrapperClassName(wasPlayedOnce, areVideoControlsFocused) {
+  if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    return !wasPlayedOnce || areVideoControlsFocused ? '' : hideControlsClassName;
+  }
   return !wasPlayedOnce ? '' : hideControlsClassName;
 };

package/dist/esm/customMediaPlayer/index.js

@@ -23,6 +23,7 @@ import SoundIcon from '@atlaskit/icon/glyph/hipchat/outgoing-sound';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -44,7 +45,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "25.0.13";
+var packageVersion = "25.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -60,6 +61,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "videoWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "controlsWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "videoPlayPauseButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "videoState", {
       isLoading: true,
       buffered: 0,
@@ -75,7 +78,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "state", {
       isFullScreenEnabled: false,
       playerSize: 'large',
-      playbackSpeed: 1
+      playbackSpeed: 1,
+      areVideoControlsFocused: false
     });
     _defineProperty(_assertThisInitialized(_this), "fireFirstPlayedTrackEvent", function () {
       var _this$props = _this.props,
@@ -98,6 +102,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         playbackSpeed: playbackSpeed
       }, fileId), createAnalyticsEvent);
     });
+    _defineProperty(_assertThisInitialized(_this), "onFocusChange", function () {
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        //Check if element or any of it's children is focused
+        _this.setState({
+          areVideoControlsFocused: !!_this.controlsWrapperRef.current && !!_this.controlsWrapperRef.current.contains(document.activeElement)
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onFullScreenChange", function (e) {
       if (e.target !== _this.videoWrapperRef.current) {
         return;
@@ -112,6 +124,15 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         });
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      if (event.shiftKey && (event.key === 'F10' || event.keyCode === 121) && _this.videoPlayPauseButtonRef.current && _this.props.isVideoSelected) {
+        event.preventDefault();
+        _this.videoPlayPauseButtonRef.current.focus();
+        if (_this.props.showControls) {
+          _this.props.showControls();
+        }
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onTimeChanged", function () {
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
@@ -297,6 +318,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         testId: "custom-media-player-play-toggle-button",
         "data-test-is-playing": isPlaying,
         iconBefore: toggleButtonIcon,
+        buttonRef: _this.videoPlayPauseButtonRef,
         onClick: isPlaying ? _this.pausePlayByButtonClick : _this.startPlayByButtonClick
       }));
     });
@@ -444,6 +466,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       if (this.videoWrapperRef.current) {
         this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
       }
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        document.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('focus', this.onFocusChange, true);
+        window.addEventListener('blur', this.onFocusChange, true);
+      }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
         simultaneousPlayManager.pauseOthers(this);
@@ -464,6 +491,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         var _this$props$onFullscr2, _this$props7;
         (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props7, false);
       }
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('focus', this.onFocusChange, true);
+        window.removeEventListener('blur', this.onFocusChange, true);
+      }
       simultaneousPlayManager.unsubscribe(this);
     }
   }, {
@@ -586,7 +618,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           onClick: isPlaying ? _this2.pausePlayByBlanketClick : _this2.startPlayByBlanketClick,
           "data-testid": "play-pause-blanket"
         }, video), /*#__PURE__*/React.createElement(ControlsWrapper, {
-          className: getControlsWrapperClassName(_this2.wasPlayedOnce)
+          ref: _this2.controlsWrapperRef,
+          className: getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? getControlsWrapperClassName(_this2.wasPlayedOnce, _this2.state.areVideoControlsFocused) : getControlsWrapperClassName(_this2.wasPlayedOnce)
         }, /*#__PURE__*/React.createElement(TimeWrapper, null, /*#__PURE__*/React.createElement(TimeRange, {
           currentTime: currentTime,
           bufferedTime: buffered,

package/dist/esm/messages.js

@@ -669,5 +669,10 @@ export var messages = defineMessages({
     id: 'fabric.media.file_is_selected',
     defaultMessage: 'File {name} is selected',
     description: '{name} it is the parameter, which saying alt text or file name of uploaded file'
+  },
+  open_file_in_viewer: {
+    id: 'fabric.media.open_file_in_viewer',
+    defaultMessage: 'Open {name}',
+    description: 'Shown when user focuses on preview to open the full screen viewer of the file with {name}'
   }
 });

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

@@ -1 +1 @@
-export declare const getControlsWrapperClassName: (wasPlayedOnce: boolean) => "mvng-hide-controls" | "";
+export declare const getControlsWrapperClassName: (wasPlayedOnce: boolean, areVideoControlsFocused?: boolean) => "mvng-hide-controls" | "";

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

@@ -23,12 +23,16 @@ export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowContr
     readonly originalDimensions?: NumericalCardDimensions;
     readonly featureFlags?: MediaFeatureFlags;
     readonly poster?: string;
+    readonly isVideoSelected?: boolean;
 }
 export interface CustomMediaPlayerState extends WithMediaPlayerState {
+    areVideoControlsFocused: boolean;
 }
 export type Action = () => void;
 export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerProps & WrappedComponentProps & WithAnalyticsEventsProps, CustomMediaPlayerState> {
     videoWrapperRef: React.RefObject<HTMLDivElement>;
+    controlsWrapperRef: React.RefObject<HTMLDivElement>;
+    videoPlayPauseButtonRef: React.RefObject<HTMLButtonElement>;
     private actions?;
     private videoState;
     private wasPlayedOnce;
@@ -39,7 +43,9 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     componentDidMount(): void;
     private fireFirstPlayedTrackEvent;
     componentWillUnmount(): void;
+    onFocusChange: () => void;
     private onFullScreenChange;
+    private handleKeyDown;
     private onTimeChanged;
     private onVolumeChanged;
     private onCurrentTimeChange;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'request_access_description' | 'click_to_join_description' | 'request_access_pending_description' | 'click_to_join' | 'request_access' | 'request_access_pending' | 'forbidden_description' | 'request_denied_description';
-export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'select_an_avatar' | 'upload_an_avatar' | 'or_select_default_avatars' | 'select_an_avatar_from_all_defaults' | 'show_more_avatars_btn_label' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | 'file_image_is_selected' | 'file_video_is_selected' | 'file_audio_is_selected' | 'file_doc_is_selected' | 'file_archive_is_selected' | 'file_unknown_is_selected' | RequestAccessMessageKey;
+export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'select_an_avatar' | 'upload_an_avatar' | 'or_select_default_avatars' | 'select_an_avatar_from_all_defaults' | 'show_more_avatars_btn_label' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | 'file_image_is_selected' | 'file_video_is_selected' | 'file_audio_is_selected' | 'file_doc_is_selected' | 'file_archive_is_selected' | 'file_unknown_is_selected' | 'open_file_in_viewer' | RequestAccessMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types-ts4.5/customMediaPlayer/getControlsWrapperClassName.d.ts

@@ -1 +1 @@
-export declare const getControlsWrapperClassName: (wasPlayedOnce: boolean) => "mvng-hide-controls" | "";
+export declare const getControlsWrapperClassName: (wasPlayedOnce: boolean, areVideoControlsFocused?: boolean) => "mvng-hide-controls" | "";

package/dist/types-ts4.5/customMediaPlayer/index.d.ts

@@ -23,12 +23,16 @@ export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowContr
     readonly originalDimensions?: NumericalCardDimensions;
     readonly featureFlags?: MediaFeatureFlags;
     readonly poster?: string;
+    readonly isVideoSelected?: boolean;
 }
 export interface CustomMediaPlayerState extends WithMediaPlayerState {
+    areVideoControlsFocused: boolean;
 }
 export type Action = () => void;
 export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerProps & WrappedComponentProps & WithAnalyticsEventsProps, CustomMediaPlayerState> {
     videoWrapperRef: React.RefObject<HTMLDivElement>;
+    controlsWrapperRef: React.RefObject<HTMLDivElement>;
+    videoPlayPauseButtonRef: React.RefObject<HTMLButtonElement>;
     private actions?;
     private videoState;
     private wasPlayedOnce;
@@ -39,7 +43,9 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     componentDidMount(): void;
     private fireFirstPlayedTrackEvent;
     componentWillUnmount(): void;
+    onFocusChange: () => void;
     private onFullScreenChange;
+    private handleKeyDown;
     private onTimeChanged;
     private onVolumeChanged;
     private onCurrentTimeChange;

package/dist/types-ts4.5/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'request_access_description' | 'click_to_join_description' | 'request_access_pending_description' | 'click_to_join' | 'request_access' | 'request_access_pending' | 'forbidden_description' | 'request_denied_description';
-export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'select_an_avatar' | 'upload_an_avatar' | 'or_select_default_avatars' | 'select_an_avatar_from_all_defaults' | 'show_more_avatars_btn_label' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | 'file_image_is_selected' | 'file_video_is_selected' | 'file_audio_is_selected' | 'file_doc_is_selected' | 'file_archive_is_selected' | 'file_unknown_is_selected' | RequestAccessMessageKey;
+export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'select_an_avatar' | 'upload_an_avatar' | 'or_select_default_avatars' | 'select_an_avatar_from_all_defaults' | 'show_more_avatars_btn_label' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | 'file_image_is_selected' | 'file_video_is_selected' | 'file_audio_is_selected' | 'file_doc_is_selected' | 'file_archive_is_selected' | 'file_unknown_is_selected' | 'open_file_in_viewer' | RequestAccessMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "25.0.13",
+  "version": "25.2.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -23,17 +23,18 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/button": "^17.5.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/locale": "^2.6.0",
     "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/select": "^17.0.3",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
+    "@atlaskit/select": "^17.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -52,7 +53,7 @@
   },
   "devDependencies": {
     "@af/visual-regression": "*",
-    "@atlaskit/analytics-listeners": "^8.7.0",
+    "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -110,5 +111,10 @@
     "./locales": "./src/locales.ts",
     ".": "./src/index.ts"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.editor.a11y_video_controls_keyboard_support_yhcxh": {
+      "type": "boolean"
+    }
+  }
 }