@ebay/ui-core-react 6.2.1 → 6.3.0

package/ebay-tourtip/ebay-tourtip.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,32 +37,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var component_utils_1 = require("../common/component-utils");
-var tooltip_utils_1 = require("../common/tooltip-utils");
-var ebay_tourtip_content_1 = __importDefault(require("./ebay-tourtip-content"));
-var ebay_tourtip_host_1 = __importDefault(require("./ebay-tourtip-host"));
-var ebay_tourtip_footer_1 = __importDefault(require("./ebay-tourtip-footer"));
-var ebay_tourtip_heading_1 = __importDefault(require("./ebay-tourtip-heading"));
-var EbayTourtip = function (_a) {
-    var a11yCloseText = _a.a11yCloseText, ariaLabel = _a["aria-label"], className = _a.className, children = _a.children, onCollapse = _a.onCollapse, onExpand = _a.onExpand, overlayStyle = _a.overlayStyle, pointer = _a.pointer, rest = __rest(_a, ["a11yCloseText", 'aria-label', "className", "children", "onCollapse", "onExpand", "overlayStyle", "pointer"]);
-    var hostRef = (0, react_1.useRef)();
-    var _b = (0, tooltip_utils_1.useTooltip)({ onExpand: onExpand, onCollapse: onCollapse, initialExpanded: true, hostRef: hostRef }), isExpanded = _b.isExpanded, collapseTooltip = _b.collapseTooltip;
-    var containerRef = (0, react_1.useRef)();
-    var content = (0, component_utils_1.findComponent)(children, ebay_tourtip_content_1.default);
+const react_1 = __importStar(require("react"));
+const component_utils_1 = require("../common/component-utils");
+const tooltip_utils_1 = require("../common/tooltip-utils");
+const ebay_tourtip_content_1 = __importDefault(require("./ebay-tourtip-content"));
+const ebay_tourtip_host_1 = __importDefault(require("./ebay-tourtip-host"));
+const ebay_tourtip_footer_1 = __importDefault(require("./ebay-tourtip-footer"));
+const ebay_tourtip_heading_1 = __importDefault(require("./ebay-tourtip-heading"));
+const EbayTourtip = (_a) => {
+    var { a11yCloseText, 'aria-label': ariaLabel, className, children, onCollapse, onExpand, overlayStyle, pointer } = _a, rest = __rest(_a, ["a11yCloseText", 'aria-label', "className", "children", "onCollapse", "onExpand", "overlayStyle", "pointer"]);
+    const hostRef = (0, react_1.useRef)();
+    const { isExpanded, collapseTooltip } = (0, tooltip_utils_1.useTooltip)({ onExpand, onCollapse, initialExpanded: true, hostRef });
+    const containerRef = (0, react_1.useRef)();
+    const content = (0, component_utils_1.findComponent)(children, ebay_tourtip_content_1.default);
     if (!content) {
-        throw new Error("EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip");
+        throw new Error(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`);
     }
-    var _c = content.props, contentChildren = _c.children, contentProps = _c.contentProps;
-    var host = (0, component_utils_1.findComponent)(children, ebay_tourtip_host_1.default);
+    const { children: contentChildren, contentProps } = content.props;
+    const host = (0, component_utils_1.findComponent)(children, ebay_tourtip_host_1.default);
     if (!host) {
-        throw new Error("EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip");
+        throw new Error(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`);
     }
-    var heading = (0, component_utils_1.findComponent)(children, ebay_tourtip_heading_1.default);
-    var footer = (0, component_utils_1.findComponent)(children, ebay_tourtip_footer_1.default);
-    return (react_1.default.createElement(tooltip_utils_1.Tooltip, __assign({}, rest, { className: className, type: "tourtip", isExpanded: isExpanded, ref: containerRef }),
-        react_1.default.createElement(tooltip_utils_1.TooltipHost, __assign({}, host.props, { forwardedRef: hostRef, "aria-label": ariaLabel, "aria-expanded": isExpanded })),
-        react_1.default.createElement(tooltip_utils_1.TooltipContent, __assign({}, contentProps, { a11yCloseText: a11yCloseText, onClose: collapseTooltip, pointer: pointer, showCloseButton: true, style: overlayStyle, type: "tourtip" }),
+    const heading = (0, component_utils_1.findComponent)(children, ebay_tourtip_heading_1.default);
+    const footer = (0, component_utils_1.findComponent)(children, ebay_tourtip_footer_1.default);
+    return (react_1.default.createElement(tooltip_utils_1.Tooltip, Object.assign({}, rest, { className: className, type: "tourtip", isExpanded: isExpanded, ref: containerRef }),
+        react_1.default.createElement(tooltip_utils_1.TooltipHost, Object.assign({}, host.props, { forwardedRef: hostRef, "aria-label": ariaLabel, "aria-expanded": isExpanded })),
+        react_1.default.createElement(tooltip_utils_1.TooltipContent, Object.assign({}, contentProps, { a11yCloseText: a11yCloseText, onClose: collapseTooltip, pointer: pointer, showCloseButton: true, style: overlayStyle, type: "tourtip" }),
             heading,
             contentChildren,
             footer && (react_1.default.createElement(tooltip_utils_1.TooltipFooter, { type: "tourtip" }, footer)))));

package/ebay-video/controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAOA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,CA2B9D"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAOA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,EAAE,GAAG,CAAA;CAAE,CAkCnE"}

package/ebay-video/controls.js

@@ -1,63 +1,40 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.customControls = void 0;
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
+const react_1 = __importDefault(require("react"));
+const client_1 = require("react-dom/client");
 // need that for broken definitions workaround
 // @ts-ignore
-var shaka_player_ui_1 = require("shaka-player/dist/shaka-player.ui");
-var reportButton_1 = require("./reportButton");
-function customControls(onReport) {
-    if (onReport === void 0) { onReport = function () { }; }
+const shaka_player_ui_1 = require("shaka-player/dist/shaka-player.ui");
+const reportButton_1 = require("./reportButton");
+function customControls(onReport = () => { }) {
     // Have to contain in order to not execute until shaka is downloaded
     // eslint-disable-next-line no-extra-parens
-    var Report = /** @class */ (function (_super) {
-        __extends(class_1, _super);
-        function class_1(parent, controls, text) {
-            var _this = _super.call(this, parent, controls) || this;
-            appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton, null, text), function (button) {
+    const Report = class extends shaka_player_ui_1.ui.Element {
+        constructor(parent, controls, text) {
+            super(parent, controls);
+            const tempEl = document.createElement('div');
+            const buttonCallback = () => {
+                const reportButton = tempEl.firstChild;
+                parent.appendChild(reportButton);
+                tempEl.remove();
                 // have to listen to clicks this way (React onClick will not work):
-                _this.eventManager.listen(button, 'click', onReport);
-            });
-            return _this;
+                this.eventManager.listen(reportButton, 'click', onReport);
+            };
+            (0, client_1.createRoot)(tempEl).render(react_1.default.createElement(reportButton_1.ReportButton, { callback: buttonCallback }, text));
         }
-        return class_1;
-    }(shaka_player_ui_1.ui.Element));
-    Report.Factory = /** @class */ (function () {
-        function class_2(reportText) {
+    };
+    Report.Factory = class {
+        constructor(reportText) {
             this.reportText = reportText;
         }
-        class_2.prototype.create = function (rootElement, controls) {
+        create(rootElement, controls) {
             return new Report(rootElement, controls, this.reportText);
-        };
-        return class_2;
-    }());
-    return { Report: Report };
+        }
+    };
+    return { Report };
 }
 exports.customControls = customControls;
-function appendChild(container, reactElement, callback) {
-    var tempEl = document.createElement('div');
-    react_dom_1.default.render(reactElement, tempEl, function () {
-        var child = tempEl.firstChild;
-        container.appendChild(child);
-        callback(child);
-    });
-}

package/ebay-video/reportButton.d.ts

@@ -1,3 +1,8 @@
-import { FC } from 'react';
-export declare const ReportButton: FC;
+import { JSX, ReactNode } from 'react';
+type ReportButtonProps = {
+    callback?: (button: HTMLElement) => void;
+    children?: ReactNode;
+};
+export declare const ReportButton: ({ callback, children }: ReportButtonProps) => JSX.Element;
+export {};
 //# sourceMappingURL=reportButton.d.ts.map

package/ebay-video/reportButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,eAAO,MAAM,YAAY,EAAE,EAI1B,CAAA"}
+{"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG7C,KAAK,iBAAiB,GAAG;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,2BAA4B,iBAAiB,KAAG,WAIxE,CAAA"}

package/ebay-video/reportButton.js

@@ -4,12 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportButton = void 0;
-var react_1 = __importDefault(require("react"));
-var ebay_icon_1 = require("../ebay-icon");
-var ReportButton = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement("button", { className: "video-player__report-button" },
-        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "flag24" }),
-        children));
-};
+const react_1 = __importDefault(require("react"));
+const ebay_icon_1 = require("../ebay-icon");
+const ReportButton = ({ callback, children }) => (react_1.default.createElement("button", { className: "video-player__report-button", ref: callback },
+    react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "flag24" }),
+    children));
 exports.ReportButton = ReportButton;

package/ebay-video/source.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var EbayVideoSource = function (_a) {
+const react_1 = __importDefault(require("react"));
+const EbayVideoSource = (_a) => {
     var rest = __rest(_a, []);
-    return react_1.default.createElement("source", __assign({}, rest));
+    return react_1.default.createElement("source", Object.assign({}, rest));
 };
 exports.default = EbayVideoSource;

package/ebay-video/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAkB,UAAU,EAA+B,MAAM,OAAO,CAAA;AAS1G,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqOjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAkB,UAAU,EAA+B,MAAM,OAAO,CAAA;AAS1G,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmOjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}

package/ebay-video/video.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,76 +33,63 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 // need that for broken definitions workaround
 // @ts-ignore
-var shaka_player_ui_1 = __importDefault(require("shaka-player/dist/shaka-player.ui"));
-var component_utils_1 = require("../common/component-utils");
-var ebay_icon_1 = require("../ebay-icon");
-var ebay_progress_spinner_1 = require("../ebay-progress-spinner");
-var source_1 = __importDefault(require("./source"));
-var const_1 = require("./const");
-var controls_1 = require("./controls");
-var EbayVideo = function (_a) {
-    var width = _a.width, height = _a.height, thumbnail = _a.thumbnail, action = _a.action, muted = _a.muted, _b = _a.playView, playView = _b === void 0 ? 'inline' : _b, a11yLoadText = _a.a11yLoadText, a11yPlayText = _a.a11yPlayText, reportText = _a.reportText, volumeSlider = _a.volumeSlider, _c = _a.volume, volume = _c === void 0 ? 1 : _c, hideReportButton = _a.hideReportButton, errorText = _a.errorText, _d = _a.onVolumeChange, onVolumeChange = _d === void 0 ? function () {
-    } : _d, _e = _a.onLoadError, onLoadError = _e === void 0 ? function () {
-    } : _e, _f = _a.onPlay, onPlay = _f === void 0 ? function () {
-    } : _f, _g = _a.onReport, onReport = _g === void 0 ? function () {
-    } : _g, children = _a.children, rest = __rest(_a, ["width", "height", "thumbnail", "action", "muted", "playView", "a11yLoadText", "a11yPlayText", "reportText", "volumeSlider", "volume", "hideReportButton", "errorText", "onVolumeChange", "onLoadError", "onPlay", "onReport", "children"]);
-    var _h = (0, react_1.useState)(), loaded = _h[0], setLoaded = _h[1];
-    var _j = (0, react_1.useState)(), buffering = _j[0], setBuffering = _j[1];
-    var _k = (0, react_1.useState)(), playing = _k[0], setPlaying = _k[1];
-    var _l = (0, react_1.useState)(), failed = _l[0], setFailed = _l[1];
-    var containerRef = (0, react_1.useRef)(null);
-    var videoRef = (0, react_1.useRef)(null);
-    var playerRef = (0, react_1.useRef)(null);
-    var uiRef = (0, react_1.useRef)(null);
-    var sources = (0, component_utils_1.filterByType)(children, source_1.default).map(function (_a) {
-        var props = _a.props;
-        return props;
-    });
-    var handleError = function (err) {
+const shaka_player_ui_1 = __importDefault(require("shaka-player/dist/shaka-player.ui"));
+const component_utils_1 = require("../common/component-utils");
+const ebay_icon_1 = require("../ebay-icon");
+const ebay_progress_spinner_1 = require("../ebay-progress-spinner");
+const source_1 = __importDefault(require("./source"));
+const const_1 = require("./const");
+const controls_1 = require("./controls");
+const EbayVideo = (_a) => {
+    var { width, height, thumbnail, action, muted, playView = 'inline', a11yLoadText, a11yPlayText, reportText, volumeSlider, volume = 1, hideReportButton, errorText, onVolumeChange = () => {
+    }, onLoadError = () => {
+    }, onPlay = () => {
+    }, onReport = () => {
+    }, children } = _a, rest = __rest(_a, ["width", "height", "thumbnail", "action", "muted", "playView", "a11yLoadText", "a11yPlayText", "reportText", "volumeSlider", "volume", "hideReportButton", "errorText", "onVolumeChange", "onLoadError", "onPlay", "onReport", "children"]);
+    const [loaded, setLoaded] = (0, react_1.useState)();
+    const [buffering, setBuffering] = (0, react_1.useState)();
+    const [playing, setPlaying] = (0, react_1.useState)();
+    const [failed, setFailed] = (0, react_1.useState)();
+    const containerRef = (0, react_1.useRef)(null);
+    const videoRef = (0, react_1.useRef)(null);
+    const playerRef = (0, react_1.useRef)(null);
+    const uiRef = (0, react_1.useRef)(null);
+    const sources = (0, component_utils_1.filterByType)(children, source_1.default).map(({ props }) => props);
+    const handleError = (err) => {
         setLoaded(true);
         setFailed(true);
         onLoadError(err);
     };
-    var loadSource = function (index) {
+    const loadSource = (index = 0) => {
         var _a;
-        if (index === void 0) { index = 0; }
         if (!sources.length || !playerRef.current)
             return;
         setLoaded(false);
         playerRef.current
             .load((_a = sources[index]) === null || _a === void 0 ? void 0 : _a.src)
-            .then(function () {
+            .then(() => {
             setFailed(false);
         })
-            .catch(function (err) {
+            .catch(err => {
             console.error(err);
             switch (err.code) {
                 case const_1.ERROR_ANOTHER_LOAD:
                     return;
                 case const_1.ERROR_NO_PLAYER:
-                    setTimeout(function () { return loadSource(index); }, 0);
+                    setTimeout(() => loadSource(index), 0);
                     break;
                 default: {
-                    var nextIndex_1 = sources.length > index + 1 && index + 1;
-                    if (nextIndex_1) {
-                        setTimeout(function () { return loadSource(nextIndex_1); }, 0);
+                    const nextIndex = sources.length > index + 1 && index + 1;
+                    if (nextIndex) {
+                        setTimeout(() => loadSource(nextIndex), 0);
                     }
                     else {
                         handleError(err);
@@ -121,13 +97,13 @@ var EbayVideo = function (_a) {
                 }
             }
         })
-            .finally(function () {
+            .finally(() => {
             setLoaded(true);
         });
     };
-    (0, react_1.useEffect)(function () {
-        var video = videoRef.current;
-        var container = containerRef.current;
+    (0, react_1.useEffect)(() => {
+        const video = videoRef.current;
+        const container = containerRef.current;
         if (!video || !container)
             return;
         video.volume = volume;
@@ -136,7 +112,7 @@ var EbayVideo = function (_a) {
         if (!playerRef.current)
             return;
         playerRef.current.addEventListener('error', handleError);
-        playerRef.current.addEventListener('buffering', function (e) {
+        playerRef.current.addEventListener('buffering', (e) => {
             setBuffering(e.buffering);
         });
         uiRef.current = new shaka_player_ui_1.default.ui.Overlay(playerRef.current, container, video, reportText);
@@ -146,7 +122,7 @@ var EbayVideo = function (_a) {
             addSeekBar: false
         });
         if (!hideReportButton) {
-            var Report = (0, controls_1.customControls)(onReport).Report;
+            const { Report } = (0, controls_1.customControls)(onReport);
             shaka_player_ui_1.default.ui.Controls.registerElement('report', new Report.Factory(reportText));
         }
         loadSource();
@@ -156,7 +132,7 @@ var EbayVideo = function (_a) {
         //     uiRef.current.destroy()
         // }
     }, []);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         switch (action) {
             case 'play':
                 videoRef.current.play();
@@ -167,16 +143,16 @@ var EbayVideo = function (_a) {
             default:
         }
     }, [action]);
-    var showControls = function () {
+    const showControls = () => {
         if (!uiRef.current)
             return;
-        var updatedControls = volumeSlider ? {
+        const updatedControls = volumeSlider ? {
             controlPanelElements: withVolumeControl(const_1.defaultVideoConfig.controlPanelElements)
         } : {};
-        uiRef.current.configure(__assign(__assign({}, const_1.defaultVideoConfig), updatedControls));
+        uiRef.current.configure(Object.assign(Object.assign({}, const_1.defaultVideoConfig), updatedControls));
         videoRef.current.controls = false;
     };
-    var handlePlaying = function (e) {
+    const handlePlaying = (e) => {
         e.stopPropagation();
         showControls();
         if (playView === 'fullscreen') {
@@ -185,24 +161,24 @@ var EbayVideo = function (_a) {
         setPlaying(true);
         onPlay(e, { player: playerRef.current });
     };
-    var handleOnPlayClick = function () {
+    const handleOnPlayClick = () => {
         videoRef.current.play();
     };
-    var handleVolumeChange = function (e) {
-        var eventTarget = e.currentTarget;
+    const handleVolumeChange = (e) => {
+        const eventTarget = e.currentTarget;
         onVolumeChange(e, {
             volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
             muted: eventTarget.muted
         });
     };
-    var handleOnPause = function () {
+    const handleOnPause = () => {
         // On IOS, the controls force showing up if the video exist fullscreen while playing.
         // This forces the controls to always hide
         videoRef.current.controls = false;
     };
-    var style = {
-        width: width ? "".concat(width, "px") : undefined,
-        height: height ? "".concat(height, "px") : undefined
+    const style = {
+        width: width ? `${width}px` : undefined,
+        height: height ? `${height}px` : undefined
     };
     return (react_1.default.createElement("div", { style: style, className: (0, classnames_1.default)('video-player', { 'video-player--poster': !playing }) },
         !playing && loaded && !failed && !buffering &&
@@ -210,9 +186,7 @@ var EbayVideo = function (_a) {
                 react_1.default.createElement("button", { onClick: handleOnPlayClick, className: "shaka-play-button", style: { opacity: 1, zIndex: 999 }, "aria-label": a11yPlayText },
                     react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "playFilled64Colored" }))),
         react_1.default.createElement("div", { className: "video-player__container", ref: containerRef },
-            react_1.default.createElement("video", __assign({ ref: videoRef, style: style, poster: thumbnail, muted: muted || false, onPlaying: handlePlaying, onPause: handleOnPause, onVolumeChange: handleVolumeChange }, rest), sources.map(function (source, i) {
-                react_1.default.createElement("source", __assign({ key: i }, source));
-            }))),
+            react_1.default.createElement("video", Object.assign({ ref: videoRef, style: style, poster: thumbnail, muted: muted || false, onPlaying: handlePlaying, onPause: handleOnPause, onVolumeChange: handleVolumeChange }, rest), sources.map((source, i) => react_1.default.createElement("source", Object.assign({ key: i }, source))))),
         react_1.default.createElement("div", { className: (0, classnames_1.default)('video-player__overlay', { 'video-player__overlay--hidden': !failed }) },
             react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "attention64" }),
             react_1.default.createElement("div", { className: "video-player__overlay-text" }, errorText)),
@@ -222,13 +196,13 @@ var EbayVideo = function (_a) {
             react_1.default.createElement(ebay_progress_spinner_1.EbayProgressSpinner, { size: "large", "aria-label": a11yLoadText }))));
 };
 function withVolumeControl(controls) {
-    var insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length;
-    var controlsWithVolume = __spreadArray([], controls, true);
+    const insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length;
+    const controlsWithVolume = [...controls];
     controlsWithVolume.splice(insertAt, 0, 'volume');
     return controlsWithVolume;
 }
 function hideSpinner(container) {
-    var shakaSpinner = container.querySelectorAll('.shaka-spinner')[0];
+    const shakaSpinner = container.querySelectorAll('.shaka-spinner')[0];
     if (shakaSpinner) {
         shakaSpinner.setAttribute('hidden', '');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -13,8 +13,9 @@
     "eslint-local": "eslint . --ext ts,tsx",
     "eslint": "eslint . --ext .ts,.tsx -f checkstyle -o ./lint/checkstyle-result.xml",
     "format": "eslint . --fix 'src/**/*.{ts,tsx}'",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9001 -c .storybook",
-    "storybook-node16": "start-storybook -p 9001 -c .storybook",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9001 -c .storybook",
+    "storybook-node16": "storybook dev -p 9001 -c .storybook",
+    "build-storybook": "storybook build",
     "test": "yarn jest",
     "build": "yarn typecheck && yarn tsc",
     "typecheck": "tsc --project tsconfig.typecheck.json",
@@ -43,8 +44,8 @@
   "license": "ISC",
   "peerDependencies": {
     "@ebay/skin": "^17.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": ">= 16.0.0",
+    "react-dom": ">= 16.0.0",
     "shaka-player": "^4.3.2"
   },
   "dependencies": {
@@ -55,23 +56,26 @@
     "react-remove-scroll": "^2.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.0.0",
     "@ebay/skin": "^17.0.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-knobs": "^6.0.28",
-    "@storybook/addon-storyshots": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/storybook-deployer": "^2.8.11",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-storysource": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^12",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^7",
     "@testing-library/user-event": "^12",
     "@types/classnames": "^2.2.11",
-    "@types/react": "^16.0",
-    "@types/react-dom": "^16.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babel-loader": "^8.1.0",
@@ -92,11 +96,11 @@
     "jest-pnp-resolver": "^1.2.3",
     "lint-staged": "^10.5.3",
     "node-require-context": "^1.0.0",
-    "react": "^16.0.0",
+    "react": "^18",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18",
     "shaka-player": "^4.3.2",
-    "storybook-addon-jsx": "^7.3.14",
+    "storybook": "^7.5.1",
     "style-loader": "^2.0.0",
     "svgson": "^4.0.0",
     "ts-jest": "^29.1.1",
@@ -104,6 +108,7 @@
     "typescript": "4"
   },
   "resolutions": {
-    "@types/react": "^16.14.2"
+    "@storybook/addon-actions": "~7.5.3",
+    "string-width": "4.2.3"
   }
 }