@enact/limestone 1.3.0 → 1.10.0

package/VideoPlayer/VideoPlayer.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "Video", {
 exports["default"] = exports.VideoPlayerBase = exports.VideoPlayer = void 0;
 var _ApiDecorator = _interopRequireDefault(require("@enact/core/internal/ApiDecorator"));
 var _dispatcher = require("@enact/core/dispatcher");
+var _deprecate = _interopRequireDefault(require("@enact/core/internal/deprecate"));
 var _util = require("@enact/core/util");
 var _handle = require("@enact/core/handle");
 var _keymap = require("@enact/core/keymap");
@@ -107,14 +108,15 @@ 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);
+var _RootComponent = function RootComponent(props) {
+  (0, _util.checkPropTypes)(_RootComponent, props);
+  var playerRef = props.playerRef,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
     ref: playerRef
   }, rest));
 };
-RootComponent.propTypes = {
+_RootComponent.propTypes = {
   /*
    * Called with the reference to the mediaControls node.
    *
@@ -127,7 +129,7 @@ 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);
+}, _RootComponent);
 var ControlsContainer = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
   enterTo: 'default-element',
   straightOnly: true
@@ -167,6 +169,10 @@ var forwardJumpBackward = forwardWithState('onJumpBackward');
 var forwardWillJumpBackward = forwardWithState('onWillJumpBackward');
 var forwardJumpForward = forwardWithState('onJumpForward');
 var forwardWillJumpForward = forwardWithState('onWillJumpForward');
+var forwardPrevious = forwardWithState('onPrevious');
+var forwardWillPrevious = forwardWithState('onWillPrevious');
+var forwardNext = forwardWithState('onNext');
+var forwardWillNext = forwardWithState('onWillNext');
 var AnnounceState = {
   // Video is loaded but additional announcements have not been made
   READY: 0,
@@ -179,6 +185,10 @@ var AnnounceState = {
   // All announcements have been made
   DONE: 4
 };
+var warnedOnJumpBackward = false;
+var warnedOnJumpForward = false;
+var warnedOnWillJumpBackward = false;
+var warnedOnWillJumpForward = false;
 
 /**
  * Every callback sent by {@link limestone/VideoPlayer|VideoPlayer} receives a status package,
@@ -291,8 +301,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       }
       _this.startDelayedFeedbackHide();
       _this.startDelayedTitleHide();
-      _this.setState(function (_ref5) {
-        var announce = _ref5.announce;
+      _this.setState(function (_ref4) {
+        var announce = _ref4.announce;
         if (announce === AnnounceState.READY) {
           // if we haven't read the title yet, do so this time
           announce = AnnounceState.TITLE;
@@ -351,9 +361,9 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.doAutoClose = function () {
       _this.stopDelayedFeedbackHide();
       _this.stopDelayedTitleHide();
-      _this.setState(function (_ref6) {
-        var mediaSliderVisible = _ref6.mediaSliderVisible,
-          miniFeedbackVisible = _ref6.miniFeedbackVisible;
+      _this.setState(function (_ref5) {
+        var mediaSliderVisible = _ref5.mediaSliderVisible,
+          miniFeedbackVisible = _ref5.miniFeedbackVisible;
         return {
           feedbackVisible: false,
           mediaControlsVisible: false,
@@ -394,10 +404,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       } 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;
+          _this.setState(function (_ref6) {
+            var loading = _ref6.loading,
+              duration = _ref6.duration,
+              error = _ref6.error;
             return {
               mediaSliderVisible: shouldShowSlider && !_this.props.noMediaSliderFeedback,
               miniFeedbackVisible: !(loading || !duration || error)
@@ -481,8 +491,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.handleFastForward = _this.handle(forwardWillFastForward, _this.shouldShowMiniFeedback, function () {
       return _this.fastForward();
     }, forwardFastForward);
-    _this.handleJump = function (_ref8) {
-      var keyCode = _ref8.keyCode;
+    _this.handleJump = function (_ref7) {
+      var keyCode = _ref7.keyCode;
       if (_this.props.seekDisabled) {
         (0, _handle.forwardCustom)('onSeekFailed')(null, _this.props);
       } else {
@@ -502,31 +512,31 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.handleControlsHandleAboveHold = function () {
       if (shouldJump(_this.props, _this.state)) {
         _this.handleJump({
-          keyCode: _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode
+          keyCode: _this.jumpKeyPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode
         });
       }
     };
-    _this.handleControlsHandleAboveKeyDown = function (_ref9) {
-      var keyCode = _ref9.keyCode;
+    _this.handleControlsHandleAboveKeyDown = function (_ref8) {
+      var keyCode = _ref8.keyCode;
       if (isEnter(keyCode)) {
-        _this.jumpButtonPressed = 0;
+        _this.jumpKeyPressed = 0;
       } else if (isLeft(keyCode)) {
-        _this.jumpButtonPressed = -1;
+        _this.jumpKeyPressed = -1;
       } else if (isRight(keyCode)) {
-        _this.jumpButtonPressed = 1;
+        _this.jumpKeyPressed = 1;
       }
     };
-    _this.handleControlsHandleAboveKeyUp = function (_ref0) {
-      var keyCode = _ref0.keyCode;
+    _this.handleControlsHandleAboveKeyUp = function (_ref9) {
+      var keyCode = _ref9.keyCode;
       if (isEnter(keyCode) || isLeft(keyCode) || isRight(keyCode)) {
-        _this.jumpButtonPressed = null;
+        _this.jumpKeyPressed = null;
       }
     };
     _this.handleControlsHandleAboveDown = function () {
-      if (_this.jumpButtonPressed === 0) {
+      if (_this.jumpKeyPressed === 0) {
         _this.showControls();
-      } else if (_this.jumpButtonPressed === -1 || _this.jumpButtonPressed === 1) {
-        var keyCode = _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode;
+      } else if (_this.jumpKeyPressed === -1 || _this.jumpKeyPressed === 1) {
+        var keyCode = _this.jumpKeyPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode;
         if (shouldJump(_this.props, _this.state)) {
           _this.handleJump({
             keyCode: keyCode
@@ -694,6 +704,14 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       _this.startDelayedMiniFeedbackHide();
       return true;
     };
+    _this.next = function () {
+      // next api will be implemented in 2.0.0.
+      return true;
+    };
+    _this.previous = function () {
+      // previous api will be implemented in 2.0.0.
+      return true;
+    };
     /**
      * Fast forwards the current media for seeking.
      * This function changes the playback rate.
@@ -980,8 +998,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.onVideoClick = function () {
       _this.toggleControls();
     };
-    _this.onSliderChange = function (_ref1) {
-      var value = _ref1.value;
+    _this.onSliderChange = function (_ref0) {
+      var value = _ref0.value;
       var time = value * _this.state.duration;
       if (_this.preventTimeChange(time)) return;
       _this.seek(time);
@@ -1066,6 +1084,12 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.onJumpForward = _this.handle(forwardWillJumpForward, function () {
       return _this.jump(_this.props.jumpBy);
     }, forwardJumpForward);
+    _this.onNext = _this.props.onWillNext || _this.props.onNext ? _this.handle(forwardWillNext,
+    // () => this.next(),
+    forwardNext) : null;
+    _this.onPrevious = _this.props.onWillPrevious || _this.props.onPrevious ? _this.handle(forwardWillPrevious,
+    // () => this.previous(),
+    forwardPrevious) : null;
     _this.handleToggleMore = function (ev) {
       var showMoreComponents = ev.showMoreComponents,
         liftDistance = ev.liftDistance;
@@ -1079,8 +1103,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
         _this.stopDelayedTitleHide();
       }
       _this.playerRef.current.style.setProperty('--liftDistance', "".concat(liftDistance, "px"));
-      _this.setState(function (_ref10) {
-        var announce = _ref10.announce;
+      _this.setState(function (_ref1) {
+        var announce = _ref1.announce;
         return {
           infoVisible: showMoreComponents,
           titleVisible: true,
@@ -1112,7 +1136,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.selectPlaybackRates('fastForward');
     _this.sliderKnobProportion = 0;
     _this.mediaControlsSpotlightId = _props.spotlightId + '_mediaControls';
-    _this.jumpButtonPressed = null;
+    _this.jumpKeyPressed = null;
     _this.playerRef = /*#__PURE__*/(0, _react.createRef)();
     _this.playbackRate = 1;
 
@@ -1221,8 +1245,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
           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;
+            if (_spotlight.Spotlight.focus(this.mediaControlsSpotlightId) && this.jumpKeyPressed === 0) {
+              this.jumpKeyPressed = null;
             }
           }
         }
@@ -1327,6 +1351,38 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
         title = _this$props.title,
         VideoComponent = _this$props.videoComponent,
         mediaProps = _objectWithoutProperties(_this$props, _excluded2);
+      if (!warnedOnJumpBackward && mediaProps.onJumpBackward) {
+        (0, _deprecate["default"])({
+          name: '`onJumpBackward`',
+          until: '2.0.0',
+          message: 'Use `onPrevious` instead'
+        });
+        warnedOnJumpBackward = true;
+      }
+      if (!warnedOnJumpForward && mediaProps.onJumpForward) {
+        (0, _deprecate["default"])({
+          name: '`onJumpForward`',
+          until: '2.0.0',
+          message: 'Use `onNext` instead'
+        });
+        warnedOnJumpForward = true;
+      }
+      if (!warnedOnWillJumpBackward && mediaProps.onWillJumpBackward) {
+        (0, _deprecate["default"])({
+          name: '`onWillJumpBackward`',
+          until: '2.0.0',
+          message: 'Use `onWillPrevious` instead'
+        });
+        warnedOnWillJumpBackward = true;
+      }
+      if (!warnedOnWillJumpForward && mediaProps.onWillJumpForward) {
+        (0, _deprecate["default"])({
+          name: '`onWillJumpForward`',
+          until: '2.0.0',
+          message: 'Use `onWillPrevious` instead'
+        });
+        warnedOnWillJumpForward = true;
+      }
       delete mediaProps.announce;
       delete mediaProps.autoCloseTimeout;
       delete mediaProps.children;
@@ -1340,14 +1396,18 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       delete mediaProps.onFastForward;
       delete mediaProps.onJumpBackward;
       delete mediaProps.onJumpForward;
+      delete mediaProps.onNext;
       delete mediaProps.onPause;
       delete mediaProps.onPlay;
+      delete mediaProps.onPrevious;
       delete mediaProps.onRewind;
       delete mediaProps.onWillFastForward;
       delete mediaProps.onWillJumpBackward;
       delete mediaProps.onWillJumpForward;
+      delete mediaProps.onWillNext;
       delete mediaProps.onWillPause;
       delete mediaProps.onWillPlay;
+      delete mediaProps.onWillPrevious;
       delete mediaProps.onWillRewind;
       delete mediaProps.onScrub;
       delete mediaProps.onSeekFailed;
@@ -1402,19 +1462,20 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
             className: _VideoPlayerModule["default"].back,
             icon: "arrowhookleft",
             iconFlip: "auto",
-            onClick: this.handleBack
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsContainer, {
+            onClick: this.handleBack,
+            size: "small"
+          }) : null, /*#__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: false
+            })
+          }), /*#__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", {
+            children: [this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: _VideoPlayerModule["default"].infoFrame,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaTitle["default"], {
                 id: "".concat(this.id, "_mediaTitle"),
@@ -1437,6 +1498,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
                 formatter: durFmt,
                 includeHour: includeTimeHour
               }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.MediaSlider, {
+                "aria-valuetext": " ",
                 backgroundProgress: this.state.proportionLoaded,
                 disabled: disabled || this.state.sourceUnavailable,
                 forcePressed: this.state.slider5WayPressed,
@@ -1477,8 +1539,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
               onFastForward: this.handleFastForward,
               onJumpBackwardButtonClick: this.onJumpBackward,
               onJumpForwardButtonClick: this.onJumpForward,
+              onNextButtonClick: this.onNext,
               onPause: this.handlePause,
               onPlay: this.handlePlay,
+              onPreviousButtonClick: this.onPrevious,
               onRewind: this.handleRewind,
               onToggleMore: this.handleToggleMore,
               paused: this.state.paused,
@@ -1627,8 +1691,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * * `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
+   * * `onNextButtonClick` - Called when the next button is pressed
    * * `onPause` - Called when the media is paused via a key event
    * * `onPlay` - Called when the media is played via a key event
+   * * `onPreviousButtonClick` - Called when the previous button is pressed
    * * `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
@@ -1748,6 +1814,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
    *
    * @type {Function}
+   * @deprecated Will be removed in 2.0.0. Use `onPrevious` instead.
    * @public
    */
   onJumpBackward: _propTypes2["default"].func,
@@ -1757,9 +1824,19 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
    *
    * @type {Function}
+   * @deprecated Will be removed in 2.0.0. Use `onNext` instead.
    * @public
    */
   onJumpForward: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the next button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onNext: _propTypes2["default"].func,
   /**
    * Called when the video has been paused.
    *
@@ -1774,6 +1851,15 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * @public
    */
   onPlay: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the previous button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onPrevious: _propTypes2["default"].func,
   /**
    * Called when the video has been rewound.
    *
@@ -1835,6 +1921,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
     *
     * @type {Function}
+    * @deprecated Will be removed in 2.0.0. Use `onWillPrevious` instead.
     * @public
     */
   onWillJumpBackward: _propTypes2["default"].func,
@@ -1844,9 +1931,19 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
     *
     * @type {Function}
+    * @deprecated Will be removed in 2.0.0. Use `onWillNext` instead.
     * @public
     */
   onWillJumpForward: _propTypes2["default"].func,
+  /**
+    * Called once before playing the next video in the playlist.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillNext: _propTypes2["default"].func,
   /**
     * Called once before the video is paused.
     *
@@ -1861,6 +1958,15 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * @public
     */
   onWillPlay: _propTypes2["default"].func,
+  /**
+    * Called once before playing the previous video in the playlist.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillPrevious: _propTypes2["default"].func,
   /**
     * Called once before the video is rewound.
     *
@@ -2105,7 +2211,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
  * @public
  */
 var VideoPlayer = exports.VideoPlayer = (0, _ApiDecorator["default"])({
-  api: ['areControlsVisible', 'fastForward', 'getMediaState', 'getVideoNode', 'hideControls', 'jump', 'pause', 'play', 'rewind', 'seek', 'setPlaybackSpeed', 'showControls', 'showFeedback', 'toggleControls']
+  api: ['areControlsVisible', 'fastForward', 'getMediaState', 'getVideoNode', 'hideControls', 'jump', 'next', 'pause', 'play', 'previous', 'rewind', 'seek', 'setPlaybackSpeed', 'showControls', 'showFeedback', 'toggleControls']
 }, (0, _I18nDecorator.I18nContextDecorator)({
   localeProp: 'locale'
 }, (0, _Slottable["default"])({

package/VideoPlayer/VideoPlayer.module.css

@@ -27,34 +27,45 @@
   transform-origin: bottom;
 }
 .videoPlayer .fullscreen .miniFeedback {
+  position: absolute;
   display: inline-flex;
   align-items: center;
-  font-size: var(--primitive-font-size-60);
+  justify-content: center;
+  font-size: var(--primitive-font-size-66);
   font-weight: var(--primitive-font-weight-regular);
-  height: 3.5rem;
-  line-height: 1.4em;
-  margin-bottom: 1.5rem;
-  z-index: 50;
+  height: 1.75rem;
+  padding: var(--primitive-spacing-18) var(--primitive-spacing-60);
+  line-height: 1.75rem;
+  margin-bottom: var(--primitive-spacing-72);
+  z-index: 100;
+  top: var(--primitive-spacing-102);
   bottom: auto;
   pointer-events: none;
+  left: 5.75rem;
+  right: initial;
+}
+:global(.enact-locale-right-to-left) .videoPlayer .fullscreen .miniFeedback {
+  left: initial;
+  right: 5.75rem;
 }
 .videoPlayer .fullscreen .back {
+  margin: 0;
   position: absolute;
   z-index: 100;
-  top: 2.125rem;
-  left: 2.75rem;
+  top: var(--primitive-spacing-102);
+  left: var(--primitive-spacing-132);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .videoPlayer .fullscreen .back {
   left: initial;
-  right: 2.75rem;
+  right: var(--primitive-spacing-132);
 }
 .videoPlayer .fullscreen .bottom {
   position: absolute;
   z-index: 100;
   bottom: 0;
-  left: 2.75rem;
-  right: 2.75rem;
+  left: var(--primitive-spacing-132);
+  right: var(--primitive-spacing-132);
 }
 .videoPlayer .fullscreen .bottom.lift {
   transform: translateY(calc(var(--liftDistance) * -1));
@@ -73,7 +84,7 @@
 .videoPlayer .fullscreen .bottom .infoFrame {
   display: flex;
   padding: var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--primitive-spacing-60);
 }
 .videoPlayer .fullscreen .bottom .sliderContainer {
   display: flex;
@@ -96,6 +107,7 @@
   left: 0;
 }
 .videoPlayer:global(.neutral) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.neutral) .fullscreen .bottom {
@@ -105,6 +117,7 @@
   background: linear-gradient(180deg, transparent 0%, #000 100%);
 }
 :global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .bottom {
@@ -114,6 +127,7 @@
   background: linear-gradient(180deg, transparent 0%, #000 100%);
 }
 .videoPlayer:global(.light) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.light) .fullscreen .bottom {
@@ -128,6 +142,7 @@
   --semantic-color-on-surface-main-focused: #e6e6e6;
 }
 .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.game) .fullscreen .bottom {
@@ -141,6 +156,7 @@
   --semantic-color-surface-default-focused: #3ea07d;
 }
 :global(.green) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.green) .videoPlayer:global(.game) .fullscreen .bottom {
@@ -154,6 +170,7 @@
   --semantic-color-surface-default-focused: #b85f23;
 }
 :global(.orange) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.orange) .videoPlayer:global(.game) .fullscreen .bottom {

package/VirtualList/VirtualList.d.ts

@@ -50,6 +50,10 @@ this.scrollTo({align: 'top'}); // scroll to the top
 ```
  */
   cbScrollTo?: Function;
+  /**
+   * When this value is  `true` , scrolling in a VirtualList with holding a 5-way key continues to outer Scoller.
+   */
+  continue5WayHold?: boolean;
   /**
    * Disable voice control feature of component.
    */
@@ -201,8 +205,7 @@ export class VirtualList extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, VirtualListProps>
 > {}
 
-export interface VirtualGridListProps
-  extends ui_VirtualList_VirtualListBasicProps {
+export interface VirtualGridListProps extends ui_VirtualList_VirtualListBasicProps {
   /**
  * Size of an item for the VirtualGridList; valid value is an object that has  `minWidth` 
 and  `minHeight`  as properties.
@@ -247,6 +250,10 @@ this.scrollTo({align: 'top'}); // scroll to the top
 ```
  */
   cbScrollTo?: Function;
+  /**
+   * When this value is  `true` , scrolling in a VirtualGridList with holding a 5-way key continues to outer Scroller.
+   */
+  continue5WayHold?: boolean;
   /**
    * Disable voice control feature of component.
    */