@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.
- package/dist/default/define/audio/compat-skin.css +91 -38
- package/dist/default/define/audio/compat-skin2.js +1 -1
- package/dist/default/define/audio/neutral-skin.css +52 -31
- package/dist/default/define/audio/neutral-skin2.js +1 -1
- package/dist/default/define/audio/scaffold-skin.css +105 -40
- package/dist/default/define/audio/scaffold-skin2.js +1 -1
- package/dist/default/define/audio/skin.css +53 -31
- package/dist/default/define/audio/skin2.js +1 -1
- package/dist/default/define/live-audio/compat-skin.css +91 -38
- package/dist/default/define/live-audio/compat-skin2.js +1 -1
- package/dist/default/define/live-audio/neutral-skin.css +50 -29
- package/dist/default/define/live-audio/neutral-skin2.js +1 -1
- package/dist/default/define/live-audio/scaffold-skin.css +105 -40
- package/dist/default/define/live-audio/scaffold-skin2.js +1 -1
- package/dist/default/define/live-audio/skin.css +51 -29
- package/dist/default/define/live-audio/skin2.js +1 -1
- package/dist/default/define/live-video/compat-skin.css +142 -61
- package/dist/default/define/live-video/compat-skin2.js +1 -1
- package/dist/default/define/live-video/neutral-skin.css +241 -55
- package/dist/default/define/live-video/neutral-skin2.js +1 -1
- package/dist/default/define/live-video/scaffold-skin.css +159 -63
- package/dist/default/define/live-video/scaffold-skin2.js +1 -1
- package/dist/default/define/live-video/skin.css +245 -60
- package/dist/default/define/live-video/skin2.js +1 -1
- package/dist/default/define/ui/time-slider-markers.js +5 -0
- package/dist/default/define/video/compat-skin.css +150 -61
- package/dist/default/define/video/compat-skin2.js +1 -1
- package/dist/default/define/video/neutral-skin.css +322 -66
- package/dist/default/define/video/neutral-skin2.js +1 -1
- package/dist/default/define/video/scaffold-skin.css +168 -63
- package/dist/default/define/video/scaffold-skin2.js +1 -1
- package/dist/default/define/video/skin.css +348 -66
- package/dist/default/define/video/skin2.js +1 -1
- package/dist/default/index.js +3 -1
- package/dist/default/internal/skins/compat-audio/skin.css +91 -38
- package/dist/default/internal/skins/compat-live-audio/skin.css +91 -38
- package/dist/default/internal/skins/compat-live-video/skin.css +142 -61
- package/dist/default/internal/skins/compat-live-video/template.js +2 -0
- package/dist/default/internal/skins/compat-video/skin.css +150 -61
- package/dist/default/internal/skins/compat-video/template.js +2 -0
- package/dist/default/internal/skins/default-audio/skin.css +53 -31
- package/dist/default/internal/skins/default-live-audio/skin.css +51 -29
- package/dist/default/internal/skins/default-live-video/skin.css +245 -60
- package/dist/default/internal/skins/default-live-video/template.js +14 -0
- package/dist/default/internal/skins/default-video/register.js +3 -0
- package/dist/default/internal/skins/default-video/skin.css +348 -66
- package/dist/default/internal/skins/default-video/template.js +33 -5
- package/dist/default/internal/skins/neutral-audio/skin.css +52 -31
- package/dist/default/internal/skins/neutral-live-audio/skin.css +50 -29
- package/dist/default/internal/skins/neutral-live-video/skin.css +241 -55
- package/dist/default/internal/skins/neutral-live-video/template.js +14 -0
- package/dist/default/internal/skins/neutral-video/skin.css +322 -66
- package/dist/default/internal/skins/neutral-video/template.js +25 -11
- package/dist/default/internal/skins/scaffold-audio/skin.css +105 -40
- package/dist/default/internal/skins/scaffold-live-audio/skin.css +105 -40
- package/dist/default/internal/skins/scaffold-live-video/skin.css +159 -63
- package/dist/default/internal/skins/scaffold-live-video/template.js +2 -0
- package/dist/default/internal/skins/scaffold-video/skin.css +168 -63
- package/dist/default/internal/skins/scaffold-video/template.js +3 -1
- package/dist/default/media/background-video/adapter.js +13 -35
- package/dist/default/media/background-video/base.js +95 -0
- package/dist/default/media/background-video/template.js +13 -20
- package/dist/default/media/hls-background-video/adapter.js +16 -35
- package/dist/default/ui/captions-radio-group/element.js +14 -1
- package/dist/default/ui/controls/element.js +6 -3
- package/dist/default/ui/time-slider/markers.js +160 -0
- package/dist/default/version.js +1 -1
- package/dist/dev/define/audio/compat-skin.css +91 -38
- package/dist/dev/define/audio/compat-skin2.js +1 -1
- package/dist/dev/define/audio/compat-skin2.js.map +1 -1
- package/dist/dev/define/audio/neutral-skin.css +52 -31
- package/dist/dev/define/audio/neutral-skin2.js +1 -1
- package/dist/dev/define/audio/neutral-skin2.js.map +1 -1
- package/dist/dev/define/audio/scaffold-skin.css +105 -40
- package/dist/dev/define/audio/scaffold-skin2.js +1 -1
- package/dist/dev/define/audio/scaffold-skin2.js.map +1 -1
- package/dist/dev/define/audio/skin.css +53 -31
- package/dist/dev/define/audio/skin2.js +1 -1
- package/dist/dev/define/audio/skin2.js.map +1 -1
- package/dist/dev/define/live-audio/compat-skin.css +91 -38
- package/dist/dev/define/live-audio/compat-skin2.js +1 -1
- package/dist/dev/define/live-audio/compat-skin2.js.map +1 -1
- package/dist/dev/define/live-audio/neutral-skin.css +50 -29
- package/dist/dev/define/live-audio/neutral-skin2.js +1 -1
- package/dist/dev/define/live-audio/neutral-skin2.js.map +1 -1
- package/dist/dev/define/live-audio/scaffold-skin.css +105 -40
- package/dist/dev/define/live-audio/scaffold-skin2.js +1 -1
- package/dist/dev/define/live-audio/scaffold-skin2.js.map +1 -1
- package/dist/dev/define/live-audio/skin.css +51 -29
- package/dist/dev/define/live-audio/skin2.js +1 -1
- package/dist/dev/define/live-audio/skin2.js.map +1 -1
- package/dist/dev/define/live-video/compat-skin.css +142 -61
- package/dist/dev/define/live-video/compat-skin2.js +1 -1
- package/dist/dev/define/live-video/compat-skin2.js.map +1 -1
- package/dist/dev/define/live-video/neutral-skin.css +241 -55
- package/dist/dev/define/live-video/neutral-skin2.js +1 -1
- package/dist/dev/define/live-video/neutral-skin2.js.map +1 -1
- package/dist/dev/define/live-video/scaffold-skin.css +159 -63
- package/dist/dev/define/live-video/scaffold-skin2.js +1 -1
- package/dist/dev/define/live-video/scaffold-skin2.js.map +1 -1
- package/dist/dev/define/live-video/skin.css +245 -60
- package/dist/dev/define/live-video/skin2.js +1 -1
- package/dist/dev/define/live-video/skin2.js.map +1 -1
- package/dist/dev/define/ui/time-slider-markers.d.ts +8 -0
- package/dist/dev/define/ui/time-slider-markers.js +7 -0
- package/dist/dev/define/ui/time-slider-markers.js.map +1 -0
- package/dist/dev/define/video/compat-skin.css +150 -61
- package/dist/dev/define/video/compat-skin2.js +1 -1
- package/dist/dev/define/video/compat-skin2.js.map +1 -1
- package/dist/dev/define/video/neutral-skin.css +322 -66
- package/dist/dev/define/video/neutral-skin2.js +1 -1
- package/dist/dev/define/video/neutral-skin2.js.map +1 -1
- package/dist/dev/define/video/scaffold-skin.css +168 -63
- package/dist/dev/define/video/scaffold-skin2.js +1 -1
- package/dist/dev/define/video/scaffold-skin2.js.map +1 -1
- package/dist/dev/define/video/skin.css +348 -66
- package/dist/dev/define/video/skin2.js +1 -1
- package/dist/dev/define/video/skin2.js.map +1 -1
- package/dist/dev/index.d.ts +5 -4
- package/dist/dev/index.js +3 -1
- package/dist/dev/internal/skins/compat-audio/skin.css +91 -38
- package/dist/dev/internal/skins/compat-live-audio/skin.css +91 -38
- package/dist/dev/internal/skins/compat-live-video/skin.css +142 -61
- package/dist/dev/internal/skins/compat-live-video/template.js +2 -0
- package/dist/dev/internal/skins/compat-live-video/template.js.map +1 -1
- package/dist/dev/internal/skins/compat-video/skin.css +150 -61
- package/dist/dev/internal/skins/compat-video/template.js +2 -0
- package/dist/dev/internal/skins/compat-video/template.js.map +1 -1
- package/dist/dev/internal/skins/default-audio/skin.css +53 -31
- package/dist/dev/internal/skins/default-live-audio/skin.css +51 -29
- package/dist/dev/internal/skins/default-live-video/register.js.map +1 -1
- package/dist/dev/internal/skins/default-live-video/skin.css +245 -60
- package/dist/dev/internal/skins/default-live-video/template.js +14 -0
- package/dist/dev/internal/skins/default-live-video/template.js.map +1 -1
- package/dist/dev/internal/skins/default-video/register.d.ts +1 -0
- package/dist/dev/internal/skins/default-video/register.js +3 -0
- package/dist/dev/internal/skins/default-video/register.js.map +1 -1
- package/dist/dev/internal/skins/default-video/skin.css +348 -66
- package/dist/dev/internal/skins/default-video/template.js +33 -5
- package/dist/dev/internal/skins/default-video/template.js.map +1 -1
- package/dist/dev/internal/skins/neutral-audio/skin.css +52 -31
- package/dist/dev/internal/skins/neutral-live-audio/skin.css +50 -29
- package/dist/dev/internal/skins/neutral-live-video/register.js.map +1 -1
- package/dist/dev/internal/skins/neutral-live-video/skin.css +241 -55
- package/dist/dev/internal/skins/neutral-live-video/template.js +14 -0
- package/dist/dev/internal/skins/neutral-live-video/template.js.map +1 -1
- package/dist/dev/internal/skins/neutral-video/register.js.map +1 -1
- package/dist/dev/internal/skins/neutral-video/skin.css +322 -66
- package/dist/dev/internal/skins/neutral-video/template.js +25 -11
- package/dist/dev/internal/skins/neutral-video/template.js.map +1 -1
- package/dist/dev/internal/skins/scaffold-audio/skin.css +105 -40
- package/dist/dev/internal/skins/scaffold-live-audio/skin.css +105 -40
- package/dist/dev/internal/skins/scaffold-live-video/skin.css +159 -63
- package/dist/dev/internal/skins/scaffold-live-video/template.js +2 -0
- package/dist/dev/internal/skins/scaffold-live-video/template.js.map +1 -1
- package/dist/dev/internal/skins/scaffold-video/skin.css +168 -63
- package/dist/dev/internal/skins/scaffold-video/template.js +3 -1
- package/dist/dev/internal/skins/scaffold-video/template.js.map +1 -1
- package/dist/dev/media/background-video/adapter.d.ts +7 -13
- package/dist/dev/media/background-video/adapter.js +13 -35
- package/dist/dev/media/background-video/adapter.js.map +1 -1
- package/dist/dev/media/background-video/base.d.ts +44 -0
- package/dist/dev/media/background-video/base.js +97 -0
- package/dist/dev/media/background-video/base.js.map +1 -0
- package/dist/dev/media/background-video/template.d.ts +3 -0
- package/dist/dev/media/background-video/template.js +13 -20
- package/dist/dev/media/background-video/template.js.map +1 -1
- package/dist/dev/media/hls-background-video/adapter.d.ts +8 -18
- package/dist/dev/media/hls-background-video/adapter.js +16 -35
- package/dist/dev/media/hls-background-video/adapter.js.map +1 -1
- package/dist/dev/ui/captions-button/element.d.ts +2 -0
- package/dist/dev/ui/captions-radio-group/element.d.ts +2 -1
- package/dist/dev/ui/captions-radio-group/element.js +14 -1
- package/dist/dev/ui/captions-radio-group/element.js.map +1 -1
- package/dist/dev/ui/controls/element.d.ts +2 -2
- package/dist/dev/ui/controls/element.js +6 -3
- package/dist/dev/ui/controls/element.js.map +1 -1
- package/dist/dev/ui/time-slider/markers.d.ts +48 -0
- package/dist/dev/ui/time-slider/markers.js +165 -0
- package/dist/dev/ui/time-slider/markers.js.map +1 -0
- package/dist/dev/version.js +1 -1
- package/docs/README.md +1 -1
- package/docs/guides/autoplay.md +1 -1
- package/docs/guides/background-video.md +2 -4
- package/docs/guides/browser-support.md +22 -16
- package/docs/guides/cdn.md +9 -9
- package/docs/guides/customize-skins.md +3 -0
- package/docs/guides/installation-cdn.md +2 -2
- package/docs/guides/installation-shadcn.md +1 -1
- package/docs/guides/installation-svelte.md +2 -2
- package/docs/guides/installation-vue.md +2 -2
- package/docs/guides/installation.md +2 -2
- package/docs/guides/internationalization.md +5 -5
- package/docs/guides/keyboard-shortcuts.md +10 -0
- package/docs/guides/llms.txt +2 -1
- package/docs/guides/migrate-from-media-chrome.md +4 -4
- package/docs/guides/migrate-from-mux-player.md +6 -6
- package/docs/guides/migrate-from-plyr.md +7 -7
- package/docs/guides/migrate-from-video-js-8.md +6 -6
- package/docs/guides/migrate-from-vidstack.md +4 -4
- package/docs/guides/presets.md +4 -4
- package/docs/guides/self-hosting.md +5 -5
- package/docs/guides/skins.md +8 -7
- package/docs/guides/timed-metadata.md +318 -0
- package/docs/llms.txt +16 -2
- package/docs/reference/api/chapters-track.md +71 -0
- package/docs/reference/api/define-text-track.md +113 -0
- package/docs/reference/api/feature-text-cues.md +133 -0
- package/docs/reference/api/feature-text-tracks.md +11 -5
- package/docs/reference/api/get-active-text-cues.md +69 -0
- package/docs/reference/api/get-text-cues.md +69 -0
- package/docs/reference/api/get-text-tracks.md +41 -0
- package/docs/reference/api/hls-metadata-track.md +48 -0
- package/docs/reference/api/html-create-player.md +2 -2
- package/docs/reference/api/llms.txt +13 -1
- package/docs/reference/api/media-capabilities.md +4 -4
- package/docs/reference/api/player-store.md +9 -4
- package/docs/reference/api/preset-audio.md +3 -1
- package/docs/reference/api/preset-background.md +1 -1
- package/docs/reference/api/preset-live-audio.md +3 -1
- package/docs/reference/api/preset-live-video.md +2 -1
- package/docs/reference/api/preset-video.md +2 -1
- package/docs/reference/components/audio-compat-skin.md +1 -1
- package/docs/reference/components/audio-neutral-skin.md +1 -1
- package/docs/reference/components/audio-scaffold-skin.md +1 -1
- package/docs/reference/components/audio-skin.md +1 -1
- package/docs/reference/components/audio.md +19 -1
- package/docs/reference/components/background-video-skin.md +1 -1
- package/docs/reference/components/background-video.md +26 -11
- package/docs/reference/components/captions-radio-group.md +1 -1
- package/docs/reference/components/cloudflare-video.md +1 -1
- package/docs/reference/components/controls.md +16 -3
- package/docs/reference/components/dailymotion-video.md +2 -2
- package/docs/reference/components/dash-video.md +20 -3
- package/docs/reference/components/google-analytics.md +1 -1
- package/docs/reference/components/google-cast.md +1 -1
- package/docs/reference/components/hls-audio.md +56 -2
- package/docs/reference/components/hls-background-video.md +22 -5
- package/docs/reference/components/hls-video.md +99 -7
- package/docs/reference/components/hlsjs-video.md +52 -13
- package/docs/reference/components/live-audio-compat-skin.md +1 -1
- package/docs/reference/components/live-audio-neutral-skin.md +1 -1
- package/docs/reference/components/live-audio-scaffold-skin.md +1 -1
- package/docs/reference/components/live-audio-skin.md +1 -1
- package/docs/reference/components/live-video-compat-skin.md +5 -1
- package/docs/reference/components/live-video-neutral-skin.md +5 -1
- package/docs/reference/components/live-video-scaffold-skin.md +5 -1
- package/docs/reference/components/live-video-skin.md +5 -1
- package/docs/reference/components/llms.txt +2 -1
- package/docs/reference/components/mixcloud-audio.md +2 -2
- package/docs/reference/components/mux-audio.md +34 -3
- package/docs/reference/components/mux-background-video.md +1 -1
- package/docs/reference/components/mux-data.md +1 -1
- package/docs/reference/components/mux-video.md +17 -3
- package/docs/reference/components/native-hls-video.md +32 -3
- package/docs/reference/components/playerjs-video.md +2 -2
- package/docs/reference/components/shaka-video.md +2 -3
- package/docs/reference/components/soundcloud-audio.md +2 -2
- package/docs/reference/components/spotify-audio.md +2 -2
- package/docs/reference/components/tiktok-video.md +2 -2
- package/docs/reference/components/time-slider-markers.md +194 -0
- package/docs/reference/components/time-slider.md +14 -0
- package/docs/reference/components/twitch-video.md +1 -1
- package/docs/reference/components/video-compat-skin.md +5 -1
- package/docs/reference/components/video-neutral-skin.md +5 -1
- package/docs/reference/components/video-scaffold-skin.md +5 -1
- package/docs/reference/components/video-skin.md +5 -1
- package/docs/reference/components/video.md +19 -1
- package/docs/reference/components/vimeo-video.md +1 -2
- package/docs/reference/components/wistia-video.md +1 -1
- package/docs/reference/components/youtube-video.md +1 -2
- 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:
|
|
1486
|
-
--media-foreground:
|
|
1487
|
-
--media-controls:
|
|
1486
|
+
--media-background: #000;
|
|
1487
|
+
--media-foreground: #fff;
|
|
1488
|
+
--media-controls: #00000059;
|
|
1488
1489
|
--media-controls-foreground: var(--media-foreground);
|
|
1489
|
-
--media-popover:
|
|
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,
|
|
1494
|
+
--media-accent: var(--media-accent-color, #ffffff1a);
|
|
1494
1495
|
--media-accent-foreground: var(--media-accent-text-color, currentColor);
|
|
1495
|
-
--media-muted:
|
|
1496
|
-
--media-muted-foreground:
|
|
1497
|
-
--media-border:
|
|
1498
|
-
--media-ring:
|
|
1499
|
-
--media-backdrop:
|
|
1500
|
-
--media-live-color:
|
|
1501
|
-
--media-shadow-surface: 0 1px 3px 0
|
|
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
|
|
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:
|
|
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:
|
|
1517
|
-
--media-default-accent-text-color:
|
|
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:
|
|
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,
|
|
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:
|
|
1611
|
-
--media-foreground:
|
|
1612
|
-
--media-controls:
|
|
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:
|
|
1617
|
-
--media-surface-border:
|
|
1632
|
+
--media-muted: #0000001a;
|
|
1633
|
+
--media-surface-border: #0000000d;
|
|
1618
1634
|
--media-primary: var(--media-accent-color, var(--media-foreground));
|
|
1619
|
-
--media-border:
|
|
1635
|
+
--media-border: #0000001a;
|
|
1620
1636
|
--media-ring: var(--media-foreground);
|
|
1621
|
-
--media-default-accent-color:
|
|
1622
|
-
--media-default-accent-text-color:
|
|
1623
|
-
--media-internal-accent-text-fallback:
|
|
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:
|
|
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:
|
|
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:
|
|
970
|
-
--media-foreground:
|
|
971
|
-
--media-controls:
|
|
970
|
+
--media-background: #000;
|
|
971
|
+
--media-foreground: #fff;
|
|
972
|
+
--media-controls: #00000059;
|
|
972
973
|
--media-controls-foreground: var(--media-foreground);
|
|
973
|
-
--media-popover:
|
|
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,
|
|
978
|
+
--media-accent: var(--media-accent-color, #ffffff1a);
|
|
978
979
|
--media-accent-foreground: var(--media-accent-text-color, currentColor);
|
|
979
|
-
--media-muted:
|
|
980
|
-
--media-muted-foreground:
|
|
981
|
-
--media-border:
|
|
982
|
-
--media-ring:
|
|
983
|
-
--media-backdrop:
|
|
984
|
-
--media-live-color:
|
|
985
|
-
--media-shadow-surface: 0 1px 3px 0
|
|
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
|
|
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:
|
|
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:
|
|
1001
|
-
--media-default-accent-text-color:
|
|
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:
|
|
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,
|
|
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:
|
|
1095
|
-
--media-foreground:
|
|
1096
|
-
--media-controls:
|
|
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:
|
|
1101
|
-
--media-surface-border:
|
|
1116
|
+
--media-muted: #0000001a;
|
|
1117
|
+
--media-surface-border: #0000000d;
|
|
1102
1118
|
--media-primary: var(--media-accent-color, var(--media-foreground));
|
|
1103
|
-
--media-border:
|
|
1119
|
+
--media-border: #0000001a;
|
|
1104
1120
|
--media-ring: var(--media-foreground);
|
|
1105
|
-
--media-default-accent-color:
|
|
1106
|
-
--media-default-accent-text-color:
|
|
1107
|
-
--media-internal-accent-text-fallback:
|
|
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:
|
|
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:
|
|
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-
|
|
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"}
|