@ebay/ui-core-react 4.2.6 → 5.0.1

package/ebay-video/README.md

@@ -37,14 +37,16 @@ import 'shaka-player/dist/controls.css'
 | 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                                                           |
+## Callbacks
+| Name           | Required | Description                                                      | Arguments                                   |
+|----------------|----------|------------------------------------------------------------------|---------------------------------------------|
+| onLoadError    | No       | triggered when there is a load error with video player or source | (Event)                                     |
+| onPlay         | No       | triggered when playback starts                                   | (Event, { player })                         |
+| onVolumeChange | No       | triggered when volume is changed                                 | (Event, { volume: number, muted: boolean }) |
+| onReport       | No       | triggered when report button is clicked                          |                                             |
 
 
 ## EbayVideoSource Props
-
 | Name | Type   | Required | Description                                                                                                     |
 |------|--------|----------|-----------------------------------------------------------------------------------------------------------------|
 | src  | String | Yes      | video/playlist URL

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

@@ -1 +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,MAAA;CAAE,CAuB9D"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,CA0B9D"}

package/ebay-video/controls.js

@@ -28,7 +28,10 @@ function customControls(onReport) {
         __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, { onReport: onReport }, text));
+            appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton, null, text), function (button) {
+                // have to listen to clicks this way (React onClick will not work):
+                _this.eventManager.listen(button, 'click', onReport);
+            });
             return _this;
         }
         return class_1;
@@ -45,8 +48,11 @@ function customControls(onReport) {
     return { Report: Report };
 }
 exports.customControls = customControls;
-function appendChild(container, reactElement) {
+function appendChild(container, reactElement, callback) {
     var tempEl = document.createElement('div');
-    react_dom_1.default.render(reactElement, tempEl);
-    container.appendChild(tempEl.firstChild);
+    react_dom_1.default.render(reactElement, tempEl, function () {
+        var child = tempEl.firstChild;
+        container.appendChild(child);
+        callback(child);
+    });
 }

package/ebay-video/reportButton.d.ts

@@ -1,7 +1,3 @@
 import { FC } from 'react';
-declare type Props = {
-    onReport: () => void;
-};
-export declare const ReportButton: FC<Props>;
-export {};
+export declare const ReportButton: FC;
 //# 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":"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"}
+{"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"}

package/ebay-video/reportButton.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportButton = void 0;
-var ebay_icon_1 = require("../ebay-icon");
 var react_1 = __importDefault(require("react"));
+var ebay_icon_1 = require("../ebay-icon");
 exports.ReportButton = function (_a) {
-    var onReport = _a.onReport, children = _a.children;
-    return (react_1.default.createElement("button", { className: "video-player__report-button", onClick: onReport },
+    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));
 };

package/ebay-video/video.d.ts

@@ -1,6 +1,14 @@
-import { ComponentProps, FC, SyntheticEvent } from 'react';
+import { ComponentProps, FC, MouseEvent } from 'react';
 import { VideoAction, VideoPlayView } from './types';
-export declare type EbayVideoProps = ComponentProps<'video'> & {
+import { EbayEventHandler } from '../common/event-utils/types';
+export declare type PlayEventProps = {
+    player: Player;
+};
+export declare type VolumeChangeProps = {
+    volume: number;
+    muted: boolean;
+};
+export declare type EbayVideoProps = Omit<ComponentProps<'video'>, 'onPlay' | 'onVolumeChange'> & {
     width?: number;
     height?: number;
     thumbnail?: string;
@@ -18,14 +26,9 @@ export declare type EbayVideoProps = ComponentProps<'video'> & {
     errorText: string;
     reportText?: string;
     onLoadError?: (err: Error) => void;
-    onPlay?: (e: SyntheticEvent, { player: Player }: {
-        player: any;
-    }) => void;
-    onVolumeChange?: (e: SyntheticEvent, { volume: number, muted: boolean }: {
-        volume: any;
-        muted: any;
-    }) => void;
-    onReport?: () => void;
+    onPlay?: EbayEventHandler<HTMLVideoElement, PlayEventProps>;
+    onVolumeChange?: EbayEventHandler<HTMLVideoElement, VolumeChangeProps>;
+    onReport?: (event?: MouseEvent<HTMLButtonElement>) => void;
 };
 declare const EbayVideo: FC<EbayVideoProps>;
 export default EbayVideo;

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,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAA;AAO9F,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,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,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;;KAAA,KAAK,IAAI,CAAC;IACzD,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,CAkOjC,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;AAO1G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,oBAAY,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AACD,oBAAY,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAA;AACD,oBAAY,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"}

package/ebay-video/video.js

@@ -182,7 +182,10 @@ var EbayVideo = function (_a) {
     };
     var handleVolumeChange = function (e) {
         var eventTarget = e.currentTarget;
-        onVolumeChange(e, { volume: eventTarget.volume, muted: eventTarget.muted });
+        onVolumeChange(e, {
+            volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
+            muted: eventTarget.muted
+        });
     };
     var handleOnPause = function () {
         // On IOS, the controls force showing up if the video exist fullscreen while playing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "4.2.6",
+  "version": "5.0.1",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"