@grizzshutsdown/simpleplayer 0.1.1 → 0.1.3
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 +3 -0
- package/dist/player/constants.d.ts +3 -0
- package/dist/player/fullscreen.d.ts +6 -0
- package/dist/player/media.d.ts +2 -0
- package/dist/player/progress.d.ts +4 -0
- package/dist/player/simple-player-element.d.ts +28 -0
- package/dist/player/styles.d.ts +1 -0
- package/dist/player/template.d.ts +1 -0
- package/dist/player/types.d.ts +33 -0
- package/dist/simple-player.d.ts +2 -26
- package/dist/simple-player.js +761 -571
- package/dist/simple-player.js.map +1 -1
- package/package.json +2 -1
- package/skill/simpleplayer/SKILL.md +2 -0
package/README.md
CHANGED
|
@@ -77,6 +77,7 @@ declare module 'react' {
|
|
|
77
77
|
'preload-margin'?: string;
|
|
78
78
|
controls?: boolean;
|
|
79
79
|
'disable-autoplay'?: boolean;
|
|
80
|
+
'show-time'?: boolean;
|
|
80
81
|
};
|
|
81
82
|
}
|
|
82
83
|
}
|
|
@@ -98,6 +99,7 @@ declare module 'react' {
|
|
|
98
99
|
- `preload-margin`: lazy-load margin before the video enters view. Default: `360px 0px`.
|
|
99
100
|
- `controls`: add volume, Picture-in-Picture, and fullscreen controls.
|
|
100
101
|
- `disable-autoplay`: turn off default autoplay. Autoplay starts muted so browsers allow it.
|
|
102
|
+
- `show-time`: shows a pinned timestamp tray when `controls` are enabled, or a hover tooltip over the scrubber when `controls` are disabled.
|
|
101
103
|
|
|
102
104
|
The default player matches the simple preview: play/pause, scrubber, muted autoplay, and no extra side controls.
|
|
103
105
|
|
|
@@ -111,6 +113,7 @@ player.aspectRatio = '1 / 1';
|
|
|
111
113
|
player.preloadMargin = '240px 0px';
|
|
112
114
|
player.autoplayEnabled = false;
|
|
113
115
|
player.controlsEnabled = true;
|
|
116
|
+
player.timeVisible = true;
|
|
114
117
|
player.volumeEnabled = true;
|
|
115
118
|
player.volumeSliderEnabled = false;
|
|
116
119
|
player.pictureInPictureEnabled = true;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const DEFAULT_ASPECT_RATIO = "16 / 9";
|
|
2
|
+
export declare const DEFAULT_PRELOAD_MARGIN = "360px 0px";
|
|
3
|
+
export declare const OBSERVED_ATTRIBUTES: readonly ["src", "aspect-ratio", "preload-margin", "controls", "disable-autoplay", "enable-volume", "disable-volume", "disable-volume-slider", "enable-picture-in-picture", "disable-picture-in-picture", "enable-fullscreen", "disable-fullscreen", "show-time", "no-autoplay", "no-volume", "no-volume-slider", "no-picture-in-picture", "no-fullscreen"];
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare function getFullscreenElement(root: ShadowRoot): Element | null;
|
|
2
|
+
export declare function isFullscreenSupported(fullscreenEnabled: boolean, player: HTMLElement, video: HTMLVideoElement): boolean;
|
|
3
|
+
export declare function requestPlayerFullscreen(player: HTMLElement): Promise<void>;
|
|
4
|
+
export declare function canRequestPlayerFullscreen(player: HTMLElement): boolean;
|
|
5
|
+
export declare function requestVideoFullscreen(video: HTMLVideoElement): void;
|
|
6
|
+
export declare function exitFullscreen(): Promise<void>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ProgressMetrics } from './types';
|
|
2
|
+
export declare function getProgressMetrics(rect: DOMRect): ProgressMetrics;
|
|
3
|
+
export declare function getProgressXFromPercent(percent: number, rect: DOMRect): number;
|
|
4
|
+
export declare function getProgressPercentFromClientX(clientX: number, rect: DOMRect): number;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export declare class SimplePlayer extends HTMLElement {
|
|
2
|
+
#private;
|
|
3
|
+
static observedAttributes: readonly ["src", "aspect-ratio", "preload-margin", "controls", "disable-autoplay", "enable-volume", "disable-volume", "disable-volume-slider", "enable-picture-in-picture", "disable-picture-in-picture", "enable-fullscreen", "disable-fullscreen", "show-time", "no-autoplay", "no-volume", "no-volume-slider", "no-picture-in-picture", "no-fullscreen"];
|
|
4
|
+
constructor();
|
|
5
|
+
get src(): string;
|
|
6
|
+
set src(value: string);
|
|
7
|
+
get aspectRatio(): string;
|
|
8
|
+
set aspectRatio(value: string);
|
|
9
|
+
get preloadMargin(): string;
|
|
10
|
+
set preloadMargin(value: string);
|
|
11
|
+
get autoplayEnabled(): boolean;
|
|
12
|
+
set autoplayEnabled(value: boolean);
|
|
13
|
+
get controlsEnabled(): boolean;
|
|
14
|
+
set controlsEnabled(value: boolean);
|
|
15
|
+
get timeVisible(): boolean;
|
|
16
|
+
set timeVisible(value: boolean);
|
|
17
|
+
get volumeEnabled(): boolean;
|
|
18
|
+
set volumeEnabled(value: boolean);
|
|
19
|
+
get volumeSliderEnabled(): boolean;
|
|
20
|
+
set volumeSliderEnabled(value: boolean);
|
|
21
|
+
get pictureInPictureEnabled(): boolean;
|
|
22
|
+
set pictureInPictureEnabled(value: boolean);
|
|
23
|
+
get fullscreenEnabled(): boolean;
|
|
24
|
+
set fullscreenEnabled(value: boolean);
|
|
25
|
+
connectedCallback(): void;
|
|
26
|
+
disconnectedCallback(): void;
|
|
27
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const template: HTMLTemplateElement;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export type FullscreenDocument = Document & {
|
|
2
|
+
webkitFullscreenElement?: Element | null;
|
|
3
|
+
webkitFullscreenEnabled?: boolean;
|
|
4
|
+
webkitExitFullscreen?: () => Promise<void> | void;
|
|
5
|
+
mozFullScreenElement?: Element | null;
|
|
6
|
+
mozFullScreenEnabled?: boolean;
|
|
7
|
+
mozCancelFullScreen?: () => Promise<void> | void;
|
|
8
|
+
msFullscreenElement?: Element | null;
|
|
9
|
+
msFullscreenEnabled?: boolean;
|
|
10
|
+
msExitFullscreen?: () => Promise<void> | void;
|
|
11
|
+
};
|
|
12
|
+
export type FullscreenPlayer = HTMLElement & {
|
|
13
|
+
webkitRequestFullscreen?: () => Promise<void> | void;
|
|
14
|
+
mozRequestFullScreen?: () => Promise<void> | void;
|
|
15
|
+
msRequestFullscreen?: () => Promise<void> | void;
|
|
16
|
+
};
|
|
17
|
+
export type FullscreenVideo = HTMLVideoElement & {
|
|
18
|
+
webkitEnterFullscreen?: () => void;
|
|
19
|
+
webkitEnterFullScreen?: () => void;
|
|
20
|
+
webkitSupportsFullscreen?: boolean;
|
|
21
|
+
webkitDisplayingFullscreen?: boolean;
|
|
22
|
+
};
|
|
23
|
+
export type Cleanup = () => void;
|
|
24
|
+
export type PlaybackState = 'playing' | 'paused' | null;
|
|
25
|
+
export type ProgressMetrics = {
|
|
26
|
+
rect: DOMRect;
|
|
27
|
+
sideInset: number;
|
|
28
|
+
innerWidth: number;
|
|
29
|
+
};
|
|
30
|
+
export type ScrubPoint = {
|
|
31
|
+
percent: number;
|
|
32
|
+
targetTime: number;
|
|
33
|
+
};
|
package/dist/simple-player.d.ts
CHANGED
|
@@ -1,29 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
static observedAttributes: string[];
|
|
4
|
-
constructor();
|
|
5
|
-
get src(): string;
|
|
6
|
-
set src(value: string);
|
|
7
|
-
get aspectRatio(): string;
|
|
8
|
-
set aspectRatio(value: string);
|
|
9
|
-
get preloadMargin(): string;
|
|
10
|
-
set preloadMargin(value: string);
|
|
11
|
-
get autoplayEnabled(): boolean;
|
|
12
|
-
set autoplayEnabled(value: boolean);
|
|
13
|
-
get controlsEnabled(): boolean;
|
|
14
|
-
set controlsEnabled(value: boolean);
|
|
15
|
-
get volumeEnabled(): boolean;
|
|
16
|
-
set volumeEnabled(value: boolean);
|
|
17
|
-
get volumeSliderEnabled(): boolean;
|
|
18
|
-
set volumeSliderEnabled(value: boolean);
|
|
19
|
-
get pictureInPictureEnabled(): boolean;
|
|
20
|
-
set pictureInPictureEnabled(value: boolean);
|
|
21
|
-
get fullscreenEnabled(): boolean;
|
|
22
|
-
set fullscreenEnabled(value: boolean);
|
|
23
|
-
connectedCallback(): void;
|
|
24
|
-
disconnectedCallback(): void;
|
|
25
|
-
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
26
|
-
}
|
|
1
|
+
import { SimplePlayer } from './player/simple-player-element';
|
|
2
|
+
export { SimplePlayer } from './player/simple-player-element';
|
|
27
3
|
declare global {
|
|
28
4
|
interface HTMLElementTagNameMap {
|
|
29
5
|
'simple-player': SimplePlayer;
|