ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
277 lines (276 loc) • 9.12 kB
TypeScript
import { SyncHook } from 'ranuts/utils';
import '../../assets/js/hls.js';
import type { Progress } from '@/components/progress';
import '@/components/select';
import { type PlayerControllerElements, type PlayerControllerHandlers } from './core/controller';
import { type PlaybackSnapshot } from './core/playback';
import { type PlayerMediaHandlers } from './core/media';
import { type PlayerRuntimeState } from './core/state';
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;
_playerController: HTMLDivElement;
_playerBtn: HTMLDivElement;
_progress: HTMLDivElement;
_progressDot: HTMLDivElement;
_progressWrap: HTMLDivElement;
_progressWrapBuffer: HTMLDivElement;
_progressWrapValue: HTMLDivElement;
requestAnimationFrameId?: number;
moveProgress: {
percentage: number;
mouseDown: boolean;
};
_isSeeking: boolean;
_wasPlayingBeforeSeek: boolean;
_isBuffering: boolean;
_isSwitchingSource: 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;
_shadowDom: ShadowRoot;
_volume?: number;
_video?: HTMLVideoElement;
_hls?: HlsPlayer;
_pendingPlaybackRestore?: PlaybackSnapshot;
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);
get sheet(): string;
set sheet(value: string);
handlerExternalCss: () => void;
getRuntimeState: () => PlayerRuntimeState<PlaybackSnapshot>;
applyRuntimeState: (state: PlayerRuntimeState<PlaybackSnapshot>) => void;
resetTransientState: () => void;
capturePlaybackSnapshot: () => PlaybackSnapshot;
restorePlaybackSnapshot: (snapshot: PlaybackSnapshot) => 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;
getMediaHandlers: () => PlayerMediaHandlers;
clearListenerEvent: () => void;
/**
* @description: 用户行为和 video 之间的交互
* @return {*}
*/
listenEvent: () => void;
showControllerBar: (e?: MouseEvent) => void;
setLoadingState: (loading: boolean) => void;
updateBufferedProgress: () => void;
syncProgressByPercentage: (percentage: number) => void;
seekToPercentage: (percentage: number) => 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;
progressDotMouseMoveDocument: (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;
safePlay: (showLoading: boolean) => void;
play: (n?: number) => void;
pause: () => void;
getControllerElements: () => PlayerControllerElements;
getControllerHandlers: () => PlayerControllerHandlers;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(k: string, o: string, n: string): void;
}
declare const _default: typeof RanPlayer;
export default _default;