@atlaskit/media-ui 28.1.7 → 28.1.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-ui
 
+## 28.1.8
+
+### Patch Changes
+
+- [#138829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138829)
+  [`4838615c1e10f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4838615c1e10f) -
+  Replaced HD icon for Images and Video
+
 ## 28.1.7
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/index-compiled.js

@@ -21,14 +21,14 @@ var _videoPauseVidPause = _interopRequireDefault(require("@atlaskit/icon/core/mi
 var _fullscreenEnterVidFullScreenOn = _interopRequireDefault(require("@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on"));
 var _shrinkDiagonalVidFullScreenOff = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-diagonal--vid-full-screen-off"));
 var _volumeHighHipchatOutgoingSound = _interopRequireDefault(require("@atlaskit/icon/core/migration/volume-high--hipchat-outgoing-sound"));
-var _vidHdCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-hd-circle"));
+var _videoHd = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd"));
+var _videoHdFilled = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd-filled"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _widthDetector = require("@atlaskit/width-detector");
-var _reactVideoRenderer = _interopRequireDefault(require("react-video-renderer"));
-var _colors = require("@atlaskit/theme/colors");
+var _reactVideoRenderer = _interopRequireDefault(require("./react-video-renderer"));
 var _timeRange = require("./timeRange");
 var _volumeRange = _interopRequireDefault(require("./volumeRange"));
 var _styled = require("./styled");
@@ -166,18 +166,12 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-      var primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
-      var secondaryColor = isHDActive ? _colors.N0 : _colors.DN60;
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? _this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
-        iconBefore:
-        /*#__PURE__*/
-        //TODO: https://product-fabric.atlassian.net/browse/DSP-20900
-        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-        _react.default.createElement(_vidHdCircle.default, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
+        iconBefore: isHDActive ? /*#__PURE__*/_react.default.createElement(_videoHdFilled.default, {
+          label: "hd active"
+        }) : /*#__PURE__*/_react.default.createElement(_videoHd.default, {
           label: "hd"
         })
       });

package/dist/cjs/customMediaPlayer/index-emotion.js

@@ -18,14 +18,14 @@ var _videoPauseVidPause = _interopRequireDefault(require("@atlaskit/icon/core/mi
 var _fullscreenEnterVidFullScreenOn = _interopRequireDefault(require("@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on"));
 var _shrinkDiagonalVidFullScreenOff = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-diagonal--vid-full-screen-off"));
 var _volumeHighHipchatOutgoingSound = _interopRequireDefault(require("@atlaskit/icon/core/migration/volume-high--hipchat-outgoing-sound"));
-var _vidHdCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-hd-circle"));
+var _videoHd = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd"));
+var _videoHdFilled = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd-filled"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _primitives = require("@atlaskit/primitives");
 var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _widthDetector = require("@atlaskit/width-detector");
-var _reactVideoRenderer = _interopRequireDefault(require("react-video-renderer"));
-var _colors = require("@atlaskit/theme/colors");
+var _reactVideoRenderer = _interopRequireDefault(require("./react-video-renderer"));
 var _timeRange = require("./timeRange");
 var _volumeRange = _interopRequireDefault(require("./volumeRange"));
 var _styled = require("./styled");
@@ -175,18 +175,12 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-      var primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
-      var secondaryColor = isHDActive ? _colors.N0 : _colors.DN60;
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? _this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
-        iconBefore:
-        /*#__PURE__*/
-        //TODO: https://product-fabric.atlassian.net/browse/DSP-20900
-        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-        _react.default.createElement(_vidHdCircle.default, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
+        iconBefore: isHDActive ? /*#__PURE__*/_react.default.createElement(_videoHdFilled.default, {
+          label: "hd active"
+        }) : /*#__PURE__*/_react.default.createElement(_videoHd.default, {
           label: "hd"
         })
       });

package/dist/cjs/customMediaPlayer/index.js

@@ -16,7 +16,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props) : /*#__PURE__*/_react.default.createElement(_indexEmotion.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.1.7";
+var packageVersion = "28.1.8";
 
 // @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/playbackSpeedControls.compiled.css

@@ -0,0 +1 @@
+._1di6r5ow:active{background-color:#a6c5e229}

package/dist/cjs/customMediaPlayer/playbackSpeedControls.js

@@ -1,3 +1,4 @@
+/* playbackSpeedControls.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,9 @@ 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"));
@@ -27,6 +31,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var 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; })(); } /* 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"
+};
 var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
   function PlaybackSpeedControls() {
     var _this;
@@ -153,6 +161,13 @@ var PlaybackSpeedControls = exports.PlaybackSpeedControls = /*#__PURE__*/functio
       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
+            }));
+          }
+        },
         minMenuWidth: 140,
         maxMenuHeight: popupHeight,
         options: this.speedOptions(),

package/dist/cjs/customMediaPlayer/react-video-renderer/index.js

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

package/dist/cjs/customMediaPlayer/react-video-renderer/text.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVideoTextTrackId = void 0;
+var getVideoTextTrackId = exports.getVideoTextTrackId = function getVideoTextTrackId(kind, lang) {
+  return "".concat(kind, "-").concat(lang);
+};

package/dist/cjs/customMediaPlayer/react-video-renderer/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.requestFullScreen = void 0;
+var requestFullScreen = exports.requestFullScreen = function requestFullScreen(element) {
+  var methods = ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen'];
+  var methodName = methods.find(function (name) {
+    return element[name];
+  });
+  element[methodName]();
+};

package/dist/cjs/customMediaPlayer/react-video-renderer/video.js

@@ -0,0 +1,344 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Video = void 0;
+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"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _text = require("./text");
+var _utils = require("./utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; })(); }
+var getVolumeFromVideo = function getVolumeFromVideo(video) {
+  var volume = video.volume;
+  var isMuted = volume === 0;
+  return {
+    volume: volume,
+    isMuted: isMuted
+  };
+};
+var isSafari = typeof navigator !== 'undefined' ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false;
+var Video = exports.Video = /*#__PURE__*/function (_Component) {
+  function Video() {
+    var _this;
+    (0, _classCallCheck2.default)(this, Video);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Video, [].concat(args));
+    (0, _defineProperty2.default)(_this, "previousVolume", 1);
+    (0, _defineProperty2.default)(_this, "previousTime", -1);
+    (0, _defineProperty2.default)(_this, "videoRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(_this, "audioRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(_this, "hasCanPlayTriggered", false);
+    (0, _defineProperty2.default)(_this, "state", {
+      isLoading: true,
+      buffered: 0,
+      currentTime: 0,
+      volume: 1,
+      status: 'paused',
+      duration: 0,
+      isMuted: false
+    });
+    (0, _defineProperty2.default)(_this, "onLoadedData", function () {
+      var defaultTime = _this.props.defaultTime;
+      if (_this.currentElement) {
+        _this.currentElement.currentTime = defaultTime;
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onVolumeChange", function (event) {
+      var video = event.target;
+      var _getVolumeFromVideo = getVolumeFromVideo(video),
+        volume = _getVolumeFromVideo.volume,
+        isMuted = _getVolumeFromVideo.isMuted;
+      _this.setState({
+        volume: volume,
+        isMuted: isMuted
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onTimeUpdate", function (event) {
+      var video = event.target;
+      var onTimeChange = _this.props.onTimeChange;
+      var duration = _this.state.duration;
+      var flooredTime = Math.floor(video.currentTime);
+      if (onTimeChange && flooredTime !== _this.previousTime) {
+        onTimeChange(flooredTime, duration);
+        _this.previousTime = flooredTime;
+      }
+      _this.setState({
+        currentTime: video.currentTime
+      });
+      if (video.buffered.length) {
+        var buffered = video.buffered.end(video.buffered.length - 1);
+        _this.setState({
+          buffered: buffered
+        });
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onCanPlay", function (event) {
+      var onCanPlay = _this.props.onCanPlay;
+      var video = event.target;
+      var _getVolumeFromVideo2 = getVolumeFromVideo(video),
+        volume = _getVolumeFromVideo2.volume,
+        isMuted = _getVolumeFromVideo2.isMuted;
+      _this.setState({
+        volume: volume,
+        isMuted: isMuted,
+        isLoading: false,
+        currentTime: video.currentTime,
+        duration: video.duration
+      });
+      if (!_this.hasCanPlayTriggered) {
+        // protect against browser firing this event multiple times
+        _this.hasCanPlayTriggered = true;
+        onCanPlay && onCanPlay(event);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onPlay", function () {
+      _this.setState({
+        status: 'playing'
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onPause", function () {
+      _this.setState({
+        status: 'paused'
+      });
+    });
+    (0, _defineProperty2.default)(_this, "play", function () {
+      _this.currentElement && _this.currentElement.play();
+    });
+    (0, _defineProperty2.default)(_this, "pause", function () {
+      _this.currentElement && _this.currentElement.pause();
+    });
+    (0, _defineProperty2.default)(_this, "navigate", function (time) {
+      _this.setState({
+        currentTime: time
+      });
+      _this.currentElement && (_this.currentElement.currentTime = time);
+    });
+    (0, _defineProperty2.default)(_this, "setVolume", function (volume) {
+      _this.setState({
+        volume: volume
+      });
+      _this.currentElement && (_this.currentElement.volume = volume);
+    });
+    (0, _defineProperty2.default)(_this, "setPlaybackSpeed", function (playbackSpeed) {
+      _this.currentElement && (_this.currentElement.playbackRate = playbackSpeed);
+    });
+    (0, _defineProperty2.default)(_this, "requestFullscreen", function () {
+      var sourceType = _this.props.sourceType;
+      if (sourceType === 'video') {
+        (0, _utils.requestFullScreen)(_this.currentElement);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "mute", function () {
+      var volume = _this.state.volume;
+      _this.previousVolume = volume;
+      _this.setVolume(0);
+    });
+    (0, _defineProperty2.default)(_this, "unmute", function () {
+      _this.setVolume(_this.previousVolume);
+    });
+    (0, _defineProperty2.default)(_this, "toggleMute", function () {
+      var volume = _this.videoState.volume;
+      if (volume > 0) {
+        _this.mute();
+      } else {
+        _this.unmute();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onDurationChange", function (event) {
+      var video = event.target;
+      _this.setState({
+        duration: video.duration
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onError", function (event) {
+      var onError = _this.props.onError;
+      var video = event.target;
+      _this.setState({
+        isLoading: false,
+        status: 'errored',
+        error: video.error
+      });
+      onError && onError(event);
+    });
+    (0, _defineProperty2.default)(_this, "onWaiting", function () {
+      _this.setState({
+        isLoading: true
+      });
+    });
+    (0, _defineProperty2.default)(_this, "renderTracks", function (kind) {
+      var _textTracks$kind;
+      var textTracks = _this.props.textTracks;
+      if (textTracks && Array.isArray((_textTracks$kind = textTracks[kind]) === null || _textTracks$kind === void 0 ? void 0 : _textTracks$kind.tracks)) {
+        var _textTracks$kind2, _textTracks$kind3;
+        var tracks = (_textTracks$kind2 = textTracks[kind]) === null || _textTracks$kind2 === void 0 ? void 0 : _textTracks$kind2.tracks;
+        var selectedIndex = (_textTracks$kind3 = textTracks[kind]) === null || _textTracks$kind3 === void 0 ? void 0 : _textTracks$kind3.selectedTrackIndex;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, tracks === null || tracks === void 0 ? void 0 : tracks.map(function (_ref, index) {
+          var src = _ref.src,
+            lang = _ref.lang,
+            label = _ref.label;
+          return /*#__PURE__*/React.createElement("track", {
+            key: index,
+            id: (0, _text.getVideoTextTrackId)(kind, lang),
+            kind: kind,
+            src: src,
+            srcLang: lang,
+            label: label,
+            default: index === selectedIndex
+          });
+        }));
+      }
+      return null;
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(Video, _Component);
+  return (0, _createClass2.default)(Video, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var src = this.props.src;
+      var _this$state = this.state,
+        currentTime = _this$state.currentTime,
+        status = _this$state.status;
+      var hasSrcChanged = prevProps.src !== src;
+      if (hasSrcChanged) {
+        this.hasCanPlayTriggered = false;
+        // TODO: add test to cover this case
+        if (status === 'playing') {
+          this.play();
+        }
+        this.navigate(currentTime);
+      }
+    }
+  }, {
+    key: "videoState",
+    get: function get() {
+      var _this2 = this;
+      var _this$state2 = this.state,
+        currentTime = _this$state2.currentTime,
+        volume = _this$state2.volume,
+        status = _this$state2.status,
+        duration = _this$state2.duration,
+        buffered = _this$state2.buffered,
+        isMuted = _this$state2.isMuted,
+        isLoading = _this$state2.isLoading,
+        error = _this$state2.error;
+      return {
+        currentTime: currentTime,
+        currentActiveCues: function currentActiveCues(kind, lang) {
+          var _this2$videoRef$curre;
+          return (_this2$videoRef$curre = _this2.videoRef.current) === null || _this2$videoRef$curre === void 0 || (_this2$videoRef$curre = _this2$videoRef$curre.textTracks.getTrackById((0, _text.getVideoTextTrackId)(kind, lang))) === null || _this2$videoRef$curre === void 0 ? void 0 : _this2$videoRef$curre.activeCues;
+        },
+        volume: volume,
+        status: status,
+        duration: duration,
+        buffered: buffered,
+        isMuted: isMuted,
+        isLoading: isLoading,
+        error: error
+      };
+    }
+  }, {
+    key: "currentElement",
+    get: function get() {
+      var sourceType = this.props.sourceType;
+      if (sourceType === 'video' && this.videoRef.current) {
+        return this.videoRef.current;
+      } else if (sourceType === 'audio' && this.audioRef.current) {
+        return this.audioRef.current;
+      } else {
+        return undefined;
+      }
+    }
+  }, {
+    key: "actions",
+    get: function get() {
+      var play = this.play,
+        pause = this.pause,
+        navigate = this.navigate,
+        setVolume = this.setVolume,
+        setPlaybackSpeed = this.setPlaybackSpeed,
+        requestFullscreen = this.requestFullscreen,
+        mute = this.mute,
+        unmute = this.unmute,
+        toggleMute = this.toggleMute;
+      return {
+        play: play,
+        pause: pause,
+        navigate: navigate,
+        setVolume: setVolume,
+        setPlaybackSpeed: setPlaybackSpeed,
+        requestFullscreen: requestFullscreen,
+        mute: mute,
+        unmute: unmute,
+        toggleMute: toggleMute
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var videoState = this.videoState,
+        actions = this.actions;
+      var _this$props = this.props,
+        sourceType = _this$props.sourceType,
+        poster = _this$props.poster,
+        src = _this$props.src,
+        children = _this$props.children,
+        autoPlay = _this$props.autoPlay,
+        controls = _this$props.controls,
+        preload = _this$props.preload,
+        crossOrigin = _this$props.crossOrigin;
+      var props = {
+        src: src,
+        preload: preload,
+        controls: controls,
+        autoPlay: autoPlay,
+        onLoadedData: this.onLoadedData,
+        onPlay: this.onPlay,
+        onPause: this.onPause,
+        onVolumeChange: this.onVolumeChange,
+        onTimeUpdate: this.onTimeUpdate,
+        onCanPlay: this.onCanPlay,
+        onDurationChange: this.onDurationChange,
+        onError: this.onError,
+        onWaiting: this.onWaiting,
+        crossOrigin: crossOrigin
+      };
+      if (sourceType === 'video') {
+        return children(
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/media-has-caption
+        React.createElement("video", (0, _extends2.default)({
+          ref: this.videoRef,
+          poster: poster
+        }, props), this.renderTracks('subtitles'), this.renderTracks('captions'), this.renderTracks('descriptions'), this.renderTracks('chapters'), this.renderTracks('metadata')), videoState, actions, this.videoRef);
+      } else {
+        // eslint-disable-next-line jsx-a11y/media-has-caption
+        return children( /*#__PURE__*/React.createElement("audio", (0, _extends2.default)({
+          ref: this.audioRef
+        }, props)), videoState, actions, this.audioRef);
+      }
+    }
+  }]);
+}(_react.Component);
+(0, _defineProperty2.default)(Video, "defaultProps", {
+  defaultTime: 0,
+  sourceType: 'video',
+  autoPlay: false,
+  controls: false,
+  preload: isSafari ? 'auto' : 'metadata'
+});

package/dist/cjs/messages.js

@@ -755,5 +755,25 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.media.abuse_modal_submit',
     defaultMessage: 'Proceed with download',
     description: 'Abuse Modal Submit button caption'
+  },
+  image_cropper_arrow_keys_label: {
+    id: 'media.media-avatar-picker.image-cropper.arrow-keys.label',
+    defaultMessage: 'Draggable Image, Ensure your screen reader is not in browse mode. use arrow keys to move & crop the image',
+    description: 'Inform about the image crop functionality using arrow keys'
+  },
+  image_cropper_image_moved: {
+    id: 'media.media-avatar-picker.image-cropper.arrow-keys.action',
+    defaultMessage: 'You have moved the image from {key, select, left {left to right} right {right to left} top {top to bottom} other {bottom to top} }, use arrow keys to move & crop the image',
+    description: 'Inform about the image movement when the arrow keys are pressed'
+  },
+  image_cropper_zoom_out: {
+    id: 'media.media-avatar-picker.image-cropper.zoom_out',
+    defaultMessage: 'to 0% zoom',
+    description: 'Label for the zoom out button in image cropper slider'
+  },
+  image_cropper_zoom_in: {
+    id: 'media.media-avatar-picker.image-cropper.zoom_in',
+    defaultMessage: 'to 100% zoom',
+    description: 'Label for the zoom in button in image cropper slider'
   }
 });

package/dist/es2019/customMediaPlayer/index-compiled.js

@@ -12,14 +12,14 @@ import PauseIcon from '@atlaskit/icon/core/migration/video-pause--vid-pause';
 import FullScreenIconOn from '@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on';
 import FullScreenIconOff from '@atlaskit/icon/core/migration/shrink-diagonal--vid-full-screen-off';
 import SoundIcon from '@atlaskit/icon/core/migration/volume-high--hipchat-outgoing-sound';
-import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
+import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
+import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
-import MediaPlayer from 'react-video-renderer';
-import { N0, DN60 } from '@atlaskit/theme/colors';
+import MediaPlayer from './react-video-renderer';
 import { TimeRange } from './timeRange';
 import VolumeRange from './volumeRange';
 import { CurrentTime, VolumeWrapper, LeftControls, RightControls, VolumeToggleWrapper, MutedIndicator, VolumeTimeRangeWrapper } from './styled';
@@ -149,18 +149,12 @@ export class CustomMediaPlayerBase extends Component {
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-      const primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
-      const secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
-        iconBefore:
-        /*#__PURE__*/
-        //TODO: https://product-fabric.atlassian.net/browse/DSP-20900
-        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-        React.createElement(HDIcon, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
+        iconBefore: isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
+          label: "hd active"
+        }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
           label: "hd"
         })
       });

package/dist/es2019/customMediaPlayer/index-emotion.js

@@ -9,14 +9,14 @@ import PauseIcon from '@atlaskit/icon/core/migration/video-pause--vid-pause';
 import FullScreenIconOn from '@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on';
 import FullScreenIconOff from '@atlaskit/icon/core/migration/shrink-diagonal--vid-full-screen-off';
 import SoundIcon from '@atlaskit/icon/core/migration/volume-high--hipchat-outgoing-sound';
-import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
+import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
+import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { xcss, Box, Flex } from '@atlaskit/primitives';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
-import MediaPlayer from 'react-video-renderer';
-import { N0, DN60 } from '@atlaskit/theme/colors';
+import MediaPlayer from './react-video-renderer';
 import { TimeRange } from './timeRange';
 import VolumeRange from './volumeRange';
 import { CurrentTime, VolumeWrapper, LeftControls, RightControls, VolumeToggleWrapper, MutedIndicator, VolumeTimeRangeWrapper } from './styled';
@@ -158,18 +158,12 @@ export class CustomMediaPlayerBase extends Component {
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-      const primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
-      const secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
-        iconBefore:
-        /*#__PURE__*/
-        //TODO: https://product-fabric.atlassian.net/browse/DSP-20900
-        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-        React.createElement(HDIcon, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
+        iconBefore: isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
+          label: "hd active"
+        }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
           label: "hd"
         })
       });

package/dist/es2019/customMediaPlayer/index.js

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

package/dist/es2019/customMediaPlayer/playbackSpeedControls.compiled.css

@@ -0,0 +1 @@
+._1di6r5ow:active{background-color:#a6c5e229}