@videojs/html 10.2.0 → 10.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (374) hide show
  1. package/dist/default/define/audio/compat-skin.css +161 -41
  2. package/dist/default/define/audio/compat-skin2.js +1 -1
  3. package/dist/default/define/audio/neutral-skin.css +73 -34
  4. package/dist/default/define/audio/neutral-skin2.js +1 -1
  5. package/dist/default/define/audio/scaffold-skin.css +166 -42
  6. package/dist/default/define/audio/scaffold-skin2.js +1 -1
  7. package/dist/default/define/audio/skin.css +72 -34
  8. package/dist/default/define/audio/skin2.js +1 -1
  9. package/dist/default/define/extensions/google-analytics.js +6 -0
  10. package/dist/default/define/live-audio/compat-skin.css +143 -41
  11. package/dist/default/define/live-audio/compat-skin2.js +1 -1
  12. package/dist/default/define/live-audio/neutral-skin.css +56 -31
  13. package/dist/default/define/live-audio/neutral-skin2.js +1 -1
  14. package/dist/default/define/live-audio/scaffold-skin.css +148 -42
  15. package/dist/default/define/live-audio/scaffold-skin2.js +1 -1
  16. package/dist/default/define/live-audio/skin.css +55 -31
  17. package/dist/default/define/live-audio/skin2.js +1 -1
  18. package/dist/default/define/live-video/compat-skin.css +234 -51
  19. package/dist/default/define/live-video/compat-skin2.js +1 -1
  20. package/dist/default/define/live-video/neutral-skin.css +300 -46
  21. package/dist/default/define/live-video/neutral-skin2.js +1 -1
  22. package/dist/default/define/live-video/scaffold-skin.css +231 -53
  23. package/dist/default/define/live-video/scaffold-skin2.js +1 -1
  24. package/dist/default/define/live-video/skin.css +314 -49
  25. package/dist/default/define/live-video/skin2.js +1 -1
  26. package/dist/default/define/media/dailymotion-video.js +11 -0
  27. package/dist/default/define/media/mixcloud-audio.js +11 -0
  28. package/dist/default/define/media/soundcloud-audio.js +11 -0
  29. package/dist/default/define/ui/time-slider-markers.js +5 -0
  30. package/dist/default/define/video/compat-skin.css +242 -51
  31. package/dist/default/define/video/compat-skin2.js +1 -1
  32. package/dist/default/define/video/neutral-skin.css +382 -57
  33. package/dist/default/define/video/neutral-skin2.js +1 -1
  34. package/dist/default/define/video/scaffold-skin.css +240 -53
  35. package/dist/default/define/video/scaffold-skin2.js +1 -1
  36. package/dist/default/define/video/skin.css +415 -55
  37. package/dist/default/define/video/skin2.js +1 -1
  38. package/dist/default/extensions/google-analytics/extension.js +75 -0
  39. package/dist/default/extensions/mux-data/extension.js +7 -2
  40. package/dist/default/index.js +3 -1
  41. package/dist/default/internal/skins/compat-audio/skin.css +161 -41
  42. package/dist/default/internal/skins/compat-audio/template.js +1 -1
  43. package/dist/default/internal/skins/compat-live-audio/skin.css +143 -41
  44. package/dist/default/internal/skins/compat-live-video/skin.css +234 -51
  45. package/dist/default/internal/skins/compat-live-video/template.js +2 -0
  46. package/dist/default/internal/skins/compat-video/skin.css +242 -51
  47. package/dist/default/internal/skins/compat-video/template.js +2 -0
  48. package/dist/default/internal/skins/default-audio/skin.css +72 -34
  49. package/dist/default/internal/skins/default-live-audio/skin.css +55 -31
  50. package/dist/default/internal/skins/default-live-video/skin.css +314 -49
  51. package/dist/default/internal/skins/default-live-video/template.js +14 -0
  52. package/dist/default/internal/skins/default-video/register.js +3 -0
  53. package/dist/default/internal/skins/default-video/skin.css +415 -55
  54. package/dist/default/internal/skins/default-video/template.js +33 -5
  55. package/dist/default/internal/skins/neutral-audio/skin.css +73 -34
  56. package/dist/default/internal/skins/neutral-live-audio/skin.css +56 -31
  57. package/dist/default/internal/skins/neutral-live-video/skin.css +300 -46
  58. package/dist/default/internal/skins/neutral-live-video/template.js +14 -0
  59. package/dist/default/internal/skins/neutral-video/skin.css +382 -57
  60. package/dist/default/internal/skins/neutral-video/template.js +25 -11
  61. package/dist/default/internal/skins/scaffold-audio/skin.css +166 -42
  62. package/dist/default/internal/skins/scaffold-audio/template.js +1 -1
  63. package/dist/default/internal/skins/scaffold-live-audio/skin.css +148 -42
  64. package/dist/default/internal/skins/scaffold-live-video/skin.css +231 -53
  65. package/dist/default/internal/skins/scaffold-live-video/template.js +2 -0
  66. package/dist/default/internal/skins/scaffold-video/skin.css +240 -53
  67. package/dist/default/internal/skins/scaffold-video/template.js +3 -1
  68. package/dist/default/media/background-video/adapter.js +13 -35
  69. package/dist/default/media/background-video/base.js +95 -0
  70. package/dist/default/media/background-video/template.js +13 -20
  71. package/dist/default/media/dailymotion-video/adapter.js +31 -0
  72. package/dist/default/media/hls-background-video/adapter.js +23 -35
  73. package/dist/default/media/mixcloud-audio/adapter.js +16 -0
  74. package/dist/default/media/soundcloud-audio/adapter.js +16 -0
  75. package/dist/default/player/element.js +1 -5
  76. package/dist/default/presets/background/skin.js +2 -2
  77. package/dist/default/presets/skin.js +4 -3
  78. package/dist/default/ui/captions-radio-group/element.js +14 -1
  79. package/dist/default/ui/controls/element.js +6 -3
  80. package/dist/default/ui/dialog/element.js +13 -1
  81. package/dist/default/ui/gesture/element.js +3 -0
  82. package/dist/default/ui/media-button-element.js +10 -1
  83. package/dist/default/ui/playback-rate-button/element.js +7 -2
  84. package/dist/default/ui/playback-rate-radio-group/element.js +10 -3
  85. package/dist/default/ui/radio-options/controller.js +18 -5
  86. package/dist/default/ui/time-slider/markers.js +160 -0
  87. package/dist/default/version.js +1 -1
  88. package/dist/dev/define/audio/compat-skin.css +161 -41
  89. package/dist/dev/define/audio/compat-skin2.js +1 -1
  90. package/dist/dev/define/audio/compat-skin2.js.map +1 -1
  91. package/dist/dev/define/audio/neutral-skin.css +73 -34
  92. package/dist/dev/define/audio/neutral-skin2.js +1 -1
  93. package/dist/dev/define/audio/neutral-skin2.js.map +1 -1
  94. package/dist/dev/define/audio/scaffold-skin.css +166 -42
  95. package/dist/dev/define/audio/scaffold-skin2.js +1 -1
  96. package/dist/dev/define/audio/scaffold-skin2.js.map +1 -1
  97. package/dist/dev/define/audio/skin.css +72 -34
  98. package/dist/dev/define/audio/skin2.js +1 -1
  99. package/dist/dev/define/audio/skin2.js.map +1 -1
  100. package/dist/dev/define/extensions/google-analytics.d.ts +11 -0
  101. package/dist/dev/define/extensions/google-analytics.js +8 -0
  102. package/dist/dev/define/extensions/google-analytics.js.map +1 -0
  103. package/dist/dev/define/live-audio/compat-skin.css +143 -41
  104. package/dist/dev/define/live-audio/compat-skin2.js +1 -1
  105. package/dist/dev/define/live-audio/compat-skin2.js.map +1 -1
  106. package/dist/dev/define/live-audio/neutral-skin.css +56 -31
  107. package/dist/dev/define/live-audio/neutral-skin2.js +1 -1
  108. package/dist/dev/define/live-audio/neutral-skin2.js.map +1 -1
  109. package/dist/dev/define/live-audio/scaffold-skin.css +148 -42
  110. package/dist/dev/define/live-audio/scaffold-skin2.js +1 -1
  111. package/dist/dev/define/live-audio/scaffold-skin2.js.map +1 -1
  112. package/dist/dev/define/live-audio/skin.css +55 -31
  113. package/dist/dev/define/live-audio/skin2.js +1 -1
  114. package/dist/dev/define/live-audio/skin2.js.map +1 -1
  115. package/dist/dev/define/live-video/compat-skin.css +234 -51
  116. package/dist/dev/define/live-video/compat-skin2.js +1 -1
  117. package/dist/dev/define/live-video/compat-skin2.js.map +1 -1
  118. package/dist/dev/define/live-video/neutral-skin.css +300 -46
  119. package/dist/dev/define/live-video/neutral-skin2.js +1 -1
  120. package/dist/dev/define/live-video/neutral-skin2.js.map +1 -1
  121. package/dist/dev/define/live-video/scaffold-skin.css +231 -53
  122. package/dist/dev/define/live-video/scaffold-skin2.js +1 -1
  123. package/dist/dev/define/live-video/scaffold-skin2.js.map +1 -1
  124. package/dist/dev/define/live-video/skin.css +314 -49
  125. package/dist/dev/define/live-video/skin2.js +1 -1
  126. package/dist/dev/define/live-video/skin2.js.map +1 -1
  127. package/dist/dev/define/media/dailymotion-video.d.ts +15 -0
  128. package/dist/dev/define/media/dailymotion-video.js +13 -0
  129. package/dist/dev/define/media/dailymotion-video.js.map +1 -0
  130. package/dist/dev/define/media/mixcloud-audio.d.ts +15 -0
  131. package/dist/dev/define/media/mixcloud-audio.js +13 -0
  132. package/dist/dev/define/media/mixcloud-audio.js.map +1 -0
  133. package/dist/dev/define/media/soundcloud-audio.d.ts +15 -0
  134. package/dist/dev/define/media/soundcloud-audio.js +13 -0
  135. package/dist/dev/define/media/soundcloud-audio.js.map +1 -0
  136. package/dist/dev/define/ui/time-slider-markers.d.ts +8 -0
  137. package/dist/dev/define/ui/time-slider-markers.js +7 -0
  138. package/dist/dev/define/ui/time-slider-markers.js.map +1 -0
  139. package/dist/dev/define/video/compat-skin.css +242 -51
  140. package/dist/dev/define/video/compat-skin2.js +1 -1
  141. package/dist/dev/define/video/compat-skin2.js.map +1 -1
  142. package/dist/dev/define/video/neutral-skin.css +382 -57
  143. package/dist/dev/define/video/neutral-skin2.js +1 -1
  144. package/dist/dev/define/video/neutral-skin2.js.map +1 -1
  145. package/dist/dev/define/video/scaffold-skin.css +240 -53
  146. package/dist/dev/define/video/scaffold-skin2.js +1 -1
  147. package/dist/dev/define/video/scaffold-skin2.js.map +1 -1
  148. package/dist/dev/define/video/skin.css +415 -55
  149. package/dist/dev/define/video/skin2.js +1 -1
  150. package/dist/dev/define/video/skin2.js.map +1 -1
  151. package/dist/dev/extensions/google-analytics/extension.d.ts +52 -0
  152. package/dist/dev/extensions/google-analytics/extension.js +77 -0
  153. package/dist/dev/extensions/google-analytics/extension.js.map +1 -0
  154. package/dist/dev/extensions/google-analytics/index.d.ts +2 -0
  155. package/dist/dev/extensions/mux-data/extension.d.ts +4 -1
  156. package/dist/dev/extensions/mux-data/extension.js +7 -2
  157. package/dist/dev/extensions/mux-data/extension.js.map +1 -1
  158. package/dist/dev/index.d.ts +5 -4
  159. package/dist/dev/index.js +3 -1
  160. package/dist/dev/internal/skins/compat-audio/skin.css +161 -41
  161. package/dist/dev/internal/skins/compat-audio/template.js +1 -1
  162. package/dist/dev/internal/skins/compat-audio/template.js.map +1 -1
  163. package/dist/dev/internal/skins/compat-live-audio/skin.css +143 -41
  164. package/dist/dev/internal/skins/compat-live-video/skin.css +234 -51
  165. package/dist/dev/internal/skins/compat-live-video/template.js +2 -0
  166. package/dist/dev/internal/skins/compat-live-video/template.js.map +1 -1
  167. package/dist/dev/internal/skins/compat-video/skin.css +242 -51
  168. package/dist/dev/internal/skins/compat-video/template.js +2 -0
  169. package/dist/dev/internal/skins/compat-video/template.js.map +1 -1
  170. package/dist/dev/internal/skins/default-audio/skin.css +72 -34
  171. package/dist/dev/internal/skins/default-live-audio/skin.css +55 -31
  172. package/dist/dev/internal/skins/default-live-video/register.js.map +1 -1
  173. package/dist/dev/internal/skins/default-live-video/skin.css +314 -49
  174. package/dist/dev/internal/skins/default-live-video/template.js +14 -0
  175. package/dist/dev/internal/skins/default-live-video/template.js.map +1 -1
  176. package/dist/dev/internal/skins/default-video/register.d.ts +1 -0
  177. package/dist/dev/internal/skins/default-video/register.js +3 -0
  178. package/dist/dev/internal/skins/default-video/register.js.map +1 -1
  179. package/dist/dev/internal/skins/default-video/skin.css +415 -55
  180. package/dist/dev/internal/skins/default-video/template.js +33 -5
  181. package/dist/dev/internal/skins/default-video/template.js.map +1 -1
  182. package/dist/dev/internal/skins/neutral-audio/skin.css +73 -34
  183. package/dist/dev/internal/skins/neutral-live-audio/skin.css +56 -31
  184. package/dist/dev/internal/skins/neutral-live-video/register.js.map +1 -1
  185. package/dist/dev/internal/skins/neutral-live-video/skin.css +300 -46
  186. package/dist/dev/internal/skins/neutral-live-video/template.js +14 -0
  187. package/dist/dev/internal/skins/neutral-live-video/template.js.map +1 -1
  188. package/dist/dev/internal/skins/neutral-video/register.js.map +1 -1
  189. package/dist/dev/internal/skins/neutral-video/skin.css +382 -57
  190. package/dist/dev/internal/skins/neutral-video/template.js +25 -11
  191. package/dist/dev/internal/skins/neutral-video/template.js.map +1 -1
  192. package/dist/dev/internal/skins/scaffold-audio/skin.css +166 -42
  193. package/dist/dev/internal/skins/scaffold-audio/template.js +1 -1
  194. package/dist/dev/internal/skins/scaffold-audio/template.js.map +1 -1
  195. package/dist/dev/internal/skins/scaffold-live-audio/skin.css +148 -42
  196. package/dist/dev/internal/skins/scaffold-live-video/skin.css +231 -53
  197. package/dist/dev/internal/skins/scaffold-live-video/template.js +2 -0
  198. package/dist/dev/internal/skins/scaffold-live-video/template.js.map +1 -1
  199. package/dist/dev/internal/skins/scaffold-video/skin.css +240 -53
  200. package/dist/dev/internal/skins/scaffold-video/template.js +3 -1
  201. package/dist/dev/internal/skins/scaffold-video/template.js.map +1 -1
  202. package/dist/dev/media/background-video/adapter.d.ts +7 -13
  203. package/dist/dev/media/background-video/adapter.js +13 -35
  204. package/dist/dev/media/background-video/adapter.js.map +1 -1
  205. package/dist/dev/media/background-video/base.d.ts +44 -0
  206. package/dist/dev/media/background-video/base.js +97 -0
  207. package/dist/dev/media/background-video/base.js.map +1 -0
  208. package/dist/dev/media/background-video/template.d.ts +3 -0
  209. package/dist/dev/media/background-video/template.js +13 -20
  210. package/dist/dev/media/background-video/template.js.map +1 -1
  211. package/dist/dev/media/dailymotion-video/adapter.d.ts +17 -0
  212. package/dist/dev/media/dailymotion-video/adapter.js +47 -0
  213. package/dist/dev/media/dailymotion-video/adapter.js.map +1 -0
  214. package/dist/dev/media/dailymotion-video/index.d.ts +2 -0
  215. package/dist/dev/media/hls-background-video/adapter.d.ts +14 -19
  216. package/dist/dev/media/hls-background-video/adapter.js +23 -35
  217. package/dist/dev/media/hls-background-video/adapter.js.map +1 -1
  218. package/dist/dev/media/mixcloud-audio/adapter.d.ts +11 -0
  219. package/dist/dev/media/mixcloud-audio/adapter.js +52 -0
  220. package/dist/dev/media/mixcloud-audio/adapter.js.map +1 -0
  221. package/dist/dev/media/mixcloud-audio/index.d.ts +2 -0
  222. package/dist/dev/media/soundcloud-audio/adapter.d.ts +11 -0
  223. package/dist/dev/media/soundcloud-audio/adapter.js +53 -0
  224. package/dist/dev/media/soundcloud-audio/adapter.js.map +1 -0
  225. package/dist/dev/media/soundcloud-audio/index.d.ts +2 -0
  226. package/dist/dev/player/element.js +1 -5
  227. package/dist/dev/player/element.js.map +1 -1
  228. package/dist/dev/presets/background/skin.d.ts +2 -1
  229. package/dist/dev/presets/background/skin.js +2 -2
  230. package/dist/dev/presets/background/skin.js.map +1 -1
  231. package/dist/dev/presets/skin.d.ts +4 -3
  232. package/dist/dev/presets/skin.js +4 -3
  233. package/dist/dev/presets/skin.js.map +1 -1
  234. package/dist/dev/ui/captions-button/element.d.ts +2 -0
  235. package/dist/dev/ui/captions-radio-group/element.d.ts +2 -1
  236. package/dist/dev/ui/captions-radio-group/element.js +14 -1
  237. package/dist/dev/ui/captions-radio-group/element.js.map +1 -1
  238. package/dist/dev/ui/controls/element.d.ts +2 -2
  239. package/dist/dev/ui/controls/element.js +6 -3
  240. package/dist/dev/ui/controls/element.js.map +1 -1
  241. package/dist/dev/ui/dialog/element.js +13 -1
  242. package/dist/dev/ui/dialog/element.js.map +1 -1
  243. package/dist/dev/ui/gesture/element.js +3 -0
  244. package/dist/dev/ui/gesture/element.js.map +1 -1
  245. package/dist/dev/ui/media-button-element.d.ts +9 -0
  246. package/dist/dev/ui/media-button-element.js +10 -1
  247. package/dist/dev/ui/media-button-element.js.map +1 -1
  248. package/dist/dev/ui/play-button/element.d.ts +2 -0
  249. package/dist/dev/ui/playback-rate-button/element.d.ts +9 -1
  250. package/dist/dev/ui/playback-rate-button/element.js +7 -2
  251. package/dist/dev/ui/playback-rate-button/element.js.map +1 -1
  252. package/dist/dev/ui/playback-rate-radio-group/element.d.ts +4 -0
  253. package/dist/dev/ui/playback-rate-radio-group/element.js +10 -3
  254. package/dist/dev/ui/playback-rate-radio-group/element.js.map +1 -1
  255. package/dist/dev/ui/radio-options/controller.js +18 -5
  256. package/dist/dev/ui/radio-options/controller.js.map +1 -1
  257. package/dist/dev/ui/time-slider/markers.d.ts +48 -0
  258. package/dist/dev/ui/time-slider/markers.js +165 -0
  259. package/dist/dev/ui/time-slider/markers.js.map +1 -0
  260. package/dist/dev/version.js +1 -1
  261. package/docs/README.md +1 -1
  262. package/docs/guides/autoplay.md +2 -2
  263. package/docs/guides/background-video.md +2 -4
  264. package/docs/guides/browser-support.md +23 -15
  265. package/docs/guides/build-your-own-skin.md +3 -1
  266. package/docs/guides/cdn.md +10 -9
  267. package/docs/guides/content-security-policy.md +3 -0
  268. package/docs/guides/customize-skins.md +7 -2
  269. package/docs/guides/features.md +1 -1
  270. package/docs/guides/google-analytics.md +199 -0
  271. package/docs/guides/installation-cdn.md +4 -4
  272. package/docs/guides/installation-shadcn.md +3 -3
  273. package/docs/guides/installation-svelte.md +4 -4
  274. package/docs/guides/installation-vue.md +4 -4
  275. package/docs/guides/installation.md +4 -4
  276. package/docs/guides/internationalization.md +5 -5
  277. package/docs/guides/keyboard-shortcuts.md +11 -1
  278. package/docs/guides/llms.txt +3 -1
  279. package/docs/guides/media-sources.md +3 -0
  280. package/docs/guides/migrate-from-media-chrome.md +4 -4
  281. package/docs/guides/migrate-from-mux-player.md +9 -9
  282. package/docs/guides/migrate-from-plyr.md +8 -8
  283. package/docs/guides/migrate-from-video-js-8.md +8 -9
  284. package/docs/guides/migrate-from-vidstack.md +10 -10
  285. package/docs/guides/mux-data.md +22 -0
  286. package/docs/guides/presets.md +5 -5
  287. package/docs/guides/self-hosting.md +5 -5
  288. package/docs/guides/skins.md +21 -5
  289. package/docs/guides/timed-metadata.md +318 -0
  290. package/docs/guides/ui-components.md +1 -1
  291. package/docs/llms.txt +25 -6
  292. package/docs/reference/api/chapters-track.md +71 -0
  293. package/docs/reference/api/define-text-track.md +113 -0
  294. package/docs/reference/api/feature-playback-rate.md +54 -3
  295. package/docs/reference/api/feature-playback.md +5 -1
  296. package/docs/reference/api/feature-text-cues.md +133 -0
  297. package/docs/reference/api/feature-text-tracks.md +11 -5
  298. package/docs/reference/api/get-active-text-cues.md +69 -0
  299. package/docs/reference/api/get-text-cues.md +69 -0
  300. package/docs/reference/api/get-text-tracks.md +41 -0
  301. package/docs/reference/api/hls-metadata-track.md +48 -0
  302. package/docs/reference/api/html-create-player.md +2 -2
  303. package/docs/reference/api/llms.txt +13 -1
  304. package/docs/reference/api/media-capabilities.md +4 -4
  305. package/docs/reference/api/player-store.md +15 -7
  306. package/docs/reference/api/preset-audio.md +15 -5
  307. package/docs/reference/api/preset-background.md +2 -2
  308. package/docs/reference/api/preset-live-audio.md +15 -5
  309. package/docs/reference/api/preset-live-video.md +14 -5
  310. package/docs/reference/api/preset-video.md +14 -5
  311. package/docs/reference/api/resolve-adapter-type.md +4 -1
  312. package/docs/reference/api/ui-element.md +2 -2
  313. package/docs/reference/components/alert-dialog.md +21 -16
  314. package/docs/reference/components/audio-compat-skin.md +8 -2
  315. package/docs/reference/components/audio-neutral-skin.md +2 -2
  316. package/docs/reference/components/audio-scaffold-skin.md +2 -2
  317. package/docs/reference/components/audio-skin.md +2 -2
  318. package/docs/reference/components/audio-track-radio-group.md +2 -2
  319. package/docs/reference/components/audio.md +19 -1
  320. package/docs/reference/components/background-video-skin.md +1 -1
  321. package/docs/reference/components/background-video.md +26 -11
  322. package/docs/reference/components/buffering-indicator.md +2 -2
  323. package/docs/reference/components/captions-radio-group.md +3 -3
  324. package/docs/reference/components/cloudflare-video.md +1 -1
  325. package/docs/reference/components/controls.md +16 -3
  326. package/docs/reference/components/dailymotion-video.md +192 -0
  327. package/docs/reference/components/dash-video.md +20 -2
  328. package/docs/reference/components/dialog.md +49 -22
  329. package/docs/reference/components/error-dialog.md +13 -10
  330. package/docs/reference/components/gesture.md +2 -2
  331. package/docs/reference/components/google-analytics.md +51 -0
  332. package/docs/reference/components/google-cast.md +1 -1
  333. package/docs/reference/components/hls-audio.md +56 -2
  334. package/docs/reference/components/hls-background-video.md +25 -5
  335. package/docs/reference/components/hls-video.md +99 -7
  336. package/docs/reference/components/hlsjs-video.md +53 -12
  337. package/docs/reference/components/hotkey.md +2 -2
  338. package/docs/reference/components/live-audio-compat-skin.md +8 -2
  339. package/docs/reference/components/live-audio-neutral-skin.md +2 -2
  340. package/docs/reference/components/live-audio-scaffold-skin.md +2 -2
  341. package/docs/reference/components/live-audio-skin.md +2 -2
  342. package/docs/reference/components/live-video-compat-skin.md +12 -2
  343. package/docs/reference/components/live-video-neutral-skin.md +6 -2
  344. package/docs/reference/components/live-video-scaffold-skin.md +6 -2
  345. package/docs/reference/components/live-video-skin.md +6 -2
  346. package/docs/reference/components/llms.txt +10 -5
  347. package/docs/reference/components/mixcloud-audio.md +203 -0
  348. package/docs/reference/components/mux-audio.md +35 -2
  349. package/docs/reference/components/mux-background-video.md +1 -1
  350. package/docs/reference/components/mux-data.md +20 -2
  351. package/docs/reference/components/mux-video.md +18 -2
  352. package/docs/reference/components/native-hls-video.md +32 -2
  353. package/docs/reference/components/play-button.md +7 -5
  354. package/docs/reference/components/playback-rate-button.md +26 -7
  355. package/docs/reference/components/playback-rate-radio-group.md +7 -4
  356. package/docs/reference/components/player.md +3 -3
  357. package/docs/reference/components/playerjs-video.md +2 -2
  358. package/docs/reference/components/quality-radio-group.md +2 -2
  359. package/docs/reference/components/shaka-video.md +2 -2
  360. package/docs/reference/components/soundcloud-audio.md +227 -0
  361. package/docs/reference/components/spotify-audio.md +3 -3
  362. package/docs/reference/components/tiktok-video.md +3 -3
  363. package/docs/reference/components/time-slider-markers.md +194 -0
  364. package/docs/reference/components/time-slider.md +14 -0
  365. package/docs/reference/components/twitch-video.md +2 -3
  366. package/docs/reference/components/video-compat-skin.md +12 -2
  367. package/docs/reference/components/video-neutral-skin.md +6 -2
  368. package/docs/reference/components/video-scaffold-skin.md +6 -2
  369. package/docs/reference/components/video-skin.md +6 -2
  370. package/docs/reference/components/video.md +19 -1
  371. package/docs/reference/components/vimeo-video.md +1 -1
  372. package/docs/reference/components/wistia-video.md +1 -1
  373. package/docs/reference/components/youtube-video.md +1 -1
  374. package/package.json +60 -40
@@ -1 +1 @@
1
- {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n createTemplate(/* html */ `<media-container class=\"media-skin media-container media-video\" data-theme=\"compat\" data-preset=\"video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"compat\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-71RVFabZ-0-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-71RVFabZ-0-2-trigger\">\n<media-icon family=\"compat\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-71RVFabZ-0-3-trigger\">\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-71RVFabZ-0-4-trigger\">\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-controls-group class=\"video-controls-center\">\n<media-seek-button seconds=\"-10\" class=\"media-button video-controls-center-button video-controls-center-seek\" id=\"vjs-71RVFabZ-0-5-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"compat\" name=\"seek\" class=\"media-button-icon media-seek-button-backward-icon video-controls-center-seek-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-backward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-71RVFabZ-0-6-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-6-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-seek-button seconds=\"10\" class=\"media-button video-controls-center-button video-controls-center-seek\" id=\"vjs-71RVFabZ-0-7-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"compat\" name=\"seek\" class=\"media-button-icon video-controls-center-seek-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-forward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-7-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<div class=\"video-controls-bottom video-controls-video-bottom\">\n<div class=\"video-controls-slider-row\">\n<media-time-slider class=\"media-time-slider\" thumb-alignment=\"edge\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-time-slider-track\">\n<media-slider-buffer class=\"media-time-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-time-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-time-slider-preview\">\n<media-slider-thumbnail class=\"media-slider-thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</media-slider-thumbnail>\n<div class=\"media-time-slider-preview-meta\">\n<div class=\"media-time-slider-preview-label\">\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n</div>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</div>\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-71RVFabZ-0-8-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-TMNcKA4q-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-71RVFabZ-0-9-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-9-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-TMNcKA4q-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle\" type=\"current\" toggle>\n</media-time>\n<media-time class=\"media-time-current-value\" type=\"current\">\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button class=\"media-button media-captions-button\" id=\"vjs-71RVFabZ-0-10-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-10-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-V6zIdvRf-h-popup\" class=\"media-button media-settings-button\" id=\"vjs-71RVFabZ-0-11-trigger\">\n<media-icon family=\"compat\" name=\"gear\" class=\"media-button-icon media-settings-button-icon\">\n</media-icon>\n<media-text class=\"media-settings-button-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-11-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-safe-area media-menu-popup media-menu-resizable-popup\" id=\"vjs-V6zIdvRf-h-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-V6zIdvRf-1-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"switches\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-1-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-5-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"speech\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-5-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-9-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"speed\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-9-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-d-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-d-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-buffering-indicator>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\"&gt;\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"&lt;\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-volume-indicator-icon media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n<media-seek-indicator class=\"media-indicator media-seek-indicator\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAqcT"}
1
+ {"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/compat-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n createTemplate(/* html */ `<media-container class=\"media-skin media-container media-video\" data-theme=\"compat\" data-preset=\"video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"compat\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-71RVFabZ-0-trigger\">\n<media-icon family=\"compat\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-71RVFabZ-0-2-trigger\">\n<media-icon family=\"compat\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-71RVFabZ-0-3-trigger\">\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-71RVFabZ-0-4-trigger\">\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-controls-group class=\"video-controls-center\">\n<media-seek-button seconds=\"-10\" class=\"media-button video-controls-center-button video-controls-center-seek\" id=\"vjs-71RVFabZ-0-5-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"compat\" name=\"seek\" class=\"media-button-icon media-seek-button-backward-icon video-controls-center-seek-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-backward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-71RVFabZ-0-6-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-6-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-seek-button seconds=\"10\" class=\"media-button video-controls-center-button video-controls-center-seek\" id=\"vjs-71RVFabZ-0-7-trigger\">\n<div class=\"media-seek-button-content\">\n<media-icon family=\"compat\" name=\"seek\" class=\"media-button-icon video-controls-center-seek-icon\">\n</media-icon>\n<span class=\"media-seek-button-label media-seek-button-forward-label\">10</span>\n</div>\n</media-seek-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-7-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<div class=\"video-controls-bottom video-controls-video-bottom\">\n<div class=\"video-controls-slider-row\">\n<media-time-slider class=\"media-time-slider\" thumb-alignment=\"edge\">\n<media-time-slider-chapters class=\"media-time-slider-chapters\">\n<template>\n<div class=\"media-time-slider-chapter\">\n<media-slider-track class=\"media-time-slider-track\">\n<media-slider-buffer class=\"media-time-slider-buffer\">\n</media-slider-buffer>\n<media-slider-fill class=\"media-time-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n</div>\n</template>\n</media-time-slider-chapters>\n<media-slider-thumb class=\"media-time-slider-thumb\">\n</media-slider-thumb>\n<media-slider-preview class=\"media-time-slider-preview\">\n<media-slider-thumbnail class=\"media-slider-thumbnail\">\n<img alt=\"\" aria-hidden=\"true\" decoding=\"async\" class=\"media-slider-thumbnail-image\">\n</media-slider-thumbnail>\n<div class=\"media-time-slider-preview-meta\">\n<div class=\"media-time-slider-preview-label\">\n<media-slider-value class=\"media-time-slider-value\" type=\"pointer\">\n</media-slider-value>\n<media-time-slider-chapter-title class=\"media-time-slider-chapter-title\">\n</media-time-slider-chapter-title>\n</div>\n</div>\n</media-slider-preview>\n</media-time-slider>\n</div>\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-71RVFabZ-0-8-trigger\">\n<media-icon family=\"compat\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-mute-button commandfor=\"vjs-TMNcKA4q-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-71RVFabZ-0-9-trigger\">\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-9-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup\" id=\"vjs-TMNcKA4q-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n<media-time-group class=\"media-time-group\">\n<media-time class=\"media-time-toggle\" type=\"current\" toggle>\n</media-time>\n<media-time class=\"media-time-current-value\" type=\"current\">\n</media-time>\n<media-time-separator class=\"media-time-separator\">\n</media-time-separator>\n<media-time class=\"media-time-duration-value\" type=\"duration\">\n</media-time>\n</media-time-group>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button class=\"media-button media-captions-button\" id=\"vjs-71RVFabZ-0-10-trigger\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-10-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<button commandfor=\"vjs-V6zIdvRf-h-popup\" class=\"media-button media-settings-button\" id=\"vjs-71RVFabZ-0-11-trigger\">\n<media-icon family=\"compat\" name=\"gear\" class=\"media-button-icon media-settings-button-icon\">\n</media-icon>\n<media-text class=\"media-settings-button-label\" token=\"menu.settings\">Settings</media-text>\n</button>\n<media-tooltip trigger=\"vjs-71RVFabZ-0-11-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-tooltip-popup\">\n<media-text token=\"menu.settings\">Settings</media-text>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-safe-area media-menu-popup media-menu-resizable-popup\" id=\"vjs-V6zIdvRf-h-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-menu-item commandfor=\"vjs-V6zIdvRf-1-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"switches\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-1-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.quality\">Quality</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-quality-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span>\n<span data-part=\"label\">\n</span>\n<sup data-part=\"tier\" class=\"media-menu-tier\">\n</sup>\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-quality-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-5-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"speech\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-5-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.audio\">Audio</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-audio-track-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-audio-track-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-9-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"speed\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-9-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.speed\">Speed</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-playback-rate-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-playback-rate-radio-group>\n</media-menu-content>\n<media-menu-item commandfor=\"vjs-V6zIdvRf-d-content\" class=\"media-menu-item\">\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-menu-trigger-icon\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n<span class=\"media-menu-hint\">\n<span data-part=\"value\" class=\"media-menu-hint-label\">\n</span>\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-forward-chevron\">\n</media-icon>\n</span>\n</media-menu-item>\n<media-menu-content class=\"media-menu-content\" id=\"vjs-V6zIdvRf-d-content\">\n<media-menu-item class=\"media-menu-back-item\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-menu-back-chevron\">\n</media-icon>\n<media-text token=\"menu.captions\">Captions</media-text>\n</media-menu-item>\n<media-menu-separator class=\"media-menu-separator\">\n</media-menu-separator>\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"compat\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-buffering-indicator>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowRight\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowLeft\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"l\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"j\" action=\"seekStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"0-9\" action=\"seekToPercent\">\n</media-hotkey>\n<media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\">\n</media-hotkey>\n<media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\">\n</media-hotkey>\n<media-hotkey keys=\"&gt;\" action=\"speedUp\">\n</media-hotkey>\n<media-hotkey keys=\"&lt;\" action=\"speedDown\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"left\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"seekStep\" region=\"right\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"compat\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"volume-off\" class=\"media-volume-indicator-icon media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<media-icon family=\"compat\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"compat\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n<media-seek-indicator class=\"media-indicator media-seek-indicator\">\n<media-icon family=\"compat\" name=\"chevron\" class=\"media-seek-indicator-icon\">\n</media-icon>\n<media-seek-indicator-value class=\"media-seek-indicator-value\">\n</media-seek-indicator-value>\n</media-seek-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAucT"}
@@ -147,9 +147,9 @@
147
147
  object-position: var(--media-object-position, center);
148
148
  width: 100%;
149
149
  max-width: 100%;
150
- height: 100%;
151
150
  margin: 0;
152
151
  display: block;
152
+ height: 100% !important;
153
153
  }
154
154
 
155
155
  :where(.media-skin[data-theme="default"]) .media-button {
@@ -798,6 +798,7 @@
798
798
  }
799
799
 
800
800
  :where(.media-skin[data-theme="default"]) .media-play-button-play-icon {
801
+ translate: 1px;
801
802
  scale: var(--media-hidden-icon-scale) var(--media-hidden-icon-scale);
802
803
  opacity: 0;
803
804
  }
@@ -881,9 +882,19 @@
881
882
  font-variant-numeric: tabular-nums;
882
883
  }
883
884
 
885
+ @supports not (text-fit: shrink) {
886
+ :where(.media-skin[data-theme="default"]) .media-playback-rate-button {
887
+ font-size: min(1em, calc(4em / (var(--media-playback-rate-length, 3) + 1)));
888
+ }
889
+ }
890
+
884
891
  :where(.media-skin[data-theme="default"]) .media-playback-rate-button:after {
892
+ text-align: center;
893
+ white-space: nowrap;
885
894
  content: attr(data-rate) "×";
886
- width: 4ch;
895
+ text-fit: shrink;
896
+ width: 80%;
897
+ min-width: 0;
887
898
  }
888
899
 
889
900
  :where(.media-skin[data-theme="default"]) .media-menu-item-indicator {
@@ -933,6 +944,10 @@
933
944
  opacity: .5;
934
945
  }
935
946
 
947
+ :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-custom] {
948
+ font-style: italic;
949
+ }
950
+
936
951
  :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unsupported"] {
937
952
  display: none;
938
953
  }
@@ -1031,7 +1046,6 @@
1031
1046
  }
1032
1047
 
1033
1048
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-content {
1034
- max-height: inherit;
1035
1049
  overscroll-behavior: none;
1036
1050
  transition-property: translate, filter;
1037
1051
  transition-duration: .15s;
@@ -1053,6 +1067,8 @@
1053
1067
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-content:not([data-submenu]) {
1054
1068
  inset-inline: var(--media-spacing);
1055
1069
  top: var(--media-spacing);
1070
+ max-height: calc(min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56)) -
1071
+ (calc(var(--media-spacing) * 2)));
1056
1072
  gap: calc(var(--media-spacing) * .5);
1057
1073
  flex-direction: column;
1058
1074
  display: flex;
@@ -1147,7 +1163,6 @@
1147
1163
  }
1148
1164
 
1149
1165
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-radio-group {
1150
- max-height: inherit;
1151
1166
  gap: calc(var(--media-spacing) * .5);
1152
1167
  anchor-scope: --media-menu-item-highlight-anchor;
1153
1168
  flex-direction: column;
@@ -1468,39 +1483,39 @@
1468
1483
 
1469
1484
  @layer base.theme {
1470
1485
  .media-skin {
1471
- --media-background: oklch(0% 0 0);
1472
- --media-foreground: oklch(100% 0 0);
1473
- --media-controls: oklch(0% 0 0 / .35);
1486
+ --media-background: #000;
1487
+ --media-foreground: #fff;
1488
+ --media-controls: #00000059;
1474
1489
  --media-controls-foreground: var(--media-foreground);
1475
- --media-popover: oklch(100% 0 0 / .1);
1490
+ --media-popover: #ffffff1a;
1476
1491
  --media-popover-foreground: var(--media-foreground);
1477
1492
  --media-primary: var(--media-accent-color, var(--media-default-accent-color));
1478
1493
  --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
1479
- --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
1494
+ --media-accent: var(--media-accent-color, #ffffff1a);
1480
1495
  --media-accent-foreground: var(--media-accent-text-color, currentColor);
1481
- --media-muted: oklch(100% 0 0 / .15);
1482
- --media-muted-foreground: oklch(100% 0 0 / .65);
1483
- --media-border: oklch(0% 0 0 / .1);
1484
- --media-ring: oklch(100% 0 0);
1485
- --media-backdrop: oklch(0% 0 0);
1486
- --media-live-color: oklch(65% .22 27);
1487
- --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
1496
+ --media-muted: #ffffff26;
1497
+ --media-muted-foreground: #ffffffa6;
1498
+ --media-border: #0000001a;
1499
+ --media-ring: #fff;
1500
+ --media-backdrop: #000;
1501
+ --media-live-color: #f9423d;
1502
+ --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
1488
1503
  --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
1489
1504
  --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
1490
1505
  --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
1491
- --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
1506
+ --media-shadow-separator: 0 1px 0 0 #ffffff13;
1492
1507
  --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
1493
- --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
1508
+ --media-shadow-subtle-current-color: transparent;
1494
1509
  --media-text-shadow-dialog: 0 1px 0 #00000040;
1495
- --media-backdrop-filter-surface: blur(16px) saturate(110%);
1510
+ --media-backdrop-filter-surface: blur(16px) saturate(125%);
1496
1511
  --media-backdrop-filter-indicator: blur(8px);
1497
- --media-backdrop-filter-dialog: blur(16px) saturate(110%);
1512
+ --media-backdrop-filter-dialog: blur(16px) saturate(125%);
1498
1513
  --media-control-corner-shape: round;
1499
1514
  --media-control-radius: 99px;
1500
1515
  --media-control-size: calc(var(--media-spacing) * 9);
1501
1516
  --media-controls-radius: var(--media-control-radius);
1502
- --media-default-accent-color: oklch(100% 0 0);
1503
- --media-default-accent-text-color: oklch(0% 0 0);
1517
+ --media-default-accent-color: #fff;
1518
+ --media-default-accent-text-color: #000;
1504
1519
  --media-duration-instant: 50ms;
1505
1520
  --media-duration-fast: .1s;
1506
1521
  --media-duration: .15s;
@@ -1537,16 +1552,31 @@
1537
1552
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
1538
1553
  --media-video-border-radius: var(--media-border-radius, 28px);
1539
1554
  --media-scale: 1;
1540
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
1555
+ --media-scrollbar-thumb-color: #80808080;
1541
1556
  --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
1542
1557
  scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
1543
1558
  scrollbar-width: thin;
1544
1559
  }
1545
1560
 
1561
+ @supports (color: color-mix(in oklab, red, red)) {
1562
+ .media-skin {
1563
+ --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
1564
+ --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
1565
+ --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
1566
+ --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
1567
+ }
1568
+ }
1569
+
1570
+ @supports (color: oklch(0 0 0)) {
1571
+ .media-skin {
1572
+ --media-live-color: oklch(65% .22 27);
1573
+ }
1574
+ }
1575
+
1546
1576
  @supports (color: contrast-color(red)) {
1547
1577
  .media-skin {
1548
1578
  --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
1549
- --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
1579
+ --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
1550
1580
  }
1551
1581
  }
1552
1582
 
@@ -1593,19 +1623,20 @@
1593
1623
 
1594
1624
  @layer base.preset {
1595
1625
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1596
- --media-background: oklch(100% 0 0);
1597
- --media-foreground: oklch(0% 0 0);
1598
- --media-controls: oklch(100% 0 0 / .5);
1626
+ --media-background: #fff;
1627
+ --media-foreground: #000;
1628
+ --media-controls: #ffffff80;
1599
1629
  --media-controls-foreground: var(--media-foreground);
1600
1630
  --media-popover: var(--media-controls);
1601
1631
  --media-popover-foreground: var(--media-foreground);
1602
- --media-surface-border: oklch(0% 0 0 / .05);
1632
+ --media-muted: #0000001a;
1633
+ --media-surface-border: #0000000d;
1603
1634
  --media-primary: var(--media-accent-color, var(--media-foreground));
1604
- --media-border: oklch(0% 0 0 / .1);
1635
+ --media-border: #0000001a;
1605
1636
  --media-ring: var(--media-foreground);
1606
- --media-default-accent-color: oklch(0% 0 0);
1607
- --media-default-accent-text-color: oklch(100% 0 0);
1608
- --media-internal-accent-text-fallback: oklch(100% 0 0);
1637
+ --media-default-accent-color: #000;
1638
+ --media-default-accent-text-color: #fff;
1639
+ --media-internal-accent-text-fallback: #fff;
1609
1640
  --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
1610
1641
  --media-popover-side-offset: calc(var(--media-spacing) * 3);
1611
1642
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1617,6 +1648,7 @@
1617
1648
  --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1618
1649
  --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
1619
1650
  --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
1651
+ --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
1620
1652
  --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1621
1653
  --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1622
1654
  --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -1633,7 +1665,7 @@
1633
1665
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1634
1666
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1635
1667
  --media-controls: var(--media-background);
1636
- --media-surface-border: oklch(0% 0 0 / .05);
1668
+ --media-surface-border: #0000000d;
1637
1669
  }
1638
1670
 
1639
1671
  @supports (color: light-dark(red, red)) {
@@ -1691,7 +1723,7 @@
1691
1723
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1692
1724
  .media-skin {
1693
1725
  --media-popover: var(--media-background);
1694
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1726
+ --media-scrollbar-thumb-color: currentColor;
1695
1727
  --media-backdrop-filter-surface: none;
1696
1728
  --media-backdrop-filter-indicator: none;
1697
1729
  --media-backdrop-filter-dialog: none;
@@ -1699,6 +1731,12 @@
1699
1731
  scrollbar-width: auto;
1700
1732
  }
1701
1733
 
1734
+ @supports (color: color-mix(in oklab, red, red)) {
1735
+ .media-skin {
1736
+ --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1737
+ }
1738
+ }
1739
+
1702
1740
  @supports (color: oklch(from currentColor l c h)) {
1703
1741
  .media-skin {
1704
1742
  --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -147,9 +147,9 @@
147
147
  object-position: var(--media-object-position, center);
148
148
  width: 100%;
149
149
  max-width: 100%;
150
- height: 100%;
151
150
  margin: 0;
152
151
  display: block;
152
+ height: 100% !important;
153
153
  }
154
154
 
155
155
  :where(.media-skin[data-theme="default"]) .media-button {
@@ -811,6 +811,7 @@
811
811
  }
812
812
 
813
813
  :where(.media-skin[data-theme="default"]) .media-play-button-play-icon {
814
+ translate: 1px;
814
815
  scale: var(--media-hidden-icon-scale) var(--media-hidden-icon-scale);
815
816
  opacity: 0;
816
817
  }
@@ -966,39 +967,39 @@
966
967
 
967
968
  @layer base.theme {
968
969
  .media-skin {
969
- --media-background: oklch(0% 0 0);
970
- --media-foreground: oklch(100% 0 0);
971
- --media-controls: oklch(0% 0 0 / .35);
970
+ --media-background: #000;
971
+ --media-foreground: #fff;
972
+ --media-controls: #00000059;
972
973
  --media-controls-foreground: var(--media-foreground);
973
- --media-popover: oklch(100% 0 0 / .1);
974
+ --media-popover: #ffffff1a;
974
975
  --media-popover-foreground: var(--media-foreground);
975
976
  --media-primary: var(--media-accent-color, var(--media-default-accent-color));
976
977
  --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
977
- --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
978
+ --media-accent: var(--media-accent-color, #ffffff1a);
978
979
  --media-accent-foreground: var(--media-accent-text-color, currentColor);
979
- --media-muted: oklch(100% 0 0 / .15);
980
- --media-muted-foreground: oklch(100% 0 0 / .65);
981
- --media-border: oklch(0% 0 0 / .1);
982
- --media-ring: oklch(100% 0 0);
983
- --media-backdrop: oklch(0% 0 0);
984
- --media-live-color: oklch(65% .22 27);
985
- --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
980
+ --media-muted: #ffffff26;
981
+ --media-muted-foreground: #ffffffa6;
982
+ --media-border: #0000001a;
983
+ --media-ring: #fff;
984
+ --media-backdrop: #000;
985
+ --media-live-color: #f9423d;
986
+ --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
986
987
  --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
987
988
  --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
988
989
  --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
989
- --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
990
+ --media-shadow-separator: 0 1px 0 0 #ffffff13;
990
991
  --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
991
- --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
992
+ --media-shadow-subtle-current-color: transparent;
992
993
  --media-text-shadow-dialog: 0 1px 0 #00000040;
993
- --media-backdrop-filter-surface: blur(16px) saturate(110%);
994
+ --media-backdrop-filter-surface: blur(16px) saturate(125%);
994
995
  --media-backdrop-filter-indicator: blur(8px);
995
- --media-backdrop-filter-dialog: blur(16px) saturate(110%);
996
+ --media-backdrop-filter-dialog: blur(16px) saturate(125%);
996
997
  --media-control-corner-shape: round;
997
998
  --media-control-radius: 99px;
998
999
  --media-control-size: calc(var(--media-spacing) * 9);
999
1000
  --media-controls-radius: var(--media-control-radius);
1000
- --media-default-accent-color: oklch(100% 0 0);
1001
- --media-default-accent-text-color: oklch(0% 0 0);
1001
+ --media-default-accent-color: #fff;
1002
+ --media-default-accent-text-color: #000;
1002
1003
  --media-duration-instant: 50ms;
1003
1004
  --media-duration-fast: .1s;
1004
1005
  --media-duration: .15s;
@@ -1035,16 +1036,31 @@
1035
1036
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
1036
1037
  --media-video-border-radius: var(--media-border-radius, 28px);
1037
1038
  --media-scale: 1;
1038
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
1039
+ --media-scrollbar-thumb-color: #80808080;
1039
1040
  --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
1040
1041
  scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
1041
1042
  scrollbar-width: thin;
1042
1043
  }
1043
1044
 
1045
+ @supports (color: color-mix(in oklab, red, red)) {
1046
+ .media-skin {
1047
+ --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
1048
+ --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
1049
+ --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
1050
+ --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
1051
+ }
1052
+ }
1053
+
1054
+ @supports (color: oklch(0 0 0)) {
1055
+ .media-skin {
1056
+ --media-live-color: oklch(65% .22 27);
1057
+ }
1058
+ }
1059
+
1044
1060
  @supports (color: contrast-color(red)) {
1045
1061
  .media-skin {
1046
1062
  --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
1047
- --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
1063
+ --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
1048
1064
  }
1049
1065
  }
1050
1066
 
@@ -1091,19 +1107,20 @@
1091
1107
 
1092
1108
  @layer base.preset {
1093
1109
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1094
- --media-background: oklch(100% 0 0);
1095
- --media-foreground: oklch(0% 0 0);
1096
- --media-controls: oklch(100% 0 0 / .5);
1110
+ --media-background: #fff;
1111
+ --media-foreground: #000;
1112
+ --media-controls: #ffffff80;
1097
1113
  --media-controls-foreground: var(--media-foreground);
1098
1114
  --media-popover: var(--media-controls);
1099
1115
  --media-popover-foreground: var(--media-foreground);
1100
- --media-surface-border: oklch(0% 0 0 / .05);
1116
+ --media-muted: #0000001a;
1117
+ --media-surface-border: #0000000d;
1101
1118
  --media-primary: var(--media-accent-color, var(--media-foreground));
1102
- --media-border: oklch(0% 0 0 / .1);
1119
+ --media-border: #0000001a;
1103
1120
  --media-ring: var(--media-foreground);
1104
- --media-default-accent-color: oklch(0% 0 0);
1105
- --media-default-accent-text-color: oklch(100% 0 0);
1106
- --media-internal-accent-text-fallback: oklch(100% 0 0);
1121
+ --media-default-accent-color: #000;
1122
+ --media-default-accent-text-color: #fff;
1123
+ --media-internal-accent-text-fallback: #fff;
1107
1124
  --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
1108
1125
  --media-popover-side-offset: calc(var(--media-spacing) * 3);
1109
1126
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1115,6 +1132,7 @@
1115
1132
  --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1116
1133
  --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
1117
1134
  --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
1135
+ --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
1118
1136
  --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1119
1137
  --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1120
1138
  --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -1131,7 +1149,7 @@
1131
1149
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1132
1150
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1133
1151
  --media-controls: var(--media-background);
1134
- --media-surface-border: oklch(0% 0 0 / .05);
1152
+ --media-surface-border: #0000000d;
1135
1153
  }
1136
1154
 
1137
1155
  @supports (color: light-dark(red, red)) {
@@ -1189,7 +1207,7 @@
1189
1207
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1190
1208
  .media-skin {
1191
1209
  --media-popover: var(--media-background);
1192
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1210
+ --media-scrollbar-thumb-color: currentColor;
1193
1211
  --media-backdrop-filter-surface: none;
1194
1212
  --media-backdrop-filter-indicator: none;
1195
1213
  --media-backdrop-filter-dialog: none;
@@ -1197,6 +1215,12 @@
1197
1215
  scrollbar-width: auto;
1198
1216
  }
1199
1217
 
1218
+ @supports (color: color-mix(in oklab, red, red)) {
1219
+ .media-skin {
1220
+ --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1221
+ }
1222
+ }
1223
+
1200
1224
  @supports (color: oklch(from currentColor l c h)) {
1201
1225
  .media-skin {
1202
1226
  --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -1 +1 @@
1
- {"version":3,"file":"register.js","names":[],"sources":["../../../../../src/internal/skins/default-live-video/register.ts"],"sourcesContent":["import '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/live-button';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n airPlayEnterIcon,\n airPlayExitIcon,\n captionsOffIcon,\n captionsOnIcon,\n castEnterIcon,\n castExitIcon,\n checkIcon,\n fullscreenEnterIcon,\n fullscreenExitIcon,\n pauseIcon,\n pipEnterIcon,\n pipExitIcon,\n playIcon,\n restartIcon,\n spinnerIcon,\n volumeHighIcon,\n volumeLowIcon,\n volumeOffIcon,\n} from '../../../icons';\n\nregisterIcons('default', {\n 'airplay-enter': airPlayEnterIcon,\n 'airplay-exit': airPlayExitIcon,\n 'captions-off': captionsOffIcon,\n 'captions-on': captionsOnIcon,\n 'cast-enter': castEnterIcon,\n 'cast-exit': castExitIcon,\n check: checkIcon,\n 'fullscreen-enter': fullscreenEnterIcon,\n 'fullscreen-exit': fullscreenExitIcon,\n pause: pauseIcon,\n 'pip-enter': pipEnterIcon,\n 'pip-exit': pipExitIcon,\n play: playIcon,\n restart: restartIcon,\n spinner: spinnerIcon,\n 'volume-high': volumeHighIcon,\n 'volume-low': volumeLowIcon,\n 'volume-off': volumeOffIcon,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,cAAc,WAAW;CACvB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,cAAc;CACd,aAAa;CACb,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,OAAO;CACP,aAAa;CACb,YAAY;CACZ,MAAM;CACN,SAAS;CACT,SAAS;CACT,eAAe;CACf,cAAc;CACd,cAAc;AAChB,CAAC"}
1
+ {"version":3,"file":"register.js","names":[],"sources":["../../../../../src/internal/skins/default-live-video/register.ts"],"sourcesContent":["import '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/live-button';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n airPlayEnterIcon,\n airPlayExitIcon,\n captionsOffIcon,\n captionsOnIcon,\n castEnterIcon,\n castExitIcon,\n checkIcon,\n fullscreenEnterIcon,\n fullscreenExitIcon,\n pauseIcon,\n pipEnterIcon,\n pipExitIcon,\n playIcon,\n restartIcon,\n spinnerIcon,\n volumeHighIcon,\n volumeLowIcon,\n volumeOffIcon,\n} from '../../../icons';\n\nregisterIcons('default', {\n 'airplay-enter': airPlayEnterIcon,\n 'airplay-exit': airPlayExitIcon,\n 'captions-off': captionsOffIcon,\n 'captions-on': captionsOnIcon,\n 'cast-enter': castEnterIcon,\n 'cast-exit': castExitIcon,\n check: checkIcon,\n 'fullscreen-enter': fullscreenEnterIcon,\n 'fullscreen-exit': fullscreenExitIcon,\n pause: pauseIcon,\n 'pip-enter': pipEnterIcon,\n 'pip-exit': pipExitIcon,\n play: playIcon,\n restart: restartIcon,\n spinner: spinnerIcon,\n 'volume-high': volumeHighIcon,\n 'volume-low': volumeLowIcon,\n 'volume-off': volumeOffIcon,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,cAAc,WAAW;CACvB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,cAAc;CACd,aAAa;CACb,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,OAAO;CACP,aAAa;CACb,YAAY;CACZ,MAAM;CACN,SAAS;CACT,SAAS;CACT,eAAe;CACf,cAAc;CACd,cAAc;AAChB,CAAC"}