@videojs/html 10.3.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 (272) hide show
  1. package/dist/default/define/audio/compat-skin.css +91 -38
  2. package/dist/default/define/audio/compat-skin2.js +1 -1
  3. package/dist/default/define/audio/neutral-skin.css +52 -31
  4. package/dist/default/define/audio/neutral-skin2.js +1 -1
  5. package/dist/default/define/audio/scaffold-skin.css +105 -40
  6. package/dist/default/define/audio/scaffold-skin2.js +1 -1
  7. package/dist/default/define/audio/skin.css +53 -31
  8. package/dist/default/define/audio/skin2.js +1 -1
  9. package/dist/default/define/live-audio/compat-skin.css +91 -38
  10. package/dist/default/define/live-audio/compat-skin2.js +1 -1
  11. package/dist/default/define/live-audio/neutral-skin.css +50 -29
  12. package/dist/default/define/live-audio/neutral-skin2.js +1 -1
  13. package/dist/default/define/live-audio/scaffold-skin.css +105 -40
  14. package/dist/default/define/live-audio/scaffold-skin2.js +1 -1
  15. package/dist/default/define/live-audio/skin.css +51 -29
  16. package/dist/default/define/live-audio/skin2.js +1 -1
  17. package/dist/default/define/live-video/compat-skin.css +142 -61
  18. package/dist/default/define/live-video/compat-skin2.js +1 -1
  19. package/dist/default/define/live-video/neutral-skin.css +241 -55
  20. package/dist/default/define/live-video/neutral-skin2.js +1 -1
  21. package/dist/default/define/live-video/scaffold-skin.css +159 -63
  22. package/dist/default/define/live-video/scaffold-skin2.js +1 -1
  23. package/dist/default/define/live-video/skin.css +245 -60
  24. package/dist/default/define/live-video/skin2.js +1 -1
  25. package/dist/default/define/ui/time-slider-markers.js +5 -0
  26. package/dist/default/define/video/compat-skin.css +150 -61
  27. package/dist/default/define/video/compat-skin2.js +1 -1
  28. package/dist/default/define/video/neutral-skin.css +322 -66
  29. package/dist/default/define/video/neutral-skin2.js +1 -1
  30. package/dist/default/define/video/scaffold-skin.css +168 -63
  31. package/dist/default/define/video/scaffold-skin2.js +1 -1
  32. package/dist/default/define/video/skin.css +348 -66
  33. package/dist/default/define/video/skin2.js +1 -1
  34. package/dist/default/index.js +3 -1
  35. package/dist/default/internal/skins/compat-audio/skin.css +91 -38
  36. package/dist/default/internal/skins/compat-live-audio/skin.css +91 -38
  37. package/dist/default/internal/skins/compat-live-video/skin.css +142 -61
  38. package/dist/default/internal/skins/compat-live-video/template.js +2 -0
  39. package/dist/default/internal/skins/compat-video/skin.css +150 -61
  40. package/dist/default/internal/skins/compat-video/template.js +2 -0
  41. package/dist/default/internal/skins/default-audio/skin.css +53 -31
  42. package/dist/default/internal/skins/default-live-audio/skin.css +51 -29
  43. package/dist/default/internal/skins/default-live-video/skin.css +245 -60
  44. package/dist/default/internal/skins/default-live-video/template.js +14 -0
  45. package/dist/default/internal/skins/default-video/register.js +3 -0
  46. package/dist/default/internal/skins/default-video/skin.css +348 -66
  47. package/dist/default/internal/skins/default-video/template.js +33 -5
  48. package/dist/default/internal/skins/neutral-audio/skin.css +52 -31
  49. package/dist/default/internal/skins/neutral-live-audio/skin.css +50 -29
  50. package/dist/default/internal/skins/neutral-live-video/skin.css +241 -55
  51. package/dist/default/internal/skins/neutral-live-video/template.js +14 -0
  52. package/dist/default/internal/skins/neutral-video/skin.css +322 -66
  53. package/dist/default/internal/skins/neutral-video/template.js +25 -11
  54. package/dist/default/internal/skins/scaffold-audio/skin.css +105 -40
  55. package/dist/default/internal/skins/scaffold-live-audio/skin.css +105 -40
  56. package/dist/default/internal/skins/scaffold-live-video/skin.css +159 -63
  57. package/dist/default/internal/skins/scaffold-live-video/template.js +2 -0
  58. package/dist/default/internal/skins/scaffold-video/skin.css +168 -63
  59. package/dist/default/internal/skins/scaffold-video/template.js +3 -1
  60. package/dist/default/media/background-video/adapter.js +13 -35
  61. package/dist/default/media/background-video/base.js +95 -0
  62. package/dist/default/media/background-video/template.js +13 -20
  63. package/dist/default/media/hls-background-video/adapter.js +16 -35
  64. package/dist/default/ui/captions-radio-group/element.js +14 -1
  65. package/dist/default/ui/controls/element.js +6 -3
  66. package/dist/default/ui/time-slider/markers.js +160 -0
  67. package/dist/default/version.js +1 -1
  68. package/dist/dev/define/audio/compat-skin.css +91 -38
  69. package/dist/dev/define/audio/compat-skin2.js +1 -1
  70. package/dist/dev/define/audio/compat-skin2.js.map +1 -1
  71. package/dist/dev/define/audio/neutral-skin.css +52 -31
  72. package/dist/dev/define/audio/neutral-skin2.js +1 -1
  73. package/dist/dev/define/audio/neutral-skin2.js.map +1 -1
  74. package/dist/dev/define/audio/scaffold-skin.css +105 -40
  75. package/dist/dev/define/audio/scaffold-skin2.js +1 -1
  76. package/dist/dev/define/audio/scaffold-skin2.js.map +1 -1
  77. package/dist/dev/define/audio/skin.css +53 -31
  78. package/dist/dev/define/audio/skin2.js +1 -1
  79. package/dist/dev/define/audio/skin2.js.map +1 -1
  80. package/dist/dev/define/live-audio/compat-skin.css +91 -38
  81. package/dist/dev/define/live-audio/compat-skin2.js +1 -1
  82. package/dist/dev/define/live-audio/compat-skin2.js.map +1 -1
  83. package/dist/dev/define/live-audio/neutral-skin.css +50 -29
  84. package/dist/dev/define/live-audio/neutral-skin2.js +1 -1
  85. package/dist/dev/define/live-audio/neutral-skin2.js.map +1 -1
  86. package/dist/dev/define/live-audio/scaffold-skin.css +105 -40
  87. package/dist/dev/define/live-audio/scaffold-skin2.js +1 -1
  88. package/dist/dev/define/live-audio/scaffold-skin2.js.map +1 -1
  89. package/dist/dev/define/live-audio/skin.css +51 -29
  90. package/dist/dev/define/live-audio/skin2.js +1 -1
  91. package/dist/dev/define/live-audio/skin2.js.map +1 -1
  92. package/dist/dev/define/live-video/compat-skin.css +142 -61
  93. package/dist/dev/define/live-video/compat-skin2.js +1 -1
  94. package/dist/dev/define/live-video/compat-skin2.js.map +1 -1
  95. package/dist/dev/define/live-video/neutral-skin.css +241 -55
  96. package/dist/dev/define/live-video/neutral-skin2.js +1 -1
  97. package/dist/dev/define/live-video/neutral-skin2.js.map +1 -1
  98. package/dist/dev/define/live-video/scaffold-skin.css +159 -63
  99. package/dist/dev/define/live-video/scaffold-skin2.js +1 -1
  100. package/dist/dev/define/live-video/scaffold-skin2.js.map +1 -1
  101. package/dist/dev/define/live-video/skin.css +245 -60
  102. package/dist/dev/define/live-video/skin2.js +1 -1
  103. package/dist/dev/define/live-video/skin2.js.map +1 -1
  104. package/dist/dev/define/ui/time-slider-markers.d.ts +8 -0
  105. package/dist/dev/define/ui/time-slider-markers.js +7 -0
  106. package/dist/dev/define/ui/time-slider-markers.js.map +1 -0
  107. package/dist/dev/define/video/compat-skin.css +150 -61
  108. package/dist/dev/define/video/compat-skin2.js +1 -1
  109. package/dist/dev/define/video/compat-skin2.js.map +1 -1
  110. package/dist/dev/define/video/neutral-skin.css +322 -66
  111. package/dist/dev/define/video/neutral-skin2.js +1 -1
  112. package/dist/dev/define/video/neutral-skin2.js.map +1 -1
  113. package/dist/dev/define/video/scaffold-skin.css +168 -63
  114. package/dist/dev/define/video/scaffold-skin2.js +1 -1
  115. package/dist/dev/define/video/scaffold-skin2.js.map +1 -1
  116. package/dist/dev/define/video/skin.css +348 -66
  117. package/dist/dev/define/video/skin2.js +1 -1
  118. package/dist/dev/define/video/skin2.js.map +1 -1
  119. package/dist/dev/index.d.ts +5 -4
  120. package/dist/dev/index.js +3 -1
  121. package/dist/dev/internal/skins/compat-audio/skin.css +91 -38
  122. package/dist/dev/internal/skins/compat-live-audio/skin.css +91 -38
  123. package/dist/dev/internal/skins/compat-live-video/skin.css +142 -61
  124. package/dist/dev/internal/skins/compat-live-video/template.js +2 -0
  125. package/dist/dev/internal/skins/compat-live-video/template.js.map +1 -1
  126. package/dist/dev/internal/skins/compat-video/skin.css +150 -61
  127. package/dist/dev/internal/skins/compat-video/template.js +2 -0
  128. package/dist/dev/internal/skins/compat-video/template.js.map +1 -1
  129. package/dist/dev/internal/skins/default-audio/skin.css +53 -31
  130. package/dist/dev/internal/skins/default-live-audio/skin.css +51 -29
  131. package/dist/dev/internal/skins/default-live-video/register.js.map +1 -1
  132. package/dist/dev/internal/skins/default-live-video/skin.css +245 -60
  133. package/dist/dev/internal/skins/default-live-video/template.js +14 -0
  134. package/dist/dev/internal/skins/default-live-video/template.js.map +1 -1
  135. package/dist/dev/internal/skins/default-video/register.d.ts +1 -0
  136. package/dist/dev/internal/skins/default-video/register.js +3 -0
  137. package/dist/dev/internal/skins/default-video/register.js.map +1 -1
  138. package/dist/dev/internal/skins/default-video/skin.css +348 -66
  139. package/dist/dev/internal/skins/default-video/template.js +33 -5
  140. package/dist/dev/internal/skins/default-video/template.js.map +1 -1
  141. package/dist/dev/internal/skins/neutral-audio/skin.css +52 -31
  142. package/dist/dev/internal/skins/neutral-live-audio/skin.css +50 -29
  143. package/dist/dev/internal/skins/neutral-live-video/register.js.map +1 -1
  144. package/dist/dev/internal/skins/neutral-live-video/skin.css +241 -55
  145. package/dist/dev/internal/skins/neutral-live-video/template.js +14 -0
  146. package/dist/dev/internal/skins/neutral-live-video/template.js.map +1 -1
  147. package/dist/dev/internal/skins/neutral-video/register.js.map +1 -1
  148. package/dist/dev/internal/skins/neutral-video/skin.css +322 -66
  149. package/dist/dev/internal/skins/neutral-video/template.js +25 -11
  150. package/dist/dev/internal/skins/neutral-video/template.js.map +1 -1
  151. package/dist/dev/internal/skins/scaffold-audio/skin.css +105 -40
  152. package/dist/dev/internal/skins/scaffold-live-audio/skin.css +105 -40
  153. package/dist/dev/internal/skins/scaffold-live-video/skin.css +159 -63
  154. package/dist/dev/internal/skins/scaffold-live-video/template.js +2 -0
  155. package/dist/dev/internal/skins/scaffold-live-video/template.js.map +1 -1
  156. package/dist/dev/internal/skins/scaffold-video/skin.css +168 -63
  157. package/dist/dev/internal/skins/scaffold-video/template.js +3 -1
  158. package/dist/dev/internal/skins/scaffold-video/template.js.map +1 -1
  159. package/dist/dev/media/background-video/adapter.d.ts +7 -13
  160. package/dist/dev/media/background-video/adapter.js +13 -35
  161. package/dist/dev/media/background-video/adapter.js.map +1 -1
  162. package/dist/dev/media/background-video/base.d.ts +44 -0
  163. package/dist/dev/media/background-video/base.js +97 -0
  164. package/dist/dev/media/background-video/base.js.map +1 -0
  165. package/dist/dev/media/background-video/template.d.ts +3 -0
  166. package/dist/dev/media/background-video/template.js +13 -20
  167. package/dist/dev/media/background-video/template.js.map +1 -1
  168. package/dist/dev/media/hls-background-video/adapter.d.ts +8 -18
  169. package/dist/dev/media/hls-background-video/adapter.js +16 -35
  170. package/dist/dev/media/hls-background-video/adapter.js.map +1 -1
  171. package/dist/dev/ui/captions-button/element.d.ts +2 -0
  172. package/dist/dev/ui/captions-radio-group/element.d.ts +2 -1
  173. package/dist/dev/ui/captions-radio-group/element.js +14 -1
  174. package/dist/dev/ui/captions-radio-group/element.js.map +1 -1
  175. package/dist/dev/ui/controls/element.d.ts +2 -2
  176. package/dist/dev/ui/controls/element.js +6 -3
  177. package/dist/dev/ui/controls/element.js.map +1 -1
  178. package/dist/dev/ui/time-slider/markers.d.ts +48 -0
  179. package/dist/dev/ui/time-slider/markers.js +165 -0
  180. package/dist/dev/ui/time-slider/markers.js.map +1 -0
  181. package/dist/dev/version.js +1 -1
  182. package/docs/README.md +1 -1
  183. package/docs/guides/autoplay.md +1 -1
  184. package/docs/guides/background-video.md +2 -4
  185. package/docs/guides/browser-support.md +22 -16
  186. package/docs/guides/cdn.md +9 -9
  187. package/docs/guides/customize-skins.md +3 -0
  188. package/docs/guides/installation-cdn.md +2 -2
  189. package/docs/guides/installation-shadcn.md +1 -1
  190. package/docs/guides/installation-svelte.md +2 -2
  191. package/docs/guides/installation-vue.md +2 -2
  192. package/docs/guides/installation.md +2 -2
  193. package/docs/guides/internationalization.md +5 -5
  194. package/docs/guides/keyboard-shortcuts.md +10 -0
  195. package/docs/guides/llms.txt +2 -1
  196. package/docs/guides/migrate-from-media-chrome.md +4 -4
  197. package/docs/guides/migrate-from-mux-player.md +6 -6
  198. package/docs/guides/migrate-from-plyr.md +7 -7
  199. package/docs/guides/migrate-from-video-js-8.md +6 -6
  200. package/docs/guides/migrate-from-vidstack.md +4 -4
  201. package/docs/guides/presets.md +4 -4
  202. package/docs/guides/self-hosting.md +5 -5
  203. package/docs/guides/skins.md +8 -7
  204. package/docs/guides/timed-metadata.md +318 -0
  205. package/docs/llms.txt +16 -2
  206. package/docs/reference/api/chapters-track.md +71 -0
  207. package/docs/reference/api/define-text-track.md +113 -0
  208. package/docs/reference/api/feature-text-cues.md +133 -0
  209. package/docs/reference/api/feature-text-tracks.md +11 -5
  210. package/docs/reference/api/get-active-text-cues.md +69 -0
  211. package/docs/reference/api/get-text-cues.md +69 -0
  212. package/docs/reference/api/get-text-tracks.md +41 -0
  213. package/docs/reference/api/hls-metadata-track.md +48 -0
  214. package/docs/reference/api/html-create-player.md +2 -2
  215. package/docs/reference/api/llms.txt +13 -1
  216. package/docs/reference/api/media-capabilities.md +4 -4
  217. package/docs/reference/api/player-store.md +9 -4
  218. package/docs/reference/api/preset-audio.md +3 -1
  219. package/docs/reference/api/preset-background.md +1 -1
  220. package/docs/reference/api/preset-live-audio.md +3 -1
  221. package/docs/reference/api/preset-live-video.md +2 -1
  222. package/docs/reference/api/preset-video.md +2 -1
  223. package/docs/reference/components/audio-compat-skin.md +1 -1
  224. package/docs/reference/components/audio-neutral-skin.md +1 -1
  225. package/docs/reference/components/audio-scaffold-skin.md +1 -1
  226. package/docs/reference/components/audio-skin.md +1 -1
  227. package/docs/reference/components/audio.md +19 -1
  228. package/docs/reference/components/background-video-skin.md +1 -1
  229. package/docs/reference/components/background-video.md +26 -11
  230. package/docs/reference/components/captions-radio-group.md +1 -1
  231. package/docs/reference/components/cloudflare-video.md +1 -1
  232. package/docs/reference/components/controls.md +16 -3
  233. package/docs/reference/components/dailymotion-video.md +2 -2
  234. package/docs/reference/components/dash-video.md +20 -3
  235. package/docs/reference/components/google-analytics.md +1 -1
  236. package/docs/reference/components/google-cast.md +1 -1
  237. package/docs/reference/components/hls-audio.md +56 -2
  238. package/docs/reference/components/hls-background-video.md +22 -5
  239. package/docs/reference/components/hls-video.md +99 -7
  240. package/docs/reference/components/hlsjs-video.md +52 -13
  241. package/docs/reference/components/live-audio-compat-skin.md +1 -1
  242. package/docs/reference/components/live-audio-neutral-skin.md +1 -1
  243. package/docs/reference/components/live-audio-scaffold-skin.md +1 -1
  244. package/docs/reference/components/live-audio-skin.md +1 -1
  245. package/docs/reference/components/live-video-compat-skin.md +5 -1
  246. package/docs/reference/components/live-video-neutral-skin.md +5 -1
  247. package/docs/reference/components/live-video-scaffold-skin.md +5 -1
  248. package/docs/reference/components/live-video-skin.md +5 -1
  249. package/docs/reference/components/llms.txt +2 -1
  250. package/docs/reference/components/mixcloud-audio.md +2 -2
  251. package/docs/reference/components/mux-audio.md +34 -3
  252. package/docs/reference/components/mux-background-video.md +1 -1
  253. package/docs/reference/components/mux-data.md +1 -1
  254. package/docs/reference/components/mux-video.md +17 -3
  255. package/docs/reference/components/native-hls-video.md +32 -3
  256. package/docs/reference/components/playerjs-video.md +2 -2
  257. package/docs/reference/components/shaka-video.md +2 -3
  258. package/docs/reference/components/soundcloud-audio.md +2 -2
  259. package/docs/reference/components/spotify-audio.md +2 -2
  260. package/docs/reference/components/tiktok-video.md +2 -2
  261. package/docs/reference/components/time-slider-markers.md +194 -0
  262. package/docs/reference/components/time-slider.md +14 -0
  263. package/docs/reference/components/twitch-video.md +1 -1
  264. package/docs/reference/components/video-compat-skin.md +5 -1
  265. package/docs/reference/components/video-neutral-skin.md +5 -1
  266. package/docs/reference/components/video-scaffold-skin.md +5 -1
  267. package/docs/reference/components/video-skin.md +5 -1
  268. package/docs/reference/components/video.md +19 -1
  269. package/docs/reference/components/vimeo-video.md +1 -2
  270. package/docs/reference/components/wistia-video.md +1 -1
  271. package/docs/reference/components/youtube-video.md +1 -2
  272. package/package.json +48 -48
@@ -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
  }
@@ -1045,7 +1046,6 @@
1045
1046
  }
1046
1047
 
1047
1048
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-content {
1048
- max-height: inherit;
1049
1049
  overscroll-behavior: none;
1050
1050
  transition-property: translate, filter;
1051
1051
  transition-duration: .15s;
@@ -1067,6 +1067,8 @@
1067
1067
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-content:not([data-submenu]) {
1068
1068
  inset-inline: var(--media-spacing);
1069
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)));
1070
1072
  gap: calc(var(--media-spacing) * .5);
1071
1073
  flex-direction: column;
1072
1074
  display: flex;
@@ -1161,7 +1163,6 @@
1161
1163
  }
1162
1164
 
1163
1165
  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-menu-radio-group {
1164
- max-height: inherit;
1165
1166
  gap: calc(var(--media-spacing) * .5);
1166
1167
  anchor-scope: --media-menu-item-highlight-anchor;
1167
1168
  flex-direction: column;
@@ -1482,29 +1483,29 @@
1482
1483
 
1483
1484
  @layer base.theme {
1484
1485
  .media-skin {
1485
- --media-background: oklch(0% 0 0);
1486
- --media-foreground: oklch(100% 0 0);
1487
- --media-controls: oklch(0% 0 0 / .35);
1486
+ --media-background: #000;
1487
+ --media-foreground: #fff;
1488
+ --media-controls: #00000059;
1488
1489
  --media-controls-foreground: var(--media-foreground);
1489
- --media-popover: oklch(100% 0 0 / .1);
1490
+ --media-popover: #ffffff1a;
1490
1491
  --media-popover-foreground: var(--media-foreground);
1491
1492
  --media-primary: var(--media-accent-color, var(--media-default-accent-color));
1492
1493
  --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
1493
- --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);
1494
1495
  --media-accent-foreground: var(--media-accent-text-color, currentColor);
1495
- --media-muted: oklch(100% 0 0 / .15);
1496
- --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
1497
- --media-border: oklch(0% 0 0 / .1);
1498
- --media-ring: oklch(100% 0 0);
1499
- --media-backdrop: oklch(0% 0 0);
1500
- --media-live-color: oklch(65% .22 27);
1501
- --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;
1502
1503
  --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
1503
1504
  --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
1504
1505
  --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
1505
- --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
1506
+ --media-shadow-separator: 0 1px 0 0 #ffffff13;
1506
1507
  --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
1507
- --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
1508
+ --media-shadow-subtle-current-color: transparent;
1508
1509
  --media-text-shadow-dialog: 0 1px 0 #00000040;
1509
1510
  --media-backdrop-filter-surface: blur(16px) saturate(125%);
1510
1511
  --media-backdrop-filter-indicator: blur(8px);
@@ -1513,8 +1514,8 @@
1513
1514
  --media-control-radius: 99px;
1514
1515
  --media-control-size: calc(var(--media-spacing) * 9);
1515
1516
  --media-controls-radius: var(--media-control-radius);
1516
- --media-default-accent-color: oklch(100% 0 0);
1517
- --media-default-accent-text-color: oklch(0% 0 0);
1517
+ --media-default-accent-color: #fff;
1518
+ --media-default-accent-text-color: #000;
1518
1519
  --media-duration-instant: 50ms;
1519
1520
  --media-duration-fast: .1s;
1520
1521
  --media-duration: .15s;
@@ -1551,16 +1552,31 @@
1551
1552
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
1552
1553
  --media-video-border-radius: var(--media-border-radius, 28px);
1553
1554
  --media-scale: 1;
1554
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
1555
+ --media-scrollbar-thumb-color: #80808080;
1555
1556
  --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
1556
1557
  scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
1557
1558
  scrollbar-width: thin;
1558
1559
  }
1559
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
+
1560
1576
  @supports (color: contrast-color(red)) {
1561
1577
  .media-skin {
1562
1578
  --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
1563
- --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))));
1564
1580
  }
1565
1581
  }
1566
1582
 
@@ -1607,20 +1623,20 @@
1607
1623
 
1608
1624
  @layer base.preset {
1609
1625
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1610
- --media-background: oklch(100% 0 0);
1611
- --media-foreground: oklch(0% 0 0);
1612
- --media-controls: oklch(100% 0 0 / .5);
1626
+ --media-background: #fff;
1627
+ --media-foreground: #000;
1628
+ --media-controls: #ffffff80;
1613
1629
  --media-controls-foreground: var(--media-foreground);
1614
1630
  --media-popover: var(--media-controls);
1615
1631
  --media-popover-foreground: var(--media-foreground);
1616
- --media-muted: oklch(0% 0 0 / .1);
1617
- --media-surface-border: oklch(0% 0 0 / .05);
1632
+ --media-muted: #0000001a;
1633
+ --media-surface-border: #0000000d;
1618
1634
  --media-primary: var(--media-accent-color, var(--media-foreground));
1619
- --media-border: oklch(0% 0 0 / .1);
1635
+ --media-border: #0000001a;
1620
1636
  --media-ring: var(--media-foreground);
1621
- --media-default-accent-color: oklch(0% 0 0);
1622
- --media-default-accent-text-color: oklch(100% 0 0);
1623
- --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;
1624
1640
  --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
1625
1641
  --media-popover-side-offset: calc(var(--media-spacing) * 3);
1626
1642
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1649,7 +1665,7 @@
1649
1665
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1650
1666
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1651
1667
  --media-controls: var(--media-background);
1652
- --media-surface-border: oklch(0% 0 0 / .05);
1668
+ --media-surface-border: #0000000d;
1653
1669
  }
1654
1670
 
1655
1671
  @supports (color: light-dark(red, red)) {
@@ -1707,7 +1723,7 @@
1707
1723
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1708
1724
  .media-skin {
1709
1725
  --media-popover: var(--media-background);
1710
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1726
+ --media-scrollbar-thumb-color: currentColor;
1711
1727
  --media-backdrop-filter-surface: none;
1712
1728
  --media-backdrop-filter-indicator: none;
1713
1729
  --media-backdrop-filter-dialog: none;
@@ -1715,6 +1731,12 @@
1715
1731
  scrollbar-width: auto;
1716
1732
  }
1717
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
+
1718
1740
  @supports (color: oklch(from currentColor l c h)) {
1719
1741
  .media-skin {
1720
1742
  --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);
@@ -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,29 +967,29 @@
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: color-mix(in oklab, var(--media-foreground) 65%, transparent);
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
994
  --media-backdrop-filter-surface: blur(16px) saturate(125%);
994
995
  --media-backdrop-filter-indicator: blur(8px);
@@ -997,8 +998,8 @@
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,20 +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-muted: oklch(0% 0 0 / .1);
1101
- --media-surface-border: oklch(0% 0 0 / .05);
1116
+ --media-muted: #0000001a;
1117
+ --media-surface-border: #0000000d;
1102
1118
  --media-primary: var(--media-accent-color, var(--media-foreground));
1103
- --media-border: oklch(0% 0 0 / .1);
1119
+ --media-border: #0000001a;
1104
1120
  --media-ring: var(--media-foreground);
1105
- --media-default-accent-color: oklch(0% 0 0);
1106
- --media-default-accent-text-color: oklch(100% 0 0);
1107
- --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;
1108
1124
  --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
1109
1125
  --media-popover-side-offset: calc(var(--media-spacing) * 3);
1110
1126
  --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1133,7 +1149,7 @@
1133
1149
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1134
1150
  .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
1135
1151
  --media-controls: var(--media-background);
1136
- --media-surface-border: oklch(0% 0 0 / .05);
1152
+ --media-surface-border: #0000000d;
1137
1153
  }
1138
1154
 
1139
1155
  @supports (color: light-dark(red, red)) {
@@ -1191,7 +1207,7 @@
1191
1207
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
1192
1208
  .media-skin {
1193
1209
  --media-popover: var(--media-background);
1194
- --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
1210
+ --media-scrollbar-thumb-color: currentColor;
1195
1211
  --media-backdrop-filter-surface: none;
1196
1212
  --media-backdrop-filter-indicator: none;
1197
1213
  --media-backdrop-filter-dialog: none;
@@ -1199,6 +1215,12 @@
1199
1215
  scrollbar-width: auto;
1200
1216
  }
1201
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
+
1202
1224
  @supports (color: oklch(from currentColor l c h)) {
1203
1225
  .media-skin {
1204
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"}