@atlaskit/media-ui 16.5.0 → 17.2.0

package/dist/es2019/customMediaPlayer/index.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
+import { version as packageVersion, name as packageName } from '../version.json';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import PlayIcon from '@atlaskit/icon/glyph/vid-play';
 import PauseIcon from '@atlaskit/icon/glyph/vid-pause';
 import FullScreenIconOn from '@atlaskit/icon/glyph/vid-full-screen-on';
@@ -8,6 +10,7 @@ import FullScreenIconOff from '@atlaskit/icon/glyph/vid-full-screen-off';
 import SoundIcon from '@atlaskit/icon/glyph/hipchat/outgoing-sound';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -15,6 +18,7 @@ import MediaPlayer from 'react-video-renderer';
 import { B200, DN400, 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 { fireAnalyticsEvent, relevantFeatureFlagNames, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from './analytics';
 import { formatDuration } from '../formatDuration';
 import { hideControlsClassName } from '../classNames';
 import { Shortcut, keyCodes } from '../shortcut';
@@ -25,14 +29,29 @@ import simultaneousPlayManager from './simultaneousPlayManager';
 import { TimeSaver } from './timeSaver';
 import PlaybackSpeedControls from './playbackSpeedControls';
 import { PlayPauseBlanket } from './playPauseBlanket';
+import Tooltip from '@atlaskit/tooltip';
+import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 const SMALL_VIDEO_MAX_WIDTH = 400;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
-export class CustomMediaPlayer extends Component {
+const VIEWED_TRACKING_SECS = 2;
+export class CustomMediaPlayerBase extends Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "videoState", {
+      isLoading: true,
+      buffered: 0,
+      currentTime: 0,
+      volume: 1,
+      status: 'paused',
+      duration: 0,
+      isMuted: false
+    });
+
     _defineProperty(this, "wasPlayedOnce", false);
 
+    _defineProperty(this, "lastCurrentTime", 0);
+
     _defineProperty(this, "timeSaver", new TimeSaver(this.props.lastWatchTimeConfig));
 
     _defineProperty(this, "state", {
@@ -58,11 +77,13 @@ export class CustomMediaPlayer extends Component {
       }
     });
 
-    _defineProperty(this, "onTimeChange", navigate => value => {
-      navigate(value);
+    _defineProperty(this, "onTimeChanged", () => {
+      this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
 
-    _defineProperty(this, "onVolumeChange", setVolume => value => setVolume(value));
+    _defineProperty(this, "onVolumeChanged", () => {
+      this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
+    });
 
     _defineProperty(this, "onCurrentTimeChange", (currentTime, duration) => {
       if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
@@ -72,17 +93,6 @@ export class CustomMediaPlayer extends Component {
       }
     });
 
-    _defineProperty(this, "shortcutHandler", toggleButtonAction => () => {
-      const {
-        showControls
-      } = this.props;
-      toggleButtonAction();
-
-      if (showControls) {
-        showControls();
-      }
-    });
-
     _defineProperty(this, "renderCurrentTime", ({
       currentTime,
       duration
@@ -108,7 +118,7 @@ export class CustomMediaPlayer extends Component {
       const secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",
-        onClick: onHDToggleClick,
+        onClick: !!onHDToggleClick ? this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
         iconBefore: /*#__PURE__*/React.createElement(HDIcon, {
           primaryColor: primaryColor,
           secondaryColor: secondaryColor,
@@ -126,6 +136,7 @@ export class CustomMediaPlayer extends Component {
       this.setState({
         playbackSpeed
       });
+      this.createAndFireUIEvent('playbackSpeedChange');
     });
 
     _defineProperty(this, "renderSpeedControls", () => {
@@ -138,38 +149,40 @@ export class CustomMediaPlayer extends Component {
       return /*#__PURE__*/React.createElement(PlaybackSpeedControls, {
         originalDimensions: originalDimensions,
         playbackSpeed: playbackSpeed,
-        onPlaybackSpeedChange: this.onPlaybackSpeedChange
+        onPlaybackSpeedChange: this.onPlaybackSpeedChange,
+        onClick: () => this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton')
       });
     });
 
-    _defineProperty(this, "renderVolume", ({
-      isMuted,
-      volume
-    }, actions, showSlider) => {
-      return /*#__PURE__*/React.createElement(VolumeWrapper, {
-        showSlider: showSlider
-      }, /*#__PURE__*/React.createElement(VolumeToggleWrapper, {
-        isMuted: isMuted
-      }, /*#__PURE__*/React.createElement(MutedIndicator, {
-        isMuted: isMuted
-      }), /*#__PURE__*/React.createElement(MediaButton, {
-        testId: "custom-media-player-volume-toggle-button",
-        onClick: actions.toggleMute,
-        iconBefore: /*#__PURE__*/React.createElement(SoundIcon, {
-          label: "volume"
-        })
-      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, null, /*#__PURE__*/React.createElement(TimeRange, {
-        onChange: this.onVolumeChange(actions.setVolume),
-        duration: 1,
-        currentTime: volume,
-        bufferedTime: volume,
-        disableThumbTooltip: true,
-        isAlwaysActive: true
-      })));
+    _defineProperty(this, "renderVolume", (videoState, actions, showSlider) => /*#__PURE__*/React.createElement(VolumeWrapper, {
+      showSlider: showSlider
+    }, /*#__PURE__*/React.createElement(VolumeToggleWrapper, {
+      isMuted: videoState.isMuted
+    }, /*#__PURE__*/React.createElement(MutedIndicator, {
+      isMuted: videoState.isMuted
+    }), /*#__PURE__*/React.createElement(MediaButton, {
+      testId: "custom-media-player-volume-toggle-button",
+      onClick: this.getMediaButtonClickHandler(actions.toggleMute, 'muteButton'),
+      iconBefore: /*#__PURE__*/React.createElement(SoundIcon, {
+        label: "volume"
+      })
+    })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, null, /*#__PURE__*/React.createElement(TimeRange, {
+      onChange: actions.setVolume,
+      duration: 1,
+      currentTime: videoState.volume,
+      bufferedTime: videoState.volume,
+      disableThumbTooltip: true,
+      isAlwaysActive: true,
+      onChanged: this.onVolumeChanged
+    }))));
+
+    _defineProperty(this, "toggleFullscreen", () => toggleFullscreen(this.videoWrapperRef));
+
+    _defineProperty(this, "onFullScreenButtonClick", () => {
+      this.toggleFullscreen();
+      this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
     });
 
-    _defineProperty(this, "onFullScreenClick", () => toggleFullscreen(this.videoWrapperRef));
-
     _defineProperty(this, "onResize", width => this.setState({
       isLargePlayer: width > SMALL_VIDEO_MAX_WIDTH
     }));
@@ -198,7 +211,7 @@ export class CustomMediaPlayer extends Component {
       });
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-fullscreen-button",
-        onClick: this.onFullScreenClick,
+        onClick: this.onFullScreenButtonClick,
         iconBefore: icon
       });
     });
@@ -214,13 +227,110 @@ export class CustomMediaPlayer extends Component {
 
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-download-button",
-        onClick: onDownloadClick,
+        onClick: this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
         iconBefore: /*#__PURE__*/React.createElement(DownloadIcon, {
           label: "download"
         })
       });
     });
 
+    _defineProperty(this, "renderShortcuts", ({
+      togglePlayPauseAction,
+      toggleMute,
+      skipBackward,
+      skipForward
+    }) => {
+      const {
+        isShortcutEnabled
+      } = this.props;
+      const {
+        isFullScreenEnabled
+      } = this.state;
+      const shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/React.createElement(Shortcut, {
+        key: "space-shortcut",
+        code: keyCodes.space,
+        handler: this.getKeyboardShortcutHandler(togglePlayPauseAction, 'space')
+      }), /*#__PURE__*/React.createElement(Shortcut, {
+        key: "m-shortcut",
+        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, {
+          key: "skip-backward-shortcut",
+          code: keyCodes.leftArrow,
+          handler: this.getKeyboardShortcutHandler(skipBackward, 'leftArrow')
+        }));
+        shortcuts.push( /*#__PURE__*/React.createElement(Shortcut, {
+          key: "skip-forward-shortcut",
+          code: keyCodes.rightArrow,
+          handler: this.getKeyboardShortcutHandler(skipForward, 'rightArrow')
+        }));
+      }
+
+      return shortcuts;
+    });
+
+    _defineProperty(this, "renderPlayPauseButton", isPlaying => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      const toggleButtonIcon = isPlaying ? /*#__PURE__*/React.createElement(PauseIcon, {
+        label: formatMessage(messages.pause)
+      }) : /*#__PURE__*/React.createElement(PlayIcon, {
+        label: formatMessage(messages.play)
+      });
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: formatMessage(isPlaying ? messages.pause : messages.play),
+        position: "top"
+      }, /*#__PURE__*/React.createElement(MediaButton, {
+        testId: "custom-media-player-play-toggle-button",
+        "data-test-is-playing": isPlaying,
+        iconBefore: toggleButtonIcon,
+        onClick: isPlaying ? this.pausePlayByButtonClick : this.startPlayByButtonClick
+      }));
+    });
+
+    _defineProperty(this, "renderSkipBackwardButton", skipBackward => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: formatMessage(messages.skipBackward),
+        position: "top"
+      }, /*#__PURE__*/React.createElement(MediaButton, {
+        testId: "custom-media-player-skip-backward-button",
+        iconBefore: /*#__PURE__*/React.createElement(SkipTenBackwardIcon, {
+          label: formatMessage(messages.skipBackward)
+        }),
+        onClick: this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
+      }));
+    });
+
+    _defineProperty(this, "renderSkipForwardButton", skipForward => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: formatMessage(messages.skipForward),
+        position: "top"
+      }, /*#__PURE__*/React.createElement(MediaButton, {
+        testId: "custom-media-player-skip-forward-button",
+        iconBefore: /*#__PURE__*/React.createElement(SkipTenForwardIcon, {
+          label: formatMessage(messages.skipForward)
+        }),
+        onClick: this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
+      }));
+    });
+
     _defineProperty(this, "renderSpinner", () => /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
       appearance: "invert",
       size: "large"
@@ -248,13 +358,112 @@ export class CustomMediaPlayer extends Component {
         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,
+        fileId,
+        isAutoPlay,
+        isHDAvailable,
+        isHDActive,
+        type
+      } = this.props;
+      const {
+        isFullScreenEnabled,
+        isLargePlayer,
+        playbackSpeed
+      } = this.state;
+      const {
+        status,
+        currentTime
+      } = videoState;
+
+      if (status === 'playing' && (currentTime < this.lastCurrentTime || currentTime >= this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
+        fireAnalyticsEvent(createPlayedTrackEvent(type, { ...videoState,
+          isAutoPlay,
+          isHDAvailable,
+          isHDActive,
+          isFullScreenEnabled,
+          isLargePlayer,
+          playbackSpeed
+        }, fileId), createAnalyticsEvent);
+        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
+    });
+
+    _defineProperty(this, "togglePlayByBlanketClick", action => {
+      this.resetPendingPlayPauseToggleTimer();
+      this.clickToTogglePlayTimoutId = setTimeout(() => {
+        action();
+        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,
+      fileId,
       isAutoPlay,
-      onFirstPlay
+      isHDAvailable,
+      isHDActive,
+      onFirstPlay,
+      createAnalyticsEvent
     } = this.props;
+    const {
+      isFullScreenEnabled,
+      isLargePlayer,
+      playbackSpeed
+    } = this.state;
+    fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
+      isAutoPlay,
+      isHDAvailable,
+      isHDActive,
+      isFullScreenEnabled,
+      isLargePlayer,
+      playbackSpeed
+    }, fileId), createAnalyticsEvent);
 
     if (this.videoWrapperRef) {
       this.videoWrapperRef.addEventListener('fullscreenchange', this.onFullScreenChange);
@@ -266,6 +475,14 @@ export class CustomMediaPlayer extends Component {
       simultaneousPlayManager.pauseOthers(this);
 
       if (onFirstPlay) {
+        fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
+          isAutoPlay,
+          isHDAvailable,
+          isHDActive,
+          isFullScreenEnabled,
+          isLargePlayer,
+          playbackSpeed
+        }, fileId), createAnalyticsEvent);
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
@@ -288,21 +505,74 @@ export class CustomMediaPlayer extends Component {
     }
   }
 
+  createAndFireUIEvent(eventType, actionSubjectId) {
+    const {
+      type,
+      fileId,
+      isHDActive,
+      isHDAvailable,
+      isAutoPlay,
+      createAnalyticsEvent
+    } = this.props;
+    const {
+      isFullScreenEnabled,
+      isLargePlayer,
+      playbackSpeed
+    } = this.state;
+    const playbackState = { ...this.videoState,
+      isAutoPlay,
+      isHDAvailable,
+      isHDActive,
+      isFullScreenEnabled,
+      isLargePlayer,
+      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',
+          action: 'default',
+          actionSubject: 'customMediaPlayer',
+          attributes: {
+            type
+          }
+        };
+    }
+
+    fireAnalyticsEvent(analyticsEvent, createAnalyticsEvent);
+  }
+
   render() {
     const {
       type,
       src,
       isAutoPlay,
-      isShortcutEnabled,
-      intl: {
-        formatMessage
-      },
       onCanPlay,
       onError
     } = this.props;
-    const {
-      isFullScreenEnabled
-    } = this.state;
     return /*#__PURE__*/React.createElement(CustomVideoWrapper, {
       innerRef: this.saveVideoWrapperRef,
       "data-testid": "custom-media-player"
@@ -315,7 +585,10 @@ export class CustomMediaPlayer extends Component {
       onTimeChange: this.onCurrentTimeChange,
       onError: onError
     }, (video, videoState, actions) => {
-      this.setActions(actions);
+      this.onViewed(videoState);
+      this.setActions(actions); //Video State(either prop or variable) is ReadOnly
+
+      this.videoState = videoState;
       const {
         status,
         currentTime,
@@ -327,31 +600,29 @@ export class CustomMediaPlayer extends Component {
         isLargePlayer
       } = this.state;
       const isPlaying = status === 'playing';
-      const toggleButtonIcon = isPlaying ? /*#__PURE__*/React.createElement(PauseIcon, {
-        label: formatMessage(messages.play)
-      }) : /*#__PURE__*/React.createElement(PlayIcon, {
-        label: formatMessage(messages.pause)
-      });
-      const toggleButtonAction = isPlaying ? this.pause : this.play;
-      const button = /*#__PURE__*/React.createElement(MediaButton, {
-        testId: "custom-media-player-play-toggle-button",
-        "data-test-is-playing": isPlaying,
-        iconBefore: toggleButtonIcon,
-        onClick: toggleButtonAction
+      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,
+        skipBackward,
+        skipForward
       });
-      const shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/React.createElement(Shortcut, {
-        key: "space-shortcut",
-        keyCode: keyCodes.space,
-        handler: this.shortcutHandler(toggleButtonAction)
-      }), /*#__PURE__*/React.createElement(Shortcut, {
-        key: "m-shortcut",
-        keyCode: keyCodes.m,
-        handler: this.shortcutHandler(actions.toggleMute)
-      })];
       return /*#__PURE__*/React.createElement(VideoWrapper, null, /*#__PURE__*/React.createElement(WidthObserver, {
         setWidth: this.onResize
       }), shortcuts, isLoading && this.renderSpinner(), /*#__PURE__*/React.createElement(PlayPauseBlanket, {
-        onClick: this.shortcutHandler(toggleButtonAction),
+        onDoubleClick: this.doubleClickToFullscreen,
+        onClick: isPlaying ? this.pausePlayByBlanketClick : this.startPlayByBlanketClick,
         "data-testid": "play-pause-blanket"
       }, video), /*#__PURE__*/React.createElement(ControlsWrapper, {
         className: hideControlsClassName
@@ -359,10 +630,18 @@ export class CustomMediaPlayer extends Component {
         currentTime: currentTime,
         bufferedTime: buffered,
         duration: duration,
-        onChange: this.onTimeChange(actions.navigate)
-      })), /*#__PURE__*/React.createElement(TimebarWrapper, null, /*#__PURE__*/React.createElement(LeftControls, null, button, this.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, isLargePlayer && this.renderCurrentTime(videoState), this.renderHDButton(), this.renderSpeedControls(), this.renderFullScreenButton(), this.renderDownloadButton()))));
+        onChange: actions.navigate,
+        onChanged: this.onTimeChanged
+      })), /*#__PURE__*/React.createElement(TimebarWrapper, null, /*#__PURE__*/React.createElement(LeftControls, null, this.renderPlayPauseButton(isPlaying), this.renderSkipBackwardButton(skipBackward), this.renderSkipForwardButton(skipForward), this.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, isLargePlayer && this.renderCurrentTime(videoState), this.renderHDButton(), this.renderSpeedControls(), this.renderFullScreenButton(), this.renderDownloadButton()))));
     }));
   }
 
 }
-export default injectIntl(CustomMediaPlayer);
+export const CustomMediaPlayer = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'customMediaPlayer',
+  component: 'customMediaPlayer'
+}, {
+  filterFeatureFlags: relevantFeatureFlagNames
+})(withAnalyticsEvents()(injectIntl(CustomMediaPlayerBase)));

package/dist/es2019/customMediaPlayer/playbackSpeedControls.js

@@ -93,7 +93,8 @@ export class PlaybackSpeedControls extends Component {
   render() {
     const {
       playbackSpeed,
-      intl
+      intl,
+      onClick
     } = this.props;
     const {
       popupHeight
@@ -142,7 +143,8 @@ export class PlaybackSpeedControls extends Component {
       }, /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-playback-speed-toggle-button",
         buttonRef: ref,
-        isSelected: isOpen
+        isSelected: isOpen,
+        onClick: onClick
       }, playbackSpeed, "x")),
       styles: this.popupCustomStyles,
       popperProps: popperProps

package/dist/es2019/customMediaPlayer/timeRange.js

@@ -64,9 +64,17 @@ export class TimeRange extends Component {
     });
 
     _defineProperty(this, "onMouseUp", () => {
-      // As soon as user finished dragging, we should clean up events.
+      const {
+        onChanged
+      } = this.props; // 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
       });

package/dist/es2019/customMediaPlayer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ellipsify.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import * as exenv from 'exenv';
 const Wrapper = styled.div`
@@ -13,22 +13,28 @@ export const Ellipsify = ({
   endLength,
   inline,
   testId
-}) => /*#__PURE__*/React.createElement(Wrapper, {
-  className: "ellipsed-text",
-  innerRef: setEllipsis({
-    lines,
-    endLength
-  }),
-  "aria-label": text,
-  inline: inline,
-  "data-testid": testId
-}, text);
-
-const setEllipsis = props => element => {
-  if (!element) {
-    return;
-  }
+}) => {
+  const element = useRef(null);
+  useEffect(() => {
+    if (!element.current) {
+      return;
+    }
+
+    setEllipsis(element.current, {
+      lines,
+      endLength
+    });
+  }, [element, lines, endLength]);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    className: "ellipsed-text",
+    innerRef: element,
+    "aria-label": text,
+    inline: inline,
+    "data-testid": testId
+  }, text);
+};
 
+const setEllipsis = (element, props) => {
   const maximumLines = props.lines;
   const height = element.getBoundingClientRect().height;
   const text = element.textContent;