@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-video/controls.tsx

@@ -1,42 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,4 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,291 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,42 +0,0 @@
-{
-  "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

@@ -1,50 +0,0 @@
-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()],
-        },
-    },
-});