@videojs/react 10.0.0-beta.1 → 10.0.0-beta.10

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 (386) hide show
  1. package/dist/default/icons/dist/react/default/captions-off.js +0 -1
  2. package/dist/default/icons/dist/react/default/captions-off.js.map +1 -1
  3. package/dist/default/icons/dist/react/default/captions-on.js +0 -1
  4. package/dist/default/icons/dist/react/default/captions-on.js.map +1 -1
  5. package/dist/default/icons/dist/react/default/fullscreen-enter.js +0 -1
  6. package/dist/default/icons/dist/react/default/fullscreen-enter.js.map +1 -1
  7. package/dist/default/icons/dist/react/default/fullscreen-exit.js +0 -1
  8. package/dist/default/icons/dist/react/default/fullscreen-exit.js.map +1 -1
  9. package/dist/default/icons/dist/react/default/pause.js +0 -1
  10. package/dist/default/icons/dist/react/default/pause.js.map +1 -1
  11. package/dist/default/icons/dist/react/default/pip-enter.js +33 -0
  12. package/dist/default/icons/dist/react/default/pip-enter.js.map +1 -0
  13. package/dist/default/icons/dist/react/default/pip-exit.js +33 -0
  14. package/dist/default/icons/dist/react/default/pip-exit.js.map +1 -0
  15. package/dist/default/icons/dist/react/default/play.js +0 -1
  16. package/dist/default/icons/dist/react/default/play.js.map +1 -1
  17. package/dist/default/icons/dist/react/default/restart.js +0 -1
  18. package/dist/default/icons/dist/react/default/restart.js.map +1 -1
  19. package/dist/default/icons/dist/react/default/seek.js +0 -1
  20. package/dist/default/icons/dist/react/default/seek.js.map +1 -1
  21. package/dist/default/icons/dist/react/default/spinner.js +0 -1
  22. package/dist/default/icons/dist/react/default/spinner.js.map +1 -1
  23. package/dist/default/icons/dist/react/default/volume-high.js +0 -1
  24. package/dist/default/icons/dist/react/default/volume-high.js.map +1 -1
  25. package/dist/default/icons/dist/react/default/volume-low.js +0 -1
  26. package/dist/default/icons/dist/react/default/volume-low.js.map +1 -1
  27. package/dist/default/icons/dist/react/default/volume-off.js +0 -1
  28. package/dist/default/icons/dist/react/default/volume-off.js.map +1 -1
  29. package/dist/default/icons/dist/react/minimal/captions-off.js +0 -1
  30. package/dist/default/icons/dist/react/minimal/captions-off.js.map +1 -1
  31. package/dist/default/icons/dist/react/minimal/captions-on.js +0 -1
  32. package/dist/default/icons/dist/react/minimal/captions-on.js.map +1 -1
  33. package/dist/default/icons/dist/react/minimal/fullscreen-enter.js +0 -1
  34. package/dist/default/icons/dist/react/minimal/fullscreen-enter.js.map +1 -1
  35. package/dist/default/icons/dist/react/minimal/fullscreen-exit.js +0 -1
  36. package/dist/default/icons/dist/react/minimal/fullscreen-exit.js.map +1 -1
  37. package/dist/default/icons/dist/react/minimal/pause.js +0 -1
  38. package/dist/default/icons/dist/react/minimal/pause.js.map +1 -1
  39. package/dist/default/icons/dist/react/minimal/pip-enter.js +37 -0
  40. package/dist/default/icons/dist/react/minimal/pip-enter.js.map +1 -0
  41. package/dist/default/icons/dist/react/minimal/pip-exit.js +37 -0
  42. package/dist/default/icons/dist/react/minimal/pip-exit.js.map +1 -0
  43. package/dist/default/icons/dist/react/minimal/play.js +0 -1
  44. package/dist/default/icons/dist/react/minimal/play.js.map +1 -1
  45. package/dist/default/icons/dist/react/minimal/restart.js +0 -1
  46. package/dist/default/icons/dist/react/minimal/restart.js.map +1 -1
  47. package/dist/default/icons/dist/react/minimal/seek.js +0 -1
  48. package/dist/default/icons/dist/react/minimal/seek.js.map +1 -1
  49. package/dist/default/icons/dist/react/minimal/spinner.js +0 -1
  50. package/dist/default/icons/dist/react/minimal/spinner.js.map +1 -1
  51. package/dist/default/icons/dist/react/minimal/volume-high.js +0 -1
  52. package/dist/default/icons/dist/react/minimal/volume-high.js.map +1 -1
  53. package/dist/default/icons/dist/react/minimal/volume-low.js +0 -1
  54. package/dist/default/icons/dist/react/minimal/volume-low.js.map +1 -1
  55. package/dist/default/icons/dist/react/minimal/volume-off.js +0 -1
  56. package/dist/default/icons/dist/react/minimal/volume-off.js.map +1 -1
  57. package/dist/default/index.js +2 -2
  58. package/dist/default/media/audio.js +3 -6
  59. package/dist/default/media/audio.js.map +1 -1
  60. package/dist/default/media/background-video/index.js +2 -2
  61. package/dist/default/media/background-video/index.js.map +1 -1
  62. package/dist/default/media/dash-video/index.js +21 -0
  63. package/dist/default/media/dash-video/index.js.map +1 -0
  64. package/dist/default/media/hls-video/index.js +3 -8
  65. package/dist/default/media/hls-video/index.js.map +1 -1
  66. package/dist/default/media/simple-hls-video/index.js +3 -7
  67. package/dist/default/media/simple-hls-video/index.js.map +1 -1
  68. package/dist/default/media/video.js +3 -6
  69. package/dist/default/media/video.js.map +1 -1
  70. package/dist/default/player/context.js +16 -10
  71. package/dist/default/player/context.js.map +1 -1
  72. package/dist/default/player/create-player.js +16 -2
  73. package/dist/default/player/create-player.js.map +1 -1
  74. package/dist/default/presets/audio/minimal-skin.css +237 -157
  75. package/dist/default/presets/audio/minimal-skin.js +136 -119
  76. package/dist/default/presets/audio/minimal-skin.js.map +1 -1
  77. package/dist/default/presets/audio/minimal-skin.tailwind.js +148 -131
  78. package/dist/default/presets/audio/minimal-skin.tailwind.js.map +1 -1
  79. package/dist/default/presets/audio/skin.css +234 -153
  80. package/dist/default/presets/audio/skin.js +129 -112
  81. package/dist/default/presets/audio/skin.js.map +1 -1
  82. package/dist/default/presets/audio/skin.tailwind.js +141 -125
  83. package/dist/default/presets/audio/skin.tailwind.js.map +1 -1
  84. package/dist/default/presets/{video/error-dialog.js → error-dialog.js} +18 -18
  85. package/dist/default/presets/error-dialog.js.map +1 -0
  86. package/dist/default/presets/video/minimal-skin.css +486 -301
  87. package/dist/default/presets/video/minimal-skin.js +127 -97
  88. package/dist/default/presets/video/minimal-skin.js.map +1 -1
  89. package/dist/default/presets/video/minimal-skin.tailwind.js +141 -112
  90. package/dist/default/presets/video/minimal-skin.tailwind.js.map +1 -1
  91. package/dist/default/presets/video/skin.css +484 -289
  92. package/dist/default/presets/video/skin.js +121 -94
  93. package/dist/default/presets/video/skin.js.map +1 -1
  94. package/dist/default/presets/video/skin.tailwind.js +135 -109
  95. package/dist/default/presets/video/skin.tailwind.js.map +1 -1
  96. package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js +9 -20
  97. package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
  98. package/dist/default/skins/dist/default/default/tailwind/components/button.js +4 -3
  99. package/dist/default/skins/dist/default/default/tailwind/components/button.js.map +1 -1
  100. package/dist/default/skins/dist/default/default/tailwind/components/controls.js +1 -1
  101. package/dist/default/skins/dist/default/default/tailwind/components/controls.js.map +1 -1
  102. package/dist/default/skins/dist/default/default/tailwind/components/error.js +3 -3
  103. package/dist/default/skins/dist/default/default/tailwind/components/error.js.map +1 -1
  104. package/dist/default/skins/dist/default/default/tailwind/components/overlay.js +1 -1
  105. package/dist/default/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
  106. package/dist/default/skins/dist/default/default/tailwind/components/popup.js +3 -3
  107. package/dist/default/skins/dist/default/default/tailwind/components/popup.js.map +1 -1
  108. package/dist/default/skins/dist/default/default/tailwind/components/poster.js +16 -0
  109. package/dist/default/skins/dist/default/default/tailwind/components/poster.js.map +1 -0
  110. package/dist/default/skins/dist/default/default/tailwind/components/preview.js +13 -0
  111. package/dist/default/skins/dist/default/default/tailwind/components/preview.js.map +1 -0
  112. package/dist/default/skins/dist/default/default/tailwind/components/root.js +1 -1
  113. package/dist/default/skins/dist/default/default/tailwind/components/root.js.map +1 -1
  114. package/dist/default/skins/dist/default/default/tailwind/components/seek.js +1 -1
  115. package/dist/default/skins/dist/default/default/tailwind/components/seek.js.map +1 -1
  116. package/dist/default/skins/dist/default/default/tailwind/components/slider.js +1 -1
  117. package/dist/default/skins/dist/default/default/tailwind/components/slider.js.map +1 -1
  118. package/dist/default/skins/dist/default/default/tailwind/components/surface.js +1 -1
  119. package/dist/default/skins/dist/default/default/tailwind/components/surface.js.map +1 -1
  120. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +26 -15
  121. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  122. package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js +10 -18
  123. package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
  124. package/dist/default/skins/dist/default/minimal/tailwind/components/button.js +4 -3
  125. package/dist/default/skins/dist/default/minimal/tailwind/components/button.js.map +1 -1
  126. package/dist/default/skins/dist/default/minimal/tailwind/components/controls.js +1 -1
  127. package/dist/default/skins/dist/default/minimal/tailwind/components/controls.js.map +1 -1
  128. package/dist/default/skins/dist/default/minimal/tailwind/components/error.js +3 -3
  129. package/dist/default/skins/dist/default/minimal/tailwind/components/error.js.map +1 -1
  130. package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
  131. package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
  132. package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js +4 -3
  133. package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js.map +1 -1
  134. package/dist/default/skins/dist/default/minimal/tailwind/components/poster.js +16 -0
  135. package/dist/default/skins/dist/default/minimal/tailwind/components/poster.js.map +1 -0
  136. package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js +14 -0
  137. package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js.map +1 -0
  138. package/dist/default/skins/dist/default/minimal/tailwind/components/root.js +1 -1
  139. package/dist/default/skins/dist/default/minimal/tailwind/components/root.js.map +1 -1
  140. package/dist/default/skins/dist/default/minimal/tailwind/components/seek.js +1 -1
  141. package/dist/default/skins/dist/default/minimal/tailwind/components/seek.js.map +1 -1
  142. package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js +1 -1
  143. package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js.map +1 -1
  144. package/dist/default/skins/dist/default/minimal/tailwind/components/time.js +1 -1
  145. package/dist/default/skins/dist/default/minimal/tailwind/components/time.js.map +1 -1
  146. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +31 -15
  147. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  148. package/dist/{dev/skins/dist/default/default/tailwind/components → default/skins/dist/default/shared/tailwind}/icon-state.js +6 -1
  149. package/dist/default/skins/dist/default/shared/tailwind/icon-state.js.map +1 -0
  150. package/dist/default/ui/alert-dialog/alert-dialog-root.js +1 -1
  151. package/dist/default/ui/buffering-indicator/buffering-indicator.js +2 -0
  152. package/dist/default/ui/buffering-indicator/buffering-indicator.js.map +1 -1
  153. package/dist/default/ui/hooks/use-slider.js +1 -1
  154. package/dist/default/ui/popover/popover-popup.js +11 -2
  155. package/dist/default/ui/popover/popover-popup.js.map +1 -1
  156. package/dist/default/ui/popover/popover-root.js +1 -1
  157. package/dist/default/ui/thumbnail/index.js +3 -0
  158. package/dist/default/ui/time-slider/time-slider-root.js +2 -2
  159. package/dist/default/ui/time-slider/time-slider-root.js.map +1 -1
  160. package/dist/default/ui/tooltip/tooltip-popup.js +11 -2
  161. package/dist/default/ui/tooltip/tooltip-popup.js.map +1 -1
  162. package/dist/default/ui/tooltip/tooltip-root.js +2 -1
  163. package/dist/default/ui/tooltip/tooltip-root.js.map +1 -1
  164. package/dist/default/ui/volume-slider/volume-slider-root.js +4 -4
  165. package/dist/default/ui/volume-slider/volume-slider-root.js.map +1 -1
  166. package/dist/default/utils/use-destroy.js +12 -4
  167. package/dist/default/utils/use-destroy.js.map +1 -1
  168. package/dist/default/utils/use-media-instance.js +24 -0
  169. package/dist/default/utils/use-media-instance.js.map +1 -0
  170. package/dist/default/utils/use-render.js +5 -1
  171. package/dist/default/utils/use-render.js.map +1 -1
  172. package/dist/dev/icons/dist/react/default/captions-off.js +0 -1
  173. package/dist/dev/icons/dist/react/default/captions-off.js.map +1 -1
  174. package/dist/dev/icons/dist/react/default/captions-on.js +0 -1
  175. package/dist/dev/icons/dist/react/default/captions-on.js.map +1 -1
  176. package/dist/dev/icons/dist/react/default/fullscreen-enter.js +0 -1
  177. package/dist/dev/icons/dist/react/default/fullscreen-enter.js.map +1 -1
  178. package/dist/dev/icons/dist/react/default/fullscreen-exit.js +0 -1
  179. package/dist/dev/icons/dist/react/default/fullscreen-exit.js.map +1 -1
  180. package/dist/dev/icons/dist/react/default/pause.js +0 -1
  181. package/dist/dev/icons/dist/react/default/pause.js.map +1 -1
  182. package/dist/dev/icons/dist/react/default/pip-enter.js +33 -0
  183. package/dist/dev/icons/dist/react/default/pip-enter.js.map +1 -0
  184. package/dist/dev/icons/dist/react/default/pip-exit.js +33 -0
  185. package/dist/dev/icons/dist/react/default/pip-exit.js.map +1 -0
  186. package/dist/dev/icons/dist/react/default/play.js +0 -1
  187. package/dist/dev/icons/dist/react/default/play.js.map +1 -1
  188. package/dist/dev/icons/dist/react/default/restart.js +0 -1
  189. package/dist/dev/icons/dist/react/default/restart.js.map +1 -1
  190. package/dist/dev/icons/dist/react/default/seek.js +0 -1
  191. package/dist/dev/icons/dist/react/default/seek.js.map +1 -1
  192. package/dist/dev/icons/dist/react/default/spinner.js +0 -1
  193. package/dist/dev/icons/dist/react/default/spinner.js.map +1 -1
  194. package/dist/dev/icons/dist/react/default/volume-high.js +0 -1
  195. package/dist/dev/icons/dist/react/default/volume-high.js.map +1 -1
  196. package/dist/dev/icons/dist/react/default/volume-low.js +0 -1
  197. package/dist/dev/icons/dist/react/default/volume-low.js.map +1 -1
  198. package/dist/dev/icons/dist/react/default/volume-off.js +0 -1
  199. package/dist/dev/icons/dist/react/default/volume-off.js.map +1 -1
  200. package/dist/dev/icons/dist/react/minimal/captions-off.js +0 -1
  201. package/dist/dev/icons/dist/react/minimal/captions-off.js.map +1 -1
  202. package/dist/dev/icons/dist/react/minimal/captions-on.js +0 -1
  203. package/dist/dev/icons/dist/react/minimal/captions-on.js.map +1 -1
  204. package/dist/dev/icons/dist/react/minimal/fullscreen-enter.js +0 -1
  205. package/dist/dev/icons/dist/react/minimal/fullscreen-enter.js.map +1 -1
  206. package/dist/dev/icons/dist/react/minimal/fullscreen-exit.js +0 -1
  207. package/dist/dev/icons/dist/react/minimal/fullscreen-exit.js.map +1 -1
  208. package/dist/dev/icons/dist/react/minimal/pause.js +0 -1
  209. package/dist/dev/icons/dist/react/minimal/pause.js.map +1 -1
  210. package/dist/dev/icons/dist/react/minimal/pip-enter.js +37 -0
  211. package/dist/dev/icons/dist/react/minimal/pip-enter.js.map +1 -0
  212. package/dist/dev/icons/dist/react/minimal/pip-exit.js +37 -0
  213. package/dist/dev/icons/dist/react/minimal/pip-exit.js.map +1 -0
  214. package/dist/dev/icons/dist/react/minimal/play.js +0 -1
  215. package/dist/dev/icons/dist/react/minimal/play.js.map +1 -1
  216. package/dist/dev/icons/dist/react/minimal/restart.js +0 -1
  217. package/dist/dev/icons/dist/react/minimal/restart.js.map +1 -1
  218. package/dist/dev/icons/dist/react/minimal/seek.js +0 -1
  219. package/dist/dev/icons/dist/react/minimal/seek.js.map +1 -1
  220. package/dist/dev/icons/dist/react/minimal/spinner.js +0 -1
  221. package/dist/dev/icons/dist/react/minimal/spinner.js.map +1 -1
  222. package/dist/dev/icons/dist/react/minimal/volume-high.js +0 -1
  223. package/dist/dev/icons/dist/react/minimal/volume-high.js.map +1 -1
  224. package/dist/dev/icons/dist/react/minimal/volume-low.js +0 -1
  225. package/dist/dev/icons/dist/react/minimal/volume-low.js.map +1 -1
  226. package/dist/dev/icons/dist/react/minimal/volume-off.js +0 -1
  227. package/dist/dev/icons/dist/react/minimal/volume-off.js.map +1 -1
  228. package/dist/dev/index.d.ts +2 -2
  229. package/dist/dev/index.js +2 -2
  230. package/dist/dev/media/audio.d.ts.map +1 -1
  231. package/dist/dev/media/audio.js +3 -6
  232. package/dist/dev/media/audio.js.map +1 -1
  233. package/dist/dev/media/background-video/index.js +2 -2
  234. package/dist/dev/media/background-video/index.js.map +1 -1
  235. package/dist/dev/media/dash-video/index.d.ts +11 -0
  236. package/dist/dev/media/dash-video/index.d.ts.map +1 -0
  237. package/dist/dev/media/dash-video/index.js +21 -0
  238. package/dist/dev/media/dash-video/index.js.map +1 -0
  239. package/dist/dev/media/hls-video/index.d.ts.map +1 -1
  240. package/dist/dev/media/hls-video/index.js +3 -8
  241. package/dist/dev/media/hls-video/index.js.map +1 -1
  242. package/dist/dev/media/simple-hls-video/index.d.ts.map +1 -1
  243. package/dist/dev/media/simple-hls-video/index.js +3 -7
  244. package/dist/dev/media/simple-hls-video/index.js.map +1 -1
  245. package/dist/dev/media/video.d.ts.map +1 -1
  246. package/dist/dev/media/video.js +3 -6
  247. package/dist/dev/media/video.js.map +1 -1
  248. package/dist/dev/player/context.d.ts +10 -4
  249. package/dist/dev/player/context.d.ts.map +1 -1
  250. package/dist/dev/player/context.js +16 -10
  251. package/dist/dev/player/context.js.map +1 -1
  252. package/dist/dev/player/create-player.js +16 -2
  253. package/dist/dev/player/create-player.js.map +1 -1
  254. package/dist/dev/presets/audio/minimal-skin.css +237 -157
  255. package/dist/dev/presets/audio/minimal-skin.d.ts.map +1 -1
  256. package/dist/dev/presets/audio/minimal-skin.js +136 -119
  257. package/dist/dev/presets/audio/minimal-skin.js.map +1 -1
  258. package/dist/dev/presets/audio/minimal-skin.tailwind.d.ts.map +1 -1
  259. package/dist/dev/presets/audio/minimal-skin.tailwind.js +148 -131
  260. package/dist/dev/presets/audio/minimal-skin.tailwind.js.map +1 -1
  261. package/dist/dev/presets/audio/skin.css +234 -153
  262. package/dist/dev/presets/audio/skin.d.ts.map +1 -1
  263. package/dist/dev/presets/audio/skin.js +129 -112
  264. package/dist/dev/presets/audio/skin.js.map +1 -1
  265. package/dist/dev/presets/audio/skin.tailwind.d.ts.map +1 -1
  266. package/dist/dev/presets/audio/skin.tailwind.js +141 -125
  267. package/dist/dev/presets/audio/skin.tailwind.js.map +1 -1
  268. package/dist/dev/presets/{video/error-dialog.js → error-dialog.js} +18 -18
  269. package/dist/dev/presets/error-dialog.js.map +1 -0
  270. package/dist/dev/presets/types.d.ts +6 -1
  271. package/dist/dev/presets/types.d.ts.map +1 -1
  272. package/dist/dev/presets/video/minimal-skin.css +486 -301
  273. package/dist/dev/presets/video/minimal-skin.d.ts +2 -2
  274. package/dist/dev/presets/video/minimal-skin.d.ts.map +1 -1
  275. package/dist/dev/presets/video/minimal-skin.js +127 -97
  276. package/dist/dev/presets/video/minimal-skin.js.map +1 -1
  277. package/dist/dev/presets/video/minimal-skin.tailwind.d.ts.map +1 -1
  278. package/dist/dev/presets/video/minimal-skin.tailwind.js +141 -112
  279. package/dist/dev/presets/video/minimal-skin.tailwind.js.map +1 -1
  280. package/dist/dev/presets/video/skin.css +484 -289
  281. package/dist/dev/presets/video/skin.d.ts +2 -2
  282. package/dist/dev/presets/video/skin.d.ts.map +1 -1
  283. package/dist/dev/presets/video/skin.js +121 -94
  284. package/dist/dev/presets/video/skin.js.map +1 -1
  285. package/dist/dev/presets/video/skin.tailwind.d.ts.map +1 -1
  286. package/dist/dev/presets/video/skin.tailwind.js +135 -109
  287. package/dist/dev/presets/video/skin.tailwind.js.map +1 -1
  288. package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js +9 -20
  289. package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
  290. package/dist/dev/skins/dist/default/default/tailwind/components/button.js +4 -3
  291. package/dist/dev/skins/dist/default/default/tailwind/components/button.js.map +1 -1
  292. package/dist/dev/skins/dist/default/default/tailwind/components/controls.js +1 -1
  293. package/dist/dev/skins/dist/default/default/tailwind/components/controls.js.map +1 -1
  294. package/dist/dev/skins/dist/default/default/tailwind/components/error.js +3 -3
  295. package/dist/dev/skins/dist/default/default/tailwind/components/error.js.map +1 -1
  296. package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js +1 -1
  297. package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
  298. package/dist/dev/skins/dist/default/default/tailwind/components/popup.js +3 -3
  299. package/dist/dev/skins/dist/default/default/tailwind/components/popup.js.map +1 -1
  300. package/dist/dev/skins/dist/default/default/tailwind/components/poster.js +16 -0
  301. package/dist/dev/skins/dist/default/default/tailwind/components/poster.js.map +1 -0
  302. package/dist/dev/skins/dist/default/default/tailwind/components/preview.js +13 -0
  303. package/dist/dev/skins/dist/default/default/tailwind/components/preview.js.map +1 -0
  304. package/dist/dev/skins/dist/default/default/tailwind/components/root.js +1 -1
  305. package/dist/dev/skins/dist/default/default/tailwind/components/root.js.map +1 -1
  306. package/dist/dev/skins/dist/default/default/tailwind/components/seek.js +1 -1
  307. package/dist/dev/skins/dist/default/default/tailwind/components/seek.js.map +1 -1
  308. package/dist/dev/skins/dist/default/default/tailwind/components/slider.js +1 -1
  309. package/dist/dev/skins/dist/default/default/tailwind/components/slider.js.map +1 -1
  310. package/dist/dev/skins/dist/default/default/tailwind/components/surface.js +1 -1
  311. package/dist/dev/skins/dist/default/default/tailwind/components/surface.js.map +1 -1
  312. package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js +26 -15
  313. package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  314. package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js +10 -18
  315. package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
  316. package/dist/dev/skins/dist/default/minimal/tailwind/components/button.js +4 -3
  317. package/dist/dev/skins/dist/default/minimal/tailwind/components/button.js.map +1 -1
  318. package/dist/dev/skins/dist/default/minimal/tailwind/components/controls.js +1 -1
  319. package/dist/dev/skins/dist/default/minimal/tailwind/components/controls.js.map +1 -1
  320. package/dist/dev/skins/dist/default/minimal/tailwind/components/error.js +3 -3
  321. package/dist/dev/skins/dist/default/minimal/tailwind/components/error.js.map +1 -1
  322. package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
  323. package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
  324. package/dist/dev/skins/dist/default/minimal/tailwind/components/popup.js +4 -3
  325. package/dist/dev/skins/dist/default/minimal/tailwind/components/popup.js.map +1 -1
  326. package/dist/dev/skins/dist/default/minimal/tailwind/components/poster.js +16 -0
  327. package/dist/dev/skins/dist/default/minimal/tailwind/components/poster.js.map +1 -0
  328. package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js +14 -0
  329. package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js.map +1 -0
  330. package/dist/dev/skins/dist/default/minimal/tailwind/components/root.js +1 -1
  331. package/dist/dev/skins/dist/default/minimal/tailwind/components/root.js.map +1 -1
  332. package/dist/dev/skins/dist/default/minimal/tailwind/components/seek.js +1 -1
  333. package/dist/dev/skins/dist/default/minimal/tailwind/components/seek.js.map +1 -1
  334. package/dist/dev/skins/dist/default/minimal/tailwind/components/slider.js +1 -1
  335. package/dist/dev/skins/dist/default/minimal/tailwind/components/slider.js.map +1 -1
  336. package/dist/dev/skins/dist/default/minimal/tailwind/components/time.js +1 -1
  337. package/dist/dev/skins/dist/default/minimal/tailwind/components/time.js.map +1 -1
  338. package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js +31 -15
  339. package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  340. package/dist/{default/skins/dist/default/default/tailwind/components → dev/skins/dist/default/shared/tailwind}/icon-state.js +6 -1
  341. package/dist/dev/skins/dist/default/shared/tailwind/icon-state.js.map +1 -0
  342. package/dist/dev/ui/alert-dialog/alert-dialog-root.js +1 -1
  343. package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts.map +1 -1
  344. package/dist/dev/ui/buffering-indicator/buffering-indicator.js +2 -0
  345. package/dist/dev/ui/buffering-indicator/buffering-indicator.js.map +1 -1
  346. package/dist/dev/ui/hooks/use-slider.js +1 -1
  347. package/dist/dev/ui/popover/popover-popup.d.ts.map +1 -1
  348. package/dist/dev/ui/popover/popover-popup.js +11 -2
  349. package/dist/dev/ui/popover/popover-popup.js.map +1 -1
  350. package/dist/dev/ui/popover/popover-root.js +1 -1
  351. package/dist/dev/ui/thumbnail/index.d.ts +2 -0
  352. package/dist/dev/ui/thumbnail/index.js +3 -0
  353. package/dist/dev/ui/time-slider/time-slider-root.js +2 -2
  354. package/dist/dev/ui/time-slider/time-slider-root.js.map +1 -1
  355. package/dist/dev/ui/tooltip/tooltip-popup.d.ts.map +1 -1
  356. package/dist/dev/ui/tooltip/tooltip-popup.js +11 -2
  357. package/dist/dev/ui/tooltip/tooltip-popup.js.map +1 -1
  358. package/dist/dev/ui/tooltip/tooltip-root.d.ts.map +1 -1
  359. package/dist/dev/ui/tooltip/tooltip-root.js +2 -1
  360. package/dist/dev/ui/tooltip/tooltip-root.js.map +1 -1
  361. package/dist/dev/ui/volume-slider/volume-slider-root.js +4 -4
  362. package/dist/dev/ui/volume-slider/volume-slider-root.js.map +1 -1
  363. package/dist/dev/utils/use-destroy.js +12 -4
  364. package/dist/dev/utils/use-destroy.js.map +1 -1
  365. package/dist/dev/utils/use-media-instance.js +24 -0
  366. package/dist/dev/utils/use-media-instance.js.map +1 -0
  367. package/dist/dev/utils/use-render.d.ts.map +1 -1
  368. package/dist/dev/utils/use-render.js +5 -1
  369. package/dist/dev/utils/use-render.js.map +1 -1
  370. package/package.json +7 -7
  371. package/dist/default/icons/dist/react/default/pip.js +0 -27
  372. package/dist/default/icons/dist/react/default/pip.js.map +0 -1
  373. package/dist/default/icons/dist/react/minimal/pip.js +0 -27
  374. package/dist/default/icons/dist/react/minimal/pip.js.map +0 -1
  375. package/dist/default/presets/video/error-dialog.js.map +0 -1
  376. package/dist/default/skins/dist/default/default/tailwind/components/icon-state.js.map +0 -1
  377. package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js +0 -29
  378. package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js.map +0 -1
  379. package/dist/dev/icons/dist/react/default/pip.js +0 -27
  380. package/dist/dev/icons/dist/react/default/pip.js.map +0 -1
  381. package/dist/dev/icons/dist/react/minimal/pip.js +0 -27
  382. package/dist/dev/icons/dist/react/minimal/pip.js.map +0 -1
  383. package/dist/dev/presets/video/error-dialog.js.map +0 -1
  384. package/dist/dev/skins/dist/default/default/tailwind/components/icon-state.js.map +0 -1
  385. package/dist/dev/skins/dist/default/minimal/tailwind/components/icon-state.js +0 -29
  386. package/dist/dev/skins/dist/default/minimal/tailwind/components/icon-state.js.map +0 -1
@@ -0,0 +1,16 @@
1
+ import { cn } from "@videojs/utils/style";
2
+
3
+ //#region ../skins/dist/default/minimal/tailwind/components/poster.js
4
+ const poster = (isShadowDOM) => cn("absolute inset-0 w-full h-full pointer-events-none", "transition-opacity duration-250", "not-data-visible:opacity-0", isShadowDOM ? [
5
+ "[&_::slotted(img)]:absolute",
6
+ "[&_::slotted(img)]:inset-0",
7
+ "[&_::slotted(img)]:w-full",
8
+ "[&_::slotted(img)]:h-full",
9
+ "[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]",
10
+ "[&_::slotted(img)]:[object-position:var(--media-object-position,center)]",
11
+ "[&_::slotted(img)]:rounded-(--media-video-border-radius)"
12
+ ] : "rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]");
13
+
14
+ //#endregion
15
+ export { poster };
16
+ //# sourceMappingURL=poster.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"poster.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/poster.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/poster.ts\nconst poster = (isShadowDOM) => cn(\"absolute inset-0 w-full h-full pointer-events-none\", \"transition-opacity duration-250\", \"not-data-visible:opacity-0\", isShadowDOM ? [\n\t\"[&_::slotted(img)]:absolute\",\n\t\"[&_::slotted(img)]:inset-0\",\n\t\"[&_::slotted(img)]:w-full\",\n\t\"[&_::slotted(img)]:h-full\",\n\t\"[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]\",\n\t\"[&_::slotted(img)]:[object-position:var(--media-object-position,center)]\",\n\t\"[&_::slotted(img)]:rounded-(--media-video-border-radius)\"\n] : \"rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]\");\n\n//#endregion\nexport { poster };\n//# sourceMappingURL=poster.js.map"],"mappings":";;;AAGA,MAAM,UAAU,gBAAgB,GAAG,sDAAsD,mCAAmC,8BAA8B,cAAc;CACvK;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,uHAAuH"}
@@ -0,0 +1,14 @@
1
+ import { cn } from "@videojs/utils/style";
2
+
3
+ //#region ../skins/dist/default/minimal/tailwind/components/preview.js
4
+ const preview = {
5
+ root: "group/preview pointer-events-none",
6
+ thumbnailWrapper: "relative rounded-lg bg-black/90",
7
+ thumbnail: cn("block rounded-[inherit] transition-opacity duration-150 ease-out", "data-loading:opacity-0"),
8
+ timestamp: "mt-2 block text-center tabular-nums",
9
+ spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
10
+ };
11
+
12
+ //#endregion
13
+ export { preview };
14
+ //# sourceMappingURL=preview.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttimestamp: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n\n//#endregion\nexport { preview };\n//# sourceMappingURL=preview.js.map"],"mappings":";;;AAGA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,WAAW;CACX,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}
@@ -1,7 +1,7 @@
1
1
  import { cn } from "@videojs/utils/style";
2
2
 
3
3
  //#region ../skins/dist/default/minimal/tailwind/components/root.js
4
- const root = cn("block relative isolate @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
4
+ const root = cn("block relative isolate @container/media-root", "rounded-(--media-border-radius,0.75rem)", "[--media-controls-radius:var(--media-border-radius,1rem)]", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
5
5
 
6
6
  //#endregion
7
7
  export { root };
@@ -1 +1 @@
1
- {"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(\"block relative isolate @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,uHAAuH,wBAAwB,6BAA6B,gDAAgD"}
1
+ {"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(\"block relative isolate @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"[--media-controls-radius:var(--media-border-radius,1rem)]\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,6DAA6D,uHAAuH,iBAAiB,6BAA6B,gDAAgD"}
@@ -1,7 +1,7 @@
1
1
  //#region ../skins/dist/default/minimal/tailwind/components/seek.js
2
2
  const seek = {
3
3
  button: "@max-md/media-controls:hidden",
4
- label: "text-[0.75em] font-[480] tabular-nums",
4
+ label: "text-[10px] font-[480] tabular-nums",
5
5
  labelForward: "absolute -right-px -bottom-0.75",
6
6
  labelBackward: "absolute -left-px -bottom-0.75"
7
7
  };
@@ -1 +1 @@
1
- {"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/seek.js"],"sourcesContent":["//#region src/minimal/tailwind/components/seek.ts\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\n\n//#endregion\nexport { seek };\n//# sourceMappingURL=seek.js.map"],"mappings":";AACA,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf"}
1
+ {"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/seek.js"],"sourcesContent":["//#region src/minimal/tailwind/components/seek.ts\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[10px] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\n\n//#endregion\nexport { seek };\n//# sourceMappingURL=seek.js.map"],"mappings":";AACA,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf"}
@@ -2,7 +2,7 @@ import { cn } from "@videojs/utils/style";
2
2
 
3
3
  //#region ../skins/dist/default/minimal/tailwind/components/slider.js
4
4
  const slider = {
5
- root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
5
+ root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
6
6
  track: cn("relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
7
7
  fill: {
8
8
  base: "absolute rounded-[inherit] pointer-events-none",
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}
1
+ {"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,iHAAiH,yEAAyE;CAC7S,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}
@@ -4,7 +4,7 @@ import { cn } from "@videojs/utils/style";
4
4
  const time = {
5
5
  group: "flex items-center gap-1",
6
6
  current: cn("hidden tabular-nums", "@md/media-controls:inline"),
7
- separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-white/50"),
7
+ separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-current/60"),
8
8
  duration: cn("tabular-nums", "@md/media-controls:text-current/60"),
9
9
  controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
10
10
  };
@@ -1 +1 @@
1
- {"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}
1
+ {"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-current/60\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,+DAA+D;CACvF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}
@@ -1,43 +1,59 @@
1
+ import { iconState } from "../../shared/tailwind/icon-state.js";
1
2
  import { controls as controls$1 } from "./components/controls.js";
3
+ import { error as error$1 } from "./components/error.js";
2
4
  import { popup as popup$1 } from "./components/popup.js";
3
5
  import { root as root$1 } from "./components/root.js";
4
6
  import { bufferingIndicator } from "./components/buffering.js";
5
7
  import { button } from "./components/button.js";
6
8
  import { buttonGroup } from "./components/button-group.js";
7
- import { error } from "./components/error.js";
8
9
  import { icon, iconContainer, iconFlipped } from "./components/icon.js";
9
10
  import { seek } from "./components/seek.js";
10
11
  import { slider as slider$1 } from "./components/slider.js";
11
12
  import { time } from "./components/time.js";
12
- import { iconState } from "./components/icon-state.js";
13
+ import { preview as preview$1 } from "./components/preview.js";
13
14
  import { overlay } from "./components/overlay.js";
15
+ import { poster } from "./components/poster.js";
14
16
  import { cn } from "@videojs/utils/style";
15
17
 
16
18
  //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
17
- const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", {
18
- "[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)": isShadowDOM,
19
- "[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]": !isShadowDOM
20
- }, "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", !isShadowDOM ? [
21
- "[&_video::-webkit-media-text-track-container]:transition-transform",
22
- "[&_video::-webkit-media-text-track-container]:duration-150",
19
+ const root = (isShadowDOM) => cn(root$1, "bg-black overflow-clip", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15", {
20
+ "[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]": isShadowDOM,
21
+ "[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]": !isShadowDOM
22
+ }, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-padding:0.375rem]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-delay:0ms]", "[--media-controls-transition-timing-function:ease-out]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-error-dialog-transition-timing-function:ease-out]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]", "[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
23
+ "[&_video::-webkit-media-text-track-container]:transition-[translate]",
24
+ "[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)",
23
25
  "[&_video::-webkit-media-text-track-container]:ease-out",
24
26
  "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)",
25
27
  "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)",
26
28
  "[&_video::-webkit-media-text-track-container]:scale-98",
27
29
  "[&_video::-webkit-media-text-track-container]:z-1",
28
- "[&_video::-webkit-media-text-track-container]:font-[inherit]",
29
- "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
30
- ] : [], "[&:fullscreen]:rounded-none");
31
- const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
30
+ "[&_video::-webkit-media-text-track-container]:font-[inherit]"
31
+ ] : [], "[&:fullscreen]:[--media-border-radius:0]", {
32
+ "[&:fullscreen_video]:object-contain": !isShadowDOM,
33
+ "[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
34
+ });
35
+ const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-(--media-controls-padding) pb-(--media-controls-padding) gap-2", "[color:var(--media-color-primary,oklch(1_0_0))] z-10", "peer-data-open/error:hidden", "ease-(--media-controls-transition-timing-function)", "duration-(--media-controls-transition-duration)", "delay-(--media-controls-transition-delay)", "[@media(pointer:fine)]:will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "[@media(pointer:coarse)]:will-change-[translate,opacity]", "[@media(pointer:coarse)]:transition-[translate,opacity]", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "motion-safe:not-data-visible:translate-y-full", "[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
36
+ const error = {
37
+ ...error$1,
38
+ root: cn(error$1.root, "pointer-events-none outline-none"),
39
+ dialog: cn(error$1.dialog, "pointer-events-auto"),
40
+ title: cn(error$1.title, "text-lg")
41
+ };
42
+ const preview = {
43
+ ...preview$1,
44
+ root: cn("absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none", "[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm", "[&:has([role=img][data-loading])]:max-h-24", preview$1.root),
45
+ thumbnailWrapper: cn(preview$1.thumbnailWrapper, "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20"),
46
+ thumbnail: cn(preview$1.thumbnail, "max-w-44")
47
+ };
32
48
  const slider = {
33
49
  ...slider$1,
34
- track: cn(slider$1.track, "shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
50
+ track: cn(slider$1.track, "ring-1 ring-black/5")
35
51
  };
36
52
  const popup = {
37
53
  ...popup$1,
38
- volume: cn("[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
54
+ volume: cn(popup$1.popover, "[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
39
55
  };
40
56
 
41
57
  //#endregion
42
- export { controls, popup, root, slider };
58
+ export { controls, error, popup, preview, root, slider };
43
59
  //# sourceMappingURL=video.tailwind.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { captions } from \"./components/captions.js\";\nimport { iconState } from \"./components/icon-state.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { tooltipState } from \"./components/tooltip-state.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,8BAA8B;AACtC,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC3qB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}
1
+ {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-video-border-radius:var(--media-border-radius,0.75rem)]\", \"[--media-controls-padding:0.375rem]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-delay:0ms]\", \"[--media-controls-transition-timing-function:ease-out]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-error-dialog-transition-timing-function:ease-out]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\"\n] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-(--media-controls-padding) pb-(--media-controls-padding) gap-2\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function)\", \"duration-(--media-controls-transition-duration)\", \"delay-(--media-controls-transition-delay)\", \"[@media(pointer:fine)]:will-change-[translate,filter,opacity]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[translate,opacity]\", \"[@media(pointer:coarse)]:transition-[translate,opacity]\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"motion-safe:not-data-visible:translate-y-full\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst error = {\n\t...error$1,\n\troot: cn(error$1.root, \"pointer-events-none outline-none\"),\n\tdialog: cn(error$1.dialog, \"pointer-events-auto\"),\n\ttitle: cn(error$1.title, \"text-lg\")\n};\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm\", \"[&:has([role=img][data-loading])]:max-h-24\", preview$1.root),\n\tthumbnailWrapper: cn(preview$1.thumbnailWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-44\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, poster, preview, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,0BAA0B,+EAA+E,4FAA4F;CAC7O,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,uCAAuC,gDAAgD,2CAA2C,0DAA0D,oDAAoD,iDAAiD,8DAA8D,6CAA6C,uDAAuD,iEAAiE,6DAA6D,yDAAyD,8GAA8G,iHAAiH,mHAAmH,uGAAuG,qCAAqC,qFAAqF,8EAA8E,uEAAuE,CAAC,cAAc;CACv5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,+BAA+B,0EAA0E,wDAAwD,+BAA+B,sDAAsD,mDAAmD,6CAA6C,iEAAiE,gEAAgE,4DAA4D,2DAA2D,mEAAmE,iDAAiD,+DAA+D,gEAAgE,yBAAyB;AAC13B,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,mCAAmC;CAC1D,QAAQ,GAAG,QAAQ,QAAQ,sBAAsB;CACjD,OAAO,GAAG,QAAQ,OAAO,UAAU;CACnC;AACD,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CAC/e,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,0DAA0D;CACtF"}
@@ -1,4 +1,4 @@
1
- //#region ../skins/dist/default/default/tailwind/components/icon-state.js
1
+ //#region ../skins/dist/default/shared/tailwind/icon-state.js
2
2
  const iconState = {
3
3
  play: {
4
4
  button: "group",
@@ -21,6 +21,11 @@ const iconState = {
21
21
  button: "group",
22
22
  off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
23
23
  on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
24
+ },
25
+ pip: {
26
+ button: "group",
27
+ off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
28
+ on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
24
29
  }
25
30
  };
26
31
 
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t},\n\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
+ import { useLatestRef } from "../../utils/use-latest-ref.js";
3
4
  import { useDestroy } from "../../utils/use-destroy.js";
4
5
  import { AlertDialogContextProvider } from "./context.js";
5
- import { useLatestRef } from "../../utils/use-latest-ref.js";
6
6
  import { useSafeId } from "../../utils/use-safe-id.js";
7
7
  import { createAlertDialog, createTransition } from "@videojs/core/dom";
8
8
  import { useSnapshot } from "@videojs/store/react";
@@ -1 +1 @@
1
- {"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;;;UAWiB,uBAAA,SACP,gBAAA,QAAwB,sBAAA,CAAuB,KAAA,GACrD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;AAsBA;;cAAa,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAoCd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}
1
+ {"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;;;UAYiB,uBAAA,SACP,gBAAA,QAAwB,sBAAA,CAAuB,KAAA,GACrD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;AAsBA;;cAAa,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqCd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}
@@ -1,6 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import { usePlayer } from "../../player/context.js";
4
+ import { useDestroy } from "../../utils/use-destroy.js";
4
5
  import { renderElement } from "../../utils/use-render.js";
5
6
  import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
6
7
  import { forwardRef, useState, useSyncExternalStore } from "react";
@@ -29,6 +30,7 @@ const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps
29
30
  const { render, className, style, delay, ...elementProps } = componentProps;
30
31
  const playback = usePlayer(selectPlayback);
31
32
  const [core] = useState(() => new BufferingIndicatorCore());
33
+ useDestroy(core);
32
34
  core.setProps({ delay });
33
35
  if (playback) core.update(playback);
34
36
  const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);
@@ -1 +1 @@
1
- {"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n * render={(props, state) => (\n * <div {...props}>{state.visible && <Spinner />}</div>\n * )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n componentProps: BufferingIndicatorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, delay, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new BufferingIndicatorCore());\n core.setProps({ delay });\n\n if (playback) core.update(playback);\n\n const state = useSyncExternalStore(\n (cb) => core.state.subscribe(cb),\n () => core.state.current,\n () => core.state.current\n );\n\n if (!playback) {\n if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n return null;\n }\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: BufferingIndicatorDataAttrs,\n ref: [forwardedRef],\n props: [elementProps],\n }\n );\n});\n\nexport namespace BufferingIndicator {\n export type Props = BufferingIndicatorProps;\n export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,UAAU;AACA,oBAAkB,sBAAsB,WAAW;AAChE,SAAO;;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
1
+ {"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n * render={(props, state) => (\n * <div {...props}>{state.visible && <Spinner />}</div>\n * )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n componentProps: BufferingIndicatorProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, delay, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new BufferingIndicatorCore());\n useDestroy(core);\n core.setProps({ delay });\n\n if (playback) core.update(playback);\n\n const state = useSyncExternalStore(\n (cb) => core.state.subscribe(cb),\n () => core.state.current,\n () => core.state.current\n );\n\n if (!playback) {\n if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n return null;\n }\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: BufferingIndicatorDataAttrs,\n ref: [forwardedRef],\n props: [elementProps],\n }\n );\n});\n\nexport namespace BufferingIndicator {\n export type Props = BufferingIndicatorProps;\n export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,YAAW,KAAK;AAChB,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,UAAU;AACA,oBAAkB,sBAAsB,WAAW;AAChE,SAAO;;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
- import { useDestroy } from "../../utils/use-destroy.js";
4
3
  import { useLatestRef } from "../../utils/use-latest-ref.js";
4
+ import { useDestroy } from "../../utils/use-destroy.js";
5
5
  import { useForceRender } from "../../utils/use-force-render.js";
6
6
  import { createSlider } from "@videojs/core/dom";
7
7
  import { useSnapshot } from "@videojs/store/react";
@@ -1 +1 @@
1
- {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6GR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
1
+ {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkIR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
@@ -3,7 +3,7 @@
3
3
  import { useComposedRefs } from "../../utils/use-composed-refs.js";
4
4
  import { renderElement } from "../../utils/use-render.js";
5
5
  import { usePopoverContext } from "./context.js";
6
- import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
6
+ import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
7
7
  import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
8
8
  import { supportsAnchorPositioning } from "@videojs/utils/dom";
9
9
 
@@ -41,14 +41,22 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
41
41
  const triggerEl = popover.triggerElement;
42
42
  const popupEl = internalRef.current;
43
43
  if (!triggerEl || !popupEl) return;
44
- setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
44
+ setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
45
45
  }
46
46
  measure();
47
+ const triggerEl = popover.triggerElement;
48
+ const popupEl = internalRef.current;
47
49
  let rafId = 0;
48
50
  function reposition() {
49
51
  cancelAnimationFrame(rafId);
50
52
  rafId = requestAnimationFrame(measure);
51
53
  }
54
+ reposition();
55
+ const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
56
+ reposition();
57
+ }) : null;
58
+ if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
59
+ if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
52
60
  window.addEventListener("scroll", reposition, {
53
61
  capture: true,
54
62
  passive: true
@@ -56,6 +64,7 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
56
64
  window.addEventListener("resize", reposition);
57
65
  return () => {
58
66
  cancelAnimationFrame(rafId);
67
+ resizeObserver?.disconnect();
59
68
  window.removeEventListener("scroll", reposition, true);
60
69
  window.removeEventListener("resize", reposition);
61
70
  };
@@ -1 +1 @@
1
- {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement | null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl || !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl.getBoundingClientRect();\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n\n // Recompute on scroll/resize so the popover tracks its trigger.\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1
+ {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement | null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl || !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the popover has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
- import { useDestroy } from "../../utils/use-destroy.js";
4
3
  import { useLatestRef } from "../../utils/use-latest-ref.js";
4
+ import { useDestroy } from "../../utils/use-destroy.js";
5
5
  import { useSafeId } from "../../utils/use-safe-id.js";
6
6
  import { PopoverContextProvider } from "./context.js";
7
7
  import { createPopover, createTransition } from "@videojs/core/dom";
@@ -0,0 +1,2 @@
1
+ import { Thumbnail, ThumbnailProps } from "./thumbnail.js";
2
+ export { Thumbnail, ThumbnailProps };
@@ -0,0 +1,3 @@
1
+ import { Thumbnail } from "./thumbnail.js";
2
+
3
+ export { Thumbnail };
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
3
  import { usePlayer } from "../../player/context.js";
4
- import { renderElement } from "../../utils/use-render.js";
5
4
  import { useLatestRef } from "../../utils/use-latest-ref.js";
5
+ import { renderElement } from "../../utils/use-render.js";
6
6
  import { useSlider } from "../hooks/use-slider.js";
7
7
  import { SliderProvider } from "../slider/context.js";
8
8
  import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
@@ -58,7 +58,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
58
58
  getCSSVars: getTimeSliderCSSVars,
59
59
  onValueCommit: (percent) => {
60
60
  const media = mediaRef.current;
61
- if (media) media.seek(core.valueFromPercent(percent));
61
+ if (media) media.seek(core.rawValueFromPercent(percent));
62
62
  },
63
63
  onDragStart,
64
64
  onDragEnd
@@ -1 +1 @@
1
- {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) | undefined;\n onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time || !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.valueFromPercent(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC;;EAEvD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}
1
+ {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) | undefined;\n onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time || !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.rawValueFromPercent(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6HR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
1
+ {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkJR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
@@ -3,7 +3,7 @@
3
3
  import { useComposedRefs } from "../../utils/use-composed-refs.js";
4
4
  import { renderElement } from "../../utils/use-render.js";
5
5
  import { useTooltipContext } from "./context.js";
6
- import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
6
+ import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
7
7
  import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
8
8
  import { TooltipCSSVars } from "@videojs/core";
9
9
  import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -42,14 +42,22 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
42
42
  const triggerEl = tooltip.triggerElement;
43
43
  const popupEl = internalRef.current;
44
44
  if (!triggerEl || !popupEl) return;
45
- setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
45
+ setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
46
46
  }
47
47
  measure();
48
+ const triggerEl = tooltip.triggerElement;
49
+ const popupEl = internalRef.current;
48
50
  let rafId = 0;
49
51
  function reposition() {
50
52
  cancelAnimationFrame(rafId);
51
53
  rafId = requestAnimationFrame(measure);
52
54
  }
55
+ reposition();
56
+ const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
57
+ reposition();
58
+ }) : null;
59
+ if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
60
+ if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
53
61
  window.addEventListener("scroll", reposition, {
54
62
  capture: true,
55
63
  passive: true
@@ -57,6 +65,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
57
65
  window.addEventListener("resize", reposition);
58
66
  return () => {
59
67
  cancelAnimationFrame(rafId);
68
+ resizeObserver?.disconnect();
60
69
  window.removeEventListener("scroll", reposition, true);
61
70
  window.removeEventListener("resize", reposition);
62
71
  };
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement | null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl || !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl.getBoundingClientRect();\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n\n // Recompute on scroll/resize so the tooltip tracks its trigger.\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1
+ {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement | null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl || !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the tooltip has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}