@atlaskit/media-ui 22.2.4 → 22.3.1

package/dist/esm/customMediaPlayer/playbackSpeedControls.js

@@ -5,15 +5,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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; } }
-
 /* 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
@@ -28,35 +23,25 @@ import { messages } from '../messages';
 import { WidthObserver } from '@atlaskit/width-detector';
 export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
   _inherits(PlaybackSpeedControls, _Component);
-
   var _super = _createSuper(PlaybackSpeedControls);
-
   function PlaybackSpeedControls() {
     var _this;
-
     _classCallCheck(this, PlaybackSpeedControls);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       popupHeight: 255
     });
-
     _defineProperty(_assertThisInitialized(_this), "onPlaybackSpeedChange", function (option, _actionMeta) {
       var onPlaybackSpeedChange = _this.props.onPlaybackSpeedChange;
-
       if (!option) {
         return;
       }
-
       var playbackSpeed = parseFloat("".concat(option.value));
       onPlaybackSpeedChange(playbackSpeed);
     });
-
     _defineProperty(_assertThisInitialized(_this), "speedOptions", function () {
       return [{
         // @ts-ignore: FormattedMessage is returning an Element which is a type mismatch with what OptionType wants. This can be fix by using 'intl' object once this packages gets refactor later.
@@ -79,7 +64,6 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
         }]
       }];
     });
-
     _defineProperty(_assertThisInitialized(_this), "popupCustomStyles", {
       container: function container(styles) {
         return _objectSpread(_objectSpread({}, styles), {}, {
@@ -96,7 +80,7 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
       },
       option: function option(styles, _ref) {
         var isFocused = _ref.isFocused,
-            isSelected = _ref.isSelected;
+          isSelected = _ref.isSelected;
         return _objectSpread(_objectSpread({}, styles), {}, {
           color: isSelected ? '#579dff' : 'inherit',
           backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
@@ -111,38 +95,32 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
       var originalDimensions = _this.props.originalDimensions;
-
       if (originalDimensions) {
         var aspectRatio = originalDimensions.height / originalDimensions.width;
         var controlsSize = 60;
         var minimumHeight = 100;
         var popupHeight = Math.max(aspectRatio * width - controlsSize, minimumHeight);
-
         _this.setState({
           popupHeight: popupHeight
         });
-      } // This is a hacky solution. Please replace with a better one if you find one.
+      }
+      // This is a hacky solution. Please replace with a better one if you find one.
       // There is something inside popper.js that recalc position on scroll.
       // We enable this functionality with `eventListeners` modifier.
       // Here we simulate scroll even to trick popper.js to recalc position.
-
-
       window.dispatchEvent(new CustomEvent('scroll'));
     });
-
     return _this;
   }
-
   _createClass(PlaybackSpeedControls, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          playbackSpeed = _this$props.playbackSpeed,
-          intl = _this$props.intl,
-          onClick = _this$props.onClick;
+        playbackSpeed = _this$props.playbackSpeed,
+        intl = _this$props.intl,
+        onClick = _this$props.onClick;
       var popupHeight = this.state.popupHeight;
       var value = this.speedOptions()[0].options.find(function (option) {
         return option.value === playbackSpeed;
@@ -185,7 +163,7 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
         onChange: this.onPlaybackSpeedChange,
         target: function target(_ref2) {
           var ref = _ref2.ref,
-              isOpen = _ref2.isOpen;
+            isOpen = _ref2.isOpen;
           return /*#__PURE__*/React.createElement(Tooltip, {
             content: intl.formatMessage(messages.playbackSpeed),
             position: "top"
@@ -201,7 +179,6 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-
   return PlaybackSpeedControls;
 }(Component);
 export default injectIntl(PlaybackSpeedControls);

package/dist/esm/customMediaPlayer/simultaneousPlayManager.js

@@ -1,17 +1,13 @@
 var players = [];
-
 var addPlayer = function addPlayer(player) {
   return players.push(player);
 };
-
 var removePlayer = function removePlayer(player) {
   var playerIndex = players.indexOf(player);
-
   if (playerIndex > -1) {
     players.splice(playerIndex, 1);
   }
 };
-
 export default {
   pauseOthers: function pauseOthers(player) {
     players.forEach(function (otherPlayer) {

package/dist/esm/customMediaPlayer/styled.js

@@ -1,7 +1,5 @@
 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';

package/dist/esm/customMediaPlayer/timeRange.js

@@ -5,131 +5,106 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 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; } }
-
 import React from 'react';
 import { Component } from 'react';
 import { TimeLine, CurrentTimeLine, Thumb, BufferedTime, CurrentTimeTooltip, TimeRangeWrapper } from './styled';
 import { formatDuration } from '../formatDuration';
 export var TimeRange = /*#__PURE__*/function (_Component) {
   _inherits(TimeRange, _Component);
-
   var _super = _createSuper(TimeRange);
-
   function TimeRange() {
     var _this;
-
     _classCallCheck(this, TimeRange);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "thumbElement", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "wrapperElement", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "wrapperElementWidth", 0);
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       isDragging: false,
       dragStartClientX: 0
     });
-
     _defineProperty(_assertThisInitialized(_this), "setWrapperWidth", function () {
       if (!_this.wrapperElement.current) {
         return;
       }
-
       _this.wrapperElementWidth = _this.wrapperElement.current.getBoundingClientRect().width;
     });
-
     _defineProperty(_assertThisInitialized(_this), "onMouseMove", function (e) {
       var _this$state = _this.state,
-          isDragging = _this$state.isDragging,
-          dragStartClientX = _this$state.dragStartClientX;
-
+        isDragging = _this$state.isDragging,
+        dragStartClientX = _this$state.dragStartClientX;
       if (!isDragging) {
         return;
       }
-
       e.stopPropagation();
       var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          duration = _this$props.duration,
-          currentTime = _this$props.currentTime;
+        onChange = _this$props.onChange,
+        duration = _this$props.duration,
+        currentTime = _this$props.currentTime;
       var clientX = e.clientX;
       var absolutePosition = clientX - dragStartClientX;
       var isOutsideToRight = absolutePosition > _this.wrapperElementWidth;
-      var isOutsideToLeft = absolutePosition < 0; // Next to conditions take care of situation where user moves mouse very quickly out to the side
+      var isOutsideToLeft = absolutePosition < 0;
+
+      // Next to conditions take care of situation where user moves mouse very quickly out to the side
       // left or right. It's very easy to leave thumb not at the end/beginning of a timeline.
       // This will guarantee that in this case thumb will move to appropriate extreme.
-
       if (isOutsideToRight) {
         absolutePosition = _this.wrapperElementWidth;
       }
-
       if (isOutsideToLeft) {
         absolutePosition = 0;
       }
-
       var newTimeWithBoundaries = absolutePosition * duration / _this.wrapperElementWidth;
-
       if (currentTime !== newTimeWithBoundaries) {
         // If value hasn't changed we don't want to call "change"
         onChange(newTimeWithBoundaries);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function () {
-      var onChanged = _this.props.onChanged; // As soon as user finished dragging, we should clean up events.
-
+      var onChanged = _this.props.onChanged;
+      // As soon as user finished dragging, we should clean up events.
       document.removeEventListener('mouseup', _this.onMouseUp);
       document.removeEventListener('mousemove', _this.onMouseMove);
-
       if (onChanged) {
         onChanged();
       }
-
       _this.setState({
         isDragging: false
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "onThumbMouseDown", function (e) {
-      e.preventDefault(); // We need to recalculate every time, because width can change (thanks, editor ;-)
+      e.preventDefault();
+
+      // We need to recalculate every time, because width can change (thanks, editor ;-)
+      _this.setWrapperWidth();
 
-      _this.setWrapperWidth(); // We are implementing drag and drop here. There is no reason to start listening for mouseUp or move
+      // We are implementing drag and drop here. There is no reason to start listening for mouseUp or move
       // before that. Also if we start listening for mouseup before that we could pick up someone else's event
       // For example editors resizing of a inline video player.
-
-
       document.addEventListener('mouseup', _this.onMouseUp);
       document.addEventListener('mousemove', _this.onMouseMove);
       var _this$props2 = _this.props,
-          duration = _this$props2.duration,
-          onChange = _this$props2.onChange;
+        duration = _this$props2.duration,
+        onChange = _this$props2.onChange;
       var event = e.nativeEvent;
       var x = event.offsetX;
       var currentTime = x * duration / _this.wrapperElementWidth;
-
       _this.setState({
         isDragging: true,
         dragStartClientX: event.clientX - x
-      }); // As soon as user clicks timeline we want to move thumb over to that place.
-
+      });
 
+      // As soon as user clicks timeline we want to move thumb over to that place.
       onChange(currentTime);
     });
-
     return _this;
   }
-
   _createClass(TimeRange, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -147,11 +122,11 @@ export var TimeRange = /*#__PURE__*/function (_Component) {
     value: function render() {
       var isDragging = this.state.isDragging;
       var _this$props3 = this.props,
-          currentTime = _this$props3.currentTime,
-          duration = _this$props3.duration,
-          bufferedTime = _this$props3.bufferedTime,
-          disableThumbTooltip = _this$props3.disableThumbTooltip,
-          isAlwaysActive = _this$props3.isAlwaysActive;
+        currentTime = _this$props3.currentTime,
+        duration = _this$props3.duration,
+        bufferedTime = _this$props3.bufferedTime,
+        disableThumbTooltip = _this$props3.disableThumbTooltip,
+        isAlwaysActive = _this$props3.isAlwaysActive;
       var currentPosition = currentTime * 100 / duration;
       var bufferedTimePercentage = bufferedTime * 100 / duration;
       return /*#__PURE__*/React.createElement(TimeRangeWrapper, {
@@ -176,10 +151,8 @@ export var TimeRange = /*#__PURE__*/function (_Component) {
       }, formatDuration(currentTime))))));
     }
   }]);
-
   return TimeRange;
 }(Component);
-
 _defineProperty(TimeRange, "defaultProps", {
   disableThumbTooltip: false,
   isAlwaysActive: false

package/dist/esm/customMediaPlayer/timeSaver.js

@@ -1,48 +1,43 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-
 var getDefaultTimeLocalStorageKey = function getDefaultTimeLocalStorageKey(id) {
   return "time-saver-default-time-".concat(id);
 };
+
 /**
  * Modules that stores watch time (a number) in local storage by unique identifier.
  * Used in Custom Media Player to enable the feature where a user would resume watching
  * from where they left off.
  */
-
-
 export var TimeSaver = /*#__PURE__*/function () {
   function TimeSaver(config) {
     _classCallCheck(this, TimeSaver);
-
     this.config = config;
   }
-
   _createClass(TimeSaver, [{
     key: "defaultTime",
     get: function get() {
       if (this.config && localStorage) {
         try {
           var fileDefaultTime = localStorage.getItem(getDefaultTimeLocalStorageKey(this.config.contentId));
-
           if (fileDefaultTime) {
             return JSON.parse(fileDefaultTime);
           }
-        } catch (e) {// Nothing to do, falling back to 0
+        } catch (e) {
+          // Nothing to do, falling back to 0
         }
       }
-
       return 0;
     },
     set: function set(time) {
       if (this.config && localStorage) {
         try {
           localStorage.setItem(getDefaultTimeLocalStorageKey(this.config.contentId), JSON.stringify(time));
-        } catch (e) {// Nothing to do, storing hasn't happened.
+        } catch (e) {
+          // Nothing to do, storing hasn't happened.
         }
       }
     }
   }]);
-
   return TimeSaver;
 }();

package/dist/esm/ellipsify.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import React, { useRef, useEffect } from 'react';
 import styled from '@emotion/styled';
 import * as exenv from 'exenv';
@@ -12,16 +10,15 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 Wrapper.displayName = 'Ellipsify';
 export var Ellipsify = function Ellipsify(_ref2) {
   var text = _ref2.text,
-      lines = _ref2.lines,
-      endLength = _ref2.endLength,
-      inline = _ref2.inline,
-      testId = _ref2.testId;
+    lines = _ref2.lines,
+    endLength = _ref2.endLength,
+    inline = _ref2.inline,
+    testId = _ref2.testId;
   var element = useRef(null);
   useEffect(function () {
     if (!element.current) {
       return;
     }
-
     setEllipsis(element.current, {
       lines: lines,
       endLength: endLength
@@ -35,7 +32,6 @@ export var Ellipsify = function Ellipsify(_ref2) {
     "data-testid": testId
   }, text);
 };
-
 var setEllipsis = function setEllipsis(element, props) {
   var maximumLines = props.lines;
   var height = element.getBoundingClientRect().height;
@@ -44,32 +40,26 @@ var setEllipsis = function setEllipsis(element, props) {
   var lineHeight = element.getBoundingClientRect().height;
   var lineCount = height / lineHeight;
   var maximumHeight = lineHeight * maximumLines;
-
   if (lineCount <= maximumLines) {
     element.textContent = text;
     return;
   }
-
   var textContent = text;
   var endLength = typeof props.endLength === 'number' && props.endLength >= 0 ? props.endLength : 8;
   var beginningText = text.substr(0, text.length * maximumLines / lineCount - endLength);
   var endText = text.substr(text.length - endLength, endLength);
   element.textContent = textContent = "".concat(beginningText, "...").concat(endText);
   var finalHeight = element.getBoundingClientRect().height;
-
   if (finalHeight > maximumHeight) {
     var adjustedBeginningText = beginningText.substr(0, beginningText.length - beginningText.length / maximumLines * 0.25);
     textContent = "".concat(adjustedBeginningText, "...").concat(endText);
   }
-
   delayRun(function () {
     return element.textContent = textContent;
   });
 };
-
 var timeout = function timeout(fn) {
   return setTimeout(fn, 1);
 };
-
 var delayRun = exenv.canUseDOM && window.requestAnimationFrame ? window.requestAnimationFrame : timeout;
 export default Ellipsify;

package/dist/esm/formatDate.js

@@ -9,12 +9,12 @@ export var formatterOptions = {
 };
 export var partsFormatter = function partsFormatter(_ref) {
   var day = _ref.day,
-      month = _ref.month,
-      year = _ref.year,
-      hour = _ref.hour,
-      minute = _ref.minute,
-      _ref$dayPeriod = _ref.dayPeriod,
-      dayPeriod = _ref$dayPeriod === void 0 ? '' : _ref$dayPeriod;
+    month = _ref.month,
+    year = _ref.year,
+    hour = _ref.hour,
+    minute = _ref.minute,
+    _ref$dayPeriod = _ref.dayPeriod,
+    dayPeriod = _ref$dayPeriod === void 0 ? '' : _ref$dayPeriod;
   var formattedDayPeriod = dayPeriod.replace(/\./g, '').replace(/\s/g, '');
   return "".concat(day, " ").concat(month, " ").concat(year, ", ").concat(hour, ":").concat(minute, " ").concat(formattedDayPeriod);
 };

package/dist/esm/formatDuration.js

@@ -1,16 +1,13 @@
 var pad = function pad(n) {
   return n < 10 ? "0".concat(n) : n;
 };
-
 var isInvalidInput = function isInvalidInput(seconds) {
   return isNaN(seconds) || seconds === Infinity || seconds < 0;
 };
-
 export var formatDuration = function formatDuration(seconds) {
   if (isInvalidInput(seconds)) {
     return '0:00';
   }
-
   var totalSeconds = parseInt("".concat(seconds), 10);
   var hours = Math.floor(totalSeconds / 3600);
   var remainingSeconds = totalSeconds % 3600;

package/dist/esm/humanReadableSize.js

@@ -1,10 +1,11 @@
-import * as bytes from 'bytes'; // eslint-disable-next-line no-bitwise
+import * as bytes from 'bytes';
 
+// eslint-disable-next-line no-bitwise
 var ONE_MEGABYTE_IN_BYTES = 1 << 20;
+
 /**
  * Takes a media (file) size in bytes and returns a human readable string
  */
-
 export function toHumanReadableMediaSize(size) {
   // [MS-967]: Api issue might return string for size
   var parsedSize = parseInt("".concat(size), 10);

package/dist/esm/imageMetaData/imageOrientationUtil.js

@@ -14,12 +14,11 @@ var ORIENT_TRANSFORMS = {
   7: 'rotate(90deg) rotateY(180deg)',
   // Mirror horizontal and rotate 90 CW
   8: 'rotate(270deg)' // Rotate 270 CW
-
 };
+
 /**
  * Returns true if image rotated 90 or 270 degrees (on it's side)
  */
-
 export var isRotated = function isRotated(orientation) {
   return orientation >= 5;
 };