@atlaskit/media-ui 25.4.0 → 25.4.2

package/dist/esm/customMediaPlayer/index.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+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 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
@@ -24,13 +24,14 @@ 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 { 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 { TimeRange } from './timeRange';
-import { CurrentTime, VideoWrapper, CustomVideoWrapper, TimebarWrapper, VolumeWrapper, TimeWrapper, LeftControls, RightControls, ControlsWrapper, VolumeToggleWrapper, MutedIndicator, SpinnerWrapper, VolumeTimeRangeWrapper } from './styled';
+import { CurrentTime, VolumeWrapper, LeftControls, RightControls, ControlsWrapper, VolumeToggleWrapper, MutedIndicator, VolumeTimeRangeWrapper } from './styled';
 import { fireAnalyticsEvent, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from './analytics';
 import { formatDuration } from '../formatDuration';
 import { Shortcut, keyCodes } from '../shortcut';
@@ -45,11 +46,40 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "25.4.0";
+var packageVersion = "25.4.2";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
 var VIEWED_TRACKING_SECS = 2;
+
+/* Styles */
+
+var timebarWrapperStyles = xcss({
+  position: 'absolute',
+  width: '100%',
+  bottom: 'space.100'
+});
+var customVideoWrapperStyles = xcss({
+  width: '100%',
+  height: '100%',
+  userSelect: 'none'
+});
+var videoWrapperStyles = xcss({
+  width: '100%',
+  height: '100%'
+});
+var timeWrapperStyles = xcss({
+  marginTop: 'space.0',
+  marginInline: 'space.250',
+  marginBottom: 'space.500'
+});
+var spinnerWrapperStyles = xcss({
+  position: 'absolute',
+  top: 'space.0',
+  left: 'space.0',
+  width: '100%',
+  height: '100%'
+});
 export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   _inherits(CustomMediaPlayerBase, _Component);
   var _super = _createSuper(CustomMediaPlayerBase);
@@ -349,7 +379,12 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "renderSpinner", function () {
-      return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
+      return /*#__PURE__*/React.createElement(Flex, {
+        direction: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        xcss: spinnerWrapperStyles
+      }, /*#__PURE__*/React.createElement(Spinner, {
         appearance: "invert",
         size: "large"
       }));
@@ -570,9 +605,10 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         onCanPlay = _this$props9.onCanPlay,
         onError = _this$props9.onError,
         poster = _this$props9.poster;
-      return /*#__PURE__*/React.createElement(CustomVideoWrapper, {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: customVideoWrapperStyles,
         ref: this.videoWrapperRef,
-        "data-testid": "custom-media-player"
+        testId: "custom-media-player"
       }, /*#__PURE__*/React.createElement(MediaPlayer, {
         sourceType: type,
         src: src,
@@ -611,7 +647,10 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           skipBackward: skipBackward,
           skipForward: skipForward
         });
-        return /*#__PURE__*/React.createElement(VideoWrapper, null, /*#__PURE__*/React.createElement(WidthObserver, {
+        return /*#__PURE__*/React.createElement(Flex, {
+          direction: "column",
+          xcss: videoWrapperStyles
+        }, /*#__PURE__*/React.createElement(WidthObserver, {
           setWidth: _this2.onResize
         }), shortcuts, isLoading && _this2.renderSpinner(), /*#__PURE__*/React.createElement(PlayPauseBlanket, {
           onDoubleClick: _this2.doubleClickToFullscreen,
@@ -620,13 +659,19 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         }, video), /*#__PURE__*/React.createElement(ControlsWrapper, {
           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, {
+        }, /*#__PURE__*/React.createElement(Box, {
+          xcss: timeWrapperStyles
+        }, /*#__PURE__*/React.createElement(TimeRange, {
           currentTime: currentTime,
           bufferedTime: buffered,
           duration: duration,
           onChange: actions.navigate,
           onChanged: _this2.onTimeChanged
-        })), /*#__PURE__*/React.createElement(TimebarWrapper, null, /*#__PURE__*/React.createElement(LeftControls, null, _this2.renderPlayPauseButton(isPlaying), isLargePlayer && _this2.renderSkipBackwardButton(skipBackward), isLargePlayer && _this2.renderSkipForwardButton(skipForward), _this2.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, (isMediumPlayer || isLargePlayer) && _this2.renderCurrentTime(videoState), isLargePlayer && _this2.renderHDButton(), isLargePlayer && _this2.renderSpeedControls(), _this2.renderFullScreenButton(), isLargePlayer && _this2.renderDownloadButton()))));
+        })), /*#__PURE__*/React.createElement(Flex, {
+          alignItems: "center",
+          justifyContent: "space-between",
+          xcss: timebarWrapperStyles
+        }, /*#__PURE__*/React.createElement(LeftControls, null, _this2.renderPlayPauseButton(isPlaying), isLargePlayer && _this2.renderSkipBackwardButton(skipBackward), isLargePlayer && _this2.renderSkipForwardButton(skipForward), _this2.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, (isMediumPlayer || isLargePlayer) && _this2.renderCurrentTime(videoState), isLargePlayer && _this2.renderHDButton(), isLargePlayer && _this2.renderSpeedControls(), _this2.renderFullScreenButton(), isLargePlayer && _this2.renderDownloadButton()))));
       }));
     }
   }]);

package/dist/esm/customMediaPlayer/playbackSpeedControls.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+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

package/dist/esm/customMediaPlayer/styled.js

@@ -1,52 +1,108 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import styled from '@emotion/styled';
 import { R300 } from '@atlaskit/theme/colors';
-export var CustomVideoWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  user-select: none;\n"])));
-export var VideoWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var TimebarWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var VolumeWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
+export var VolumeWrapper = styled.div({
+  display: 'flex',
+  width: '35px',
+  overflow: 'hidden',
+  transition: 'width 0.3s',
+  alignItems: 'center',
+  bottom: "var(--ds-space-0, 0px)",
+  left: "var(--ds-space-500, 40px)"
+}, function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var TimeWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var CurrentTime = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
-export var TimeLine = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #596773;\n  border-radius: 5px;\n  position: relative;\n"])));
-export var CurrentTimeLine = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #05c;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
-export var Thumb = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 100%;\n  background-color: white;\n  border: 1px solid #666;\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  transform: translate(7px, -50%) scale(0);\n  transition: all 0.1s;\n  transition-delay: 1s;\n\n  &:hover .current-time-tooltip {\n    opacity: 1;\n  }\n"])));
-export var BufferedTime = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var LeftControls = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var RightControls = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
-export var ControlsWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var VolumeToggleWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
+export var CurrentTime = styled.div({
+  color: '#c7d1db',
+  userSelect: 'none',
+  marginRight: "var(--ds-space-100, 8px)",
+  whiteSpace: 'nowrap'
+});
+export var TimeLine = styled.div({
+  width: '100%',
+  height: '2px',
+  transitionDelay: '1s',
+  transition: 'all 0.1s',
+  backgroundColor: '#596773',
+  borderRadius: '5px',
+  position: 'relative'
+});
+export var CurrentTimeLine = styled.div({
+  backgroundColor: '#05c',
+  borderRadius: 'inherit',
+  height: 'inherit',
+  position: 'absolute',
+  top: "var(--ds-space-0, 0px)",
+  maxWidth: '100%',
+  display: 'flex',
+  alignItems: 'center'
+});
+export var Thumb = styled.div({
+  pointerEvents: 'none',
+  width: '14px',
+  height: '14px',
+  borderRadius: '100%',
+  backgroundColor: 'white',
+  border: '1px solid #666',
+  position: 'absolute',
+  right: 0,
+  transform: 'translate(7px, -50%) scale(0)',
+  transition: 'all 0.1s',
+  transitionDelay: '1s',
+  '&:hover .current-time-tooltip': {
+    opacity: 1
+  }
+});
+export var BufferedTime = styled.div({
+  backgroundColor: '#8696a7',
+  height: 'inherit',
+  borderRadius: 'inherit',
+  width: 0
+});
+export var LeftControls = styled.div({
+  display: 'flex',
+  marginLeft: "var(--ds-space-150, 12px)"
+});
+export var RightControls = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-150, 12px)"
+});
+export var ControlsWrapper = styled.div({
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  height: 'auto',
+  background: 'linear-gradient(to top, #101214, rgba(14, 22, 36, 0))',
+  position: 'absolute'
+});
+export var VolumeToggleWrapper = styled.div(function (_ref) {
   var isMuted = _ref.isMuted;
-  return isMuted ? "#EF5C48 !important;" : '';
+  return "\n  position: relative;\n  margin-right: 13px;\n  button {\n    width: 36px !important;\n    color: ".concat(isMuted ? '#EF5C48 !important;' : '', "\n  }");
 });
-export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var MutedIndicator = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), R300, function (props) {
+export var VolumeTimeRangeWrapper = styled.div({
+  width: '100%',
+  marginRight: "var(--ds-space-250, 20px)"
+});
+export var MutedIndicator = styled.div({
+  width: '29px',
+  height: '2px',
+  position: 'absolute',
+  top: "var(--ds-space-100, 8px)",
+  left: "var(--ds-space-100, 8px)",
+  zIndex: 2,
+  background: R300,
+  transform: 'rotate(32deg) translateY(10px)',
+  opacity: 0,
+  pointerEvents: 'none'
+}, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var CurrentTimeTooltip = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
-  return props.isDragging ? '1' : '0';
+export var CurrentTimeTooltip = styled.div(function (_ref2) {
+  var isDragging = _ref2.isDragging;
+  return "\n  position: absolute;\n  user-select: none;\n  top: ".concat("var(--ds-space-negative-400, -32px)", ";\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: ", "var(--ds-space-150, 12px)", ";\n  padding: ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)", ";\n  border-radius: ", "var(--ds-space-050, 4px)", ";\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", isDragging ? '1' : '0', ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n");
 });
-export var TimeRangeWrapper = styled.div(function (_ref2) {
-  var showAsActive = _ref2.showAsActive;
+export var TimeRangeWrapper = styled.div(function (_ref3) {
+  var showAsActive = _ref3.showAsActive;
   return "\n  display: flex;\n  align-items: center;\n  height: 22px;\n\n  cursor: pointer;\n  width: 100%;\n\n  &:hover ".concat(TimeLine, " {\n    height: 4px;\n    transition: all 0.1s;\n  }\n\n  &:hover ").concat(Thumb, " {\n    transition: all 0.1s;\n    transform: translate(7px, -50%) scale(1);\n  }\n\n  ").concat(TimeLine, " {\n    transition-delay: 1s;\n    ").concat(showAsActive ? 'height: 4px;' : '', "\n  }\n  ").concat(Thumb, " {\n    ").concat(showAsActive ? 'transform: translate(7px, -50%) scale(1);' : '', "\n  }\n");
-});
-export var SpinnerWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+});

package/dist/esm/customMediaPlayer/timeRange.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';
 import { TimeLine, CurrentTimeLine, Thumb, BufferedTime, CurrentTimeTooltip, TimeRangeWrapper } from './styled';

package/dist/esm/inactivityDetector/inactivityDetector.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';
 import { hideControlsClassName } from '../classNames';

package/dist/esm/media-type-icon.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import styled from '@emotion/styled';
 import ImageIcon from '@atlaskit/icon-file-type/glyph/image/24';

package/dist/esm/mediaImage/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Component } from 'react';

package/dist/esm/mediaImage/styled.js

@@ -4,7 +4,15 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["style", "imageRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 import React from 'react';
+
+/*
+  TODO: https://product-fabric.atlassian.net/browse/CXP-3132
+
+  We need to revisit omitting percentage values for Design Token since the parent applies transform(-50%, -50%) on it (packages/media/media-ui/src/mediaImage/index.tsx). This styling is complex and may potentially cause a bug if not treaded carefully.
+*/
+
 var imgStyle = {
   position: 'absolute',
   left: '50%',

package/dist/esm/shortcut.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { Component } from 'react';
 export var keyCodes = {
   space: 'Space',

package/dist/esm/test-helpers/MockGlobalImage.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var globalImage = global.Image;
 var isErrorInsteadOfLoad;
 var MockImage = /*#__PURE__*/function (_global$Image) {

package/dist/esm/test-helpers/fileReader.js

@@ -6,7 +6,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { getJest } from '@atlaskit/media-common/test-helpers';
 var jest = getJest();
 var MockFileReader = /*#__PURE__*/_createClass(function MockFileReader() {

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

@@ -2,18 +2,6 @@
 export interface MutedIndicatorProps {
     isMuted: boolean;
 }
-export declare const CustomVideoWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const VideoWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimebarWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type VolumeWrapperProps = {
     showSlider: boolean;
 };
@@ -21,10 +9,6 @@ export declare const VolumeWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & VolumeWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimeWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CurrentTime: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -83,8 +67,4 @@ export declare const TimeRangeWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & WithAsActiveProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -2,18 +2,6 @@
 export interface MutedIndicatorProps {
     isMuted: boolean;
 }
-export declare const CustomVideoWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const VideoWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimebarWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type VolumeWrapperProps = {
     showSlider: boolean;
 };
@@ -21,10 +9,6 @@ export declare const VolumeWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & VolumeWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimeWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CurrentTime: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -83,8 +67,4 @@ export declare const TimeRangeWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & WithAsActiveProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/example-helpers/styled.ts

@@ -2,70 +2,66 @@ import { token } from '@atlaskit/tokens';
 import { N900 } from '@atlaskit/theme/colors';
 import styled from '@emotion/styled';
 
-export const InputWrapper = styled.div`
-  margin: ${token('space.250', '20px')} 0;
-`;
+export const InputWrapper = styled.div({
+  margin: `${token('space.250', '20px')} 0`,
+});
 
-export const PreviewList = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-`;
+export const PreviewList = styled.ul({
+  margin: 0,
+  padding: 0,
+  listStyleType: 'none',
+});
 
-export const PreviewInfo = styled.pre`
-  font-size: 80%;
-`;
+export const PreviewInfo = styled.pre({
+  fontSize: '80%',
+});
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const PreviewItem = styled.li`
-  border-radius: 10px;
-  border: 1px solid ${token('color.border', '#ccc')};
-  padding: 10px;
-  overflow: auto;
-  max-height: 600px;
-  position: relative;
-  margin-bottom: 10px;
-`;
+export const PreviewItem = styled.li({
+  borderRadius: token('space.100', '8px'),
+  border: `1px solid ${token('color.border', '#ccc')}`,
+  padding: token('space.100', '8px'),
+  overflow: 'auto',
+  maxHeight: '600px',
+  position: 'relative',
+  marginBottom: token('space.100', '8px'),
+});
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const Code = styled.code`
-  padding: 5px;
-  border-radius: 5px;
-  background-color: ${token('color.background.inverse.subtle', '#0002')};
-  color: ${token('color.text', N900)};
-  font-size: 80%;
-`;
+export const Code = styled.code({
+  padding: token('space.050', '4px'),
+  borderRadius: token('space.050', '4px'),
+  backgroundColor: token('color.background.inverse.subtle', '#0002'),
+  color: token('color.text', N900),
+  fontSize: '80%',
+});
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const CloseButton = styled.button`
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  cursor: pointer;
-`;
+export const CloseButton = styled.button({
+  position: 'absolute',
+  top: token('space.050', '4px'),
+  right: token('space.050', '4px'),
+  cursor: 'pointer',
+});
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const PreviewImageContainer = styled.div`
-  margin-top: 10px;
-  margin-bottom: 10px;
-`;
+export const PreviewImageContainer = styled.div({
+  marginTop: token('space.100', '8px'),
+  marginBottom: token('space.100', '8px'),
+});
 
-export const OrientationSelectWrapper = styled.label`
-  margin-bottom: ${token('space.250', '20px')};
-  display: block;
-`;
+export const OrientationSelectWrapper = styled.label({
+  marginBottom: token('space.250', '20px'),
+  display: 'block',
+});
 
-export const TimeRangeWrapper = styled.div`
-  margin-top: ${token('space.500', '40px')};
-`;
+export const TimeRangeWrapper = styled.div({
+  marginTop: token('space.500', '40px'),
+});
 
-export const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
+export const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+});
 
-export const Group = styled.div`
-  width: 250px;
-  padding: ${token('space.250', '20px')};
-`;
+export const Group = styled.div({
+  width: '250px',
+  padding: token('space.250', '20px'),
+});