@enact/limestone 1.3.0 → 1.10.0

package/MediaPlayer/MediaControls.js

@@ -8,6 +8,7 @@ var _dispatcher = require("@enact/core/dispatcher");
 var _handle = require("@enact/core/handle");
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _deprecate = _interopRequireDefault(require("@enact/core/internal/deprecate"));
 var _keymap = require("@enact/core/keymap");
 var _util = require("@enact/core/util");
 var _ApiDecorator = _interopRequireDefault(require("@enact/core/internal/ApiDecorator"));
@@ -28,7 +29,7 @@ var _util3 = require("./util");
 var _MediaControlsModule = _interopRequireDefault(require("./MediaControls.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["mediaControlsRef"],
-  _excluded2 = ["actionGuideAriaLabel", "actionGuideButtonAriaLabel", "actionGuideDisabled", "actionGuideLabel", "actionGuideShowing", "children", "id", "jumpBackwardAriaLabel", "jumpBackwardIcon", "jumpButtonsDisabled", "jumpForwardAriaLabel", "jumpForwardIcon", "bottomComponents", "mediaControlsRef", "mediaDisabled", "moreComponentsSpotlightId", "noJumpButtons", "onActionGuideClick", "onJumpBackwardButtonClick", "onJumpForwardButtonClick", "onKeyDownFromMediaButtons", "onPlayButtonClick", "paused", "pauseIcon", "playIcon", "playPauseButtonDisabled", "showMoreComponents", "moreComponentsRendered", "moreButtonsClassName", "moreComponentsClassName", "actionGuideClassName", "spotlightDisabled", "spotlightId"];
+  _excluded2 = ["actionGuideAriaLabel", "actionGuideButtonAriaLabel", "actionGuideDisabled", "actionGuideLabel", "actionGuideShowing", "children", "id", "jumpBackwardAriaLabel", "jumpBackwardIcon", "jumpButtonsDisabled", "jumpForwardAriaLabel", "jumpForwardIcon", "bottomComponents", "mediaControlsRef", "mediaDisabled", "moreComponentsSpotlightId", "nextAriaLabel", "nextButtonDisabled", "nextIcon", "noJumpButtons", "noNextButton", "noPreviousButton", "onActionGuideClick", "onJumpBackwardButtonClick", "onJumpForwardButtonClick", "onKeyDownFromMediaButtons", "onNextButtonClick", "onPlayButtonClick", "onPreviousButtonClick", "paused", "pauseIcon", "playIcon", "playPauseButtonDisabled", "previousAriaLabel", "previousButtonDisabled", "previousIcon", "showMoreComponents", "moreComponentsRendered", "moreButtonsClassName", "moreComponentsClassName", "actionGuideClassName", "spotlightDisabled", "spotlightId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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); } }
@@ -76,6 +77,14 @@ var Container = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
 var MediaButton = (0, _util2.onlyUpdateForProps)(_Button["default"], ['children', 'className', 'disabled', 'icon', 'onClick', 'spotlightDisabled']);
 var forwardToggleMore = (0, _handle.forward)('onToggleMore');
 var animationDuration = 300;
+var warnedJumpBackwardAriaLabel = false;
+var warnedJumpBackwardIcon = false;
+var warnedJumpButtonsDisabled = false;
+var warnedJumpForwardAriaLabel = false;
+var warnedJumpForwardIcon = false;
+var warnedNoJumpButtons = false;
+var warnedOnJumpBackwardButtonClick = false;
+var warnedOnJumpForwardButtonClick = false;
 
 /**
  * A set of components for controlling media playback and rendering additional components.
@@ -102,6 +111,9 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
     /**
      * The `aria-label` for the action guide.
      *
+     * When the media has been loaded first, this aria-label is read after media title.
+     * You can use this aria-label to guide the user to find the action guide button for more controls.
+     *
      * @type {String}
      * @public
      */
@@ -109,6 +121,8 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
     /**
      * The `aria-label` for the action guide button.
      *
+     * This aria-label is read when the action guide button is focused.
+     *
      * @type {String}
      * @public
      */
@@ -138,6 +152,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * The `aria-label` for the jumpBackward button.
      *
      * @type {String}
+     * @deprecated Will be removed in 2.0.0. Use `previousAriaLabel` instead.
      * @public
      */
     jumpBackwardAriaLabel: _propTypes2["default"].string,
@@ -147,6 +162,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      *
      * @type {String}
      * @default 'jumpbackward'
+     * @deprecated Will be removed in 2.0.0. Use `previousIcon` instead.
      * @public
      */
     jumpBackwardIcon: _propTypes2["default"].string,
@@ -154,6 +170,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * Disables state on the media "jump" buttons; the outer pair.
      *
      * @type {Boolean}
+     * @deprecated Will be removed in 2.0.0. Use `previousButtonDisabled` and `nextButtonDisabled` instead.
      * @public
      */
     jumpButtonsDisabled: _propTypes2["default"].bool,
@@ -161,6 +178,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * The `aria-label` for the jumpForward button.
      *
      * @type {String}
+     * @deprecated Will be removed in 2.0.0. Use `nextAriaLabel` instead.
      * @public
      */
     jumpForwardAriaLabel: _propTypes2["default"].string,
@@ -170,6 +188,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      *
      * @type {String}
      * @default 'jumpforward'
+     * @deprecated Will be removed in 2.0.0. Use `nextIcon` instead.
      * @public
      */
     jumpForwardIcon: _propTypes2["default"].string,
@@ -202,13 +221,51 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * @default 'moreComponents'
      */
     moreComponentsSpotlightId: _propTypes2["default"].string,
+    /**
+     * The `aria-label` for the next button.
+     *
+     * @type {String}
+     * @public
+     */
+    nextAriaLabel: _propTypes2["default"].string,
+    /**
+     * Disables the next button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    nextButtonDisabled: _propTypes2["default"].bool,
+    /**
+     * Next {@link limestone/Icon.Icon|icon} name. Accepts any
+     * {@link limestone/Icon.Icon|icon} component type.
+     *
+     * @type {String}
+     * @default 'next'
+     * @public
+     */
+    nextIcon: _propTypes2["default"].string,
     /**
      * Removes the "jump" buttons. The buttons that skip forward or backward in the video.
      *
      * @type {Boolean}
+     * @deprecated Will be removed in 2.0.0. Use `noPreviousButton` and `noNextButton` instead.
      * @public
      */
     noJumpButtons: _propTypes2["default"].bool,
+    /**
+     * Removes the next button. The button that plays the next video of the playlist.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noNextButton: _propTypes2["default"].bool,
+    /**
+     * Removes the previous button. The button that plays the previous video of the playlist.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noPreviousButton: _propTypes2["default"].bool,
     /**
      * Called when the button in ActionGuide is clicked.
      *
@@ -228,6 +285,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * Called when the user clicks the JumpBackward button
      *
      * @type {Function}
+     * @deprecated Will be removed in 2.0.0. Use `onPreviousButtonClick` instead.
      * @public
      */
     onJumpBackwardButtonClick: _propTypes2["default"].func,
@@ -235,6 +293,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * Called when the user clicks the JumpForward button.
      *
      * @type {Function}
+     * @deprecated Will be removed in 2.0.0. Use `onNextButtonClick` instead.
      * @public
      */
     onJumpForwardButtonClick: _propTypes2["default"].func,
@@ -245,6 +304,16 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * @public
      */
     onKeyDownFromMediaButtons: _propTypes2["default"].func,
+    /**
+     * Called when the user clicks the next button.
+     *
+     * If this function is not set, the button will work as the default jumpForward button.
+     * Next button will be the default in 2.0.0.
+     *
+     * @type {Function}
+     * @public
+     */
+    onNextButtonClick: _propTypes2["default"].func,
     /**
      * Called when the user clicks the Play button.
      *
@@ -252,6 +321,16 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * @public
      */
     onPlayButtonClick: _propTypes2["default"].func,
+    /**
+     * Called when the user clicks the previous button
+     *
+     * If this function is not set, the button will work as the default jumpBackward button.
+     * Previous button will be the default in 2.0.0.
+     *
+     * @type {Function}
+     * @public
+     */
+    onPreviousButtonClick: _propTypes2["default"].func,
     /**
      * `true` when the video is paused.
      *
@@ -288,6 +367,29 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
      * @public
      */
     playPauseButtonDisabled: _propTypes2["default"].bool,
+    /**
+     * The `aria-label` for the previous button.
+     *
+     * @type {String}
+     * @public
+     */
+    previousAriaLabel: _propTypes2["default"].string,
+    /**
+     * Disables the previous button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    previousButtonDisabled: _propTypes2["default"].bool,
+    /**
+     * Previous {@link limestone/Icon.Icon|icon} name. Accepts any
+     * {@link limestone/Icon.Icon|icon} component type.
+     *
+     * @type {String}
+     * @default 'previous'
+     * @public
+     */
+    previousIcon: _propTypes2["default"].string,
     /**
      * When `true`, more components are visible.
      *
@@ -323,9 +425,11 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
     jumpBackwardIcon: 'jumpbackward',
     jumpForwardIcon: 'jumpforward',
     moreComponentsSpotlightId: 'moreComponents',
+    nextIcon: 'next',
     spotlightId: 'mediaControls',
     pauseIcon: 'pause',
     playIcon: 'play',
+    previousIcon: 'previous',
     visible: true
   },
   styles: {
@@ -369,7 +473,7 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
       return showMoreComponents || _moreComponentsRendered;
     }
   },
-  render: function render(_ref8) {
+  render: (0, _deprecate["default"])(function (_ref8) {
     var actionGuideAriaLabel = _ref8.actionGuideAriaLabel,
       actionGuideButtonAriaLabel = _ref8.actionGuideButtonAriaLabel,
       actionGuideDisabled = _ref8.actionGuideDisabled,
@@ -386,16 +490,26 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
       mediaControlsRef = _ref8.mediaControlsRef,
       mediaDisabled = _ref8.mediaDisabled,
       moreComponentsSpotlightId = _ref8.moreComponentsSpotlightId,
+      nextAriaLabel = _ref8.nextAriaLabel,
+      nextButtonDisabled = _ref8.nextButtonDisabled,
+      nextIcon = _ref8.nextIcon,
       noJumpButtons = _ref8.noJumpButtons,
+      noNextButton = _ref8.noNextButton,
+      noPreviousButton = _ref8.noPreviousButton,
       onActionGuideClick = _ref8.onActionGuideClick,
       onJumpBackwardButtonClick = _ref8.onJumpBackwardButtonClick,
       onJumpForwardButtonClick = _ref8.onJumpForwardButtonClick,
       onKeyDownFromMediaButtons = _ref8.onKeyDownFromMediaButtons,
+      onNextButtonClick = _ref8.onNextButtonClick,
       onPlayButtonClick = _ref8.onPlayButtonClick,
+      onPreviousButtonClick = _ref8.onPreviousButtonClick,
       paused = _ref8.paused,
       pauseIcon = _ref8.pauseIcon,
       playIcon = _ref8.playIcon,
       playPauseButtonDisabled = _ref8.playPauseButtonDisabled,
+      previousAriaLabel = _ref8.previousAriaLabel,
+      previousButtonDisabled = _ref8.previousButtonDisabled,
+      previousIcon = _ref8.previousIcon,
       showMoreComponents = _ref8.showMoreComponents,
       moreComponentsRendered = _ref8.moreComponentsRendered,
       moreButtonsClassName = _ref8.moreButtonsClassName,
@@ -406,6 +520,70 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
       rest = _objectWithoutProperties(_ref8, _excluded2);
     delete rest.onClose;
     delete rest.visible;
+    if (!warnedJumpBackwardAriaLabel && jumpBackwardAriaLabel) {
+      (0, _deprecate["default"])({
+        name: '`jumpBackwardAriaLabel`',
+        until: '2.0.0',
+        message: 'Use `previousAriaLabel` instead'
+      });
+      warnedJumpBackwardAriaLabel = true;
+    }
+    if (!warnedJumpBackwardIcon && jumpBackwardIcon !== 'jumpbackward') {
+      (0, _deprecate["default"])({
+        name: '`jumpBackwardIcon`',
+        until: '2.0.0',
+        message: 'Use `previousIcon` instead'
+      });
+      warnedJumpBackwardIcon = true;
+    }
+    if (!warnedJumpButtonsDisabled && jumpButtonsDisabled) {
+      (0, _deprecate["default"])({
+        name: '`jumpButtonsDisabled`',
+        until: '2.0.0',
+        message: 'Use `previousButtonDisabled` and `nextButtonDisabled` instead'
+      });
+      warnedJumpButtonsDisabled = true;
+    }
+    if (!warnedJumpForwardAriaLabel && jumpForwardAriaLabel) {
+      (0, _deprecate["default"])({
+        name: '`jumpForwardAriaLabel`',
+        until: '2.0.0',
+        message: 'Use `nextAriaLabel` instead'
+      });
+      warnedJumpForwardAriaLabel = true;
+    }
+    if (!warnedJumpForwardIcon && jumpForwardIcon !== 'jumpforward') {
+      (0, _deprecate["default"])({
+        name: '`jumpForwardIcon`',
+        until: '2.0.0',
+        message: 'Use `nextIcon` instead'
+      });
+      warnedJumpForwardIcon = true;
+    }
+    if (!warnedNoJumpButtons && noJumpButtons) {
+      (0, _deprecate["default"])({
+        name: '`noJumpButtons`',
+        until: '2.0.0',
+        message: 'Use `noPreviousButton` and `noNextButton` instead'
+      });
+      warnedNoJumpButtons = true;
+    }
+    if (!warnedOnJumpBackwardButtonClick && onJumpBackwardButtonClick) {
+      (0, _deprecate["default"])({
+        name: '`onJumpBackwardButtonClick`',
+        until: '2.0.0',
+        message: 'Use `onPreviousButtonClick` instead'
+      });
+      warnedOnJumpBackwardButtonClick = true;
+    }
+    if (!warnedOnJumpForwardButtonClick && onJumpForwardButtonClick) {
+      (0, _deprecate["default"])({
+        name: '`onJumpForwardButtonClick`',
+        until: '2.0.0',
+        message: 'Use `onNextButtonClick` instead'
+      });
+      warnedOnJumpForwardButtonClick = true;
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OuterContainer, _objectSpread(_objectSpread({}, rest), {}, {
       id: id,
       mediaControlsRef: mediaControlsRef,
@@ -414,13 +592,13 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
         className: _MediaControlsModule["default"].mediaControls,
         spotlightDisabled: spotlightDisabled,
         onKeyDown: onKeyDownFromMediaButtons,
-        children: [noJumpButtons ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaButton, {
-          "aria-label": jumpBackwardAriaLabel || (0, _$L["default"])('Previous'),
+        children: [noPreviousButton || noJumpButtons ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaButton, {
+          "aria-label": previousAriaLabel || jumpBackwardAriaLabel || (0, _$L["default"])('Previous'),
           backgroundOpacity: "transparent",
           css: _MediaControlsModule["default"],
-          disabled: mediaDisabled || jumpButtonsDisabled,
-          icon: jumpBackwardIcon,
-          onClick: onJumpBackwardButtonClick,
+          disabled: mediaDisabled || previousButtonDisabled || jumpButtonsDisabled,
+          icon: previousIcon !== 'previous' ? previousIcon : jumpBackwardIcon,
+          onClick: onPreviousButtonClick || onJumpBackwardButtonClick,
           size: "large",
           spotlightDisabled: spotlightDisabled
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaButton, {
@@ -433,13 +611,13 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
           onClick: onPlayButtonClick,
           size: "large",
           spotlightDisabled: spotlightDisabled
-        }), noJumpButtons ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaButton, {
-          "aria-label": jumpForwardAriaLabel || (0, _$L["default"])('Next'),
+        }), noNextButton || noJumpButtons ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaButton, {
+          "aria-label": nextAriaLabel || jumpForwardAriaLabel || (0, _$L["default"])('Next'),
           backgroundOpacity: "transparent",
           css: _MediaControlsModule["default"],
-          disabled: mediaDisabled || jumpButtonsDisabled,
-          icon: jumpForwardIcon,
-          onClick: onJumpForwardButtonClick,
+          disabled: mediaDisabled || nextButtonDisabled || jumpButtonsDisabled,
+          icon: nextIcon !== 'next' ? nextIcon : jumpForwardIcon,
+          onClick: onNextButtonClick || onJumpForwardButtonClick,
           size: "large",
           spotlightDisabled: spotlightDisabled
         })]
@@ -465,7 +643,11 @@ var MediaControlsBase = exports.MediaControlsBase = (0, _kind["default"])({
         })]
       }) : null]
     }));
-  }
+  }, {
+    name: 'features related to `jumpBackward` and `jumpForward` buttons',
+    until: '2.0.0',
+    message: 'Will be replaced with features related to `previous` and `next` buttons that play previous/next video of the playlist'
+  })
 });
 
 /**

package/MediaPlayer/MediaControls.module.css

@@ -8,11 +8,12 @@
 }
 .controlsFrame .mediaControls {
   height: 3.75rem;
+  direction: ltr;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--primitive-spacing-120);
-  margin-top: 0.75rem;
+  margin-top: var(--primitive-spacing-36);
 }
 .controlsFrame .mediaControls .button {
   height: 3.75rem;
@@ -51,7 +52,7 @@
 }
 .controlsFrame .moreComponents > :first-child {
   gap: 4.25rem;
-  margin-top: 1.25rem;
+  margin-top: var(--primitive-spacing-60);
 }
 .controlsFrame:global(.neutral) .button .bg {
   border-radius: 2rem;

package/MediaPlayer/MediaSlider.module.css

@@ -6,7 +6,7 @@
   opacity: 0;
 }
 .sliderFrame .mediaSlider {
-  margin: 0 1rem;
+  margin: 0 0.75rem;
   padding: 0.5rem 0;
   height: 0.25rem;
 }
@@ -14,40 +14,27 @@
   content: "";
   position: absolute;
   top: 0;
-  right: -2.75rem;
+  right: calc(var(--primitive-spacing-132) * -1);
   bottom: 0;
-  left: -2.75rem;
+  left: calc(var(--primitive-spacing-132) * -1);
 }
 :global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus .knob::before {
   opacity: 1;
 }
-:global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus.pressed .knob::before,
-:global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
-}
 :global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active .knob::before {
   opacity: 1;
 }
-:global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active.active .knob::before,
-:global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
-}
 .sliderFrame .mediaSlider:global(.spottable).pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
   opacity: 1;
 }
 .sliderFrame .knob::before {
-  width: 1rem;
-  height: 1rem;
+  width: 0.75rem;
+  height: 0.75rem;
   border-width: 0;
-  border-radius: 1rem;
-  transform: translate(-50%, -50%) scale(0.75);
+  border-radius: 0.75rem;
   opacity: 0;
-  will-change: transform, opacity;
-  transition: transform cubic-bezier(0.15, 0.85, 0.6, 1.65) 0.2s, opacity ease 0.2s;
+  will-change: opacity;
 }
 .sliderFrame.scrubbing .knob {
   display: block;

package/MediaPlayer/index.d.ts

@@ -77,11 +77,10 @@ export class MediaSlider extends React.Component<
  * Formats a duration in seconds into a human-readable time.
  */
 export declare const secondsToTime: Function;
-export interface MediaControlsProps
-  extends Merge<
-    ui_Cancelable_CancelableProps,
-    limestone_Skinnable_SkinnableProps
-  > {
+export interface MediaControlsProps extends Merge<
+  ui_Cancelable_CancelableProps,
+  limestone_Skinnable_SkinnableProps
+> {
   /**
    * DOM id for the component.
    *
@@ -89,11 +88,16 @@ export interface MediaControlsProps
    */
   id: string;
   /**
-   * The  `aria-label`  for the action guide.
-   */
+ * The  `aria-label`  for the action guide.
+ * 
+ * When the media has been loaded first, this aria-label is read after media title.
+You can use this aria-label to guide the user to find the action guide button for more controls.
+ */
   actionGuideAriaLabel?: string;
   /**
    * The  `aria-label`  for the action guide button.
+   *
+   * This aria-label is read when the action guide button is focused.
    */
   actionGuideButtonAriaLabel?: string;
   /**
@@ -146,10 +150,31 @@ export interface MediaControlsProps
    * The spotlight ID for the moreComponent container.
    */
   moreComponentsSpotlightId?: string;
+  /**
+   * The  `aria-label`  for the next button.
+   */
+  nextAriaLabel?: string;
+  /**
+   * Disables the next button.
+   */
+  nextButtonDisabled?: boolean;
+  /**
+ * Next    name. Accepts any
+   component type.
+ */
+  nextIcon?: string;
   /**
    * Removes the "jump" buttons. The buttons that skip forward or backward in the video.
    */
   noJumpButtons?: boolean;
+  /**
+   * Removes the next button. The button that plays the next video of the playlist.
+   */
+  noNextButton?: boolean;
+  /**
+   * Removes the previous button. The button that plays the previous video of the playlist.
+   */
+  noPreviousButton?: boolean;
   /**
    * Called when the button in ActionGuide is clicked.
    */
@@ -170,10 +195,24 @@ export interface MediaControlsProps
    * Called when the user presses a media control button.
    */
   onKeyDownFromMediaButtons?: Function;
+  /**
+ * Called when the user clicks the next button.
+ * 
+ * If this function is not set, the button will work as the default jumpForward button.
+Next button will be the default in 2.0.0.
+ */
+  onNextButtonClick?: Function;
   /**
    * Called when the user clicks the Play button.
    */
   onPlayButtonClick?: Function;
+  /**
+ * Called when the user clicks the previous button
+ * 
+ * If this function is not set, the button will work as the default jumpBackward button.
+Previous button will be the default in 2.0.0.
+ */
+  onPreviousButtonClick?: Function;
   /**
    * `true`  when the video is paused.
    */
@@ -196,6 +235,19 @@ the    when the
    * Disables the media "play"/"pause" button.
    */
   playPauseButtonDisabled?: boolean;
+  /**
+   * The  `aria-label`  for the previous button.
+   */
+  previousAriaLabel?: string;
+  /**
+   * Disables the previous button.
+   */
+  previousButtonDisabled?: boolean;
+  /**
+ * Previous    name. Accepts any
+   component type.
+ */
+  previousIcon?: string;
   /**
    * `true`  controls are disabled from Spotlight.
    */

package/MediaPlayer/tests/util-specs.js

@@ -3,6 +3,7 @@
 var _util = require("@enact/core/util");
 var _DurationFmt = _interopRequireDefault(require("ilib/lib/DurationFmt"));
 var _react = require("@testing-library/react");
+var _react2 = require("react");
 var _util2 = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -25,7 +26,9 @@ describe('util', function () {
       var actual;
       var Parent = function Parent(_ref) {
         var children = _ref.children;
-        actual = (0, _util2.countReactChildren)(children);
+        (0, _react2.useEffect)(function () {
+          actual = (0, _util2.countReactChildren)(children);
+        }, [children]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           children: children
         });