@videojs/html 10.0.0-beta.13 → 10.0.0-beta.14
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/cdn/{abort-JT-ewLFq.js → abort-CzqmAxxH.js} +1 -1
- package/cdn/{abort-JT-ewLFq.js.map → abort-CzqmAxxH.js.map} +1 -1
- package/cdn/{abort-C7q_G_dT.js → abort-KaHR4JO1.js} +1 -1
- package/cdn/{abort-C7q_G_dT.js.map → abort-KaHR4JO1.js.map} +1 -1
- package/cdn/audio-minimal-ui.dev.d.ts +1 -0
- package/cdn/audio-minimal-ui.dev.js +5 -0
- package/cdn/audio-minimal-ui.js +1 -0
- package/cdn/audio-minimal.dev.js +13 -14
- package/cdn/audio-minimal.dev.js.map +1 -1
- package/cdn/audio-minimal.js +1 -1
- package/cdn/audio-minimal.js.map +1 -1
- package/cdn/audio-ui.dev.d.ts +1 -0
- package/cdn/audio-ui.dev.js +5 -0
- package/cdn/audio-ui.js +1 -0
- package/cdn/audio.dev.js +13 -14
- package/cdn/audio.dev.js.map +1 -1
- package/cdn/audio.js +1 -1
- package/cdn/audio.js.map +1 -1
- package/cdn/background.dev.js +5 -11
- package/cdn/background.dev.js.map +1 -1
- package/cdn/background.js +1 -1
- package/cdn/background.js.map +1 -1
- package/cdn/{safe-define-Bw8JF08z.js → context-BjrbhiSk.js} +27 -23
- package/cdn/context-BjrbhiSk.js.map +1 -0
- package/cdn/context-CdkhXQEw.js +14 -0
- package/cdn/context-CdkhXQEw.js.map +1 -0
- package/cdn/{create-player-C2h3JeGl.js → create-player-Cz5Y4DmL.js} +2627 -2611
- package/cdn/create-player-Cz5Y4DmL.js.map +1 -0
- package/cdn/create-player-DSGjDLpM.js +7 -0
- package/cdn/create-player-DSGjDLpM.js.map +1 -0
- package/cdn/{default-CnBlD9BM.js → default-C8KsZ0zK.js} +1 -1
- package/cdn/{default-CnBlD9BM.js.map → default-C8KsZ0zK.js.map} +1 -1
- package/cdn/{default-CKnlVEjQ.js → default-XHZAb7gP.js} +1 -1
- package/cdn/{default-CKnlVEjQ.js.map → default-XHZAb7gP.js.map} +1 -1
- package/cdn/delegate-B626t_Va.js +2 -0
- package/cdn/delegate-B626t_Va.js.map +1 -0
- package/cdn/{delegate-AoR5Pt_6.js → delegate-BCw-LjP_.js} +9 -10
- package/cdn/delegate-BCw-LjP_.js.map +1 -0
- package/cdn/{hls-CNDMNsEo.js → hls-A02jAc_G.js} +3 -3
- package/cdn/hls-A02jAc_G.js.map +1 -0
- package/cdn/{hls-DHwATYV2.js → hls-DwNUcXDb.js} +17 -89
- package/cdn/hls-DwNUcXDb.js.map +1 -0
- package/cdn/{listen-UqQNdlqV.js → listen-D7fcau5d.js} +1 -1
- package/cdn/{listen-UqQNdlqV.js.map → listen-D7fcau5d.js.map} +1 -1
- package/cdn/{listen-BkAEGXCe.js → listen-w-Aun0yN.js} +1 -1
- package/cdn/{listen-BkAEGXCe.js.map → listen-w-Aun0yN.js.map} +1 -1
- package/cdn/media/dash-video.dev.js +4 -4
- package/cdn/media/dash-video.js +1 -1
- package/cdn/media/hls-video.dev.js +5 -4
- package/cdn/media/hls-video.dev.js.map +1 -1
- package/cdn/media/hls-video.js +1 -1
- package/cdn/media/hls-video.js.map +1 -1
- package/cdn/media/mux-video.dev.js +7 -6
- package/cdn/media/mux-video.dev.js.map +1 -1
- package/cdn/media/mux-video.js +1 -1
- package/cdn/media/mux-video.js.map +1 -1
- package/cdn/media/native-hls-video.dev.d.ts +1 -0
- package/cdn/media/native-hls-video.dev.js +28 -0
- package/cdn/media/native-hls-video.dev.js.map +1 -0
- package/cdn/media/native-hls-video.js +2 -0
- package/cdn/media/native-hls-video.js.map +1 -0
- package/cdn/media/simple-hls-video.dev.js +6 -6
- package/cdn/media/simple-hls-video.js +2 -2
- package/cdn/media/simple-hls-video.js.map +1 -1
- package/cdn/{media-attach-mixin-CkU58gjb.js → media-attach-mixin-DfKkofgF.js} +2 -2
- package/cdn/{media-attach-mixin-CkU58gjb.js.map → media-attach-mixin-DfKkofgF.js.map} +1 -1
- package/cdn/media-attach-mixin-Dv2D43tb.js +2 -0
- package/cdn/{media-attach-mixin-ByJOWMNT.js.map → media-attach-mixin-Dv2D43tb.js.map} +1 -1
- package/cdn/{media-props-mixin-DxsM38Bx.js → media-props-mixin-CNJVvHAH.js} +9 -13
- package/cdn/media-props-mixin-CNJVvHAH.js.map +1 -0
- package/cdn/{media-props-mixin-BuVUebRp.js → media-props-mixin-CmboksUe.js} +2 -2
- package/cdn/media-props-mixin-CmboksUe.js.map +1 -0
- package/cdn/{minimal-fA2p2Jrn.js → minimal-BUUGNZK7.js} +1 -1
- package/cdn/{minimal-fA2p2Jrn.js.map → minimal-BUUGNZK7.js.map} +1 -1
- package/cdn/{minimal-CKMdOXWm.js → minimal-CJGOJ6pE.js} +1 -1
- package/cdn/{minimal-CKMdOXWm.js.map → minimal-CJGOJ6pE.js.map} +1 -1
- package/cdn/minimal-ui-BL9eBXck.js +0 -0
- package/cdn/minimal-ui-a1UOKF79.js +0 -0
- package/cdn/native-hls-CPgjPTAQ.js +126 -0
- package/cdn/native-hls-CPgjPTAQ.js.map +1 -0
- package/cdn/native-hls-Db2TurPW.js +2 -0
- package/cdn/native-hls-Db2TurPW.js.map +1 -0
- package/cdn/player-DlGhe0FD.js +2 -0
- package/cdn/{player-DOTrw60d.js.map → player-DlGhe0FD.js.map} +1 -1
- package/cdn/{player-BWRklsUx.js → player-XArb4DyB.js} +3 -3
- package/cdn/{player-BWRklsUx.js.map → player-XArb4DyB.js.map} +1 -1
- package/cdn/{poster-Ds1EOmmU.js → poster-BUuGv2Va.js} +25 -4
- package/cdn/poster-BUuGv2Va.js.map +1 -0
- package/cdn/poster-Crn2YX3_.js +2 -0
- package/cdn/poster-Crn2YX3_.js.map +1 -0
- package/cdn/shadow-styles-62Yo__Ni.js +3 -0
- package/cdn/shadow-styles-62Yo__Ni.js.map +1 -0
- package/cdn/shadow-styles-I-_QR-PM.js +41 -0
- package/cdn/shadow-styles-I-_QR-PM.js.map +1 -0
- package/cdn/{shallow-equal-CaIo44Co.js → shallow-equal-C8Fs4TTE.js} +1 -1
- package/cdn/{shallow-equal-CaIo44Co.js.map → shallow-equal-C8Fs4TTE.js.map} +1 -1
- package/cdn/{shallow-equal-zo2IZwso.js → shallow-equal-uPuCQhnd.js} +1 -1
- package/cdn/{shallow-equal-zo2IZwso.js.map → shallow-equal-uPuCQhnd.js.map} +1 -1
- package/cdn/skin-element-D40glySA.js +55 -0
- package/cdn/skin-element-D40glySA.js.map +1 -0
- package/cdn/skin-element-Dk_f7DE8.js +2 -0
- package/cdn/skin-element-Dk_f7DE8.js.map +1 -0
- package/cdn/ui-CFIgmrlA.js +0 -0
- package/cdn/ui-Ccp_LyCf.js +0 -0
- package/cdn/video-minimal-ui.dev.d.ts +1 -0
- package/cdn/video-minimal-ui.dev.js +5 -0
- package/cdn/video-minimal-ui.js +1 -0
- package/cdn/video-minimal.dev.js +15 -22
- package/cdn/video-minimal.dev.js.map +1 -1
- package/cdn/video-minimal.js +1 -1
- package/cdn/video-minimal.js.map +1 -1
- package/cdn/video-ui.dev.d.ts +1 -0
- package/cdn/video-ui.dev.js +5 -0
- package/cdn/video-ui.js +1 -0
- package/cdn/video.dev.js +16 -47
- package/cdn/video.dev.js.map +1 -1
- package/cdn/video.js +1 -1
- package/cdn/video.js.map +1 -1
- package/cdn/volume-slider-BSbnD5gg.js +8 -0
- package/cdn/volume-slider-BSbnD5gg.js.map +1 -0
- package/cdn/{volume-slider-Dz_ND_4U.js → volume-slider-CxGbFVVX.js} +166 -167
- package/cdn/volume-slider-CxGbFVVX.js.map +1 -0
- package/dist/default/_virtual/inline-css_src/define/audio/minimal-skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/audio/minimal-skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/audio/skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/shared.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/shared.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/skin.js.map +1 -1
- package/dist/default/define/audio/minimal-skin.css +43 -26
- package/dist/default/define/audio/minimal-skin.js +7 -18
- package/dist/default/define/audio/minimal-skin.js.map +1 -1
- package/dist/default/define/audio/minimal-skin.tailwind.js +6 -18
- package/dist/default/define/audio/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/audio/minimal-ui.js +12 -0
- package/dist/default/define/audio/skin.css +43 -26
- package/dist/default/define/audio/skin.js +7 -18
- package/dist/default/define/audio/skin.js.map +1 -1
- package/dist/default/define/audio/skin.tailwind.js +6 -18
- package/dist/default/define/audio/skin.tailwind.js.map +1 -1
- package/dist/default/define/audio/ui.js +12 -0
- package/dist/default/define/background/skin.js +2 -9
- package/dist/default/define/background/skin.js.map +1 -1
- package/dist/default/define/base.css +4 -0
- package/dist/default/define/shared.css +2 -1
- package/dist/default/define/skin-element.js +33 -0
- package/dist/default/define/skin-element.js.map +1 -0
- package/dist/default/define/video/minimal-skin.css +46 -45
- package/dist/default/define/video/minimal-skin.js +7 -23
- package/dist/default/define/video/minimal-skin.js.map +1 -1
- package/dist/default/define/video/minimal-skin.tailwind.js +6 -24
- package/dist/default/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/video/minimal-ui.js +18 -0
- package/dist/default/define/video/skin.css +46 -45
- package/dist/default/define/video/skin.js +7 -24
- package/dist/default/define/video/skin.js.map +1 -1
- package/dist/default/define/video/skin.tailwind.js +6 -24
- package/dist/default/define/video/skin.tailwind.js.map +1 -1
- package/dist/default/define/video/ui.js +18 -0
- package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js +0 -1
- package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +0 -1
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js +0 -1
- package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +0 -1
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/default/ui/media-button-element.js +7 -0
- package/dist/default/ui/media-button-element.js.map +1 -1
- package/dist/default/ui/time/time-element.js +12 -10
- package/dist/default/ui/time/time-element.js.map +1 -1
- package/dist/default/ui/tooltip/tooltip-element.js +12 -8
- package/dist/default/ui/tooltip/tooltip-element.js.map +1 -1
- package/dist/default/ui/volume-slider/volume-slider-element.js +22 -14
- package/dist/default/ui/volume-slider/volume-slider-element.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/audio/skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/base.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/base.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/shared.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/shared.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/skin.js.map +1 -1
- package/dist/dev/define/audio/minimal-skin.css +43 -26
- package/dist/dev/define/audio/minimal-skin.d.ts +6 -10
- package/dist/dev/define/audio/minimal-skin.d.ts.map +1 -1
- package/dist/dev/define/audio/minimal-skin.js +7 -22
- package/dist/dev/define/audio/minimal-skin.js.map +1 -1
- package/dist/dev/define/audio/minimal-skin.tailwind.d.ts +4 -10
- package/dist/dev/define/audio/minimal-skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/audio/minimal-skin.tailwind.js +6 -24
- package/dist/dev/define/audio/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/audio/minimal-ui.d.ts +1 -0
- package/dist/dev/define/audio/minimal-ui.js +12 -0
- package/dist/dev/define/audio/skin.css +43 -26
- package/dist/dev/define/audio/skin.d.ts +6 -10
- package/dist/dev/define/audio/skin.d.ts.map +1 -1
- package/dist/dev/define/audio/skin.js +7 -22
- package/dist/dev/define/audio/skin.js.map +1 -1
- package/dist/dev/define/audio/skin.tailwind.d.ts +4 -10
- package/dist/dev/define/audio/skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/audio/skin.tailwind.js +6 -24
- package/dist/dev/define/audio/skin.tailwind.js.map +1 -1
- package/dist/dev/define/audio/ui.d.ts +1 -0
- package/dist/dev/define/audio/ui.js +12 -0
- package/dist/dev/define/background/skin.d.ts.map +1 -1
- package/dist/dev/define/background/skin.js +2 -9
- package/dist/dev/define/background/skin.js.map +1 -1
- package/dist/dev/define/base.css +4 -0
- package/dist/dev/define/shared.css +2 -1
- package/dist/dev/define/skin-element.d.ts +18 -0
- package/dist/dev/define/skin-element.d.ts.map +1 -0
- package/dist/dev/define/skin-element.js +33 -0
- package/dist/dev/define/skin-element.js.map +1 -0
- package/dist/dev/define/video/minimal-skin.css +46 -45
- package/dist/dev/define/video/minimal-skin.d.ts +6 -10
- package/dist/dev/define/video/minimal-skin.d.ts.map +1 -1
- package/dist/dev/define/video/minimal-skin.js +9 -35
- package/dist/dev/define/video/minimal-skin.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.tailwind.d.ts +4 -10
- package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/video/minimal-skin.tailwind.js +9 -51
- package/dist/dev/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/minimal-ui.d.ts +1 -0
- package/dist/dev/define/video/minimal-ui.js +18 -0
- package/dist/dev/define/video/skin.css +46 -45
- package/dist/dev/define/video/skin.d.ts +6 -10
- package/dist/dev/define/video/skin.d.ts.map +1 -1
- package/dist/dev/define/video/skin.js +10 -40
- package/dist/dev/define/video/skin.js.map +1 -1
- package/dist/dev/define/video/skin.tailwind.d.ts +4 -10
- package/dist/dev/define/video/skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/video/skin.tailwind.js +9 -51
- package/dist/dev/define/video/skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/ui.d.ts +1 -0
- package/dist/dev/define/video/ui.js +18 -0
- package/dist/dev/index.d.ts +2 -2
- package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js +0 -1
- package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js +0 -1
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js +0 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js +0 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/store/container-mixin.d.ts +1 -1
- package/dist/dev/store/provider-mixin.d.ts +1 -1
- package/dist/dev/ui/media-button-element.d.ts +6 -2
- package/dist/dev/ui/media-button-element.d.ts.map +1 -1
- package/dist/dev/ui/media-button-element.js +7 -0
- package/dist/dev/ui/media-button-element.js.map +1 -1
- package/dist/dev/ui/time/time-element.d.ts +0 -1
- package/dist/dev/ui/time/time-element.d.ts.map +1 -1
- package/dist/dev/ui/time/time-element.js +12 -10
- package/dist/dev/ui/time/time-element.js.map +1 -1
- package/dist/dev/ui/tooltip/tooltip-element.d.ts.map +1 -1
- package/dist/dev/ui/tooltip/tooltip-element.js +12 -8
- package/dist/dev/ui/tooltip/tooltip-element.js.map +1 -1
- package/dist/dev/ui/volume-slider/volume-slider-element.d.ts +5 -0
- package/dist/dev/ui/volume-slider/volume-slider-element.d.ts.map +1 -1
- package/dist/dev/ui/volume-slider/volume-slider-element.js +22 -14
- package/dist/dev/ui/volume-slider/volume-slider-element.js.map +1 -1
- package/package.json +8 -8
- package/cdn/create-player-C2h3JeGl.js.map +0 -1
- package/cdn/create-player-i0Q36S9_.js +0 -7
- package/cdn/create-player-i0Q36S9_.js.map +0 -1
- package/cdn/delegate-AoR5Pt_6.js.map +0 -1
- package/cdn/delegate-odoSeh7c.js +0 -2
- package/cdn/delegate-odoSeh7c.js.map +0 -1
- package/cdn/hls-CNDMNsEo.js.map +0 -1
- package/cdn/hls-DHwATYV2.js.map +0 -1
- package/cdn/media-attach-mixin-ByJOWMNT.js +0 -2
- package/cdn/media-props-mixin-BuVUebRp.js.map +0 -1
- package/cdn/media-props-mixin-DxsM38Bx.js.map +0 -1
- package/cdn/player-DOTrw60d.js +0 -2
- package/cdn/poster-CRi_NWaR.js +0 -2
- package/cdn/poster-CRi_NWaR.js.map +0 -1
- package/cdn/poster-Ds1EOmmU.js.map +0 -1
- package/cdn/safe-define-Bw8JF08z.js.map +0 -1
- package/cdn/safe-define-t0AGOouq.js +0 -14
- package/cdn/safe-define-t0AGOouq.js.map +0 -1
- package/cdn/volume-slider-C7rEWi11.js +0 -9
- package/cdn/volume-slider-C7rEWi11.js.map +0 -1
- package/cdn/volume-slider-Dz_ND_4U.js.map +0 -1
- package/dist/default/define/skin-mixin.js +0 -71
- package/dist/default/define/skin-mixin.js.map +0 -1
- package/dist/default/skins/dist/default/shared/tailwind/tooltip-state.js +0 -28
- package/dist/default/skins/dist/default/shared/tailwind/tooltip-state.js.map +0 -1
- package/dist/dev/define/skin-mixin.d.ts +0 -22
- package/dist/dev/define/skin-mixin.d.ts.map +0 -1
- package/dist/dev/define/skin-mixin.js +0 -71
- package/dist/dev/define/skin-mixin.js.map +0 -1
- package/dist/dev/skins/dist/default/shared/tailwind/tooltip-state.js +0 -28
- package/dist/dev/skins/dist/default/shared/tailwind/tooltip-state.js.map +0 -1
|
@@ -1,3 +1,46 @@
|
|
|
1
|
+
/* -------------------------------------------------------------------------- */
|
|
2
|
+
/* Base */
|
|
3
|
+
/* -------------------------------------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
video-player {
|
|
6
|
+
display: contents;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
Required to override any default video and image styles (such as
|
|
11
|
+
Tailwind's CSS reset) and ensure they fill the container as expected.
|
|
12
|
+
*/
|
|
13
|
+
video-player video,
|
|
14
|
+
video-player [slot="poster"] {
|
|
15
|
+
display: block;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
video-player video::-webkit-media-text-track-container {
|
|
21
|
+
transition: translate var(--media-caption-track-duration, 0) ease-out;
|
|
22
|
+
transition-delay: var(--media-caption-track-delay, 0);
|
|
23
|
+
translate: 0 var(--media-caption-track-y, 0);
|
|
24
|
+
scale: 0.98;
|
|
25
|
+
z-index: 1;
|
|
26
|
+
font-family: inherit;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
media-tooltip-group {
|
|
30
|
+
display: contents;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host {
|
|
34
|
+
/* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */
|
|
35
|
+
display: grid;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
|
|
40
|
+
.media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
1
44
|
/* ==========================================================================
|
|
2
45
|
Reset
|
|
3
46
|
========================================================================== */
|
|
@@ -610,32 +653,6 @@
|
|
|
610
653
|
opacity: 1;
|
|
611
654
|
}
|
|
612
655
|
|
|
613
|
-
/* ==========================================================================
|
|
614
|
-
Tooltip Label State Visibility for Audio Skins
|
|
615
|
-
|
|
616
|
-
Data-attribute-driven visibility rules for multi-state tooltip labels.
|
|
617
|
-
Uses adjacent sibling selectors to match button state → tooltip content.
|
|
618
|
-
========================================================================== */
|
|
619
|
-
|
|
620
|
-
/* --- All multi-state labels hidden by default --- */
|
|
621
|
-
|
|
622
|
-
.media-tooltip-label {
|
|
623
|
-
display: none;
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
/* --- Active label per state --- */
|
|
627
|
-
|
|
628
|
-
/* Play: ended → replay */
|
|
629
|
-
.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
|
|
630
|
-
/* Play: paused (not ended) → play */
|
|
631
|
-
.media-button--play:not([data-ended])[data-paused] + .media-tooltip
|
|
632
|
-
.media-tooltip-label--play,
|
|
633
|
-
/* Play: playing (not paused, not ended) → pause */
|
|
634
|
-
.media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
|
|
635
|
-
.media-tooltip-label--pause {
|
|
636
|
-
display: block;
|
|
637
|
-
}
|
|
638
|
-
|
|
639
656
|
|
|
640
657
|
/* ==========================================================================
|
|
641
658
|
Root
|
|
@@ -1,34 +1,23 @@
|
|
|
1
1
|
import { safeDefine } from "../safe-define.js";
|
|
2
|
-
import {
|
|
2
|
+
import { SkinElement } from "../skin-element.js";
|
|
3
3
|
import { renderIcon } from "../../icons/dist/render/minimal/index.js";
|
|
4
|
-
import "
|
|
5
|
-
import "../ui/error-dialog.js";
|
|
6
|
-
import "../ui/mute-button.js";
|
|
7
|
-
import "../ui/play-button.js";
|
|
8
|
-
import "../ui/playback-rate-button.js";
|
|
9
|
-
import "../ui/popover.js";
|
|
10
|
-
import "../ui/seek-button.js";
|
|
11
|
-
import "../ui/time.js";
|
|
12
|
-
import "../ui/time-slider.js";
|
|
13
|
-
import "../ui/tooltip.js";
|
|
14
|
-
import "../ui/tooltip-group.js";
|
|
15
|
-
import "../ui/volume-slider.js";
|
|
4
|
+
import "./minimal-ui.js";
|
|
16
5
|
import minimal_skin_default from "../../_virtual/inline-css_src/define/audio/minimal-skin.js";
|
|
17
|
-
import {
|
|
6
|
+
import { createShadowStyle, createTemplate } from "@videojs/utils/dom";
|
|
18
7
|
//#region src/define/audio/minimal-skin.ts
|
|
19
8
|
const SEEK_TIME = 10;
|
|
20
9
|
function getTemplateHTML() {
|
|
21
|
-
return `<media-container class="media-minimal-skin media-minimal-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-tooltip"
|
|
10
|
+
return `<media-container class="media-minimal-skin media-minimal-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time-group class="media-time-group"><media-time type="current" class="media-time media-time--current"></media-time><media-time-separator class="media-time-separator"></media-time-separator><media-time type="duration" class="media-time media-time--duration"></media-time></media-time-group><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
22
11
|
}
|
|
23
|
-
var MinimalAudioSkinElement = class extends
|
|
12
|
+
var MinimalAudioSkinElement = class extends SkinElement {
|
|
24
13
|
static {
|
|
25
14
|
this.tagName = "audio-minimal-skin";
|
|
26
15
|
}
|
|
27
16
|
static {
|
|
28
|
-
this.styles =
|
|
17
|
+
this.styles = createShadowStyle(minimal_skin_default);
|
|
29
18
|
}
|
|
30
19
|
static {
|
|
31
|
-
this.
|
|
20
|
+
this.template = createTemplate(getTemplateHTML());
|
|
32
21
|
}
|
|
33
22
|
};
|
|
34
23
|
safeDefine(MinimalAudioSkinElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './minimal-skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './minimal-ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"media-minimal-skin media-minimal-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--subtle\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time-group class=\"media-time-group\">\n <media-time type=\"current\" class=\"media-time media-time--current\"></media-time>\n <media-time-separator class=\"media-time-separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time media-time--duration\"></media-time>\n </media-time-group>\n\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\">\n </media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinElement extends SkinElement {\n static readonly tagName = 'audio-minimal-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalAudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;AASA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2xBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,wKAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,4oCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,0BAAZ,cAA+B,YAAA;;iBACb;;;;;;kBAEC,eAAc,iBAAY,CAAA;;;AAG7C,WAAW,wBAAqB"}
|
|
@@ -1,41 +1,29 @@
|
|
|
1
1
|
import { safeDefine } from "../safe-define.js";
|
|
2
|
-
import {
|
|
2
|
+
import { SkinElement } from "../skin-element.js";
|
|
3
3
|
import { renderIcon } from "../../icons/dist/render/minimal/index.js";
|
|
4
4
|
import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
|
|
5
|
-
import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
|
|
6
5
|
import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
|
|
7
6
|
import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
|
|
8
7
|
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
|
|
9
8
|
import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
|
|
10
9
|
import { slider } from "../../skins/dist/default/minimal/tailwind/components/slider.js";
|
|
11
10
|
import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
|
|
12
|
-
import "../media/container.js";
|
|
13
|
-
import "../ui/error-dialog.js";
|
|
14
|
-
import "../ui/mute-button.js";
|
|
15
|
-
import "../ui/play-button.js";
|
|
16
|
-
import "../ui/playback-rate-button.js";
|
|
17
|
-
import "../ui/popover.js";
|
|
18
|
-
import "../ui/seek-button.js";
|
|
19
|
-
import "../ui/time.js";
|
|
20
|
-
import "../ui/time-slider.js";
|
|
21
|
-
import "../ui/tooltip.js";
|
|
22
|
-
import "../ui/tooltip-group.js";
|
|
23
|
-
import "../ui/volume-slider.js";
|
|
24
11
|
import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
|
|
25
12
|
import { controls, error, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
|
|
26
|
-
import
|
|
13
|
+
import "./minimal-ui.js";
|
|
14
|
+
import { createTemplate } from "@videojs/utils/dom";
|
|
27
15
|
import { cn } from "@videojs/utils/style";
|
|
28
16
|
//#region src/define/audio/minimal-skin.tailwind.ts
|
|
29
17
|
const SEEK_TIME = 10;
|
|
30
18
|
function getTemplateHTML() {
|
|
31
|
-
return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <
|
|
19
|
+
return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.controls}"> <media-time-group class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider></div><div class="${buttonGroup}"> <media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"> </media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
32
20
|
}
|
|
33
|
-
var MinimalAudioSkinTailwindElement = class extends
|
|
21
|
+
var MinimalAudioSkinTailwindElement = class extends SkinElement {
|
|
34
22
|
static {
|
|
35
23
|
this.tagName = "audio-minimal-skin-tailwind";
|
|
36
24
|
}
|
|
37
25
|
static {
|
|
38
|
-
this.
|
|
26
|
+
this.template = createTemplate(getTemplateHTML());
|
|
39
27
|
}
|
|
40
28
|
};
|
|
41
29
|
safeDefine(MinimalAudioSkinTailwindElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the player, container, and all UI custom elements.\nimport './minimal-ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${root}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.subtle)}\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroup}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: icon })}\n <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"${time.controls}\">\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-separator class=\"${time.separator}\"></media-time-separator>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\n <media-time-slider class=\"${slider.root}\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n </media-time-slider>\n </div>\n\n <div class=\"${buttonGroup}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\">\n </media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinTailwindElement extends SkinElement {\n static readonly tagName = 'audio-minimal-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalAudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinTailwindElement.tagName]: MinimalAudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,uEAAA,MAAA,KAAA,iBAAA,MAAA,OAAA,iBAAA,MAAA,QAAA,sCAAA,MAAA,MAAA,2FAAA,MAAA,YAAA,uDAAA,MAAA,QAAA,sCAAA,GAAA,OAAA,MAAA,OAAA,OAAA,CAAA,8EAAA,SAAA,sCAAA,YAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,mFAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,KAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,KAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,SAAA,8BAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,8CAAA,KAAA,UAAA,8DAAA,KAAA,SAAA,8DAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,+DAAA,YAAA,2EAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,aAAA,OAAA,CAAA,8FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,+HAAA,GAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,gFAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,OAAA,MAAA,KAAA;;AAGlB,IAAY,kCAAZ,cAA+B,YAAA;;iBACb;;;;;;AAIlB,WAAW,gCAA4B"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "../ui/error-dialog.js";
|
|
2
|
+
import "../ui/mute-button.js";
|
|
3
|
+
import "../ui/play-button.js";
|
|
4
|
+
import "../ui/playback-rate-button.js";
|
|
5
|
+
import "../ui/popover.js";
|
|
6
|
+
import "../ui/seek-button.js";
|
|
7
|
+
import "../ui/time.js";
|
|
8
|
+
import "../ui/time-slider.js";
|
|
9
|
+
import "../ui/tooltip.js";
|
|
10
|
+
import "../ui/tooltip-group.js";
|
|
11
|
+
import "../ui/volume-slider.js";
|
|
12
|
+
import "./player.js";
|
|
@@ -1,3 +1,46 @@
|
|
|
1
|
+
/* -------------------------------------------------------------------------- */
|
|
2
|
+
/* Base */
|
|
3
|
+
/* -------------------------------------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
video-player {
|
|
6
|
+
display: contents;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
Required to override any default video and image styles (such as
|
|
11
|
+
Tailwind's CSS reset) and ensure they fill the container as expected.
|
|
12
|
+
*/
|
|
13
|
+
video-player video,
|
|
14
|
+
video-player [slot="poster"] {
|
|
15
|
+
display: block;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
video-player video::-webkit-media-text-track-container {
|
|
21
|
+
transition: translate var(--media-caption-track-duration, 0) ease-out;
|
|
22
|
+
transition-delay: var(--media-caption-track-delay, 0);
|
|
23
|
+
translate: 0 var(--media-caption-track-y, 0);
|
|
24
|
+
scale: 0.98;
|
|
25
|
+
z-index: 1;
|
|
26
|
+
font-family: inherit;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
media-tooltip-group {
|
|
30
|
+
display: contents;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host {
|
|
34
|
+
/* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */
|
|
35
|
+
display: grid;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
|
|
40
|
+
.media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
1
44
|
/* ==========================================================================
|
|
2
45
|
Reset
|
|
3
46
|
========================================================================== */
|
|
@@ -625,32 +668,6 @@
|
|
|
625
668
|
opacity: 1;
|
|
626
669
|
}
|
|
627
670
|
|
|
628
|
-
/* ==========================================================================
|
|
629
|
-
Tooltip Label State Visibility for Audio Skins
|
|
630
|
-
|
|
631
|
-
Data-attribute-driven visibility rules for multi-state tooltip labels.
|
|
632
|
-
Uses adjacent sibling selectors to match button state → tooltip content.
|
|
633
|
-
========================================================================== */
|
|
634
|
-
|
|
635
|
-
/* --- All multi-state labels hidden by default --- */
|
|
636
|
-
|
|
637
|
-
.media-tooltip-label {
|
|
638
|
-
display: none;
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
/* --- Active label per state --- */
|
|
642
|
-
|
|
643
|
-
/* Play: ended → replay */
|
|
644
|
-
.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
|
|
645
|
-
/* Play: paused (not ended) → play */
|
|
646
|
-
.media-button--play:not([data-ended])[data-paused] + .media-tooltip
|
|
647
|
-
.media-tooltip-label--play,
|
|
648
|
-
/* Play: playing (not paused, not ended) → pause */
|
|
649
|
-
.media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
|
|
650
|
-
.media-tooltip-label--pause {
|
|
651
|
-
display: block;
|
|
652
|
-
}
|
|
653
|
-
|
|
654
671
|
|
|
655
672
|
/* ==========================================================================
|
|
656
673
|
Root
|
|
@@ -1,34 +1,23 @@
|
|
|
1
1
|
import { safeDefine } from "../safe-define.js";
|
|
2
|
-
import {
|
|
3
|
-
import "../media/container.js";
|
|
4
|
-
import "../ui/error-dialog.js";
|
|
5
|
-
import "../ui/mute-button.js";
|
|
6
|
-
import "../ui/play-button.js";
|
|
7
|
-
import "../ui/playback-rate-button.js";
|
|
8
|
-
import "../ui/popover.js";
|
|
9
|
-
import "../ui/seek-button.js";
|
|
10
|
-
import "../ui/time.js";
|
|
11
|
-
import "../ui/time-slider.js";
|
|
12
|
-
import "../ui/tooltip.js";
|
|
13
|
-
import "../ui/tooltip-group.js";
|
|
14
|
-
import "../ui/volume-slider.js";
|
|
2
|
+
import { SkinElement } from "../skin-element.js";
|
|
15
3
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
4
|
+
import "./ui.js";
|
|
16
5
|
import skin_default from "../../_virtual/inline-css_src/define/audio/skin.js";
|
|
17
|
-
import {
|
|
6
|
+
import { createShadowStyle, createTemplate } from "@videojs/utils/dom";
|
|
18
7
|
//#region src/define/audio/skin.ts
|
|
19
8
|
const SEEK_TIME = 10;
|
|
20
9
|
function getTemplateHTML() {
|
|
21
|
-
return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"
|
|
10
|
+
return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
22
11
|
}
|
|
23
|
-
var AudioSkinElement = class extends
|
|
12
|
+
var AudioSkinElement = class extends SkinElement {
|
|
24
13
|
static {
|
|
25
14
|
this.tagName = "audio-skin";
|
|
26
15
|
}
|
|
27
16
|
static {
|
|
28
|
-
this.styles =
|
|
17
|
+
this.styles = createShadowStyle(skin_default);
|
|
29
18
|
}
|
|
30
19
|
static {
|
|
31
|
-
this.
|
|
20
|
+
this.template = createTemplate(getTemplateHTML());
|
|
32
21
|
}
|
|
33
22
|
};
|
|
34
23
|
safeDefine(AudioSkinElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"media-default-skin media-default-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--subtle\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time type=\"current\" class=\"media-time\"></media-time>\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"media-time\"></media-time>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinElement {\n static readonly tagName = 'audio-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;AASA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,yyBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,sLAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,y+BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,YAAA;;iBACb;;;;;;kBAEC,eAAc,iBAAY,CAAA;;;AAG7C,WAAW,iBAAc"}
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
import { safeDefine } from "../safe-define.js";
|
|
2
|
-
import {
|
|
2
|
+
import { SkinElement } from "../skin-element.js";
|
|
3
3
|
import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
|
|
4
|
-
import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
|
|
5
|
-
import "../media/container.js";
|
|
6
|
-
import "../ui/error-dialog.js";
|
|
7
|
-
import "../ui/mute-button.js";
|
|
8
|
-
import "../ui/play-button.js";
|
|
9
|
-
import "../ui/playback-rate-button.js";
|
|
10
|
-
import "../ui/popover.js";
|
|
11
|
-
import "../ui/seek-button.js";
|
|
12
|
-
import "../ui/time.js";
|
|
13
|
-
import "../ui/time-slider.js";
|
|
14
|
-
import "../ui/tooltip.js";
|
|
15
|
-
import "../ui/tooltip-group.js";
|
|
16
|
-
import "../ui/volume-slider.js";
|
|
17
4
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
18
5
|
import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
|
|
19
6
|
import { buttonGroup } from "../../skins/dist/default/default/tailwind/components/button-group.js";
|
|
@@ -22,19 +9,20 @@ import { playbackRate } from "../../skins/dist/default/default/tailwind/componen
|
|
|
22
9
|
import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
|
|
23
10
|
import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
|
|
24
11
|
import { controls, error, popup, root, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
|
|
25
|
-
import
|
|
12
|
+
import "./ui.js";
|
|
13
|
+
import { createTemplate } from "@videojs/utils/dom";
|
|
26
14
|
import { cn } from "@videojs/utils/style";
|
|
27
15
|
//#region src/define/audio/skin.tailwind.ts
|
|
28
16
|
const SEEK_TIME = 10;
|
|
29
17
|
function getTemplateHTML() {
|
|
30
|
-
return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <
|
|
18
|
+
return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></div><div class="${buttonGroup}"> <media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
31
19
|
}
|
|
32
|
-
var AudioSkinTailwindElement = class extends
|
|
20
|
+
var AudioSkinTailwindElement = class extends SkinElement {
|
|
33
21
|
static {
|
|
34
22
|
this.tagName = "audio-skin-tailwind";
|
|
35
23
|
}
|
|
36
24
|
static {
|
|
37
|
-
this.
|
|
25
|
+
this.template = createTemplate(getTemplateHTML());
|
|
38
26
|
}
|
|
39
27
|
};
|
|
40
28
|
safeDefine(AudioSkinTailwindElement);
|