@ebay/ui-core-react 7.0.0 → 7.1.0-alpha.2

package/ebay-tourtip/ebay-tourtip-footer.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const EbayTourtipFooter = ({ index, children }) => (react_1.default.createElement(react_1.default.Fragment, null,
-    index !== undefined && (react_1.default.createElement("span", { className: "tourtip__index" }, index)),
-    children));
-exports.default = EbayTourtipFooter;

package/ebay-tourtip/ebay-tourtip-heading.js

@@ -1,24 +0,0 @@
-"use strict";
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const EbayTourtipHeading = (_a) => {
-    var { as, children, className } = _a, props = __rest(_a, ["as", "children", "className"]);
-    const HeadingTag = as || 'h2';
-    return (react_1.default.createElement(HeadingTag, Object.assign({}, props, { className: (0, classnames_1.default)(`tourtip__heading`, className) }), children));
-};
-exports.default = EbayTourtipHeading;

package/ebay-tourtip/ebay-tourtip-host.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * This Component is used only for finding it as a child of EbayTooltip
- * and pass the properties to TourtipHost
-*/
-const EbayTourtipHost = () => null;
-exports.default = EbayTourtipHost;

package/ebay-tourtip/ebay-tourtip.js

@@ -1,70 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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`);
-    }
-    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`);
-    }
-    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)))));
-};
-exports.default = EbayTourtip;

package/ebay-tourtip/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = exports.EbayTourtipFooter = exports.EbayTourtipHeading = exports.EbayTourtipHost = exports.EbayTourtipContent = exports.EbayTourtip = void 0;
-var ebay_tourtip_1 = require("./ebay-tourtip");
-Object.defineProperty(exports, "EbayTourtip", { enumerable: true, get: function () { return __importDefault(ebay_tourtip_1).default; } });
-var ebay_tourtip_content_1 = require("./ebay-tourtip-content");
-Object.defineProperty(exports, "EbayTourtipContent", { enumerable: true, get: function () { return __importDefault(ebay_tourtip_content_1).default; } });
-var ebay_tourtip_host_1 = require("./ebay-tourtip-host");
-Object.defineProperty(exports, "EbayTourtipHost", { enumerable: true, get: function () { return __importDefault(ebay_tourtip_host_1).default; } });
-var ebay_tourtip_heading_1 = require("./ebay-tourtip-heading");
-Object.defineProperty(exports, "EbayTourtipHeading", { enumerable: true, get: function () { return __importDefault(ebay_tourtip_heading_1).default; } });
-var ebay_tourtip_footer_1 = require("./ebay-tourtip-footer");
-Object.defineProperty(exports, "EbayTourtipFooter", { enumerable: true, get: function () { return __importDefault(ebay_tourtip_footer_1).default; } });
-var tooltip_utils_1 = require("../common/tooltip-utils");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_utils_1.Tooltip; } });

package/ebay-video/const.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultVideoConfig = exports.ERROR_NO_PLAYER = exports.ERROR_ANOTHER_LOAD = void 0;
-exports.ERROR_ANOTHER_LOAD = 7000;
-exports.ERROR_NO_PLAYER = 11;
-exports.defaultVideoConfig = {
-    addBigPlayButton: false,
-    addSeekBar: true,
-    controlPanelElements: [
-        'play_pause',
-        'time_and_duration',
-        'spacer',
-        'mute',
-        'report',
-        'captions',
-        // 'quality', // uncomment this to show a gear icon for video quality control
-        'fullscreen'
-    ]
-};

package/ebay-video/controls.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.customControls = void 0;
-const react_1 = __importDefault(require("react"));
-const client_1 = require("react-dom/client");
-// need that for broken definitions workaround
-// @ts-ignore
-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
-    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(reportButton, 'click', onReport);
-            };
-            (0, client_1.createRoot)(tempEl).render(react_1.default.createElement(reportButton_1.ReportButton, { callback: buttonCallback }, text));
-        }
-    };
-    Report.Factory = class {
-        constructor(reportText) {
-            this.reportText = reportText;
-        }
-        create(rootElement, controls) {
-            return new Report(rootElement, controls, this.reportText);
-        }
-    };
-    return { Report };
-}
-exports.customControls = customControls;

package/ebay-video/index.js

@@ -1,25 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EbayVideoSource = exports.EbayVideo = void 0;
-var video_1 = require("./video");
-Object.defineProperty(exports, "EbayVideo", { enumerable: true, get: function () { return __importDefault(video_1).default; } });
-var source_1 = require("./source");
-Object.defineProperty(exports, "EbayVideoSource", { enumerable: true, get: function () { return __importDefault(source_1).default; } });
-__exportStar(require("./types"), exports);

package/ebay-video/reportButton.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReportButton = void 0;
-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,22 +0,0 @@
-"use strict";
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const EbayVideoSource = (_a) => {
-    var rest = __rest(_a, []);
-    return react_1.default.createElement("source", Object.assign({}, rest));
-};
-exports.default = EbayVideoSource;

package/ebay-video/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/ebay-video/video.js

@@ -1,210 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-// need that for broken definitions workaround
-// @ts-ignore
-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);
-    };
-    const loadSource = (index = 0) => {
-        var _a;
-        if (!sources.length || !playerRef.current)
-            return;
-        setLoaded(false);
-        playerRef.current
-            .load((_a = sources[index]) === null || _a === void 0 ? void 0 : _a.src)
-            .then(() => {
-            setFailed(false);
-        })
-            .catch(err => {
-            console.error(err);
-            switch (err.code) {
-                case const_1.ERROR_ANOTHER_LOAD:
-                    return;
-                case const_1.ERROR_NO_PLAYER:
-                    setTimeout(() => loadSource(index), 0);
-                    break;
-                default: {
-                    const nextIndex = sources.length > index + 1 && index + 1;
-                    if (nextIndex) {
-                        setTimeout(() => loadSource(nextIndex), 0);
-                    }
-                    else {
-                        handleError(err);
-                    }
-                }
-            }
-        })
-            .finally(() => {
-            setLoaded(true);
-        });
-    };
-    (0, react_1.useEffect)(() => {
-        const video = videoRef.current;
-        const container = containerRef.current;
-        if (!video || !container)
-            return;
-        video.volume = volume;
-        shaka_player_ui_1.default.polyfill.installAll(); // todo: check if we need that
-        playerRef.current = new shaka_player_ui_1.default.Player(video);
-        if (!playerRef.current)
-            return;
-        playerRef.current.addEventListener('error', handleError);
-        playerRef.current.addEventListener('buffering', (e) => {
-            setBuffering(e.buffering);
-        });
-        uiRef.current = new shaka_player_ui_1.default.ui.Overlay(playerRef.current, container, video, reportText);
-        uiRef.current.configure({
-            addBigPlayButton: true,
-            controlPanelElements: [],
-            addSeekBar: false
-        });
-        if (!hideReportButton) {
-            const { Report } = (0, controls_1.customControls)(onReport);
-            shaka_player_ui_1.default.ui.Controls.registerElement('report', new Report.Factory(reportText));
-        }
-        loadSource();
-        hideSpinner(container);
-        // return () => {
-        //     playerRef.current.destroy()
-        //     uiRef.current.destroy()
-        // }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        switch (action) {
-            case 'play':
-                videoRef.current.play();
-                break;
-            case 'pause':
-                videoRef.current.pause();
-                break;
-            default:
-        }
-    }, [action]);
-    const showControls = () => {
-        if (!uiRef.current)
-            return;
-        const updatedControls = volumeSlider ? {
-            controlPanelElements: withVolumeControl(const_1.defaultVideoConfig.controlPanelElements)
-        } : {};
-        uiRef.current.configure(Object.assign(Object.assign({}, const_1.defaultVideoConfig), updatedControls));
-        videoRef.current.controls = false;
-    };
-    const handlePlaying = (e) => {
-        e.stopPropagation();
-        showControls();
-        if (playView === 'fullscreen') {
-            videoRef.current.requestFullscreen();
-        }
-        setPlaying(true);
-        onPlay(e, { player: playerRef.current });
-    };
-    const handleOnPlayClick = () => {
-        videoRef.current.play();
-    };
-    const handleVolumeChange = (e) => {
-        const eventTarget = e.currentTarget;
-        onVolumeChange(e, {
-            volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
-            muted: eventTarget.muted
-        });
-    };
-    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;
-    };
-    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 &&
-            react_1.default.createElement("div", { className: "shaka-play-button-container" },
-                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", 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)),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('video-player__overlay', {
-                'video-player__overlay--hidden': loaded && (failed || !buffering)
-            }) },
-            react_1.default.createElement(ebay_progress_spinner_1.EbayProgressSpinner, { size: "large", "aria-label": a11yLoadText }))));
-};
-function withVolumeControl(controls) {
-    const insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length;
-    const controlsWithVolume = [...controls];
-    controlsWithVolume.splice(insertAt, 0, 'volume');
-    return controlsWithVolume;
-}
-function hideSpinner(container) {
-    const shakaSpinner = container.querySelectorAll('.shaka-spinner')[0];
-    if (shakaSpinner) {
-        shakaSpinner.setAttribute('hidden', '');
-    }
-}
-exports.default = EbayVideo;