ranui/dist/components/player/index.d.ts

UI Component library based on `Web Component`

import { SyncHook } from 'ranuts/utils';
import '@/assets/js/hls.js';
import type { Progress } from '@/components/progress';
import '@/components/select';
import './index.less';
type Callback = (...args: unknown[]) => unknown;
type EventName = string | symbol;
type EventItem = {
    name?: string | symbol;
    callback: Callback;
    initialCallback?: Callback;
};
export declare class SHook {
    private _events;
    constructor();
    tap: (eventName: EventName, eventItem: EventItem | Callback) => void;
    call: (eventName: EventName, ...args: Array<unknown>) => void;
    callSync: (eventName: EventName, ...args: Array<unknown>) => Promise<void>;
    once: (eventName: EventName, eventItem: EventItem | Callback) => void;
    off: (eventName: EventName, eventItem: EventItem | Callback) => void;
}
export interface HlsPlayer {
    startLoad(): () => void;
    off: (s: string, f: Function) => void;
    on: (s: string, f: Function) => void;
    loadSource: (s: string) => void;
    attachMedia: (v: HTMLVideoElement) => void;
    destroy: () => void;
}
export interface Level {
    audioCodec: string;
    bitrate: number;
    height: number;
    width: number;
    name: string;
    url: string;
    videoCodec: string;
}
export interface Context {
    action: SyncHook;
    currentState: string;
    duration: number;
    currentTime: number;
    volume: number;
    playbackRate: number;
    fullScreen: boolean;
    levels: Partial<Level>[];
    url: string;
    levelMap: Map<string, string>;
    clarity: string;
}
interface Hls {
    Events: {
        MANIFEST_LOADED: 'hlsManifestLoaded';
        ERROR: 'error';
    };
    isSupported: () => boolean;
}
type HLS = Hls & (new () => HlsPlayer);
declare global {
    interface Window {
        Hls: HLS;
    }
}
declare const RanPlayer_base: {
    new (): HTMLElement;
    prototype: HTMLElement;
};
export declare class RanPlayer extends RanPlayer_base {
    ctx: Context;
    _player: HTMLDivElement;
    _container: HTMLDivElement;
    _slot: HTMLSlotElement;
    _playerController: HTMLDivElement;
    _playerBtn: HTMLDivElement;
    _progress: HTMLDivElement;
    _progressDot: HTMLDivElement;
    _progressWrap: HTMLDivElement;
    _progressWrapValue: HTMLDivElement;
    requestAnimationFrameId?: number;
    moveProgress: {
        percentage: number;
        mouseDown: boolean;
    };
    _playerControllerBottom: HTMLDivElement;
    _playerControllerBottomRight: HTMLDivElement;
    _playerControllerBottomLeft: HTMLDivElement;
    _playerControllerBottomPlayBtn: HTMLDivElement;
    _playerControllerBottomTimeCurrent: HTMLDivElement;
    _playerControllerBottomTimeDuration: HTMLDivElement;
    _playerControllerBottomTimeDivide: HTMLDivElement;
    _playControllerBottomClarity: HTMLElement;
    _playControllerBottomSpeed: HTMLDivElement;
    _playControllerBottomSpeedIcon: HTMLDivElement;
    _playControllerBottomVolumeProgress: Progress;
    _playControllerBottomRightFullScreen: HTMLDivElement;
    _playControllerBottomVolume: HTMLDivElement;
    _playControllerBottomSpeedPopover: HTMLElement;
    controllerBarTimeId?: NodeJS.Timeout;
    _playerTip: HTMLDivElement;
    _playerTipTime: HTMLDivElement;
    _playerTipText: HTMLDivElement;
    _volume?: number;
    _video?: HTMLVideoElement;
    _hls?: HlsPlayer;
    static get observedAttributes(): string[];
    /**
     * @description: 初始化 view 和 video 的全局上下文
     * @return {*}
     */
    constructor();
    get src(): string;
    set src(value: string);
    get debug(): string;
    set debug(value: string);
    get volume(): string;
    set volume(value: string);
    get currentTime(): string;
    set currentTime(value: string);
    get playbackRate(): string;
    set playbackRate(value: string);
    changeClarityToSetVideo: () => void;
    changeClarity: (e: Event) => void;
    createClaritySelect: () => void;
    manifestLoaded: (type: string, data: {
        levels: Level[];
        url: string;
    }) => void;
    /**
     * @description: 初始化 video 和更新 video 方法
     * @return {*}
     */
    updatePlayer: () => void;
    hlsError: (event: unknown, data: unknown) => void;
    change: (name: string, value: unknown) => void;
    onCanplay: (e: Event) => void;
    onCanplaythrough: (e: Event) => void;
    onComplete: (e: Event) => void;
    onDurationchange: (e: Event) => void;
    onEmptied: (e: Event) => void;
    onEnded: (e: Event) => void;
    onError: (e: Event) => void;
    onLoadedmetadata: (e: Event) => void;
    onLoadstart: (e: Event) => void;
    onProgress: (e: Event) => void;
    onRatechange: (e: Event) => void;
    onSeeked: (e: Event) => void;
    onSeeking: (e: Event) => void;
    onStalled: (e: Event) => void;
    onSuspend: (e: Event) => void;
    onLoadeddata: (e: Event) => void;
    onTimeupdate: (e: Event) => void;
    onVolumechange: (e: Event) => void;
    onWaiting: (e: Event) => void;
    onPlay: (e: Event) => void;
    onPlaying: (e: Event) => void;
    onPause: (e: Event) => void;
    clearListenerEvent: () => void;
    /**
     * @description: 用户行为和 video 之间的交互
     * @return {*}
     */
    listenEvent: () => void;
    showControllerBar: (e?: MouseEvent) => void;
    /**
     * @description: 进度条点击事件
     * @param {MouseEvent} e
     * @return {*}
     */
    progressClick: (e: MouseEvent) => void;
    /**
     * @description: 进度条鼠标按下事件
     * @param {MouseEvent} e
     * @return {*}
     */
    progressDotMouseDown: () => void;
    /**
     * @description: 进度条鼠标移动事件
     * @param {MouseEvent} e
     * @return {*}
     */
    progressDotMouseMove: (e: MouseEvent) => void;
    /**
     * @description: 进度条鼠标松开事件
     * @param {MouseEvent} e
     * @return {*}
     */
    progressDotMouseUp: () => void;
    /**
     * @description: 更新页面样式
     * @param {Function} fn
     * @return {*}
     */
    requestAnimationFrame: (fn: Function) => void;
    /**
     * @description: 取消页面动画
     * @param {Function} fn
     * @return {*}
     */
    cancelAnimationFrame: () => void;
    /**
     * @description: 更新进度条
     * @param {*} void
     * @return {*}
     */
    updateCurrentProgress: () => void;
    changeAttribute: (k: string, o: string, n: string, attribute: string, callback: Function) => void;
    /**
     * @description: 点击整个视频时，触发的事件
     * @param {*} void
     * @return {*}
     */
    dispatchClickPlayerContainerAction: (e: Event) => void;
    /**
     * @description: 空格事件
     * @param {KeyboardEvent} e
     * @return {*}
     */
    SpaceKeyDown: (e: KeyboardEvent) => void;
    /**
     * @description: 点击 player-btn，触发的事件
     * @param {*} void
     * @return {*}
     */
    dispatchClickPlayerBtnAction: (e: Event) => void;
    changeVolumeProgress: (e: Event) => void;
    customRequestFullscreen: () => Promise<void>;
    customExitFullscreen: () => Promise<void>;
    openFullScreen: () => void;
    changeSpeed: (e: Event) => void;
    progressMouseEnter: (e: MouseEvent) => void;
    progressMouseLeave: (e: MouseEvent) => void;
    progressMouseMove: (e: MouseEvent) => void;
    changePlayerVolume: () => void;
    resize: () => void;
    fullScreenChange: () => void;
    getPlaybackRate: () => number;
    setPlaybackRate: (n: number) => number;
    setVolume: (n: number) => number;
    getVolume: () => number;
    setCurrentTime: (n: number) => number;
    getCurrentTime: () => number;
    getTotalTime: () => number;
    play: (n?: number) => void;
    pause: () => void;
    connectedCallback(): void;
    disconnectCallback(): void;
}
declare const _default: typeof RanPlayer | undefined;
export default _default;