@enact/limestone 1.3.0

package/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,2116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Video", {
+  enumerable: true,
+  get: function get() {
+    return _Video["default"];
+  }
+});
+exports["default"] = exports.VideoPlayerBase = exports.VideoPlayer = void 0;
+var _ApiDecorator = _interopRequireDefault(require("@enact/core/internal/ApiDecorator"));
+var _dispatcher = require("@enact/core/dispatcher");
+var _util = require("@enact/core/util");
+var _handle = require("@enact/core/handle");
+var _keymap = require("@enact/core/keymap");
+var _platform = require("@enact/core/platform");
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _util2 = require("@enact/i18n/util");
+var _spotlight = require("@enact/spotlight");
+var _SpotlightContainerDecorator = require("@enact/spotlight/SpotlightContainerDecorator");
+var _Spottable = require("@enact/spotlight/Spottable");
+var _Announce = _interopRequireDefault(require("@enact/ui/AnnounceDecorator/Announce"));
+var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+var _FloatingLayerDecorator = require("@enact/ui/FloatingLayer/FloatingLayerDecorator");
+var _Media = _interopRequireDefault(require("@enact/ui/Media"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
+var _DurationFmt = _interopRequireDefault(require("ilib/lib/DurationFmt"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _MediaPlayer = require("../MediaPlayer");
+var _Overlay = _interopRequireDefault(require("./Overlay"));
+var _MediaTitle = _interopRequireDefault(require("./MediaTitle"));
+var _FeedbackContent = _interopRequireDefault(require("./FeedbackContent"));
+var _FeedbackTooltip = _interopRequireDefault(require("./FeedbackTooltip"));
+var _Video = _interopRequireDefault(require("./Video"));
+var _VideoPlayerModule = _interopRequireDefault(require("./VideoPlayer.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Class;
+var _excluded = ["playerRef"],
+  _excluded2 = ["backButtonAriaLabel", "className", "disabled", "infoComponents", "initialJumpDelay", "jumpDelay", "loading", "locale", "mediaControlsComponent", "no5WayJump", "noAutoPlay", "noMiniFeedback", "noSlider", "noSpinner", "selection", "includeTimeHour", "spotlightDisabled", "spotlightId", "style", "thumbnailComponent", "thumbnailSrc", "title", "videoComponent"];
+/**
+ * Provides Limestone-themed video player components.
+ *
+ * @module limestone/VideoPlayer
+ * @exports Video
+ * @exports VideoPlayer
+ * @exports VideoPlayerBase
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var isEnter = (0, _keymap.is)('enter');
+var isLeft = (0, _keymap.is)('left');
+var isRight = (0, _keymap.is)('right');
+var jumpBackKeyCode = 37;
+var jumpForwardKeyCode = 39;
+var controlsHandleAboveSelectionKeys = [13, 16777221, jumpBackKeyCode, jumpForwardKeyCode];
+var getControlsHandleAboveHoldConfig = function getControlsHandleAboveHoldConfig(_ref) {
+  var frequency = _ref.frequency,
+    time = _ref.time;
+  return {
+    events: [{
+      name: 'hold',
+      time: time
+    }],
+    frequency: frequency
+  };
+};
+var shouldJump = function shouldJump(_ref2, _ref3) {
+  var disabled = _ref2.disabled,
+    no5WayJump = _ref2.no5WayJump;
+  var mediaControlsVisible = _ref3.mediaControlsVisible,
+    sourceUnavailable = _ref3.sourceUnavailable;
+  return !no5WayJump && !mediaControlsVisible && !(disabled || sourceUnavailable);
+};
+var calcNumberValueOfPlaybackRate = function calcNumberValueOfPlaybackRate(rate) {
+  var pbArray = String(rate).split('/');
+  return pbArray.length > 1 ? parseInt(pbArray[0]) / parseInt(pbArray[1]) : parseFloat(rate);
+};
+var RootComponent = function RootComponent(_ref4) {
+  var playerRef = _ref4.playerRef,
+    rest = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+    ref: playerRef
+  }, rest));
+};
+RootComponent.propTypes = {
+  /*
+   * Called with the reference to the mediaControls node.
+   *
+   * @type {Object|Function}
+   * @public
+   */
+  playerRef: _propTypes["default"].ref
+};
+var SpottableDiv = (0, _Touchable["default"])((0, _Spottable.Spottable)('div'));
+var RootContainer = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
+  enterTo: 'default-element',
+  defaultElement: [".".concat(_VideoPlayerModule["default"].controlsHandleAbove), ".".concat(_VideoPlayerModule["default"].controlsFrame)]
+}, RootComponent);
+var ControlsContainer = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
+  enterTo: 'default-element',
+  straightOnly: true
+}, 'div');
+var memoGetDurFmt = (0, _util.memoize)(function /* locale */
+() {
+  return new _DurationFmt["default"]({
+    length: 'medium',
+    style: 'clock',
+    useNative: false
+  });
+});
+var getDurFmt = function getDurFmt(locale) {
+  if (typeof window === 'undefined') return null;
+  return memoGetDurFmt(locale);
+};
+var forwardWithState = function forwardWithState(type) {
+  return (0, _handle.adaptEvent)(function () {
+    return {
+      type: type
+    };
+  }, (0, _handle.handle)((0, _handle.adaptEvent)((0, _handle.call)('addStateToEvent'), (0, _handle.forwardWithPrevent)(type))));
+};
+var forwardToggleMore = (0, _handle.forward)('onToggleMore');
+
+// provide forwarding of events on media controls
+var forwardControlsAvailable = (0, _handle.forwardCustom)('onControlsAvailable');
+var forwardPlay = forwardWithState('onPlay');
+var forwardWillPlay = forwardWithState('onWillPlay');
+var forwardPause = forwardWithState('onPause');
+var forwardWillPause = forwardWithState('onWillPause');
+var forwardRewind = forwardWithState('onRewind');
+var forwardWillRewind = forwardWithState('onWillRewind');
+var forwardFastForward = forwardWithState('onFastForward');
+var forwardWillFastForward = forwardWithState('onWillFastForward');
+var forwardJumpBackward = forwardWithState('onJumpBackward');
+var forwardWillJumpBackward = forwardWithState('onWillJumpBackward');
+var forwardJumpForward = forwardWithState('onJumpForward');
+var forwardWillJumpForward = forwardWithState('onWillJumpForward');
+var AnnounceState = {
+  // Video is loaded but additional announcements have not been made
+  READY: 0,
+  // The title should be announced
+  TITLE: 1,
+  // The title has been announced
+  TITLE_READ: 2,
+  // The infoComponents should be announced
+  INFO: 3,
+  // All announcements have been made
+  DONE: 4
+};
+
+/**
+ * Every callback sent by {@link limestone/VideoPlayer|VideoPlayer} receives a status package,
+ * which includes an object with the following key/value pairs as the first argument:
+ *
+ * @typedef {Object} videoStatus
+ * @memberof limestone/VideoPlayer
+ * @property {String} type - Type of event that triggered this callback
+ * @property {Number} currentTime - Playback index of the media in seconds
+ * @property {Number} duration - Media's entire duration in seconds
+ * @property {Boolean} paused - Playing vs paused state. `true` means the media is paused
+ * @property {Number} playbackRate - Current playback rate, as a number
+ * @property {Number} proportionLoaded - A value between `0` and `1` representing the proportion of the media that has loaded
+ * @property {Number} proportionPlayed - A value between `0` and `1` representing the proportion of the media that has already been shown
+ *
+ * @public
+ */
+
+/**
+ * A set of playback rates when media fast forwards, rewinds, slow-forwards, or slow-rewinds.
+ *
+ * The number used for each operation is proportional to the normal playing speed, 1. If the rate
+ * is less than 1, it will play slower than normal speed, and, if it is larger than 1, it will play
+ * faster. If it is negative, it will play backward.
+ *
+ * The order of numbers represents the incremental order of rates that will be used for each
+ * operation. Note that rates can be expressed as decimals, strings, and fractions.
+ * (e.g.: `0.5`, `'0.5'`, `'1/2'`).
+ *
+ * @typedef {Object} playbackRateHash
+ * @memberof limestone/VideoPlayer
+ * @property {[]} fastForward - An array of playback rates when media fast forwards
+ * @property {[]} rewind - An array of playback rates when media rewinds
+ * @property {[]} slowForward - An array of playback rates when media slow-forwards
+ * @property {[]} slowRewind - An array of playback rates when media slow-rewinds
+ *
+ * @public
+ */
+
+/**
+ * A player for video {@link limestone/VideoPlayer.VideoPlayerBase}.
+ *
+ * @class VideoPlayerBase
+ * @memberof limestone/VideoPlayer
+ * @ui
+ * @public
+ */
+var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function (_Component) {
+  function VideoPlayerBase(_props) {
+    var _this;
+    _classCallCheck(this, VideoPlayerBase);
+    _this = _callSuper(this, VideoPlayerBase, [_props]);
+
+    // Internal State
+    //
+    // Internal Methods
+    //
+    _this.announceJob = new _util.Job(function (msg, clear) {
+      return _this.announceRef && _this.announceRef.announce(msg, clear);
+    }, 200);
+    _this.announce = function (msg, clear) {
+      _this.announceJob.start(msg, clear);
+    };
+    _this.activityDetected = function () {
+      _this.startAutoCloseTimeout();
+    };
+    _this.startAutoCloseTimeout = function () {
+      // If this.state.more is used as a reference for when this function should fire, timing for
+      // detection of when "more" is pressed vs when the state is updated is mismatched. Using an
+      // instance variable that's only set and used for this express purpose seems cleanest.
+      if (_this.props.autoCloseTimeout && _this.state.mediaControlsVisible) {
+        _this.autoCloseJob.startAfter(_this.props.autoCloseTimeout);
+      }
+    };
+    _this.stopAutoCloseTimeout = function () {
+      _this.autoCloseJob.stop();
+    };
+    _this.generateId = function () {
+      return Math.random().toString(36).substring(2, 10);
+    };
+    /**
+     * If the announce state is either ready to read the title or ready to read info, advance the
+     * state to "read".
+     *
+     * @returns {Boolean} Returns true to be used in event handlers
+     * @private
+     */
+    _this.markAnnounceRead = function () {
+      if (_this.state.announce === AnnounceState.TITLE) {
+        _this.setState({
+          announce: AnnounceState.TITLE_READ
+        });
+      } else if (_this.state.announce === AnnounceState.INFO) {
+        _this.setState({
+          announce: AnnounceState.DONE
+        });
+      }
+      return true;
+    };
+    /**
+     * Shows media controls.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.showControls = function () {
+      if (_this.props.disabled) {
+        return;
+      }
+      _this.startDelayedFeedbackHide();
+      _this.startDelayedTitleHide();
+      _this.setState(function (_ref5) {
+        var announce = _ref5.announce;
+        if (announce === AnnounceState.READY) {
+          // if we haven't read the title yet, do so this time
+          announce = AnnounceState.TITLE;
+        } else if (announce === AnnounceState.TITLE) {
+          // if we have read the title, advance to INFO so title isn't read again
+          announce = AnnounceState.TITLE_READ;
+        }
+        return {
+          announce: announce,
+          bottomControlsRendered: true,
+          feedbackAction: 'idle',
+          feedbackVisible: true,
+          mediaControlsVisible: true,
+          mediaSliderVisible: true,
+          miniFeedbackVisible: false,
+          titleVisible: true
+        };
+      });
+    };
+    /**
+     * Hides media controls.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.hideControls = function () {
+      _this.stopDelayedFeedbackHide();
+      _this.stopDelayedMiniFeedbackHide();
+      _this.stopDelayedTitleHide();
+      _this.stopAutoCloseTimeout();
+      _this.setState({
+        feedbackAction: 'idle',
+        feedbackVisible: false,
+        mediaControlsVisible: false,
+        mediaSliderVisible: false,
+        miniFeedbackVisible: false,
+        infoVisible: false
+      });
+      _this.markAnnounceRead();
+    };
+    /**
+     * Toggles the media controls.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.toggleControls = function () {
+      if (_this.state.mediaControlsVisible) {
+        _this.hideControls();
+      } else {
+        _this.showControls();
+      }
+    };
+    _this.doAutoClose = function () {
+      _this.stopDelayedFeedbackHide();
+      _this.stopDelayedTitleHide();
+      _this.setState(function (_ref6) {
+        var mediaSliderVisible = _ref6.mediaSliderVisible,
+          miniFeedbackVisible = _ref6.miniFeedbackVisible;
+        return {
+          feedbackVisible: false,
+          mediaControlsVisible: false,
+          mediaSliderVisible: mediaSliderVisible && miniFeedbackVisible,
+          infoVisible: false
+        };
+      });
+      _this.markAnnounceRead();
+    };
+    _this.autoCloseJob = new _util.Job(_this.doAutoClose);
+    _this.startDelayedTitleHide = function () {
+      if (_this.props.titleHideDelay) {
+        _this.hideTitleJob.startAfter(_this.props.titleHideDelay);
+      }
+    };
+    _this.stopDelayedTitleHide = function () {
+      _this.hideTitleJob.stop();
+    };
+    _this.hideTitle = function () {
+      _this.setState({
+        titleVisible: false
+      });
+    };
+    _this.hideTitleJob = new _util.Job(_this.hideTitle);
+    _this.startDelayedFeedbackHide = function () {
+      if (_this.props.feedbackHideDelay) {
+        _this.hideFeedbackJob.startAfter(_this.props.feedbackHideDelay);
+      }
+    };
+    _this.stopDelayedFeedbackHide = function () {
+      _this.hideFeedbackJob.stop();
+    };
+    _this.showFeedback = function () {
+      if (_this.state.mediaControlsVisible) {
+        _this.setState({
+          feedbackVisible: true
+        });
+      } else {
+        var shouldShowSlider = _this.pulsedPlaybackState !== null || calcNumberValueOfPlaybackRate(_this.playbackRate) !== 1;
+        if (_this.showMiniFeedback && (!_this.state.miniFeedbackVisible || _this.state.mediaSliderVisible !== shouldShowSlider)) {
+          _this.setState(function (_ref7) {
+            var loading = _ref7.loading,
+              duration = _ref7.duration,
+              error = _ref7.error;
+            return {
+              mediaSliderVisible: shouldShowSlider && !_this.props.noMediaSliderFeedback,
+              miniFeedbackVisible: !(loading || !duration || error)
+            };
+          });
+        }
+      }
+    };
+    _this.hideFeedback = function () {
+      if (_this.state.feedbackVisible && _this.state.feedbackAction !== 'focus') {
+        _this.setState({
+          feedbackVisible: false,
+          feedbackAction: 'idle'
+        });
+      }
+    };
+    _this.hideFeedbackJob = new _util.Job(_this.hideFeedback);
+    _this.startDelayedMiniFeedbackHide = function () {
+      var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.miniFeedbackHideDelay;
+      if (delay) {
+        _this.hideMiniFeedbackJob.startAfter(delay);
+      }
+    };
+    _this.stopDelayedMiniFeedbackHide = function () {
+      _this.hideMiniFeedbackJob.stop();
+    };
+    _this.hideMiniFeedback = function () {
+      if (_this.state.miniFeedbackVisible) {
+        _this.showMiniFeedback = false;
+        _this.setState({
+          mediaSliderVisible: false,
+          miniFeedbackVisible: false
+        });
+      }
+    };
+    _this.hideMiniFeedbackJob = new _util.Job(_this.hideMiniFeedback);
+    _this.handle = _handle.handle.bind(_this);
+    _this.showControlsFromPointer = function () {
+      _spotlight.Spotlight.setPointerMode(false);
+      _this.showControls();
+    };
+    _this.clearPulsedPlayback = function () {
+      _this.pulsedPlaybackRate = null;
+      _this.pulsedPlaybackState = null;
+    };
+    // only show mini feedback if playback controls are invoked by a key event
+    _this.shouldShowMiniFeedback = function (ev) {
+      if (ev.type === 'keyup') {
+        _this.showMiniFeedback = true;
+      }
+      return true;
+    };
+    _this.handleLoadStart = function () {
+      _this.firstPlayReadFlag = true;
+      _this.prevCommand = _this.props.noAutoPlay ? 'pause' : 'play';
+      _this.speedIndex = 0;
+      _this.setState({
+        announce: AnnounceState.READY,
+        currentTime: 0,
+        sourceUnavailable: true,
+        proportionPlayed: 0,
+        proportionLoaded: 0
+      });
+      if (!_this.props.noAutoShowMediaControls) {
+        if (!_this.state.bottomControlsRendered) {
+          _this.renderBottomControl.idle();
+        } else {
+          _this.showControls();
+        }
+      }
+    };
+    _this.handlePlay = _this.handle(forwardWillPlay, _this.shouldShowMiniFeedback, function () {
+      return _this.play();
+    }, forwardPlay);
+    _this.handlePause = _this.handle(forwardWillPause, _this.shouldShowMiniFeedback, function () {
+      return _this.pause();
+    }, forwardPause);
+    _this.handleRewind = _this.handle(forwardWillRewind, _this.shouldShowMiniFeedback, function () {
+      return _this.rewind();
+    }, forwardRewind);
+    _this.handleFastForward = _this.handle(forwardWillFastForward, _this.shouldShowMiniFeedback, function () {
+      return _this.fastForward();
+    }, forwardFastForward);
+    _this.handleJump = function (_ref8) {
+      var keyCode = _ref8.keyCode;
+      if (_this.props.seekDisabled) {
+        (0, _handle.forwardCustom)('onSeekFailed')(null, _this.props);
+      } else {
+        var jumpBy = ((0, _keymap.is)('left', keyCode) ? -1 : 1) * _this.props.jumpBy;
+        var time = Math.min(_this.state.duration, Math.max(0, _this.state.currentTime + jumpBy));
+        if (_this.preventTimeChange(time)) return;
+        _this.showMiniFeedback = true;
+        _this.jump(jumpBy);
+        _this.announceJob.startAfter(500, (0, _MediaPlayer.secondsToTime)(_this.video.currentTime, getDurFmt(_this.props.locale), {
+          includeHour: true
+        }));
+      }
+    };
+    _this.handleGlobalKeyDown = _this.handle((0, _handle.returnsTrue)(_this.activityDetected), (0, _handle.forKey)('down'), function () {
+      return !_this.state.mediaControlsVisible && (!_spotlight.Spotlight.getCurrent() && _spotlight.Spotlight.getPointerMode() || !_spotlight.Spotlight.getPointerMode()) && !_this.props.spotlightDisabled;
+    }, _handle.preventDefault, _handle.stopImmediate, _this.showControlsFromPointer);
+    _this.handleControlsHandleAboveHold = function () {
+      if (shouldJump(_this.props, _this.state)) {
+        _this.handleJump({
+          keyCode: _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode
+        });
+      }
+    };
+    _this.handleControlsHandleAboveKeyDown = function (_ref9) {
+      var keyCode = _ref9.keyCode;
+      if (isEnter(keyCode)) {
+        _this.jumpButtonPressed = 0;
+      } else if (isLeft(keyCode)) {
+        _this.jumpButtonPressed = -1;
+      } else if (isRight(keyCode)) {
+        _this.jumpButtonPressed = 1;
+      }
+    };
+    _this.handleControlsHandleAboveKeyUp = function (_ref0) {
+      var keyCode = _ref0.keyCode;
+      if (isEnter(keyCode) || isLeft(keyCode) || isRight(keyCode)) {
+        _this.jumpButtonPressed = null;
+      }
+    };
+    _this.handleControlsHandleAboveDown = function () {
+      if (_this.jumpButtonPressed === 0) {
+        _this.showControls();
+      } else if (_this.jumpButtonPressed === -1 || _this.jumpButtonPressed === 1) {
+        var keyCode = _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode;
+        if (shouldJump(_this.props, _this.state)) {
+          _this.handleJump({
+            keyCode: keyCode
+          });
+        } else {
+          _spotlight.Spotlight.move((0, _spotlight.getDirection)(keyCode));
+        }
+      }
+    };
+    //
+    // Media Interaction Methods
+    //
+    _this.handleEvent = function () {
+      var el = _this.video;
+      var updatedState = {
+        // Standard media properties
+        currentTime: el.currentTime,
+        duration: el.duration,
+        paused: _this.state.seekingMode ? el.playbackRate !== 1 || el.paused : el.paused,
+        playbackRate: el.playbackRate,
+        // Non-standard state computed from properties
+        error: el.error,
+        loading: el.loading,
+        proportionLoaded: el.proportionLoaded,
+        proportionPlayed: el.proportionPlayed || 0,
+        sliderTooltipTime: el.currentTime,
+        // note: `el.loading && this.state.sourceUnavailable == false` is equivalent to `oncanplaythrough`
+        sourceUnavailable: el.loading && _this.state.sourceUnavailable || el.error
+      };
+
+      // If there's an error, we're obviously not loading, no matter what the readyState is.
+      if (updatedState.error) updatedState.loading = false;
+      var isRewind = _this.prevCommand === 'rewind' || _this.prevCommand === 'slowRewind';
+      var isForward = _this.prevCommand === 'fastForward' || _this.prevCommand === 'slowForward';
+      if (_this.props.pauseAtEnd && (el.currentTime === 0 && isRewind || el.currentTime === el.duration && isForward)) {
+        _this.pause();
+      }
+      _this.setState(updatedState);
+    };
+    _this.renderBottomControl = new _util.Job(function () {
+      if (!_this.state.bottomControlsRendered) {
+        _this.setState({
+          bottomControlsRendered: true
+        });
+      }
+    });
+    /**
+     * Returns an object with the current state of the media including `currentTime`, `duration`,
+     * `paused`, `playbackRate`, `proportionLoaded`, and `proportionPlayed`.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @returns {Object}
+     * @public
+     */
+    _this.getMediaState = function () {
+      return {
+        currentTime: _this.video.currentTime,
+        duration: _this.state.duration,
+        paused: _this.state.seekingMode ? _this.video.playbackRate !== 1 || _this.video.paused : _this.video.paused,
+        playbackRate: _this.video.playbackRate,
+        proportionLoaded: _this.video.proportionLoaded,
+        proportionPlayed: _this.video.proportionPlayed || 0
+      };
+    };
+    /**
+     * The primary means of interacting with the `<video>` element.
+     *
+     * @param  {String} action The method to preform.
+     * @param  {Multiple} props  The arguments, in the format that the action method requires.
+     *
+     * @private
+     */
+    _this.send = function (action, props) {
+      _this.clearPulsedPlayback();
+      _this.showFeedback();
+      _this.startDelayedFeedbackHide();
+      _this.video[action](props);
+    };
+    /**
+     * Programmatically plays the current media.
+     * If you call this function during fast forwarding or rewinding, the playback speed will be set to normal.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.play = function () {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      if (_this.state.seekingMode) {
+        _this.setPlaybackRate(1);
+      }
+      _this.speedIndex = 0;
+      // must happen before send() to ensure feedback uses the right value
+      // TODO: refactor into this.state member
+      _this.prevCommand = 'play';
+      _this.send('play');
+      _this.announce((0, _$L["default"])('Play'));
+      _this.startDelayedMiniFeedbackHide(5000);
+      return true;
+    };
+    /**
+     * Programmatically pauses the current media.
+     * If you call this function during fast forwarding or rewinding, the playback speed will be set to normal.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.pause = function () {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      if (_this.state.seekingMode) {
+        _this.setPlaybackRate(1);
+      }
+      _this.speedIndex = 0;
+      // must happen before send() to ensure feedback uses the right value
+      // TODO: refactor into this.state member
+      _this.prevCommand = 'pause';
+      _this.send('pause');
+      _this.announce((0, _$L["default"])('Pause'));
+      _this.stopDelayedMiniFeedbackHide();
+      return true;
+    };
+    /**
+     * Sets the media playback time index.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @param {Number} timeIndex - Time index to seek
+     * @public
+     */
+    _this.seek = function (timeIndex) {
+      if (!_this.props.seekDisabled && !isNaN(_this.video.duration) && !_this.state.sourceUnavailable) {
+        _this.video.currentTime = timeIndex;
+      } else {
+        (0, _handle.forwardCustom)('onSeekFailed')(null, _this.props);
+      }
+    };
+    /**
+     * Step a given amount of time away from the current playback position.
+     * Like {@link limestone/VideoPlayer.VideoPlayerBase.seek|seek} but relative.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @param {Number} distance - Time value to jump
+     * @public
+     */
+    _this.jump = function (distance) {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      _this.pulsedPlaybackRate = (0, _util2.toUpperCase)(new _DurationFmt["default"]({
+        length: 'long'
+      }).format({
+        second: _this.props.jumpBy
+      }));
+      _this.pulsedPlaybackState = distance > 0 ? 'jumpForward' : 'jumpBackward';
+      _this.showFeedback();
+      _this.startDelayedFeedbackHide();
+      _this.seek(_this.state.currentTime + distance);
+      _this.startDelayedMiniFeedbackHide();
+      return true;
+    };
+    /**
+     * Fast forwards the current media for seeking.
+     * This function changes the playback rate.
+     * If you call `play` or `pause` during fast forwarding, the playback speed will be set to normal.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.fastForward = function () {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      _this.setState({
+        seekingMode: true
+      });
+      var shouldResumePlayback = false;
+      switch (_this.prevCommand) {
+        case 'slowForward':
+          if (_this.speedIndex === _this.playbackRates.length - 1) {
+            // reached to the end of array => fastforward
+            _this.selectPlaybackRates('fastForward');
+            _this.speedIndex = 0;
+            _this.prevCommand = 'fastForward';
+          } else {
+            _this.speedIndex = _this.clampPlaybackRate(_this.speedIndex + 1);
+          }
+          break;
+        case 'pause':
+          _this.selectPlaybackRates('slowForward');
+          if (_this.state.paused) {
+            shouldResumePlayback = true;
+          }
+          _this.speedIndex = 0;
+          _this.prevCommand = 'slowForward';
+          break;
+        case 'fastForward':
+          _this.speedIndex = _this.clampPlaybackRate(_this.speedIndex + 1);
+          _this.prevCommand = 'fastForward';
+          break;
+        default:
+          _this.selectPlaybackRates('fastForward');
+          _this.speedIndex = 0;
+          _this.prevCommand = 'fastForward';
+          if (_this.state.paused) {
+            shouldResumePlayback = true;
+          }
+          break;
+      }
+      _this.setPlaybackRate(_this.selectPlaybackRate(_this.speedIndex));
+      if (shouldResumePlayback) _this.send('play');
+      _this.stopDelayedFeedbackHide();
+      _this.stopDelayedMiniFeedbackHide();
+      _this.clearPulsedPlayback();
+      _this.showFeedback();
+      return true;
+    };
+    /**
+     * Rewinds the current media for seeking.
+     * This function changes the playback rate.
+     * If you call `play` or `pause` during rewinding, the playback speed will be set to normal.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.rewind = function () {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      _this.setState({
+        seekingMode: true
+      });
+      var rateForSlowRewind = _this.props.playbackRateHash['slowRewind'];
+      var shouldResumePlayback = false,
+        command = 'rewind';
+      if (_this.video.currentTime === 0) {
+        // Do not rewind if currentTime is 0. We're already at the beginning.
+        return true;
+      }
+      switch (_this.prevCommand) {
+        case 'slowRewind':
+          if (_this.speedIndex === _this.playbackRates.length - 1) {
+            // reached to the end of array => go to rewind
+            _this.selectPlaybackRates(command);
+            _this.speedIndex = 0;
+            _this.prevCommand = command;
+          } else {
+            _this.speedIndex = _this.clampPlaybackRate(_this.speedIndex + 1);
+          }
+          break;
+        case 'pause':
+          // If it's possible to slowRewind, do it, otherwise just leave it as normal rewind : QEVENTSEVT-17386
+          if (rateForSlowRewind && rateForSlowRewind.length >= 0) {
+            command = 'slowRewind';
+          }
+          _this.selectPlaybackRates(command);
+          if (_this.state.paused && _this.state.duration > _this.state.currentTime) {
+            shouldResumePlayback = true;
+          }
+          _this.speedIndex = 0;
+          _this.prevCommand = command;
+          break;
+        case 'rewind':
+          _this.speedIndex = _this.clampPlaybackRate(_this.speedIndex + 1);
+          _this.prevCommand = command;
+          break;
+        default:
+          _this.selectPlaybackRates(command);
+          _this.speedIndex = 0;
+          _this.prevCommand = command;
+          break;
+      }
+      _this.setPlaybackRate(_this.selectPlaybackRate(_this.speedIndex));
+      if (shouldResumePlayback) _this.send('play');
+      _this.stopDelayedFeedbackHide();
+      _this.stopDelayedMiniFeedbackHide();
+      _this.clearPulsedPlayback();
+      _this.showFeedback();
+      return true;
+    };
+    /**
+     * Sets the playback speed.
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @param {Number} rate - The desired playback rate. This value is passed to the `playbackRate` property of `HTMLMediaElement`.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate|MDN playbackRate property}
+     * @returns {Boolean} Returns true if the speed changes successfully.
+     * @public
+     */
+    _this.setPlaybackSpeed = function (rate) {
+      if (_this.state.sourceUnavailable) {
+        return false;
+      }
+      _this.setState({
+        seekingMode: false
+      });
+      _this.setPlaybackRate(rate);
+      return true;
+    };
+    // Creates a proxy to the video node if Proxy is supported
+    _this.videoProxy = typeof Proxy !== 'function' ? null : new Proxy({}, {
+      get: function get(target, name) {
+        var value = _this.video[name];
+        if (typeof value === 'function') {
+          value = value.bind(_this.video);
+        }
+        return value;
+      },
+      set: function set(target, name, value) {
+        return _this.video[name] = value;
+      }
+    });
+    /**
+     * Returns a proxy to the underlying `<video>` node currently used by the VideoPlayer
+     *
+     * @function
+     * @memberof limestone/VideoPlayer.VideoPlayerBase.prototype
+     * @public
+     */
+    _this.getVideoNode = function () {
+      return _this.videoProxy || _this.video;
+    };
+    _this.areControlsVisible = function () {
+      return _this.state.mediaControlsVisible;
+    };
+    /**
+     * Sets the playback rate type for video seeking (from the keys of {@link limestone/VideoPlayer.VideoPlayer.playbackRateHash|playbackRateHash}).
+     *
+     * @param {String} cmd - Key of the playback rate type.
+     * @private
+     */
+    _this.selectPlaybackRates = function (cmd) {
+      _this.playbackRates = _this.props.playbackRateHash[cmd];
+    };
+    /**
+     * Changes playbackRate to a valid value when initiating fast-forward or rewind.
+     *
+     * @param {Number} idx - The index of the desired playback rate.
+     * @private
+     */
+    _this.clampPlaybackRate = function (idx) {
+      if (!_this.playbackRates) {
+        return;
+      }
+      return idx % _this.playbackRates.length;
+    };
+    /**
+     * Retrieves the playback rate value.
+     *
+     * @param {Number} idx - The index of the desired playback rate.
+     * @returns {Number|String} The playback rate value.
+     * @private
+     */
+    _this.selectPlaybackRate = function (idx) {
+      return _this.playbackRates[idx];
+    };
+    /**
+     * Sets playbackRate.
+     *
+     * @param {Number|String} rate - The desired playback rate.
+     * @private
+     */
+    _this.setPlaybackRate = function (rate) {
+      if (_this.state.seekingMode) {
+        // Stop rewind (if happening)
+        _this.stopRewindJob();
+      }
+
+      // Make sure rate is a string
+      _this.playbackRate = String(rate);
+      var pbNumber = calcNumberValueOfPlaybackRate(_this.playbackRate);
+      if (_platform.platform.type !== 'webos') {
+        // ReactDOM throws error for setting negative value for playbackRate
+        _this.video.playbackRate = pbNumber < 0 ? 0 : pbNumber;
+        if (_this.state.seekingMode) {
+          // For supporting cross browser behavior
+          if (pbNumber < 0) {
+            _this.beginRewind();
+          }
+        }
+      } else {
+        // Set native playback rate
+        _this.video.playbackRate = pbNumber;
+      }
+    };
+    /**
+     * Calculates the time that has elapsed since. This is necessary for browsers until negative
+     * playback rate is directly supported.
+     *
+     * @private
+     */
+    _this.rewindManually = function () {
+      var now = (0, _util.perfNow)(),
+        distance = now - _this.rewindBeginTime,
+        pbRate = calcNumberValueOfPlaybackRate(_this.playbackRate),
+        adjustedDistance = distance * pbRate / 1000;
+      _this.jump(adjustedDistance);
+      _this.stopDelayedMiniFeedbackHide();
+      _this.clearPulsedPlayback();
+      _this.startRewindJob(); // Issue another rewind tick
+    };
+    _this.rewindJob = new _util.Job(_this.rewindManually, 100);
+    /**
+     * Starts rewind job.
+     *
+     * @private
+     */
+    _this.startRewindJob = function () {
+      _this.rewindBeginTime = (0, _util.perfNow)();
+      _this.rewindJob.start();
+    };
+    /**
+     * Stops rewind job.
+     *
+     * @private
+     */
+    _this.stopRewindJob = function () {
+      _this.rewindJob.stop();
+    };
+    /**
+     * Implements custom rewind functionality (until browsers support negative playback rate).
+     *
+     * @private
+     */
+    _this.beginRewind = function () {
+      _this.send('pause');
+      _this.startRewindJob();
+    };
+    //
+    // Handled Media events
+    //
+    _this.addStateToEvent = function (ev) {
+      return _objectSpread({
+        // More props from `ev` may be added here as needed, but a full copy via `...ev`
+        // overloads Storybook's Action Logger and likely has other perf fallout.
+        type: ev.type
+      }, _this.getMediaState());
+    };
+    //
+    // Player Interaction events
+    //
+    _this.onVideoClick = function () {
+      _this.toggleControls();
+    };
+    _this.onSliderChange = function (_ref1) {
+      var value = _ref1.value;
+      var time = value * _this.state.duration;
+      if (_this.preventTimeChange(time)) return;
+      _this.seek(time);
+      _this.sliderScrubbing = false;
+    };
+    _this.handleBack = _this.handle((0, _handle.forwardCustom)('onBack'));
+    _this.handleKnobMove = function (ev) {
+      _this.sliderScrubbing = true;
+
+      // prevent announcing repeatedly when the knob is detached from the progress.
+      // TODO: fix Slider to not send onKnobMove when the knob hasn't, in fact, moved
+      if (_this.sliderKnobProportion !== ev.proportion) {
+        _this.sliderKnobProportion = ev.proportion;
+        var seconds = Math.floor(_this.sliderKnobProportion * _this.video.duration);
+        if (!isNaN(seconds)) {
+          var knobTime = (0, _MediaPlayer.secondsToTime)(seconds, getDurFmt(_this.props.locale), {
+            includeHour: true
+          });
+          (0, _handle.forward)('onScrub', _objectSpread(_objectSpread({}, ev), {}, {
+            seconds: seconds,
+            type: 'onScrub'
+          }), _this.props);
+          _this.announce("".concat((0, _$L["default"])('jump to'), " ").concat(knobTime), true);
+        }
+      }
+    };
+    _this.handleSliderFocus = function () {
+      var seconds = Math.floor(_this.sliderKnobProportion * _this.video.duration);
+      _this.sliderScrubbing = true;
+      _this.setState({
+        feedbackAction: 'focus',
+        feedbackVisible: true
+      });
+      _this.stopDelayedFeedbackHide();
+      if (!isNaN(seconds)) {
+        var knobTime = (0, _MediaPlayer.secondsToTime)(seconds, getDurFmt(_this.props.locale), {
+          includeHour: true
+        });
+        (0, _handle.forward)('onScrub', {
+          detached: _this.sliderScrubbing,
+          proportion: _this.sliderKnobProportion,
+          seconds: seconds,
+          type: 'onScrub'
+        }, _this.props);
+        _this.announce("".concat((0, _$L["default"])('jump to'), " ").concat(knobTime), true);
+      }
+    };
+    _this.handleSliderBlur = function () {
+      _this.sliderScrubbing = false;
+      _this.startDelayedFeedbackHide();
+      _this.setState(function () {
+        return {
+          feedbackAction: 'blur',
+          feedbackVisible: true
+        };
+      });
+    };
+    _this.slider5WayPressJob = new _util.Job(function () {
+      _this.setState({
+        slider5WayPressed: false
+      });
+    }, 200);
+    _this.handleSliderKeyDown = function (ev) {
+      var keyCode = ev.keyCode;
+      if ((0, _keymap.is)('enter', keyCode)) {
+        _this.setState({
+          slider5WayPressed: true
+        }, _this.slider5WayPressJob.start());
+      } else if ((0, _keymap.is)('down', keyCode)) {
+        _spotlight.Spotlight.setPointerMode(false);
+        if (_spotlight.Spotlight.focus(_this.mediaControlsSpotlightId)) {
+          (0, _handle.preventDefault)(ev);
+          (0, _handle.stopImmediate)(ev);
+        }
+      } else if ((0, _keymap.is)('up', keyCode)) {
+        _spotlight.Spotlight.setPointerMode(false);
+      }
+    };
+    _this.onJumpBackward = _this.handle(forwardWillJumpBackward, function () {
+      return _this.jump(-1 * _this.props.jumpBy);
+    }, forwardJumpBackward);
+    _this.onJumpForward = _this.handle(forwardWillJumpForward, function () {
+      return _this.jump(_this.props.jumpBy);
+    }, forwardJumpForward);
+    _this.handleToggleMore = function (ev) {
+      var showMoreComponents = ev.showMoreComponents,
+        liftDistance = ev.liftDistance;
+      forwardToggleMore(ev, _this.props);
+      if (!showMoreComponents) {
+        _this.startAutoCloseTimeout(); // Restore the timer since we are leaving "more".
+        // Restore the title-hide now that we're finished with "more".
+        _this.startDelayedTitleHide();
+      } else {
+        // Interrupt the title-hide since we don't want it hiding autonomously in "more".
+        _this.stopDelayedTitleHide();
+      }
+      _this.playerRef.current.style.setProperty('--liftDistance', "".concat(liftDistance, "px"));
+      _this.setState(function (_ref10) {
+        var announce = _ref10.announce;
+        return {
+          infoVisible: showMoreComponents,
+          titleVisible: true,
+          announce: announce < AnnounceState.INFO ? AnnounceState.INFO : AnnounceState.DONE
+        };
+      });
+    };
+    _this.handleMediaControlsClose = function (ev) {
+      _this.hideControls();
+      ev.stopPropagation();
+    };
+    _this.setVideoRef = function (video) {
+      _this.video = video;
+    };
+    _this.setTitleRef = function (node) {
+      _this.titleRef = node;
+    };
+    _this.setAnnounceRef = function (node) {
+      _this.announceRef = node;
+    };
+    _this.video = null;
+    _this.pulsedPlaybackRate = null;
+    _this.pulsedPlaybackState = null;
+    _this.prevCommand = _props.noAutoPlay ? 'pause' : 'play';
+    _this.showMiniFeedback = false;
+    _this.speedIndex = 0;
+    _this.seekingMode = true;
+    _this.id = _this.generateId();
+    _this.selectPlaybackRates('fastForward');
+    _this.sliderKnobProportion = 0;
+    _this.mediaControlsSpotlightId = _props.spotlightId + '_mediaControls';
+    _this.jumpButtonPressed = null;
+    _this.playerRef = /*#__PURE__*/(0, _react.createRef)();
+    _this.playbackRate = 1;
+
+    // Re-render-necessary State
+    _this.state = {
+      announce: AnnounceState.READY,
+      currentTime: 0,
+      duration: 0,
+      error: false,
+      loading: false,
+      paused: _props.noAutoPlay,
+      playbackRate: 1,
+      titleOffsetHeight: 0,
+      bottomOffsetHeight: 0,
+      // Non-standard state computed from properties
+      bottomControlsRendered: false,
+      feedbackAction: 'idle',
+      feedbackVisible: false,
+      infoVisible: false,
+      mediaControlsVisible: false,
+      mediaSliderVisible: false,
+      miniFeedbackVisible: false,
+      proportionLoaded: 0,
+      proportionPlayed: 0,
+      sourceUnavailable: true,
+      titleVisible: true
+    };
+    if (_props.setApiProvider) {
+      _props.setApiProvider(_this);
+    }
+    return _this;
+  }
+  _inherits(VideoPlayerBase, _Component);
+  return _createClass(VideoPlayerBase, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _dispatcher.on)('mousemove', this.activityDetected);
+      if (_platform.platform.touchEvent) {
+        (0, _dispatcher.on)('touchmove', this.activityDetected);
+      }
+      document.addEventListener('keydown', this.handleGlobalKeyDown, {
+        capture: true
+      });
+      document.addEventListener('wheel', this.activityDetected, {
+        capture: true
+      });
+      this.startDelayedFeedbackHide();
+      if (this.context && typeof this.context === 'function') {
+        this.floatingLayerController = this.context(function () {});
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (
+      // Use shallow props compare instead of source comparison to support possible changes
+      // from mediaComponent.
+      (0, _util.shallowEqual)(this.props, nextProps) && !this.state.miniFeedbackVisible && this.state.miniFeedbackVisible === nextState.miniFeedbackVisible && !this.state.mediaSliderVisible && this.state.mediaSliderVisible === nextState.mediaSliderVisible && this.state.loading === nextState.loading && this.props.loading === nextProps.loading && (this.state.currentTime !== nextState.currentTime || this.state.proportionPlayed !== nextState.proportionPlayed || this.state.sliderTooltipTime !== nextState.sliderTooltipTime)) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!this.state.mediaControlsVisible && prevState.mediaControlsVisible !== this.state.mediaControlsVisible || !this.state.mediaSliderVisible && prevState.mediaSliderVisible !== this.state.mediaSliderVisible) {
+        this.floatingLayerController.notify({
+          action: 'closeAll'
+        });
+      }
+      if (this.props.spotlightId !== prevProps.spotlightId) {
+        this.mediaControlsSpotlightId = this.props.spotlightId + '_mediaControls';
+      }
+      if (!this.state.mediaControlsVisible && prevState.mediaControlsVisible) {
+        forwardControlsAvailable({
+          available: false
+        }, this.props);
+        this.stopAutoCloseTimeout();
+        if (!this.props.spotlightDisabled) {
+          // If last focused item were in the media controls or slider, we need to explicitly
+          // blur the element when MediaControls hide. See ENYO-5648
+          var current = _spotlight.Spotlight.getCurrent();
+          var bottomControls = document.querySelector(".".concat(_VideoPlayerModule["default"].bottom));
+          if (current && bottomControls && bottomControls.contains(current)) {
+            current.blur();
+          }
+
+          // when in pointer mode, the focus call below will only update the last focused for
+          // the video player and not set the active container to the video player which will
+          // cause focus to land back on the media controls button when spotlight restores
+          // focus.
+          if (_spotlight.Spotlight.getPointerMode()) {
+            _spotlight.Spotlight.setActiveContainer(this.props.spotlightId);
+          }
+
+          // Set focus to the hidden spottable control - maintaining focus on available spottable
+          // controls, which prevents an additional 5-way attempt in order to re-show media controls
+          _spotlight.Spotlight.focus(".".concat(_VideoPlayerModule["default"].controlsHandleAbove));
+        }
+      } else if (this.state.mediaControlsVisible && !prevState.mediaControlsVisible) {
+        forwardControlsAvailable({
+          available: true
+        }, this.props);
+        this.startAutoCloseTimeout();
+        if (!this.props.spotlightDisabled) {
+          var _current = _spotlight.Spotlight.getCurrent();
+          if (!_current || this.playerRef.current.contains(_current)) {
+            // Set focus within media controls when they become visible.
+            if (_spotlight.Spotlight.focus(this.mediaControlsSpotlightId) && this.jumpButtonPressed === 0) {
+              this.jumpButtonPressed = null;
+            }
+          }
+        }
+      }
+
+      // Once video starts loading it queues bottom control render until idle
+      if (this.state.bottomControlsRendered && !prevState.bottomControlsRendered && !this.state.mediaControlsVisible) {
+        this.showControls();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      (0, _dispatcher.off)('mousemove', this.activityDetected);
+      if (_platform.platform.touchEvent) {
+        (0, _dispatcher.off)('touchmove', this.activityDetected);
+      }
+      document.removeEventListener('keydown', this.handleGlobalKeyDown, {
+        capture: true
+      });
+      document.removeEventListener('wheel', this.activityDetected, {
+        capture: true
+      });
+      this.stopRewindJob();
+      this.stopAutoCloseTimeout();
+      this.stopDelayedTitleHide();
+      this.stopDelayedFeedbackHide();
+      this.stopDelayedMiniFeedbackHide();
+      this.announceJob.stop();
+      this.renderBottomControl.stop();
+      this.slider5WayPressJob.stop();
+      if (this.floatingLayerController) {
+        this.floatingLayerController.unregister();
+      }
+    }
+  }, {
+    key: "isTimeBeyondSelection",
+    value: function isTimeBeyondSelection(time) {
+      var selection = this.props.selection;
+
+      // if selection isn't set or only contains the starting value, there isn't a valid selection
+      // with which to test the time
+      if (selection != null && selection.length >= 2) {
+        var _selection = _slicedToArray(selection, 2),
+          start = _selection[0],
+          end = _selection[1];
+        return time > end || time < start;
+      }
+      return false;
+    }
+  }, {
+    key: "preventTimeChange",
+    value: function preventTimeChange(time) {
+      return this.isTimeBeyondSelection(time) && !(0, _handle.forwardWithPrevent)('onSeekOutsideSelection', {
+        type: 'onSeekOutsideSelection',
+        time: time
+      }, this.props);
+    }
+  }, {
+    key: "getControlsAriaProps",
+    value: function getControlsAriaProps() {
+      if (this.state.announce === AnnounceState.TITLE) {
+        return {
+          'aria-labelledby': "".concat(this.id, "_mediaTitle_title ").concat(this.id, "_mediaControls_actionGuide"),
+          'aria-live': 'off',
+          role: 'alert'
+        };
+      } else if (this.state.announce === AnnounceState.INFO) {
+        return {
+          'aria-labelledby': "".concat(this.id, "_mediaTitle_info"),
+          role: 'region'
+        };
+      }
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        backButtonAriaLabel = _this$props.backButtonAriaLabel,
+        className = _this$props.className,
+        disabled = _this$props.disabled,
+        infoComponents = _this$props.infoComponents,
+        initialJumpDelay = _this$props.initialJumpDelay,
+        jumpDelay = _this$props.jumpDelay,
+        loading = _this$props.loading,
+        locale = _this$props.locale,
+        mediaControlsComponent = _this$props.mediaControlsComponent,
+        no5WayJump = _this$props.no5WayJump,
+        noAutoPlay = _this$props.noAutoPlay,
+        noMiniFeedback = _this$props.noMiniFeedback,
+        noSlider = _this$props.noSlider,
+        noSpinner = _this$props.noSpinner,
+        selection = _this$props.selection,
+        includeTimeHour = _this$props.includeTimeHour,
+        spotlightDisabled = _this$props.spotlightDisabled,
+        spotlightId = _this$props.spotlightId,
+        style = _this$props.style,
+        thumbnailComponent = _this$props.thumbnailComponent,
+        thumbnailSrc = _this$props.thumbnailSrc,
+        title = _this$props.title,
+        VideoComponent = _this$props.videoComponent,
+        mediaProps = _objectWithoutProperties(_this$props, _excluded2);
+      delete mediaProps.announce;
+      delete mediaProps.autoCloseTimeout;
+      delete mediaProps.children;
+      delete mediaProps.feedbackHideDelay;
+      delete mediaProps.jumpBy;
+      delete mediaProps.miniFeedbackHideDelay;
+      delete mediaProps.noAutoShowMediaControls;
+      delete mediaProps.noMediaSliderFeedback;
+      delete mediaProps.onBack;
+      delete mediaProps.onControlsAvailable;
+      delete mediaProps.onFastForward;
+      delete mediaProps.onJumpBackward;
+      delete mediaProps.onJumpForward;
+      delete mediaProps.onPause;
+      delete mediaProps.onPlay;
+      delete mediaProps.onRewind;
+      delete mediaProps.onWillFastForward;
+      delete mediaProps.onWillJumpBackward;
+      delete mediaProps.onWillJumpForward;
+      delete mediaProps.onWillPause;
+      delete mediaProps.onWillPlay;
+      delete mediaProps.onWillRewind;
+      delete mediaProps.onScrub;
+      delete mediaProps.onSeekFailed;
+      delete mediaProps.onSeekOutsideSelection;
+      delete mediaProps.onToggleMore;
+      delete mediaProps.pauseAtEnd;
+      delete mediaProps.playbackRateHash;
+      delete mediaProps.seekDisabled;
+      delete mediaProps.setApiProvider;
+      delete mediaProps.thumbnailUnavailable;
+      delete mediaProps.titleHideDelay;
+      delete mediaProps.videoPath;
+      mediaProps.autoPlay = !noAutoPlay;
+      mediaProps.className = _VideoPlayerModule["default"].video;
+      mediaProps.controls = false;
+      mediaProps.mediaComponent = 'video';
+      mediaProps.onLoadStart = this.handleLoadStart;
+      mediaProps.onUpdate = this.handleEvent;
+      mediaProps.ref = this.setVideoRef;
+      var controlsAriaProps = this.getControlsAriaProps();
+      var proportionSelection = selection;
+      if (proportionSelection != null && this.state.duration) {
+        proportionSelection = selection.map(function (t) {
+          return t / _this2.state.duration;
+        });
+      }
+      var durFmt = getDurFmt(locale);
+      var controlsHandleAboveHoldConfig = getControlsHandleAboveHoldConfig({
+        frequency: jumpDelay,
+        time: initialJumpDelay
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootContainer, {
+        className: _VideoPlayerModule["default"].videoPlayer + ' enact-fit' + (className ? ' ' + className : ''),
+        onClick: this.activityDetected,
+        playerRef: this.playerRef,
+        spotlightDisabled: spotlightDisabled,
+        spotlightId: spotlightId,
+        style: style,
+        children: [
+        // Duplicating logic from <ComponentOverride /> until enzyme supports forwardRef
+        VideoComponent && ((typeof VideoComponent === 'function' || typeof VideoComponent === 'string') && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoComponent, _objectSpread({}, mediaProps)) || /*#__PURE__*/(0, _react.isValidElement)(VideoComponent) && (/*#__PURE__*/(0, _react.cloneElement)(VideoComponent, mediaProps))) || null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay["default"], {
+          bottomControlsVisible: this.state.mediaControlsVisible,
+          onClick: this.onVideoClick,
+          children: !noSpinner && (this.state.loading || loading) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner["default"], {
+            centered: true
+          }) : null
+        }), this.state.bottomControlsRendered ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+          className: _VideoPlayerModule["default"].fullscreen
+        }, controlsAriaProps), {}, {
+          children: [this.state.mediaControlsVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            "aria-label": backButtonAriaLabel == null ? (0, _$L["default"])('go to previous') : backButtonAriaLabel,
+            className: _VideoPlayerModule["default"].back,
+            icon: "arrowhookleft",
+            iconFlip: "auto",
+            onClick: this.handleBack
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsContainer, {
+            className: _VideoPlayerModule["default"].bottom + (this.state.mediaControlsVisible ? '' : ' ' + _VideoPlayerModule["default"].hidden) + (this.state.infoVisible ? ' ' + _VideoPlayerModule["default"].lift : ''),
+            spotlightDisabled: spotlightDisabled || !this.state.mediaControlsVisible,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackContent["default"], {
+              className: _VideoPlayerModule["default"].miniFeedback,
+              playbackRate: this.pulsedPlaybackRate || this.selectPlaybackRate(this.speedIndex),
+              playbackState: this.pulsedPlaybackState || this.prevCommand,
+              visible: this.state.miniFeedbackVisible && !noMiniFeedback,
+              children: (0, _MediaPlayer.secondsToTime)(this.state.sliderTooltipTime, durFmt, {
+                includeHour: true
+              })
+            }), this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: _VideoPlayerModule["default"].infoFrame,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaTitle["default"], {
+                id: "".concat(this.id, "_mediaTitle"),
+                infoVisible: this.state.infoVisible,
+                ref: this.setTitleRef,
+                title: title,
+                visible: this.state.titleVisible && this.state.mediaControlsVisible,
+                children: infoComponents
+              }), noSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.Times, {
+                current: this.state.currentTime,
+                total: this.state.duration,
+                formatter: durFmt,
+                includeHour: includeTimeHour
+              }) : null]
+            }) : null, noSlider ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: _VideoPlayerModule["default"].sliderContainer,
+              children: [this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.Times, {
+                noTotalTime: true,
+                current: this.state.currentTime,
+                formatter: durFmt,
+                includeHour: includeTimeHour
+              }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.MediaSlider, {
+                backgroundProgress: this.state.proportionLoaded,
+                disabled: disabled || this.state.sourceUnavailable,
+                forcePressed: this.state.slider5WayPressed,
+                onBlur: this.handleSliderBlur,
+                onChange: this.onSliderChange,
+                onFocus: this.handleSliderFocus,
+                onKeyDown: this.handleSliderKeyDown,
+                onKnobMove: this.handleKnobMove,
+                selection: proportionSelection,
+                spotlightDisabled: spotlightDisabled || !this.state.mediaControlsVisible,
+                value: this.state.proportionPlayed,
+                visible: this.state.mediaSliderVisible,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackTooltip["default"], {
+                  action: this.state.feedbackAction,
+                  duration: this.state.duration,
+                  formatter: durFmt,
+                  hidden: !this.state.feedbackVisible || this.state.sourceUnavailable,
+                  playbackRate: this.selectPlaybackRate(this.speedIndex),
+                  playbackState: this.prevCommand,
+                  thumbnailComponent: thumbnailComponent,
+                  thumbnailDeactivated: this.props.thumbnailUnavailable,
+                  thumbnailSrc: thumbnailSrc
+                })
+              }), this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.Times, {
+                noCurrentTime: true,
+                total: this.state.duration,
+                formatter: durFmt,
+                includeHour: includeTimeHour
+              }) : null]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
+              component: mediaControlsComponent,
+              id: "".concat(this.id, "_mediaControls"),
+              initialJumpDelay: initialJumpDelay,
+              jumpDelay: jumpDelay,
+              mediaDisabled: disabled || this.state.sourceUnavailable,
+              no5WayJump: no5WayJump,
+              onClose: this.handleMediaControlsClose,
+              onFastForward: this.handleFastForward,
+              onJumpBackwardButtonClick: this.onJumpBackward,
+              onJumpForwardButtonClick: this.onJumpForward,
+              onPause: this.handlePause,
+              onPlay: this.handlePlay,
+              onRewind: this.handleRewind,
+              onToggleMore: this.handleToggleMore,
+              paused: this.state.paused,
+              spotlightId: this.mediaControlsSpotlightId,
+              spotlightDisabled: !this.state.mediaControlsVisible || spotlightDisabled,
+              visible: this.state.mediaControlsVisible
+            })]
+          })]
+        })) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableDiv
+        // This captures spotlight focus for use with 5-way.
+        // It's non-visible but lives at the top of the VideoPlayer.
+        , {
+          className: _VideoPlayerModule["default"].controlsHandleAbove,
+          holdConfig: controlsHandleAboveHoldConfig,
+          onDown: this.handleControlsHandleAboveDown,
+          onHold: this.handleControlsHandleAboveHold,
+          onKeyDown: this.handleControlsHandleAboveKeyDown,
+          onKeyUp: this.handleControlsHandleAboveKeyUp,
+          onSpotlightDown: this.showControls,
+          selectionKeys: controlsHandleAboveSelectionKeys,
+          spotlightDisabled: this.state.mediaControlsVisible || spotlightDisabled
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Announce["default"], {
+          ref: this.setAnnounceRef
+        })]
+      });
+    }
+  }]);
+}(_react.Component), _Class.displayName = 'VideoPlayerBase', _Class.propTypes = /** @lends limestone/VideoPlayer.VideoPlayerBase.prototype */{
+  /**
+   * passed by AnnounceDecorator for accessibility
+   *
+   * @type {Function}
+   * @private
+   */
+  announce: _propTypes2["default"].func,
+  /**
+   * The time (in milliseconds) before the control buttons will hide.
+   *
+   * Setting this to 0 or `null` disables closing, requiring user input to open and close.
+   *
+   * @type {Number}
+   * @default 5000
+   * @public
+   */
+  autoCloseTimeout: _propTypes2["default"].number,
+  /**
+   * Sets the hint string read when focusing the back button.
+   *
+   * @type {String}
+   * @default 'go to previous'
+   * @public
+   */
+  backButtonAriaLabel: _propTypes2["default"].string,
+  /**
+   * Removes interactive capability from this component. This includes, but is not limited to,
+   * key-press events, most clickable buttons, and prevents the showing of the controls.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  disabled: _propTypes2["default"].bool,
+  /**
+   * Amount of time (in milliseconds) after which the feedback text/icon part of the slider's
+   * tooltip will automatically hidden after the last action.
+   * Setting this to 0 or `null` disables feedbackHideDelay; feedback will always be present.
+   *
+   * @type {Number}
+   * @default 3000
+   * @public
+   */
+  feedbackHideDelay: _propTypes2["default"].number,
+  /**
+   * Checks if current time and total time should include the hour.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  includeTimeHour: _propTypes2["default"].bool,
+  /**
+   * Components placed below the title.
+   *
+   * Typically, these will be media descriptor icons, like how many audio channels, what codec
+   * the video uses, but can also be a description for the video or anything else that seems
+   * appropriate to provide information about the video to the user.
+   *
+   * @type {Node}
+   * @public
+   */
+  infoComponents: _propTypes2["default"].node,
+  /**
+   * The number of milliseconds that the player will pause before firing the
+   * first jump event on a right or left pulse.
+   *
+   * @type {Number}
+   * @default 400
+   * @public
+   */
+  initialJumpDelay: _propTypes2["default"].number,
+  /**
+   * The number of seconds the player should skip forward or backward when a "jump" button is
+   * pressed.
+   *
+   * @type {Number}
+   * @default 30
+   * @public
+   */
+  jumpBy: _propTypes2["default"].number,
+  /**
+   * The number of milliseconds that the player will throttle before firing a
+   * jump event on a right or left pulse.
+   *
+   * @type {Number}
+   * @default 200
+   * @public
+   */
+  jumpDelay: _propTypes2["default"].number,
+  /**
+   * Manually set the loading state of the media, in case you have information that
+   * `VideoPlayer` does not have.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  loading: _propTypes2["default"].bool,
+  /**
+   * The current locale as a
+   * {@link https://tools.ietf.org/html/rfc5646|BCP 47 language tag}.
+   *
+   * @type {String}
+   * @public
+   */
+  locale: _propTypes2["default"].string,
+  /**
+   * Overrides the default media control component to support customized behaviors.
+   *
+   * The provided component will receive the following props from `VideoPlayer`:
+   *
+   * * `initialJumpDelay` - Time (in ms) to wait before starting a jump
+   * * `jumpDelay` -  - Time (in ms) to wait between jumps
+   * * `mediaDisabled` - `true` when the media controls are not interactive
+   * * `no5WayJump` - `true` when 5-way jumping is disabled
+   * * `onClose` - Called when cancel key is pressed when the media controls are visible
+   * * `onFastForward` - Called when the media is fast forwarded via a key event
+   * * `onJump` - Called when the media jumps either forward or backward
+   * * `onJumpBackwardButtonClick` - Called when the jump backward button is pressed
+   * * `onJumpForwardButtonClick` - Called when the jump forward button is pressed
+   * * `onKeyDown` - Called when a key is pressed
+   * * `onPause` - Called when the media is paused via a key event
+   * * `onPlay` - Called when the media is played via a key event
+   * * `onRewind` - Called when the media is rewound via a key event
+   * * `onToggleMore` - Called when the more components are hidden or shown
+   * * `paused` - `true` when the media is paused
+   * * `spotlightId` - The spotlight container Id for the media controls
+   * * `spotlightDisabled` - `true` when spotlight is disabled for the media controls
+   * * `visible` - `true` when the media controls should be displayed
+   *
+   * @type {Component|Element}
+   * @default limestone/MediaPlayer.MediaControls
+   * @public
+   */
+  mediaControlsComponent: _propTypes["default"].componentOverride,
+  /**
+   * Amount of time (in milliseconds), after the last user action, that the `miniFeedback`
+   * will automatically hide.
+   * Setting this to 0 or `null` disables `miniFeedbackHideDelay`; `miniFeedback` will always
+   * be present.
+   *
+   * @type {Number}
+   * @default 2000
+   * @public
+   */
+  miniFeedbackHideDelay: _propTypes2["default"].number,
+  /**
+   * Disable audio for this video.
+   *
+   * In a TV context, this is handled by the remote control, not programmatically in the
+   * VideoPlayer API.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  muted: _propTypes2["default"].bool,
+  /**
+   * Prevents the default behavior of using left and right keys for seeking.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  no5WayJump: _propTypes2["default"].bool,
+  /**
+   * Prevents the default behavior of playing a video immediately after it's loaded.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noAutoPlay: _propTypes2["default"].bool,
+  /**
+   * Prevents the default behavior of showing media controls immediately after it's loaded.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noAutoShowMediaControls: _propTypes2["default"].bool,
+  /**
+   * Hides media slider feedback when fast-forward or rewind while media controls are hidden.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noMediaSliderFeedback: _propTypes2["default"].bool,
+  /**
+   * Removes the mini feedback.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noMiniFeedback: _propTypes2["default"].bool,
+  /**
+   * Removes the media slider.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noSlider: _propTypes2["default"].bool,
+  /**
+   * Removes spinner while loading.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  noSpinner: _propTypes2["default"].bool,
+  /**
+   * Called when the back button is clicked.
+   *
+   * @type {Function}
+   * @public
+   */
+  onBack: _propTypes2["default"].func,
+  /**
+   * Called when the player's controls change availability, whether they are shown
+   * or hidden.
+   *
+   * The current status is sent as the first argument in an object with a key `available`
+   * which will be either `true` or `false`. (e.g.: `onControlsAvailable({available: true})`)
+   *
+   * @type {Function}
+   * @public
+   */
+  onControlsAvailable: _propTypes2["default"].func,
+  /**
+   * Called when the video has been fast forwarded.
+   *
+   * @type {Function}
+   * @public
+   */
+  onFastForward: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the JumpBackward button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onJumpBackward: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the JumpForward button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onJumpForward: _propTypes2["default"].func,
+  /**
+   * Called when the video has been paused.
+   *
+   * @type {Function}
+   * @public
+   */
+  onPause: _propTypes2["default"].func,
+  /**
+   * Called when the video has been played.
+   *
+   * @type {Function}
+   * @public
+   */
+  onPlay: _propTypes2["default"].func,
+  /**
+   * Called when the video has been rewound.
+   *
+   * @type {Function}
+   * @public
+   */
+  onRewind: _propTypes2["default"].func,
+  /**
+   * Called when the user is moving the VideoPlayer's Slider knob independently of
+   * the current playback position.
+   *
+   * It is passed an object with a `seconds` key (float value) to indicate the current time
+   * index. It can be used to update the `thumbnailSrc` to reflect the current scrub
+   * position.
+   *
+   * @type {Function}
+   * @public
+   */
+  onScrub: _propTypes2["default"].func,
+  /**
+   * Called when seek is attempted while `seekDisabled` is true.
+   *
+   * @type {Function}
+   */
+  onSeekFailed: _propTypes2["default"].func,
+  /**
+   * Called when seeking outside of the current `selection` range.
+   *
+   * By default, the seek will still be performed. Calling `preventDefault()` on the event
+   * will prevent the seek operation.
+   *
+   * @type {Function}
+   * @public
+   */
+  onSeekOutsideSelection: _propTypes2["default"].func,
+  /**
+   * Called when the visibility of more components is changed
+   *
+   * Event payload includes:
+   *
+   * * `type` - Type of event, `'onToggleMore'`
+   * * `showMoreComponents` - `true` when the components are visible`
+   * * `liftDistance` - The distance, in pixels, the component animates
+   *`
+   * @type {Function}
+   * @public
+   */
+  onToggleMore: _propTypes2["default"].func,
+  /**
+   * Called once before the video is forwarded.
+   *
+   * @type {Function}
+   * @public
+   */
+  onWillFastForward: _propTypes2["default"].func,
+  /**
+    * Called once before the video is jump backwarded.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillJumpBackward: _propTypes2["default"].func,
+  /**
+    * Called once before the video is jump forwarded.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillJumpForward: _propTypes2["default"].func,
+  /**
+    * Called once before the video is paused.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillPause: _propTypes2["default"].func,
+  /**
+    * Called once before the video is played
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillPlay: _propTypes2["default"].func,
+  /**
+    * Called once before the video is rewound.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillRewind: _propTypes2["default"].func,
+  /**
+   * Pauses the video when it reaches either the start or the end of the video during rewind,
+   * slow rewind, fast-forward, or slow forward.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  pauseAtEnd: _propTypes2["default"].bool,
+  /**
+   * Mapping of playback rate names to playback rate values that may be set.
+   *
+   * @type {limestone/VideoPlayer.playbackRateHash}
+   * @default {
+   *	fastForward: ['2', '4', '8', '16'],
+   *	rewind: ['-2', '-4', '-8', '-16'],
+   *	slowForward: ['1/4', '1/2'],
+   *	slowRewind: ['-1/2', '-1']
+   * }
+   * @public
+   */
+  playbackRateHash: _propTypes2["default"].shape({
+    fastForward: _propTypes2["default"].arrayOf(_propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number])),
+    rewind: _propTypes2["default"].arrayOf(_propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number])),
+    slowForward: _propTypes2["default"].arrayOf(_propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number])),
+    slowRewind: _propTypes2["default"].arrayOf(_propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]))
+  }),
+  /**
+   * Disables seek function.
+   *
+   * Note that jump by arrow keys will also be disabled when `true`.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  seekDisabled: _propTypes2["default"].bool,
+  /**
+   * A range of the video to display as selected.
+   *
+   * The value of `selection` may either be:
+   * * `null` or `undefined` for no selection,
+   * * a single-element array with the start time of the selection
+   * * a two-element array containing both the start and end time of the selection in seconds
+   *
+   * When the start time is specified, the media slider will show filled starting at that
+   * time to the current time.
+   *
+   * When the end time is specified, the slider's background will be filled between the two
+   * times.
+   *
+   * @type {Number[]}
+   * @public
+   */
+  selection: _propTypes2["default"].arrayOf(_propTypes2["default"].number),
+  /**
+   * Registers the VideoPlayer component with an
+   * {@link core/internal/ApiDecorator.ApiDecorator}.
+   *
+   * @type {Function}
+   * @private
+   */
+  setApiProvider: _propTypes2["default"].func,
+  /**
+   * The video source.
+   *
+   * Any children `<source>` tag elements of {@link limestone/VideoPlayer|VideoPlayer} will
+   * be sent directly to the `videoComponent` as video sources.
+   *
+   * @type {Node}
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
+   * @public
+   */
+  source: _propTypes2["default"].node,
+  /**
+   * Disables spotlight navigation into the component.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  spotlightDisabled: _propTypes2["default"].bool,
+  /**
+   * The spotlight container ID for the player.
+   *
+   * @type {String}
+   * @public
+   * @default 'videoPlayer'
+   */
+  spotlightId: _propTypes2["default"].string,
+  /**
+   * The thumbnail component to be used instead of the built-in version.
+   *
+   * The internal thumbnail style will not be applied to this component. This component
+   * follows the same rules as the built-in version.
+   *
+   * @type {String|Component|Element}
+   * @public
+   */
+  thumbnailComponent: _propTypes["default"].renderableOverride,
+  /**
+   * Thumbnail image source to show on the slider knob.
+   *
+   * This is a standard {@link limestone/Image} component so it supports all the same
+   * options for the `src` property. If no `thumbnailComponent` and no `thumbnailSrc` is set,
+   * no tooltip will display.
+   *
+   * @type {String|Object}
+   * @public
+   */
+  thumbnailSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+  /**
+  * Enables the thumbnail transition from opaque to translucent.
+  *
+  * @type {Boolean}
+  * @public
+  */
+  thumbnailUnavailable: _propTypes2["default"].bool,
+  /**
+   * Title for the video being played.
+   *
+   * @type {String|Node}
+   * @public
+   */
+  title: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].node]),
+  /**
+   * The time (in milliseconds) before the title disappears from the controls.
+   *
+   * Setting this to `0` disables hiding.
+   *
+   * @type {Number}
+   * @default 5000
+   * @public
+   */
+  titleHideDelay: _propTypes2["default"].number,
+  /**
+   * Video component to use.
+   *
+   * The default renders an `HTMLVideoElement`. Custom video components must have a similar
+   * API structure, exposing the following APIs:
+   *
+   * Properties:
+   * * `currentTime` {Number} - Playback index of the media in seconds
+   * * `duration` {Number} - Media's entire duration in seconds
+   * * `error` {Boolean} - `true` if video playback has errored.
+   * * `loading` {Boolean} - `true` if video playback is loading.
+   * * `paused` {Boolean} - Playing vs paused state. `true` means the media is paused
+   * * `playbackRate` {Number} - Current playback rate, as a number
+   * * `proportionLoaded` {Number} - A value between `0` and `1`
+   *	representing the proportion of the media that has loaded
+   * * `proportionPlayed` {Number} - A value between `0` and `1` representing the
+   *	proportion of the media that has already been shown
+   *
+   * Events:
+   * * `onLoadStart` - Called when the video starts to load
+   * * `onUpdate` - Sent when any of the properties were updated
+   *
+   * Methods:
+   * * `play()` - play video
+   * * `pause()` - pause video
+   * * `load()` - load video
+   *
+   * The {@link limestone/VideoPlayer.Video.source|source} property is passed to
+   * the video component as a child node.
+   *
+   * @type {Component|Element}
+   * @default {@link ui/Media.Media}
+   * @public
+   */
+  videoComponent: _propTypes["default"].componentOverride
+}, _Class.contextType = _FloatingLayerDecorator.FloatingLayerContext, _Class.defaultProps = {
+  autoCloseTimeout: 5000,
+  feedbackHideDelay: 3000,
+  includeTimeHour: false,
+  initialJumpDelay: 400,
+  jumpBy: 30,
+  jumpDelay: 200,
+  mediaControlsComponent: _MediaPlayer.MediaControls,
+  miniFeedbackHideDelay: 2000,
+  playbackRateHash: {
+    fastForward: ['2', '4', '8', '16'],
+    rewind: ['-2', '-4', '-8', '-16'],
+    slowForward: ['1/4', '1/2'],
+    slowRewind: ['-1/2', '-1']
+  },
+  spotlightId: 'videoPlayer',
+  titleHideDelay: 5000,
+  videoComponent: _Media["default"]
+}, _Class);
+
+/**
+ * A standard HTML5 video player for Limestone. It behaves, responds to, and operates like a
+ * `<video>` tag in its support for `<source>`.  It also accepts custom tags such as
+ * `<infoComponents>` for displaying additional information in the title area and `<MediaControls>`
+ * for handling media playback controls and adding more controls.
+ *
+ * Example usage:
+ * ```
+ *	<VideoPlayer title="Hilarious Cat Video" poster="https://my.cat.videos/boots-poster.jpg">
+ *		<source src="https://my.cat.videos/boots.mp4" type="video/mp4" />
+ *		<infoComponents>A video about my cat Boots, wearing boots.</infoComponents>
+ *		<MediaControls>
+ *			<leftComponents><Button backgroundOpacity="translucent" icon="star" /></leftComponents>
+ *			<rightComponents><Button backgroundOpacity="translucent" icon="notification" /></rightComponents>
+ *
+ *			<Button backgroundOpacity="translucent">Add To Favorites</Button>
+ *			<Button backgroundOpacity="translucent" icon="search" />
+ *		</MediaControls>
+ *	</VideoPlayer>
+ * ```
+ *
+ * To invoke methods (e.g.: `fastForward()`) or get the current state (`getMediaState()`), store a
+ * ref to the `VideoPlayer` within your component:
+ *
+ * ```
+ * 	...
+ *
+ * 	setVideoPlayer = (node) => {
+ * 		this.videoPlayer = node;
+ * 	}
+ *
+ * 	play () {
+ * 		this.videoPlayer.play();
+ * 	}
+ *
+ * 	render () {
+ * 		return (
+ * 			<VideoPlayer ref={this.setVideoPlayer} />
+ * 		);
+ * 	}
+ * ```
+ *
+ * @class VideoPlayer
+ * @memberof limestone/VideoPlayer
+ * @mixes ui/Slottable.Slottable
+ * @ui
+ * @public
+ */
+var VideoPlayer = exports.VideoPlayer = (0, _ApiDecorator["default"])({
+  api: ['areControlsVisible', 'fastForward', 'getMediaState', 'getVideoNode', 'hideControls', 'jump', 'pause', 'play', 'rewind', 'seek', 'setPlaybackSpeed', 'showControls', 'showFeedback', 'toggleControls']
+}, (0, _I18nDecorator.I18nContextDecorator)({
+  localeProp: 'locale'
+}, (0, _Slottable["default"])({
+  slots: ['infoComponents', 'mediaControlsComponent', 'source', 'thumbnailComponent', 'videoComponent']
+}, (0, _FloatingLayer.FloatingLayerDecorator)({
+  floatLayerId: 'videoPlayerFloatingLayer'
+}, (0, _Skinnable["default"])(VideoPlayerBase)))));
+var _default = exports["default"] = VideoPlayer;