@videts/vide 0.8.0 → 0.9.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 +11 -11
- package/dist/chunk-2OVLZ27V.mjs +1 -0
- package/dist/chunk-3RDTWUHH.mjs +1 -0
- package/dist/chunk-6DWWYSH4.mjs +1 -0
- package/dist/chunk-G74QBLVV.mjs +1 -0
- package/dist/chunk-JRU2FKRB.mjs +2 -0
- package/dist/chunk-LPSJOF2I.mjs +2 -0
- package/dist/chunk-NA4C7W64.mjs +2 -0
- package/dist/chunk-UY5CGRNN.mjs +1 -0
- package/dist/chunk-VPH4JIJV.mjs +1 -0
- package/dist/chunk-WINCDUN5.mjs +1 -0
- package/dist/dash/index.d.ts +3 -9
- package/dist/dash/index.js +1 -0
- package/dist/dash/index.mjs +1 -2
- package/dist/drm/index.d.ts +4 -31
- package/dist/drm/index.js +1 -0
- package/dist/drm/index.mjs +1 -1
- package/dist/hls/index.d.ts +3 -9
- package/dist/hls/index.js +1 -0
- package/dist/hls/index.mjs +1 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -0
- package/dist/index.mjs +1 -1
- package/dist/omid/index.d.ts +2 -2
- package/dist/omid/index.js +2 -0
- package/dist/react/index.d.ts +240 -0
- package/dist/react/index.js +2 -0
- package/dist/react/index.mjs +2 -0
- package/dist/simid/index.d.ts +2 -2
- package/dist/simid/index.js +1 -0
- package/dist/ssai/index.d.ts +4 -40
- package/dist/ssai/index.js +1 -0
- package/dist/ssai/index.mjs +1 -1
- package/dist/svelte/DashPlugin.svelte +23 -0
- package/dist/svelte/DashPlugin.svelte.d.ts +4 -0
- package/dist/svelte/DrmPlugin.svelte +20 -0
- package/dist/svelte/DrmPlugin.svelte.d.ts +4 -0
- package/dist/svelte/HlsPlugin.svelte +23 -0
- package/dist/svelte/HlsPlugin.svelte.d.ts +4 -0
- package/dist/svelte/SsaiPlugin.svelte +23 -0
- package/dist/svelte/SsaiPlugin.svelte.d.ts +4 -0
- package/dist/svelte/VastPlugin.svelte +20 -0
- package/dist/svelte/VastPlugin.svelte.d.ts +4 -0
- package/dist/svelte/VideControls.svelte +22 -0
- package/dist/svelte/VideControls.svelte.d.ts +8 -0
- package/dist/svelte/VideUI.svelte +49 -0
- package/dist/svelte/VideUI.svelte.d.ts +9 -0
- package/dist/svelte/Video.svelte +31 -0
- package/dist/svelte/Video.svelte.d.ts +10 -0
- package/dist/svelte/VmapPlugin.svelte +20 -0
- package/dist/svelte/VmapPlugin.svelte.d.ts +4 -0
- package/dist/svelte/components/AdCountdown.svelte +37 -0
- package/dist/svelte/components/AdCountdown.svelte.d.ts +7 -0
- package/dist/svelte/components/AdLabel.svelte +26 -0
- package/dist/svelte/components/AdLabel.svelte.d.ts +8 -0
- package/dist/svelte/components/AdLearnMore.svelte +42 -0
- package/dist/svelte/components/AdLearnMore.svelte.d.ts +9 -0
- package/dist/svelte/components/AdOverlay.svelte +46 -0
- package/dist/svelte/components/AdOverlay.svelte.d.ts +8 -0
- package/dist/svelte/components/AdSkip.svelte +67 -0
- package/dist/svelte/components/AdSkip.svelte.d.ts +8 -0
- package/dist/svelte/components/BigPlayButton.svelte +46 -0
- package/dist/svelte/components/BigPlayButton.svelte.d.ts +8 -0
- package/dist/svelte/components/ClickPlay.svelte +76 -0
- package/dist/svelte/components/ClickPlay.svelte.d.ts +7 -0
- package/dist/svelte/components/ErrorDisplay.svelte +27 -0
- package/dist/svelte/components/ErrorDisplay.svelte.d.ts +6 -0
- package/dist/svelte/components/FullscreenButton.svelte +65 -0
- package/dist/svelte/components/FullscreenButton.svelte.d.ts +9 -0
- package/dist/svelte/components/Loader.svelte +11 -0
- package/dist/svelte/components/Loader.svelte.d.ts +6 -0
- package/dist/svelte/components/MuteButton.svelte +57 -0
- package/dist/svelte/components/MuteButton.svelte.d.ts +8 -0
- package/dist/svelte/components/PlayButton.svelte +63 -0
- package/dist/svelte/components/PlayButton.svelte.d.ts +8 -0
- package/dist/svelte/components/Poster.svelte +13 -0
- package/dist/svelte/components/Poster.svelte.d.ts +8 -0
- package/dist/svelte/components/Progress.svelte +101 -0
- package/dist/svelte/components/Progress.svelte.d.ts +6 -0
- package/dist/svelte/components/TimeDisplay.svelte +33 -0
- package/dist/svelte/components/TimeDisplay.svelte.d.ts +7 -0
- package/dist/svelte/components/Volume.svelte +117 -0
- package/dist/svelte/components/Volume.svelte.d.ts +8 -0
- package/dist/svelte/context.d.ts +6 -0
- package/dist/svelte/context.js +10 -0
- package/dist/svelte/create-vide-player.svelte.d.ts +2 -0
- package/dist/svelte/create-vide-player.svelte.js +22 -0
- package/dist/svelte/helpers.d.ts +17 -0
- package/dist/svelte/helpers.js +31 -0
- package/dist/svelte/icons/IconFullscreenEnter.svelte +3 -0
- package/dist/svelte/icons/IconFullscreenEnter.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconFullscreenExit.svelte +3 -0
- package/dist/svelte/icons/IconFullscreenExit.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconPause.svelte +3 -0
- package/dist/svelte/icons/IconPause.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconPlay.svelte +3 -0
- package/dist/svelte/icons/IconPlay.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconVolumeHigh.svelte +3 -0
- package/dist/svelte/icons/IconVolumeHigh.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconVolumeLow.svelte +3 -0
- package/dist/svelte/icons/IconVolumeLow.svelte.d.ts +26 -0
- package/dist/svelte/icons/IconVolumeMute.svelte +3 -0
- package/dist/svelte/icons/IconVolumeMute.svelte.d.ts +26 -0
- package/dist/svelte/index.d.ts +42 -0
- package/dist/svelte/index.js +39 -0
- package/dist/svelte/use-ad-state.svelte.d.ts +7 -0
- package/dist/svelte/use-ad-state.svelte.js +40 -0
- package/dist/svelte/use-autohide.svelte.d.ts +2 -0
- package/dist/svelte/use-autohide.svelte.js +68 -0
- package/dist/svelte/use-keyboard.svelte.d.ts +7 -0
- package/dist/svelte/use-keyboard.svelte.js +96 -0
- package/dist/svelte/use-plugin.svelte.d.ts +15 -0
- package/dist/svelte/use-plugin.svelte.js +40 -0
- package/dist/svelte/use-vide-event.svelte.d.ts +3 -0
- package/dist/svelte/use-vide-event.svelte.js +9 -0
- package/dist/{types-vxIcXgJz.d.ts → types-BsEF8iWC.d.ts} +106 -1
- package/dist/types-C1_eVsFF.d.ts +49 -0
- package/dist/types-C6XFF6w_.d.ts +30 -0
- package/dist/types-COeag8fU.d.ts +173 -0
- package/dist/types-CwjR99DL.d.ts +10 -0
- package/dist/types-DsixuzNX.d.ts +52 -0
- package/dist/types-DzY1cmXC.d.ts +10 -0
- package/dist/types-SuT99_Z3.d.ts +40 -0
- package/dist/ui/index.d.ts +7 -37
- package/dist/ui/index.js +1 -0
- package/dist/ui/index.mjs +1 -2
- package/dist/ui/theme.css +138 -46
- package/dist/vast/index.d.ts +188 -4
- package/dist/vast/index.js +1 -0
- package/dist/vast/index.mjs +1 -1
- package/dist/vide.core.global.js +1 -1
- package/dist/vide.global.js +2 -2
- package/dist/vide.ssai.global.js +1 -1
- package/dist/vide.ui.css +138 -46
- package/dist/vide.ui.global.js +1 -1
- package/dist/vide.vast.global.js +1 -1
- package/dist/vide.vmap.global.js +1 -1
- package/dist/vmap/index.d.ts +5 -49
- package/dist/vmap/index.js +1 -0
- package/dist/vmap/index.mjs +1 -1
- package/dist/vue/index.d.ts +354 -0
- package/dist/vue/index.js +2 -0
- package/dist/vue/index.mjs +2 -0
- package/package.json +47 -6
- package/dist/chunk-726XNUGZ.mjs +0 -1
- package/dist/chunk-G4Q7R3SH.mjs +0 -1
- package/dist/types-CAJmacV6.d.ts +0 -98
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default IconVolumeHigh;
|
|
2
|
+
type IconVolumeHigh = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const IconVolumeHigh: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default IconVolumeLow;
|
|
2
|
+
type IconVolumeLow = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const IconVolumeLow: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
|
|
2
|
+
<path d="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" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default IconVolumeMute;
|
|
2
|
+
type IconVolumeMute = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const IconVolumeMute: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export { createVidePlayer } from "./create-vide-player.svelte.js";
|
|
2
|
+
export { useVideEvent } from "./use-vide-event.svelte.js";
|
|
3
|
+
export { useHls, useDash, useDrm, useVast, useVmap, useSsai, useUi, } from "./use-plugin.svelte.js";
|
|
4
|
+
export { VIDE_PLAYER_KEY, useVideContext } from "./context.js";
|
|
5
|
+
export type { PlayerGetter } from "./context.js";
|
|
6
|
+
export { default as VideVideo } from "./Video.svelte";
|
|
7
|
+
export { default as HlsPlugin } from "./HlsPlugin.svelte";
|
|
8
|
+
export { default as DashPlugin } from "./DashPlugin.svelte";
|
|
9
|
+
export { default as DrmPlugin } from "./DrmPlugin.svelte";
|
|
10
|
+
export { default as VastPlugin } from "./VastPlugin.svelte";
|
|
11
|
+
export { default as VmapPlugin } from "./VmapPlugin.svelte";
|
|
12
|
+
export { default as SsaiPlugin } from "./SsaiPlugin.svelte";
|
|
13
|
+
export { default as VideUI } from "./VideUI.svelte";
|
|
14
|
+
export { default as VideControls } from "./VideControls.svelte";
|
|
15
|
+
export { default as PlayButton } from "./components/PlayButton.svelte";
|
|
16
|
+
export { default as MuteButton } from "./components/MuteButton.svelte";
|
|
17
|
+
export { default as Progress } from "./components/Progress.svelte";
|
|
18
|
+
export { default as Volume } from "./components/Volume.svelte";
|
|
19
|
+
export { default as FullscreenButton } from "./components/FullscreenButton.svelte";
|
|
20
|
+
export { default as TimeDisplay } from "./components/TimeDisplay.svelte";
|
|
21
|
+
export { default as Loader } from "./components/Loader.svelte";
|
|
22
|
+
export { default as Poster } from "./components/Poster.svelte";
|
|
23
|
+
export { default as ErrorDisplay } from "./components/ErrorDisplay.svelte";
|
|
24
|
+
export { default as BigPlayButton } from "./components/BigPlayButton.svelte";
|
|
25
|
+
export { default as ClickPlay } from "./components/ClickPlay.svelte";
|
|
26
|
+
export { default as IconPlay } from "./icons/IconPlay.svelte";
|
|
27
|
+
export { default as IconPause } from "./icons/IconPause.svelte";
|
|
28
|
+
export { default as IconVolumeHigh } from "./icons/IconVolumeHigh.svelte";
|
|
29
|
+
export { default as IconVolumeLow } from "./icons/IconVolumeLow.svelte";
|
|
30
|
+
export { default as IconVolumeMute } from "./icons/IconVolumeMute.svelte";
|
|
31
|
+
export { default as IconFullscreenEnter } from "./icons/IconFullscreenEnter.svelte";
|
|
32
|
+
export { default as IconFullscreenExit } from "./icons/IconFullscreenExit.svelte";
|
|
33
|
+
export { useAdState } from "./use-ad-state.svelte.js";
|
|
34
|
+
export type { AdState } from "./use-ad-state.svelte.js";
|
|
35
|
+
export { default as AdOverlay } from "./components/AdOverlay.svelte";
|
|
36
|
+
export { default as AdSkip } from "./components/AdSkip.svelte";
|
|
37
|
+
export { default as AdCountdown } from "./components/AdCountdown.svelte";
|
|
38
|
+
export { default as AdLabel } from "./components/AdLabel.svelte";
|
|
39
|
+
export { default as AdLearnMore } from "./components/AdLearnMore.svelte";
|
|
40
|
+
export { useAutohide } from "./use-autohide.svelte.js";
|
|
41
|
+
export { useKeyboard } from "./use-keyboard.svelte.js";
|
|
42
|
+
export type { UseKeyboardOptions } from "./use-keyboard.svelte.js";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export { createVidePlayer } from "./create-vide-player.svelte.js";
|
|
2
|
+
export { useVideEvent } from "./use-vide-event.svelte.js";
|
|
3
|
+
export { useHls, useDash, useDrm, useVast, useVmap, useSsai, useUi, } from "./use-plugin.svelte.js";
|
|
4
|
+
export { VIDE_PLAYER_KEY, useVideContext } from "./context.js";
|
|
5
|
+
export { default as VideVideo } from "./Video.svelte";
|
|
6
|
+
export { default as HlsPlugin } from "./HlsPlugin.svelte";
|
|
7
|
+
export { default as DashPlugin } from "./DashPlugin.svelte";
|
|
8
|
+
export { default as DrmPlugin } from "./DrmPlugin.svelte";
|
|
9
|
+
export { default as VastPlugin } from "./VastPlugin.svelte";
|
|
10
|
+
export { default as VmapPlugin } from "./VmapPlugin.svelte";
|
|
11
|
+
export { default as SsaiPlugin } from "./SsaiPlugin.svelte";
|
|
12
|
+
export { default as VideUI } from "./VideUI.svelte";
|
|
13
|
+
export { default as VideControls } from "./VideControls.svelte";
|
|
14
|
+
export { default as PlayButton } from "./components/PlayButton.svelte";
|
|
15
|
+
export { default as MuteButton } from "./components/MuteButton.svelte";
|
|
16
|
+
export { default as Progress } from "./components/Progress.svelte";
|
|
17
|
+
export { default as Volume } from "./components/Volume.svelte";
|
|
18
|
+
export { default as FullscreenButton } from "./components/FullscreenButton.svelte";
|
|
19
|
+
export { default as TimeDisplay } from "./components/TimeDisplay.svelte";
|
|
20
|
+
export { default as Loader } from "./components/Loader.svelte";
|
|
21
|
+
export { default as Poster } from "./components/Poster.svelte";
|
|
22
|
+
export { default as ErrorDisplay } from "./components/ErrorDisplay.svelte";
|
|
23
|
+
export { default as BigPlayButton } from "./components/BigPlayButton.svelte";
|
|
24
|
+
export { default as ClickPlay } from "./components/ClickPlay.svelte";
|
|
25
|
+
export { default as IconPlay } from "./icons/IconPlay.svelte";
|
|
26
|
+
export { default as IconPause } from "./icons/IconPause.svelte";
|
|
27
|
+
export { default as IconVolumeHigh } from "./icons/IconVolumeHigh.svelte";
|
|
28
|
+
export { default as IconVolumeLow } from "./icons/IconVolumeLow.svelte";
|
|
29
|
+
export { default as IconVolumeMute } from "./icons/IconVolumeMute.svelte";
|
|
30
|
+
export { default as IconFullscreenEnter } from "./icons/IconFullscreenEnter.svelte";
|
|
31
|
+
export { default as IconFullscreenExit } from "./icons/IconFullscreenExit.svelte";
|
|
32
|
+
export { useAdState } from "./use-ad-state.svelte.js";
|
|
33
|
+
export { default as AdOverlay } from "./components/AdOverlay.svelte";
|
|
34
|
+
export { default as AdSkip } from "./components/AdSkip.svelte";
|
|
35
|
+
export { default as AdCountdown } from "./components/AdCountdown.svelte";
|
|
36
|
+
export { default as AdLabel } from "./components/AdLabel.svelte";
|
|
37
|
+
export { default as AdLearnMore } from "./components/AdLearnMore.svelte";
|
|
38
|
+
export { useAutohide } from "./use-autohide.svelte.js";
|
|
39
|
+
export { useKeyboard } from "./use-keyboard.svelte.js";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export function useAdState(getPlayer) {
|
|
2
|
+
let active = $state(false);
|
|
3
|
+
let meta = $state(null);
|
|
4
|
+
$effect(() => {
|
|
5
|
+
const p = getPlayer();
|
|
6
|
+
if (!p)
|
|
7
|
+
return;
|
|
8
|
+
const onStart = (data) => {
|
|
9
|
+
active = true;
|
|
10
|
+
meta = {
|
|
11
|
+
adId: data.adId,
|
|
12
|
+
clickThrough: data.clickThrough,
|
|
13
|
+
skipOffset: data.skipOffset,
|
|
14
|
+
duration: data.duration,
|
|
15
|
+
adTitle: data.adTitle,
|
|
16
|
+
adStartTime: Date.now(),
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
const onEnd = () => {
|
|
20
|
+
active = false;
|
|
21
|
+
meta = null;
|
|
22
|
+
};
|
|
23
|
+
p.on("ad:start", onStart);
|
|
24
|
+
p.on("ad:end", onEnd);
|
|
25
|
+
p.on("ad:skip", onEnd);
|
|
26
|
+
return () => {
|
|
27
|
+
p.off("ad:start", onStart);
|
|
28
|
+
p.off("ad:end", onEnd);
|
|
29
|
+
p.off("ad:skip", onEnd);
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
return {
|
|
33
|
+
get active() {
|
|
34
|
+
return active;
|
|
35
|
+
},
|
|
36
|
+
get meta() {
|
|
37
|
+
return meta;
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { isAdState } from "./helpers.js";
|
|
2
|
+
const IDLE_DELAY = 3000;
|
|
3
|
+
export function useAutohide(getContainer, getPlayer) {
|
|
4
|
+
let timer = null;
|
|
5
|
+
$effect(() => {
|
|
6
|
+
const root = getContainer();
|
|
7
|
+
const player = getPlayer();
|
|
8
|
+
if (!root || !player)
|
|
9
|
+
return;
|
|
10
|
+
function shouldStayVisible() {
|
|
11
|
+
if (!player)
|
|
12
|
+
return true;
|
|
13
|
+
const s = player.state;
|
|
14
|
+
return (s === "paused" ||
|
|
15
|
+
s === "ended" ||
|
|
16
|
+
s === "idle" ||
|
|
17
|
+
s === "ready" ||
|
|
18
|
+
isAdState(s));
|
|
19
|
+
}
|
|
20
|
+
function showControls() {
|
|
21
|
+
root?.classList.remove("vide-ui--autohide");
|
|
22
|
+
}
|
|
23
|
+
function clearTimer() {
|
|
24
|
+
if (timer !== null) {
|
|
25
|
+
clearTimeout(timer);
|
|
26
|
+
timer = null;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function startTimer() {
|
|
30
|
+
clearTimer();
|
|
31
|
+
if (shouldStayVisible())
|
|
32
|
+
return;
|
|
33
|
+
timer = setTimeout(() => {
|
|
34
|
+
root?.classList.add("vide-ui--autohide");
|
|
35
|
+
}, IDLE_DELAY);
|
|
36
|
+
}
|
|
37
|
+
function onActivity() {
|
|
38
|
+
showControls();
|
|
39
|
+
startTimer();
|
|
40
|
+
}
|
|
41
|
+
function onStateChange({ to, }) {
|
|
42
|
+
if (to === "paused" ||
|
|
43
|
+
to === "ended" ||
|
|
44
|
+
to === "idle" ||
|
|
45
|
+
to === "ready" ||
|
|
46
|
+
isAdState(to)) {
|
|
47
|
+
clearTimer();
|
|
48
|
+
showControls();
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
startTimer();
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
root.addEventListener("mousemove", onActivity);
|
|
55
|
+
root.addEventListener("touchstart", onActivity);
|
|
56
|
+
root.addEventListener("keydown", onActivity);
|
|
57
|
+
player.on("statechange", onStateChange);
|
|
58
|
+
startTimer();
|
|
59
|
+
return () => {
|
|
60
|
+
clearTimer();
|
|
61
|
+
root.removeEventListener("mousemove", onActivity);
|
|
62
|
+
root.removeEventListener("touchstart", onActivity);
|
|
63
|
+
root.removeEventListener("keydown", onActivity);
|
|
64
|
+
root.classList.remove("vide-ui--autohide");
|
|
65
|
+
player.off("statechange", onStateChange);
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { PlayerGetter } from "./context.js";
|
|
2
|
+
export interface UseKeyboardOptions {
|
|
3
|
+
disableSeek?: boolean;
|
|
4
|
+
disableVolume?: boolean;
|
|
5
|
+
disableFullscreen?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function useKeyboard(getContainer: () => HTMLElement | null, getPlayer: PlayerGetter, options?: UseKeyboardOptions): void;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { isAdState } from "./helpers.js";
|
|
2
|
+
export function useKeyboard(getContainer, getPlayer, options = {}) {
|
|
3
|
+
$effect(() => {
|
|
4
|
+
const root = getContainer();
|
|
5
|
+
const player = getPlayer();
|
|
6
|
+
if (!root || !player)
|
|
7
|
+
return;
|
|
8
|
+
root.setAttribute("tabindex", "0");
|
|
9
|
+
function onKeyDown(e) {
|
|
10
|
+
if (!player)
|
|
11
|
+
return;
|
|
12
|
+
const hasSeek = !options.disableSeek;
|
|
13
|
+
const hasVolume = !options.disableVolume;
|
|
14
|
+
const hasFullscreen = !options.disableFullscreen;
|
|
15
|
+
const inAd = isAdState(player.state);
|
|
16
|
+
switch (e.key) {
|
|
17
|
+
case " ":
|
|
18
|
+
case "k":
|
|
19
|
+
case "K":
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
if (player.state === "playing" || player.state === "ad:playing") {
|
|
22
|
+
player.pause();
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
player.play().catch(() => { });
|
|
26
|
+
}
|
|
27
|
+
break;
|
|
28
|
+
case "ArrowLeft":
|
|
29
|
+
if (!hasSeek || inAd)
|
|
30
|
+
return;
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
player.currentTime = Math.max(0, player.el.currentTime - 5);
|
|
33
|
+
break;
|
|
34
|
+
case "ArrowRight":
|
|
35
|
+
if (!hasSeek || inAd)
|
|
36
|
+
return;
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
player.currentTime = Math.min(player.el.duration || 0, player.el.currentTime + 5);
|
|
39
|
+
break;
|
|
40
|
+
case "ArrowUp":
|
|
41
|
+
if (!hasVolume)
|
|
42
|
+
return;
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
player.volume = Math.min(1, player.volume + 0.1);
|
|
45
|
+
if (player.muted)
|
|
46
|
+
player.muted = false;
|
|
47
|
+
break;
|
|
48
|
+
case "ArrowDown":
|
|
49
|
+
if (!hasVolume)
|
|
50
|
+
return;
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
player.volume = Math.max(0, player.volume - 0.1);
|
|
53
|
+
break;
|
|
54
|
+
case "m":
|
|
55
|
+
case "M":
|
|
56
|
+
if (!hasVolume)
|
|
57
|
+
return;
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
player.muted = !player.muted;
|
|
60
|
+
break;
|
|
61
|
+
case "f":
|
|
62
|
+
case "F":
|
|
63
|
+
if (!hasFullscreen)
|
|
64
|
+
return;
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
if (document.fullscreenElement != null) {
|
|
67
|
+
document.exitFullscreen().catch(() => { });
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
const target = root?.closest(".vide-ui") ?? root;
|
|
71
|
+
target?.requestFullscreen().catch(() => { });
|
|
72
|
+
}
|
|
73
|
+
break;
|
|
74
|
+
default:
|
|
75
|
+
if (e.key.length === 1 &&
|
|
76
|
+
e.key >= "0" &&
|
|
77
|
+
e.key <= "9" &&
|
|
78
|
+
hasSeek &&
|
|
79
|
+
!inAd) {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
const pct = Number.parseInt(e.key, 10) / 10;
|
|
82
|
+
const duration = player.el.duration;
|
|
83
|
+
if (Number.isFinite(duration) && duration > 0) {
|
|
84
|
+
player.currentTime = pct * duration;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
break;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
root.addEventListener("keydown", onKeyDown);
|
|
91
|
+
return () => {
|
|
92
|
+
root.removeEventListener("keydown", onKeyDown);
|
|
93
|
+
root.removeAttribute("tabindex");
|
|
94
|
+
};
|
|
95
|
+
});
|
|
96
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { DashPluginOptions } from "../dash/types.js";
|
|
2
|
+
import type { DrmPluginOptions } from "../drm/types.js";
|
|
3
|
+
import type { HlsPluginOptions } from "../hls/types.js";
|
|
4
|
+
import type { SsaiPluginOptions } from "../ssai/types.js";
|
|
5
|
+
import type { UiPluginOptions } from "../ui/types.js";
|
|
6
|
+
import type { VastPluginOptions } from "../vast/types.js";
|
|
7
|
+
import type { VmapPluginOptions } from "../vmap/types.js";
|
|
8
|
+
import type { PlayerGetter } from "./context.js";
|
|
9
|
+
export declare function useHls(getPlayer: PlayerGetter, options?: HlsPluginOptions): void;
|
|
10
|
+
export declare function useDash(getPlayer: PlayerGetter, options?: DashPluginOptions): void;
|
|
11
|
+
export declare function useDrm(getPlayer: PlayerGetter, options: DrmPluginOptions): void;
|
|
12
|
+
export declare function useVast(getPlayer: PlayerGetter, options: VastPluginOptions): void;
|
|
13
|
+
export declare function useVmap(getPlayer: PlayerGetter, options: VmapPluginOptions): void;
|
|
14
|
+
export declare function useSsai(getPlayer: PlayerGetter, options?: SsaiPluginOptions): void;
|
|
15
|
+
export declare function useUi(getPlayer: PlayerGetter, options: UiPluginOptions): void;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { dash } from "../dash/index.js";
|
|
2
|
+
import { drm } from "../drm/index.js";
|
|
3
|
+
import { hls } from "../hls/index.js";
|
|
4
|
+
import { ssai } from "../ssai/index.js";
|
|
5
|
+
import { ui } from "../ui/index.js";
|
|
6
|
+
import { vast } from "../vast/index.js";
|
|
7
|
+
import { vmap } from "../vmap/index.js";
|
|
8
|
+
function usePlugin(getPlayer, factory, options) {
|
|
9
|
+
$effect(() => {
|
|
10
|
+
const p = getPlayer();
|
|
11
|
+
if (!p)
|
|
12
|
+
return;
|
|
13
|
+
const plugin = factory(options);
|
|
14
|
+
const cleanup = plugin.setup(p);
|
|
15
|
+
return () => {
|
|
16
|
+
cleanup?.();
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
export function useHls(getPlayer, options) {
|
|
21
|
+
usePlugin(getPlayer, hls, options ?? {});
|
|
22
|
+
}
|
|
23
|
+
export function useDash(getPlayer, options) {
|
|
24
|
+
usePlugin(getPlayer, dash, options ?? {});
|
|
25
|
+
}
|
|
26
|
+
export function useDrm(getPlayer, options) {
|
|
27
|
+
usePlugin(getPlayer, drm, options);
|
|
28
|
+
}
|
|
29
|
+
export function useVast(getPlayer, options) {
|
|
30
|
+
usePlugin(getPlayer, vast, options);
|
|
31
|
+
}
|
|
32
|
+
export function useVmap(getPlayer, options) {
|
|
33
|
+
usePlugin(getPlayer, vmap, options);
|
|
34
|
+
}
|
|
35
|
+
export function useSsai(getPlayer, options) {
|
|
36
|
+
usePlugin(getPlayer, ssai, options ?? {});
|
|
37
|
+
}
|
|
38
|
+
export function useUi(getPlayer, options) {
|
|
39
|
+
usePlugin(getPlayer, ui, options);
|
|
40
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { PlayerGetter } from "./context.js";
|
|
2
|
+
import type { EventHandler, PlayerEvent, PlayerEventMap } from "./helpers.js";
|
|
3
|
+
export declare function useVideEvent<K extends PlayerEvent>(getPlayer: PlayerGetter, event: K, handler: EventHandler<PlayerEventMap[K]>): void;
|
|
@@ -23,8 +23,74 @@ interface PlayerEventMap {
|
|
|
23
23
|
recoverable?: boolean | undefined;
|
|
24
24
|
retryCount?: number | undefined;
|
|
25
25
|
};
|
|
26
|
+
"ad:companions": {
|
|
27
|
+
adId: string;
|
|
28
|
+
required: "all" | "any" | "none";
|
|
29
|
+
companions: {
|
|
30
|
+
width: number;
|
|
31
|
+
height: number;
|
|
32
|
+
id?: string | undefined;
|
|
33
|
+
assetWidth?: number | undefined;
|
|
34
|
+
assetHeight?: number | undefined;
|
|
35
|
+
expandedWidth?: number | undefined;
|
|
36
|
+
expandedHeight?: number | undefined;
|
|
37
|
+
pxratio?: number | undefined;
|
|
38
|
+
renderingMode?: "default" | "end-card" | "concurrent" | undefined;
|
|
39
|
+
resources: Array<{
|
|
40
|
+
type: "static";
|
|
41
|
+
url: string;
|
|
42
|
+
creativeType: string;
|
|
43
|
+
} | {
|
|
44
|
+
type: "iframe";
|
|
45
|
+
url: string;
|
|
46
|
+
} | {
|
|
47
|
+
type: "html";
|
|
48
|
+
content: string;
|
|
49
|
+
}>;
|
|
50
|
+
clickThrough?: string | undefined;
|
|
51
|
+
clickTracking: string[];
|
|
52
|
+
trackingEvents: {
|
|
53
|
+
creativeView: string[];
|
|
54
|
+
};
|
|
55
|
+
altText?: string | undefined;
|
|
56
|
+
adParameters?: string | undefined;
|
|
57
|
+
}[];
|
|
58
|
+
};
|
|
59
|
+
"ad:nonlinears": {
|
|
60
|
+
adId: string;
|
|
61
|
+
nonLinears: {
|
|
62
|
+
width: number;
|
|
63
|
+
height: number;
|
|
64
|
+
id?: string | undefined;
|
|
65
|
+
expandedWidth?: number | undefined;
|
|
66
|
+
expandedHeight?: number | undefined;
|
|
67
|
+
scalable?: boolean | undefined;
|
|
68
|
+
maintainAspectRatio?: boolean | undefined;
|
|
69
|
+
minSuggestedDuration?: number | undefined;
|
|
70
|
+
apiFramework?: string | undefined;
|
|
71
|
+
resources: Array<{
|
|
72
|
+
type: "static";
|
|
73
|
+
url: string;
|
|
74
|
+
creativeType: string;
|
|
75
|
+
} | {
|
|
76
|
+
type: "iframe";
|
|
77
|
+
url: string;
|
|
78
|
+
} | {
|
|
79
|
+
type: "html";
|
|
80
|
+
content: string;
|
|
81
|
+
}>;
|
|
82
|
+
clickThrough?: string | undefined;
|
|
83
|
+
clickTracking: string[];
|
|
84
|
+
adParameters?: string | undefined;
|
|
85
|
+
}[];
|
|
86
|
+
trackingEvents: Record<string, string[]>;
|
|
87
|
+
};
|
|
26
88
|
"ad:start": {
|
|
27
89
|
adId: string;
|
|
90
|
+
clickThrough?: string | undefined;
|
|
91
|
+
skipOffset?: number | undefined;
|
|
92
|
+
duration?: number | undefined;
|
|
93
|
+
adTitle?: string | undefined;
|
|
28
94
|
};
|
|
29
95
|
"ad:end": {
|
|
30
96
|
adId: string;
|
|
@@ -39,6 +105,8 @@ interface PlayerEventMap {
|
|
|
39
105
|
"ad:error": {
|
|
40
106
|
error: Error;
|
|
41
107
|
source: string;
|
|
108
|
+
/** VAST 4.2 error code. Undefined for non-VAST errors. */
|
|
109
|
+
vastErrorCode?: number | undefined;
|
|
42
110
|
};
|
|
43
111
|
"ad:impression": {
|
|
44
112
|
adId: string;
|
|
@@ -70,6 +138,34 @@ interface PlayerEventMap {
|
|
|
70
138
|
"ad:breakEnd": {
|
|
71
139
|
breakId: string | undefined;
|
|
72
140
|
};
|
|
141
|
+
"ad:pod:start": {
|
|
142
|
+
ads: {
|
|
143
|
+
id: string;
|
|
144
|
+
sequence?: number | undefined;
|
|
145
|
+
}[];
|
|
146
|
+
total: number;
|
|
147
|
+
};
|
|
148
|
+
"ad:pod:end": {
|
|
149
|
+
completed: number;
|
|
150
|
+
skipped: number;
|
|
151
|
+
failed: number;
|
|
152
|
+
};
|
|
153
|
+
"ad:pod:adstart": {
|
|
154
|
+
ad: {
|
|
155
|
+
id: string;
|
|
156
|
+
sequence?: number | undefined;
|
|
157
|
+
};
|
|
158
|
+
index: number;
|
|
159
|
+
total: number;
|
|
160
|
+
};
|
|
161
|
+
"ad:pod:adend": {
|
|
162
|
+
ad: {
|
|
163
|
+
id: string;
|
|
164
|
+
sequence?: number | undefined;
|
|
165
|
+
};
|
|
166
|
+
index: number;
|
|
167
|
+
total: number;
|
|
168
|
+
};
|
|
73
169
|
qualitiesavailable: {
|
|
74
170
|
qualities: QualityLevel[];
|
|
75
171
|
};
|
|
@@ -89,6 +185,15 @@ interface PlayerEventMap {
|
|
|
89
185
|
destroy: undefined;
|
|
90
186
|
}
|
|
91
187
|
type PlayerEvent = keyof PlayerEventMap;
|
|
188
|
+
/** Ad metadata exposed by framework `useAdState` hooks. */
|
|
189
|
+
interface AdMeta {
|
|
190
|
+
adId: string;
|
|
191
|
+
clickThrough: string | undefined;
|
|
192
|
+
skipOffset: number | undefined;
|
|
193
|
+
duration: number | undefined;
|
|
194
|
+
adTitle: string | undefined;
|
|
195
|
+
adStartTime: number;
|
|
196
|
+
}
|
|
92
197
|
interface RecoveryConfig {
|
|
93
198
|
maxRetries: number;
|
|
94
199
|
retryDelay: number;
|
|
@@ -208,4 +313,4 @@ interface Player extends EventBus {
|
|
|
208
313
|
getPluginData(key: string): unknown;
|
|
209
314
|
}
|
|
210
315
|
|
|
211
|
-
export type {
|
|
316
|
+
export type { AdMeta as A, EventBus as E, MediaElement as M, Player as P, QualityLevel as Q, RecoveryConfig as R, SeekableRange as S, VideCue as V, AdQuartile as a, EventHandler as b, PlayerEvent as c, PlayerEventMap as d, PlayerState as e, Plugin as f, SourceHandler as g, VideTextTrack as h };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { c as VastAd, A as AdPlugin } from './types-COeag8fU.js';
|
|
2
|
+
|
|
3
|
+
interface VmapResponse {
|
|
4
|
+
version: string;
|
|
5
|
+
adBreaks: AdBreak[];
|
|
6
|
+
}
|
|
7
|
+
interface AdBreakTrackingEvents {
|
|
8
|
+
breakStart: string[];
|
|
9
|
+
breakEnd: string[];
|
|
10
|
+
error: string[];
|
|
11
|
+
}
|
|
12
|
+
interface AdBreak {
|
|
13
|
+
timeOffset: AdBreakTimeOffset;
|
|
14
|
+
breakType: "linear" | "nonlinear" | "display";
|
|
15
|
+
breakId?: string | undefined;
|
|
16
|
+
adSource: AdSource | null;
|
|
17
|
+
trackingEvents: AdBreakTrackingEvents;
|
|
18
|
+
}
|
|
19
|
+
type AdBreakTimeOffset = {
|
|
20
|
+
type: "start";
|
|
21
|
+
} | {
|
|
22
|
+
type: "end";
|
|
23
|
+
} | {
|
|
24
|
+
type: "time";
|
|
25
|
+
seconds: number;
|
|
26
|
+
} | {
|
|
27
|
+
type: "percentage";
|
|
28
|
+
pct: number;
|
|
29
|
+
};
|
|
30
|
+
interface AdSource {
|
|
31
|
+
id?: string | undefined;
|
|
32
|
+
allowMultipleAds?: boolean | undefined;
|
|
33
|
+
followRedirects?: boolean | undefined;
|
|
34
|
+
vastUrl?: string | undefined;
|
|
35
|
+
vastData?: string | undefined;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
interface VmapPluginOptions {
|
|
39
|
+
url: string;
|
|
40
|
+
timeout?: number | undefined;
|
|
41
|
+
vastOptions?: {
|
|
42
|
+
timeout?: number | undefined;
|
|
43
|
+
maxDepth?: number | undefined;
|
|
44
|
+
};
|
|
45
|
+
/** Create per-ad plugins. Called once per ad with the parsed VastAd. */
|
|
46
|
+
adPlugins?: ((ad: VastAd) => AdPlugin[]) | undefined;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export type { AdBreak as A, VmapResponse as V, VmapPluginOptions as a, AdBreakTimeOffset as b, AdBreakTrackingEvents as c, AdSource as d };
|