@ebay/ui-core-react 3.9.3 → 3.10.0

package/README.md

@@ -66,7 +66,7 @@ eBayUI React components
 * [x] [ebay-tooltip](src/ebay-tooltip)
 * [ ] `ebay-tourtip`
 * [ ] `ebay-tri-state-checkbox`
-* [ ] `ebay-video`
+* [x] `ebay-video`
 
 ## Getting Started
 

package/ebay-video/README.md

@@ -0,0 +1,50 @@
+# ebay-video
+Video player. Supports either MPD or M3U8 playlist formats.
+Natively uses `shaka` player under the hood. For resizing, `ebay-video` supports fixed width or variable width. If no width is provided the video tag will resize based on the container size.
+
+## Usage
+```bash
+yarn add @ebay/ui-core-react shaka-player
+```
+```jsx
+import { EbayVideo } from '@ebay/ui-core-react/ebay-video'
+import '@ebay/skin/video'
+
+<EbayVideo
+    width="600"
+    height="400"
+    onLoadError(err => {
+        console.log("handle error", err);
+    })>
+        <EbayVideoSource src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd" />
+</EbayVideo>
+```
+
+## EbayVideo Props
+
+| Name         | Type     | Required | Description                                                                                                     |
+|--------------|----------|----------|-----------------------------------------------------------------------------------------------------------------|
+| width        | Number   | No       |                                                                                                                 |
+| height       | Number   | No       |                                                                                                                 |
+| thumbnail    | String   | No       | URL path for the video thumbnail                                                                                |
+| action       | String   | No       | `play` or `pause`: will programatically perform the given action                                                |
+| volume       | Number   | No       | sets sound volume                                                                                               |
+| volumeSlider | Boolean  | No       | keep or remove volume slider, default is `false`                                                                |
+| muted        | Boolean  | No       | mute or unmute video, default is `false`                                                                        |
+| playView     | String   | No       | `inline` or `fullscreen`. When player starts to play, will either play `inline` (default) or switch to `fullscreen` |
+| a11yLoadText | String   | Yes      | a11y text for the loading spinner                                                                               |
+| a11yPlayText | String   | Yes      | a11y text for the play button                                                                                   |
+| errorText    | String   | Yes      | content for error when an either the library or video cannot load                                               |
+| reportText   | String   | Yes      | text for report button                                                                                          |
+| onLoadError   | Callback | No       | triggered when there is a load error with video player or source, arguments: (Event)                            |
+| onPlay   | Callback | No       | triggered when playback starts, arguments: (Event, { player })                                                  |
+| onVolumeChange   | Callback | No       | triggered when volume is changed, arguments: (Event, { volume: number, muted: boolean })                        |
+| onReport   | Callback | No       | triggered when report button is clicked, no arguments                                                           |
+
+
+## EbayVideoSource Props
+
+| Name | Type   | Required | Description                                                                                                     |
+|------|--------|----------|-----------------------------------------------------------------------------------------------------------------|
+| src  | String | Yes      | video/playlist URL
+| type | String | No       | playlist type, `hls` or `dash`

package/ebay-video/const.d.ts

@@ -0,0 +1,9 @@
+export declare const ERROR_ANOTHER_LOAD = 7000;
+export declare const ERROR_NO_PLAYER = 11;
+export declare const defaultVideoConfig: {
+    addBigPlayButton: boolean;
+    addSeekBar: boolean;
+    controlPanelElements: string[];
+    overflowMenuButtons: string[];
+};
+//# sourceMappingURL=const.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../src/ebay-video/const.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,OAAO,CAAA;AACtC,eAAO,MAAM,eAAe,KAAK,CAAA;AACjC,eAAO,MAAM,kBAAkB;;;;;CAa9B,CAAA"}

package/ebay-video/const.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultVideoConfig = exports.ERROR_NO_PLAYER = exports.ERROR_ANOTHER_LOAD = void 0;
+// const MAX_RETRIES = 3
+// const DEFAULT_SPINNER_TIMEOUT = 2000
+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',
+        'fullscreen',
+        'overflow_menu'
+    ],
+    overflowMenuButtons: ['captions']
+};

package/ebay-video/controls.d.ts

@@ -0,0 +1,5 @@
+export declare function customControls(onReport?: () => void): {
+    Report: any;
+    TextSelection: any;
+};
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAC;IAAC,aAAa,MAAA;CAAE,CAiC7E"}

package/ebay-video/controls.js

@@ -0,0 +1,63 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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"));
+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 () { }; }
+    // Have to contain in order to not execute until shaka is downloaded
+    var Report = /** @class */ (function (_super) {
+        __extends(class_1, _super);
+        function class_1(parent, controls, text) {
+            var _this = _super.call(this, parent, controls) || this;
+            appendChild(_this.parent, react_1.default.createElement(reportButton_1.ReportButton, { onReport: onReport }, text));
+            return _this;
+        }
+        return class_1;
+    }(shaka_player_ui_1.ui.Element));
+    Report.Factory = /** @class */ (function () {
+        function class_2(reportText) {
+            this.reportText = reportText;
+        }
+        class_2.prototype.create = function (rootElement, controls) {
+            return new Report(rootElement, controls, this.reportText);
+        };
+        return class_2;
+    }());
+    var TextSelection = shaka_player_ui_1.ui.TextSelection;
+    TextSelection.Factory = /** @class */ (function () {
+        function Factory() {
+        }
+        /** @override */
+        // eslint-disable-next-line class-methods-use-this
+        Factory.prototype.create = function (rootElement, controls) {
+            return new shaka_player_ui_1.ui.TextSelection(rootElement, controls);
+        };
+        return Factory;
+    }());
+    return { Report: Report, TextSelection: TextSelection };
+}
+exports.customControls = customControls;
+function appendChild(container, reactElement) {
+    var tempEl = document.createElement('div');
+    react_dom_1.default.render(reactElement, tempEl);
+    container.appendChild(tempEl.firstChild);
+}

package/ebay-video/index.d.ts

@@ -0,0 +1,4 @@
+export { default as EbayVideo, EbayVideoProps } from './video';
+export { default as EbayVideoSource } from './source';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-video/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AACrD,cAAc,SAAS,CAAA"}

package/ebay-video/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var video_1 = require("./video");
+Object.defineProperty(exports, "EbayVideo", { enumerable: true, get: function () { return video_1.default; } });
+var source_1 = require("./source");
+Object.defineProperty(exports, "EbayVideoSource", { enumerable: true, get: function () { return source_1.default; } });
+__exportStar(require("./types"), exports);

package/ebay-video/reportButton.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+declare type Props = {
+    onReport: () => void;
+};
+export declare const ReportButton: FC<Props>;
+export {};
+//# sourceMappingURL=reportButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,aAAK,KAAK,GAAG;IACT,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CAIlC,CAAA"}

package/ebay-video/reportButton.js

@@ -0,0 +1,14 @@
+"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;
+var ebay_icon_1 = require("../ebay-icon");
+var react_1 = __importDefault(require("react"));
+exports.ReportButton = function (_a) {
+    var onReport = _a.onReport, children = _a.children;
+    return (react_1.default.createElement("button", { className: "video-player__report-button", onClick: onReport },
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "reportFlag" }),
+        children));
+};

package/ebay-video/source.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+export declare type EbayVideoSourceProps = ComponentProps<'source'>;
+declare const EbayVideoSource: FC<EbayVideoSourceProps>;
+export default EbayVideoSource;
+//# sourceMappingURL=source.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"source.d.ts","sourceRoot":"","sources":["../../src/ebay-video/source.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,oBAAY,oBAAoB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAE5D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAAyC,CAAA;AAEvF,eAAe,eAAe,CAAA"}

package/ebay-video/source.js

@@ -0,0 +1,33 @@
+"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)
+        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 });
+var react_1 = __importDefault(require("react"));
+var EbayVideoSource = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement("source", __assign({}, rest));
+};
+exports.default = EbayVideoSource;

package/ebay-video/types.d.ts

@@ -0,0 +1,8 @@
+export declare type VideoAction = 'play' | 'pause';
+export declare type VideoPlayView = 'inline' | 'fullscreen';
+export declare type VideoSourceType = 'dash' | 'hls';
+export declare type VideoSource = {
+    src: string;
+    type?: VideoSourceType;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-video/types.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG,MAAM,GAAG,OAAO,CAAA;AAC1C,oBAAY,aAAa,GAAG,QAAQ,GAAG,YAAY,CAAA;AAEnD,oBAAY,eAAe,GAAG,MAAM,GAAG,KAAK,CAAA;AAC5C,oBAAY,WAAW,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,eAAe,CAAA;CACzB,CAAA"}

package/ebay-video/types.js

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

package/ebay-video/video.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, FC, SyntheticEvent } from 'react';
+import 'shaka-player/dist/controls.css';
+import { VideoAction, VideoPlayView } from './types';
+export declare type EbayVideoProps = ComponentProps<'video'> & {
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    action?: VideoAction;
+    volume?: number;
+    muted?: boolean;
+    volumeSlider?: boolean;
+    playView?: VideoPlayView;
+    cdnUrl?: string;
+    cssUrl?: string;
+    cdnVersion?: string;
+    a11yLoadText: string;
+    a11yPlayText: string;
+    errorText: string;
+    reportText: string;
+    onLoadError?: (err: any) => void;
+    onPlay?: (e: SyntheticEvent, { player: any }: {
+        player: any;
+    }) => void;
+    onVolumeChange?: (e: SyntheticEvent, { volume: number, muted: boolean }: {
+        volume: any;
+        muted: any;
+    }) => void;
+    onReport?: () => void;
+};
+declare const EbayVideo: FC<EbayVideoProps>;
+export default EbayVideo;
+//# sourceMappingURL=video.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAA;AAG9F,OAAO,gCAAgC,CAAA;AAIvC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAKpD,oBAAY,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACnD,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,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;;KAAA,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE;;;KAAA,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA2NjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}

package/ebay-video/video.js

@@ -0,0 +1,220 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+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"));
+var shaka_player_ui_1 = __importDefault(require("shaka-player/dist/shaka-player.ui"));
+require("shaka-player/dist/controls.css");
+var component_utils_1 = require("../common/component-utils");
+var index_1 = require("../index");
+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, 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", "errorText", "onVolumeChange", "onLoadError", "onPlay", "onReport", "children"]);
+    var _h = react_1.useState(), loaded = _h[0], setLoaded = _h[1];
+    var _j = react_1.useState(), buffering = _j[0], setBuffering = _j[1];
+    var _k = react_1.useState(), playing = _k[0], setPlaying = _k[1];
+    var _l = react_1.useState(), failed = _l[0], setFailed = _l[1];
+    var containerRef = react_1.useRef(null);
+    var videoRef = react_1.useRef(null);
+    var playerRef = react_1.useRef(null);
+    var uiRef = react_1.useRef(null);
+    var sources = component_utils_1.filterByType(children, source_1.default).map(function (_a) {
+        var props = _a.props;
+        return props;
+    });
+    var handleError = function (err) {
+        setLoaded(true);
+        setFailed(true);
+        onLoadError(err);
+    };
+    var loadSource = function (index) {
+        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 () {
+            setFailed(false);
+        })
+            .catch(function (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);
+                    break;
+                default: {
+                    var nextIndex_1 = sources.length > index + 1 && index + 1;
+                    if (nextIndex_1) {
+                        setTimeout(function () { return loadSource(nextIndex_1); }, 0);
+                    }
+                    else {
+                        handleError(err);
+                    }
+                }
+            }
+        })
+            .finally(function () {
+            setLoaded(true);
+        });
+    };
+    react_1.useEffect(function () {
+        var video = videoRef.current;
+        var 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', function (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
+        });
+        var _a = controls_1.customControls(onReport), Report = _a.Report, TextSelection = _a.TextSelection;
+        shaka_player_ui_1.default.ui.Controls.registerElement('report', new Report.Factory(reportText));
+        shaka_player_ui_1.default.ui.Controls.registerElement('captions', new TextSelection.Factory());
+        loadSource();
+        hideSpinner(container);
+        // return () => {
+        //     playerRef.current.destroy()
+        //     uiRef.current.destroy()
+        // }
+    }, []);
+    react_1.useEffect(function () {
+        switch (action) {
+            case 'play':
+                videoRef.current.play();
+                break;
+            case 'pause':
+                videoRef.current.pause();
+                break;
+            default:
+        }
+    }, [action]);
+    var showControls = function () {
+        if (!uiRef.current)
+            return;
+        var updatedControls = volumeSlider ? {
+            controlPanelElements: withVolumeControl(const_1.defaultVideoConfig.controlPanelElements)
+        } : {};
+        uiRef.current.configure(__assign(__assign({}, const_1.defaultVideoConfig), updatedControls));
+        videoRef.current.controls = false;
+    };
+    var handlePlaying = function (e) {
+        e.stopPropagation();
+        showControls();
+        if (playView === 'fullscreen') {
+            videoRef.current.requestFullscreen();
+        }
+        setPlaying(true);
+        onPlay(e, { player: playerRef.current });
+    };
+    var handleOnPlayClick = function () {
+        videoRef.current.play();
+    };
+    var handleVolumeChange = function (e) {
+        var eventTarget = e.currentTarget;
+        onVolumeChange(e, { volume: eventTarget.volume, muted: eventTarget.muted });
+    };
+    var handleOnPause = function () {
+        // 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;
+    };
+    return (react_1.default.createElement("div", { style: { width: width + "px", height: height + "px" }, className: 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(index_1.EbayIcon, { name: "videoPlay" }))),
+        react_1.default.createElement("div", { className: "video-player__container", ref: containerRef },
+            react_1.default.createElement("video", __assign({ ref: videoRef, style: { width: width + "px", height: height + "px" }, poster: thumbnail, muted: muted || false, onPlaying: handlePlaying, onPause: handleOnPause, onVolumeChange: handleVolumeChange }, rest), sources.map(function (source) {
+                react_1.default.createElement("source", __assign({}, source));
+            }))),
+        react_1.default.createElement("div", { className: classnames_1.default('video-player__overlay', { 'video-player__overlay--hidden': !failed }) },
+            react_1.default.createElement(index_1.EbayIcon, { name: "attention" }),
+            react_1.default.createElement("div", { className: "video-player__overlay-text" }, errorText)),
+        react_1.default.createElement("div", { className: classnames_1.default('video-player__overlay', {
+                'video-player__overlay--hidden': loaded && (failed || !buffering)
+            }) },
+            react_1.default.createElement(index_1.EbayProgressSpinner, { size: "large", "aria-label": a11yLoadText }))));
+};
+function withVolumeControl(controls) {
+    var insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length;
+    var controlsWithVolume = __spreadArrays(controls);
+    controlsWithVolume.splice(insertAt, 0, 'volume');
+    return controlsWithVolume;
+}
+function hideSpinner(container) {
+    var shakaSpinner = container.querySelectorAll('.shaka-spinner')[0];
+    if (shakaSpinner) {
+        shakaSpinner.setAttribute('hidden', '');
+    }
+}
+exports.default = EbayVideo;

package/index.d.ts

@@ -39,4 +39,5 @@ export { EbaySnackbarDialog, EbaySnackbarDialogAction, EbaySnackbarDialogProps }
 export { EbayField, EbayLabel, EbayFieldDescription, FieldLayoutType, FieldDescriptionType, FieldDescriptionPosition, LabelPosition } from './ebay-field';
 export { EbayProgressStepper, EbayProgressStep, EbayProgressTitle, StepperDirection, StepState } from './ebay-progress-stepper';
 export { EbayListboxButton, EbayListboxButtonOption } from './ebay-listbox-button';
+export { EbayVideo, EbayVideoProps, EbayVideoSource } from './ebay-video';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -121,3 +121,6 @@ Object.defineProperty(exports, "EbayProgressTitle", { enumerable: true, get: fun
 var ebay_listbox_button_1 = require("./ebay-listbox-button");
 Object.defineProperty(exports, "EbayListboxButton", { enumerable: true, get: function () { return ebay_listbox_button_1.EbayListboxButton; } });
 Object.defineProperty(exports, "EbayListboxButtonOption", { enumerable: true, get: function () { return ebay_listbox_button_1.EbayListboxButtonOption; } });
+var ebay_video_1 = require("./ebay-video");
+Object.defineProperty(exports, "EbayVideo", { enumerable: true, get: function () { return ebay_video_1.EbayVideo; } });
+Object.defineProperty(exports, "EbayVideoSource", { enumerable: true, get: function () { return ebay_video_1.EbayVideoSource; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "description": "Skin components build off React",
   "main": "index.js",
   "types": "index.d.ts",
@@ -43,7 +43,8 @@
   "peerDependencies": {
     "@ebay/skin": "^15.2.0",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "shaka-player": "^4.3.2"
   },
   "dependencies": {
     "classnames": "^2.2.6",
@@ -92,6 +93,7 @@
     "react": "^16.0.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.0.0",
+    "shaka-player": "^4.3.2",
     "storybook-addon-jsx": "^7.3.14",
     "style-loader": "^2.0.0",
     "svgson": "^4.0.0",