@videts/vide 0.7.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/LICENSE +21 -0
- package/README.md +276 -0
- package/dist/chunk-726XNUGZ.mjs +1 -0
- package/dist/chunk-G4Q7R3SH.mjs +1 -0
- package/dist/dash/index.d.ts +11 -0
- package/dist/dash/index.mjs +2 -0
- package/dist/drm/index.d.ts +51 -0
- package/dist/drm/index.mjs +1 -0
- package/dist/hls/index.d.ts +11 -0
- package/dist/hls/index.mjs +2 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.mjs +1 -0
- package/dist/omid/index.d.ts +25 -0
- package/dist/omid/index.mjs +2 -0
- package/dist/simid/index.d.ts +26 -0
- package/dist/simid/index.mjs +1 -0
- package/dist/ssai/index.d.ts +61 -0
- package/dist/ssai/index.mjs +1 -0
- package/dist/types-BryM58LE.d.ts +98 -0
- package/dist/types-BxRa9Jvl.d.ts +140 -0
- package/dist/ui/index.d.ts +102 -0
- package/dist/ui/index.mjs +2 -0
- package/dist/ui/theme.css +864 -0
- package/dist/vast/index.d.ts +29 -0
- package/dist/vast/index.mjs +1 -0
- package/dist/vmap/index.d.ts +77 -0
- package/dist/vmap/index.mjs +1 -0
- package/package.json +89 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { P as Player } from './types-BxRa9Jvl.js';
|
|
2
|
+
|
|
3
|
+
interface VastResponse {
|
|
4
|
+
version: string;
|
|
5
|
+
ads: VastAd[];
|
|
6
|
+
errors: string[];
|
|
7
|
+
}
|
|
8
|
+
interface VastAd {
|
|
9
|
+
id: string;
|
|
10
|
+
sequence?: number | undefined;
|
|
11
|
+
adSystem: string;
|
|
12
|
+
adTitle: string;
|
|
13
|
+
impressions: string[];
|
|
14
|
+
creatives: VastCreative[];
|
|
15
|
+
errors: string[];
|
|
16
|
+
verifications?: AdVerification[] | undefined;
|
|
17
|
+
categories?: AdCategory[] | undefined;
|
|
18
|
+
}
|
|
19
|
+
interface AdVerification {
|
|
20
|
+
vendor: string;
|
|
21
|
+
resourceUrl: string;
|
|
22
|
+
apiFramework?: string | undefined;
|
|
23
|
+
parameters?: string | undefined;
|
|
24
|
+
}
|
|
25
|
+
interface AdCategory {
|
|
26
|
+
authority: string;
|
|
27
|
+
value: string;
|
|
28
|
+
}
|
|
29
|
+
interface VastCreative {
|
|
30
|
+
id?: string | undefined;
|
|
31
|
+
sequence?: number | undefined;
|
|
32
|
+
linear: VastLinear | null;
|
|
33
|
+
}
|
|
34
|
+
interface VastLinear {
|
|
35
|
+
duration: number;
|
|
36
|
+
skipOffset?: number | undefined;
|
|
37
|
+
mediaFiles: VastMediaFile[];
|
|
38
|
+
interactiveCreativeFiles: InteractiveCreativeFile[];
|
|
39
|
+
trackingEvents: VastTrackingEvents;
|
|
40
|
+
clickThrough?: string | undefined;
|
|
41
|
+
clickTracking: string[];
|
|
42
|
+
}
|
|
43
|
+
interface VastMediaFile {
|
|
44
|
+
url: string;
|
|
45
|
+
mimeType: string;
|
|
46
|
+
width: number;
|
|
47
|
+
height: number;
|
|
48
|
+
bitrate?: number | undefined;
|
|
49
|
+
delivery: "progressive" | "streaming";
|
|
50
|
+
}
|
|
51
|
+
interface InteractiveCreativeFile {
|
|
52
|
+
url: string;
|
|
53
|
+
apiFramework: string;
|
|
54
|
+
variableDuration?: boolean | undefined;
|
|
55
|
+
}
|
|
56
|
+
interface VastProgressEvent {
|
|
57
|
+
offset: number;
|
|
58
|
+
url: string;
|
|
59
|
+
}
|
|
60
|
+
interface VastTrackingEvents {
|
|
61
|
+
start: string[];
|
|
62
|
+
firstQuartile: string[];
|
|
63
|
+
midpoint: string[];
|
|
64
|
+
thirdQuartile: string[];
|
|
65
|
+
complete: string[];
|
|
66
|
+
pause: string[];
|
|
67
|
+
resume: string[];
|
|
68
|
+
skip: string[];
|
|
69
|
+
loaded: string[];
|
|
70
|
+
mute: string[];
|
|
71
|
+
unmute: string[];
|
|
72
|
+
rewind: string[];
|
|
73
|
+
playerExpand: string[];
|
|
74
|
+
playerCollapse: string[];
|
|
75
|
+
closeLinear: string[];
|
|
76
|
+
notUsed: string[];
|
|
77
|
+
otherAdInteraction: string[];
|
|
78
|
+
creativeView: string[];
|
|
79
|
+
progress: VastProgressEvent[];
|
|
80
|
+
}
|
|
81
|
+
/** Plugin scoped to a single ad. Created per-ad, cleaned up on ad end. */
|
|
82
|
+
interface AdPlugin {
|
|
83
|
+
name: string;
|
|
84
|
+
setup(player: Player, ad: VastAd): (() => void) | undefined;
|
|
85
|
+
}
|
|
86
|
+
interface VastPluginOptions {
|
|
87
|
+
tagUrl: string;
|
|
88
|
+
timeout?: number | undefined;
|
|
89
|
+
allowSkip?: boolean | undefined;
|
|
90
|
+
/** Create per-ad plugins. Called once per ad with the parsed VastAd. */
|
|
91
|
+
adPlugins?: ((ad: VastAd) => AdPlugin[]) | undefined;
|
|
92
|
+
}
|
|
93
|
+
interface ResolveOptions {
|
|
94
|
+
timeout?: number | undefined;
|
|
95
|
+
maxDepth?: number | undefined;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export type { AdCategory as A, ResolveOptions as R, VastResponse as V, VastPluginOptions as a, AdPlugin as b, AdVerification as c, VastProgressEvent as d, VastAd as e };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
type PlayerState = "idle" | "loading" | "ready" | "playing" | "paused" | "buffering" | "ad:loading" | "ad:playing" | "ad:paused" | "ended" | "error";
|
|
2
|
+
type AdQuartile = "start" | "firstQuartile" | "midpoint" | "thirdQuartile" | "complete";
|
|
3
|
+
interface PlayerEventMap {
|
|
4
|
+
statechange: {
|
|
5
|
+
from: PlayerState;
|
|
6
|
+
to: PlayerState;
|
|
7
|
+
};
|
|
8
|
+
play: void;
|
|
9
|
+
pause: void;
|
|
10
|
+
ended: void;
|
|
11
|
+
timeupdate: {
|
|
12
|
+
currentTime: number;
|
|
13
|
+
duration: number;
|
|
14
|
+
};
|
|
15
|
+
error: {
|
|
16
|
+
code: number;
|
|
17
|
+
message: string;
|
|
18
|
+
};
|
|
19
|
+
"ad:start": {
|
|
20
|
+
adId: string;
|
|
21
|
+
};
|
|
22
|
+
"ad:end": {
|
|
23
|
+
adId: string;
|
|
24
|
+
};
|
|
25
|
+
"ad:skip": {
|
|
26
|
+
adId: string;
|
|
27
|
+
};
|
|
28
|
+
"ad:click": {
|
|
29
|
+
clickThrough: string | undefined;
|
|
30
|
+
clickTracking: string[];
|
|
31
|
+
};
|
|
32
|
+
"ad:error": {
|
|
33
|
+
error: Error;
|
|
34
|
+
};
|
|
35
|
+
"ad:impression": {
|
|
36
|
+
adId: string;
|
|
37
|
+
};
|
|
38
|
+
"ad:loaded": {
|
|
39
|
+
adId: string;
|
|
40
|
+
};
|
|
41
|
+
"ad:quartile": {
|
|
42
|
+
adId: string;
|
|
43
|
+
quartile: AdQuartile;
|
|
44
|
+
};
|
|
45
|
+
"ad:mute": {
|
|
46
|
+
adId: string;
|
|
47
|
+
};
|
|
48
|
+
"ad:unmute": {
|
|
49
|
+
adId: string;
|
|
50
|
+
};
|
|
51
|
+
"ad:volumeChange": {
|
|
52
|
+
adId: string;
|
|
53
|
+
volume: number;
|
|
54
|
+
};
|
|
55
|
+
"ad:fullscreen": {
|
|
56
|
+
adId: string;
|
|
57
|
+
fullscreen: boolean;
|
|
58
|
+
};
|
|
59
|
+
"ad:breakStart": {
|
|
60
|
+
breakId: string | undefined;
|
|
61
|
+
};
|
|
62
|
+
"ad:breakEnd": {
|
|
63
|
+
breakId: string | undefined;
|
|
64
|
+
};
|
|
65
|
+
destroy: void;
|
|
66
|
+
}
|
|
67
|
+
type PlayerEvent = keyof PlayerEventMap;
|
|
68
|
+
type EventHandler<T> = (data: T) => void;
|
|
69
|
+
/** HTMLVideoElement event names not already covered by PlayerEventMap. */
|
|
70
|
+
type NativeVideoEvent = Exclude<keyof HTMLVideoElementEventMap, keyof PlayerEventMap>;
|
|
71
|
+
interface EventBus {
|
|
72
|
+
on<K extends PlayerEvent>(event: K, handler: EventHandler<PlayerEventMap[K]>): void;
|
|
73
|
+
on<K extends NativeVideoEvent>(event: K, handler: (ev: HTMLVideoElementEventMap[K]) => void): void;
|
|
74
|
+
on(event: string, handler: (...args: any[]) => void): void;
|
|
75
|
+
off<K extends PlayerEvent>(event: K, handler: EventHandler<PlayerEventMap[K]>): void;
|
|
76
|
+
off<K extends NativeVideoEvent>(event: K, handler: (ev: HTMLVideoElementEventMap[K]) => void): void;
|
|
77
|
+
off(event: string, handler: (...args: any[]) => void): void;
|
|
78
|
+
emit<K extends PlayerEvent>(event: K, data: PlayerEventMap[K]): void;
|
|
79
|
+
once<K extends PlayerEvent>(event: K, handler: EventHandler<PlayerEventMap[K]>): void;
|
|
80
|
+
once<K extends NativeVideoEvent>(event: K, handler: (ev: HTMLVideoElementEventMap[K]) => void): void;
|
|
81
|
+
once(event: string, handler: (...args: any[]) => void): void;
|
|
82
|
+
}
|
|
83
|
+
interface SourceHandler {
|
|
84
|
+
/** Whether this handler can process the given URL/type. */
|
|
85
|
+
canHandle(url: string, type?: string): boolean;
|
|
86
|
+
/** Load the source into the video element. */
|
|
87
|
+
load(url: string, videoElement: HTMLVideoElement): void;
|
|
88
|
+
/** Unload the source and clean up. */
|
|
89
|
+
unload(videoElement: HTMLVideoElement): void;
|
|
90
|
+
}
|
|
91
|
+
interface Plugin {
|
|
92
|
+
name: string;
|
|
93
|
+
setup(player: Player): (() => void) | void;
|
|
94
|
+
}
|
|
95
|
+
interface Player extends EventBus {
|
|
96
|
+
readonly el: HTMLVideoElement;
|
|
97
|
+
readonly state: PlayerState;
|
|
98
|
+
play(): Promise<void>;
|
|
99
|
+
pause(): void;
|
|
100
|
+
currentTime: number;
|
|
101
|
+
duration: number;
|
|
102
|
+
volume: number;
|
|
103
|
+
muted: boolean;
|
|
104
|
+
playbackRate: number;
|
|
105
|
+
readonly paused: boolean;
|
|
106
|
+
readonly ended: boolean;
|
|
107
|
+
readonly readyState: number;
|
|
108
|
+
readonly buffered: TimeRanges;
|
|
109
|
+
readonly seekable: TimeRanges;
|
|
110
|
+
readonly seeking: boolean;
|
|
111
|
+
readonly videoWidth: number;
|
|
112
|
+
readonly videoHeight: number;
|
|
113
|
+
readonly networkState: number;
|
|
114
|
+
loop: boolean;
|
|
115
|
+
autoplay: boolean;
|
|
116
|
+
poster: string;
|
|
117
|
+
preload: "" | "none" | "metadata" | "auto";
|
|
118
|
+
defaultPlaybackRate: number;
|
|
119
|
+
defaultMuted: boolean;
|
|
120
|
+
crossOrigin: string | null;
|
|
121
|
+
controls: boolean;
|
|
122
|
+
/** Web-standard addEventListener, delegates to the underlying HTMLVideoElement. */
|
|
123
|
+
addEventListener<K extends keyof HTMLVideoElementEventMap>(type: K, listener: (ev: HTMLVideoElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
|
124
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
125
|
+
/** Web-standard removeEventListener, delegates to the underlying HTMLVideoElement. */
|
|
126
|
+
removeEventListener<K extends keyof HTMLVideoElementEventMap>(type: K, listener: (ev: HTMLVideoElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
|
|
127
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
128
|
+
/** Current media source URL. Setting triggers SourceHandler lookup. */
|
|
129
|
+
src: string;
|
|
130
|
+
/** Register a handler for custom source types (e.g., HLS, DASH). */
|
|
131
|
+
registerSourceHandler(handler: SourceHandler): void;
|
|
132
|
+
use(plugin: Plugin): void;
|
|
133
|
+
destroy(): void;
|
|
134
|
+
/** Store data for cross-plugin communication. */
|
|
135
|
+
setPluginData(key: string, data: unknown): void;
|
|
136
|
+
/** Retrieve data stored by another plugin. Returns undefined if not set. */
|
|
137
|
+
getPluginData(key: string): unknown;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
export type { AdQuartile as A, EventBus as E, Player as P, SourceHandler as S, EventHandler as a, PlayerEvent as b, PlayerEventMap as c, PlayerState as d, Plugin as e };
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { P as Player, d as PlayerState, e as Plugin } from '../types-BxRa9Jvl.js';
|
|
2
|
+
import { b as AdPlugin, e as VastAd } from '../types-BryM58LE.js';
|
|
3
|
+
|
|
4
|
+
/** A single UI component that can be independently mounted and connected. */
|
|
5
|
+
interface UIComponent {
|
|
6
|
+
/** Create DOM elements and append them to the container. */
|
|
7
|
+
mount(container: HTMLElement): void;
|
|
8
|
+
/** Subscribe to player events and start reacting. */
|
|
9
|
+
connect(player: Player): void;
|
|
10
|
+
/** Remove DOM elements and unsubscribe from all events. */
|
|
11
|
+
destroy(): void;
|
|
12
|
+
}
|
|
13
|
+
/** Shared mutable state for ad UI components. Set by uiAdPlugin, read by ad components. */
|
|
14
|
+
interface AdUIState {
|
|
15
|
+
adId: string;
|
|
16
|
+
skipOffset: number | undefined;
|
|
17
|
+
clickThrough: string | undefined;
|
|
18
|
+
duration: number;
|
|
19
|
+
}
|
|
20
|
+
/** Mutable holder for AdUIState, shared between ad-plugin and ad UI components. */
|
|
21
|
+
interface AdUIStateRef {
|
|
22
|
+
current: AdUIState | null;
|
|
23
|
+
set(state: AdUIState): void;
|
|
24
|
+
clear(): void;
|
|
25
|
+
}
|
|
26
|
+
/** Component names that can be excluded from the ui() convenience plugin. */
|
|
27
|
+
type UIComponentName = "play" | "progress" | "time" | "volume" | "fullscreen" | "loader" | "error" | "bigplay" | "poster" | "ad-countdown" | "ad-skip" | "ad-overlay" | "ad-label" | "keyboard" | "clickplay" | "autohide";
|
|
28
|
+
/** Options for the ui() convenience plugin. */
|
|
29
|
+
interface UiPluginOptions {
|
|
30
|
+
/** Container element to mount UI controls into. */
|
|
31
|
+
container: HTMLElement;
|
|
32
|
+
/** Components to exclude (default: none — all enabled). */
|
|
33
|
+
exclude?: UIComponentName[] | undefined;
|
|
34
|
+
/** Poster image URL. */
|
|
35
|
+
poster?: string | undefined;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
declare function createAdCountdown(adState: AdUIStateRef): UIComponent;
|
|
39
|
+
|
|
40
|
+
declare function createAdLabel(): UIComponent;
|
|
41
|
+
|
|
42
|
+
declare function createAdOverlay(): UIComponent;
|
|
43
|
+
|
|
44
|
+
declare function createAdSkip(adState: AdUIStateRef): UIComponent;
|
|
45
|
+
|
|
46
|
+
declare function createAutohide(): UIComponent;
|
|
47
|
+
|
|
48
|
+
declare function createBigPlay(): UIComponent;
|
|
49
|
+
|
|
50
|
+
declare function createClickPlay(excluded: Set<UIComponentName>): UIComponent;
|
|
51
|
+
|
|
52
|
+
declare function createErrorDisplay(): UIComponent;
|
|
53
|
+
|
|
54
|
+
declare function createFullscreen(): UIComponent;
|
|
55
|
+
|
|
56
|
+
interface KeyboardConfig {
|
|
57
|
+
excluded: Set<UIComponentName>;
|
|
58
|
+
}
|
|
59
|
+
declare function createKeyboard(config: KeyboardConfig): UIComponent;
|
|
60
|
+
|
|
61
|
+
declare function createLoader(): UIComponent;
|
|
62
|
+
|
|
63
|
+
declare function createPlayButton(): UIComponent;
|
|
64
|
+
|
|
65
|
+
interface PosterOptions {
|
|
66
|
+
src: string;
|
|
67
|
+
}
|
|
68
|
+
declare function createPoster(options: PosterOptions): UIComponent;
|
|
69
|
+
|
|
70
|
+
declare function createProgress(): UIComponent;
|
|
71
|
+
|
|
72
|
+
declare function createTimeDisplay(): UIComponent;
|
|
73
|
+
|
|
74
|
+
declare function createVolume(): UIComponent;
|
|
75
|
+
|
|
76
|
+
/** Convert a PlayerState to a CSS modifier class on the vide-ui root. */
|
|
77
|
+
declare function stateToClass(state: PlayerState): string;
|
|
78
|
+
/** Whether the given state is an ad state. */
|
|
79
|
+
declare function isAdState(state: PlayerState): boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Subscribe to statechange and toggle CSS modifier classes on the root element.
|
|
82
|
+
* Returns a cleanup function.
|
|
83
|
+
*/
|
|
84
|
+
declare function connectStateClasses(root: HTMLElement, player: Player): () => void;
|
|
85
|
+
|
|
86
|
+
/** Format seconds as M:SS or H:MM:SS. Returns "0:00" for NaN/negative. */
|
|
87
|
+
declare function formatTime(seconds: number): string;
|
|
88
|
+
/** Create a shared mutable holder for ad UI state. */
|
|
89
|
+
declare function createAdUIState(): AdUIStateRef;
|
|
90
|
+
|
|
91
|
+
/** Create an AdPlugin that bridges VAST ad data into the UI's shared ad state. */
|
|
92
|
+
declare function uiAdPlugin(stateRef: AdUIStateRef): AdPlugin;
|
|
93
|
+
|
|
94
|
+
/** UI plugin return type, with getAdPlugin() for VAST/VMAP integration. */
|
|
95
|
+
interface UiPlugin extends Plugin {
|
|
96
|
+
/** Returns an adPlugins callback for use with vast() or vmap() options. */
|
|
97
|
+
getAdPlugin(): (ad: VastAd) => AdPlugin[];
|
|
98
|
+
}
|
|
99
|
+
/** Create the UI convenience plugin. Mounts all components (minus excluded). */
|
|
100
|
+
declare function ui(options: UiPluginOptions): UiPlugin;
|
|
101
|
+
|
|
102
|
+
export { type AdUIState, type AdUIStateRef, type UIComponent, type UIComponentName, type UiPlugin, type UiPluginOptions, connectStateClasses, createAdCountdown, createAdLabel, createAdOverlay, createAdSkip, createAdUIState, createAutohide, createBigPlay, createClickPlay, createErrorDisplay, createFullscreen, createKeyboard, createLoader, createPlayButton, createPoster, createProgress, createTimeDisplay, createVolume, formatTime, isAdState, stateToClass, ui, uiAdPlugin };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function b(e){return {name:"ui-ad",setup(n,t){let r=t.creatives.find(o=>o.linear)?.linear;if(r)return e.set({adId:t.id,skipOffset:r.skipOffset,clickThrough:r.clickThrough,duration:r.duration}),()=>{e.clear();}}}}function C(e){return `vide-ui--${e.replace(":","-")}`}function f(e){return e==="ad:loading"||e==="ad:playing"||e==="ad:paused"}function S(e,n){e.classList.add(C(n.state));function t({from:r,to:o}){e.classList.remove(C(r)),e.classList.add(C(o));}return n.on("statechange",t),()=>n.off("statechange",t)}function P(e){if(!Number.isFinite(e)||e<0)return "0:00";let n=Math.floor(e),t=Math.floor(n/3600),r=Math.floor(n%3600/60),o=n%60,i=t>0?String(r).padStart(2,"0"):String(r),l=String(o).padStart(2,"0");return t>0?`${t}:${i}:${l}`:`${i}:${l}`}function a(e,n){let t=document.createElement(e);return t.className=n,t}function A(){let e={current:null,set(n){e.current=n;},clear(){e.current=null;}};return e}function M(e){let n=null,t=null;function r(){if(!n||!t||!f(t.state))return;let o=e.current?.duration??(Number.isFinite(t.el.duration)?t.el.duration:0),i=t.el.currentTime,l=Math.max(0,Math.ceil(o-i));n.textContent=`Ad \xB7 ${l}s`;}return {mount(o){n=a("div","vide-ad-countdown"),o.appendChild(n);},connect(o){t=o,t.on("timeupdate",r);},destroy(){n&&(n.remove(),n=null),t&&(t.off("timeupdate",r),t=null);}}}function T(){let e=null;return {mount(n){e=a("div","vide-ad-label"),e.textContent="Ad",n.appendChild(e);},connect(n){},destroy(){e&&(e.remove(),e=null);}}}function I(){let e=null,n=null;function t(){n&&(n.el.click(),n.el.paused?Promise.resolve(n.el.play()).catch(()=>{}):n.el.pause());}return {mount(r){e=a("div","vide-ad-overlay"),r.appendChild(e);},connect(r){n=r,e&&e.addEventListener("click",t);},destroy(){e&&(e.removeEventListener("click",t),e.remove(),e=null),n=null;}}}var U="http://www.w3.org/2000/svg";function y(e,n="0 0 24 24"){let t=document.createElementNS(U,"svg");t.setAttribute("viewBox",n),t.setAttribute("width","24"),t.setAttribute("height","24"),t.setAttribute("fill","currentColor"),t.setAttribute("aria-hidden","true");for(let r of e){let o=document.createElementNS(U,"path");o.setAttribute("d",r),t.appendChild(o);}return t}function L(){return y(["M8 5v14l11-7z"])}function k(){return y(["M6 19h4V5H6v14zm8-14v14h4V5h-4z"])}function x(){return y(["M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"])}function H(){return y(["M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"])}function V(){return y(["M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4l-1.88 1.88L12 7.76V4z"])}function w(){return y(["M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"])}function j(){return y(["M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"])}function D(){return y(["M5 18l10-6L5 6v12zm12-12v12h2V6h-2z"])}function _(e){let n=null,t=null,r=null;function o(){!r||!e.current||n?.classList.contains("vide-skip--disabled")||r.emit("ad:skip",{adId:e.current.adId});}function i(){if(!n||!t||!r||!f(r.state))return;if(!e.current||e.current.skipOffset===void 0){n.style.display="none";return}n.style.display="";let{skipOffset:u}=e.current,m=r.el.currentTime;if(m>=u)n.classList.remove("vide-skip--disabled"),t.textContent="Skip Ad";else {n.classList.add("vide-skip--disabled");let d=Math.max(0,Math.ceil(u-m));t.textContent=`Skip in ${d}s`;}}function l({to:u}){!n||!t||f(u)||(n.style.display="none",n.classList.add("vide-skip--disabled"),t.textContent="");}return {mount(u){n=a("button","vide-skip vide-skip--disabled"),n.type="button",n.setAttribute("aria-label","Skip ad"),n.style.display="none",t=a("span","vide-skip__label"),n.appendChild(t),n.appendChild(D()),u.appendChild(n);},connect(u){r=u,n&&(n.addEventListener("click",o),r.on("timeupdate",i),r.on("statechange",l));},destroy(){n&&(n.removeEventListener("click",o),n.remove(),n=null,t=null),r&&(r.off("timeupdate",i),r.off("statechange",l),r=null);}}}var J=3e3;function F(){let e=null,n=null,t=null;function r(){if(!n)return true;let d=n.state;return d==="paused"||d==="ended"||d==="idle"||d==="ready"||f(d)}function o(){e&&e.classList.remove("vide-ui--autohide");}function i(){l(),!r()&&(t=setTimeout(()=>{e&&e.classList.add("vide-ui--autohide");},J));}function l(){t!==null&&(clearTimeout(t),t=null);}function u(){o(),i();}function m({to:d}){d==="paused"||d==="ended"||d==="idle"||d==="ready"||f(d)?(l(),o()):i();}return {mount(d){e=d.closest(".vide-ui")??d;},connect(d){n=d,e&&(e.addEventListener("mousemove",u),e.addEventListener("touchstart",u),e.addEventListener("keydown",u),n.on("statechange",m),i());},destroy(){l(),e&&(e.removeEventListener("mousemove",u),e.removeEventListener("touchstart",u),e.removeEventListener("keydown",u),e.classList.remove("vide-ui--autohide"),e=null),n&&(n.off("statechange",m),n=null);}}}function G(){let e=null,n=null;function t(){if(n){if(n.state==="ended"){let o=function({to:i}){i==="ready"&&(n?.off("statechange",o),n?.play().catch(()=>{}));};n.on("statechange",o),n.el.currentTime=0,n.el.load();return}n.play().catch(()=>{});}}return {mount(r){e=a("button","vide-bigplay"),e.type="button",e.setAttribute("aria-label","Play video"),e.appendChild(L()),r.appendChild(e);},connect(r){n=r,e&&e.addEventListener("click",t);},destroy(){e&&(e.removeEventListener("click",t),e.remove(),e=null),n=null;}}}var Q=200;function N(e){let n=null,t=null,r=null,o=null;function i(){t&&(t.state==="playing"||t.state==="ad:playing"?t.pause():t.play().catch(()=>{}));}function l(){!o||e.has("fullscreen")||(document.fullscreenElement!=null?document.exitFullscreen().catch(()=>{}):o.requestFullscreen&&o.requestFullscreen().catch(()=>{}));}function u(){if(t){if(f(t.state)){t.el.click(),i();return}if(r!==null){clearTimeout(r),r=null,l();return}r=setTimeout(()=>{r=null,i();},Q);}}return {mount(m){n=a("div","vide-clickplay"),o=m.closest(".vide-ui")?.parentElement??m,m.appendChild(n);},connect(m){t=m,n&&n.addEventListener("click",u);},destroy(){r!==null&&(clearTimeout(r),r=null),n&&(n.removeEventListener("click",u),n.remove(),n=null),t=null,o=null;}}}function z(){let e=null,n=null,t=null;function r({message:o}){n&&(n.textContent=o);}return {mount(o){e=a("div","vide-error"),n=a("span","vide-error__message"),e.appendChild(n),o.appendChild(e);},connect(o){t=o,t.on("error",r);},destroy(){e&&(e.remove(),e=null,n=null),t&&(t.off("error",r),t=null);}}}function R(){let e=null,n=null,t=null;function r(){return document.fullscreenElement!=null}function o(u){e&&(t&&t.remove(),t=u?j():w(),e.appendChild(t));}function i(){n&&(r()?document.exitFullscreen().catch(()=>{}):n.requestFullscreen().catch(()=>{}));}function l(){if(!e)return;let u=r();u?(e.classList.add("vide-fullscreen--active"),e.setAttribute("aria-label","Exit fullscreen")):(e.classList.remove("vide-fullscreen--active"),e.setAttribute("aria-label","Fullscreen")),o(u);}return {mount(u){n=u.closest(".vide-ui")?.parentElement??u,e=a("button","vide-fullscreen"),e.type="button",e.setAttribute("aria-label","Fullscreen"),o(false),u.appendChild(e);},connect(){e&&(e.addEventListener("click",i),document.addEventListener("fullscreenchange",l));},destroy(){e&&(e.removeEventListener("click",i),e.remove(),e=null,t=null),document.removeEventListener("fullscreenchange",l),n=null;}}}function B(e){let n=null,t=null,{excluded:r}=e;function o(i){if(!t)return;let l=!r.has("volume"),u=!r.has("progress"),m=!r.has("fullscreen"),d=f(t.state);switch(i.key){case " ":case "k":case "K":i.preventDefault(),t.state==="playing"||t.state==="ad:playing"?t.pause():t.play().catch(()=>{});break;case "ArrowLeft":if(!u||d)return;i.preventDefault(),t.currentTime=Math.max(0,t.el.currentTime-5);break;case "ArrowRight":if(!u||d)return;i.preventDefault(),t.currentTime=Math.min(t.el.duration||0,t.el.currentTime+5);break;case "ArrowUp":if(!l)return;i.preventDefault(),t.volume=Math.min(1,t.volume+.1),t.muted&&(t.muted=false);break;case "ArrowDown":if(!l)return;i.preventDefault(),t.volume=Math.max(0,t.volume-.1);break;case "m":case "M":if(!l)return;i.preventDefault(),t.muted=!t.muted;break;case "f":case "F":if(!m)return;if(i.preventDefault(),document.fullscreenElement!=null)document.exitFullscreen().catch(()=>{});else {let c=n?.closest(".vide-ui")?.parentElement??n;c?.requestFullscreen&&c.requestFullscreen().catch(()=>{});}break;default:if(i.key.length===1&&i.key>="0"&&i.key<="9"&&u&&!d){i.preventDefault();let c=Number.parseInt(i.key,10)/10,v=t.el.duration;Number.isFinite(v)&&v>0&&(t.currentTime=c*v);}break}}return {mount(i){n=i.closest(".vide-ui")??i,n.setAttribute("tabindex","0");},connect(i){t=i,n&&n.addEventListener("keydown",o);},destroy(){n&&(n.removeEventListener("keydown",o),n.removeAttribute("tabindex"),n=null),t=null;}}}function K(){let e=null;return {mount(n){e=a("div","vide-loader");let t=a("div","vide-loader__spinner");e.appendChild(t),n.appendChild(e);},connect(n){},destroy(){e&&(e.remove(),e=null);}}}function O(){let e=null,n=null,t=null;function r(l){e&&(t&&t.remove(),t=l?k():L(),e.appendChild(t));}function o(){n&&(n.state==="playing"?n.pause():n.play().catch(()=>{}));}function i({to:l}){e&&(l==="playing"?(e.classList.add("vide-play--playing"),e.classList.remove("vide-play--paused"),e.setAttribute("aria-label","Pause"),r(true)):(l==="paused"||l==="ready"||l==="ended")&&(e.classList.remove("vide-play--playing"),e.classList.add("vide-play--paused"),e.setAttribute("aria-label","Play"),r(false)));}return {mount(l){e=a("button","vide-play vide-play--paused"),e.type="button",e.setAttribute("aria-label","Play"),r(false),l.appendChild(e);},connect(l){n=l,e&&(e.addEventListener("click",o),n.on("statechange",i));},destroy(){e&&(e.removeEventListener("click",o),e.remove(),e=null,t=null),n&&(n.off("statechange",i),n=null);}}}function $(e){let n=null;return {mount(t){n=a("div","vide-poster");let r=a("img","vide-poster__image");r.src=e.src,r.alt="",n.appendChild(r),t.appendChild(n);},connect(t){},destroy(){n&&(n.remove(),n=null);}}}function q(){let e=null,n=null,t=null,r=null,o=null,i=false;function l(s){if(!e)return 0;let p=e.getBoundingClientRect();return p.width===0?0:Math.max(0,Math.min(1,(s.clientX-p.left)/p.width))}function u(s){e&&e.style.setProperty("--vide-progress",String(s));}function m(){if(!o||!t)return;let s=o.el;if(s.buffered.length>0&&s.duration>0){let g=s.buffered.end(s.buffered.length-1)/s.duration;t.style.setProperty("--vide-progress-buffered",String(Math.min(1,g)));}}function d(){if(i||!o)return;let{currentTime:s,duration:p}=o.el;p>0&&u(s/p),m(),e&&(e.setAttribute("aria-valuenow",String(Math.floor(s))),Number.isFinite(p)&&e.setAttribute("aria-valuemax",String(Math.floor(p))));}function c(s){!o||!e||f(o.state)||(i=true,e.classList.add("vide-progress--dragging"),e.setPointerCapture(s.pointerId),u(l(s)));}function v(s){i&&u(l(s));}function h(s){if(!i||!o)return;i=false,e&&(e.classList.remove("vide-progress--dragging"),e.releasePointerCapture(s.pointerId));let p=l(s),g=o.el.duration;Number.isFinite(g)&&g>0&&(o.currentTime=p*g);}function E({to:s}){e&&(f(s)?e.classList.add("vide-progress--disabled"):e.classList.remove("vide-progress--disabled"));}return {mount(s){e=a("div","vide-progress"),e.setAttribute("role","slider"),e.setAttribute("aria-label","Seek"),e.setAttribute("aria-valuemin","0"),e.setAttribute("aria-valuemax","0"),e.setAttribute("aria-valuenow","0"),t=a("div","vide-progress__buffered"),n=a("div","vide-progress__bar"),r=a("div","vide-progress__handle"),e.appendChild(t),e.appendChild(n),e.appendChild(r),s.appendChild(e);},connect(s){o=s,e&&(o.on("timeupdate",d),o.on("statechange",E),e.addEventListener("pointerdown",c),e.addEventListener("pointermove",v),e.addEventListener("pointerup",h));},destroy(){e&&(e.removeEventListener("pointerdown",c),e.removeEventListener("pointermove",v),e.removeEventListener("pointerup",h),e.remove(),e=null,n=null,t=null,r=null),o&&(o.off("timeupdate",d),o.off("statechange",E),o=null);}}}function X(){let e=null,n=null,t=null,r=null;function o({currentTime:i,duration:l}){n&&(n.textContent=P(i)),t&&(t.textContent=P(l));}return {mount(i){e=a("div","vide-time"),n=a("span","vide-time__current");let l=a("span","vide-time__separator");t=a("span","vide-time__duration"),n.textContent="0:00",l.textContent="/",t.textContent="0:00",e.appendChild(n),e.appendChild(l),e.appendChild(t),i.appendChild(e);},connect(i){r=i,r.on("timeupdate",o);},destroy(){e&&(e.remove(),e=null,n=null,t=null),r&&(r.off("timeupdate",o),r=null);}}}function Y(){let e=null,n=null,t=null,r=null,o=false,i=null;function l(){if(!n||!r)return;i&&i.remove(),r.muted||r.volume===0?i=V():r.volume<.5?i=H():i=x(),n.appendChild(i);}function u(){if(!r||!e||!n)return;r.muted||r.volume===0?(e.classList.add("vide-volume--muted"),n.setAttribute("aria-label","Unmute")):(e.classList.remove("vide-volume--muted"),n.setAttribute("aria-label","Mute"));let p=r.muted?0:r.volume;e.style.setProperty("--vide-volume",String(p)),t&&t.setAttribute("aria-valuenow",String(Math.round(p*100))),l();}function m(s){if(!t)return 0;let p=t.getBoundingClientRect();return p.width===0?0:Math.max(0,Math.min(1,(s.clientX-p.left)/p.width))}function d(){r&&(r.muted=!r.muted);}function c(){o||u();}function v(s){if(!r||!t)return;o=true,t.setPointerCapture(s.pointerId);let p=m(s);r.volume=p,r.muted&&p>0&&(r.muted=false),u();}function h(s){if(!o||!r)return;let p=m(s);r.volume=p,r.muted&&p>0&&(r.muted=false),u();}function E(s){!o||!t||(o=false,t.releasePointerCapture(s.pointerId));}return {mount(s){e=a("div","vide-volume"),n=a("button","vide-volume__button"),n.type="button",n.setAttribute("aria-label","Mute"),t=a("div","vide-volume__slider"),t.setAttribute("role","slider"),t.setAttribute("aria-label","Volume"),t.setAttribute("aria-valuemin","0"),t.setAttribute("aria-valuemax","100"),t.setAttribute("aria-valuenow","100");let p=a("div","vide-volume__track"),g=a("div","vide-volume__filled");t.appendChild(p),t.appendChild(g),e.appendChild(n),e.appendChild(t),s.appendChild(e);},connect(s){r=s,!(!n||!t)&&(n.addEventListener("click",d),t.addEventListener("pointerdown",v),t.addEventListener("pointermove",h),t.addEventListener("pointerup",E),r.el.addEventListener("volumechange",c),u());},destroy(){n&&n.removeEventListener("click",d),t&&(t.removeEventListener("pointerdown",v),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",E)),r&&(r.el.removeEventListener("volumechange",c),r=null),e&&(e.remove(),e=null,n=null,t=null,i=null);}}}function W(e,n,t){e.mount(n),e.connect(t);}function st(e){let n=A(),t=new Set(e.exclude);return {name:"ui",setup(r){let o=document.createElement("div");o.className="vide-ui",o.setAttribute("role","region"),o.setAttribute("aria-label","Video player"),e.container.appendChild(o);let i=[];function l(c,v,h){t.has(c)||(W(v,h,r),i.push(v));}if(l("loader",K(),o),l("error",z(),o),l("bigplay",G(),o),e.poster&&l("poster",$({src:e.poster}),o),l("clickplay",N(t),o),!t.has("ad-overlay")||!t.has("ad-label")||!t.has("ad-countdown")||!t.has("ad-skip")){let c=document.createElement("div");c.className="vide-ad",o.appendChild(c),l("ad-overlay",I(),c),l("ad-label",T(),c),l("ad-countdown",M(n),c),l("ad-skip",_(n),c);}let m=document.createElement("div");m.className="vide-controls",m.addEventListener("click",c=>c.stopPropagation()),o.appendChild(m),l("play",O(),m),l("progress",q(),m),l("time",X(),m),l("volume",Y(),m),l("fullscreen",R(),m),l("autohide",F(),o),l("keyboard",B({excluded:t}),o);let d=S(o,r);return ()=>{for(let c of i)c.destroy();d(),o.remove();}},getAdPlugin(){return ()=>[b(n)]}}}
|
|
2
|
+
export{S as connectStateClasses,M as createAdCountdown,T as createAdLabel,I as createAdOverlay,_ as createAdSkip,A as createAdUIState,F as createAutohide,G as createBigPlay,N as createClickPlay,z as createErrorDisplay,R as createFullscreen,B as createKeyboard,K as createLoader,O as createPlayButton,$ as createPoster,q as createProgress,X as createTimeDisplay,Y as createVolume,P as formatTime,f as isAdState,C as stateToClass,st as ui,b as uiAdPlugin};
|