@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-video/controls.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+// need that for broken definitions workaround
+// @ts-ignore
+import { ui } from 'shaka-player/dist/shaka-player.ui'
+import { ReportButton } from './reportButton'
+
+export function customControls(onReport = () => {}): { Report: any } {
+    // Have to contain in order to not execute until shaka is downloaded
+    // eslint-disable-next-line no-extra-parens
+    const Report = class extends (ui.Element as any) {
+        constructor(parent, controls, text) {
+            super(parent, controls)
+
+
+            const tempEl: HTMLElement = 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)
+            }
+            createRoot(tempEl).render(<ReportButton callback={buttonCallback}>{text}</ReportButton>)
+        }
+    }
+
+    Report.Factory = class {
+        private readonly reportText: string
+
+        constructor(reportText) {
+            this.reportText = reportText
+        }
+
+        create(rootElement, controls) {
+            return new Report(rootElement, controls, this.reportText)
+        }
+    }
+
+    return { Report }
+}

package/src/ebay-video/index.ts

@@ -0,0 +1,9 @@
+export { default as EbayVideo, type EbayVideoProps } from './video'
+export { default as EbayVideoSource } from './source'
+export type {
+    VideoAction,
+    VideoPlayView,
+    VideoSourceType,
+    VideoSource,
+    Player
+} from './types'

package/src/ebay-video/reportButton.tsx

@@ -0,0 +1,13 @@
+import React, { JSX, ReactNode } from 'react'
+import { EbayIcon } from '../ebay-icon'
+
+type ReportButtonProps = {
+    callback?: (button: HTMLElement) => void;
+    children?: ReactNode;
+}
+
+export const ReportButton = ({ callback, children }: ReportButtonProps): JSX.Element => (
+    <button className="video-player__report-button" ref={callback}>
+        <EbayIcon name="flag24" />{children}
+    </button>
+)

package/src/ebay-video/shaka-player.d.ts

@@ -0,0 +1,4 @@
+// This is a stub until shaka provides proper types. Current shaka definitions are broken.
+declare module 'shaka-player'
+declare module 'shaka-player/dist/shaka-player.ui'
+declare module 'shaka-player/dist/shaka-player.ui.debug'

package/src/ebay-video/source.tsx

@@ -0,0 +1,7 @@
+import React, { ComponentProps, FC } from 'react'
+
+export type EbayVideoSourceProps = ComponentProps<'source'>;
+
+const EbayVideoSource: FC<EbayVideoSourceProps> = ({ ...rest }) => <source {...rest} />
+
+export default EbayVideoSource

package/src/ebay-video/types.ts

@@ -0,0 +1,10 @@
+export type VideoAction = 'play' | 'pause'
+export type VideoPlayView = 'inline' | 'fullscreen'
+
+export type VideoSourceType = 'dash' | 'hls'
+export type VideoSource = {
+    src: string;
+    type?: VideoSourceType
+}
+
+export type Player = Record<string, any>

package/src/ebay-video/video.tsx

@@ -0,0 +1,291 @@
+import React, { ComponentProps, FC, SyntheticEvent, MouseEvent, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+// need that for broken definitions workaround
+// @ts-ignore
+import shaka from 'shaka-player/dist/shaka-player.ui'
+
+import { filterByType } from '../common/component-utils'
+import { EbayIcon } from '../ebay-icon'
+import { EbayProgressSpinner } from '../ebay-progress-spinner'
+import { Player, VideoAction, VideoPlayView } from './types'
+import EbayVideoSource from './source'
+import { defaultVideoConfig, ERROR_ANOTHER_LOAD, ERROR_NO_PLAYER } from './const'
+import { customControls } from './controls'
+import { EbayEventHandler } from '../common/event-utils/types'
+
+export type PlayEventProps = {
+    player: Player;
+}
+export type VolumeChangeProps = {
+    volume: number;
+    muted: boolean;
+}
+export type EbayVideoProps = Omit<ComponentProps<'video'>, 'onPlay' | 'onVolumeChange'> & {
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    action?: VideoAction;
+    volume?: number;
+    muted?: boolean;
+    volumeSlider?: boolean;
+    hideReportButton?: boolean;
+    playView?: VideoPlayView;
+    // todo: implement CDN support
+    cdnUrl?: string;
+    cssUrl?: string;
+    cdnVersion?: string;
+    //
+    a11yLoadText: string;
+    a11yPlayText: string;
+    errorText: string;
+    reportText?: string;
+    onLoadError?: (err: Error) => void;
+    onPlay?: EbayEventHandler<HTMLVideoElement, PlayEventProps>;
+    onVolumeChange?: EbayEventHandler<HTMLVideoElement, VolumeChangeProps>;
+    onReport?: (event?: MouseEvent<HTMLButtonElement>) => void;
+};
+
+const EbayVideo: FC<EbayVideoProps> = ({
+    width,
+    height,
+    thumbnail,
+    action,
+    muted,
+    playView = 'inline',
+    a11yLoadText,
+    a11yPlayText,
+    reportText,
+    volumeSlider,
+    volume = 1,
+    hideReportButton,
+    errorText,
+    onVolumeChange = () => {
+    },
+    onLoadError = () => {
+    },
+    onPlay = () => {
+    },
+    onReport = () => {
+    },
+    children,
+    ...rest
+}) => {
+    const [loaded, setLoaded] = useState<boolean>()
+    const [buffering, setBuffering] = useState<boolean>()
+    const [playing, setPlaying] = useState<boolean>()
+    const [failed, setFailed] = useState<boolean>()
+
+    const containerRef = useRef<HTMLDivElement>(null)
+    const videoRef = useRef<HTMLVideoElement>(null)
+    const playerRef = useRef<Player>(null)
+    const uiRef = useRef(null)
+
+    const sources = filterByType(children, EbayVideoSource).map(({ props }) => props)
+
+    const handleError = (err: Error) => {
+        setLoaded(true)
+        setFailed(true)
+        onLoadError(err)
+    }
+
+    const loadSource = (index = 0) => {
+        if (!sources.length || !playerRef.current) return
+
+        setLoaded(false)
+        playerRef.current
+            .load(sources[index]?.src)
+            .then(() => {
+                setFailed(false)
+            })
+            .catch(err => {
+                console.error(err)
+                switch (err.code) {
+                    case ERROR_ANOTHER_LOAD:
+                        return
+                    case 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)
+            })
+    }
+
+    useEffect(() => {
+        const video = videoRef.current
+        const container = containerRef.current
+        if (!video || !container) return
+
+        video.volume = volume
+
+        shaka.polyfill.installAll() // todo: check if we need that
+
+        playerRef.current = new shaka.Player(video)
+        if (!playerRef.current) return
+
+        playerRef.current.addEventListener('error', handleError)
+        playerRef.current.addEventListener('buffering', (e) => {
+            setBuffering(e.buffering)
+        })
+
+        uiRef.current = new shaka.ui.Overlay(
+            playerRef.current,
+            container,
+            video,
+            reportText
+        )
+        uiRef.current.configure({
+            addBigPlayButton: true,
+            controlPanelElements: [],
+            addSeekBar: false
+        })
+
+        if (!hideReportButton) {
+            const { Report } = customControls(onReport)
+            shaka.ui.Controls.registerElement('report', new Report.Factory(reportText))
+        }
+
+        loadSource()
+        hideSpinner(container)
+
+        // return () => {
+        //     playerRef.current.destroy()
+        //     uiRef.current.destroy()
+        // }
+    }, [])
+
+    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(defaultVideoConfig.controlPanelElements)
+        } : {}
+
+        uiRef.current.configure({
+            ...defaultVideoConfig,
+            ...updatedControls
+        })
+        videoRef.current.controls = false
+    }
+
+    const handlePlaying = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+        e.stopPropagation()
+
+        showControls()
+
+        if (playView === 'fullscreen') {
+            videoRef.current.requestFullscreen()
+        }
+
+        setPlaying(true)
+        onPlay(e, { player: playerRef.current })
+    }
+
+    const handleOnPlayClick = () => {
+        videoRef.current.play()
+    }
+
+    const handleVolumeChange = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+        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 (
+        <div
+            style={style}
+            className={classNames('video-player', { 'video-player--poster': !playing })}
+        >
+            {!playing && loaded && !failed && !buffering &&
+                <div className="shaka-play-button-container">
+                    <button
+                        onClick={handleOnPlayClick}
+                        className="shaka-play-button"
+                        style={{ opacity: 1, zIndex: 999 }}
+                        aria-label={a11yPlayText}
+                    >
+                        <EbayIcon name="playFilled64Colored" />
+                    </button>
+                </div>
+            }
+            <div
+                className="video-player__container"
+                ref={containerRef}
+            >
+                <video
+                    ref={videoRef}
+                    style={style}
+                    poster={thumbnail}
+                    muted={muted || false}
+                    onPlaying={handlePlaying}
+                    onPause={handleOnPause}
+                    onVolumeChange={handleVolumeChange}
+                    {...rest}
+                >
+                    {sources.map((source, i) => <source key={i} {...source} />)}
+                </video>
+            </div>
+            <div className={classNames('video-player__overlay', { 'video-player__overlay--hidden': !failed })}>
+                <EbayIcon name="attention64" />
+                <div className="video-player__overlay-text">
+                    {errorText}
+                </div>
+            </div>
+            <div className={classNames('video-player__overlay', {
+                'video-player__overlay--hidden': loaded && (failed || !buffering)
+            })}>
+                <EbayProgressSpinner size="large" aria-label={a11yLoadText} />
+            </div>
+        </div>
+    )
+}
+
+function withVolumeControl(controls: string[]): string[] {
+    const insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length
+    const controlsWithVolume = [...controls]
+    controlsWithVolume.splice(insertAt, 0, 'volume')
+    return controlsWithVolume
+}
+
+function hideSpinner(container: HTMLDivElement) {
+    const shakaSpinner = container.querySelectorAll('.shaka-spinner')[0]
+    if (shakaSpinner) {
+        shakaSpinner.setAttribute('hidden', '')
+    }
+}
+
+export default EbayVideo

package/src/events/index.ts

@@ -0,0 +1,30 @@
+export {
+    addEventListener,
+    handleActionKeydown,
+    handleEnterKeydown,
+    handleEscapeKeydown,
+    handleLeftRightArrowsKeydown,
+    handleResize,
+    handleTextInput,
+    handleUpDownArrowsKeydown,
+    isActionKey,
+    preventDefaultIfHijax,
+    removeEventListener,
+    wrapEvent
+} from '../common/event-utils'
+
+export type {
+    EbayChangeEventHandler,
+    EbayEventHandler,
+    EbayFocusEventHandler,
+    EbayKeyboardEventHandler,
+    EbayMouseEventHandler
+} from '../common/event-utils/types'
+
+export {
+    default as useKeyPress
+} from '../common/event-utils/use-key-press'
+
+export {
+    default as useRovingIndex
+} from '../common/event-utils/use-roving-index'

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+export { useRandomId } from '../common/random-id'
+export { debounce } from '../common/debounce'
+export { withForwardRef } from '../common/component-utils/forwardRef'
+export {
+    excludeComponent,
+    filterBy,
+    filterByType,
+    findComponent
+} from '../common/component-utils/utils'

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": [
+        "dom",
+        "es2020",
+        "dom.iterable"
+    ],
+    "allowJs": false,
+    "checkJs": false,
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": false, // 21 errors
+    "strictNullChecks": false, // 150+ errors
+    "strictPropertyInitialization": false,
+    "useUnknownInCatchVariables": true,
+    "noImplicitAny": false, // 300+ errors
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "types": ["@testing-library/jest-dom"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/__tests__/*"
+  ]
+}

package/vite.config.mjs

@@ -0,0 +1,50 @@
+import fs from "node:fs";
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { nodeExternals } from "rollup-plugin-node-externals";
+import typescript from "@rollup/plugin-typescript";
+
+// find directories in src that starts with 'ebay-'
+let componentEntries = fs
+    .readdirSync("./src")
+    .filter((file) => fs.statSync(`./src/${file}`).isDirectory() && file.startsWith("ebay-"))
+    .reduce((acc, componentName) => {
+        acc[componentName] = resolve(__dirname, `src/${componentName}/index.ts`);
+        return acc;
+    }, {
+        events: resolve(__dirname, 'src/events/index.ts'),
+        utils: resolve(__dirname, 'src/utils/index.ts'),
+
+        // DEPRECATED (should be used internally only)
+        'common/component-utils': resolve(__dirname, 'src/common/component-utils/index.ts'),
+        'common/component-utils/forwardRef': resolve(__dirname, 'src/common/component-utils/forwardRef.tsx'),
+        'common/component-utils/utils': resolve(__dirname, 'src/common/component-utils/utils.ts'),
+        'common/event-utils': resolve(__dirname, 'src/common/event-utils/index.ts'),
+        'common/floating-label-utils/hooks': resolve(__dirname, 'src/common/floating-label-utils/hooks.tsx'),
+        'common/notice-utils/notice-cta': resolve(__dirname, 'src/common/notice-utils/notice-cta.tsx'),
+        'common/random-id': resolve(__dirname, 'src/common/random-id.ts'),
+        'common/tooltip-utils': resolve(__dirname, 'src/common/tooltip-utils/index.ts'),
+        'common/tooltip-utils/constants': resolve(__dirname, 'src/common/tooltip-utils/constants.ts'),
+        'ebay-radio/radio': resolve(__dirname, 'src/ebay-radio/radio.tsx'),
+        'ebay-fake-menu-button/menu-button': resolve(__dirname, 'src/ebay-fake-menu-button/menu-button.tsx'),
+        'ebay-fake-menu/menu-item': resolve(__dirname, 'src/ebay-fake-menu/menu-item.tsx'),
+        'ebay-dialog-base/components/animation': resolve(__dirname, 'src/ebay-dialog-base/components/animation.ts'),
+        'ebay-dialog-base/components/dialog-footer': resolve(__dirname, 'src/ebay-dialog-base/components/dialog-footer.tsx'),
+        'ebay-dialog-base/components/dialog-header': resolve(__dirname, 'src/ebay-dialog-base/components/dialog-header.tsx'),
+    });
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: componentEntries,
+            fileName: "[name]/index",
+            // Use CommonJS only until we upgrade all packages that uses ui-core-react to use ESM.
+            // If we use ESM, the bundle might have both ESM and CJS, which will increase the bundle size,
+            // and might cause reference issues.
+            formats: ["cjs"],
+        },
+        rollupOptions: {
+            plugins: [nodeExternals(), typescript()],
+        },
+    },
+});

package/ebay-dialog-base/components/animation/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");function m({open:n,classPrefix:t,transitionElement:r,dialogRef:e,dialogWindowRef:c,enabled:a,onTransitionEnd:u}){const s=d.useRef(!0);d.useLayoutEffect(()=>{if(!a)return;let i=[c,e];r==="window"?i=[c]:r==="root"&&(i=[e]);let o;return n?o=l({dialog:e,waitFor:i,classPrefix:t,onTransitionEnd:u}):s.current||(o=A({dialog:e,waitFor:i,classPrefix:t,onTransitionEnd:u})),s.current=!1,()=>{o&&o()}},[n,a])}function l({dialog:n,waitFor:t,classPrefix:r,onTransitionEnd:e}){return w(n,t,`${r}--show`,e)}function A({dialog:n,waitFor:t,classPrefix:r,onTransitionEnd:e}){return w(n,t,`${r}--hide`,e)}function w(n,t,r,e){if(!n.current||!r)return;let c=0;const a=t?t.length:0,u=`${r}-init`;return n.current.classList.add(u),v(()=>{n.current&&(n.current.classList.add(r),n.current.classList.remove(u),t.forEach(s=>{const i=()=>{var o,f;++c===a&&((o=n.current)==null||o.classList.remove(r),e(),(f=s.current)==null||f.removeEventListener("transitionend",i))};s.current.addEventListener("transitionend",i,{once:!0})}))})}function v(n){let t,r;return window.requestAnimationFrame?(t=window.requestAnimationFrame(()=>{t=window.requestAnimationFrame(n)}),r=window.cancelAnimationFrame):(t=window.setTimeout(n,26),r=window.clearTimeout),()=>{t&&(r(t),t=void 0)}}exports.useDialogAnimation=m;

package/ebay-dialog-base/components/animation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/animation.ts"],"names":[],"mappings":"AAWA,UAAU,wBAAwB;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,OAAO,EACP,eAAe,EAClB,EAAE,wBAAwB,GAAG,IAAI,CA0CjC"}