@atlaskit/media-ui 22.3.0 → 22.3.1

package/dist/es2019/customMediaPlayer/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /* 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
@@ -35,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "22.3.0";
+const packageVersion = "22.3.1";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -43,9 +42,7 @@ const VIEWED_TRACKING_SECS = 2;
 export class CustomMediaPlayerBase extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "videoWrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "videoState", {
       isLoading: true,
       buffered: 0,
@@ -55,47 +52,36 @@ export class CustomMediaPlayerBase extends Component {
       duration: 0,
       isMuted: false
     });
-
     _defineProperty(this, "wasPlayedOnce", false);
-
     _defineProperty(this, "lastCurrentTime", 0);
-
     _defineProperty(this, "timeSaver", new TimeSaver(this.props.lastWatchTimeConfig));
-
     _defineProperty(this, "state", {
       isFullScreenEnabled: false,
       playerSize: 'large',
       playbackSpeed: 1
     });
-
     _defineProperty(this, "onFullScreenChange", e => {
       if (e.target !== this.videoWrapperRef.current) {
         return;
       }
-
       const {
         isFullScreenEnabled: currentFullScreenMode
       } = this.state;
       const isFullScreenEnabled = !!getFullscreenElement();
-
       if (currentFullScreenMode !== isFullScreenEnabled) {
         var _this$props$onFullscr, _this$props;
-
         (_this$props$onFullscr = (_this$props = this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
         this.setState({
           isFullScreenEnabled
         });
       }
     });
-
     _defineProperty(this, "onTimeChanged", () => {
       this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
-
     _defineProperty(this, "onVolumeChanged", () => {
       this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
     });
-
     _defineProperty(this, "onCurrentTimeChange", (currentTime, duration) => {
       if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
         this.timeSaver.defaultTime = currentTime;
@@ -103,7 +89,6 @@ export class CustomMediaPlayerBase extends Component {
         this.timeSaver.defaultTime = 0;
       }
     });
-
     _defineProperty(this, "renderCurrentTime", ({
       currentTime,
       duration
@@ -112,7 +97,6 @@ export class CustomMediaPlayerBase extends Component {
         draggable: false
       }, formatDuration(currentTime), " / ", formatDuration(duration));
     });
-
     _defineProperty(this, "renderHDButton", () => {
       const {
         type,
@@ -120,11 +104,9 @@ export class CustomMediaPlayerBase extends Component {
         isHDActive,
         onHDToggleClick
       } = this.props;
-
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-
       const primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
       const secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
@@ -137,19 +119,16 @@ export class CustomMediaPlayerBase extends Component {
         })
       });
     });
-
     _defineProperty(this, "onPlaybackSpeedChange", playbackSpeed => {
       if (!this.actions) {
         return;
       }
-
       this.actions.setPlaybackSpeed(playbackSpeed);
       this.setState({
         playbackSpeed
       });
       this.createAndFireUIEvent('playbackSpeedChange');
     });
-
     _defineProperty(this, "renderSpeedControls", () => {
       const {
         playbackSpeed
@@ -164,7 +143,6 @@ export class CustomMediaPlayerBase extends Component {
         onClick: () => this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton')
       });
     });
-
     _defineProperty(this, "renderVolume", (videoState, actions, showSlider) => /*#__PURE__*/React.createElement(VolumeWrapper, {
       showSlider: showSlider
     }, /*#__PURE__*/React.createElement(VolumeToggleWrapper, {
@@ -186,14 +164,11 @@ export class CustomMediaPlayerBase extends Component {
       isAlwaysActive: true,
       onChanged: this.onVolumeChanged
     }))));
-
     _defineProperty(this, "toggleFullscreen", () => this.videoWrapperRef.current && toggleFullscreen(this.videoWrapperRef.current));
-
     _defineProperty(this, "onFullScreenButtonClick", () => {
       this.toggleFullscreen();
       this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
     });
-
     _defineProperty(this, "onResize", width => {
       if (width > MEDIUM_VIDEO_MAX_WIDTH) {
         this.setState({
@@ -209,7 +184,6 @@ export class CustomMediaPlayerBase extends Component {
         });
       }
     });
-
     _defineProperty(this, "renderFullScreenButton", () => {
       const {
         intl: {
@@ -217,11 +191,9 @@ export class CustomMediaPlayerBase extends Component {
         },
         type
       } = this.props;
-
       if (type === 'audio') {
         return;
       }
-
       const {
         isFullScreenEnabled
       } = this.state;
@@ -236,16 +208,13 @@ export class CustomMediaPlayerBase extends Component {
         iconBefore: icon
       });
     });
-
     _defineProperty(this, "renderDownloadButton", () => {
       const {
         onDownloadClick
       } = this.props;
-
       if (!onDownloadClick) {
         return;
       }
-
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-download-button",
         onClick: this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
@@ -254,7 +223,6 @@ export class CustomMediaPlayerBase extends Component {
         })
       });
     });
-
     _defineProperty(this, "renderShortcuts", ({
       togglePlayPauseAction,
       toggleMute,
@@ -276,7 +244,6 @@ export class CustomMediaPlayerBase extends Component {
         code: keyCodes.m,
         handler: this.getKeyboardShortcutHandler(toggleMute, 'mute')
       })];
-
       if (shortcuts && isFullScreenEnabled) {
         // Fullscreen shortcuts only. We don't want to override left/right keys in media-viewer settings
         shortcuts.push( /*#__PURE__*/React.createElement(Shortcut, {
@@ -290,10 +257,8 @@ export class CustomMediaPlayerBase extends Component {
           handler: this.getKeyboardShortcutHandler(skipForward, 'rightArrow')
         }));
       }
-
       return shortcuts;
     });
-
     _defineProperty(this, "renderPlayPauseButton", isPlaying => {
       const {
         intl: {
@@ -315,7 +280,6 @@ export class CustomMediaPlayerBase extends Component {
         onClick: isPlaying ? this.pausePlayByButtonClick : this.startPlayByButtonClick
       }));
     });
-
     _defineProperty(this, "renderSkipBackwardButton", skipBackward => {
       const {
         intl: {
@@ -333,7 +297,6 @@ export class CustomMediaPlayerBase extends Component {
         onClick: this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
       }));
     });
-
     _defineProperty(this, "renderSkipForwardButton", skipForward => {
       const {
         intl: {
@@ -351,53 +314,42 @@ export class CustomMediaPlayerBase extends Component {
         onClick: this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
       }));
     });
-
     _defineProperty(this, "renderSpinner", () => /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
       appearance: "invert",
       size: "large"
     })));
-
     _defineProperty(this, "pause", () => {
       if (this.actions) {
         this.actions.pause();
       }
     });
-
     _defineProperty(this, "play", () => {
       const {
         onFirstPlay
       } = this.props;
-
       if (this.actions) {
         this.actions.play();
       }
-
       simultaneousPlayManager.pauseOthers(this);
-
       if (!this.wasPlayedOnce && onFirstPlay) {
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
     });
-
     _defineProperty(this, "getMediaButtonClickHandler", (action, buttonType) => () => {
       action();
       this.createAndFireUIEvent('mediaButtonClick', buttonType);
     });
-
     _defineProperty(this, "getKeyboardShortcutHandler", (action, shortcutType) => () => {
       const {
         showControls
       } = this.props;
       action();
-
       if (showControls) {
         showControls();
       }
-
       this.createAndFireUIEvent('shortcutPress', shortcutType);
     });
-
     _defineProperty(this, "onViewed", videoState => {
       const {
         createAnalyticsEvent,
@@ -416,9 +368,9 @@ export class CustomMediaPlayerBase extends Component {
         status,
         currentTime
       } = videoState;
-
       if (status === 'playing' && (currentTime < this.lastCurrentTime || currentTime >= this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
-        fireAnalyticsEvent(createPlayedTrackEvent(type, { ...videoState,
+        fireAnalyticsEvent(createPlayedTrackEvent(type, {
+          ...videoState,
           isAutoPlay,
           isHDAvailable,
           isHDActive,
@@ -429,18 +381,16 @@ export class CustomMediaPlayerBase extends Component {
         this.lastCurrentTime = currentTime;
       }
     });
-
     _defineProperty(this, "resetPendingPlayPauseToggleTimer", () => {
       if (this.clickToTogglePlayTimoutId !== undefined) {
         clearTimeout(this.clickToTogglePlayTimoutId);
       }
     });
-
     _defineProperty(this, "doubleClickToFullscreen", () => {
       this.resetPendingPlayPauseToggleTimer();
-      this.toggleFullscreen(); // TODO Add an event similar to "playPauseBlanketClick" but for fullscreen trigger
+      this.toggleFullscreen();
+      // TODO Add an event similar to "playPauseBlanketClick" but for fullscreen trigger
     });
-
     _defineProperty(this, "togglePlayByBlanketClick", action => {
       this.resetPendingPlayPauseToggleTimer();
       this.clickToTogglePlayTimoutId = setTimeout(() => {
@@ -448,20 +398,15 @@ export class CustomMediaPlayerBase extends Component {
         this.createAndFireUIEvent('playPauseBlanketClick');
       }, 200);
     });
-
     _defineProperty(this, "startPlayByBlanketClick", () => {
       this.togglePlayByBlanketClick(this.play);
     });
-
     _defineProperty(this, "pausePlayByBlanketClick", () => {
       this.togglePlayByBlanketClick(this.pause);
     });
-
     _defineProperty(this, "startPlayByButtonClick", this.getMediaButtonClickHandler(this.play, 'playButton'));
-
     _defineProperty(this, "pausePlayByButtonClick", this.getMediaButtonClickHandler(this.pause, 'pauseButton'));
   }
-
   componentDidMount() {
     const {
       type,
@@ -485,16 +430,12 @@ export class CustomMediaPlayerBase extends Component {
       playerSize,
       playbackSpeed
     }, fileId), createAnalyticsEvent);
-
     if (this.videoWrapperRef.current) {
       this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
     }
-
     simultaneousPlayManager.subscribe(this);
-
     if (isAutoPlay) {
       simultaneousPlayManager.pauseOthers(this);
-
       if (onFirstPlay) {
         fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
           isAutoPlay,
@@ -509,21 +450,16 @@ export class CustomMediaPlayerBase extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     if (this.videoWrapperRef.current) {
       this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
     }
-
     if (this.state.isFullScreenEnabled) {
       var _this$props$onFullscr2, _this$props2;
-
       (_this$props$onFullscr2 = (_this$props2 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props2, false);
     }
-
     simultaneousPlayManager.unsubscribe(this);
   }
-
   setActions(actions) {
     // Actions are being sent constantly while the video is playing,
     // though play and pause functions are always the same objects
@@ -531,7 +467,6 @@ export class CustomMediaPlayerBase extends Component {
       this.actions = actions;
     }
   }
-
   createAndFireUIEvent(eventType, actionSubjectId) {
     const {
       type,
@@ -546,7 +481,8 @@ export class CustomMediaPlayerBase extends Component {
       playerSize,
       playbackSpeed
     } = this.state;
-    const playbackState = { ...this.videoState,
+    const playbackState = {
+      ...this.videoState,
       isAutoPlay,
       isHDAvailable,
       isHDActive,
@@ -555,29 +491,23 @@ export class CustomMediaPlayerBase extends Component {
       playbackSpeed
     };
     let analyticsEvent;
-
     switch (eventType) {
       case 'mediaButtonClick':
         analyticsEvent = createMediaButtonClickedEvent(type, playbackState, actionSubjectId, fileId);
         break;
-
       case 'shortcutPress':
         analyticsEvent = createMediaShortcutPressedEvent(type, playbackState, actionSubjectId, fileId);
         break;
-
       case 'playPauseBlanketClick':
         analyticsEvent = createPlayPauseBlanketClickedEvent(type, playbackState, fileId);
         break;
-
       case 'timeRangeNavigate':
       case 'volumeRangeNavigate':
         analyticsEvent = createTimeRangeNavigatedEvent(type, playbackState, actionSubjectId, fileId);
         break;
-
       case 'playbackSpeedChange':
         analyticsEvent = createPlaybackSpeedChangedEvent(type, playbackState, fileId);
         break;
-
       default:
         analyticsEvent = {
           eventType: 'ui',
@@ -588,10 +518,8 @@ export class CustomMediaPlayerBase extends Component {
           }
         };
     }
-
     fireAnalyticsEvent(analyticsEvent, createAnalyticsEvent);
   }
-
   render() {
     const {
       type,
@@ -615,8 +543,8 @@ export class CustomMediaPlayerBase extends Component {
       poster: poster
     }, (video, videoState, actions) => {
       this.onViewed(videoState);
-      this.setActions(actions); //Video State(either prop or variable) is ReadOnly
-
+      this.setActions(actions);
+      //Video State(either prop or variable) is ReadOnly
       this.videoState = videoState;
       const {
         status,
@@ -632,17 +560,14 @@ export class CustomMediaPlayerBase extends Component {
       const isLargePlayer = playerSize === 'large';
       const isMediumPlayer = playerSize === 'medium';
       const skipAmount = 10;
-
       const skipBackward = () => {
         const newTime = videoState.currentTime - skipAmount;
         actions.navigate(Math.max(newTime, 0));
       };
-
       const skipForward = () => {
         const newTime = videoState.currentTime + skipAmount;
         actions.navigate(Math.min(newTime, videoState.duration));
       };
-
       const shortcuts = this.renderShortcuts({
         togglePlayPauseAction: isPlaying ? this.pause : this.play,
         toggleMute: actions.toggleMute,
@@ -666,7 +591,6 @@ export class CustomMediaPlayerBase extends Component {
       })), /*#__PURE__*/React.createElement(TimebarWrapper, null, /*#__PURE__*/React.createElement(LeftControls, null, this.renderPlayPauseButton(isPlaying), isLargePlayer && this.renderSkipBackwardButton(skipBackward), isLargePlayer && this.renderSkipForwardButton(skipForward), this.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, (isMediumPlayer || isLargePlayer) && this.renderCurrentTime(videoState), isLargePlayer && this.renderHDButton(), isLargePlayer && this.renderSpeedControls(), this.renderFullScreenButton(), isLargePlayer && this.renderDownloadButton()))));
     }));
   }
-
 }
 export const CustomMediaPlayer = withMediaAnalyticsContext({
   packageVersion,

package/dist/es2019/customMediaPlayer/playbackSpeedControls.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /* 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
@@ -15,24 +14,19 @@ import { WidthObserver } from '@atlaskit/width-detector';
 export class PlaybackSpeedControls extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       popupHeight: 255
     });
-
     _defineProperty(this, "onPlaybackSpeedChange", (option, _actionMeta) => {
       const {
         onPlaybackSpeedChange
       } = this.props;
-
       if (!option) {
         return;
       }
-
       const playbackSpeed = parseFloat(`${option.value}`);
       onPlaybackSpeedChange(playbackSpeed);
     });
-
     _defineProperty(this, "speedOptions", () => [{
       // @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.
       label: /*#__PURE__*/React.createElement(FormattedMessage, messages.playbackSpeed),
@@ -53,37 +47,38 @@ export class PlaybackSpeedControls extends Component {
         value: 2
       }]
     }]);
-
     _defineProperty(this, "popupCustomStyles", {
-      container: styles => ({ ...styles,
+      container: styles => ({
+        ...styles,
         backgroundColor: '#22272b',
         boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
       }),
       // added these overrides to keep the look of the current design
       // however this does not benefit from the DS a11y changes
-      menuList: styles => ({ ...styles,
+      menuList: styles => ({
+        ...styles,
         padding: '4px 0px'
       }),
       option: (styles, {
         isFocused,
         isSelected
-      }) => ({ ...styles,
+      }) => ({
+        ...styles,
         color: isSelected ? '#579dff' : 'inherit',
         backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
         ':active': {
           backgroundColor: '#a6c5e229'
         }
       }),
-      groupHeading: styles => ({ ...styles,
+      groupHeading: styles => ({
+        ...styles,
         color: '#9fadbc'
       })
     });
-
     _defineProperty(this, "onResize", width => {
       const {
         originalDimensions
       } = this.props;
-
       if (originalDimensions) {
         const aspectRatio = originalDimensions.height / originalDimensions.width;
         const controlsSize = 60;
@@ -92,16 +87,14 @@ export class PlaybackSpeedControls extends Component {
         this.setState({
           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'));
     });
   }
-
   render() {
     const {
       playbackSpeed,
@@ -139,8 +132,10 @@ export class PlaybackSpeedControls extends Component {
       maxMenuHeight: popupHeight,
       options: this.speedOptions(),
       value: value,
-      theme: theme => ({ ...theme,
-        colors: { ...theme.colors,
+      theme: theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
           primary25: N600
         }
       }),
@@ -162,6 +157,5 @@ export class PlaybackSpeedControls extends Component {
       popperProps: popperProps
     }));
   }
-
 }
 export default injectIntl(PlaybackSpeedControls);

package/dist/es2019/customMediaPlayer/simultaneousPlayManager.js

@@ -1,15 +1,11 @@
 const players = [];
-
 const addPlayer = player => players.push(player);
-
 const removePlayer = player => {
   const playerIndex = players.indexOf(player);
-
   if (playerIndex > -1) {
     players.splice(playerIndex, 1);
   }
 };
-
 export default {
   pauseOthers: player => {
     players.forEach(otherPlayer => {