@enact/limestone 1.3.0 → 1.9.3

package/TabLayout/tests/TabLayout-specs.js

@@ -36,6 +36,16 @@ var setPortraitOrientation = function setPortraitOrientation() {
     value: 1920
   });
 };
+var setLandscapeOrientation = function setLandscapeOrientation() {
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: 1920
+  });
+  Object.defineProperty(window, 'innerHeight', {
+    configurable: true,
+    value: 1080
+  });
+};
 var spySpotlight = function spySpotlight() {
   jest.spyOn(_spotlight["default"], 'setPointerMode');
   jest.spyOn(_spotlight["default"], 'move');
@@ -561,6 +571,27 @@ describe('TabLayout specs', function () {
     var actual = _react.screen.getByTestId('tabLayout');
     expect(actual).toHaveClass(expected);
   });
+  test('should update orientation on window resize, collapse and expand tabs', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var actual = _react.screen.getByTestId('tabLayout');
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expectedCollapsed = 'collapsed';
+    expect(actual).toHaveClass(expectedCollapsed);
+    setLandscapeOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expectedExpanded = 'expanded';
+    expect(actual).not.toHaveClass(expectedExpanded);
+  });
   test('should update orientation on window resize and not collapse tabs when \'blockCollapseOnPortrait\' is set', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
       blockCollapseOnPortrait: true,
@@ -579,6 +610,27 @@ describe('TabLayout specs', function () {
     var actual = _react.screen.getByTestId('tabLayout');
     expect(actual).not.toHaveClass(expected);
   });
+  test('should update orientation on window resize and not expand tabs when \'blockExpandOnLandscape\' is set', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      blockExpandOnLandscape: true,
+      "data-testid": "tabLayout",
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var actual = _react.screen.getByTestId('tabLayout');
+    var expected = 'collapsed';
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    expect(actual).toHaveClass(expected);
+    setLandscapeOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    expect(actual).toHaveClass(expected);
+  });
   test('should set the tab size for all tabs in horizontal orientation', function () {
     var tabSize = 300;
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {

package/ThemeDecorator/ThemeDecorator.d.ts

@@ -117,20 +117,19 @@ applying the decorator.
    */
   spotlight?: boolean;
 }
-export interface ThemeDecoratorProps
-  extends Merge<
+export interface ThemeDecoratorProps extends Merge<
+  Merge<
     Merge<
       Merge<
-        Merge<
-          ui_FloatingLayer_FloatingLayerDecoratorProps,
-          ui_resolution_ResolutionDecoratorProps
-        >,
-        spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
+        ui_FloatingLayer_FloatingLayerDecoratorProps,
+        ui_resolution_ResolutionDecoratorProps
       >,
-      limestone_Skinnable_SkinnableProps
+      spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
     >,
-    AccessibilityDecoratorProps
-  > {}
+    limestone_Skinnable_SkinnableProps
+  >,
+  AccessibilityDecoratorProps
+> {}
 export function ThemeDecorator<P>(
   config: ThemeDecoratorConfig,
   Component: React.ComponentType<P> | string,

package/ThemeDecorator/fontGenerator.js

@@ -43,7 +43,7 @@ var fonts = {
     regular: 'LG Smart UI Devanagari'
   },
   'ja': {
-    regular: 'LG Smart UI JP'
+    regular: ['LG Smart UI JP', 'LG Display_JP']
   },
   'kn': {
     regular: 'LG Smart UI Kannada'

package/ThemeDecorator/screenTypes.json

@@ -6,5 +6,6 @@
 	{"name": "qhd",     "pxPerRem": 32, "width": 2560, "height": 1440, "aspectRatioName": "hdtv"},
 	{"name": "wqhd",    "pxPerRem": 32, "width": 3440, "height": 1440, "aspectRatioName": "cinema"},
 	{"name": "uhd",     "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true},
+	{"name": "wuhd",	"pxPerRem": 48, "width": 5158, "height": 2160, "aspectRatioName": "cinema"},
 	{"name": "uhd2",    "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
 ]

package/TimePicker/TimePicker.module.css

@@ -10,7 +10,7 @@
 }
 :global(.enact-locale-right-to-left) .timePicker .pickers .hourPicker {
   order: 3;
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .timePicker .pickers .timeSeparator {
   order: 2;

package/TooltipDecorator/Tooltip.module.css

@@ -30,10 +30,9 @@
 .tooltip .tooltipLabel {
   --lime-tooltip-label-width: auto;
   font-family: "Limestone";
-  font-size: var(--primitive-font-size-54);
   font-style: normal;
   font-kerning: normal;
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-weight: var(--primitive-font-weight-semibold);
   line-height: 1.5rem;
   white-space: nowrap;

package/TooltipDecorator/tests/util-specs.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _util = require("../util");
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+describe('utils', function () {
+  test('should convert transition duration to number', /*#__PURE__*/_asyncToGenerator(function* () {
+    expect((0, _util.getTransitionDurationInMs)("0.2s")).toBe(200);
+    expect((0, _util.getTransitionDurationInMs)("200ms")).toBe(200);
+    expect((0, _util.getTransitionDurationInMs)("200")).toBe(0);
+  }));
+});

package/TooltipDecorator/useTooltip.js

@@ -206,7 +206,7 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
     var overflow = (0, _util2.calcOverflow)(tooltipNode, clientNode, newLayout.tooltipDirection, _resolution["default"].scale(screenEdgeKeepout));
     newLayout.tooltipDirection = (0, _util2.adjustDirection)(newLayout.tooltipDirection, overflow, rtl);
     newLayout.arrowAnchor = (0, _util2.adjustAnchor)(newLayout.arrowAnchor, newLayout.tooltipDirection, overflow, rtl);
-    newLayout.position = (0, _util2.adjustTransform)(clientRef.current, newLayout.tooltipDirection, (0, _util2.getPosition)(clientNode, newLayout.tooltipDirection));
+    newLayout.position = (0, _util2.adjustTransform)(clientRef.current, newLayout.tooltipDirection, clientNode, (0, _util2.getPosition)(clientNode, newLayout.tooltipDirection));
     newLayout.labelOffset = newLayout.arrowAnchor === 'center' ? (0, _util2.getLabelOffset)(tooltipNode, newLayout.tooltipDirection, newLayout.position, overflow) : null;
     if (newLayout.position.top !== layout.position.top || newLayout.position.left !== layout.position.left || newLayout.labelOffset !== layout.labelOffset || newLayout.arrowAnchor !== layout.arrowAnchor) {
       setLayout(newLayout);

package/TooltipDecorator/util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPosition = exports.getLabelOffset = exports.calcOverflow = exports.adjustTransform = exports.adjustDirection = exports.adjustAnchor = void 0;
+exports.getTransitionDurationInMs = exports.getPosition = exports.getLabelOffset = exports.calcOverflow = exports.adjustTransform = exports.adjustDirection = exports.adjustAnchor = void 0;
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -101,32 +101,39 @@ var adjustDirection = exports.adjustDirection = function adjustDirection(tooltip
   return tooltipDirection;
 };
 
+/* Converts computedStyle for transitionDuration to number value */
+var getTransitionDurationInMs = exports.getTransitionDurationInMs = function getTransitionDurationInMs(duration) {
+  if (duration.endsWith("ms")) {
+    return parseFloat(duration);
+  } else if (duration.endsWith("s")) {
+    return parseFloat(duration) * 1000;
+  }
+  return 0;
+};
+
 /**
  * Calculates the top and left position for `Tooltip` accounting for transform.
  *
  * @method
  * @memberof limestone/TooltipDecorator
- * @param   {Node} clientNode         	The value for client node
+ * @param   {Node} clientRef         	The value for client node
  * @param   {String} tooltipDirection   Direction of tooltip
+ * @param   {Object} clientNode         The DOMRect for client node
  * @param   {Object} tooltipPosition    The `getBoundingClientRect` values for tooltip node
  * @returns {Object}                    Tooltip's calculated new position accounting for transform
  * @private
  */
-var adjustTransform = exports.adjustTransform = function adjustTransform(clientNode, tooltipDirection, tooltipPosition) {
-  var componentNodes = clientNode !== null && clientNode !== void 0 && clientNode.childNodes.length ? [clientNode].concat(_toConsumableArray(clientNode.childNodes)) : [clientNode];
-  var nodePositions = clientNode.getBoundingClientRect();
+var adjustTransform = exports.adjustTransform = function adjustTransform(clientRef, tooltipDirection, clientNode, tooltipPosition) {
+  var componentNodes = clientRef !== null && clientRef !== void 0 && clientRef.childNodes.length ? [clientRef].concat(_toConsumableArray(clientRef.childNodes)) : [clientRef];
   var hasTransform = false;
-  var transformMatrix = [];
   componentNodes.forEach(function (node) {
-    if (window.getComputedStyle(node).transitionProperty === 'transform') {
+    if (window.getComputedStyle(node).transitionProperty === 'transform' && getTransitionDurationInMs(window.getComputedStyle(node).transitionDuration) > 0) {
       hasTransform = true;
-      var matrix = window.getComputedStyle(node).transform.split('(')[1].split(')')[0].split(',');
-      transformMatrix = [parseFloat(matrix[0]) - 1, parseFloat(matrix[3]) - 1];
     }
   });
   if (!hasTransform) return tooltipPosition;
-  var horizontal = (nodePositions.right - nodePositions.left) * transformMatrix[0] / 2,
-    vertical = (nodePositions.bottom - nodePositions.top) * transformMatrix[1] / 2;
+  var horizontal = (clientNode.right - clientNode.left) * 0.1 / 2,
+    vertical = (clientNode.bottom - clientNode.top) * 0.1 / 2;
   switch (tooltipDirection) {
     case 'above':
       tooltipPosition.top -= vertical;

package/VideoPlayer/Feedback.js

@@ -7,6 +7,7 @@ exports["default"] = exports.FeedbackBase = exports.Feedback = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../internal/util");
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _FeedbackIcon = _interopRequireDefault(require("./FeedbackIcon"));
 var _FeedbackIcons = _interopRequireDefault(require("./FeedbackIcons.js"));
 var _FeedbackModule = _interopRequireDefault(require("./Feedback.module.css"));
@@ -82,6 +83,8 @@ var FeedbackBase = exports.FeedbackBase = (0, _kind["default"])({
         if (_FeedbackIcons["default"][s].message && _children !== 1) {
           // `1` represents a playback rate of 1:1
           return _children.toString().replace(/^-/, '') + _FeedbackIcons["default"][s].message;
+        } else if (s === 'pause') {
+          return (0, _$L["default"])('Pause');
         }
       } else {
         // Custom Message

package/VideoPlayer/Feedback.module.css

@@ -1,17 +1,13 @@
 .feedback {
-  display: inline-block;
-  margin-inline-end: var(--primitive-spacing-12);
+  display: inline-flex;
 }
 .feedback.hidden {
   display: none;
 }
-.feedback > * {
+.feedback * {
   display: inline-block;
-  margin: 0.5rem;
-  margin-inline-end: var(--primitive-spacing-12);
-}
-.feedback > *:last-child {
-  margin-inline-end: 0;
+  margin-inline-end: var(--primitive-spacing-42);
+  vertical-align: middle;
 }
 .feedback .message {
   font-family: "Limestone";
@@ -24,9 +20,9 @@
 .feedback .icon {
   font-size: 1.25em;
   margin: 0;
+  margin-inline-end: var(--primitive-spacing-42);
   height: inherit;
   line-height: inherit;
-  vertical-align: bottom;
 }
 .feedback .icon:global(.neutral) {
   color: inherit;

package/VideoPlayer/FeedbackIcons.js

@@ -15,7 +15,7 @@ var _default = exports["default"] = {
   },
   pause: {
     icon: 'pause',
-    position: 'after',
+    position: 'before',
     allowHide: false,
     message: null
   },

package/VideoPlayer/FeedbackTooltip.module.css

@@ -1,9 +1,9 @@
 .feedbackTooltip {
   position: absolute;
-  bottom: 0.875rem;
+  bottom: var(--primitive-spacing-42);
 }
 .feedbackTooltip.shift {
-  bottom: 1.375rem;
+  bottom: calc(var(--primitive-spacing-42) + 24px);
 }
 .feedbackTooltip.shift .content {
   position: absolute;
@@ -11,6 +11,8 @@
   right: 0;
   bottom: 0;
   left: 0;
+  font-size: var(--primitive-font-size-54);
+  margin-bottom: var(--primitive-spacing-30);
 }
 .feedbackTooltip.hidden {
   display: none;
@@ -21,9 +23,9 @@
   will-change: transform;
 }
 .feedbackTooltip .thumbnail {
-  border-width: 0.125rem;
+  border-width: 0.25rem;
   border-style: solid;
-  border-radius: 0;
+  border-radius: var(--primitive-radius-12);
   overflow: hidden;
   transition: opacity 250ms;
 }
@@ -32,27 +34,33 @@
   width: 8.875rem;
   height: 5rem;
 }
+.feedbackTooltip .thumbnail::after {
+  content: "";
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 65%;
+}
 .feedbackTooltip.thumbnailDeactivated .thumbnail {
   opacity: 0.5;
 }
 .feedbackTooltip .content {
   font-family: "Limestone";
-  font-family: "Limestone Number";
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-regular);
   line-height: 1.5rem;
   white-space: nowrap;
   text-align: center;
-  margin-bottom: 0.125rem;
+  margin-bottom: var(--primitive-spacing-6);
+  padding: 0 var(--primitive-spacing-36);
 }
 :global(.enact-locale-non-latin) .feedbackTooltip .content {
   font-family: "Limestone";
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-regular);
 }
-:global(.enact-locale-non-latin) .feedbackTooltip .content {
-  font-family: "Limestone Number";
-}
 .feedbackTooltip .alignmentContainer {
   position: relative;
   right: 50%;
@@ -81,10 +89,16 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+.feedbackTooltip:global(.neutral) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 .feedbackTooltip:global(.neutral) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+.feedbackTooltip:global(.neutral):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .thumbnail {
   border-color: var(--semantic-color-on-background-main);
 }
@@ -93,10 +107,16 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+:global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 :global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+:global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 .feedbackTooltip:global(.light) .thumbnail {
   border-color: var(--semantic-color-on-background-main);
 }
@@ -105,10 +125,16 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+.feedbackTooltip:global(.light) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 .feedbackTooltip:global(.light) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+.feedbackTooltip:global(.light):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 .feedbackTooltip:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -122,10 +148,16 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+.feedbackTooltip:global(.game) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 .feedbackTooltip:global(.game) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+.feedbackTooltip:global(.game):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.green) .feedbackTooltip:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -138,10 +170,16 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+:global(.green) .feedbackTooltip:global(.game) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 :global(.green) .feedbackTooltip:global(.game) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+:global(.green) .feedbackTooltip:global(.game):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.orange) .feedbackTooltip:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -154,7 +192,13 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
+:global(.orange) .feedbackTooltip:global(.game) .thumbnail::after {
+  background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
+}
 :global(.orange) .feedbackTooltip:global(.game) .content {
   color: var(--semantic-color-on-background-main);
   text-shadow: 0 0.08333rem 0.08333rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
+:global(.orange) .feedbackTooltip:global(.game):not(.shift) .content {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}

package/VideoPlayer/VideoPlayer.d.ts

@@ -92,24 +92,24 @@ export interface videoStatus {
   /**
    * Type of event that triggered this callback
    */
-  type: string /**
+  type: string; /**
    * Playback index of the media in seconds
-   */;
-  currentTime: number /**
+   */
+  currentTime: number; /**
    * Media's entire duration in seconds
-   */;
-  duration: number /**
+   */
+  duration: number; /**
    * Playing vs paused state.  `true`  means the media is paused
-   */;
-  paused: boolean /**
+   */
+  paused: boolean; /**
    * Current playback rate, as a number
-   */;
-  playbackRate: number /**
+   */
+  playbackRate: number; /**
    * A value between  `0`  and  `1`  representing the proportion of the media that has loaded
-   */;
-  proportionLoaded: number /**
+   */
+  proportionLoaded: number; /**
    * A value between  `0`  and  `1`  representing the proportion of the media that has already been shown
-   */;
+   */
   proportionPlayed: number;
 }
 /**
@@ -127,15 +127,15 @@ export interface playbackRateHash {
   /**
    * An array of playback rates when media fast forwards
    */
-  fastForward: Array /**
+  fastForward: Array; /**
    * An array of playback rates when media rewinds
-   */;
-  rewind: Array /**
+   */
+  rewind: Array; /**
    * An array of playback rates when media slow-forwards
-   */;
-  slowForward: Array /**
+   */
+  slowForward: Array; /**
    * An array of playback rates when media slow-rewinds
-   */;
+   */
   slowRewind: Array;
 }
 export interface VideoPlayerBaseProps {
@@ -211,8 +211,10 @@ jump event on a right or left pulse.
    * *  `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
@@ -291,6 +293,12 @@ which will be either  `true`  or  `false` . (e.g.:  `onControlsAvailable({availa
    * Is passed a    as the first argument.
    */
   onJumpForward?: Function;
+  /**
+   * Called when the user clicks the next button.
+   *
+   * Is passed a    as the first argument.
+   */
+  onNext?: Function;
   /**
    * Called when the video has been paused.
    */
@@ -299,6 +307,12 @@ which will be either  `true`  or  `false` . (e.g.:  `onControlsAvailable({availa
    * Called when the video has been played.
    */
   onPlay?: Function;
+  /**
+   * Called when the user clicks the previous button.
+   *
+   * Is passed a    as the first argument.
+   */
+  onPrevious?: Function;
   /**
    * Called when the video has been rewound.
    */
@@ -349,6 +363,12 @@ will prevent the seek operation.
    * Is passed a    as the first argument.
    */
   onWillJumpForward?: Function;
+  /**
+   * Called once before playing the next video in the playlist.
+   *
+   * Is passed a    as the first argument.
+   */
+  onWillNext?: Function;
   /**
    * Called once before the video is paused.
    */
@@ -357,6 +377,12 @@ will prevent the seek operation.
    * Called once before the video is played
    */
   onWillPlay?: Function;
+  /**
+   * Called once before playing the previous video in the playlist.
+   *
+   * Is passed a    as the first argument.
+   */
+  onWillPrevious?: Function;
   /**
    * Called once before the video is rewound.
    */