@atlaskit/media-ui 16.5.0 → 17.2.0

package/dist/cjs/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CustomMediaPlayer = void 0;
+exports.CustomMediaPlayer = exports.CustomMediaPlayerBase = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,6 +25,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _version = require("../version.json");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
 
 var _vidPause = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-pause"));
@@ -39,6 +43,8 @@ var _vidHdCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-hd-c
 
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 var _MediaButton = _interopRequireDefault(require("../MediaButton"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -53,6 +59,8 @@ var _timeRange = require("./timeRange");
 
 var _styled = require("./styled");
 
+var _analytics = require("./analytics");
+
 var _formatDuration = require("../formatDuration");
 
 var _classNames = require("../classNames");
@@ -73,33 +81,52 @@ var _playbackSpeedControls = _interopRequireDefault(require("./playbackSpeedCont
 
 var _playPauseBlanket = require("./playPauseBlanket");
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _icons = require("./icons");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 
 var SMALL_VIDEO_MAX_WIDTH = 400;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
+var VIEWED_TRACKING_SECS = 2;
 
-var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CustomMediaPlayer, _Component);
+var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CustomMediaPlayerBase, _Component);
 
-  var _super = _createSuper(CustomMediaPlayer);
+  var _super = _createSuper(CustomMediaPlayerBase);
 
-  function CustomMediaPlayer() {
+  function CustomMediaPlayerBase() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, CustomMediaPlayer);
+    (0, _classCallCheck2.default)(this, CustomMediaPlayerBase);
 
     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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "videoState", {
+      isLoading: true,
+      buffered: 0,
+      currentTime: 0,
+      volume: 1,
+      status: 'paused',
+      duration: 0,
+      isMuted: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wasPlayedOnce", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lastCurrentTime", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeSaver", new _timeSaver.TimeSaver(_this.props.lastWatchTimeConfig));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isFullScreenEnabled: false,
@@ -120,15 +147,11 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (navigate) {
-      return function (value) {
-        navigate(value);
-      };
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChanged", function () {
+      _this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onVolumeChange", function (setVolume) {
-      return function (value) {
-        return setVolume(value);
-      };
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onVolumeChanged", function () {
+      _this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCurrentTimeChange", function (currentTime, duration) {
       if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
@@ -137,16 +160,6 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         _this.timeSaver.defaultTime = 0;
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shortcutHandler", function (toggleButtonAction) {
-      return function () {
-        var showControls = _this.props.showControls;
-        toggleButtonAction();
-
-        if (showControls) {
-          showControls();
-        }
-      };
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCurrentTime", function (_ref) {
       var currentTime = _ref.currentTime,
           duration = _ref.duration;
@@ -169,7 +182,7 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
       var secondaryColor = isHDActive ? _colors.N0 : _colors.DN60;
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-hd-button",
-        onClick: onHDToggleClick,
+        onClick: !!onHDToggleClick ? _this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
         iconBefore: /*#__PURE__*/_react.default.createElement(_vidHdCircle.default, {
           primaryColor: primaryColor,
           secondaryColor: secondaryColor,
@@ -187,6 +200,8 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
       _this.setState({
         playbackSpeed: playbackSpeed
       });
+
+      _this.createAndFireUIEvent('playbackSpeedChange');
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSpeedControls", function () {
       var playbackSpeed = _this.state.playbackSpeed;
@@ -194,36 +209,43 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(_playbackSpeedControls.default, {
         originalDimensions: originalDimensions,
         playbackSpeed: playbackSpeed,
-        onPlaybackSpeedChange: _this.onPlaybackSpeedChange
+        onPlaybackSpeedChange: _this.onPlaybackSpeedChange,
+        onClick: function onClick() {
+          return _this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton');
+        }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVolume", function (_ref2, actions, showSlider) {
-      var isMuted = _ref2.isMuted,
-          volume = _ref2.volume;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVolume", function (videoState, actions, showSlider) {
       return /*#__PURE__*/_react.default.createElement(_styled.VolumeWrapper, {
         showSlider: showSlider
       }, /*#__PURE__*/_react.default.createElement(_styled.VolumeToggleWrapper, {
-        isMuted: isMuted
+        isMuted: videoState.isMuted
       }, /*#__PURE__*/_react.default.createElement(_styled.MutedIndicator, {
-        isMuted: isMuted
+        isMuted: videoState.isMuted
       }), /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-volume-toggle-button",
-        onClick: actions.toggleMute,
+        onClick: _this.getMediaButtonClickHandler(actions.toggleMute, 'muteButton'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_outgoingSound.default, {
           label: "volume"
         })
       })), showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, null, /*#__PURE__*/_react.default.createElement(_timeRange.TimeRange, {
-        onChange: _this.onVolumeChange(actions.setVolume),
+        onChange: actions.setVolume,
         duration: 1,
-        currentTime: volume,
-        bufferedTime: volume,
+        currentTime: videoState.volume,
+        bufferedTime: videoState.volume,
         disableThumbTooltip: true,
-        isAlwaysActive: true
+        isAlwaysActive: true,
+        onChanged: _this.onVolumeChanged
       })));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullScreenClick", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleFullscreen", function () {
       return (0, _fullscreen.toggleFullscreen)(_this.videoWrapperRef);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullScreenButtonClick", function () {
+      _this.toggleFullscreen();
+
+      _this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
       return _this.setState({
         isLargePlayer: width > SMALL_VIDEO_MAX_WIDTH
@@ -249,7 +271,7 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
       });
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-fullscreen-button",
-        onClick: _this.onFullScreenClick,
+        onClick: _this.onFullScreenButtonClick,
         iconBefore: icon
       });
     });
@@ -262,12 +284,88 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-download-button",
-        onClick: onDownloadClick,
+        onClick: _this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_download.default, {
           label: "download"
         })
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderShortcuts", function (_ref2) {
+      var togglePlayPauseAction = _ref2.togglePlayPauseAction,
+          toggleMute = _ref2.toggleMute,
+          skipBackward = _ref2.skipBackward,
+          skipForward = _ref2.skipForward;
+      var isShortcutEnabled = _this.props.isShortcutEnabled;
+      var isFullScreenEnabled = _this.state.isFullScreenEnabled;
+      var shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
+        key: "space-shortcut",
+        code: _shortcut.keyCodes.space,
+        handler: _this.getKeyboardShortcutHandler(togglePlayPauseAction, 'space')
+      }), /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
+        key: "m-shortcut",
+        code: _shortcut.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.default.createElement(_shortcut.Shortcut, {
+          key: "skip-backward-shortcut",
+          code: _shortcut.keyCodes.leftArrow,
+          handler: _this.getKeyboardShortcutHandler(skipBackward, 'leftArrow')
+        }));
+        shortcuts.push( /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
+          key: "skip-forward-shortcut",
+          code: _shortcut.keyCodes.rightArrow,
+          handler: _this.getKeyboardShortcutHandler(skipForward, 'rightArrow')
+        }));
+      }
+
+      return shortcuts;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderPlayPauseButton", function (isPlaying) {
+      var formatMessage = _this.props.intl.formatMessage;
+      var toggleButtonIcon = isPlaying ? /*#__PURE__*/_react.default.createElement(_vidPause.default, {
+        label: formatMessage(_messages.messages.pause)
+      }) : /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
+        label: formatMessage(_messages.messages.play)
+      });
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: formatMessage(isPlaying ? _messages.messages.pause : _messages.messages.play),
+        position: "top"
+      }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+        testId: "custom-media-player-play-toggle-button",
+        "data-test-is-playing": isPlaying,
+        iconBefore: toggleButtonIcon,
+        onClick: isPlaying ? _this.pausePlayByButtonClick : _this.startPlayByButtonClick
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSkipBackwardButton", function (skipBackward) {
+      var formatMessage = _this.props.intl.formatMessage;
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: formatMessage(_messages.messages.skipBackward),
+        position: "top"
+      }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+        testId: "custom-media-player-skip-backward-button",
+        iconBefore: /*#__PURE__*/_react.default.createElement(_icons.SkipTenBackwardIcon, {
+          label: formatMessage(_messages.messages.skipBackward)
+        }),
+        onClick: _this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSkipForwardButton", function (skipForward) {
+      var formatMessage = _this.props.intl.formatMessage;
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: formatMessage(_messages.messages.skipForward),
+        position: "top"
+      }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+        testId: "custom-media-player-skip-forward-button",
+        iconBefore: /*#__PURE__*/_react.default.createElement(_icons.SkipTenForwardIcon, {
+          label: formatMessage(_messages.messages.skipForward)
+        }),
+        onClick: _this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
+      }));
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSpinner", function () {
       return /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         appearance: "invert",
@@ -293,15 +391,106 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         onFirstPlay();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMediaButtonClickHandler", function (action, buttonType) {
+      return function () {
+        action();
+
+        _this.createAndFireUIEvent('mediaButtonClick', buttonType);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getKeyboardShortcutHandler", function (action, shortcutType) {
+      return function () {
+        var showControls = _this.props.showControls;
+        action();
+
+        if (showControls) {
+          showControls();
+        }
+
+        _this.createAndFireUIEvent('shortcutPress', shortcutType);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onViewed", function (videoState) {
+      var _this$props3 = _this.props,
+          createAnalyticsEvent = _this$props3.createAnalyticsEvent,
+          fileId = _this$props3.fileId,
+          isAutoPlay = _this$props3.isAutoPlay,
+          isHDAvailable = _this$props3.isHDAvailable,
+          isHDActive = _this$props3.isHDActive,
+          type = _this$props3.type;
+      var _this$state = _this.state,
+          isFullScreenEnabled = _this$state.isFullScreenEnabled,
+          isLargePlayer = _this$state.isLargePlayer,
+          playbackSpeed = _this$state.playbackSpeed;
+      var status = videoState.status,
+          currentTime = videoState.currentTime;
+
+      if (status === 'playing' && (currentTime < _this.lastCurrentTime || currentTime >= _this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
+        (0, _analytics.fireAnalyticsEvent)((0, _analytics.createPlayedTrackEvent)(type, _objectSpread(_objectSpread({}, videoState), {}, {
+          isAutoPlay: isAutoPlay,
+          isHDAvailable: isHDAvailable,
+          isHDActive: isHDActive,
+          isFullScreenEnabled: isFullScreenEnabled,
+          isLargePlayer: isLargePlayer,
+          playbackSpeed: playbackSpeed
+        }), fileId), createAnalyticsEvent);
+        _this.lastCurrentTime = currentTime;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resetPendingPlayPauseToggleTimer", function () {
+      if (_this.clickToTogglePlayTimoutId !== undefined) {
+        clearTimeout(_this.clickToTogglePlayTimoutId);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doubleClickToFullscreen", function () {
+      _this.resetPendingPlayPauseToggleTimer();
+
+      _this.toggleFullscreen(); // TODO Add an event similar to "playPauseBlanketClick" but for fullscreen trigger
+
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "togglePlayByBlanketClick", function (action) {
+      _this.resetPendingPlayPauseToggleTimer();
+
+      _this.clickToTogglePlayTimoutId = setTimeout(function () {
+        action();
+
+        _this.createAndFireUIEvent('playPauseBlanketClick');
+      }, 200);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startPlayByBlanketClick", function () {
+      _this.togglePlayByBlanketClick(_this.play);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "pausePlayByBlanketClick", function () {
+      _this.togglePlayByBlanketClick(_this.pause);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startPlayByButtonClick", _this.getMediaButtonClickHandler(_this.play, 'playButton'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "pausePlayByButtonClick", _this.getMediaButtonClickHandler(_this.pause, 'pauseButton'));
     return _this;
   }
 
-  (0, _createClass2.default)(CustomMediaPlayer, [{
+  (0, _createClass2.default)(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-          isAutoPlay = _this$props3.isAutoPlay,
-          onFirstPlay = _this$props3.onFirstPlay;
+      var _this$props4 = this.props,
+          type = _this$props4.type,
+          fileId = _this$props4.fileId,
+          isAutoPlay = _this$props4.isAutoPlay,
+          isHDAvailable = _this$props4.isHDAvailable,
+          isHDActive = _this$props4.isHDActive,
+          onFirstPlay = _this$props4.onFirstPlay,
+          createAnalyticsEvent = _this$props4.createAnalyticsEvent;
+      var _this$state2 = this.state,
+          isFullScreenEnabled = _this$state2.isFullScreenEnabled,
+          isLargePlayer = _this$state2.isLargePlayer,
+          playbackSpeed = _this$state2.playbackSpeed;
+      (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCustomMediaPlayerScreenEvent)(type, {
+        isAutoPlay: isAutoPlay,
+        isHDAvailable: isHDAvailable,
+        isHDActive: isHDActive,
+        isFullScreenEnabled: isFullScreenEnabled,
+        isLargePlayer: isLargePlayer,
+        playbackSpeed: playbackSpeed
+      }, fileId), createAnalyticsEvent);
 
       if (this.videoWrapperRef) {
         this.videoWrapperRef.addEventListener('fullscreenchange', this.onFullScreenChange);
@@ -313,6 +502,14 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         _simultaneousPlayManager.default.pauseOthers(this);
 
         if (onFirstPlay) {
+          (0, _analytics.fireAnalyticsEvent)((0, _analytics.createFirstPlayedTrackEvent)(type, {
+            isAutoPlay: isAutoPlay,
+            isHDAvailable: isHDAvailable,
+            isHDActive: isHDActive,
+            isFullScreenEnabled: isFullScreenEnabled,
+            isLargePlayer: isLargePlayer,
+            playbackSpeed: playbackSpeed
+          }, fileId), createAnalyticsEvent);
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
@@ -336,20 +533,78 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         this.actions = actions;
       }
     }
+  }, {
+    key: "createAndFireUIEvent",
+    value: function createAndFireUIEvent(eventType, actionSubjectId) {
+      var _this$props5 = this.props,
+          type = _this$props5.type,
+          fileId = _this$props5.fileId,
+          isHDActive = _this$props5.isHDActive,
+          isHDAvailable = _this$props5.isHDAvailable,
+          isAutoPlay = _this$props5.isAutoPlay,
+          createAnalyticsEvent = _this$props5.createAnalyticsEvent;
+      var _this$state3 = this.state,
+          isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+          isLargePlayer = _this$state3.isLargePlayer,
+          playbackSpeed = _this$state3.playbackSpeed;
+
+      var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
+        isAutoPlay: isAutoPlay,
+        isHDAvailable: isHDAvailable,
+        isHDActive: isHDActive,
+        isFullScreenEnabled: isFullScreenEnabled,
+        isLargePlayer: isLargePlayer,
+        playbackSpeed: playbackSpeed
+      });
+
+      var analyticsEvent;
+
+      switch (eventType) {
+        case 'mediaButtonClick':
+          analyticsEvent = (0, _analytics.createMediaButtonClickedEvent)(type, playbackState, actionSubjectId, fileId);
+          break;
+
+        case 'shortcutPress':
+          analyticsEvent = (0, _analytics.createMediaShortcutPressedEvent)(type, playbackState, actionSubjectId, fileId);
+          break;
+
+        case 'playPauseBlanketClick':
+          analyticsEvent = (0, _analytics.createPlayPauseBlanketClickedEvent)(type, playbackState, fileId);
+          break;
+
+        case 'timeRangeNavigate':
+        case 'volumeRangeNavigate':
+          analyticsEvent = (0, _analytics.createTimeRangeNavigatedEvent)(type, playbackState, actionSubjectId, fileId);
+          break;
+
+        case 'playbackSpeedChange':
+          analyticsEvent = (0, _analytics.createPlaybackSpeedChangedEvent)(type, playbackState, fileId);
+          break;
+
+        default:
+          analyticsEvent = {
+            eventType: 'ui',
+            action: 'default',
+            actionSubject: 'customMediaPlayer',
+            attributes: {
+              type: type
+            }
+          };
+      }
+
+      (0, _analytics.fireAnalyticsEvent)(analyticsEvent, createAnalyticsEvent);
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props4 = this.props,
-          type = _this$props4.type,
-          src = _this$props4.src,
-          isAutoPlay = _this$props4.isAutoPlay,
-          isShortcutEnabled = _this$props4.isShortcutEnabled,
-          formatMessage = _this$props4.intl.formatMessage,
-          onCanPlay = _this$props4.onCanPlay,
-          onError = _this$props4.onError;
-      var isFullScreenEnabled = this.state.isFullScreenEnabled;
+      var _this$props6 = this.props,
+          type = _this$props6.type,
+          src = _this$props6.src,
+          isAutoPlay = _this$props6.isAutoPlay,
+          onCanPlay = _this$props6.onCanPlay,
+          onError = _this$props6.onError;
       return /*#__PURE__*/_react.default.createElement(_styled.CustomVideoWrapper, {
         innerRef: this.saveVideoWrapperRef,
         "data-testid": "custom-media-player"
@@ -362,8 +617,12 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
         onTimeChange: this.onCurrentTimeChange,
         onError: onError
       }, function (video, videoState, actions) {
-        _this2.setActions(actions);
+        _this2.onViewed(videoState);
+
+        _this2.setActions(actions); //Video State(either prop or variable) is ReadOnly
 
+
+        _this2.videoState = videoState;
         var status = videoState.status,
             currentTime = videoState.currentTime,
             buffered = videoState.buffered,
@@ -371,33 +630,30 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
             isLoading = videoState.isLoading;
         var isLargePlayer = _this2.state.isLargePlayer;
         var isPlaying = status === 'playing';
-        var toggleButtonIcon = isPlaying ? /*#__PURE__*/_react.default.createElement(_vidPause.default, {
-          label: formatMessage(_messages.messages.play)
-        }) : /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
-          label: formatMessage(_messages.messages.pause)
-        });
-        var toggleButtonAction = isPlaying ? _this2.pause : _this2.play;
-
-        var button = /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
-          testId: "custom-media-player-play-toggle-button",
-          "data-test-is-playing": isPlaying,
-          iconBefore: toggleButtonIcon,
-          onClick: toggleButtonAction
+        var skipAmount = 10;
+
+        var skipBackward = function skipBackward() {
+          var newTime = videoState.currentTime - skipAmount;
+          actions.navigate(Math.max(newTime, 0));
+        };
+
+        var skipForward = function skipForward() {
+          var newTime = videoState.currentTime + skipAmount;
+          actions.navigate(Math.min(newTime, videoState.duration));
+        };
+
+        var shortcuts = _this2.renderShortcuts({
+          togglePlayPauseAction: isPlaying ? _this2.pause : _this2.play,
+          toggleMute: actions.toggleMute,
+          skipBackward: skipBackward,
+          skipForward: skipForward
         });
 
-        var shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
-          key: "space-shortcut",
-          keyCode: _shortcut.keyCodes.space,
-          handler: _this2.shortcutHandler(toggleButtonAction)
-        }), /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
-          key: "m-shortcut",
-          keyCode: _shortcut.keyCodes.m,
-          handler: _this2.shortcutHandler(actions.toggleMute)
-        })];
         return /*#__PURE__*/_react.default.createElement(_styled.VideoWrapper, null, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
           setWidth: _this2.onResize
         }), shortcuts, isLoading && _this2.renderSpinner(), /*#__PURE__*/_react.default.createElement(_playPauseBlanket.PlayPauseBlanket, {
-          onClick: _this2.shortcutHandler(toggleButtonAction),
+          onDoubleClick: _this2.doubleClickToFullscreen,
+          onClick: isPlaying ? _this2.pausePlayByBlanketClick : _this2.startPlayByBlanketClick,
           "data-testid": "play-pause-blanket"
         }, video), /*#__PURE__*/_react.default.createElement(_styled.ControlsWrapper, {
           className: _classNames.hideControlsClassName
@@ -405,16 +661,22 @@ var CustomMediaPlayer = /*#__PURE__*/function (_Component) {
           currentTime: currentTime,
           bufferedTime: buffered,
           duration: duration,
-          onChange: _this2.onTimeChange(actions.navigate)
-        })), /*#__PURE__*/_react.default.createElement(_styled.TimebarWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.LeftControls, null, button, _this2.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/_react.default.createElement(_styled.RightControls, null, isLargePlayer && _this2.renderCurrentTime(videoState), _this2.renderHDButton(), _this2.renderSpeedControls(), _this2.renderFullScreenButton(), _this2.renderDownloadButton()))));
+          onChange: actions.navigate,
+          onChanged: _this2.onTimeChanged
+        })), /*#__PURE__*/_react.default.createElement(_styled.TimebarWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.LeftControls, null, _this2.renderPlayPauseButton(isPlaying), _this2.renderSkipBackwardButton(skipBackward), _this2.renderSkipForwardButton(skipForward), _this2.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/_react.default.createElement(_styled.RightControls, null, isLargePlayer && _this2.renderCurrentTime(videoState), _this2.renderHDButton(), _this2.renderSpeedControls(), _this2.renderFullScreenButton(), _this2.renderDownloadButton()))));
       }));
     }
   }]);
-  return CustomMediaPlayer;
+  return CustomMediaPlayerBase;
 }(_react.Component);
 
-exports.CustomMediaPlayer = CustomMediaPlayer;
-
-var _default = (0, _reactIntl.injectIntl)(CustomMediaPlayer);
-
-exports.default = _default;
+exports.CustomMediaPlayerBase = CustomMediaPlayerBase;
+var CustomMediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({
+  packageVersion: _version.version,
+  packageName: _version.name,
+  componentName: 'customMediaPlayer',
+  component: 'customMediaPlayer'
+}, {
+  filterFeatureFlags: _analytics.relevantFeatureFlagNames
+})((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntl.injectIntl)(CustomMediaPlayerBase)));
+exports.CustomMediaPlayer = CustomMediaPlayer;

package/dist/cjs/customMediaPlayer/playbackSpeedControls.js

@@ -150,7 +150,8 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
           playbackSpeed = _this$props.playbackSpeed,
-          intl = _this$props.intl;
+          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;
@@ -200,7 +201,8 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
           }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
             testId: "custom-media-player-playback-speed-toggle-button",
             buttonRef: ref,
-            isSelected: isOpen
+            isSelected: isOpen,
+            onClick: onClick
           }, playbackSpeed, "x"));
         },
         styles: this.popupCustomStyles,

package/dist/cjs/customMediaPlayer/timeRange.js

@@ -101,10 +101,15 @@ var TimeRange = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseUp", function () {
-      // 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
       });

package/dist/cjs/customMediaPlayer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});