@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.
Files changed (147) hide show
  1. package/README.md +11 -11
  2. package/dist/chunk-2OVLZ27V.mjs +1 -0
  3. package/dist/chunk-3RDTWUHH.mjs +1 -0
  4. package/dist/chunk-6DWWYSH4.mjs +1 -0
  5. package/dist/chunk-G74QBLVV.mjs +1 -0
  6. package/dist/chunk-JRU2FKRB.mjs +2 -0
  7. package/dist/chunk-LPSJOF2I.mjs +2 -0
  8. package/dist/chunk-NA4C7W64.mjs +2 -0
  9. package/dist/chunk-UY5CGRNN.mjs +1 -0
  10. package/dist/chunk-VPH4JIJV.mjs +1 -0
  11. package/dist/chunk-WINCDUN5.mjs +1 -0
  12. package/dist/dash/index.d.ts +3 -9
  13. package/dist/dash/index.js +1 -0
  14. package/dist/dash/index.mjs +1 -2
  15. package/dist/drm/index.d.ts +4 -31
  16. package/dist/drm/index.js +1 -0
  17. package/dist/drm/index.mjs +1 -1
  18. package/dist/hls/index.d.ts +3 -9
  19. package/dist/hls/index.js +1 -0
  20. package/dist/hls/index.mjs +1 -2
  21. package/dist/index.d.ts +2 -2
  22. package/dist/index.js +1 -0
  23. package/dist/index.mjs +1 -1
  24. package/dist/omid/index.d.ts +2 -2
  25. package/dist/omid/index.js +2 -0
  26. package/dist/react/index.d.ts +240 -0
  27. package/dist/react/index.js +2 -0
  28. package/dist/react/index.mjs +2 -0
  29. package/dist/simid/index.d.ts +2 -2
  30. package/dist/simid/index.js +1 -0
  31. package/dist/ssai/index.d.ts +4 -40
  32. package/dist/ssai/index.js +1 -0
  33. package/dist/ssai/index.mjs +1 -1
  34. package/dist/svelte/DashPlugin.svelte +23 -0
  35. package/dist/svelte/DashPlugin.svelte.d.ts +4 -0
  36. package/dist/svelte/DrmPlugin.svelte +20 -0
  37. package/dist/svelte/DrmPlugin.svelte.d.ts +4 -0
  38. package/dist/svelte/HlsPlugin.svelte +23 -0
  39. package/dist/svelte/HlsPlugin.svelte.d.ts +4 -0
  40. package/dist/svelte/SsaiPlugin.svelte +23 -0
  41. package/dist/svelte/SsaiPlugin.svelte.d.ts +4 -0
  42. package/dist/svelte/VastPlugin.svelte +20 -0
  43. package/dist/svelte/VastPlugin.svelte.d.ts +4 -0
  44. package/dist/svelte/VideControls.svelte +22 -0
  45. package/dist/svelte/VideControls.svelte.d.ts +8 -0
  46. package/dist/svelte/VideUI.svelte +49 -0
  47. package/dist/svelte/VideUI.svelte.d.ts +9 -0
  48. package/dist/svelte/Video.svelte +31 -0
  49. package/dist/svelte/Video.svelte.d.ts +10 -0
  50. package/dist/svelte/VmapPlugin.svelte +20 -0
  51. package/dist/svelte/VmapPlugin.svelte.d.ts +4 -0
  52. package/dist/svelte/components/AdCountdown.svelte +37 -0
  53. package/dist/svelte/components/AdCountdown.svelte.d.ts +7 -0
  54. package/dist/svelte/components/AdLabel.svelte +26 -0
  55. package/dist/svelte/components/AdLabel.svelte.d.ts +8 -0
  56. package/dist/svelte/components/AdLearnMore.svelte +42 -0
  57. package/dist/svelte/components/AdLearnMore.svelte.d.ts +9 -0
  58. package/dist/svelte/components/AdOverlay.svelte +46 -0
  59. package/dist/svelte/components/AdOverlay.svelte.d.ts +8 -0
  60. package/dist/svelte/components/AdSkip.svelte +67 -0
  61. package/dist/svelte/components/AdSkip.svelte.d.ts +8 -0
  62. package/dist/svelte/components/BigPlayButton.svelte +46 -0
  63. package/dist/svelte/components/BigPlayButton.svelte.d.ts +8 -0
  64. package/dist/svelte/components/ClickPlay.svelte +76 -0
  65. package/dist/svelte/components/ClickPlay.svelte.d.ts +7 -0
  66. package/dist/svelte/components/ErrorDisplay.svelte +27 -0
  67. package/dist/svelte/components/ErrorDisplay.svelte.d.ts +6 -0
  68. package/dist/svelte/components/FullscreenButton.svelte +65 -0
  69. package/dist/svelte/components/FullscreenButton.svelte.d.ts +9 -0
  70. package/dist/svelte/components/Loader.svelte +11 -0
  71. package/dist/svelte/components/Loader.svelte.d.ts +6 -0
  72. package/dist/svelte/components/MuteButton.svelte +57 -0
  73. package/dist/svelte/components/MuteButton.svelte.d.ts +8 -0
  74. package/dist/svelte/components/PlayButton.svelte +63 -0
  75. package/dist/svelte/components/PlayButton.svelte.d.ts +8 -0
  76. package/dist/svelte/components/Poster.svelte +13 -0
  77. package/dist/svelte/components/Poster.svelte.d.ts +8 -0
  78. package/dist/svelte/components/Progress.svelte +101 -0
  79. package/dist/svelte/components/Progress.svelte.d.ts +6 -0
  80. package/dist/svelte/components/TimeDisplay.svelte +33 -0
  81. package/dist/svelte/components/TimeDisplay.svelte.d.ts +7 -0
  82. package/dist/svelte/components/Volume.svelte +117 -0
  83. package/dist/svelte/components/Volume.svelte.d.ts +8 -0
  84. package/dist/svelte/context.d.ts +6 -0
  85. package/dist/svelte/context.js +10 -0
  86. package/dist/svelte/create-vide-player.svelte.d.ts +2 -0
  87. package/dist/svelte/create-vide-player.svelte.js +22 -0
  88. package/dist/svelte/helpers.d.ts +17 -0
  89. package/dist/svelte/helpers.js +31 -0
  90. package/dist/svelte/icons/IconFullscreenEnter.svelte +3 -0
  91. package/dist/svelte/icons/IconFullscreenEnter.svelte.d.ts +26 -0
  92. package/dist/svelte/icons/IconFullscreenExit.svelte +3 -0
  93. package/dist/svelte/icons/IconFullscreenExit.svelte.d.ts +26 -0
  94. package/dist/svelte/icons/IconPause.svelte +3 -0
  95. package/dist/svelte/icons/IconPause.svelte.d.ts +26 -0
  96. package/dist/svelte/icons/IconPlay.svelte +3 -0
  97. package/dist/svelte/icons/IconPlay.svelte.d.ts +26 -0
  98. package/dist/svelte/icons/IconVolumeHigh.svelte +3 -0
  99. package/dist/svelte/icons/IconVolumeHigh.svelte.d.ts +26 -0
  100. package/dist/svelte/icons/IconVolumeLow.svelte +3 -0
  101. package/dist/svelte/icons/IconVolumeLow.svelte.d.ts +26 -0
  102. package/dist/svelte/icons/IconVolumeMute.svelte +3 -0
  103. package/dist/svelte/icons/IconVolumeMute.svelte.d.ts +26 -0
  104. package/dist/svelte/index.d.ts +42 -0
  105. package/dist/svelte/index.js +39 -0
  106. package/dist/svelte/use-ad-state.svelte.d.ts +7 -0
  107. package/dist/svelte/use-ad-state.svelte.js +40 -0
  108. package/dist/svelte/use-autohide.svelte.d.ts +2 -0
  109. package/dist/svelte/use-autohide.svelte.js +68 -0
  110. package/dist/svelte/use-keyboard.svelte.d.ts +7 -0
  111. package/dist/svelte/use-keyboard.svelte.js +96 -0
  112. package/dist/svelte/use-plugin.svelte.d.ts +15 -0
  113. package/dist/svelte/use-plugin.svelte.js +40 -0
  114. package/dist/svelte/use-vide-event.svelte.d.ts +3 -0
  115. package/dist/svelte/use-vide-event.svelte.js +9 -0
  116. package/dist/{types-vxIcXgJz.d.ts → types-BsEF8iWC.d.ts} +106 -1
  117. package/dist/types-C1_eVsFF.d.ts +49 -0
  118. package/dist/types-C6XFF6w_.d.ts +30 -0
  119. package/dist/types-COeag8fU.d.ts +173 -0
  120. package/dist/types-CwjR99DL.d.ts +10 -0
  121. package/dist/types-DsixuzNX.d.ts +52 -0
  122. package/dist/types-DzY1cmXC.d.ts +10 -0
  123. package/dist/types-SuT99_Z3.d.ts +40 -0
  124. package/dist/ui/index.d.ts +7 -37
  125. package/dist/ui/index.js +1 -0
  126. package/dist/ui/index.mjs +1 -2
  127. package/dist/ui/theme.css +138 -46
  128. package/dist/vast/index.d.ts +188 -4
  129. package/dist/vast/index.js +1 -0
  130. package/dist/vast/index.mjs +1 -1
  131. package/dist/vide.core.global.js +1 -1
  132. package/dist/vide.global.js +2 -2
  133. package/dist/vide.ssai.global.js +1 -1
  134. package/dist/vide.ui.css +138 -46
  135. package/dist/vide.ui.global.js +1 -1
  136. package/dist/vide.vast.global.js +1 -1
  137. package/dist/vide.vmap.global.js +1 -1
  138. package/dist/vmap/index.d.ts +5 -49
  139. package/dist/vmap/index.js +1 -0
  140. package/dist/vmap/index.mjs +1 -1
  141. package/dist/vue/index.d.ts +354 -0
  142. package/dist/vue/index.js +2 -0
  143. package/dist/vue/index.mjs +2 -0
  144. package/package.json +47 -6
  145. package/dist/chunk-726XNUGZ.mjs +0 -1
  146. package/dist/chunk-G4Q7R3SH.mjs +0 -1
  147. 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,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="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" />
3
+ </svg>
@@ -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,7 @@
1
+ import type { PlayerGetter } from "./context.js";
2
+ import type { AdMeta } from "./helpers.js";
3
+ export interface AdState {
4
+ readonly active: boolean;
5
+ readonly meta: AdMeta | null;
6
+ }
7
+ export declare function useAdState(getPlayer: PlayerGetter): AdState;
@@ -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,2 @@
1
+ import type { PlayerGetter } from "./context.js";
2
+ export declare function useAutohide(getContainer: () => HTMLElement | null, getPlayer: PlayerGetter): void;
@@ -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;
@@ -0,0 +1,9 @@
1
+ export function useVideEvent(getPlayer, event, handler) {
2
+ $effect(() => {
3
+ const p = getPlayer();
4
+ if (!p)
5
+ return;
6
+ p.on(event, handler);
7
+ return () => p.off(event, handler);
8
+ });
9
+ }
@@ -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 { AdQuartile as A, EventBus as E, MediaElement as M, Player as P, QualityLevel as Q, RecoveryConfig as R, SeekableRange as S, VideCue as V, EventHandler as a, PlayerEvent as b, PlayerEventMap as c, PlayerState as d, Plugin as e, SourceHandler as f, VideTextTrack as g };
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 };