@enact/limestone 1.3.0

package/VideoPlayer/Feedback.module.css

@@ -0,0 +1,55 @@
+.feedback {
+  display: inline-block;
+  margin-inline-end: var(--primitive-spacing-12);
+}
+.feedback.hidden {
+  display: none;
+}
+.feedback > * {
+  display: inline-block;
+  margin: 0.5rem;
+  margin-inline-end: var(--primitive-spacing-12);
+}
+.feedback > *:last-child {
+  margin-inline-end: 0;
+}
+.feedback .message {
+  font-family: "Limestone";
+  font-weight: var(--primitive-font-weight-semibold);
+}
+:global(.enact-locale-non-latin) .feedback .message {
+  font-family: "Limestone";
+  font-weight: var(--primitive-font-weight-semibold);
+}
+.feedback .icon {
+  font-size: 1.25em;
+  margin: 0;
+  height: inherit;
+  line-height: inherit;
+  vertical-align: bottom;
+}
+.feedback .icon:global(.neutral) {
+  color: inherit;
+}
+:global(.enact-a11y-high-contrast) .feedback .icon:global(.neutral):global(.highContrast) {
+  color: inherit;
+}
+.feedback .icon:global(.light) {
+  color: inherit;
+}
+.feedback .icon:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  color: inherit;
+}
+:global(.green) .feedback .icon:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  color: inherit;
+}
+:global(.orange) .feedback .icon:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  color: inherit;
+}

package/VideoPlayer/FeedbackContent.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FeedbackContentBase = exports.FeedbackContent = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("../internal/util");
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+var _FeedbackIcons = _interopRequireDefault(require("./FeedbackIcons.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "playbackRate", "playbackState", "feedbackVisible", "visible"];
+/**
+ * FeedbackContent {@link limestone/VideoPlayer}. This displays the media's playback rate and other
+ * information.
+ *
+ * @class FeedbackContent
+ * @memberof limestone/VideoPlayer
+ * @ui
+ * @private
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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 FeedbackContentBase = exports.FeedbackContentBase = (0, _kind["default"])({
+  name: 'FeedbackContent',
+  propTypes: /** @lends limestone/VideoPlayer.Feedback.prototype */{
+    /**
+     * If the current `playbackState` allows the feedback component's visibility to be changed,
+     * the feedback component will be hidden. If not, setting this property will have no effect.
+     * All `playbackState`s respond to this property except the following:
+     * `'rewind'`, `'fastForward'`.
+     *
+     * @type {Boolean}
+     * @default true
+     * @public
+     */
+    feedbackVisible: _propTypes["default"].bool,
+    /**
+     * Value of the feedback playback rate
+     *
+     * @type {String|Number}
+     * @public
+     */
+    playbackRate: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    /**
+     * Refers to one of the following possible media playback states.
+     * `'play'`, `'pause'`, `'rewind'`, `'fastForward'`,
+     * `'jumpBackward'`, `'jumpForward'`, `'jumpToStart'`, `'jumpToEnd'`, `'stop'`.
+     *
+     * Each state understands where its related icon should be positioned and whether it should
+     * respond to changes to the `visible` property.
+     *
+     * This string feeds directly into {@link limestone/FeedbackIcon.FeedbackIcon}.
+     *
+     * @type {('play'|'pause'|'rewind'|'fastForward'|'jumpBackward'|'jumpForward'|'jumpToStart'|'jumpToEnd'|'stop')}
+     * @public
+     */
+    playbackState: _propTypes["default"].oneOf(Object.keys(_FeedbackIcons["default"])),
+    /**
+     * The visibility of the component. When `false`, the component will be hidden.
+     *
+     * @type {Boolean}
+     * @default true
+     * @public
+     */
+    visible: _propTypes["default"].bool
+  },
+  defaultProps: {
+    feedbackVisible: true,
+    visible: true
+  },
+  render: function render(_ref) {
+    var children = _ref.children,
+      playbackRate = _ref.playbackRate,
+      playbackState = _ref.playbackState,
+      feedbackVisible = _ref.feedbackVisible,
+      visible = _ref.visible,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      style: !visible ? {
+        display: 'none'
+      } : null,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback["default"], {
+        playbackState: playbackState,
+        visible: feedbackVisible,
+        children: playbackRate
+      }), children]
+    }));
+  }
+});
+var FeedbackContent = exports.FeedbackContent = (0, _util.onlyUpdateForProps)(FeedbackContentBase, ['children', 'feedbackVisible', 'playbackRate', 'playbackState', 'visible']);
+var _default = exports["default"] = FeedbackContent;

package/VideoPlayer/FeedbackIcon.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FeedbackIconBase = exports.FeedbackIcon = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _FeedbackIcons = _interopRequireDefault(require("./FeedbackIcons.js"));
+var _FeedbackModule = _interopRequireDefault(require("./Feedback.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"];
+/**
+ * Feedback Icon for {@link limestone/VideoPlayer.Feedback}.
+ *
+ * @class FeedbackIcon
+ * @memberof limestone/VideoPlayer
+ * @ui
+ * @private
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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 FeedbackIconBase = exports.FeedbackIconBase = (0, _kind["default"])({
+  name: 'FeedbackIcon',
+  propTypes: /** @lends limestone/VideoPlayer.FeedbackIcon.prototype */{
+    /**
+     * Refers to one of the following possible media playback states.
+     * `'play'`, `'pause'`, `'rewind'`, `'fastForward'` ,
+     * `'jumpBackward'`, `'jumpForward'`, `'jumpToStart'`, `'jumpToEnd'`, `'stop'`.
+     *
+     * @type {('play'|'pause'|'rewind'|'fastForward'|'jumpBackward'|'jumpForward'|'jumpToStart'|'jumpToEnd'|'stop')}
+     * @public
+     */
+    children: _propTypes["default"].oneOf(Object.keys(_FeedbackIcons["default"]))
+  },
+  styles: {
+    css: _FeedbackModule["default"],
+    className: 'icon'
+  },
+  computed: {
+    children: function children(_ref) {
+      var _children = _ref.children;
+      return _children && _FeedbackIcons["default"][_children] && _FeedbackIcons["default"][_children].icon;
+    }
+  },
+  render: function render(_ref2) {
+    var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    if (children) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        size: "large",
+        children: children
+      }));
+    }
+    return null;
+  }
+});
+var FeedbackIcon = exports.FeedbackIcon = (0, _Skinnable["default"])(FeedbackIconBase);
+var _default = exports["default"] = FeedbackIcon;

package/VideoPlayer/FeedbackIcons.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+// Full List (Hash) of Feedback states and their icons with metadata
+//
+var _default = exports["default"] = {
+  play: {
+    icon: 'play',
+    position: 'after',
+    allowHide: true,
+    message: null
+  },
+  pause: {
+    icon: 'pause',
+    position: 'after',
+    allowHide: false,
+    message: null
+  },
+  rewind: {
+    icon: 'backward',
+    position: 'before',
+    allowHide: false,
+    message: 'x'
+  },
+  slowRewind: {
+    icon: 'pausebackward',
+    position: 'before',
+    allowHide: false,
+    message: 'x'
+  },
+  fastForward: {
+    icon: 'forward',
+    position: 'after',
+    allowHide: false,
+    message: 'x'
+  },
+  slowForward: {
+    icon: 'pauseforward',
+    position: 'after',
+    allowHide: false,
+    message: 'x'
+  },
+  jumpBackward: {
+    icon: 'pausejumpbackward',
+    position: 'before',
+    allowHide: false,
+    message: ' '
+  },
+  jumpForward: {
+    icon: 'pausejumpforward',
+    position: 'after',
+    allowHide: false,
+    message: ' '
+  },
+  jumpToStart: {
+    icon: 'jumpbackward',
+    position: 'before',
+    allowHide: true,
+    message: null
+  },
+  jumpToEnd: {
+    icon: 'jumpforward',
+    position: 'after',
+    allowHide: true,
+    message: null
+  },
+  stop: {
+    icon: 'stop',
+    position: null,
+    allowHide: true,
+    message: null
+  }
+};

package/VideoPlayer/FeedbackTooltip.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FeedbackTooltipBase = exports.FeedbackTooltip = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _util = require("../internal/util");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _FeedbackContent = _interopRequireDefault(require("./FeedbackContent"));
+var _FeedbackIcons = _interopRequireDefault(require("./FeedbackIcons.js"));
+var _MediaPlayer = require("../MediaPlayer/");
+var _FeedbackTooltipModule = _interopRequireDefault(require("./FeedbackTooltip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["arrowContainerClassName", "children", "feedbackVisible", "playbackState", "playbackRate", "thumbnailComponent"];
+/**
+ * FeedbackTooltip {@link limestone/VideoPlayer}. This displays the media's playback rate and
+ * time information.
+ *
+ * @class FeedbackTooltip
+ * @memberof limestone/VideoPlayer
+ * @ui
+ * @private
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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 FeedbackTooltipBase = exports.FeedbackTooltipBase = (0, _kind["default"])({
+  name: 'FeedbackTooltip',
+  propTypes: /** @lends limestone/VideoPlayer.FeedbackTooltip.prototype */{
+    /**
+     * Invoke action to display or hide tooltip.
+     *
+     * @type {('focus'|'blur'|'idle')}
+     * @default 'idle'
+     */
+    action: _propTypes2["default"].oneOf(['focus', 'blur', 'idle']),
+    /**
+     * Duration of the current media in seconds
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    duration: _propTypes2["default"].number,
+    /**
+     * Instance of `NumFmt` to format the time
+     *
+     * @type {Object}
+     * @public
+     */
+    formatter: _propTypes2["default"].object,
+    /**
+     * If the current `playbackState` allows this component's visibility to be changed,
+     * this component will be hidden. If not, setting this property will have no effect.
+     * All `playbackState`s respond to this property except the following:
+     * `'rewind'`, `'fastForward'`.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    hidden: _propTypes2["default"].bool,
+    /**
+     * Part of the API required by `ui/Slider` but not used by FeedbackTooltip which only
+     * supports horizontal orientation
+     *
+     * @type {String}
+     * @private
+     */
+    orientation: _propTypes2["default"].string,
+    /**
+     * Value of the feedback playback rate
+     *
+     * @type {String|Number}
+     * @public
+     */
+    playbackRate: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+    /**
+     * Refers to one of the following possible media playback states.
+     * `'play'`, `'pause'`, `'rewind'`, `'fastForward'` ,
+     * `'jumpBackward'`, `'jumpForward'`, `'jumpToStart'`, `'jumpToEnd'`, `'stop'`.
+     *
+     * Each state understands where its related icon should be positioned, and whether it should
+     * respond to changes to the `visible` property.
+     *
+     * This string feeds directly into {@link limestone/FeedbackIcon.FeedbackIcon}.
+     *
+     * @type {('play'|'pause'|'rewind'|'fastForward'|'jumpBackward'|'jumpForward'|'jumpToStart'|'jumpToEnd'|'stop')}
+     * @public
+     */
+    playbackState: _propTypes2["default"].oneOf(Object.keys(_FeedbackIcons["default"])),
+    /**
+     * This component will be used instead of the built-in version. The internal thumbnail style
+     * will be applied to this component. This component follows the same rules as the built-in
+     * version; hiding and showing according to the state of `action`.
+     *
+     * This can be a tag name as a string, a rendered DOM node, a component, or a component
+     * instance.
+     *
+     * @type {String|Component|Element}
+     * @public
+     */
+    thumbnailComponent: _propTypes["default"].renderableOverride,
+    /**
+     * `true` if Slider knob is scrubbing.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    thumbnailDeactivated: _propTypes2["default"].bool,
+    /**
+     * Set a thumbnail image source to show on VideoPlayer's Slider knob. This is a standard
+     * {@link limestone/Image} component so it supports all the same options for the `src`
+     * property. If no `thumbnailSrc` is set, no tooltip will display.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    thumbnailSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+    /**
+     * Required by the interface for limestone/Slider.tooltip but not used here
+     *
+     * @type {Boolean}
+     * @default true
+     * @public
+     */
+    visible: _propTypes2["default"].bool
+  },
+  defaultProps: {
+    action: 'idle',
+    thumbnailDeactivated: false,
+    hidden: false
+  },
+  styles: {
+    css: _FeedbackTooltipModule["default"],
+    className: 'feedbackTooltip'
+  },
+  computed: {
+    arrowContainerClassName: function arrowContainerClassName(_ref) {
+      var action = _ref.action,
+        styler = _ref.styler,
+        thumbnailComponent = _ref.thumbnailComponent,
+        thumbnailSrc = _ref.thumbnailSrc;
+      return styler.join('arrowContainer', {
+        hidden: action !== 'focus' || !thumbnailComponent && !thumbnailSrc
+      });
+    },
+    children: function children(_ref2) {
+      var _children = _ref2.children,
+        duration = _ref2.duration,
+        formatter = _ref2.formatter;
+      return (0, _MediaPlayer.secondsToTime)(_children * duration, formatter);
+    },
+    className: function className(_ref3) {
+      var hidden = _ref3.hidden,
+        s = _ref3.playbackState,
+        thumbnailDeactivated = _ref3.thumbnailDeactivated,
+        styler = _ref3.styler,
+        action = _ref3.action,
+        thumbnailComponent = _ref3.thumbnailComponent,
+        thumbnailSrc = _ref3.thumbnailSrc;
+      return styler.append({
+        hidden: hidden && _FeedbackIcons["default"][s] && _FeedbackIcons["default"][s].allowHide,
+        thumbnailDeactivated: thumbnailDeactivated,
+        shift: action === 'focus' && (thumbnailComponent || thumbnailSrc)
+      });
+    },
+    feedbackVisible: function feedbackVisible(_ref4) {
+      var action = _ref4.action,
+        playbackState = _ref4.playbackState;
+      return (action !== 'focus' || action === 'idle') && !(action === 'blur' && playbackState === 'play');
+    },
+    thumbnailComponent: function thumbnailComponent(_ref5) {
+      var action = _ref5.action,
+        _thumbnailComponent = _ref5.thumbnailComponent,
+        thumbnailSrc = _ref5.thumbnailSrc;
+      if (action === 'focus') {
+        if (_thumbnailComponent) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
+            component: _thumbnailComponent,
+            className: _FeedbackTooltipModule["default"].thumbnail
+          }, "thumbnailComponent");
+        } else if (thumbnailSrc) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _FeedbackTooltipModule["default"].thumbnail,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+              src: thumbnailSrc,
+              className: _FeedbackTooltipModule["default"].image
+            })
+          }, "thumbnailComponent");
+        }
+      }
+    }
+  },
+  render: function render(_ref6) {
+    var arrowContainerClassName = _ref6.arrowContainerClassName,
+      children = _ref6.children,
+      feedbackVisible = _ref6.feedbackVisible,
+      playbackState = _ref6.playbackState,
+      playbackRate = _ref6.playbackRate,
+      thumbnailComponent = _ref6.thumbnailComponent,
+      rest = _objectWithoutProperties(_ref6, _excluded);
+    delete rest.action;
+    delete rest.duration;
+    delete rest.formatter;
+    delete rest.hidden;
+    delete rest.orientation;
+    delete rest.thumbnailDeactivated;
+    delete rest.thumbnailSrc;
+    delete rest.visible;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _FeedbackTooltipModule["default"].alignmentContainer,
+        children: [thumbnailComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackContent["default"], {
+          className: _FeedbackTooltipModule["default"].content,
+          feedbackVisible: feedbackVisible,
+          playbackRate: playbackRate,
+          playbackState: playbackState,
+          children: children
+        }, "feedbackContent"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: arrowContainerClassName,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _FeedbackTooltipModule["default"].arrow
+          })
+        })]
+      })
+    }));
+  }
+});
+var FeedbackTooltip = exports.FeedbackTooltip = (0, _util.onlyUpdateForProps)((0, _Skinnable["default"])(FeedbackTooltipBase), ['action', 'children', 'hidden', 'playbackState', 'playbackRate', 'thumbnailComponent', 'thumbnailDeactivated', 'thumbnailSrc', 'visible']);
+FeedbackTooltip.defaultSlot = 'tooltip';
+var _default = exports["default"] = FeedbackTooltip;