@nikelroot/video-player 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -0
- package/dist/index.cjs +1361 -0
- package/dist/index.d.cts +87 -0
- package/dist/index.d.ts +87 -0
- package/dist/index.js +1340 -0
- package/package.json +50 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { HlsConfig } from 'hls.js';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type ControlsVariant = 'full' | 'fullscreen-only' | 'tiny' | 'none';
|
|
5
|
+
|
|
6
|
+
type PointerHandler = (e: React.PointerEvent<HTMLElement>) => void;
|
|
7
|
+
interface VideoPlayerHandle {
|
|
8
|
+
play: () => Promise<void>;
|
|
9
|
+
pause: () => void;
|
|
10
|
+
seek: (time: number) => void;
|
|
11
|
+
fullscreen: () => void;
|
|
12
|
+
getVideoElement: () => HTMLVideoElement | null;
|
|
13
|
+
}
|
|
14
|
+
interface VideoPlayerMessages {
|
|
15
|
+
defaultError?: string;
|
|
16
|
+
aborted?: string;
|
|
17
|
+
network?: string;
|
|
18
|
+
decode?: string;
|
|
19
|
+
unsupported?: string;
|
|
20
|
+
playFailed?: string;
|
|
21
|
+
streamLoadFailed?: string;
|
|
22
|
+
streamDecodeFailed?: string;
|
|
23
|
+
retry?: string;
|
|
24
|
+
}
|
|
25
|
+
interface VideoPlayerActiveChangePayload {
|
|
26
|
+
video: HTMLVideoElement | null;
|
|
27
|
+
reason: 'play' | 'pause' | 'ref' | 'destroy' | 'seek';
|
|
28
|
+
}
|
|
29
|
+
interface VideoPlayerPlaybackError {
|
|
30
|
+
error: unknown;
|
|
31
|
+
data?: unknown;
|
|
32
|
+
message: string;
|
|
33
|
+
details: string[];
|
|
34
|
+
}
|
|
35
|
+
interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'controls' | 'autoPlay' | 'muted' | 'title' | 'onError' | 'onTimeUpdate' | 'onDurationChange' | 'onPlay' | 'onPause'> {
|
|
36
|
+
videoSrc: string;
|
|
37
|
+
sourceType?: 'auto' | 'hls' | 'native';
|
|
38
|
+
type?: string;
|
|
39
|
+
controlsVariant?: ControlsVariant;
|
|
40
|
+
autoPlay?: boolean;
|
|
41
|
+
preload?: '' | 'none' | 'auto' | 'metadata';
|
|
42
|
+
loop?: boolean;
|
|
43
|
+
poster?: string;
|
|
44
|
+
live?: boolean;
|
|
45
|
+
title?: ReactNode;
|
|
46
|
+
videoTopBar?: ReactNode;
|
|
47
|
+
videoRightBar?: ReactNode;
|
|
48
|
+
alwaysShowSegments?: boolean;
|
|
49
|
+
initialTime?: number;
|
|
50
|
+
reloadKey?: string | number | boolean | null;
|
|
51
|
+
playOnClick?: boolean;
|
|
52
|
+
handleClick?: boolean;
|
|
53
|
+
scrollTo?: boolean;
|
|
54
|
+
defaultMuted?: boolean;
|
|
55
|
+
muted?: boolean;
|
|
56
|
+
onMutedChange?: (muted: boolean) => void;
|
|
57
|
+
defaultPlaying?: boolean;
|
|
58
|
+
playing?: boolean;
|
|
59
|
+
onPlayingChange?: (playing: boolean) => void;
|
|
60
|
+
currentTime?: number;
|
|
61
|
+
duration?: number;
|
|
62
|
+
onTimeChange?: (time: number, video: HTMLVideoElement) => void;
|
|
63
|
+
onDurationChange?: (duration: number, video: HTMLVideoElement) => void;
|
|
64
|
+
onVideoRefChange?: (video: HTMLVideoElement | null) => void;
|
|
65
|
+
onActiveChange?: (payload: VideoPlayerActiveChangePayload) => void;
|
|
66
|
+
onPlaybackError?: (payload: VideoPlayerPlaybackError) => void;
|
|
67
|
+
onVideoClick?: () => void;
|
|
68
|
+
onVideoDoubleClick?: () => void;
|
|
69
|
+
exclusivePlayback?: boolean | {
|
|
70
|
+
pauseOthers: (video: HTMLVideoElement) => void;
|
|
71
|
+
};
|
|
72
|
+
hlsConfig?: Partial<HlsConfig>;
|
|
73
|
+
vodHlsConfig?: Partial<HlsConfig>;
|
|
74
|
+
liveHlsConfig?: Partial<HlsConfig>;
|
|
75
|
+
hlsCredentials?: RequestCredentials;
|
|
76
|
+
crossOrigin?: React.VideoHTMLAttributes<HTMLVideoElement>['crossOrigin'];
|
|
77
|
+
messages?: VideoPlayerMessages;
|
|
78
|
+
onPointerDown?: PointerHandler;
|
|
79
|
+
onPointerMove?: PointerHandler;
|
|
80
|
+
onPointerUp?: PointerHandler;
|
|
81
|
+
onPointerCancel?: PointerHandler;
|
|
82
|
+
accentColor?: string;
|
|
83
|
+
}
|
|
84
|
+
declare function hasNativeHlsSupport(): boolean;
|
|
85
|
+
declare const VideoPlayer: React.NamedExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>>;
|
|
86
|
+
|
|
87
|
+
export { type ControlsVariant, VideoPlayer, type VideoPlayerActiveChangePayload, type VideoPlayerHandle, type VideoPlayerMessages, type VideoPlayerPlaybackError, type VideoPlayerProps, VideoPlayer as default, hasNativeHlsSupport };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { HlsConfig } from 'hls.js';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type ControlsVariant = 'full' | 'fullscreen-only' | 'tiny' | 'none';
|
|
5
|
+
|
|
6
|
+
type PointerHandler = (e: React.PointerEvent<HTMLElement>) => void;
|
|
7
|
+
interface VideoPlayerHandle {
|
|
8
|
+
play: () => Promise<void>;
|
|
9
|
+
pause: () => void;
|
|
10
|
+
seek: (time: number) => void;
|
|
11
|
+
fullscreen: () => void;
|
|
12
|
+
getVideoElement: () => HTMLVideoElement | null;
|
|
13
|
+
}
|
|
14
|
+
interface VideoPlayerMessages {
|
|
15
|
+
defaultError?: string;
|
|
16
|
+
aborted?: string;
|
|
17
|
+
network?: string;
|
|
18
|
+
decode?: string;
|
|
19
|
+
unsupported?: string;
|
|
20
|
+
playFailed?: string;
|
|
21
|
+
streamLoadFailed?: string;
|
|
22
|
+
streamDecodeFailed?: string;
|
|
23
|
+
retry?: string;
|
|
24
|
+
}
|
|
25
|
+
interface VideoPlayerActiveChangePayload {
|
|
26
|
+
video: HTMLVideoElement | null;
|
|
27
|
+
reason: 'play' | 'pause' | 'ref' | 'destroy' | 'seek';
|
|
28
|
+
}
|
|
29
|
+
interface VideoPlayerPlaybackError {
|
|
30
|
+
error: unknown;
|
|
31
|
+
data?: unknown;
|
|
32
|
+
message: string;
|
|
33
|
+
details: string[];
|
|
34
|
+
}
|
|
35
|
+
interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'controls' | 'autoPlay' | 'muted' | 'title' | 'onError' | 'onTimeUpdate' | 'onDurationChange' | 'onPlay' | 'onPause'> {
|
|
36
|
+
videoSrc: string;
|
|
37
|
+
sourceType?: 'auto' | 'hls' | 'native';
|
|
38
|
+
type?: string;
|
|
39
|
+
controlsVariant?: ControlsVariant;
|
|
40
|
+
autoPlay?: boolean;
|
|
41
|
+
preload?: '' | 'none' | 'auto' | 'metadata';
|
|
42
|
+
loop?: boolean;
|
|
43
|
+
poster?: string;
|
|
44
|
+
live?: boolean;
|
|
45
|
+
title?: ReactNode;
|
|
46
|
+
videoTopBar?: ReactNode;
|
|
47
|
+
videoRightBar?: ReactNode;
|
|
48
|
+
alwaysShowSegments?: boolean;
|
|
49
|
+
initialTime?: number;
|
|
50
|
+
reloadKey?: string | number | boolean | null;
|
|
51
|
+
playOnClick?: boolean;
|
|
52
|
+
handleClick?: boolean;
|
|
53
|
+
scrollTo?: boolean;
|
|
54
|
+
defaultMuted?: boolean;
|
|
55
|
+
muted?: boolean;
|
|
56
|
+
onMutedChange?: (muted: boolean) => void;
|
|
57
|
+
defaultPlaying?: boolean;
|
|
58
|
+
playing?: boolean;
|
|
59
|
+
onPlayingChange?: (playing: boolean) => void;
|
|
60
|
+
currentTime?: number;
|
|
61
|
+
duration?: number;
|
|
62
|
+
onTimeChange?: (time: number, video: HTMLVideoElement) => void;
|
|
63
|
+
onDurationChange?: (duration: number, video: HTMLVideoElement) => void;
|
|
64
|
+
onVideoRefChange?: (video: HTMLVideoElement | null) => void;
|
|
65
|
+
onActiveChange?: (payload: VideoPlayerActiveChangePayload) => void;
|
|
66
|
+
onPlaybackError?: (payload: VideoPlayerPlaybackError) => void;
|
|
67
|
+
onVideoClick?: () => void;
|
|
68
|
+
onVideoDoubleClick?: () => void;
|
|
69
|
+
exclusivePlayback?: boolean | {
|
|
70
|
+
pauseOthers: (video: HTMLVideoElement) => void;
|
|
71
|
+
};
|
|
72
|
+
hlsConfig?: Partial<HlsConfig>;
|
|
73
|
+
vodHlsConfig?: Partial<HlsConfig>;
|
|
74
|
+
liveHlsConfig?: Partial<HlsConfig>;
|
|
75
|
+
hlsCredentials?: RequestCredentials;
|
|
76
|
+
crossOrigin?: React.VideoHTMLAttributes<HTMLVideoElement>['crossOrigin'];
|
|
77
|
+
messages?: VideoPlayerMessages;
|
|
78
|
+
onPointerDown?: PointerHandler;
|
|
79
|
+
onPointerMove?: PointerHandler;
|
|
80
|
+
onPointerUp?: PointerHandler;
|
|
81
|
+
onPointerCancel?: PointerHandler;
|
|
82
|
+
accentColor?: string;
|
|
83
|
+
}
|
|
84
|
+
declare function hasNativeHlsSupport(): boolean;
|
|
85
|
+
declare const VideoPlayer: React.NamedExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>>;
|
|
86
|
+
|
|
87
|
+
export { type ControlsVariant, VideoPlayer, type VideoPlayerActiveChangePayload, type VideoPlayerHandle, type VideoPlayerMessages, type VideoPlayerPlaybackError, type VideoPlayerProps, VideoPlayer as default, hasNativeHlsSupport };
|