@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.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 (298) hide show
  1. package/README.md +1 -1
  2. package/dist/default/_virtual/_rolldown/runtime.js +18 -0
  3. package/dist/default/index.js +22 -0
  4. package/dist/default/media/audio.js +22 -0
  5. package/dist/default/media/audio.js.map +1 -0
  6. package/dist/default/media/background-video/index.js +28 -0
  7. package/dist/default/media/background-video/index.js.map +1 -0
  8. package/dist/default/media/hls-video/index.js +25 -0
  9. package/dist/default/media/hls-video/index.js.map +1 -0
  10. package/dist/default/media/video.js +22 -0
  11. package/dist/default/media/video.js.map +1 -0
  12. package/dist/default/player/context.js +55 -0
  13. package/dist/default/player/context.js.map +1 -0
  14. package/dist/default/player/create-player.js +38 -0
  15. package/dist/default/player/create-player.js.map +1 -0
  16. package/dist/default/presets/audio/index.js +5 -0
  17. package/dist/default/presets/audio/minimal-skin.css +3 -0
  18. package/dist/default/presets/audio/minimal-skin.js +11 -0
  19. package/dist/default/presets/audio/minimal-skin.js.map +1 -0
  20. package/dist/default/presets/audio/skin.css +3 -0
  21. package/dist/default/presets/audio/skin.js +11 -0
  22. package/dist/default/presets/audio/skin.js.map +1 -0
  23. package/dist/default/presets/background/index.js +4 -0
  24. package/dist/default/presets/background/skin.css +3 -0
  25. package/dist/default/presets/background/skin.js +11 -0
  26. package/dist/default/presets/background/skin.js.map +1 -0
  27. package/dist/default/presets/video/index.js +7 -0
  28. package/dist/default/presets/video/minimal-skin.css +637 -0
  29. package/dist/default/presets/video/minimal-skin.js +234 -0
  30. package/dist/default/presets/video/minimal-skin.js.map +1 -0
  31. package/dist/default/presets/video/minimal-skin.tailwind.js +231 -0
  32. package/dist/default/presets/video/minimal-skin.tailwind.js.map +1 -0
  33. package/dist/default/presets/video/skin.css +638 -0
  34. package/dist/default/presets/video/skin.js +223 -0
  35. package/dist/default/presets/video/skin.js.map +1 -0
  36. package/dist/default/presets/video/skin.tailwind.js +222 -0
  37. package/dist/default/presets/video/skin.tailwind.js.map +1 -0
  38. package/dist/default/ui/buffering-indicator/buffering-indicator.js +50 -0
  39. package/dist/default/ui/buffering-indicator/buffering-indicator.js.map +1 -0
  40. package/dist/default/ui/buffering-indicator/index.js +3 -0
  41. package/dist/default/ui/captions-button/captions-button.js +51 -0
  42. package/dist/default/ui/captions-button/captions-button.js.map +1 -0
  43. package/dist/default/ui/captions-button/index.js +3 -0
  44. package/dist/default/ui/controls/controls-group.js +27 -0
  45. package/dist/default/ui/controls/controls-group.js.map +1 -0
  46. package/dist/default/ui/controls/controls-root.js +31 -0
  47. package/dist/default/ui/controls/controls-root.js.map +1 -0
  48. package/dist/default/ui/controls/index.js +3 -0
  49. package/dist/default/ui/controls/index.parts.js +13 -0
  50. package/dist/default/ui/controls/index.parts.js.map +1 -0
  51. package/dist/default/ui/error-dialog/error-dialog.js +54 -0
  52. package/dist/default/ui/error-dialog/error-dialog.js.map +1 -0
  53. package/dist/default/ui/error-dialog/index.js +3 -0
  54. package/dist/default/ui/fullscreen-button/fullscreen-button.js +44 -0
  55. package/dist/default/ui/fullscreen-button/fullscreen-button.js.map +1 -0
  56. package/dist/default/ui/fullscreen-button/index.js +3 -0
  57. package/dist/default/ui/hooks/use-button.js +44 -0
  58. package/dist/default/ui/hooks/use-button.js.map +1 -0
  59. package/dist/default/ui/mute-button/index.js +3 -0
  60. package/dist/default/ui/mute-button/mute-button.js +47 -0
  61. package/dist/default/ui/mute-button/mute-button.js.map +1 -0
  62. package/dist/default/ui/pip-button/index.js +3 -0
  63. package/dist/default/ui/pip-button/pip-button.js +44 -0
  64. package/dist/default/ui/pip-button/pip-button.js.map +1 -0
  65. package/dist/default/ui/play-button/index.js +3 -0
  66. package/dist/default/ui/play-button/play-button.js +60 -0
  67. package/dist/default/ui/play-button/play-button.js.map +1 -0
  68. package/dist/default/ui/poster/index.js +3 -0
  69. package/dist/default/ui/poster/poster.js +43 -0
  70. package/dist/default/ui/poster/poster.js.map +1 -0
  71. package/dist/default/ui/seek-button/index.js +3 -0
  72. package/dist/default/ui/seek-button/seek-button.js +62 -0
  73. package/dist/default/ui/seek-button/seek-button.js.map +1 -0
  74. package/dist/default/ui/time/index.js +3 -0
  75. package/dist/default/ui/time/index.parts.js +15 -0
  76. package/dist/default/ui/time/index.parts.js.map +1 -0
  77. package/dist/default/ui/time/time-group.js +34 -0
  78. package/dist/default/ui/time/time-group.js.map +1 -0
  79. package/dist/default/ui/time/time-separator.js +34 -0
  80. package/dist/default/ui/time/time-separator.js.map +1 -0
  81. package/dist/default/ui/time/time-value.js +54 -0
  82. package/dist/default/ui/time/time-value.js.map +1 -0
  83. package/dist/default/utils/attach-media-element.js +12 -0
  84. package/dist/default/utils/attach-media-element.js.map +1 -0
  85. package/dist/default/utils/media-props.js +11 -0
  86. package/dist/default/utils/media-props.js.map +1 -0
  87. package/dist/default/utils/merge-props.js +85 -0
  88. package/dist/default/utils/merge-props.js.map +1 -0
  89. package/dist/default/utils/use-composed-refs.js +57 -0
  90. package/dist/default/utils/use-composed-refs.js.map +1 -0
  91. package/dist/default/utils/use-render.js +71 -0
  92. package/dist/default/utils/use-render.js.map +1 -0
  93. package/dist/dev/_virtual/_rolldown/runtime.js +18 -0
  94. package/dist/dev/index.d.ts +23 -0
  95. package/dist/dev/index.js +22 -0
  96. package/dist/dev/media/audio.d.ts +12 -0
  97. package/dist/dev/media/audio.d.ts.map +1 -0
  98. package/dist/dev/media/audio.js +22 -0
  99. package/dist/dev/media/audio.js.map +1 -0
  100. package/dist/dev/media/background-video/index.d.ts +12 -0
  101. package/dist/dev/media/background-video/index.d.ts.map +1 -0
  102. package/dist/dev/media/background-video/index.js +28 -0
  103. package/dist/dev/media/background-video/index.js.map +1 -0
  104. package/dist/dev/media/hls-video/index.d.ts +11 -0
  105. package/dist/dev/media/hls-video/index.d.ts.map +1 -0
  106. package/dist/dev/media/hls-video/index.js +25 -0
  107. package/dist/dev/media/hls-video/index.js.map +1 -0
  108. package/dist/dev/media/video.d.ts +12 -0
  109. package/dist/dev/media/video.d.ts.map +1 -0
  110. package/dist/dev/media/video.js +22 -0
  111. package/dist/dev/media/video.js.map +1 -0
  112. package/dist/dev/player/context.d.ts +40 -0
  113. package/dist/dev/player/context.d.ts.map +1 -0
  114. package/dist/dev/player/context.js +55 -0
  115. package/dist/dev/player/context.js.map +1 -0
  116. package/dist/dev/player/create-player.d.ts +47 -0
  117. package/dist/dev/player/create-player.d.ts.map +1 -0
  118. package/dist/dev/player/create-player.js +39 -0
  119. package/dist/dev/player/create-player.js.map +1 -0
  120. package/dist/dev/presets/audio/index.d.ts +4 -0
  121. package/dist/dev/presets/audio/index.js +5 -0
  122. package/dist/dev/presets/audio/minimal-skin.css +3 -0
  123. package/dist/dev/presets/audio/minimal-skin.d.ts +9 -0
  124. package/dist/dev/presets/audio/minimal-skin.d.ts.map +1 -0
  125. package/dist/dev/presets/audio/minimal-skin.js +11 -0
  126. package/dist/dev/presets/audio/minimal-skin.js.map +1 -0
  127. package/dist/dev/presets/audio/skin.css +3 -0
  128. package/dist/dev/presets/audio/skin.d.ts +9 -0
  129. package/dist/dev/presets/audio/skin.d.ts.map +1 -0
  130. package/dist/dev/presets/audio/skin.js +11 -0
  131. package/dist/dev/presets/audio/skin.js.map +1 -0
  132. package/dist/dev/presets/background/index.d.ts +3 -0
  133. package/dist/dev/presets/background/index.js +4 -0
  134. package/dist/dev/presets/background/skin.css +3 -0
  135. package/dist/dev/presets/background/skin.d.ts +9 -0
  136. package/dist/dev/presets/background/skin.d.ts.map +1 -0
  137. package/dist/dev/presets/background/skin.js +11 -0
  138. package/dist/dev/presets/background/skin.js.map +1 -0
  139. package/dist/dev/presets/types.d.ts +10 -0
  140. package/dist/dev/presets/types.d.ts.map +1 -0
  141. package/dist/dev/presets/video/index.d.ts +6 -0
  142. package/dist/dev/presets/video/index.js +7 -0
  143. package/dist/dev/presets/video/minimal-skin.css +637 -0
  144. package/dist/dev/presets/video/minimal-skin.d.ts +9 -0
  145. package/dist/dev/presets/video/minimal-skin.d.ts.map +1 -0
  146. package/dist/dev/presets/video/minimal-skin.js +234 -0
  147. package/dist/dev/presets/video/minimal-skin.js.map +1 -0
  148. package/dist/dev/presets/video/minimal-skin.tailwind.d.ts +8 -0
  149. package/dist/dev/presets/video/minimal-skin.tailwind.d.ts.map +1 -0
  150. package/dist/dev/presets/video/minimal-skin.tailwind.js +231 -0
  151. package/dist/dev/presets/video/minimal-skin.tailwind.js.map +1 -0
  152. package/dist/dev/presets/video/skin.css +638 -0
  153. package/dist/dev/presets/video/skin.d.ts +9 -0
  154. package/dist/dev/presets/video/skin.d.ts.map +1 -0
  155. package/dist/dev/presets/video/skin.js +223 -0
  156. package/dist/dev/presets/video/skin.js.map +1 -0
  157. package/dist/dev/presets/video/skin.tailwind.d.ts +8 -0
  158. package/dist/dev/presets/video/skin.tailwind.d.ts.map +1 -0
  159. package/dist/dev/presets/video/skin.tailwind.js +222 -0
  160. package/dist/dev/presets/video/skin.tailwind.js.map +1 -0
  161. package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts +32 -0
  162. package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts.map +1 -0
  163. package/dist/dev/ui/buffering-indicator/buffering-indicator.js +53 -0
  164. package/dist/dev/ui/buffering-indicator/buffering-indicator.js.map +1 -0
  165. package/dist/dev/ui/buffering-indicator/index.d.ts +2 -0
  166. package/dist/dev/ui/buffering-indicator/index.js +3 -0
  167. package/dist/dev/ui/captions-button/captions-button.d.ts +36 -0
  168. package/dist/dev/ui/captions-button/captions-button.d.ts.map +1 -0
  169. package/dist/dev/ui/captions-button/captions-button.js +51 -0
  170. package/dist/dev/ui/captions-button/captions-button.js.map +1 -0
  171. package/dist/dev/ui/captions-button/index.d.ts +2 -0
  172. package/dist/dev/ui/captions-button/index.js +3 -0
  173. package/dist/dev/ui/controls/controls-group.d.ts +17 -0
  174. package/dist/dev/ui/controls/controls-group.d.ts.map +1 -0
  175. package/dist/dev/ui/controls/controls-group.js +27 -0
  176. package/dist/dev/ui/controls/controls-group.js.map +1 -0
  177. package/dist/dev/ui/controls/controls-root.d.ts +18 -0
  178. package/dist/dev/ui/controls/controls-root.d.ts.map +1 -0
  179. package/dist/dev/ui/controls/controls-root.js +34 -0
  180. package/dist/dev/ui/controls/controls-root.js.map +1 -0
  181. package/dist/dev/ui/controls/index.d.ts +2 -0
  182. package/dist/dev/ui/controls/index.js +3 -0
  183. package/dist/dev/ui/controls/index.parts.d.ts +10 -0
  184. package/dist/dev/ui/controls/index.parts.d.ts.map +1 -0
  185. package/dist/dev/ui/controls/index.parts.js +13 -0
  186. package/dist/dev/ui/controls/index.parts.js.map +1 -0
  187. package/dist/dev/ui/error-dialog/error-dialog.d.ts +35 -0
  188. package/dist/dev/ui/error-dialog/error-dialog.d.ts.map +1 -0
  189. package/dist/dev/ui/error-dialog/error-dialog.js +54 -0
  190. package/dist/dev/ui/error-dialog/error-dialog.js.map +1 -0
  191. package/dist/dev/ui/error-dialog/index.d.ts +2 -0
  192. package/dist/dev/ui/error-dialog/index.js +3 -0
  193. package/dist/dev/ui/fullscreen-button/fullscreen-button.d.ts +14 -0
  194. package/dist/dev/ui/fullscreen-button/fullscreen-button.d.ts.map +1 -0
  195. package/dist/dev/ui/fullscreen-button/fullscreen-button.js +47 -0
  196. package/dist/dev/ui/fullscreen-button/fullscreen-button.js.map +1 -0
  197. package/dist/dev/ui/fullscreen-button/index.d.ts +2 -0
  198. package/dist/dev/ui/fullscreen-button/index.js +3 -0
  199. package/dist/dev/ui/hooks/use-button.d.ts +40 -0
  200. package/dist/dev/ui/hooks/use-button.d.ts.map +1 -0
  201. package/dist/dev/ui/hooks/use-button.js +46 -0
  202. package/dist/dev/ui/hooks/use-button.js.map +1 -0
  203. package/dist/dev/ui/mute-button/index.d.ts +2 -0
  204. package/dist/dev/ui/mute-button/index.js +3 -0
  205. package/dist/dev/ui/mute-button/mute-button.d.ts +17 -0
  206. package/dist/dev/ui/mute-button/mute-button.d.ts.map +1 -0
  207. package/dist/dev/ui/mute-button/mute-button.js +50 -0
  208. package/dist/dev/ui/mute-button/mute-button.js.map +1 -0
  209. package/dist/dev/ui/pip-button/index.d.ts +2 -0
  210. package/dist/dev/ui/pip-button/index.js +3 -0
  211. package/dist/dev/ui/pip-button/pip-button.d.ts +14 -0
  212. package/dist/dev/ui/pip-button/pip-button.d.ts.map +1 -0
  213. package/dist/dev/ui/pip-button/pip-button.js +47 -0
  214. package/dist/dev/ui/pip-button/pip-button.js.map +1 -0
  215. package/dist/dev/ui/play-button/index.d.ts +2 -0
  216. package/dist/dev/ui/play-button/index.js +3 -0
  217. package/dist/dev/ui/play-button/play-button.d.ts +30 -0
  218. package/dist/dev/ui/play-button/play-button.d.ts.map +1 -0
  219. package/dist/dev/ui/play-button/play-button.js +63 -0
  220. package/dist/dev/ui/play-button/play-button.js.map +1 -0
  221. package/dist/dev/ui/poster/index.d.ts +2 -0
  222. package/dist/dev/ui/poster/index.js +3 -0
  223. package/dist/dev/ui/poster/poster.d.ts +28 -0
  224. package/dist/dev/ui/poster/poster.d.ts.map +1 -0
  225. package/dist/dev/ui/poster/poster.js +46 -0
  226. package/dist/dev/ui/poster/poster.js.map +1 -0
  227. package/dist/dev/ui/seek-button/index.d.ts +2 -0
  228. package/dist/dev/ui/seek-button/index.js +3 -0
  229. package/dist/dev/ui/seek-button/seek-button.d.ts +31 -0
  230. package/dist/dev/ui/seek-button/seek-button.d.ts.map +1 -0
  231. package/dist/dev/ui/seek-button/seek-button.js +65 -0
  232. package/dist/dev/ui/seek-button/seek-button.js.map +1 -0
  233. package/dist/dev/ui/time/index.d.ts +2 -0
  234. package/dist/dev/ui/time/index.js +3 -0
  235. package/dist/dev/ui/time/index.parts.d.ts +11 -0
  236. package/dist/dev/ui/time/index.parts.d.ts.map +1 -0
  237. package/dist/dev/ui/time/index.parts.js +15 -0
  238. package/dist/dev/ui/time/index.parts.js.map +1 -0
  239. package/dist/dev/ui/time/time-group.d.ts +29 -0
  240. package/dist/dev/ui/time/time-group.d.ts.map +1 -0
  241. package/dist/dev/ui/time/time-group.js +34 -0
  242. package/dist/dev/ui/time/time-group.js.map +1 -0
  243. package/dist/dev/ui/time/time-separator.d.ts +26 -0
  244. package/dist/dev/ui/time/time-separator.d.ts.map +1 -0
  245. package/dist/dev/ui/time/time-separator.js +34 -0
  246. package/dist/dev/ui/time/time-separator.js.map +1 -0
  247. package/dist/dev/ui/time/time-value.d.ts +24 -0
  248. package/dist/dev/ui/time/time-value.d.ts.map +1 -0
  249. package/dist/dev/ui/time/time-value.js +57 -0
  250. package/dist/dev/ui/time/time-value.js.map +1 -0
  251. package/dist/dev/utils/attach-media-element.js +12 -0
  252. package/dist/dev/utils/attach-media-element.js.map +1 -0
  253. package/dist/dev/utils/media-props.js +11 -0
  254. package/dist/dev/utils/media-props.js.map +1 -0
  255. package/dist/dev/utils/merge-props.d.ts +26 -0
  256. package/dist/dev/utils/merge-props.d.ts.map +1 -0
  257. package/dist/dev/utils/merge-props.js +85 -0
  258. package/dist/dev/utils/merge-props.js.map +1 -0
  259. package/dist/dev/utils/types.d.ts +27 -0
  260. package/dist/dev/utils/types.d.ts.map +1 -0
  261. package/dist/dev/utils/use-composed-refs.js +57 -0
  262. package/dist/dev/utils/use-composed-refs.js.map +1 -0
  263. package/dist/dev/utils/use-render.d.ts +45 -0
  264. package/dist/dev/utils/use-render.d.ts.map +1 -0
  265. package/dist/dev/utils/use-render.js +71 -0
  266. package/dist/dev/utils/use-render.js.map +1 -0
  267. package/package.json +58 -53
  268. package/dist/FrostedSkin-t8edr5LV.d.ts +0 -13
  269. package/dist/FrostedSkin-t8edr5LV.d.ts.map +0 -1
  270. package/dist/MinimalSkin-DzHkJgW-.d.ts +0 -13
  271. package/dist/MinimalSkin-DzHkJgW-.d.ts.map +0 -1
  272. package/dist/VolumeSlider-DmlupkvF.js +0 -1042
  273. package/dist/VolumeSlider-DmlupkvF.js.map +0 -1
  274. package/dist/frosted-0lXuIgHt.js +0 -156
  275. package/dist/frosted-0lXuIgHt.js.map +0 -1
  276. package/dist/icons-BqfV81R8.js +0 -316
  277. package/dist/icons-BqfV81R8.js.map +0 -1
  278. package/dist/icons.d.ts +0 -71
  279. package/dist/icons.d.ts.map +0 -1
  280. package/dist/icons.js +0 -3
  281. package/dist/index-CM70WSkA.d.ts +0 -36
  282. package/dist/index-CM70WSkA.d.ts.map +0 -1
  283. package/dist/index.d.ts +0 -312
  284. package/dist/index.d.ts.map +0 -1
  285. package/dist/index.js +0 -89
  286. package/dist/index.js.map +0 -1
  287. package/dist/minimal-B-R9aRNe.js +0 -162
  288. package/dist/minimal-B-R9aRNe.js.map +0 -1
  289. package/dist/skins/frosted.css +0 -4
  290. package/dist/skins/frosted.d.ts +0 -2
  291. package/dist/skins/frosted.js +0 -9
  292. package/dist/skins/minimal.css +0 -4
  293. package/dist/skins/minimal.d.ts +0 -2
  294. package/dist/skins/minimal.js +0 -9
  295. package/dist/store-hGO5HE2A.js +0 -124
  296. package/dist/store-hGO5HE2A.js.map +0 -1
  297. package/dist/store.d.ts +0 -2
  298. package/dist/store.js +0 -6
@@ -0,0 +1,3 @@
1
+ import { CaptionsButton } from "./captions-button.js";
2
+
3
+ export { CaptionsButton };
@@ -0,0 +1,27 @@
1
+ 'use client';
2
+
3
+ import { renderElement } from "../../utils/use-render.js";
4
+ import { forwardRef } from "react";
5
+
6
+ //#region src/ui/controls/controls-group.tsx
7
+ /** Layout group for related controls; sets `role="group"` when labeled. */
8
+ const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
9
+ const { render, className, style, children, ...elementProps } = componentProps;
10
+ const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
11
+ return renderElement("div", {
12
+ render,
13
+ className,
14
+ style
15
+ }, {
16
+ state: {},
17
+ ref: [forwardedRef],
18
+ props: [{
19
+ role,
20
+ children
21
+ }, elementProps]
22
+ });
23
+ });
24
+
25
+ //#endregion
26
+ export { ControlsGroup };
27
+ //# sourceMappingURL=controls-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\ntype GroupState = Record<string, never>;\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', GroupState> {\n children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n componentProps: ControlsGroupProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, children, ...elementProps } = componentProps;\n\n const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n const state: GroupState = {};\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [{ role, children }, elementProps],\n }\n );\n});\n\nexport namespace ControlsGroup {\n export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU;AAIvF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE;GAAM;GAAU,EAAE,aAAa;EAC1C,CACF;EACD"}
@@ -0,0 +1,31 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { selectControls } from "@videojs/core/dom";
6
+ import { forwardRef, useState } from "react";
7
+ import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
8
+
9
+ //#region src/ui/controls/controls-root.tsx
10
+ /** Root container for player controls state and rendered control content. */
11
+ const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
12
+ const { render, className, style, children, ...elementProps } = componentProps;
13
+ const controls = usePlayer(selectControls);
14
+ const [core] = useState(() => new ControlsCore());
15
+ if (!controls) return null;
16
+ const state = core.getState(controls);
17
+ return renderElement("div", {
18
+ render,
19
+ className,
20
+ style
21
+ }, {
22
+ state,
23
+ stateAttrMap: ControlsDataAttrs,
24
+ ref: [forwardedRef],
25
+ props: [{ children }, elementProps]
26
+ });
27
+ });
28
+
29
+ //#endregion
30
+ export { ControlsRoot };
31
+ //# sourceMappingURL=controls-root.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n componentProps: ControlsRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, children, ...elementProps } = componentProps;\n\n const controls = usePlayer(selectControls);\n\n const [core] = useState(() => new ControlsCore());\n\n if (!controls) {\n if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n return null;\n }\n\n const state = core.getState(controls);\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: ControlsDataAttrs,\n ref: [forwardedRef],\n props: [{ children }, elementProps],\n }\n );\n});\n\nexport namespace ControlsRoot {\n export type Props = ControlsRootProps;\n export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { index_parts_exports } from "./index.parts.js";
2
+
3
+ export { index_parts_exports as Controls };
@@ -0,0 +1,13 @@
1
+ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
2
+ import { ControlsGroup } from "./controls-group.js";
3
+ import { ControlsRoot } from "./controls-root.js";
4
+
5
+ //#region src/ui/controls/index.parts.ts
6
+ var index_parts_exports = /* @__PURE__ */ __exportAll({
7
+ Group: () => ControlsGroup,
8
+ Root: () => ControlsRoot
9
+ });
10
+
11
+ //#endregion
12
+ export { index_parts_exports };
13
+ //# sourceMappingURL=index.parts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsGroup as Group, type ControlsGroupProps as GroupProps } from './controls-group';\nexport { ControlsRoot as Root, type ControlsRootProps as RootProps } from './controls-root';\n"],"mappings":""}
@@ -0,0 +1,54 @@
1
+ 'use client';
2
+
3
+ import { renderElement } from "../../utils/use-render.js";
4
+ import { forwardRef, useEffect, useRef, useState } from "react";
5
+
6
+ //#region src/ui/error-dialog/error-dialog.tsx
7
+ /**
8
+ * Displays an error dialog when media playback encounters an error.
9
+ *
10
+ * @example
11
+ * ```tsx
12
+ * <ErrorDialog />
13
+ *
14
+ * <ErrorDialog
15
+ * render={(props, state) => (
16
+ * <div {...props}>Something went wrong</div>
17
+ * )}
18
+ * />
19
+ * ```
20
+ */
21
+ const ErrorDialog = forwardRef(function ErrorDialog(componentProps, forwardedRef) {
22
+ const { render, className, style, ...elementProps } = componentProps;
23
+ const dialogRef = useRef(null);
24
+ const [hasError, setHasError] = useState(false);
25
+ useEffect(() => {
26
+ const handle = setTimeout(() => {}, 2e3);
27
+ return () => clearTimeout(handle);
28
+ }, []);
29
+ useEffect(() => {
30
+ if (!hasError) return;
31
+ requestAnimationFrame(() => {
32
+ dialogRef.current?.focus();
33
+ });
34
+ }, [hasError]);
35
+ return renderElement("div", {
36
+ render,
37
+ className,
38
+ style
39
+ }, {
40
+ state: {
41
+ visible: hasError,
42
+ onDismiss: () => setHasError(false)
43
+ },
44
+ ref: [forwardedRef, dialogRef],
45
+ props: [{
46
+ role: "alertdialog",
47
+ tabIndex: -1
48
+ }, elementProps]
49
+ });
50
+ });
51
+
52
+ //#endregion
53
+ export { ErrorDialog };
54
+ //# sourceMappingURL=error-dialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"error-dialog.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\ntype ErrorDialogState = { visible: boolean; onDismiss: () => void };\n\nexport interface ErrorDialogProps extends UIComponentProps<'div', ErrorDialogState> {\n 'aria-labelledby': string;\n 'aria-describedby'?: string;\n dismiss?: () => void;\n}\n\nconst DEBUG = false;\n\n/**\n * Displays an error dialog when media playback encounters an error.\n *\n * @example\n * ```tsx\n * <ErrorDialog />\n *\n * <ErrorDialog\n * render={(props, state) => (\n * <div {...props}>Something went wrong</div>\n * )}\n * />\n * ```\n */\nexport const ErrorDialog = forwardRef(function ErrorDialog(\n componentProps: ErrorDialogProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const dialogRef = useRef<HTMLDivElement>(null);\n\n const [hasError, setHasError] = useState(false);\n\n // FIXME: This is just debugging code\n useEffect(() => {\n const handle = setTimeout(() => {\n if (!DEBUG) return;\n setHasError(true);\n }, 2000);\n\n return () => clearTimeout(handle);\n }, []);\n\n // Focus the dialog when it becomes visible to ensure it's announced by screen readers.\n // Wait a frame for the accessibility tree to update with the dialog before focusing.\n useEffect(() => {\n if (!hasError) return;\n requestAnimationFrame(() => {\n dialogRef.current?.focus();\n });\n }, [hasError]);\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state: {\n visible: hasError,\n onDismiss: () => setHasError(false),\n },\n ref: [forwardedRef, dialogRef],\n props: [\n {\n role: 'alertdialog',\n tabIndex: -1,\n },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace ErrorDialog {\n export type Props = ErrorDialogProps;\n export type State = ErrorDialogState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,YAAY,OAAuB,KAAK;CAE9C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAG/C,iBAAgB;EACd,MAAM,SAAS,iBAAiB,IAG7B,IAAK;AAER,eAAa,aAAa,OAAO;IAChC,EAAE,CAAC;AAIN,iBAAgB;AACd,MAAI,CAAC,SAAU;AACf,8BAA4B;AAC1B,aAAU,SAAS,OAAO;IAC1B;IACD,CAAC,SAAS,CAAC;AAEd,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO;GACL,SAAS;GACT,iBAAiB,YAAY,MAAM;GACpC;EACD,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,UAAU;GACX,EACD,aACD;EACF,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { ErrorDialog } from "./error-dialog.js";
2
+
3
+ export { ErrorDialog };
@@ -0,0 +1,44 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { useButton } from "../hooks/use-button.js";
6
+ import { selectFullscreen } from "@videojs/core/dom";
7
+ import { forwardRef, useState } from "react";
8
+ import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
9
+
10
+ //#region src/ui/fullscreen-button/fullscreen-button.tsx
11
+ const FullscreenButton = forwardRef(function FullscreenButton(componentProps, forwardedRef) {
12
+ const { render, className, style, label, disabled, ...elementProps } = componentProps;
13
+ const fullscreen = usePlayer(selectFullscreen);
14
+ const [core] = useState(() => new FullscreenButtonCore());
15
+ core.setProps({
16
+ label,
17
+ disabled
18
+ });
19
+ const { getButtonProps, buttonRef } = useButton({
20
+ displayName: "FullscreenButton",
21
+ onActivate: () => core.toggle(fullscreen),
22
+ isDisabled: () => disabled || !fullscreen
23
+ });
24
+ if (!fullscreen) return null;
25
+ const state = core.getState(fullscreen);
26
+ return renderElement("button", {
27
+ render,
28
+ className,
29
+ style
30
+ }, {
31
+ state,
32
+ stateAttrMap: FullscreenButtonDataAttrs,
33
+ ref: [forwardedRef, buttonRef],
34
+ props: [
35
+ core.getAttrs(state),
36
+ elementProps,
37
+ getButtonProps()
38
+ ]
39
+ });
40
+ });
41
+
42
+ //#endregion
43
+ export { FullscreenButton };
44
+ //# sourceMappingURL=fullscreen-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectFullscreen } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface FullscreenButtonProps\n extends UIComponentProps<'button', FullscreenButtonCore.State>,\n FullscreenButtonCore.Props {}\n\nexport const FullscreenButton = forwardRef(function FullscreenButton(\n componentProps: FullscreenButtonProps,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const fullscreen = usePlayer(selectFullscreen);\n\n const [core] = useState(() => new FullscreenButtonCore());\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: 'FullscreenButton',\n onActivate: () => core.toggle(fullscreen!),\n isDisabled: () => disabled || !fullscreen,\n });\n\n if (!fullscreen) {\n if (__DEV__) logMissingFeature('FullscreenButton', 'fullscreen');\n return null;\n }\n\n const state = core.getState(fullscreen);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: FullscreenButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [core.getAttrs(state), elementProps, getButtonProps()],\n }\n );\n});\n\nexport namespace FullscreenButton {\n export type Props = FullscreenButtonProps;\n export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,SAAS,iBAClD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,aAAa,UAAU,iBAAiB;CAE9C,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;AACzD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,WAAY;EAC1C,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,WAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,WAAW;AAEvC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { FullscreenButton } from "./fullscreen-button.js";
2
+
3
+ export { FullscreenButton };
@@ -0,0 +1,44 @@
1
+ 'use client';
2
+
3
+ import { mergeProps } from "../../utils/merge-props.js";
4
+ import { createButton } from "@videojs/core/dom";
5
+ import { useCallback } from "react";
6
+
7
+ //#region src/ui/hooks/use-button.ts
8
+ /**
9
+ * Hook for button behavior with keyboard and pointer interaction.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * const { getButtonProps, buttonRef } = useButton({
14
+ * displayName: 'PlayButton',
15
+ * onActivate: () => togglePlayback(),
16
+ * isDisabled: () => disabled,
17
+ * });
18
+ *
19
+ * return useRender('button', componentProps, {
20
+ * state,
21
+ * ref: [forwardedRef, buttonRef],
22
+ * props: [elementProps, getButtonProps],
23
+ * });
24
+ * ```
25
+ *
26
+ * @param params - Button configuration with activation handler and disabled check.
27
+ */
28
+ function useButton(params) {
29
+ const { displayName, onActivate, isDisabled } = params;
30
+ const buttonRef = useCallback((element) => {}, [displayName]);
31
+ return {
32
+ getButtonProps: useCallback((externalProps) => {
33
+ return mergeProps(createButton({
34
+ onActivate,
35
+ isDisabled
36
+ }), externalProps);
37
+ }, [onActivate, isDisabled]),
38
+ buttonRef
39
+ };
40
+ }
41
+
42
+ //#endregion
43
+ export { useButton };
44
+ //# sourceMappingURL=use-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["'use client';\n\nimport { createButton } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n displayName: string;\n onActivate: () => void;\n isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n * displayName: 'PlayButton',\n * onActivate: () => togglePlayback(),\n * isDisabled: () => disabled,\n * });\n *\n * return useRender('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [elementProps, getButtonProps],\n * });\n * ```\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n const { displayName, onActivate, isDisabled } = params;\n\n const buttonRef = useCallback(\n (element: HTMLElement | null) => {\n if (__DEV__ && element && element.tagName !== 'BUTTON') {\n console.warn(`${displayName} should render a <button> element for accessibility`);\n }\n },\n [displayName]\n );\n\n const getButtonProps = useCallback(\n (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n const buttonProps = createButton({ onActivate, isDisabled });\n return mergeProps(buttonProps, externalProps);\n },\n [onActivate, isDisabled]\n );\n\n return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n export type Parameters = UseButtonParameters;\n export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC,IAKjC,CAAC,YAAY,CACd;AAUD,QAAO;EAAE,gBARc,aACpB,kBAAqF;AAEpF,UAAO,WADa,aAAa;IAAE;IAAY;IAAY,CAAC,EAC7B,cAAc;KAE/C,CAAC,YAAY,WAAW,CACzB;EAEwB;EAAW"}
@@ -0,0 +1,3 @@
1
+ import { MuteButton } from "./mute-button.js";
2
+
3
+ export { MuteButton };
@@ -0,0 +1,47 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { useButton } from "../hooks/use-button.js";
6
+ import { selectVolume } from "@videojs/core/dom";
7
+ import { forwardRef, useState } from "react";
8
+ import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
9
+
10
+ //#region src/ui/mute-button/mute-button.tsx
11
+ /**
12
+ * A button that toggles mute state.
13
+ */
14
+ const MuteButton = forwardRef(function MuteButton(componentProps, forwardedRef) {
15
+ const { render, className, style, label, disabled, ...elementProps } = componentProps;
16
+ const volume = usePlayer(selectVolume);
17
+ const [core] = useState(() => new MuteButtonCore());
18
+ core.setProps({
19
+ label,
20
+ disabled
21
+ });
22
+ const { getButtonProps, buttonRef } = useButton({
23
+ displayName: "MuteButton",
24
+ onActivate: () => core.toggle(volume),
25
+ isDisabled: () => disabled || !volume
26
+ });
27
+ if (!volume) return null;
28
+ const state = core.getState(volume);
29
+ return renderElement("button", {
30
+ render,
31
+ className,
32
+ style
33
+ }, {
34
+ state,
35
+ stateAttrMap: MuteButtonDataAttrs,
36
+ ref: [forwardedRef, buttonRef],
37
+ props: [
38
+ core.getAttrs(state),
39
+ elementProps,
40
+ getButtonProps()
41
+ ]
42
+ });
43
+ });
44
+
45
+ //#endregion
46
+ export { MuteButton };
47
+ //# sourceMappingURL=mute-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/**\n * A button that toggles mute state.\n */\nexport const MuteButton = forwardRef(function MuteButton(\n componentProps: MuteButtonProps,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const volume = usePlayer(selectVolume);\n\n const [core] = useState(() => new MuteButtonCore());\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: 'MuteButton',\n onActivate: () => core.toggle(volume!),\n isDisabled: () => disabled || !volume,\n });\n\n if (!volume) {\n if (__DEV__) logMissingFeature('MuteButton', 'volume');\n return null;\n }\n\n const state = core.getState(volume);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: MuteButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [core.getAttrs(state), elementProps, getButtonProps()],\n }\n );\n});\n\nexport namespace MuteButton {\n export type Props = MuteButtonProps;\n export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,OAAQ;EACtC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,OAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { PiPButton } from "./pip-button.js";
2
+
3
+ export { PiPButton };
@@ -0,0 +1,44 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { useButton } from "../hooks/use-button.js";
6
+ import { selectPiP } from "@videojs/core/dom";
7
+ import { forwardRef, useState } from "react";
8
+ import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
9
+
10
+ //#region src/ui/pip-button/pip-button.tsx
11
+ const PiPButton = forwardRef(function PiPButton(componentProps, forwardedRef) {
12
+ const { render, className, style, label, disabled, ...elementProps } = componentProps;
13
+ const pip = usePlayer(selectPiP);
14
+ const [core] = useState(() => new PiPButtonCore());
15
+ core.setProps({
16
+ label,
17
+ disabled
18
+ });
19
+ const { getButtonProps, buttonRef } = useButton({
20
+ displayName: "PiPButton",
21
+ onActivate: () => core.toggle(pip),
22
+ isDisabled: () => disabled || !pip
23
+ });
24
+ if (!pip) return null;
25
+ const state = core.getState(pip);
26
+ return renderElement("button", {
27
+ render,
28
+ className,
29
+ style
30
+ }, {
31
+ state,
32
+ stateAttrMap: PiPButtonDataAttrs,
33
+ ref: [forwardedRef, buttonRef],
34
+ props: [
35
+ core.getAttrs(state),
36
+ elementProps,
37
+ getButtonProps()
38
+ ]
39
+ });
40
+ });
41
+
42
+ //#endregion
43
+ export { PiPButton };
44
+ //# sourceMappingURL=pip-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPiP } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\nexport const PiPButton = forwardRef(function PiPButton(\n componentProps: PiPButtonProps,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const pip = usePlayer(selectPiP);\n\n const [core] = useState(() => new PiPButtonCore());\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: 'PiPButton',\n onActivate: () => core.toggle(pip!),\n isDisabled: () => disabled || !pip,\n });\n\n if (!pip) {\n if (__DEV__) logMissingFeature('PiPButton', 'pip');\n return null;\n }\n\n const state = core.getState(pip);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: PiPButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [core.getAttrs(state), elementProps, getButtonProps()],\n }\n );\n});\n\nexport namespace PiPButton {\n export type Props = PiPButtonProps;\n export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,MAAM,UAAU,UAAU;CAEhC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;AAClD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,IAAK;EACnC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,IAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,IAAI;AAEhC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { PlayButton } from "./play-button.js";
2
+
3
+ export { PlayButton };
@@ -0,0 +1,60 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { useButton } from "../hooks/use-button.js";
6
+ import { selectPlayback } from "@videojs/core/dom";
7
+ import { forwardRef, useState } from "react";
8
+ import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
9
+
10
+ //#region src/ui/play-button/play-button.tsx
11
+ /**
12
+ * A button that toggles playback.
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * <PlayButton />
17
+ *
18
+ * <PlayButton
19
+ * render={(props, state) => (
20
+ * <button {...props}>
21
+ * {state.paused ? <PlayIcon /> : <PauseIcon />}
22
+ * </button>
23
+ * )}
24
+ * />
25
+ * ```
26
+ */
27
+ const PlayButton = forwardRef(function PlayButton(componentProps, forwardedRef) {
28
+ const { render, className, style, label, disabled, ...elementProps } = componentProps;
29
+ const playback = usePlayer(selectPlayback);
30
+ const [core] = useState(() => new PlayButtonCore());
31
+ core.setProps({
32
+ label,
33
+ disabled
34
+ });
35
+ const { getButtonProps, buttonRef } = useButton({
36
+ displayName: "PlayButton",
37
+ onActivate: () => core.toggle(playback),
38
+ isDisabled: () => disabled || !playback
39
+ });
40
+ if (!playback) return null;
41
+ const state = core.getState(playback);
42
+ return renderElement("button", {
43
+ render,
44
+ className,
45
+ style
46
+ }, {
47
+ state,
48
+ stateAttrMap: PlayButtonDataAttrs,
49
+ ref: [forwardedRef, buttonRef],
50
+ props: [
51
+ core.getAttrs(state),
52
+ elementProps,
53
+ getButtonProps()
54
+ ]
55
+ });
56
+ });
57
+
58
+ //#endregion
59
+ export { PlayButton };
60
+ //# sourceMappingURL=play-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.paused ? <PlayIcon /> : <PauseIcon />}\n * </button>\n * )}\n * />\n * ```\n */\nexport const PlayButton = forwardRef(function PlayButton(\n componentProps: PlayButtonProps,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new PlayButtonCore());\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: 'PlayButton',\n onActivate: () => core.toggle(playback!),\n isDisabled: () => disabled || !playback,\n });\n\n if (!playback) {\n if (__DEV__) logMissingFeature('PlayButton', 'playback');\n return null;\n }\n\n const state = core.getState(playback);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: PlayButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [core.getAttrs(state), elementProps, getButtonProps()],\n }\n );\n});\n\nexport namespace PlayButton {\n export type Props = PlayButtonProps;\n export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,SAAU;EACxC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { Poster } from "./poster.js";
2
+
3
+ export { Poster };
@@ -0,0 +1,43 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { selectPlayback } from "@videojs/core/dom";
6
+ import { forwardRef, useState } from "react";
7
+ import { PosterCore, PosterDataAttrs } from "@videojs/core";
8
+
9
+ //#region src/ui/poster/poster.tsx
10
+ /**
11
+ * Displays the video poster image. Shows before playback starts, hides after.
12
+ *
13
+ * @example
14
+ * ```tsx
15
+ * <Poster src="poster.jpg" alt="Video description" />
16
+ *
17
+ * <Poster
18
+ * src="poster.jpg"
19
+ * alt="Video description"
20
+ * className={(state) => state.visible ? 'visible' : 'hidden'}
21
+ * />
22
+ * ```
23
+ */
24
+ const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
25
+ const { render, className, style, ...elementProps } = componentProps;
26
+ const playback = usePlayer(selectPlayback);
27
+ const [core] = useState(() => new PosterCore());
28
+ if (!playback) return null;
29
+ return renderElement("img", {
30
+ render,
31
+ className,
32
+ style
33
+ }, {
34
+ state: core.getState(playback),
35
+ stateAttrMap: PosterDataAttrs,
36
+ ref: [forwardedRef],
37
+ props: [elementProps]
38
+ });
39
+ });
40
+
41
+ //#endregion
42
+ export { Poster };
43
+ //# sourceMappingURL=poster.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n * src=\"poster.jpg\"\n * alt=\"Video description\"\n * className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n componentProps: PosterProps,\n forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new PosterCore());\n\n if (!playback) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n return null;\n }\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state: core.getState(playback),\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef],\n props: [elementProps],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,SAAS,SAAS;EAC9B,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { SeekButton } from "./seek-button.js";
2
+
3
+ export { SeekButton };
@@ -0,0 +1,62 @@
1
+ 'use client';
2
+
3
+ import { usePlayer } from "../../player/context.js";
4
+ import { renderElement } from "../../utils/use-render.js";
5
+ import { useButton } from "../hooks/use-button.js";
6
+ import { selectTime } from "@videojs/core/dom";
7
+ import { forwardRef, useState } from "react";
8
+ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
9
+
10
+ //#region src/ui/seek-button/seek-button.tsx
11
+ /**
12
+ * A button that seeks forward or backward by a configurable number of seconds.
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * <SeekButton seconds={-10} />
17
+ *
18
+ * <SeekButton
19
+ * seconds={30}
20
+ * render={(props, state) => (
21
+ * <button {...props}>
22
+ * {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
23
+ * </button>
24
+ * )}
25
+ * />
26
+ * ```
27
+ */
28
+ const SeekButton = forwardRef(function SeekButton(componentProps, forwardedRef) {
29
+ const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
30
+ const time = usePlayer(selectTime);
31
+ const [core] = useState(() => new SeekButtonCore());
32
+ core.setProps({
33
+ seconds,
34
+ label,
35
+ disabled
36
+ });
37
+ const { getButtonProps, buttonRef } = useButton({
38
+ displayName: "SeekButton",
39
+ onActivate: () => core.seek(time),
40
+ isDisabled: () => disabled || !time
41
+ });
42
+ if (!time) return null;
43
+ const state = core.getState(time);
44
+ return renderElement("button", {
45
+ render,
46
+ className,
47
+ style
48
+ }, {
49
+ state,
50
+ stateAttrMap: SeekButtonDataAttrs,
51
+ ref: [forwardedRef, buttonRef],
52
+ props: [
53
+ core.getAttrs(state),
54
+ elementProps,
55
+ getButtonProps()
56
+ ]
57
+ });
58
+ });
59
+
60
+ //#endregion
61
+ export { SeekButton };
62
+ //# sourceMappingURL=seek-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n * seconds={30}\n * render={(props, state) => (\n * <button {...props}>\n * {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n * </button>\n * )}\n * />\n * ```\n */\nexport const SeekButton = forwardRef(function SeekButton(\n componentProps: SeekButtonProps,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;\n\n const time = usePlayer(selectTime);\n\n const [core] = useState(() => new SeekButtonCore());\n core.setProps({ seconds, label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: 'SeekButton',\n onActivate: () => core.seek(time!),\n isDisabled: () => disabled || !time,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('SeekButton', 'time');\n return null;\n }\n\n const state = core.getState(time);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: SeekButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [core.getAttrs(state), elementProps, getButtonProps()],\n }\n );\n});\n\nexport namespace SeekButton {\n export type Props = SeekButtonProps;\n export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,OAAO,UAAU,GAAG,iBAAiB;CAEhF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAS;EAAO;EAAU,CAAC;CAE3C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,KAAK,KAAM;EAClC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;AAEjC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
@@ -0,0 +1,3 @@
1
+ import { index_parts_exports } from "./index.parts.js";
2
+
3
+ export { index_parts_exports as Time };
@@ -0,0 +1,15 @@
1
+ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
2
+ import { Group } from "./time-group.js";
3
+ import { Separator } from "./time-separator.js";
4
+ import { Value } from "./time-value.js";
5
+
6
+ //#region src/ui/time/index.parts.ts
7
+ var index_parts_exports = /* @__PURE__ */ __exportAll({
8
+ Group: () => Group,
9
+ Separator: () => Separator,
10
+ Value: () => Value
11
+ });
12
+
13
+ //#endregion
14
+ export { index_parts_exports };
15
+ //# sourceMappingURL=index.parts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time/index.parts.ts"],"sourcesContent":["export { Group, type GroupProps } from './time-group';\nexport { Separator, type SeparatorProps } from './time-separator';\nexport { Value, type ValueProps } from './time-value';\n"],"mappings":""}