@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
|
========================================================================== */
|
|
@@ -393,7 +436,8 @@
|
|
|
393
436
|
.media-default-skin > img:not([data-visible]) {
|
|
394
437
|
opacity: 0;
|
|
395
438
|
}
|
|
396
|
-
.media-default-skin media-poster ::slotted(img)
|
|
439
|
+
.media-default-skin media-poster ::slotted(img),
|
|
440
|
+
.media-default-skin media-poster img {
|
|
397
441
|
position: absolute;
|
|
398
442
|
inset: 0;
|
|
399
443
|
width: 100%;
|
|
@@ -409,6 +453,7 @@
|
|
|
409
453
|
}
|
|
410
454
|
|
|
411
455
|
.media-default-skin:fullscreen media-poster ::slotted(img),
|
|
456
|
+
.media-default-skin:fullscreen media-poster img,
|
|
412
457
|
.media-default-skin:fullscreen > img {
|
|
413
458
|
object-fit: contain;
|
|
414
459
|
}
|
|
@@ -821,50 +866,6 @@
|
|
|
821
866
|
opacity: 1;
|
|
822
867
|
}
|
|
823
868
|
|
|
824
|
-
/* ==========================================================================
|
|
825
|
-
Tooltip Label State Visibility for Video Skins
|
|
826
|
-
|
|
827
|
-
Data-attribute-driven visibility rules for multi-state tooltip labels.
|
|
828
|
-
Uses adjacent sibling selectors to match button state → tooltip content.
|
|
829
|
-
========================================================================== */
|
|
830
|
-
|
|
831
|
-
/* --- All multi-state labels hidden by default --- */
|
|
832
|
-
|
|
833
|
-
.media-tooltip-label {
|
|
834
|
-
display: none;
|
|
835
|
-
}
|
|
836
|
-
|
|
837
|
-
/* --- Active label per state --- */
|
|
838
|
-
|
|
839
|
-
/* Play: ended → replay */
|
|
840
|
-
.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
|
|
841
|
-
/* Play: paused (not ended) → play */
|
|
842
|
-
.media-button--play:not([data-ended])[data-paused] + .media-tooltip
|
|
843
|
-
.media-tooltip-label--play,
|
|
844
|
-
/* Play: playing (not paused, not ended) → pause */
|
|
845
|
-
.media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
|
|
846
|
-
.media-tooltip-label--pause,
|
|
847
|
-
/* Fullscreen: not fullscreen → enter */
|
|
848
|
-
.media-button--fullscreen:not([data-fullscreen]) + .media-tooltip
|
|
849
|
-
.media-tooltip-label--enter-fullscreen,
|
|
850
|
-
/* Fullscreen: fullscreen → exit */
|
|
851
|
-
.media-button--fullscreen[data-fullscreen] + .media-tooltip
|
|
852
|
-
.media-tooltip-label--exit-fullscreen,
|
|
853
|
-
/* Captions: not active → enable */
|
|
854
|
-
.media-button--captions:not([data-active]) + .media-tooltip
|
|
855
|
-
.media-tooltip-label--enable-captions,
|
|
856
|
-
/* Captions: active → disable */
|
|
857
|
-
.media-button--captions[data-active] + .media-tooltip
|
|
858
|
-
.media-tooltip-label--disable-captions,
|
|
859
|
-
/* PiP: not in pip → enter */
|
|
860
|
-
.media-button--pip:not([data-pip]) + .media-tooltip
|
|
861
|
-
.media-tooltip-label--enter-pip,
|
|
862
|
-
/* PiP: in pip → exit */
|
|
863
|
-
.media-button--pip[data-pip] + .media-tooltip
|
|
864
|
-
.media-tooltip-label--exit-pip {
|
|
865
|
-
display: block;
|
|
866
|
-
}
|
|
867
|
-
|
|
868
869
|
|
|
869
870
|
/* ==========================================================================
|
|
870
871
|
Root
|
|
@@ -1,40 +1,23 @@
|
|
|
1
1
|
import { safeDefine } from "../safe-define.js";
|
|
2
|
-
import {
|
|
3
|
-
import "../media/container.js";
|
|
4
|
-
import "../ui/buffering-indicator.js";
|
|
5
|
-
import "../ui/captions-button.js";
|
|
6
|
-
import "../ui/controls.js";
|
|
7
|
-
import "../ui/error-dialog.js";
|
|
8
|
-
import "../ui/fullscreen-button.js";
|
|
9
|
-
import "../ui/mute-button.js";
|
|
10
|
-
import "../ui/pip-button.js";
|
|
11
|
-
import "../ui/play-button.js";
|
|
12
|
-
import "../ui/playback-rate-button.js";
|
|
13
|
-
import "../ui/popover.js";
|
|
14
|
-
import "../ui/poster.js";
|
|
15
|
-
import "../ui/seek-button.js";
|
|
16
|
-
import "../ui/time.js";
|
|
17
|
-
import "../ui/time-slider.js";
|
|
18
|
-
import "../ui/tooltip.js";
|
|
19
|
-
import "../ui/tooltip-group.js";
|
|
20
|
-
import "../ui/volume-slider.js";
|
|
2
|
+
import { SkinElement } from "../skin-element.js";
|
|
21
3
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
4
|
+
import "./ui.js";
|
|
22
5
|
import skin_default from "../../_virtual/inline-css_src/define/video/skin.js";
|
|
23
|
-
import {
|
|
6
|
+
import { createShadowStyle, createTemplate } from "@videojs/utils/dom";
|
|
24
7
|
//#region src/define/video/skin.ts
|
|
25
8
|
const SEEK_TIME = 10;
|
|
26
9
|
function getTemplateHTML() {
|
|
27
|
-
return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><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--primary">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls 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--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><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--primary">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls 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--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" })} <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><div class="media-surface media-preview media-slider__preview"><media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail><media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value> ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })} </div></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="video-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="video-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><media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip"> ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip></div></media-tooltip-group></media-controls><div class="media-overlay"></div></media-container>`;
|
|
28
11
|
}
|
|
29
|
-
var VideoSkinElement = class extends
|
|
12
|
+
var VideoSkinElement = class extends SkinElement {
|
|
30
13
|
static {
|
|
31
14
|
this.tagName = "video-skin";
|
|
32
15
|
}
|
|
33
16
|
static {
|
|
34
|
-
this.styles =
|
|
17
|
+
this.styles = createShadowStyle(skin_default);
|
|
35
18
|
}
|
|
36
19
|
static {
|
|
37
|
-
this.
|
|
20
|
+
this.template = createTemplate(getTemplateHTML());
|
|
38
21
|
}
|
|
39
22
|
};
|
|
40
23
|
safeDefine(VideoSkinElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { safeDefine } from '../safe-define';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/error-dialog';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"media-default-skin media-default-skin--video\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster>\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n <div class=\"media-surface\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </div>\n </media-buffering-indicator>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog media-surface\">\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--primary\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls 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\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </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--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' })}\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\n <div class=\"media-surface media-preview media-slider__preview\">\n <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"media-time media-preview__time\"></media-slider-value>\n ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n </div>\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=\"video-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=\"video-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\n <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n </media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinElement.tagName]: VideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,iQAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,wvBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,0qBAAA,WAAA,WAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,yjBAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,qqBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,sbAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,mcAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEC"}
|
|
1
|
+
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/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--video\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster>\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n <div class=\"media-surface\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </div>\n </media-buffering-indicator>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog media-surface\">\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--primary\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls 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--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' })}\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\n <div class=\"media-surface media-preview media-slider__preview\">\n <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"media-time media-preview__time\"></media-slider-value>\n ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n </div>\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=\"video-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=\"video-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\n <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinElement extends SkinElement {\n static readonly tagName = 'video-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinElement.tagName]: VideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;AASA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,iQAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,wvBAAA,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,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,0qBAAA,WAAA,WAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,yjBAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,qqBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,0PAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,qQAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,YAAA;;iBACb;;;;;;kBAEC,eAAA,iBAAA,CAAA"}
|
|
@@ -1,25 +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/buffering-indicator.js";
|
|
7
|
-
import "../ui/captions-button.js";
|
|
8
|
-
import "../ui/controls.js";
|
|
9
|
-
import "../ui/error-dialog.js";
|
|
10
|
-
import "../ui/fullscreen-button.js";
|
|
11
|
-
import "../ui/mute-button.js";
|
|
12
|
-
import "../ui/pip-button.js";
|
|
13
|
-
import "../ui/play-button.js";
|
|
14
|
-
import "../ui/playback-rate-button.js";
|
|
15
|
-
import "../ui/popover.js";
|
|
16
|
-
import "../ui/poster.js";
|
|
17
|
-
import "../ui/seek-button.js";
|
|
18
|
-
import "../ui/time.js";
|
|
19
|
-
import "../ui/time-slider.js";
|
|
20
|
-
import "../ui/tooltip.js";
|
|
21
|
-
import "../ui/tooltip-group.js";
|
|
22
|
-
import "../ui/volume-slider.js";
|
|
23
4
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
24
5
|
import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
|
|
25
6
|
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
|
|
@@ -28,19 +9,20 @@ import { seek } from "../../skins/dist/default/default/tailwind/components/seek.
|
|
|
28
9
|
import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
|
|
29
10
|
import { poster } from "../../skins/dist/default/default/tailwind/components/poster.js";
|
|
30
11
|
import { bufferingIndicator, buttonGroupEnd, buttonGroupStart, controls, error, popup, preview, root, slider, time } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
|
|
31
|
-
import
|
|
12
|
+
import "./ui.js";
|
|
13
|
+
import { createTemplate } from "@videojs/utils/dom";
|
|
32
14
|
import { cn } from "@videojs/utils/style";
|
|
33
15
|
//#region src/define/video/skin.tailwind.ts
|
|
34
16
|
const SEEK_TIME = 10;
|
|
35
17
|
function getTemplateHTML() {
|
|
36
|
-
return `<media-container class="${root(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> <div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><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.primary)}">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${buttonGroupStart}"> <
|
|
18
|
+
return `<media-container class="${root(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> <div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><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.primary)}">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${buttonGroupStart}"> <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><div class="${preview.root}"> <media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail><media-slider-value type="pointer" class="${preview.time}"></media-slider-value> ${renderIcon("spinner", { class: cn(icon, preview.spinner) })} </div></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></div><div class="${buttonGroupEnd}"> <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="video-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="video-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><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}"> ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })} ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip></div></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
|
|
37
19
|
}
|
|
38
|
-
var VideoSkinTailwindElement = class extends
|
|
20
|
+
var VideoSkinTailwindElement = class extends SkinElement {
|
|
39
21
|
static {
|
|
40
22
|
this.tagName = "video-skin-tailwind";
|
|
41
23
|
}
|
|
42
24
|
static {
|
|
43
|
-
this.
|
|
25
|
+
this.template = createTemplate(getTemplateHTML());
|
|
44
26
|
}
|
|
45
27
|
};
|
|
46
28
|
safeDefine(VideoSkinTailwindElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n playbackRate,\n popup,\n poster,\n preview,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/error-dialog';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${root(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\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.primary)}\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\n <span class=\"${tooltipState.play.wrapper}\">\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)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\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.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\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\n <div class=\"${preview.root}\">\n <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"${preview.time}\"></media-slider-value>\n ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n </div>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></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=\"video-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=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" 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=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <span class=\"${tooltipState.captions.wrapper}\">\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.pip.wrapper}\">\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.fullscreen.wrapper}\">\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n </media-tooltip>\n </span>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n playbackRate,\n popup,\n poster,\n preview,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/default/tailwind/video.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 './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${root(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\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.primary)}\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\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.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\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\n <div class=\"${preview.root}\">\n <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"${preview.time}\"></media-slider-value>\n ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n </div>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></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=\"video-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=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" 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=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'video-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import "./player.js";
|
|
2
|
+
import "../ui/buffering-indicator.js";
|
|
3
|
+
import "../ui/captions-button.js";
|
|
4
|
+
import "../ui/controls.js";
|
|
5
|
+
import "../ui/error-dialog.js";
|
|
6
|
+
import "../ui/fullscreen-button.js";
|
|
7
|
+
import "../ui/mute-button.js";
|
|
8
|
+
import "../ui/pip-button.js";
|
|
9
|
+
import "../ui/play-button.js";
|
|
10
|
+
import "../ui/playback-rate-button.js";
|
|
11
|
+
import "../ui/popover.js";
|
|
12
|
+
import "../ui/poster.js";
|
|
13
|
+
import "../ui/seek-button.js";
|
|
14
|
+
import "../ui/time.js";
|
|
15
|
+
import "../ui/time-slider.js";
|
|
16
|
+
import "../ui/tooltip.js";
|
|
17
|
+
import "../ui/tooltip-group.js";
|
|
18
|
+
import "../ui/volume-slider.js";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import "../../shared/tailwind/icon-state.js";
|
|
2
|
-
import "../../shared/tailwind/tooltip-state.js";
|
|
3
2
|
import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
|
|
4
3
|
import { controls as controls$1 } from "./components/controls.js";
|
|
5
4
|
import { error as error$1 } from "./components/error.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-surface-background-color:oklch(1_0_0/0.5)]\", \"[--media-surface-inner-border-color:oklch(1_0_0/0.1)]\", \"[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"[--media-surface-shadow-color:oklch(0_0_0/0.15)]\", \"[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.75rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-surface-background-color:oklch(0_0_0/0.4)]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(1_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]\", \"dark:contrast-more:[--media-surface-outer-border-color:transparent]\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, time };\n\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,uDAAuD,yDAAyD,0DAA0D,oDAAoD,8DAA8D,oDAAoD,iDAAiD,6CAA6C,uDAAuD,yCAAyC,yCAAyC,iEAAiE,6DAA6D,yDAAyD,4DAA4D,qEAAqE,iGAAiG,iEAAiE,wGAAwG,wEAAwE,sGAAsG,sEAAsE,4GAA4G,4EAA4E,uGAAuG,sEAAsE;AAC1yD,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;CAGA,EADA,GAAG,sBACmD,GAA3C,GAAG,qBAAqB,WAAW,QAAQ;AAEvD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,qFAAqF,iFAAiF,wCAAwC;CAChiB,SAAS;CACT"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import "../../shared/tailwind/icon-state.js";
|
|
2
|
-
import "../../shared/tailwind/tooltip-state.js";
|
|
3
2
|
import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
|
|
4
3
|
import { controls as controls$1 } from "./components/controls.js";
|
|
5
4
|
import { error as error$1 } from "./components/error.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time as time$1 } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,contain)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-spring-transition:linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"[--media-video-border-radius:var(--media-border-radius,2rem)]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-timing-function:ease-out]\", \"[--media-error-dialog-transition-duration:350ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-error-dialog-transition-timing-function:var(--media-spring-transition)]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-surface-background-color:oklch(1_0_0/0.1)]\", \"[--media-surface-inner-border-color:oklch(1_0_0/0.05)]\", \"[--media-surface-outer-border-color:oklch(0_0_0/0.1)]\", \"[--media-surface-shadow-color:oklch(0_0_0/0.15)]\", \"[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-error-dialog-transition-timing-function:ease-out]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.5rem]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(0_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.25)]\", \"contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.25)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]\", \"contrast-more:[--media-surface-outer-border-color:transparent]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:25ms]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-5.5rem]\", \"@2xl/media-root:has-[[data-controls][data-visible]]:[&>*]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\"\n] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\nconst controls = cn(controls$1, surface, \"absolute bottom-2 inset-x-2 flex-wrap\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function) origin-bottom\", \"duration-(--media-controls-transition-duration)\", \"[@media(pointer:fine)]:will-change-[scale,filter,opacity]\", \"[@media(pointer:fine)]:transition-[scale,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[scale,opacity]\", \"[@media(pointer:coarse)]:transition-[scale,opacity]\", \"not-data-visible:pointer-events-none not-data-visible:opacity-0\", \"motion-safe:not-data-visible:scale-90\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\", \"@2xl/media-root:bottom-3 @2xl/media-root:inset-x-3 @2xl/media-root:flex-nowrap @2xl/media-root:gap-x-0.5 @2xl/media-root:p-1\");\nconst buttonGroupStart = cn(buttonGroup, \"flex-1 @2xl/media-root:flex-none\");\nconst buttonGroupEnd = cn(buttonGroup, \"flex-1 justify-end @2xl/media-root:flex-none\");\nconst time = {\n\t...time$1,\n\tgroup: cn(time$1.group, \"grow-0 shrink-0 basis-full order-[-1] px-2.5\", \"@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]\")\n};\nconst preview = {\n\t...preview$1,\n\troot: cn(\"[--media-preview-max-width:11rem] [--media-preview-padding:-1.125rem] [--media-preview-inset:calc((100cqi-100%)/2)]\", \"absolute [left:clamp(calc(var(--media-preview-max-width)/2+var(--media-preview-padding)-var(--media-preview-inset)),var(--media-slider-pointer),calc(100%-var(--media-preview-max-width)/2-var(--media-preview-padding)+var(--media-preview-inset)))] bottom-[calc(100%+1.2rem)] -translate-x-1/2\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm\", \"[&:has([role=img][data-loading])]:max-h-24\", surface, preview$1.root),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-(--media-preview-max-width)\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-white/20 ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface, \"text-shadow-2xs text-shadow-black/25\"),\n\tcontent: cn(error$1.content, \"text-shadow-inherit\"),\n\ttitle: cn(error$1.title, \"text-base\")\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, poster, preview, root, seek, slider, time };\n\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,8RAA8R;CAC9R,wMAAwM,CAAC;CACzM,EAAE,6HAA6H,iEAAiE,gDAAgD,0DAA0D,oDAAoD,iDAAiD,oFAAoF,6CAA6C,uDAAuD,uDAAuD,0DAA0D,yDAAyD,oDAAoD,8DAA8D,iEAAiE,6DAA6D,4EAA4E,yCAAyC,wCAAwC,yDAAyD,iGAAiG,iEAAiE,wGAAwG,wEAAwE,kGAAkG,kEAAkE,iHAAiH,mHAAmH,uGAAuG,qCAAqC,sCAAsC,8EAA8E,yEAAyE,+FAA+F,CAAC,cAAc;CACx0E;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,SAAS,yCAAyC,wDAAwD,+BAA+B,oEAAoE,mDAAmD,6DAA6D,4DAA4D,wDAAwD,uDAAuD,mEAAmE,yCAAyC,+DAA+D,+HAA+H;AAClzB,MAAM,mBAAmB,GAAG,aAAa,mCAAmC;AAC5E,MAAM,iBAAiB,GAAG,aAAa,+CAA+C;AACtF,MAAM,OAAO;CACZ,GAAG;CACH,OAAO,GAAG,OAAO,OAAO,gDAAgD,oGAAoG;CAC5K;AACD,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,uHAAuH,qSAAqS,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,SAAS,UAAU,KAAK;CAC9zB,WAAW,GAAG,UAAU,WAAW,oCAAoC;CACvE;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,kCAAkC;CAC5D;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,SAAS,uCAAuC;CAC3E,SAAS,GAAG,QAAQ,SAAS,sBAAsB;CACnD,OAAO,GAAG,QAAQ,OAAO,YAAY;CACrC"}
|
|
@@ -3,7 +3,6 @@ import { error as error$1 } from "./components/error.js";
|
|
|
3
3
|
import { popup as popup$1 } from "./components/popup.js";
|
|
4
4
|
import { root as root$1 } from "./components/root.js";
|
|
5
5
|
import "../../shared/tailwind/icon-state.js";
|
|
6
|
-
import "../../shared/tailwind/tooltip-state.js";
|
|
7
6
|
import "./components/buffering.js";
|
|
8
7
|
import "./components/button.js";
|
|
9
8
|
import "./components/button-group.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-controls-background-color:oklch(1_0_0)]\", \"[--media-controls-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-controls-border-color:oklch(0_0_0/0.05)]\", \"[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-background-color:oklch(1_0_0/0.1)]\", \"[--media-tooltip-border-color:oklch(0_0_0/0.05)]\", \"[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-tooltip-text-color:currentColor]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.75rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-controls-background-color:oklch(0_0_0)]\", \"dark:[--media-controls-border-color:oklch(1_0_0/0.1)]\", \"dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(1_0_0)]\", \"contrast-more:[--media-tooltip-background-color:oklch(1_0_0)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]\", \"dark:contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]\");\nconst controls = cn(controls$1, \"p-1.5 gap-2\", \"rounded-(--media-border-radius,1rem)\", \"peer-data-open/error:[&_*]:invisible\", \"text-(--media-controls-text-color)\", \"ring-1 ring-(color:--media-controls-border-color)\");\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"p-0 pl-16\", \"bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent\")\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-4 rounded-full px-5 pr-2\", \"bg-(--media-controls-background-color)\", \"transition-[opacity,filter,scale] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs group-data-starting-style/error:scale-95\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs group-data-ending-style/error:scale-95\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, popup, root, seek, slider, time };\n\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,OAAO,GAAG,QAAQ,oDAAoD,+DAA+D,qDAAqD,yEAAyE,oDAAoD,iDAAiD,6CAA6C,uDAAuD,uDAAuD,oDAAoD,8DAA8D,6CAA6C,yCAAyC,yCAAyC,iEAAiE,6DAA6D,yDAAyD,yDAAyD,yDAAyD,8EAA8E,iGAAiG,iEAAiE,sGAAsG,qEAAqE;AAC97C,MAAM,WAAW,GAAG,YAAY,eAAe,wCAAwC,wCAAwC,sCAAsC,oDAAoD;AACzN,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,aAAa,mGAAmG;CAC5I;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,wEAAwE,0CAA0C,8CAA8C,uDAAuD,iDAAiD,8HAA8H,wHAAwH,wCAAwC;CACjjB,SAAS;CACT"}
|
|
@@ -3,7 +3,6 @@ import { error as error$1 } from "./components/error.js";
|
|
|
3
3
|
import { popup as popup$1 } from "./components/popup.js";
|
|
4
4
|
import { root as root$1 } from "./components/root.js";
|
|
5
5
|
import "../../shared/tailwind/icon-state.js";
|
|
6
|
-
import "../../shared/tailwind/tooltip-state.js";
|
|
7
6
|
import "./components/buffering.js";
|
|
8
7
|
import "./components/button.js";
|
|
9
8
|
import { buttonGroup } from "./components/button-group.js";
|