@videojs/html 10.0.0-beta.30 → 10.0.0-beta.31
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/audio-minimal-ui.dev.js +1 -1
- package/cdn/audio-minimal-ui.js +1 -1
- package/cdn/audio-minimal.dev.js +4 -4
- 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-player.dev.js +1 -0
- package/cdn/audio-player.js +1 -0
- package/cdn/audio-ui.dev.js +1 -1
- package/cdn/audio-ui.js +1 -1
- package/cdn/audio.dev.js +4 -4
- 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 +1 -1
- package/cdn/background.js +1 -1
- package/cdn/{compounds-D1FPw7jg.js → compounds-BA8gXlmJ.js} +32 -188
- package/cdn/compounds-BA8gXlmJ.js.map +1 -0
- package/cdn/compounds-DKoFv2f8.js +8 -0
- package/cdn/compounds-DKoFv2f8.js.map +1 -0
- package/cdn/{create-player-5UrHNqBI.js → create-player-BEEc22xK.js} +18 -2
- package/cdn/{create-player-5UrHNqBI.js.map → create-player-BEEc22xK.js.map} +1 -1
- package/cdn/create-player-D5WQ_jzZ.js +2 -0
- package/cdn/{create-player-LjvbIxIq.js.map → create-player-D5WQ_jzZ.js.map} +1 -1
- package/cdn/{gesture-element-BbNy1Pjt.js → gesture-element-CxdagZOo.js} +2 -2
- package/cdn/{gesture-element-BbNy1Pjt.js.map → gesture-element-CxdagZOo.js.map} +1 -1
- package/cdn/{gesture-element-KdpjbbBD.js → gesture-element-x6kojUJk.js} +3 -3
- package/cdn/{gesture-element-KdpjbbBD.js.map → gesture-element-x6kojUJk.js.map} +1 -1
- package/cdn/i18n-CE4KxKuj.js.map +1 -1
- package/cdn/{i18n-DeI9j-ko.js → i18n-C_WyuIHd.js} +2 -2
- package/cdn/{i18n-DeI9j-ko.js.map → i18n-C_WyuIHd.js.map} +1 -1
- package/cdn/i18n-DyF_NfCk.js.map +1 -1
- package/cdn/i18n-o3_t8fxw.js +2 -0
- package/cdn/{i18n-R3TQ8P2f.js.map → i18n-o3_t8fxw.js.map} +1 -1
- package/cdn/live-audio-minimal-ui.dev.js +2 -0
- package/cdn/live-audio-minimal-ui.js +1 -0
- package/cdn/live-audio-minimal.dev.d.ts +1 -0
- package/cdn/live-audio-minimal.dev.js +97 -0
- package/cdn/live-audio-minimal.dev.js.map +1 -0
- package/cdn/live-audio-minimal.js +2 -0
- package/cdn/live-audio-minimal.js.map +1 -0
- package/cdn/live-audio-player.dev.d.ts +1 -0
- package/cdn/live-audio-player.dev.js +1 -0
- package/cdn/live-audio-player.js +1 -0
- package/cdn/live-audio-ui.dev.d.ts +1 -0
- package/cdn/live-audio-ui.dev.js +2 -0
- package/cdn/live-audio-ui.js +1 -0
- package/cdn/live-audio.dev.d.ts +1 -0
- package/cdn/live-audio.dev.js +97 -0
- package/cdn/live-audio.dev.js.map +1 -0
- package/cdn/live-audio.js +2 -0
- package/cdn/live-audio.js.map +1 -0
- package/cdn/{live-button-element-CylfQD0v.js → live-button-element-BFufqFFV.js} +3 -3
- package/cdn/{live-button-element-CylfQD0v.js.map → live-button-element-BFufqFFV.js.map} +1 -1
- package/cdn/live-button-element-CEbrR59d.js +2 -0
- package/cdn/{live-button-element-C-WypudK.js.map → live-button-element-CEbrR59d.js.map} +1 -1
- package/cdn/live-video-minimal-ui.dev.d.ts +1 -0
- package/cdn/live-video-minimal-ui.dev.js +2 -0
- package/cdn/live-video-minimal-ui.js +1 -0
- package/cdn/live-video-minimal.dev.js +5 -36
- package/cdn/live-video-minimal.dev.js.map +1 -1
- package/cdn/live-video-minimal.js +1 -1
- package/cdn/live-video-minimal.js.map +1 -1
- package/cdn/live-video-player.dev.d.ts +1 -0
- package/cdn/live-video-player.dev.js +1 -0
- package/cdn/live-video-player.js +1 -0
- package/cdn/live-video-ui.dev.d.ts +1 -0
- package/cdn/live-video-ui.dev.js +2 -0
- package/cdn/live-video-ui.js +1 -0
- package/cdn/live-video.dev.js +5 -38
- package/cdn/live-video.dev.js.map +1 -1
- package/cdn/live-video.js +1 -1
- package/cdn/live-video.js.map +1 -1
- package/cdn/media/hls-background-video.dev.js +1 -1
- package/cdn/media/hls-background-video.js +1 -1
- package/cdn/media/hls-background-video.js.map +1 -1
- package/cdn/media/mux-background-video.dev.js +1 -1
- package/cdn/media/mux-background-video.js +1 -1
- package/cdn/media/mux-background-video.js.map +1 -1
- package/cdn/media/mux-data.dev.js +1 -1
- package/cdn/media/mux-data.dev.js.map +1 -1
- package/cdn/media/mux-data.js +1 -1
- package/cdn/media/mux-data.js.map +1 -1
- package/cdn/{media-B4uT13xV.js → media-B4uT13xV2.js} +1 -1
- package/cdn/media-B4uT13xV2.js.map +1 -0
- package/cdn/{media-D6Xer97u.js → media-D6Xer97u2.js} +1 -1
- package/cdn/media-D6Xer97u2.js.map +1 -0
- package/cdn/minimal-ui-0eDc51VS.js +2 -0
- package/cdn/{minimal-ui-D3XCtSx_.js.map → minimal-ui-0eDc51VS.js.map} +1 -1
- package/cdn/minimal-ui-C2vRjwax.js +36 -0
- package/cdn/minimal-ui-C2vRjwax.js.map +1 -0
- package/cdn/{minimal-ui-ajeAXABk.js → minimal-ui-CLBGXvp5.js} +4 -4
- package/cdn/{minimal-ui-ajeAXABk.js.map → minimal-ui-CLBGXvp5.js.map} +1 -1
- package/cdn/minimal-ui-ClCvmIm4.js +2 -0
- package/cdn/minimal-ui-ClCvmIm4.js.map +1 -0
- package/cdn/minimal-ui-DDM48qb3.js +2 -0
- package/cdn/minimal-ui-DDM48qb3.js.map +1 -0
- package/cdn/minimal-ui-DY4C1zGt.js +23 -0
- package/cdn/minimal-ui-DY4C1zGt.js.map +1 -0
- package/cdn/{minimal-ui-KUzZkG_3.js → minimal-ui-Dk4_XLp4.js} +8 -8
- package/cdn/{minimal-ui-KUzZkG_3.js.map → minimal-ui-Dk4_XLp4.js.map} +1 -1
- package/cdn/{minimal-ui-p9QCZfCz.js → minimal-ui-JHiRECkp.js} +2 -2
- package/cdn/{minimal-ui-p9QCZfCz.js.map → minimal-ui-JHiRECkp.js.map} +1 -1
- package/cdn/{player-POHYt5tr.js → player-BGAk4zHP.js} +2 -2
- package/cdn/{player-POHYt5tr.js.map → player-BGAk4zHP.js.map} +1 -1
- package/cdn/{player-CngT-cVQ.js → player-Bb9oakYz.js} +2 -2
- package/cdn/{player-CngT-cVQ.js.map → player-Bb9oakYz.js.map} +1 -1
- package/cdn/{player-BXQMSpgR.js → player-BrlY19A2.js} +2 -2
- package/cdn/{player-BXQMSpgR.js.map → player-BrlY19A2.js.map} +1 -1
- package/cdn/{player-BuxifKSM.js → player-CQENs37B.js} +2 -2
- package/cdn/{player-BuxifKSM.js.map → player-CQENs37B.js.map} +1 -1
- package/cdn/player-DdOHaN9e.js +2 -0
- package/cdn/player-DdOHaN9e.js.map +1 -0
- package/cdn/{player-B5zkgqwT.js → player-DtcVc6sP.js} +2 -2
- package/cdn/{player-B5zkgqwT.js.map → player-DtcVc6sP.js.map} +1 -1
- package/cdn/{player-DMP2pc3L.js → player-bEUswOOg.js} +2 -2
- package/cdn/{player-DMP2pc3L.js.map → player-bEUswOOg.js.map} +1 -1
- package/cdn/player-qLOeas8M.js +18 -0
- package/cdn/player-qLOeas8M.js.map +1 -0
- package/cdn/poster-element-BA7p_OJL.js +2 -0
- package/cdn/{poster-element-Djlm5fwC.js.map → poster-element-BA7p_OJL.js.map} +1 -1
- package/cdn/{poster-element-CuCEBVr3.js → poster-element-BTynHaSW.js} +4 -3
- package/cdn/{poster-element-CuCEBVr3.js.map → poster-element-BTynHaSW.js.map} +1 -1
- package/cdn/radio-options-controller-Cz5yFvUh.js +138 -0
- package/cdn/radio-options-controller-Cz5yFvUh.js.map +1 -0
- package/cdn/radio-options-controller-hybHJkeC.js +2 -0
- package/cdn/radio-options-controller-hybHJkeC.js.map +1 -0
- package/cdn/seek-button-element-C4g3qPbc.js +2 -0
- package/cdn/{seek-button-element-CgaXVFPS.js.map → seek-button-element-C4g3qPbc.js.map} +1 -1
- package/cdn/{seek-button-element-BD2caCd5.js → seek-button-element-CirtfRSE.js} +4 -3
- package/cdn/seek-button-element-CirtfRSE.js.map +1 -0
- package/cdn/{skin-element-PDwjO4v0.js → skin-element-BF1a0EIj.js} +2 -2
- package/cdn/{skin-element-PDwjO4v0.js.map → skin-element-BF1a0EIj.js.map} +1 -1
- package/cdn/skin-element-BTt7JKoR.js +2 -0
- package/cdn/{skin-element-DE8OodF5.js.map → skin-element-BTt7JKoR.js.map} +1 -1
- package/cdn/template-BKUlUXWF.js +2 -0
- package/cdn/template-BKUlUXWF.js.map +1 -0
- package/cdn/template-ClYP_1RH.js +31 -0
- package/cdn/template-ClYP_1RH.js.map +1 -0
- package/cdn/text-element-DW2FuvdI.js +2 -0
- package/cdn/text-element-DW2FuvdI.js.map +1 -0
- package/cdn/{text-element-dyiwucQB.js → text-element-LzVNdZbp.js} +50 -2
- package/cdn/text-element-LzVNdZbp.js.map +1 -0
- package/cdn/time-slider-chapters-element-Bf4gYppH.js +2 -0
- package/cdn/{time-slider-chapters-element-b6oeaZtJ.js.map → time-slider-chapters-element-Bf4gYppH.js.map} +1 -1
- package/cdn/{time-slider-chapters-element-BTMqnBhM.js → time-slider-chapters-element-DMkTYNg3.js} +5 -3
- package/cdn/time-slider-chapters-element-DMkTYNg3.js.map +1 -0
- package/cdn/{ui-BsUcH4YJ.js → ui-BL6b1m09.js} +7 -7
- package/cdn/{ui-BsUcH4YJ.js.map → ui-BL6b1m09.js.map} +1 -1
- package/cdn/ui-BbpSrILu.js +2 -0
- package/cdn/{ui-DLvwCbsU.js.map → ui-BbpSrILu.js.map} +1 -1
- package/cdn/ui-BmCfIOl5.js +38 -0
- package/cdn/ui-BmCfIOl5.js.map +1 -0
- package/cdn/ui-Bu9GX-M_.js +28 -0
- package/cdn/ui-Bu9GX-M_.js.map +1 -0
- package/cdn/ui-CBrFrvmm.js +2 -0
- package/cdn/{ui-CxftD4RF.js.map → ui-CBrFrvmm.js.map} +1 -1
- package/cdn/{ui-CtONjPC2.js → ui-CQsP0EFA.js} +9 -9
- package/cdn/{ui-CtONjPC2.js.map → ui-CQsP0EFA.js.map} +1 -1
- package/cdn/ui-Crbp7m4I.js +2 -0
- package/cdn/ui-Crbp7m4I.js.map +1 -0
- package/cdn/ui-DRKjxVsj.js +2 -0
- package/cdn/ui-DRKjxVsj.js.map +1 -0
- package/cdn/video-minimal-ui.dev.js +1 -1
- package/cdn/video-minimal-ui.js +1 -1
- package/cdn/video-minimal.dev.js +13 -12
- 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-player.dev.d.ts +1 -0
- package/cdn/video-player.dev.js +1 -0
- package/cdn/video-player.js +1 -0
- package/cdn/video-ui.dev.js +1 -1
- package/cdn/video-ui.js +1 -1
- package/cdn/video.dev.js +14 -13
- package/cdn/video.dev.js.map +1 -1
- package/cdn/video.js +1 -1
- package/cdn/video.js.map +1 -1
- 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/live-audio/minimal-skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-audio/minimal-skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-audio/skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-audio/skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-video/minimal-skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-video/minimal-skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-video/skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/live-video/skin.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 +39 -7
- package/dist/default/define/audio/skin.css +31 -7
- package/dist/default/define/live-audio/minimal-skin.css +39 -7
- package/dist/default/define/live-audio/skin.css +31 -7
- package/dist/default/define/live-video/minimal-skin.css +39 -7
- package/dist/default/define/live-video/minimal-skin.js +1 -1
- package/dist/default/define/live-video/minimal-skin.js.map +1 -1
- package/dist/default/define/live-video/minimal-skin.tailwind.js +1 -1
- package/dist/default/define/live-video/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/live-video/skin.css +31 -7
- package/dist/default/define/live-video/skin.js +1 -1
- package/dist/default/define/live-video/skin.js.map +1 -1
- package/dist/default/define/live-video/skin.tailwind.js +1 -1
- package/dist/default/define/live-video/skin.tailwind.js.map +1 -1
- package/dist/default/define/video/minimal-skin.css +39 -7
- package/dist/default/define/video/minimal-skin.js +1 -1
- package/dist/default/define/video/minimal-skin.js.map +1 -1
- package/dist/default/define/video/minimal-skin.tailwind.js +1 -1
- package/dist/default/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/video/skin.css +31 -7
- package/dist/default/define/video/skin.js +1 -1
- package/dist/default/define/video/skin.js.map +1 -1
- package/dist/default/define/video/skin.tailwind.js +1 -1
- package/dist/default/define/video/skin.tailwind.js.map +1 -1
- package/dist/default/i18n/provider-mixin.js +24 -0
- package/dist/default/i18n/provider-mixin.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/button-group.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/button-group.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/controls.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/controls.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/menu.js +8 -7
- package/dist/default/skins/dist/default/default/tailwind/components/menu.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/time.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/time.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/button-group.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/button-group.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/controls.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/controls.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/menu.js +8 -7
- package/dist/default/skins/dist/default/minimal/tailwind/components/menu.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/time.js +2 -2
- package/dist/default/skins/dist/default/minimal/tailwind/components/time.js.map +1 -1
- package/dist/default/ui/slider/slider-element.js +1 -2
- package/dist/default/ui/slider/slider-element.js.map +1 -1
- package/dist/default/ui/time-slider/time-slider-element.js +1 -2
- package/dist/default/ui/time-slider/time-slider-element.js.map +1 -1
- package/dist/default/ui/volume-slider/volume-slider-element.js +1 -2
- 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/live-audio/minimal-skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-audio/minimal-skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-audio/skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-audio/skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-video/minimal-skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-video/minimal-skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-video/skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/live-video/skin.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 +39 -7
- package/dist/dev/define/audio/skin.css +31 -7
- package/dist/dev/define/live-audio/minimal-skin.css +39 -7
- package/dist/dev/define/live-audio/skin.css +31 -7
- package/dist/dev/define/live-video/minimal-skin.css +39 -7
- package/dist/dev/define/live-video/minimal-skin.js +1 -1
- package/dist/dev/define/live-video/minimal-skin.js.map +1 -1
- package/dist/dev/define/live-video/minimal-skin.tailwind.js +1 -1
- package/dist/dev/define/live-video/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/live-video/skin.css +31 -7
- package/dist/dev/define/live-video/skin.js +1 -1
- package/dist/dev/define/live-video/skin.js.map +1 -1
- package/dist/dev/define/live-video/skin.tailwind.js +1 -1
- package/dist/dev/define/live-video/skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.css +39 -7
- package/dist/dev/define/video/minimal-skin.js +8 -8
- package/dist/dev/define/video/minimal-skin.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.tailwind.js +12 -12
- package/dist/dev/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/skin.css +31 -7
- package/dist/dev/define/video/skin.js +8 -8
- package/dist/dev/define/video/skin.js.map +1 -1
- package/dist/dev/define/video/skin.tailwind.js +12 -12
- package/dist/dev/define/video/skin.tailwind.js.map +1 -1
- package/dist/dev/i18n/provider-mixin.d.ts.map +1 -1
- package/dist/dev/i18n/provider-mixin.js +24 -0
- package/dist/dev/i18n/provider-mixin.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/button-group.js +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/button-group.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/controls.js +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/controls.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/menu.js +8 -7
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/menu.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/time.js +1 -1
- package/dist/dev/packages/skins/dist/default/default/tailwind/components/time.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/button-group.js +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/button-group.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/controls.js +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/controls.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/menu.js +8 -7
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/menu.js.map +1 -1
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/time.js +2 -2
- package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/time.js.map +1 -1
- package/dist/dev/ui/slider/slider-element.d.ts.map +1 -1
- package/dist/dev/ui/slider/slider-element.js +1 -2
- package/dist/dev/ui/slider/slider-element.js.map +1 -1
- package/dist/dev/ui/time-slider/time-slider-element.d.ts.map +1 -1
- package/dist/dev/ui/time-slider/time-slider-element.js +1 -2
- package/dist/dev/ui/time-slider/time-slider-element.js.map +1 -1
- package/dist/dev/ui/volume-slider/volume-slider-element.d.ts.map +1 -1
- package/dist/dev/ui/volume-slider/volume-slider-element.js +1 -2
- package/dist/dev/ui/volume-slider/volume-slider-element.js.map +1 -1
- package/docs/README.md +1 -1
- package/docs/concepts/media-sources.md +26 -2
- package/docs/concepts/skins.md +39 -15
- package/docs/how-to/customize-skins.md +7662 -48
- package/docs/how-to/i18n-switch-locale.md +27 -0
- package/docs/how-to/installation.md +4 -4
- package/docs/how-to/migrate-from-plyr.md +1 -5
- package/docs/llms.txt +7 -0
- package/docs/reference/cloudflare-video.md +483 -0
- package/docs/reference/dash-video.md +54 -0
- package/docs/reference/feature-metadata.md +3 -1
- package/docs/reference/hlsjs-video.md +626 -0
- package/docs/reference/native-hls-video.md +40 -0
- package/docs/reference/shaka-video.md +588 -0
- package/docs/reference/spotify-audio.md +394 -0
- package/docs/reference/tiktok-video.md +504 -0
- package/docs/reference/title.md +1 -1
- package/docs/reference/twitch-video.md +447 -0
- package/docs/reference/vimeo-video.md +1038 -0
- package/docs/reference/youtube-video.md +573 -0
- package/package.json +9 -9
- package/cdn/audio-headless.dev.js +0 -1
- package/cdn/audio-headless.js +0 -1
- package/cdn/compounds-CHlzbAKu.js +0 -8
- package/cdn/compounds-CHlzbAKu.js.map +0 -1
- package/cdn/compounds-D1FPw7jg.js.map +0 -1
- package/cdn/create-player-LjvbIxIq.js +0 -2
- package/cdn/i18n-R3TQ8P2f.js +0 -2
- package/cdn/live-button-element-C-WypudK.js +0 -2
- package/cdn/media-B4uT13xV.js.map +0 -1
- package/cdn/media-D6Xer97u.js.map +0 -1
- package/cdn/minimal-ui-D3XCtSx_.js +0 -2
- package/cdn/poster-element-Djlm5fwC.js +0 -2
- package/cdn/seek-button-element-BD2caCd5.js.map +0 -1
- package/cdn/seek-button-element-CgaXVFPS.js +0 -2
- package/cdn/skin-element-DE8OodF5.js +0 -2
- package/cdn/text-element-BJyj7nLo.js +0 -2
- package/cdn/text-element-BJyj7nLo.js.map +0 -1
- package/cdn/text-element-dyiwucQB.js.map +0 -1
- package/cdn/time-slider-chapters-element-BTMqnBhM.js.map +0 -1
- package/cdn/time-slider-chapters-element-b6oeaZtJ.js +0 -2
- package/cdn/ui-CxftD4RF.js +0 -2
- package/cdn/ui-DLvwCbsU.js +0 -2
- package/cdn/video-headless.dev.js +0 -1
- package/cdn/video-headless.js +0 -1
- /package/cdn/{audio-headless.dev.d.ts → audio-player.dev.d.ts} +0 -0
- /package/cdn/{video-headless.dev.d.ts → live-audio-minimal-ui.dev.d.ts} +0 -0
|
@@ -11,7 +11,7 @@ function getTemplateHTML() {
|
|
|
11
11
|
return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"><img alt="" decoding="async"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </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"></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"></media-alert-dialog-close></div></div></media-error-dialog><media-controls class="media-surface media-controls media-controls--root"><media-tooltip-group><div class="media-surface media-controls media-controls--primary"><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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></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></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-time-slider-chapters class="media-slider__chapters"><template><div class="media-slider__chapter"><media-slider-track class="media-slider__track media-slider__chapter-track"><media-slider-buffer class="media-slider__buffer"></media-slider-buffer><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="media-slider__thumb"></media-slider-thumb><media-slider-preview overflow="visible" class="media-slider__preview"><div class="media-surface media-thumbnail media-slider__thumbnail"><media-slider-thumbnail class="media-thumbnail__image"></media-slider-thumbnail> ${renderIcon("spinner", { class: "media-thumbnail__spinner media-icon" })} </div><div class="media-slider__value"><media-time-slider-chapter-title class="media-slider__chapter-title"></media-time-slider-chapter-title><media-slider-value type="pointer" class="media-time"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="media-time"></media-time></div><div class="media-button-group"><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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="media-button media-button--subtle media-button--icon media-button--settings"> ${renderIcon("gear", { class: "media-icon media-icon--settings" })} ${renderText(settingsText, {
|
|
12
12
|
id: "settings-label",
|
|
13
13
|
class: "media-sr-only"
|
|
14
|
-
})} </button><media-menu id="settings-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--settings"><div class="media-menu__group"><media-menu-item commandfor="settings-quality-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("switches", { class: "media-icon" })} ${renderText(qualityText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speech", { class: "media-icon" })} ${renderText(audioText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speed", { class: "media-icon" })} ${renderText(speedText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("captions-off", { class: "media-icon" })} ${renderText(captionsText)} <span class="media-menu__hint"><span data-part="hint" class="media-menu__hint-label"></span> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(qualityText)} </media-menu-item><div class="media-menu__separator"></div><media-quality-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span><span data-part="label"></span><sup data-part="tier" class="media-menu__tier"></sup></span><span data-part="badge" class="media-badge"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(audioText)} </media-menu-item><div class="media-menu__separator"></div><media-audio-track-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(speedText)} </media-menu-item><div class="media-menu__separator"></div><media-playback-rate-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(captionsText)} </media-menu-item><div class="media-menu__separator"></div><media-captions-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="media-surface media-tooltip"> ${renderText(settingsText)} </media-tooltip></div></div><div class="media-surface media-controls media-controls--secondary"><div class="media-button-group"><media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast"> ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })} ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay"> ${renderIcon("airplay-enter", { class: "media-icon media-icon--airplay-enter" })} ${renderIcon("airplay-exit", { class: "media-icon media-icon--airplay-exit" })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="media-overlay"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="media-sr-only"></media-status-announcer><div class="media-input-indicator-overlay"><media-volume-indicator hidden class="media-surface media-volume-indicator"><media-volume-indicator-fill class="media-volume-indicator__content"> ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} <media-volume-indicator-value class="media-volume-indicator__value"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="media-surface media-status-indicator media-status-indicator--state" ><div class="media-status-indicator__content"> ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} <media-status-indicator-value class="media-status-indicator__value"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="media-seek-indicator"> ${renderIcon("chevron", { class: "media-icon media-icon--seek" })} <media-seek-indicator-value class="media-seek-indicator__value"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="media-status-indicator media-status-indicator--playback"> ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-status-indicator></div></media-container>`;
|
|
14
|
+
})} </button><media-menu id="settings-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--settings"><div class="media-menu__group"><media-menu-item commandfor="settings-quality-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("switches", { class: "media-icon" })} ${renderText(qualityText)} <span class="media-menu__hint"><bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speech", { class: "media-icon" })} ${renderText(audioText)} <span class="media-menu__hint"><bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("speed", { class: "media-icon" })} ${renderText(speedText)} <span class="media-menu__hint"><bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="media-menu__item media-menu__item--submenu"> ${renderIcon("captions-off", { class: "media-icon" })} ${renderText(captionsText)} <span class="media-menu__hint"><bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi> ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(qualityText)} </media-menu-item><div class="media-menu__separator"></div><media-quality-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span><bdi data-part="label" dir="auto"></bdi><sup data-part="tier" class="media-menu__tier"></sup></span><span data-part="badge" class="media-badge"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(audioText)} </media-menu-item><div class="media-menu__separator"></div><media-audio-track-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(speedText)} </media-menu-item><div class="media-menu__separator"></div><media-playback-rate-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="media-menu__panel"><media-menu-item class="media-menu__back"> ${renderIcon("chevron", { class: "media-icon media-menu__chevron media-icon--flipped" })} ${renderText(captionsText)} </media-menu-item><div class="media-menu__separator"></div><media-captions-radio-group class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="media-surface media-tooltip"> ${renderText(settingsText)} </media-tooltip></div></div><div class="media-surface media-controls media-controls--secondary"><div class="media-button-group"><media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast"> ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })} ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay"> ${renderIcon("airplay-enter", { class: "media-icon media-icon--airplay-enter" })} ${renderIcon("airplay-exit", { class: "media-icon media-icon--airplay-exit" })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip"><media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="media-overlay"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="media-sr-only"></media-status-announcer><div class="media-input-indicator-overlay"><media-volume-indicator hidden class="media-surface media-volume-indicator"><media-volume-indicator-fill class="media-volume-indicator__content"> ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} <media-volume-indicator-value class="media-volume-indicator__value"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="media-surface media-status-indicator media-status-indicator--state" ><div class="media-status-indicator__content"> ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} <media-status-indicator-value class="media-status-indicator__value"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="media-seek-indicator"> ${renderIcon("chevron", { class: "media-icon media-icon--seek" })} <media-seek-indicator-value class="media-seek-indicator__value"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="media-status-indicator media-status-indicator--playback"> ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-status-indicator></div></media-container>`;
|
|
15
15
|
}
|
|
16
16
|
var VideoSkinElement = class extends SkinElement {
|
|
17
17
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\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\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\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\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\"></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\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls class=\"media-surface media-controls media-controls--root\">\n <media-tooltip-group>\n <div class=\"media-surface media-controls media-controls--primary\">\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 </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-time-slider-chapters class=\"media-slider__chapters\">\n <template>\n <div class=\"media-slider__chapter\">\n <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n </div>\n </template>\n </media-time-slider-chapters>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n </div>\n <div class=\"media-slider__value\">\n <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n </div>\n </media-slider-preview>\n </media-time-slider>\n <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n </div>\n\n <div class=\"media-button-group\">\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n </button>\n <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n <div class=\"media-menu__group\">\n <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('switches', { class: 'media-icon' })}\n ${renderText(qualityText)}\n <span class=\"media-menu__hint\">\n <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('speech', { class: 'media-icon' })}\n ${renderText(audioText)}\n <span class=\"media-menu__hint\">\n <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('speed', { class: 'media-icon' })}\n ${renderText(speedText)}\n <span class=\"media-menu__hint\">\n <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('captions-off', { class: 'media-icon' })}\n ${renderText(captionsText)}\n <span class=\"media-menu__hint\">\n <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n </div>\n\n <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(qualityText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-quality-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span>\n <span data-part=\"label\"></span>\n <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n </span>\n <span data-part=\"badge\" class=\"media-badge\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-quality-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(audioText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-audio-track-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-audio-track-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(speedText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-playback-rate-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(captionsText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-captions-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n </media-menu>\n <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n ${renderText(settingsText)}\n </media-tooltip>\n </div>\n </div>\n\n <div class=\"media-surface media-controls media-controls--secondary\">\n <div class=\"media-button-group\">\n <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n <div class=\"media-input-indicator-overlay\">\n <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"media-surface media-status-indicator media-status-indicator--state\"\n >\n <div class=\"media-status-indicator__content\">\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-seek-indicator hidden class=\"media-seek-indicator\">\n ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n </media-seek-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-status-indicator>\n </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":"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"}
|
|
1
|
+
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\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\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\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\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\"></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\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls class=\"media-surface media-controls media-controls--root\">\n <media-tooltip-group>\n <div class=\"media-surface media-controls media-controls--primary\">\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 </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-time-slider-chapters class=\"media-slider__chapters\">\n <template>\n <div class=\"media-slider__chapter\">\n <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n </div>\n </template>\n </media-time-slider-chapters>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n </div>\n <div class=\"media-slider__value\">\n <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n </div>\n </media-slider-preview>\n </media-time-slider>\n <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n </div>\n\n <div class=\"media-button-group\">\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n </button>\n <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n <div class=\"media-menu__group\">\n <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('switches', { class: 'media-icon' })}\n ${renderText(qualityText)}\n <span class=\"media-menu__hint\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('speech', { class: 'media-icon' })}\n ${renderText(audioText)}\n <span class=\"media-menu__hint\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('speed', { class: 'media-icon' })}\n ${renderText(speedText)}\n <span class=\"media-menu__hint\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n ${renderIcon('captions-off', { class: 'media-icon' })}\n ${renderText(captionsText)}\n <span class=\"media-menu__hint\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n </span>\n </media-menu-item>\n </div>\n\n <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(qualityText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-quality-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span>\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n </span>\n <span data-part=\"badge\" class=\"media-badge\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-quality-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(audioText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-audio-track-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-audio-track-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(speedText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-playback-rate-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n <media-menu-item class=\"media-menu__back\">\n ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n ${renderText(captionsText)}\n </media-menu-item>\n <div class=\"media-menu__separator\"></div>\n <media-captions-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n </media-menu>\n <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n ${renderText(settingsText)}\n </media-tooltip>\n </div>\n </div>\n\n <div class=\"media-surface media-controls media-controls--secondary\">\n <div class=\"media-button-group\">\n <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n <div class=\"media-input-indicator-overlay\">\n <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"media-surface media-status-indicator media-status-indicator--state\"\n >\n <div class=\"media-status-indicator__content\">\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-seek-indicator hidden class=\"media-seek-indicator\">\n ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n </media-seek-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-status-indicator>\n </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":"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"}
|
|
@@ -20,7 +20,7 @@ function getTemplateHTML() {
|
|
|
20
20
|
return `<media-container class="${container(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"><img alt="" decoding="async"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> ${renderIcon("spinner", { class: icon })} </media-buffering-indicator><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}"></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)}"></media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${primaryControls}"> <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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></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></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-time-slider-chapters class="${slider.chapters}"> <template><div class="${slider.chapter.base}"> <media-slider-track class="${slider.chapter.track}"> <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track></div></template></media-time-slider-chapters><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb><media-slider-preview overflow="visible" class="${slider.preview}"> <div class="${cn(thumbnail.root, slider.thumbnail)}"> <media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail> ${renderIcon("spinner", { class: cn(icon, thumbnail.spinner) })} </div><div class="${slider.value}"> <media-time-slider-chapter-title class="${slider.chapterTitle}"></media-time-slider-chapter-title><media-slider-value type="pointer"></media-slider-value></div></media-slider-preview></media-time-slider><media-time toggle type="remaining" class="${time.duration}"></media-time></div><div class="${cn(buttonGroupEnd, menu.settingsGroup)}"> <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, button.captions, 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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><button id="settings-trigger" commandfor="settings-menu" aria-labelledby="settings-label" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}"> ${renderIcon("gear", { class: cn(icon, menu.settingsIcon) })} ${renderText(settingsText, {
|
|
21
21
|
id: "settings-label",
|
|
22
22
|
class: "sr-only"
|
|
23
|
-
})} </button><media-menu id="settings-menu" side="top" align="center" class="${menu.settings}"> <div class="${menu.group}"> <media-menu-item commandfor="settings-quality-menu" class="${menu.item}"> ${renderIcon("switches", { class: cn(icon, menu.icon) })} ${renderText(qualityText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="${menu.item}"> ${renderIcon("speech", { class: icon })} ${renderText(audioText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="${menu.item}"> ${renderIcon("speed", { class: cn(icon, menu.icon) })} ${renderText(speedText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="${menu.item}"> ${renderIcon("captions-off", { class: cn(icon, menu.icon) })} ${renderText(captionsText)} <span class="${menu.hint}"> <span data-part="hint" class="${menu.hintLabel}"></span> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(qualityText)} </media-menu-item><div class="${menu.separator}"></div><media-quality-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span><span data-part="label"></span><sup data-part="tier" class="${menu.tier}"></sup></span><span data-part="badge" class="${badge}"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(audioText)} </media-menu-item><div class="${menu.separator}"></div><media-audio-track-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: icon })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(speedText)} </media-menu-item><div class="${menu.separator}"></div><media-playback-rate-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })} ${renderText(captionsText)} </media-menu-item><div class="${menu.separator}"></div><media-captions-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="${cn(popup.tooltip)}"> ${renderText(settingsText)} </media-tooltip></div></div><div class="${secondaryControls}"> <div class="${buttonGroupEnd}"> <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}"> ${renderIcon("cast-enter", { class: cn(icon, iconState.cast.enter) })} ${renderIcon("cast-exit", { class: cn(icon, iconState.cast.exit) })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}"> ${renderIcon("airplay-enter", { class: cn(icon, iconState.airplay.enter) })} ${renderIcon("airplay-exit", { class: cn(icon, iconState.airplay.exit) })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="${overlay}"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="sr-only"></media-status-announcer><div class="${inputIndicatorOverlay}"> <media-volume-indicator hidden class="${volumeIndicator.root}" > <media-volume-indicator-fill class="${volumeIndicator.content}"> ${renderIcon("volume-high", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })} ${renderIcon("volume-low", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })} ${renderIcon("volume-off", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })} <media-volume-indicator-value class="${volumeIndicator.value}"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${statusIndicator.root}"> <div class="${statusIndicator.content}"> ${renderIcon("captions-on", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })} ${renderIcon("captions-off", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })} ${renderIcon("fullscreen-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })} ${renderIcon("fullscreen-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })} ${renderIcon("pip-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })} ${renderIcon("pip-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })} <media-status-indicator-value class="${statusIndicator.value}"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="${seekIndicator.root}"> ${renderIcon("chevron", { class: seekIndicator.icon })} <media-seek-indicator-value class="${seekIndicator.value}"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="${statusIndicator.playback.root}"> ${renderIcon("play", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })} ${renderIcon("pause", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })} </media-status-indicator></div></media-container>`;
|
|
23
|
+
})} </button><media-menu id="settings-menu" side="top" align="center" class="${menu.settings}"> <div class="${menu.group}"> <media-menu-item commandfor="settings-quality-menu" class="${menu.item}"> ${renderIcon("switches", { class: cn(icon, menu.icon) })} ${renderText(qualityText)} <span class="${menu.hint}"> <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-audio-menu" class="${menu.item}"> ${renderIcon("speech", { class: icon })} ${renderText(audioText)} <span class="${menu.hint}"> <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi> ${renderIcon("chevron", { class: cn(icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-speed-menu" class="${menu.item}"> ${renderIcon("speed", { class: cn(icon, menu.icon) })} ${renderText(speedText)} <span class="${menu.hint}"> <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item><media-menu-item commandfor="settings-captions-menu" class="${menu.item}"> ${renderIcon("captions-off", { class: cn(icon, menu.icon) })} ${renderText(captionsText)} <span class="${menu.hint}"> <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })} </span></media-menu-item></div><media-menu id="settings-quality-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })} ${renderText(qualityText)} </media-menu-item><div class="${menu.separator}"></div><media-quality-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span><bdi data-part="label" dir="auto"></bdi><sup data-part="tier" class="${menu.tier}"></sup></span><span data-part="badge" class="${badge}"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-quality-radio-group></media-menu><media-menu id="settings-audio-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })} ${renderText(audioText)} </media-menu-item><div class="${menu.separator}"></div><media-audio-track-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: icon })} </media-menu-item-indicator></media-menu-radio-item></template></media-audio-track-radio-group></media-menu><media-menu id="settings-speed-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })} ${renderText(speedText)} </media-menu-item><div class="${menu.separator}"></div><media-playback-rate-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-radio-group></media-menu><media-menu id="settings-captions-menu" class="${menu.submenuPanel}"> <media-menu-item class="${menu.back}"> ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })} ${renderText(captionsText)} </media-menu-item><div class="${menu.separator}"></div><media-captions-radio-group class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <bdi data-part="label" dir="auto"></bdi><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: cn(icon, menu.icon) })} </media-menu-item-indicator></media-menu-radio-item></template></media-captions-radio-group></media-menu></media-menu><media-tooltip id="settings-tooltip" trigger="settings-trigger" side="top" class="${cn(popup.tooltip)}"> ${renderText(settingsText)} </media-tooltip></div></div><div class="${secondaryControls}"> <div class="${buttonGroupEnd}"> <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}"> ${renderIcon("cast-enter", { class: cn(icon, iconState.cast.enter) })} ${renderIcon("cast-exit", { class: cn(icon, iconState.cast.exit) })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip><media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}"> ${renderIcon("airplay-enter", { class: cn(icon, iconState.airplay.enter) })} ${renderIcon("airplay-exit", { class: cn(icon, iconState.airplay.exit) })} </media-airplay-button><media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"> <media-tooltip-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></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-label></media-tooltip-label><media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut></media-tooltip></div></div></media-tooltip-group></media-controls><div class="${overlay}"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="f" action="toggleFullscreen"></media-hotkey><media-hotkey keys="c" action="toggleSubtitles"></media-hotkey><media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture><media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture><media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture><media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture><media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture><media-status-announcer class="sr-only"></media-status-announcer><div class="${inputIndicatorOverlay}"> <media-volume-indicator hidden class="${volumeIndicator.root}" > <media-volume-indicator-fill class="${volumeIndicator.content}"> ${renderIcon("volume-high", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })} ${renderIcon("volume-low", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })} ${renderIcon("volume-off", { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })} <media-volume-indicator-value class="${volumeIndicator.value}"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${statusIndicator.root}"> <div class="${statusIndicator.content}"> ${renderIcon("captions-on", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })} ${renderIcon("captions-off", { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })} ${renderIcon("fullscreen-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })} ${renderIcon("fullscreen-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })} ${renderIcon("pip-enter", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })} ${renderIcon("pip-exit", { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })} <media-status-indicator-value class="${statusIndicator.value}"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="${seekIndicator.root}"> ${renderIcon("chevron", { class: seekIndicator.icon })} <media-seek-indicator-value class="${seekIndicator.value}"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="${statusIndicator.playback.root}"> ${renderIcon("play", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })} ${renderIcon("pause", { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })} </media-status-indicator></div></media-container>`;
|
|
24
24
|
}
|
|
25
25
|
var VideoSkinTailwindElement = class extends SkinElement {
|
|
26
26
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n badge,\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconFlipped,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n primaryControls,\n secondaryControls,\n seekIndicator,\n slider,\n statusIndicator,\n thumbnail,\n time,\n volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${container(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\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n ${renderIcon('spinner', { class: icon })}\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}\"></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)}\"></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=\"${primaryControls}\">\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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\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 </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-time-slider-chapters class=\"${slider.chapters}\">\n <template>\n <div class=\"${slider.chapter.base}\">\n <media-slider-track class=\"${slider.chapter.track}\">\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n </div>\n </template>\n </media-time-slider-chapters>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n <media-slider-preview overflow=\"visible\" class=\"${slider.preview}\">\n <div class=\"${cn(thumbnail.root, slider.thumbnail)}\">\n <media-slider-thumbnail class=\"${thumbnail.image}\"></media-slider-thumbnail>\n ${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}\n </div>\n <div class=\"${slider.value}\">\n <media-time-slider-chapter-title class=\"${slider.chapterTitle}\"></media-time-slider-chapter-title>\n <media-slider-value type=\"pointer\"></media-slider-value>\n </div>\n </media-slider-preview>\n </media-time-slider>\n <media-time toggle type=\"remaining\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${cn(buttonGroupEnd, menu.settingsGroup)}\">\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, 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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}\">\n ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}\n ${renderText(settingsText, { id: 'settings-label', class: 'sr-only' })}\n </button>\n <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"${menu.settings}\">\n <div class=\"${menu.group}\">\n <media-menu-item commandfor=\"settings-quality-menu\" class=\"${menu.item}\">\n ${renderIcon('switches', { class: cn(icon, menu.icon) })}\n ${renderText(qualityText)}\n <span class=\"${menu.hint}\">\n <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-audio-menu\" class=\"${menu.item}\">\n ${renderIcon('speech', { class: icon })}\n ${renderText(audioText)}\n <span class=\"${menu.hint}\">\n <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-speed-menu\" class=\"${menu.item}\">\n ${renderIcon('speed', { class: cn(icon, menu.icon) })}\n ${renderText(speedText)}\n <span class=\"${menu.hint}\">\n <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-captions-menu\" class=\"${menu.item}\">\n ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}\n ${renderText(captionsText)}\n <span class=\"${menu.hint}\">\n <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n </div>\n\n <media-menu id=\"settings-quality-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n ${renderText(qualityText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-quality-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span>\n <span data-part=\"label\"></span>\n <sup data-part=\"tier\" class=\"${menu.tier}\"></sup>\n </span>\n <span data-part=\"badge\" class=\"${badge}\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-quality-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-audio-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n ${renderText(audioText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-audio-track-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: icon })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-audio-track-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-speed-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n ${renderText(speedText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-playback-rate-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-captions-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n ${renderText(captionsText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n </media-menu>\n <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n ${renderText(settingsText)}\n </media-tooltip>\n </div>\n </div>\n\n <div class=\"${secondaryControls}\">\n <div class=\"${buttonGroupEnd}\">\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator\n hidden\n class=\"${volumeIndicator.root}\"\n >\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n\n <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"${statusIndicator.root}\">\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n\n <media-seek-indicator hidden class=\"${seekIndicator.root}\">\n ${renderIcon('chevron', { class: seekIndicator.icon })}\n <media-seek-indicator-value class=\"${seekIndicator.value}\"></media-seek-indicator-value>\n </media-seek-indicator>\n\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </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":";;;;;;;;;;;;;;;;;;AAqCA,SAAS,kBAAkB;CACzB,OAAO,2BAAA,UAAA,IAAA,EAAA,iEAAA,OAAA,IAAA,EAAA,8GAAA,mBAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,KAAA,CAAA,EAAA,0DAAA,MAAA,KAAA,iBAAA,MAAA,OAAA,iBAAA,MAAA,QAAA,sCAAA,MAAA,MAAA,sEAAA,MAAA,YAAA,uDAAA,MAAA,QAAA,sCAAA,GAAA,OAAA,MAAA,OAAA,OAAA,EAAA,wGAAA,SAAA,sCAAA,gBAAA,iBAAA,iBAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,MAAA,EAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,OAAA,EAAA,CAAA,EAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,EAAA,0EAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,yGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,MAAA,EAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,SAAA,EAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,SAAA,EAAA,CAAA,EAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,EAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,MAAA,EAAA,iCAAA,OAAA,KAAA,8EAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,IAAA,EAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,UAAA,EAAA,iFAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,wCAAA,OAAA,SAAA,2BAAA,OAAA,QAAA,KAAA,gCAAA,OAAA,QAAA,MAAA,iCAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,MAAA,EAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,IAAA,EAAA,sHAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,EAAA,yEAAA,OAAA,QAAA,iBAAA,GAAA,UAAA,MAAA,OAAA,SAAA,EAAA,oCAAA,UAAA,MAAA,8BAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,OAAA,EAAA,CAAA,EAAA,qBAAA,OAAA,MAAA,6CAAA,OAAA,aAAA,0LAAA,KAAA,SAAA,mCAAA,GAAA,gBAAA,KAAA,aAAA,EAAA,iEAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,OAAA,UAAA,UAAA,SAAA,MAAA,EAAA,KAAA,WAAA,gBAAA,EAAA,OAAA,GAAA,MAAA,UAAA,SAAA,GAAA,EAAA,CAAA,EAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,SAAA,EAAA,EAAA,CAAA,EAAA,kFAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,8IAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,KAAA,eAAA,EAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,KAAA,YAAA,EAAA,CAAA,EAAA,GAAA,WAAA,cAAA;EAAA,IAAA;EAAA,OAAA;CAAA,CAAA,EAAA,4EAAA,KAAA,SAAA,iBAAA,KAAA,MAAA,gEAAA,KAAA,KAAA,KAAA,WAAA,YAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,WAAA,EAAA,gBAAA,KAAA,KAAA,mCAAA,KAAA,UAAA,YAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,OAAA,EAAA,CAAA,EAAA,qFAAA,KAAA,KAAA,KAAA,WAAA,UAAA,EAAA,OAAA,KAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,gBAAA,KAAA,KAAA,mCAAA,KAAA,UAAA,YAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,OAAA,EAAA,CAAA,EAAA,qFAAA,KAAA,KAAA,KAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,gBAAA,KAAA,KAAA,mCAAA,KAAA,UAAA,YAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,OAAA,EAAA,CAAA,EAAA,wFAAA,KAAA,KAAA,KAAA,WAAA,gBAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,gBAAA,KAAA,KAAA,mCAAA,KAAA,UAAA,YAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,OAAA,EAAA,CAAA,EAAA,gFAAA,KAAA,aAAA,6BAAA,KAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,SAAA,WAAA,EAAA,CAAA,EAAA,GAAA,WAAA,WAAA,EAAA,iCAAA,KAAA,UAAA,4CAAA,KAAA,MAAA,6CAAA,KAAA,KAAA,uEAAA,KAAA,KAAA,gDAAA,MAAA,yDAAA,KAAA,UAAA,KAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,uJAAA,KAAA,aAAA,6BAAA,KAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,SAAA,WAAA,EAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,iCAAA,KAAA,UAAA,gDAAA,KAAA,MAAA,6CAAA,KAAA,KAAA,kFAAA,KAAA,UAAA,KAAA,WAAA,SAAA,EAAA,OAAA,KAAA,CAAA,EAAA,2JAAA,KAAA,aAAA,6BAAA,KAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,SAAA,WAAA,EAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,iCAAA,KAAA,UAAA,kDAAA,KAAA,MAAA,6CAAA,KAAA,KAAA,kFAAA,KAAA,UAAA,KAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,gKAAA,KAAA,aAAA,6BAAA,KAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,KAAA,MAAA,KAAA,SAAA,WAAA,EAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,iCAAA,KAAA,UAAA,6CAAA,KAAA,MAAA,6CAAA,KAAA,KAAA,kFAAA,KAAA,UAAA,KAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,KAAA,IAAA,EAAA,CAAA,EAAA,2MAAA,GAAA,MAAA,OAAA,EAAA,KAAA,WAAA,YAAA,EAAA,2CAAA,kBAAA,iBAAA,eAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,MAAA,EAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,EAAA,GAAA,WAAA,aAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,IAAA,EAAA,CAAA,EAAA,0EAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,uGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,QAAA,MAAA,EAAA,KAAA,WAAA,iBAAA,EAAA,OAAA,GAAA,MAAA,UAAA,QAAA,KAAA,EAAA,CAAA,EAAA,GAAA,WAAA,gBAAA,EAAA,OAAA,GAAA,MAAA,UAAA,QAAA,IAAA,EAAA,CAAA,EAAA,gFAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,+FAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,IAAA,MAAA,EAAA,KAAA,WAAA,aAAA,EAAA,OAAA,GAAA,MAAA,UAAA,IAAA,GAAA,EAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,OAAA,GAAA,MAAA,UAAA,IAAA,EAAA,EAAA,CAAA,EAAA,wEAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,6GAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,WAAA,MAAA,EAAA,KAAA,WAAA,oBAAA,EAAA,OAAA,GAAA,MAAA,UAAA,WAAA,KAAA,EAAA,CAAA,EAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,GAAA,MAAA,UAAA,WAAA,IAAA,EAAA,CAAA,EAAA,sFAAA,GAAA,MAAA,OAAA,EAAA,+EAAA,MAAA,gBAAA,4GAAA,QAAA,qpDAAA,sBAAA,2CAAA,gBAAA,KAAA,0CAAA,gBAAA,QAAA,KAAA,WAAA,eAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,GAAA,EAAA,CAAA,EAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,GAAA,EAAA,CAAA,EAAA,wCAAA,gBAAA,MAAA,kMAAA,gBAAA,KAAA,iBAAA,gBAAA,QAAA,KAAA,WAAA,eAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,UAAA,EAAA,CAAA,EAAA,GAAA,WAAA,gBAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,WAAA,EAAA,CAAA,EAAA,GAAA,WAAA,oBAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,eAAA,EAAA,CAAA,EAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,cAAA,EAAA,CAAA,EAAA,GAAA,WAAA,aAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,YAAA,EAAA,OAAA,GAAA,gBAAA,KAAA,MAAA,gBAAA,KAAA,OAAA,EAAA,CAAA,EAAA,wCAAA,gBAAA,MAAA,sGAAA,cAAA,KAAA,KAAA,WAAA,WAAA,EAAA,OAAA,cAAA,KAAA,CAAA,EAAA,sCAAA,cAAA,MAAA,qHAAA,gBAAA,SAAA,KAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,gBAAA,SAAA,KAAA,MAAA,gBAAA,SAAA,KAAA,IAAA,EAAA,CAAA,EAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,gBAAA,SAAA,KAAA,MAAA,gBAAA,SAAA,KAAA,KAAA,EAAA,CAAA,EAAA;AAqUT;AAEA,IAAa,2BAAb,cAA8C,YAAY;;EAC9B,KAAA,UAAA;;;EACR,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,wBAAwB"}
|
|
1
|
+
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n badge,\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconFlipped,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n primaryControls,\n secondaryControls,\n seekIndicator,\n slider,\n statusIndicator,\n thumbnail,\n time,\n volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${container(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\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n ${renderIcon('spinner', { class: icon })}\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}\"></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)}\"></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=\"${primaryControls}\">\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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\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 </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-time-slider-chapters class=\"${slider.chapters}\">\n <template>\n <div class=\"${slider.chapter.base}\">\n <media-slider-track class=\"${slider.chapter.track}\">\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n </div>\n </template>\n </media-time-slider-chapters>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n <media-slider-preview overflow=\"visible\" class=\"${slider.preview}\">\n <div class=\"${cn(thumbnail.root, slider.thumbnail)}\">\n <media-slider-thumbnail class=\"${thumbnail.image}\"></media-slider-thumbnail>\n ${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}\n </div>\n <div class=\"${slider.value}\">\n <media-time-slider-chapter-title class=\"${slider.chapterTitle}\"></media-time-slider-chapter-title>\n <media-slider-value type=\"pointer\"></media-slider-value>\n </div>\n </media-slider-preview>\n </media-time-slider>\n <media-time toggle type=\"remaining\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${cn(buttonGroupEnd, menu.settingsGroup)}\">\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, 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 <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}\">\n ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}\n ${renderText(settingsText, { id: 'settings-label', class: 'sr-only' })}\n </button>\n <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"${menu.settings}\">\n <div class=\"${menu.group}\">\n <media-menu-item commandfor=\"settings-quality-menu\" class=\"${menu.item}\">\n ${renderIcon('switches', { class: cn(icon, menu.icon) })}\n ${renderText(qualityText)}\n <span class=\"${menu.hint}\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-audio-menu\" class=\"${menu.item}\">\n ${renderIcon('speech', { class: icon })}\n ${renderText(audioText)}\n <span class=\"${menu.hint}\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-speed-menu\" class=\"${menu.item}\">\n ${renderIcon('speed', { class: cn(icon, menu.icon) })}\n ${renderText(speedText)}\n <span class=\"${menu.hint}\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n <media-menu-item commandfor=\"settings-captions-menu\" class=\"${menu.item}\">\n ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}\n ${renderText(captionsText)}\n <span class=\"${menu.hint}\">\n <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n </span>\n </media-menu-item>\n </div>\n\n <media-menu id=\"settings-quality-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n ${renderText(qualityText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-quality-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span>\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <sup data-part=\"tier\" class=\"${menu.tier}\"></sup>\n </span>\n <span data-part=\"badge\" class=\"${badge}\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-quality-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-audio-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n ${renderText(audioText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-audio-track-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: icon })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-audio-track-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-speed-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n ${renderText(speedText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-playback-rate-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-radio-group>\n </media-menu>\n\n <media-menu id=\"settings-captions-menu\" class=\"${menu.submenuPanel}\">\n <media-menu-item class=\"${menu.back}\">\n ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n ${renderText(captionsText)}\n </media-menu-item>\n <div class=\"${menu.separator}\"></div>\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n </media-menu>\n <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n ${renderText(settingsText)}\n </media-tooltip>\n </div>\n </div>\n\n <div class=\"${secondaryControls}\">\n <div class=\"${buttonGroupEnd}\">\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </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)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator\n hidden\n class=\"${volumeIndicator.root}\"\n >\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n\n <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"${statusIndicator.root}\">\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n\n <media-seek-indicator hidden class=\"${seekIndicator.root}\">\n ${renderIcon('chevron', { class: seekIndicator.icon })}\n <media-seek-indicator-value class=\"${seekIndicator.value}\"></media-seek-indicator-value>\n </media-seek-indicator>\n\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </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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"}
|
|
@@ -3,6 +3,7 @@ import { resolveProviderLocale } from "./locale.js";
|
|
|
3
3
|
import { ContextProvider } from "@videojs/element/context";
|
|
4
4
|
import { DEFAULT_LOCALE, createTranslator, findLocaleKeys, getBrowserTranslations, getI18nTranslations, loadLocale, onI18nRegistryChange, registerI18n, shouldAttemptBrowserTranslation } from "@videojs/core/i18n";
|
|
5
5
|
import { mergeLocaleOverlays, subscribeAmbientLang } from "@videojs/utils/dom";
|
|
6
|
+
import { getTextDirection } from "@videojs/utils/i18n";
|
|
6
7
|
//#region src/i18n/provider-mixin.ts
|
|
7
8
|
function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
8
9
|
return (Base) => {
|
|
@@ -10,6 +11,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
|
10
11
|
constructor(..._args) {
|
|
11
12
|
super(..._args);
|
|
12
13
|
this.lang = "";
|
|
14
|
+
this.dir = "";
|
|
13
15
|
this.#i18nProvider = new ContextProvider(this, {
|
|
14
16
|
context,
|
|
15
17
|
initialValue: {
|
|
@@ -32,6 +34,10 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
|
32
34
|
lang: {
|
|
33
35
|
type: String,
|
|
34
36
|
reflect: true
|
|
37
|
+
},
|
|
38
|
+
dir: {
|
|
39
|
+
type: String,
|
|
40
|
+
reflect: true
|
|
35
41
|
}
|
|
36
42
|
};
|
|
37
43
|
}
|
|
@@ -49,6 +55,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
|
49
55
|
#publishedLocale;
|
|
50
56
|
#publishedRegistryEpoch;
|
|
51
57
|
#publishedLazyLayer;
|
|
58
|
+
#derivedDirection;
|
|
52
59
|
get i18nValue() {
|
|
53
60
|
return this.#i18nValue;
|
|
54
61
|
}
|
|
@@ -83,6 +90,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
|
83
90
|
const localeDriftedBeforeFirstPaint = !hadLocale && this.#lazyResetStartedForLocale !== void 0 && locale !== this.#lazyResetStartedForLocale;
|
|
84
91
|
if (hadLocale || localeDriftedBeforeFirstPaint) this.#resetLazyAndLoad();
|
|
85
92
|
}
|
|
93
|
+
this.#syncDirection(locale);
|
|
86
94
|
this.#publish();
|
|
87
95
|
}
|
|
88
96
|
#resetLazyAndLoad() {
|
|
@@ -107,6 +115,22 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
|
|
|
107
115
|
#resolvedLocale() {
|
|
108
116
|
return resolveProviderLocale(this);
|
|
109
117
|
}
|
|
118
|
+
#syncDirection(locale) {
|
|
119
|
+
const current = this.dir.trim().toLowerCase();
|
|
120
|
+
const isDerived = this.#derivedDirection !== void 0 && current === this.#derivedDirection;
|
|
121
|
+
if (!this.lang.trim()) {
|
|
122
|
+
if (isDerived) this.dir = "";
|
|
123
|
+
this.#derivedDirection = void 0;
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
if (current && !isDerived) {
|
|
127
|
+
this.#derivedDirection = void 0;
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
const direction = getTextDirection(locale);
|
|
131
|
+
this.#derivedDirection = direction;
|
|
132
|
+
if (this.dir !== direction) this.dir = direction;
|
|
133
|
+
}
|
|
110
134
|
#publish() {
|
|
111
135
|
const locale = this.#resolvedLocale();
|
|
112
136
|
if (this.#publishedLocale === locale && this.#publishedRegistryEpoch === this.#registryEpoch && this.#publishedLazyLayer === this.#lazyLayer) return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider-mixin.js","names":["defaultLoader","#i18nProvider","#i18nValue","#registryUnsubscribe","#registryEpoch","#ambientUnsubscribe","#resetLazyAndLoad","#publish","#lazySeq","#lazyLayer","#resolvedLocaleForLazy","#lazyResetStartedForLocale","#resolvedLocale","#publishedLocale","#publishedRegistryEpoch","#publishedLazyLayer"],"sources":["../../../src/i18n/provider-mixin.ts"],"sourcesContent":["import {\n createTranslator,\n DEFAULT_LOCALE,\n loadLocale as defaultLoader,\n type FlatTranslations,\n findLocaleKeys,\n getBrowserTranslations,\n getI18nTranslations,\n type Locale,\n onI18nRegistryChange,\n registerI18n,\n shouldAttemptBrowserTranslation,\n} from '@videojs/core/i18n';\nimport type { PropertyValues, ReactiveElement } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { mergeLocaleOverlays, subscribeAmbientLang } from '@videojs/utils/dom';\nimport type { Constructor } from '@videojs/utils/types';\n\nimport type { I18nContext, I18nContextValue } from './context';\nimport { getFallbackTranslator } from './controller';\nimport { resolveProviderLocale } from './locale';\nimport type { LocaleLoader, ReactiveElementMixinBase } from './types';\n\nexport interface I18nProviderConfig {\n context: I18nContext;\n /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n loader?: LocaleLoader | undefined;\n}\n\nexport type I18nProviderMixin = <Base extends ReactiveElementMixinBase>(\n Base: Base\n) => Constructor<ReactiveElement> & Base;\n\nexport function createI18nProviderMixin({ context, loader = defaultLoader }: I18nProviderConfig): I18nProviderMixin {\n return <Base extends ReactiveElementMixinBase>(Base: Base) => {\n class I18nProviderElement extends Base {\n static properties = {\n ...Base.properties,\n lang: { type: String, reflect: true },\n };\n\n lang = '';\n\n readonly #i18nProvider = new ContextProvider(this, {\n context,\n initialValue: {\n translator: getFallbackTranslator(),\n locale: DEFAULT_LOCALE,\n },\n });\n\n #registryUnsubscribe: (() => void) | undefined;\n #ambientUnsubscribe: (() => void) | undefined;\n #registryEpoch = 0;\n #lazyLayer: Partial<FlatTranslations> = {};\n #lazySeq = 0;\n /** Tracks locale used for `#lazyLayer`; ambient `lang` can change without the `lang` property. */\n #resolvedLocaleForLazy: Locale | undefined;\n /** Locale snapshot when the current `#lazySeq` async load was started (see `willUpdate` drift guard). */\n #lazyResetStartedForLocale: Locale | undefined;\n #i18nValue: I18nContextValue = {\n translator: getFallbackTranslator(),\n locale: DEFAULT_LOCALE,\n };\n #publishedLocale: Locale | undefined;\n #publishedRegistryEpoch = -1;\n #publishedLazyLayer: Partial<FlatTranslations> | undefined;\n\n protected get i18nValue(): I18nContextValue {\n return this.#i18nValue;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#registryUnsubscribe = onI18nRegistryChange(() => {\n this.#registryEpoch += 1;\n this.requestUpdate();\n });\n this.#ambientUnsubscribe = subscribeAmbientLang(() => this.requestUpdate());\n this.#resetLazyAndLoad();\n this.#publish();\n this.requestUpdate();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#registryUnsubscribe?.();\n this.#registryUnsubscribe = undefined;\n this.#ambientUnsubscribe?.();\n this.#ambientUnsubscribe = undefined;\n this.#lazySeq += 1;\n this.#lazyLayer = {};\n this.#resolvedLocaleForLazy = undefined;\n this.#lazyResetStartedForLocale = undefined;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n const locale = resolveProviderLocale(this);\n if (this.#resolvedLocaleForLazy !== locale) {\n const hadLocale = this.#resolvedLocaleForLazy !== undefined;\n this.#resolvedLocaleForLazy = locale;\n const localeDriftedBeforeFirstPaint =\n !hadLocale && this.#lazyResetStartedForLocale !== undefined && locale !== this.#lazyResetStartedForLocale;\n if (hadLocale || localeDriftedBeforeFirstPaint) {\n this.#resetLazyAndLoad();\n }\n }\n this.#publish();\n }\n\n #resetLazyAndLoad(): void {\n const localeSnapshot = resolveProviderLocale(this);\n this.#lazyResetStartedForLocale = localeSnapshot;\n this.#lazySeq += 1;\n const seq = this.#lazySeq;\n this.#lazyLayer = {};\n void (async () => {\n const { merged, loadedTags } = await mergeLocaleOverlays(localeSnapshot, loader, findLocaleKeys);\n if (seq !== this.#lazySeq) return;\n if (shouldAttemptBrowserTranslation(localeSnapshot, loadedTags, merged)) {\n const browser = await getBrowserTranslations(localeSnapshot);\n if (seq !== this.#lazySeq) return;\n if (Object.keys(browser).length) registerI18n(localeSnapshot, browser);\n }\n if (seq !== this.#lazySeq) return;\n this.#lazyLayer = merged;\n this.requestUpdate();\n })();\n }\n\n #resolvedLocale(): Locale {\n return resolveProviderLocale(this);\n }\n\n #publish(): void {\n const locale = this.#resolvedLocale();\n if (\n this.#publishedLocale === locale &&\n this.#publishedRegistryEpoch === this.#registryEpoch &&\n this.#publishedLazyLayer === this.#lazyLayer\n ) {\n return;\n }\n const registryLayer = getI18nTranslations(locale);\n const translations: FlatTranslations = {\n ...registryLayer,\n ...this.#lazyLayer,\n };\n const translator = createTranslator(translations, locale);\n this.#i18nValue = { translator, locale };\n this.#publishedLocale = locale;\n this.#publishedRegistryEpoch = this.#registryEpoch;\n this.#publishedLazyLayer = this.#lazyLayer;\n this.#i18nProvider.setValue(this.#i18nValue);\n }\n }\n return I18nProviderElement;\n };\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"provider-mixin.js","names":["defaultLoader","#i18nProvider","#i18nValue","#registryUnsubscribe","#registryEpoch","#ambientUnsubscribe","#resetLazyAndLoad","#publish","#lazySeq","#lazyLayer","#resolvedLocaleForLazy","#lazyResetStartedForLocale","#syncDirection","#derivedDirection","#resolvedLocale","#publishedLocale","#publishedRegistryEpoch","#publishedLazyLayer"],"sources":["../../../src/i18n/provider-mixin.ts"],"sourcesContent":["import {\n createTranslator,\n DEFAULT_LOCALE,\n loadLocale as defaultLoader,\n type FlatTranslations,\n findLocaleKeys,\n getBrowserTranslations,\n getI18nTranslations,\n type Locale,\n onI18nRegistryChange,\n registerI18n,\n shouldAttemptBrowserTranslation,\n} from '@videojs/core/i18n';\nimport type { PropertyValues, ReactiveElement } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { mergeLocaleOverlays, subscribeAmbientLang } from '@videojs/utils/dom';\nimport { getTextDirection, type TextDirection } from '@videojs/utils/i18n';\nimport type { Constructor } from '@videojs/utils/types';\n\nimport type { I18nContext, I18nContextValue } from './context';\nimport { getFallbackTranslator } from './controller';\nimport { resolveProviderLocale } from './locale';\nimport type { LocaleLoader, ReactiveElementMixinBase } from './types';\n\nexport interface I18nProviderConfig {\n context: I18nContext;\n /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n loader?: LocaleLoader | undefined;\n}\n\nexport type I18nProviderMixin = <Base extends ReactiveElementMixinBase>(\n Base: Base\n) => Constructor<ReactiveElement> & Base;\n\nexport function createI18nProviderMixin({ context, loader = defaultLoader }: I18nProviderConfig): I18nProviderMixin {\n return <Base extends ReactiveElementMixinBase>(Base: Base) => {\n class I18nProviderElement extends Base {\n static properties = {\n ...Base.properties,\n lang: { type: String, reflect: true },\n dir: { type: String, reflect: true },\n };\n\n lang = '';\n dir = '';\n\n readonly #i18nProvider = new ContextProvider(this, {\n context,\n initialValue: {\n translator: getFallbackTranslator(),\n locale: DEFAULT_LOCALE,\n },\n });\n\n #registryUnsubscribe: (() => void) | undefined;\n #ambientUnsubscribe: (() => void) | undefined;\n #registryEpoch = 0;\n #lazyLayer: Partial<FlatTranslations> = {};\n #lazySeq = 0;\n /** Tracks locale used for `#lazyLayer`; ambient `lang` can change without the `lang` property. */\n #resolvedLocaleForLazy: Locale | undefined;\n /** Locale snapshot when the current `#lazySeq` async load was started (see `willUpdate` drift guard). */\n #lazyResetStartedForLocale: Locale | undefined;\n #i18nValue: I18nContextValue = {\n translator: getFallbackTranslator(),\n locale: DEFAULT_LOCALE,\n };\n #publishedLocale: Locale | undefined;\n #publishedRegistryEpoch = -1;\n #publishedLazyLayer: Partial<FlatTranslations> | undefined;\n #derivedDirection: TextDirection | undefined;\n\n protected get i18nValue(): I18nContextValue {\n return this.#i18nValue;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#registryUnsubscribe = onI18nRegistryChange(() => {\n this.#registryEpoch += 1;\n this.requestUpdate();\n });\n this.#ambientUnsubscribe = subscribeAmbientLang(() => this.requestUpdate());\n this.#resetLazyAndLoad();\n this.#publish();\n this.requestUpdate();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#registryUnsubscribe?.();\n this.#registryUnsubscribe = undefined;\n this.#ambientUnsubscribe?.();\n this.#ambientUnsubscribe = undefined;\n this.#lazySeq += 1;\n this.#lazyLayer = {};\n this.#resolvedLocaleForLazy = undefined;\n this.#lazyResetStartedForLocale = undefined;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n const locale = resolveProviderLocale(this);\n if (this.#resolvedLocaleForLazy !== locale) {\n const hadLocale = this.#resolvedLocaleForLazy !== undefined;\n this.#resolvedLocaleForLazy = locale;\n const localeDriftedBeforeFirstPaint =\n !hadLocale && this.#lazyResetStartedForLocale !== undefined && locale !== this.#lazyResetStartedForLocale;\n if (hadLocale || localeDriftedBeforeFirstPaint) {\n this.#resetLazyAndLoad();\n }\n }\n this.#syncDirection(locale);\n this.#publish();\n }\n\n #resetLazyAndLoad(): void {\n const localeSnapshot = resolveProviderLocale(this);\n this.#lazyResetStartedForLocale = localeSnapshot;\n this.#lazySeq += 1;\n const seq = this.#lazySeq;\n this.#lazyLayer = {};\n void (async () => {\n const { merged, loadedTags } = await mergeLocaleOverlays(localeSnapshot, loader, findLocaleKeys);\n if (seq !== this.#lazySeq) return;\n if (shouldAttemptBrowserTranslation(localeSnapshot, loadedTags, merged)) {\n const browser = await getBrowserTranslations(localeSnapshot);\n if (seq !== this.#lazySeq) return;\n if (Object.keys(browser).length) registerI18n(localeSnapshot, browser);\n }\n if (seq !== this.#lazySeq) return;\n this.#lazyLayer = merged;\n this.requestUpdate();\n })();\n }\n\n #resolvedLocale(): Locale {\n return resolveProviderLocale(this);\n }\n\n #syncDirection(locale: Locale): void {\n const current = this.dir.trim().toLowerCase();\n const isDerived = this.#derivedDirection !== undefined && current === this.#derivedDirection;\n\n if (!this.lang.trim()) {\n if (isDerived) this.dir = '';\n this.#derivedDirection = undefined;\n return;\n }\n\n if (current && !isDerived) {\n this.#derivedDirection = undefined;\n return;\n }\n\n const direction = getTextDirection(locale);\n this.#derivedDirection = direction;\n if (this.dir !== direction) this.dir = direction;\n }\n\n #publish(): void {\n const locale = this.#resolvedLocale();\n if (\n this.#publishedLocale === locale &&\n this.#publishedRegistryEpoch === this.#registryEpoch &&\n this.#publishedLazyLayer === this.#lazyLayer\n ) {\n return;\n }\n const registryLayer = getI18nTranslations(locale);\n const translations: FlatTranslations = {\n ...registryLayer,\n ...this.#lazyLayer,\n };\n const translator = createTranslator(translations, locale);\n this.#i18nValue = { translator, locale };\n this.#publishedLocale = locale;\n this.#publishedRegistryEpoch = this.#registryEpoch;\n this.#publishedLazyLayer = this.#lazyLayer;\n this.#i18nProvider.setValue(this.#i18nValue);\n }\n }\n return I18nProviderElement;\n };\n}\n"],"mappings":"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"}
|