@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
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e}from"./predicate-LbFu-fPH.js";import{
|
|
2
|
-
//# sourceMappingURL=gesture-element-
|
|
1
|
+
import{r as e}from"./predicate-LbFu-fPH.js";import{k as t}from"./compounds-DKoFv2f8.js";import{n,t as r}from"./media-element-Cp5PrNre.js";import{r as i,t as a}from"./context-C2rsoDxk.js";import{E as o,n as s}from"./create-player-D5WQ_jzZ.js";const c={seekStep:t.seekStep,volumeStep:t.volumeStep,speedUp:t.speedUp,speedDown:t.speedDown};function l(t){return c[t]||(({store:n})=>{let r=n.state[t];e(r)&&r()})}var u=class{#e=0;#t=null;handleUp(e,t){if(e.resolve(`doubletap`).length>0){let n=Date.now();if(n-this.#e<200){this.#n(),this.#e=0,e.resolve(`doubletap`)[0]?.onActivate(t);return}this.#e=n,this.#n(),this.#t=setTimeout(()=>{this.#t=null,this.#e=0,e.resolve(`tap`)[0]?.onActivate(t)},200);return}e.resolve(`tap`)[0]?.onActivate(t)}#n(){this.#t!==null&&(clearTimeout(this.#t),this.#t=null)}reset(){this.#n(),this.#e=0}};const d=new WeakMap;function f(e){let t=d.get(e);return t||(t=new u,d.set(e,t),t)}function p(e,t,n){return o(e).add({type:`tap`,recognizer:f(e),onActivate:t,pointer:n?.pointer,region:n?.region,disabled:n?.disabled,action:n?.action,value:n?.value})}function m(e,t,n){return o(e).add({type:`doubletap`,recognizer:f(e),onActivate:t,pointer:n?.pointer,region:n?.region,disabled:n?.disabled,action:n?.action,value:n?.value})}var h=class extends r{constructor(...e){super(...e),this.type=``,this.action=``,this.value=void 0,this.pointer=void 0,this.region=void 0,this.disabled=!1,this.#e=new s(this,i),this.#t=new n(this,{context:a,callback:()=>this.requestUpdate(),subscribe:!0}),this.#n=null}static{this.tagName=`media-gesture`}static{this.properties={type:{type:String},action:{type:String},value:{type:Number},pointer:{type:String},region:{type:String},disabled:{type:Boolean}}}#e;#t;#n;connectedCallback(){super.connectedCallback(),this.style.display=`none`,this.#r()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}update(e){super.update(e),this.isConnected&&(this.#i(),this.#r())}#r(){let e=this.#e.value,t=this.#t.value?.container;if(!this.type||!this.action||!e||!t)return;let n=l(this.action);if(!n)return;let{value:r}=this,i=t=>{n({store:e,value:r,event:t})},a={pointer:this.pointer,region:this.region,disabled:this.disabled,action:this.action,value:this.value};this.type===`doubletap`?this.#n=m(t,i,a):this.#n=p(t,i,a)}#i(){this.#n?.(),this.#n=null}};export{h as t};
|
|
2
|
+
//# sourceMappingURL=gesture-element-CxdagZOo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gesture-element-
|
|
1
|
+
{"version":3,"file":"gesture-element-CxdagZOo.js","names":["#lastTapTime","#clearTimer","#tapTimer","ContextConsumer","#player","#container","#register","#unregister","#cleanup"],"sources":["../../core/dist/default/dom/gesture/actions.js","../../core/dist/default/dom/gesture/tap.js","../../core/dist/default/dom/gesture/create-tap-gesture.js","../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import { MEDIA_INPUT_ACTION_OVERRIDES } from \"../media-actions.js\";\nimport { isFunction } from \"@videojs/utils/predicate\";\n//#region src/dom/gesture/actions.ts\n/** Actions that need custom logic beyond `store.state[action]()`. */\nconst GESTURE_ACTION_OVERRIDES = {\n\tseekStep: MEDIA_INPUT_ACTION_OVERRIDES.seekStep,\n\tvolumeStep: MEDIA_INPUT_ACTION_OVERRIDES.volumeStep,\n\tspeedUp: MEDIA_INPUT_ACTION_OVERRIDES.speedUp,\n\tspeedDown: MEDIA_INPUT_ACTION_OVERRIDES.speedDown\n};\nfunction resolveGestureAction(name) {\n\tconst override = GESTURE_ACTION_OVERRIDES[name];\n\tif (override) return override;\n\treturn ({ store }) => {\n\t\tconst method = store.state[name];\n\t\tif (isFunction(method)) method();\n\t};\n}\n//#endregion\nexport { resolveGestureAction };\n\n//# sourceMappingURL=actions.js.map","//#region src/dom/gesture/tap.ts\nconst DOUBLETAP_WINDOW = 200;\n/**\n* Recognizes tap vs doubletap from quick pointer-up events.\n*\n* Stateful recognizer — tracks tap count and doubletap timing.\n* The coordinator handles pointer-down timing (tap threshold) and\n* calls `handleUp()` only for quick taps that passed the threshold check.\n*/\nvar TapRecognizer = class {\n\t#lastTapTime = 0;\n\t#tapTimer = null;\n\thandleUp(matches, event) {\n\t\tif (matches.resolve(\"doubletap\").length > 0) {\n\t\t\tconst now = Date.now();\n\t\t\tif (now - this.#lastTapTime < DOUBLETAP_WINDOW) {\n\t\t\t\tthis.#clearTimer();\n\t\t\t\tthis.#lastTapTime = 0;\n\t\t\t\tmatches.resolve(\"doubletap\")[0]?.onActivate(event);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.#lastTapTime = now;\n\t\t\tthis.#clearTimer();\n\t\t\tthis.#tapTimer = setTimeout(() => {\n\t\t\t\tthis.#tapTimer = null;\n\t\t\t\tthis.#lastTapTime = 0;\n\t\t\t\tmatches.resolve(\"tap\")[0]?.onActivate(event);\n\t\t\t}, DOUBLETAP_WINDOW);\n\t\t\treturn;\n\t\t}\n\t\tmatches.resolve(\"tap\")[0]?.onActivate(event);\n\t}\n\t#clearTimer() {\n\t\tif (this.#tapTimer !== null) {\n\t\t\tclearTimeout(this.#tapTimer);\n\t\t\tthis.#tapTimer = null;\n\t\t}\n\t}\n\treset() {\n\t\tthis.#clearTimer();\n\t\tthis.#lastTapTime = 0;\n\t}\n};\n//#endregion\nexport { TapRecognizer };\n\n//# sourceMappingURL=tap.js.map","import { getGestureCoordinator } from \"./coordinator.js\";\nimport { TapRecognizer } from \"./tap.js\";\n//#region src/dom/gesture/create-tap-gesture.ts\nconst recognizers = /* @__PURE__ */ new WeakMap();\nfunction getRecognizer(target) {\n\tlet recognizer = recognizers.get(target);\n\tif (recognizer) return recognizer;\n\trecognizer = new TapRecognizer();\n\trecognizers.set(target, recognizer);\n\treturn recognizer;\n}\n/**\n* Register a tap gesture on a target element.\n*\n* @example\n* ```ts\n* const cleanup = createTapGesture(container, (event) => {\n* store.paused ? store.play() : store.pause();\n* }, { pointer: 'mouse' });\n* ```\n*/\nfunction createTapGesture(target, onActivate, options) {\n\treturn getGestureCoordinator(target).add({\n\t\ttype: \"tap\",\n\t\trecognizer: getRecognizer(target),\n\t\tonActivate,\n\t\tpointer: options?.pointer,\n\t\tregion: options?.region,\n\t\tdisabled: options?.disabled,\n\t\taction: options?.action,\n\t\tvalue: options?.value\n\t});\n}\n/**\n* Register a doubletap gesture on a target element.\n*\n* @example\n* ```ts\n* const cleanup = createDoubleTapGesture(container, (event) => {\n* store.fullscreen ? store.exitFullscreen() : store.requestFullscreen();\n* }, { region: 'center' });\n* ```\n*/\nfunction createDoubleTapGesture(target, onActivate, options) {\n\treturn getGestureCoordinator(target).add({\n\t\ttype: \"doubletap\",\n\t\trecognizer: getRecognizer(target),\n\t\tonActivate,\n\t\tpointer: options?.pointer,\n\t\tregion: options?.region,\n\t\tdisabled: options?.disabled,\n\t\taction: options?.action,\n\t\tvalue: options?.value\n\t});\n}\n//#endregion\nexport { createDoubleTapGesture, createTapGesture };\n\n//# sourceMappingURL=create-tap-gesture.js.map","import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture, createTapGesture, resolveGestureAction } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n static readonly tagName = 'media-gesture';\n\n static override properties: PropertyDeclarationMap = {\n type: { type: String },\n action: { type: String },\n value: { type: Number },\n pointer: { type: String },\n region: { type: String },\n disabled: { type: Boolean },\n };\n\n type: GestureProps['type'] | '' = '';\n action: GestureProps['action'] = '';\n value: GestureProps['value'] = undefined;\n pointer: GestureProps['pointer'] = undefined;\n region: GestureProps['region'] = undefined;\n disabled: NonNullable<GestureProps['disabled']> = false;\n\n readonly #player = new PlayerController(this, playerContext);\n readonly #container = new ContextConsumer(this, {\n context: containerContext,\n callback: () => this.requestUpdate(),\n subscribe: true,\n });\n #cleanup: (() => void) | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.style.display = 'none';\n this.#register();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#unregister();\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n // Re-register when attributes change.\n if (this.isConnected) {\n this.#unregister();\n this.#register();\n }\n }\n\n #register(): void {\n const store = this.#player.value;\n const container = this.#container.value?.container;\n if (!this.type || !this.action || !store || !container) return;\n\n const resolver = resolveGestureAction(this.action);\n if (!resolver) return;\n\n const { value } = this;\n\n const onActivate = (event: PointerEvent) => {\n resolver({ store, value, event });\n };\n\n const options = {\n pointer: this.pointer,\n region: this.region,\n disabled: this.disabled,\n action: this.action,\n value: this.value,\n };\n\n if (this.type === 'doubletap') {\n this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n } else {\n this.#cleanup = createTapGesture(container, onActivate, options);\n }\n }\n\n #unregister(): void {\n this.#cleanup?.();\n this.#cleanup = null;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { r as isFunction } from "./predicate-faYxAB6Z.js";
|
|
2
|
-
import {
|
|
2
|
+
import { A as MEDIA_INPUT_ACTION_OVERRIDES } from "./compounds-BA8gXlmJ.js";
|
|
3
3
|
import { n as ContextConsumer, t as MediaElement } from "./media-element-CJY3JIgc.js";
|
|
4
4
|
import { r as playerContext, t as containerContext } from "./context-OhQY847V.js";
|
|
5
|
-
import {
|
|
5
|
+
import { E as getGestureCoordinator, n as PlayerController } from "./create-player-BEEc22xK.js";
|
|
6
6
|
|
|
7
7
|
//#region ../core/dist/dev/dom/gesture/actions.js
|
|
8
8
|
/** Actions that need custom logic beyond `store.state[action]()`. */
|
|
@@ -205,4 +205,4 @@ var GestureElement = class extends MediaElement {
|
|
|
205
205
|
|
|
206
206
|
//#endregion
|
|
207
207
|
export { GestureElement as t };
|
|
208
|
-
//# sourceMappingURL=gesture-element-
|
|
208
|
+
//# sourceMappingURL=gesture-element-x6kojUJk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gesture-element-
|
|
1
|
+
{"version":3,"file":"gesture-element-x6kojUJk.js","names":["#lastTapTime","#clearTimer","#tapTimer","#player","#container","#register","#unregister","#cleanup"],"sources":["../../core/dist/dev/dom/gesture/actions.js","../../core/dist/dev/dom/gesture/tap.js","../../core/dist/dev/dom/gesture/create-tap-gesture.js","../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import { MEDIA_INPUT_ACTION_OVERRIDES } from \"../media-actions.js\";\nimport { isFunction } from \"@videojs/utils/predicate\";\n//#region src/dom/gesture/actions.ts\n/** Actions that need custom logic beyond `store.state[action]()`. */\nconst GESTURE_ACTION_OVERRIDES = {\n\tseekStep: MEDIA_INPUT_ACTION_OVERRIDES.seekStep,\n\tvolumeStep: MEDIA_INPUT_ACTION_OVERRIDES.volumeStep,\n\tspeedUp: MEDIA_INPUT_ACTION_OVERRIDES.speedUp,\n\tspeedDown: MEDIA_INPUT_ACTION_OVERRIDES.speedDown\n};\nfunction resolveGestureAction(name) {\n\tconst override = GESTURE_ACTION_OVERRIDES[name];\n\tif (override) return override;\n\treturn ({ store }) => {\n\t\tconst method = store.state[name];\n\t\tif (isFunction(method)) method();\n\t\telse console.warn(`[vjs-gesture] Unknown action: \"${name}\"`);\n\t};\n}\n//#endregion\nexport { resolveGestureAction };\n\n//# sourceMappingURL=actions.js.map","//#region src/dom/gesture/tap.ts\nconst DOUBLETAP_WINDOW = 200;\n/**\n* Recognizes tap vs doubletap from quick pointer-up events.\n*\n* Stateful recognizer — tracks tap count and doubletap timing.\n* The coordinator handles pointer-down timing (tap threshold) and\n* calls `handleUp()` only for quick taps that passed the threshold check.\n*/\nvar TapRecognizer = class {\n\t#lastTapTime = 0;\n\t#tapTimer = null;\n\thandleUp(matches, event) {\n\t\tif (matches.resolve(\"doubletap\").length > 0) {\n\t\t\tconst now = Date.now();\n\t\t\tif (now - this.#lastTapTime < DOUBLETAP_WINDOW) {\n\t\t\t\tthis.#clearTimer();\n\t\t\t\tthis.#lastTapTime = 0;\n\t\t\t\tmatches.resolve(\"doubletap\")[0]?.onActivate(event);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.#lastTapTime = now;\n\t\t\tthis.#clearTimer();\n\t\t\tthis.#tapTimer = setTimeout(() => {\n\t\t\t\tthis.#tapTimer = null;\n\t\t\t\tthis.#lastTapTime = 0;\n\t\t\t\tmatches.resolve(\"tap\")[0]?.onActivate(event);\n\t\t\t}, DOUBLETAP_WINDOW);\n\t\t\treturn;\n\t\t}\n\t\tmatches.resolve(\"tap\")[0]?.onActivate(event);\n\t}\n\t#clearTimer() {\n\t\tif (this.#tapTimer !== null) {\n\t\t\tclearTimeout(this.#tapTimer);\n\t\t\tthis.#tapTimer = null;\n\t\t}\n\t}\n\treset() {\n\t\tthis.#clearTimer();\n\t\tthis.#lastTapTime = 0;\n\t}\n};\n//#endregion\nexport { TapRecognizer };\n\n//# sourceMappingURL=tap.js.map","import { getGestureCoordinator } from \"./coordinator.js\";\nimport { TapRecognizer } from \"./tap.js\";\n//#region src/dom/gesture/create-tap-gesture.ts\nconst recognizers = /* @__PURE__ */ new WeakMap();\nfunction getRecognizer(target) {\n\tlet recognizer = recognizers.get(target);\n\tif (recognizer) return recognizer;\n\trecognizer = new TapRecognizer();\n\trecognizers.set(target, recognizer);\n\treturn recognizer;\n}\n/**\n* Register a tap gesture on a target element.\n*\n* @example\n* ```ts\n* const cleanup = createTapGesture(container, (event) => {\n* store.paused ? store.play() : store.pause();\n* }, { pointer: 'mouse' });\n* ```\n*/\nfunction createTapGesture(target, onActivate, options) {\n\treturn getGestureCoordinator(target).add({\n\t\ttype: \"tap\",\n\t\trecognizer: getRecognizer(target),\n\t\tonActivate,\n\t\tpointer: options?.pointer,\n\t\tregion: options?.region,\n\t\tdisabled: options?.disabled,\n\t\taction: options?.action,\n\t\tvalue: options?.value\n\t});\n}\n/**\n* Register a doubletap gesture on a target element.\n*\n* @example\n* ```ts\n* const cleanup = createDoubleTapGesture(container, (event) => {\n* store.fullscreen ? store.exitFullscreen() : store.requestFullscreen();\n* }, { region: 'center' });\n* ```\n*/\nfunction createDoubleTapGesture(target, onActivate, options) {\n\treturn getGestureCoordinator(target).add({\n\t\ttype: \"doubletap\",\n\t\trecognizer: getRecognizer(target),\n\t\tonActivate,\n\t\tpointer: options?.pointer,\n\t\tregion: options?.region,\n\t\tdisabled: options?.disabled,\n\t\taction: options?.action,\n\t\tvalue: options?.value\n\t});\n}\n//#endregion\nexport { createDoubleTapGesture, createTapGesture };\n\n//# sourceMappingURL=create-tap-gesture.js.map","import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture, createTapGesture, resolveGestureAction } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n static readonly tagName = 'media-gesture';\n\n static override properties: PropertyDeclarationMap = {\n type: { type: String },\n action: { type: String },\n value: { type: Number },\n pointer: { type: String },\n region: { type: String },\n disabled: { type: Boolean },\n };\n\n type: GestureProps['type'] | '' = '';\n action: GestureProps['action'] = '';\n value: GestureProps['value'] = undefined;\n pointer: GestureProps['pointer'] = undefined;\n region: GestureProps['region'] = undefined;\n disabled: NonNullable<GestureProps['disabled']> = false;\n\n readonly #player = new PlayerController(this, playerContext);\n readonly #container = new ContextConsumer(this, {\n context: containerContext,\n callback: () => this.requestUpdate(),\n subscribe: true,\n });\n #cleanup: (() => void) | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.style.display = 'none';\n this.#register();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#unregister();\n }\n\n protected override update(changed: PropertyValues): void {\n super.update(changed);\n\n // Re-register when attributes change.\n if (this.isConnected) {\n this.#unregister();\n this.#register();\n }\n }\n\n #register(): void {\n const store = this.#player.value;\n const container = this.#container.value?.container;\n if (!this.type || !this.action || !store || !container) return;\n\n const resolver = resolveGestureAction(this.action);\n if (!resolver) return;\n\n const { value } = this;\n\n const onActivate = (event: PointerEvent) => {\n resolver({ store, value, event });\n };\n\n const options = {\n pointer: this.pointer,\n region: this.region,\n disabled: this.disabled,\n action: this.action,\n value: this.value,\n };\n\n if (this.type === 'doubletap') {\n this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n } else {\n this.#cleanup = createTapGesture(container, onActivate, options);\n }\n }\n\n #unregister(): void {\n this.#cleanup?.();\n this.#cleanup = null;\n }\n}\n"],"mappings":";;;;;;;;AAIA,MAAM,2BAA2B;CAChC,UAAU,6BAA6B;CACvC,YAAY,6BAA6B;CACzC,SAAS,6BAA6B;CACtC,WAAW,6BAA6B;AACzC;AACA,SAAS,qBAAqB,MAAM;CACnC,MAAM,WAAW,yBAAyB;CAC1C,IAAI,UAAU,OAAO;CACrB,QAAQ,EAAE,YAAY;EACrB,MAAM,SAAS,MAAM,MAAM;EAC3B,IAAI,WAAW,MAAM,GAAG,OAAO;OAC1B,QAAQ,KAAK,kCAAkC,KAAK,EAAE;CAC5D;AACD;;;;ACjBA,MAAM,mBAAmB;;;;;;;;AAQzB,IAAI,gBAAgB,MAAM;CACzB,eAAe;CACf,YAAY;CACZ,SAAS,SAAS,OAAO;EACxB,IAAI,QAAQ,QAAQ,WAAW,CAAC,CAAC,SAAS,GAAG;GAC5C,MAAM,MAAM,KAAK,IAAI;GACrB,IAAI,MAAM,KAAKA,eAAe,kBAAkB;IAC/C,KAAKC,YAAY;IACjB,KAAKD,eAAe;IACpB,QAAQ,QAAQ,WAAW,CAAC,CAAC,EAAE,EAAE,WAAW,KAAK;IACjD;GACD;GACA,KAAKA,eAAe;GACpB,KAAKC,YAAY;GACjB,KAAKC,YAAY,iBAAiB;IACjC,KAAKA,YAAY;IACjB,KAAKF,eAAe;IACpB,QAAQ,QAAQ,KAAK,CAAC,CAAC,EAAE,EAAE,WAAW,KAAK;GAC5C,GAAG,gBAAgB;GACnB;EACD;EACA,QAAQ,QAAQ,KAAK,CAAC,CAAC,EAAE,EAAE,WAAW,KAAK;CAC5C;CACA,cAAc;EACb,IAAI,KAAKE,cAAc,MAAM;GAC5B,aAAa,KAAKA,SAAS;GAC3B,KAAKA,YAAY;EAClB;CACD;CACA,QAAQ;EACP,KAAKD,YAAY;EACjB,KAAKD,eAAe;CACrB;AACD;;;;ACvCA,MAAM,8BAA8B,IAAI,QAAQ;AAChD,SAAS,cAAc,QAAQ;CAC9B,IAAI,aAAa,YAAY,IAAI,MAAM;CACvC,IAAI,YAAY,OAAO;CACvB,aAAa,IAAI,cAAc;CAC/B,YAAY,IAAI,QAAQ,UAAU;CAClC,OAAO;AACR;;;;;;;;;;;AAWA,SAAS,iBAAiB,QAAQ,YAAY,SAAS;CACtD,OAAO,sBAAsB,MAAM,CAAC,CAAC,IAAI;EACxC,MAAM;EACN,YAAY,cAAc,MAAM;EAChC;EACA,SAAS,SAAS;EAClB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,QAAQ,SAAS;EACjB,OAAO,SAAS;CACjB,CAAC;AACF;;;;;;;;;;;AAWA,SAAS,uBAAuB,QAAQ,YAAY,SAAS;CAC5D,OAAO,sBAAsB,MAAM,CAAC,CAAC,IAAI;EACxC,MAAM;EACN,YAAY,cAAc,MAAM;EAChC;EACA,SAAS,SAAS;EAClB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,QAAQ,SAAS;EACjB,OAAO,SAAS;CACjB,CAAC;AACF;;;;AC7CA,IAAa,iBAAb,cAAoC,aAAa;;;cAYb;gBACD;eACF;iBACI;gBACF;kBACiB;iBAE/B,IAAI,iBAAiB,MAAM,aAAa;oBACrC,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,cAAc;GACnC,WAAW;EACb,CAAC;kBAC+B;;;iBAxBN;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,OAAO;GACrB,QAAQ,EAAE,MAAM,OAAO;GACvB,OAAO,EAAE,MAAM,OAAO;GACtB,SAAS,EAAE,MAAM,OAAO;GACxB,QAAQ,EAAE,MAAM,OAAO;GACvB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CASA,AAASG;CACT,AAASC;CAKT;CAEA,AAAS,oBAA0B;EACjC,MAAM,kBAAkB;EACxB,KAAK,MAAM,UAAU;EACrB,KAAKC,UAAU;CACjB;CAEA,AAAS,uBAA6B;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,YAAY;CACnB;CAEA,AAAmB,OAAO,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,KAAK,aAAa;GACpB,KAAKA,YAAY;GACjB,KAAKD,UAAU;EACjB;CACF;CAEA,YAAkB;EAChB,MAAM,QAAQ,KAAKF,QAAQ;EAC3B,MAAM,YAAY,KAAKC,WAAW,OAAO;EACzC,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,WAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,MAAM;EACjD,IAAI,CAAC,UAAU;EAEf,MAAM,EAAE,UAAU;EAElB,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO;IAAO;GAAM,CAAC;EAClC;EAEA,MAAM,UAAU;GACd,SAAS,KAAK;GACd,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,OAAO,KAAK;EACd;EAEA,IAAI,KAAK,SAAS,aAChB,KAAKG,WAAW,uBAAuB,WAAW,YAAY,OAAO;OAErE,KAAKA,WAAW,iBAAiB,WAAW,YAAY,OAAO;CAEnE;CAEA,cAAoB;EAClB,KAAKA,WAAW;EAChB,KAAKA,WAAW;CAClB;AACF"}
|
package/cdn/i18n-CE4KxKuj.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-CE4KxKuj.js","names":[],"sources":["../../utils/dist/object/flatten.js","../../core/dist/default/core/i18n/utils/flatten.js","../../utils/dist/i18n.js","../../core/dist/default/core/i18n/registry.js"],"sourcesContent":["//#region src/object/flatten.ts\nfunction flatten(object, options = {}) {\n\tconst { prefix = \"\" } = options;\n\tconst result = {};\n\tfor (const [key, value] of Object.entries(object)) {\n\t\tconst fullKey = prefix ? `${prefix}.${key}` : key;\n\t\tif (value !== null && typeof value === \"object\" && !Array.isArray(value)) Object.assign(result, flatten(value, { prefix: fullKey }));\n\t\telse result[fullKey] = value;\n\t}\n\treturn result;\n}\n//#endregion\nexport { flatten };\n\n//# sourceMappingURL=flatten.js.map","import { flatten } from \"@videojs/utils/object\";\n//#region src/core/i18n/utils/flatten.ts\nfunction flattenTranslations(locale, options = {}) {\n\treturn flatten(locale, options);\n}\n//#endregion\nexport { flattenTranslations };\n\n//# sourceMappingURL=flatten.js.map","//#region src/i18n/index.ts\n/** Default locale used when no player or ambient locale is available. */\nconst DEFAULT_LOCALE = \"en\";\n//#endregion\nexport { DEFAULT_LOCALE };\n\n//# sourceMappingURL=i18n.js.map","import { flattenTranslations } from \"./utils/flatten.js\";\nimport { DEFAULT_LOCALE } from \"@videojs/utils/i18n\";\n//#region src/core/i18n/registry.ts\n/**\n* Well-known key for the shared registry. Its name and value shape are a cross-version contract:\n* every copy of this module in a realm must agree on them, so change the key when the shape changes.\n*/\nconst I18N_REGISTRY_KEY = Symbol.for(\"@videojs/i18n-registry\");\n/**\n* The registry is realm-global rather than module-global so duplicate copies of this module\n* converge on one set of translations.\n*\n* Duplication is normal, not a bug to fix upstream: separately loaded CDN bundles, a pinned and an\n* unpinned URL for the same file, and two bundlers' output on one page all yield distinct module\n* instances. With module-scoped state, a `registerI18n` call on one instance is invisible to the\n* player reading from another, and the locale silently falls back to English.\n*/\nfunction getRegistry() {\n\tconst host = globalThis;\n\tconst existing = host[I18N_REGISTRY_KEY];\n\tif (existing) return existing;\n\tconst registry = {\n\t\tlayers: /* @__PURE__ */ new Map(),\n\t\tsubscribers: /* @__PURE__ */ new Set()\n\t};\n\thost[I18N_REGISTRY_KEY] = registry;\n\treturn registry;\n}\nfunction notify() {\n\tfor (const cb of getRegistry().subscribers) cb();\n}\nfunction normalizeLocaleTag(tag) {\n\treturn tag.trim().replaceAll(\"_\", \"-\").toLowerCase();\n}\n/** Strip unicode locale extension sequences (`-u-…`) before any private-use `-x-` block. */\nfunction stripUnicodeExtensions(tag) {\n\tconst xIdx = tag.indexOf(\"-x-\");\n\tconst uIdx = (xIdx === -1 ? tag : tag.slice(0, xIdx)).indexOf(\"-u-\");\n\tif (uIdx === -1) return tag;\n\treturn tag.slice(0, uIdx) + (xIdx === -1 ? \"\" : tag.slice(xIdx));\n}\nfunction chineseFallback(segments) {\n\tif (segments[0] !== \"zh\") return;\n\tconst script = segments.find((segment) => segment === \"hant\" || segment === \"hans\");\n\treturn script === \"hant\" ? \"zh-tw\" : script === \"hans\" ? \"zh-cn\" : void 0;\n}\n/** Registry map key: normalized tag with unicode extensions removed (same base as {@link findLocaleKeys}). */\nfunction getCanonicalLocaleKey(locale) {\n\treturn stripUnicodeExtensions(normalizeLocaleTag(locale));\n}\n/**\n* Most-specific-first BCP 47 lookup tags (normalized). Always ends with `en` when missing from the truncated chain.\n*\n* @example `es-419-u-nu-latn` → `['es-419', 'es', 'en']`\n*/\nfunction findLocaleKeys(locale) {\n\tconst base = getCanonicalLocaleKey(locale);\n\tif (!base) return [DEFAULT_LOCALE];\n\tconst segments = base.split(\"-\").filter(Boolean);\n\tconst chain = [];\n\tfor (let len = segments.length; len >= 1; len--) chain.push(segments.slice(0, len).join(\"-\"));\n\tconst zhFallback = chineseFallback(segments);\n\tconst zhIndex = chain.indexOf(\"zh\");\n\tif (zhFallback && zhIndex !== -1) chain.splice(zhIndex, 0, zhFallback);\n\tconst out = [];\n\tconst seen = /* @__PURE__ */ new Set();\n\tfor (const tag of chain) if (!seen.has(tag)) {\n\t\tseen.add(tag);\n\t\tout.push(tag);\n\t}\n\tif (!seen.has(DEFAULT_LOCALE)) out.push(DEFAULT_LOCALE);\n\treturn out;\n}\nfunction mergeI18nTranslations(chain) {\n\tconst { layers } = getRegistry();\n\tconst merged = {};\n\tfor (let i = chain.length - 1; i >= 0; i--) {\n\t\tconst tag = chain[i];\n\t\tconst layer = layers.get(tag);\n\t\tif (layer) Object.assign(merged, layer);\n\t}\n\treturn merged;\n}\n/**\n* Register or merge translation strings for a BCP 47 locale tag.\n*\n* @param locale - BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).\n* @param translations - Partial nested locale values; merges with any existing layer for the tag.\n* @public\n*/\nfunction registerI18n(locale, translations) {\n\tconst { layers } = getRegistry();\n\tconst tag = getCanonicalLocaleKey(locale);\n\tconst existing = layers.get(tag) ?? {};\n\tlayers.set(tag, {\n\t\t...existing,\n\t\t...flattenTranslations(translations)\n\t});\n\tnotify();\n}\n/**\n* Return the merged registered translation map for a locale. Built-in English defaults are supplied by text descriptors.\n*\n* @param locale - BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).\n* @public\n*/\nfunction getI18nTranslations(locale) {\n\treturn mergeI18nTranslations(findLocaleKeys(locale));\n}\n/**\n* Subscribe to global registry mutations (for example after `registerI18n` or browser translation prefetch).\n*\n* @param callback - Invoked when any locale layer changes.\n* @public\n*/\nfunction onI18nRegistryChange(callback) {\n\tconst { subscribers } = getRegistry();\n\tsubscribers.add(callback);\n\treturn () => {\n\t\tsubscribers.delete(callback);\n\t};\n}\n/**\n* Whether an exact locale tag has been registered via `registerI18n` (not whether lazy packs exist).\n*\n* @param locale - BCP 47 tag to test.\n* @public\n*/\nfunction hasRegisteredLocale(locale) {\n\treturn getRegistry().layers.has(getCanonicalLocaleKey(locale));\n}\n/** Clears registered locale overlays (test isolation). */\nfunction resetI18nRegistry() {\n\tconst { layers, subscribers } = getRegistry();\n\tlayers.clear();\n\tsubscribers.clear();\n}\n//#endregion\nexport { findLocaleKeys, getCanonicalLocaleKey, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n, resetI18nRegistry };\n\n//# sourceMappingURL=registry.js.map"],"mappings":"AACA,SAAS,EAAQ,EAAQ,EAAU,CAAC,EAAG,CACtC,GAAM,CAAE,SAAS,IAAO,EAClB,EAAS,CAAC,EAChB,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,CAAM,EAAG,CAClD,IAAM,EAAU,EAAS,GAAG,EAAO,GAAG,IAAQ,EACxB,OAAO,GAAU,UAAnC,GAA+C,CAAC,MAAM,QAAQ,CAAK,EAAG,OAAO,OAAO,EAAQ,EAAQ,EAAO,CAAE,OAAQ,CAAQ,CAAC,CAAC,EAC9H,EAAO,GAAW,CACxB,CACA,OAAO,CACR,CCRA,SAAS,EAAoB,EAAQ,EAAU,CAAC,EAAG,CAClD,OAAO,EAAQ,EAAQ,CAAO,CAC/B,
|
|
1
|
+
{"version":3,"file":"i18n-CE4KxKuj.js","names":[],"sources":["../../utils/dist/object/flatten.js","../../core/dist/default/core/i18n/utils/flatten.js","../../utils/dist/i18n.js","../../core/dist/default/core/i18n/registry.js"],"sourcesContent":["//#region src/object/flatten.ts\nfunction flatten(object, options = {}) {\n\tconst { prefix = \"\" } = options;\n\tconst result = {};\n\tfor (const [key, value] of Object.entries(object)) {\n\t\tconst fullKey = prefix ? `${prefix}.${key}` : key;\n\t\tif (value !== null && typeof value === \"object\" && !Array.isArray(value)) Object.assign(result, flatten(value, { prefix: fullKey }));\n\t\telse result[fullKey] = value;\n\t}\n\treturn result;\n}\n//#endregion\nexport { flatten };\n\n//# sourceMappingURL=flatten.js.map","import { flatten } from \"@videojs/utils/object\";\n//#region src/core/i18n/utils/flatten.ts\nfunction flattenTranslations(locale, options = {}) {\n\treturn flatten(locale, options);\n}\n//#endregion\nexport { flattenTranslations };\n\n//# sourceMappingURL=flatten.js.map","import { getTextDirection } from \"./i18n/direction.js\";\n//#region src/i18n/index.ts\n/** Default locale used when no player or ambient locale is available. */\nconst DEFAULT_LOCALE = \"en\";\n//#endregion\nexport { DEFAULT_LOCALE, getTextDirection };\n\n//# sourceMappingURL=i18n.js.map","import { flattenTranslations } from \"./utils/flatten.js\";\nimport { DEFAULT_LOCALE } from \"@videojs/utils/i18n\";\n//#region src/core/i18n/registry.ts\n/**\n* Well-known key for the shared registry. Its name and value shape are a cross-version contract:\n* every copy of this module in a realm must agree on them, so change the key when the shape changes.\n*/\nconst I18N_REGISTRY_KEY = Symbol.for(\"@videojs/i18n-registry\");\n/**\n* The registry is realm-global rather than module-global so duplicate copies of this module\n* converge on one set of translations.\n*\n* Duplication is normal, not a bug to fix upstream: separately loaded CDN bundles, a pinned and an\n* unpinned URL for the same file, and two bundlers' output on one page all yield distinct module\n* instances. With module-scoped state, a `registerI18n` call on one instance is invisible to the\n* player reading from another, and the locale silently falls back to English.\n*/\nfunction getRegistry() {\n\tconst host = globalThis;\n\tconst existing = host[I18N_REGISTRY_KEY];\n\tif (existing) return existing;\n\tconst registry = {\n\t\tlayers: /* @__PURE__ */ new Map(),\n\t\tsubscribers: /* @__PURE__ */ new Set()\n\t};\n\thost[I18N_REGISTRY_KEY] = registry;\n\treturn registry;\n}\nfunction notify() {\n\tfor (const cb of getRegistry().subscribers) cb();\n}\nfunction normalizeLocaleTag(tag) {\n\treturn tag.trim().replaceAll(\"_\", \"-\").toLowerCase();\n}\n/** Strip unicode locale extension sequences (`-u-…`) before any private-use `-x-` block. */\nfunction stripUnicodeExtensions(tag) {\n\tconst xIdx = tag.indexOf(\"-x-\");\n\tconst uIdx = (xIdx === -1 ? tag : tag.slice(0, xIdx)).indexOf(\"-u-\");\n\tif (uIdx === -1) return tag;\n\treturn tag.slice(0, uIdx) + (xIdx === -1 ? \"\" : tag.slice(xIdx));\n}\nfunction chineseFallback(segments) {\n\tif (segments[0] !== \"zh\") return;\n\tconst script = segments.find((segment) => segment === \"hant\" || segment === \"hans\");\n\treturn script === \"hant\" ? \"zh-tw\" : script === \"hans\" ? \"zh-cn\" : void 0;\n}\n/** Registry map key: normalized tag with unicode extensions removed (same base as {@link findLocaleKeys}). */\nfunction getCanonicalLocaleKey(locale) {\n\treturn stripUnicodeExtensions(normalizeLocaleTag(locale));\n}\n/**\n* Most-specific-first BCP 47 lookup tags (normalized). Always ends with `en` when missing from the truncated chain.\n*\n* @example `es-419-u-nu-latn` → `['es-419', 'es', 'en']`\n*/\nfunction findLocaleKeys(locale) {\n\tconst base = getCanonicalLocaleKey(locale);\n\tif (!base) return [DEFAULT_LOCALE];\n\tconst segments = base.split(\"-\").filter(Boolean);\n\tconst chain = [];\n\tfor (let len = segments.length; len >= 1; len--) chain.push(segments.slice(0, len).join(\"-\"));\n\tconst zhFallback = chineseFallback(segments);\n\tconst zhIndex = chain.indexOf(\"zh\");\n\tif (zhFallback && zhIndex !== -1) chain.splice(zhIndex, 0, zhFallback);\n\tconst out = [];\n\tconst seen = /* @__PURE__ */ new Set();\n\tfor (const tag of chain) if (!seen.has(tag)) {\n\t\tseen.add(tag);\n\t\tout.push(tag);\n\t}\n\tif (!seen.has(DEFAULT_LOCALE)) out.push(DEFAULT_LOCALE);\n\treturn out;\n}\nfunction mergeI18nTranslations(chain) {\n\tconst { layers } = getRegistry();\n\tconst merged = {};\n\tfor (let i = chain.length - 1; i >= 0; i--) {\n\t\tconst tag = chain[i];\n\t\tconst layer = layers.get(tag);\n\t\tif (layer) Object.assign(merged, layer);\n\t}\n\treturn merged;\n}\n/**\n* Register or merge translation strings for a BCP 47 locale tag.\n*\n* @param locale - BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).\n* @param translations - Partial nested locale values; merges with any existing layer for the tag.\n* @public\n*/\nfunction registerI18n(locale, translations) {\n\tconst { layers } = getRegistry();\n\tconst tag = getCanonicalLocaleKey(locale);\n\tconst existing = layers.get(tag) ?? {};\n\tlayers.set(tag, {\n\t\t...existing,\n\t\t...flattenTranslations(translations)\n\t});\n\tnotify();\n}\n/**\n* Return the merged registered translation map for a locale. Built-in English defaults are supplied by text descriptors.\n*\n* @param locale - BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).\n* @public\n*/\nfunction getI18nTranslations(locale) {\n\treturn mergeI18nTranslations(findLocaleKeys(locale));\n}\n/**\n* Subscribe to global registry mutations (for example after `registerI18n` or browser translation prefetch).\n*\n* @param callback - Invoked when any locale layer changes.\n* @public\n*/\nfunction onI18nRegistryChange(callback) {\n\tconst { subscribers } = getRegistry();\n\tsubscribers.add(callback);\n\treturn () => {\n\t\tsubscribers.delete(callback);\n\t};\n}\n/**\n* Whether an exact locale tag has been registered via `registerI18n` (not whether lazy packs exist).\n*\n* @param locale - BCP 47 tag to test.\n* @public\n*/\nfunction hasRegisteredLocale(locale) {\n\treturn getRegistry().layers.has(getCanonicalLocaleKey(locale));\n}\n/** Clears registered locale overlays (test isolation). */\nfunction resetI18nRegistry() {\n\tconst { layers, subscribers } = getRegistry();\n\tlayers.clear();\n\tsubscribers.clear();\n}\n//#endregion\nexport { findLocaleKeys, getCanonicalLocaleKey, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n, resetI18nRegistry };\n\n//# sourceMappingURL=registry.js.map"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import { n as I18nProviderElement, t as TextElement } from "./text-element-LzVNdZbp.js";
|
|
1
2
|
import { i as safeDefine } from "./context-OhQY847V.js";
|
|
2
|
-
import { n as I18nProviderElement, t as TextElement } from "./text-element-dyiwucQB.js";
|
|
3
3
|
|
|
4
4
|
//#region src/define/i18n.ts
|
|
5
5
|
safeDefine(I18nProviderElement);
|
|
6
6
|
safeDefine(TextElement);
|
|
7
7
|
|
|
8
8
|
//#endregion
|
|
9
|
-
//# sourceMappingURL=i18n-
|
|
9
|
+
//# sourceMappingURL=i18n-C_WyuIHd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-
|
|
1
|
+
{"version":3,"file":"i18n-C_WyuIHd.js","names":[],"sources":["../src/define/i18n.ts"],"sourcesContent":["import { I18nProviderElement } from '../i18n/provider-element';\nimport { TextElement } from '../ui/text/text-element';\nimport { safeDefine } from './safe-define';\n\nsafeDefine(I18nProviderElement);\nsafeDefine(TextElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [I18nProviderElement.tagName]: I18nProviderElement;\n [TextElement.tagName]: TextElement;\n }\n}\n"],"mappings":";;;;AAIA,WAAW,mBAAmB;AAC9B,WAAW,WAAW"}
|
package/cdn/i18n-DyF_NfCk.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-DyF_NfCk.js","names":[],"sources":["../../utils/dist/object/flatten.js","../../core/dist/dev/core/i18n/utils/flatten.js","../../utils/dist/i18n.js","../../core/dist/dev/core/i18n/registry.js"],"sourcesContent":["//#region src/object/flatten.ts\nfunction flatten(object, options = {}) {\n\tconst { prefix = \"\" } = options;\n\tconst result = {};\n\tfor (const [key, value] of Object.entries(object)) {\n\t\tconst fullKey = prefix ? `${prefix}.${key}` : key;\n\t\tif (value !== null && typeof value === \"object\" && !Array.isArray(value)) Object.assign(result, flatten(value, { prefix: fullKey }));\n\t\telse result[fullKey] = value;\n\t}\n\treturn result;\n}\n//#endregion\nexport { flatten };\n\n//# sourceMappingURL=flatten.js.map","import { flatten } from \"@videojs/utils/object\";\n//#region src/core/i18n/utils/flatten.ts\nfunction flattenTranslations(locale, options = {}) {\n\treturn flatten(locale, options);\n}\n//#endregion\nexport { flattenTranslations };\n\n//# sourceMappingURL=flatten.js.map","//#region src/i18n/index.ts\n/** Default locale used when no player or ambient locale is available. */\nconst DEFAULT_LOCALE = \"en\";\n//#endregion\nexport { DEFAULT_LOCALE };\n\n//# sourceMappingURL=i18n.js.map","import { flattenTranslations } from \"./utils/flatten.js\";\nimport { DEFAULT_LOCALE } from \"@videojs/utils/i18n\";\n//#region src/core/i18n/registry.ts\n/**\n* Well-known key for the shared registry. Its name and value shape are a cross-version contract:\n* every copy of this module in a realm must agree on them, so change the key when the shape changes.\n*/\nconst I18N_REGISTRY_KEY = Symbol.for(\"@videojs/i18n-registry\");\n/**\n* The registry is realm-global rather than module-global so duplicate copies of this module\n* converge on one set of translations.\n*\n* Duplication is normal, not a bug to fix upstream: separately loaded CDN bundles, a pinned and an\n* unpinned URL for the same file, and two bundlers' output on one page all yield distinct module\n* instances. With module-scoped state, a `registerI18n` call on one instance is invisible to the\n* player reading from another, and the locale silently falls back to English.\n*/\nfunction getRegistry() {\n\tconst host = globalThis;\n\tconst existing = host[I18N_REGISTRY_KEY];\n\tif (existing) return existing;\n\tconst registry = {\n\t\tlayers: /* @__PURE__ */ new Map(),\n\t\tsubscribers: /* @__PURE__ */ new Set()\n\t};\n\thost[I18N_REGISTRY_KEY] = registry;\n\treturn registry;\n}\nfunction notify() {\n\tfor (const cb of getRegistry().subscribers) cb();\n}\nfunction normalizeLocaleTag(tag) {\n\treturn tag.trim().replaceAll(\"_\", \"-\").toLowerCase();\n}\n/** Strip unicode locale extension sequences (`-u-…`) before any private-use `-x-` block. */\nfunction stripUnicodeExtensions(tag) {\n\tconst xIdx = tag.indexOf(\"-x-\");\n\tconst uIdx = (xIdx === -1 ? tag : tag.slice(0, xIdx)).indexOf(\"-u-\");\n\tif (uIdx === -1) return tag;\n\treturn tag.slice(0, uIdx) + (xIdx === -1 ? \"\" : tag.slice(xIdx));\n}\nfunction chineseFallback(segments) {\n\tif (segments[0] !== \"zh\") return;\n\tconst script = segments.find((segment) => segment === \"hant\" || segment === \"hans\");\n\treturn script === \"hant\" ? \"zh-tw\" : script === \"hans\" ? \"zh-cn\" : void 0;\n}\n/** Registry map key: normalized tag with unicode extensions removed (same base as {@link findLocaleKeys}). */\nfunction getCanonicalLocaleKey(locale) {\n\treturn stripUnicodeExtensions(normalizeLocaleTag(locale));\n}\n/**\n* Most-specific-first BCP 47 lookup tags (normalized). Always ends with `en` when missing from the truncated chain.\n*\n* @example `es-419-u-nu-latn` → `['es-419', 'es', 'en']`\n*/\nfunction findLocaleKeys(locale) {\n\tconst base = getCanonicalLocaleKey(locale);\n\tif (!base) return [DEFAULT_LOCALE];\n\tconst segments = base.split(\"-\").filter(Boolean);\n\tconst chain = [];\n\tfor (let len = segments.length; len >= 1; len--) chain.push(segments.slice(0, len).join(\"-\"));\n\tconst zhFallback = chineseFallback(segments);\n\tconst zhIndex = chain.indexOf(\"zh\");\n\tif (zhFallback && zhIndex !== -1) chain.splice(zhIndex, 0, zhFallback);\n\tconst out = [];\n\tconst seen = /* @__PURE__ */ new Set();\n\tfor (const tag of chain) if (!seen.has(tag)) {\n\t\tseen.add(tag);\n\t\tout.push(tag);\n\t}\n\tif (!seen.has(DEFAULT_LOCALE)) out.push(DEFAULT_LOCALE);\n\treturn out;\n}\nfunction mergeI18nTranslations(chain) {\n\tconst { layers } = getRegistry();\n\tconst merged = {};\n\tfor (let i = chain.length - 1; i >= 0; i--) {\n\t\tconst tag = chain[i];\n\t\tconst layer = layers.get(tag);\n\t\tif (layer) Object.assign(merged, layer);\n\t}\n\treturn merged;\n}\n/**\n* Register or merge translation strings for a BCP 47 locale tag.\n*\n* @param locale - BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).\n* @param translations - Partial nested locale values; merges with any existing layer for the tag.\n* @public\n*/\nfunction registerI18n(locale, translations) {\n\tconst { layers } = getRegistry();\n\tconst tag = getCanonicalLocaleKey(locale);\n\tconst existing = layers.get(tag) ?? {};\n\tlayers.set(tag, {\n\t\t...existing,\n\t\t...flattenTranslations(translations)\n\t});\n\tnotify();\n}\n/**\n* Return the merged registered translation map for a locale. Built-in English defaults are supplied by text descriptors.\n*\n* @param locale - BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).\n* @public\n*/\nfunction getI18nTranslations(locale) {\n\treturn mergeI18nTranslations(findLocaleKeys(locale));\n}\n/**\n* Subscribe to global registry mutations (for example after `registerI18n` or browser translation prefetch).\n*\n* @param callback - Invoked when any locale layer changes.\n* @public\n*/\nfunction onI18nRegistryChange(callback) {\n\tconst { subscribers } = getRegistry();\n\tsubscribers.add(callback);\n\treturn () => {\n\t\tsubscribers.delete(callback);\n\t};\n}\n/**\n* Whether an exact locale tag has been registered via `registerI18n` (not whether lazy packs exist).\n*\n* @param locale - BCP 47 tag to test.\n* @public\n*/\nfunction hasRegisteredLocale(locale) {\n\treturn getRegistry().layers.has(getCanonicalLocaleKey(locale));\n}\n/** Clears registered locale overlays (test isolation). */\nfunction resetI18nRegistry() {\n\tconst { layers, subscribers } = getRegistry();\n\tlayers.clear();\n\tsubscribers.clear();\n}\n//#endregion\nexport { findLocaleKeys, getCanonicalLocaleKey, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n, resetI18nRegistry };\n\n//# sourceMappingURL=registry.js.map"],"mappings":";AACA,SAAS,QAAQ,QAAQ,UAAU,CAAC,GAAG;CACtC,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,SAAS,CAAC;CAChB,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAAG;EAClD,MAAM,UAAU,SAAS,GAAG,OAAO,GAAG,QAAQ;EAC9C,IAAI,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK,GAAG,OAAO,OAAO,QAAQ,QAAQ,OAAO,EAAE,QAAQ,QAAQ,CAAC,CAAC;OAC9H,OAAO,WAAW;CACxB;CACA,OAAO;AACR;;;;ACRA,SAAS,oBAAoB,QAAQ,UAAU,CAAC,GAAG;CAClD,OAAO,QAAQ,QAAQ,OAAO;AAC/B;;;;;
|
|
1
|
+
{"version":3,"file":"i18n-DyF_NfCk.js","names":[],"sources":["../../utils/dist/object/flatten.js","../../core/dist/dev/core/i18n/utils/flatten.js","../../utils/dist/i18n.js","../../core/dist/dev/core/i18n/registry.js"],"sourcesContent":["//#region src/object/flatten.ts\nfunction flatten(object, options = {}) {\n\tconst { prefix = \"\" } = options;\n\tconst result = {};\n\tfor (const [key, value] of Object.entries(object)) {\n\t\tconst fullKey = prefix ? `${prefix}.${key}` : key;\n\t\tif (value !== null && typeof value === \"object\" && !Array.isArray(value)) Object.assign(result, flatten(value, { prefix: fullKey }));\n\t\telse result[fullKey] = value;\n\t}\n\treturn result;\n}\n//#endregion\nexport { flatten };\n\n//# sourceMappingURL=flatten.js.map","import { flatten } from \"@videojs/utils/object\";\n//#region src/core/i18n/utils/flatten.ts\nfunction flattenTranslations(locale, options = {}) {\n\treturn flatten(locale, options);\n}\n//#endregion\nexport { flattenTranslations };\n\n//# sourceMappingURL=flatten.js.map","import { getTextDirection } from \"./i18n/direction.js\";\n//#region src/i18n/index.ts\n/** Default locale used when no player or ambient locale is available. */\nconst DEFAULT_LOCALE = \"en\";\n//#endregion\nexport { DEFAULT_LOCALE, getTextDirection };\n\n//# sourceMappingURL=i18n.js.map","import { flattenTranslations } from \"./utils/flatten.js\";\nimport { DEFAULT_LOCALE } from \"@videojs/utils/i18n\";\n//#region src/core/i18n/registry.ts\n/**\n* Well-known key for the shared registry. Its name and value shape are a cross-version contract:\n* every copy of this module in a realm must agree on them, so change the key when the shape changes.\n*/\nconst I18N_REGISTRY_KEY = Symbol.for(\"@videojs/i18n-registry\");\n/**\n* The registry is realm-global rather than module-global so duplicate copies of this module\n* converge on one set of translations.\n*\n* Duplication is normal, not a bug to fix upstream: separately loaded CDN bundles, a pinned and an\n* unpinned URL for the same file, and two bundlers' output on one page all yield distinct module\n* instances. With module-scoped state, a `registerI18n` call on one instance is invisible to the\n* player reading from another, and the locale silently falls back to English.\n*/\nfunction getRegistry() {\n\tconst host = globalThis;\n\tconst existing = host[I18N_REGISTRY_KEY];\n\tif (existing) return existing;\n\tconst registry = {\n\t\tlayers: /* @__PURE__ */ new Map(),\n\t\tsubscribers: /* @__PURE__ */ new Set()\n\t};\n\thost[I18N_REGISTRY_KEY] = registry;\n\treturn registry;\n}\nfunction notify() {\n\tfor (const cb of getRegistry().subscribers) cb();\n}\nfunction normalizeLocaleTag(tag) {\n\treturn tag.trim().replaceAll(\"_\", \"-\").toLowerCase();\n}\n/** Strip unicode locale extension sequences (`-u-…`) before any private-use `-x-` block. */\nfunction stripUnicodeExtensions(tag) {\n\tconst xIdx = tag.indexOf(\"-x-\");\n\tconst uIdx = (xIdx === -1 ? tag : tag.slice(0, xIdx)).indexOf(\"-u-\");\n\tif (uIdx === -1) return tag;\n\treturn tag.slice(0, uIdx) + (xIdx === -1 ? \"\" : tag.slice(xIdx));\n}\nfunction chineseFallback(segments) {\n\tif (segments[0] !== \"zh\") return;\n\tconst script = segments.find((segment) => segment === \"hant\" || segment === \"hans\");\n\treturn script === \"hant\" ? \"zh-tw\" : script === \"hans\" ? \"zh-cn\" : void 0;\n}\n/** Registry map key: normalized tag with unicode extensions removed (same base as {@link findLocaleKeys}). */\nfunction getCanonicalLocaleKey(locale) {\n\treturn stripUnicodeExtensions(normalizeLocaleTag(locale));\n}\n/**\n* Most-specific-first BCP 47 lookup tags (normalized). Always ends with `en` when missing from the truncated chain.\n*\n* @example `es-419-u-nu-latn` → `['es-419', 'es', 'en']`\n*/\nfunction findLocaleKeys(locale) {\n\tconst base = getCanonicalLocaleKey(locale);\n\tif (!base) return [DEFAULT_LOCALE];\n\tconst segments = base.split(\"-\").filter(Boolean);\n\tconst chain = [];\n\tfor (let len = segments.length; len >= 1; len--) chain.push(segments.slice(0, len).join(\"-\"));\n\tconst zhFallback = chineseFallback(segments);\n\tconst zhIndex = chain.indexOf(\"zh\");\n\tif (zhFallback && zhIndex !== -1) chain.splice(zhIndex, 0, zhFallback);\n\tconst out = [];\n\tconst seen = /* @__PURE__ */ new Set();\n\tfor (const tag of chain) if (!seen.has(tag)) {\n\t\tseen.add(tag);\n\t\tout.push(tag);\n\t}\n\tif (!seen.has(DEFAULT_LOCALE)) out.push(DEFAULT_LOCALE);\n\treturn out;\n}\nfunction mergeI18nTranslations(chain) {\n\tconst { layers } = getRegistry();\n\tconst merged = {};\n\tfor (let i = chain.length - 1; i >= 0; i--) {\n\t\tconst tag = chain[i];\n\t\tconst layer = layers.get(tag);\n\t\tif (layer) Object.assign(merged, layer);\n\t}\n\treturn merged;\n}\n/**\n* Register or merge translation strings for a BCP 47 locale tag.\n*\n* @param locale - BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).\n* @param translations - Partial nested locale values; merges with any existing layer for the tag.\n* @public\n*/\nfunction registerI18n(locale, translations) {\n\tconst { layers } = getRegistry();\n\tconst tag = getCanonicalLocaleKey(locale);\n\tconst existing = layers.get(tag) ?? {};\n\tlayers.set(tag, {\n\t\t...existing,\n\t\t...flattenTranslations(translations)\n\t});\n\tnotify();\n}\n/**\n* Return the merged registered translation map for a locale. Built-in English defaults are supplied by text descriptors.\n*\n* @param locale - BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).\n* @public\n*/\nfunction getI18nTranslations(locale) {\n\treturn mergeI18nTranslations(findLocaleKeys(locale));\n}\n/**\n* Subscribe to global registry mutations (for example after `registerI18n` or browser translation prefetch).\n*\n* @param callback - Invoked when any locale layer changes.\n* @public\n*/\nfunction onI18nRegistryChange(callback) {\n\tconst { subscribers } = getRegistry();\n\tsubscribers.add(callback);\n\treturn () => {\n\t\tsubscribers.delete(callback);\n\t};\n}\n/**\n* Whether an exact locale tag has been registered via `registerI18n` (not whether lazy packs exist).\n*\n* @param locale - BCP 47 tag to test.\n* @public\n*/\nfunction hasRegisteredLocale(locale) {\n\treturn getRegistry().layers.has(getCanonicalLocaleKey(locale));\n}\n/** Clears registered locale overlays (test isolation). */\nfunction resetI18nRegistry() {\n\tconst { layers, subscribers } = getRegistry();\n\tlayers.clear();\n\tsubscribers.clear();\n}\n//#endregion\nexport { findLocaleKeys, getCanonicalLocaleKey, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n, resetI18nRegistry };\n\n//# sourceMappingURL=registry.js.map"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-
|
|
1
|
+
{"version":3,"file":"i18n-o3_t8fxw.js","names":[],"sources":["../src/define/i18n.ts"],"sourcesContent":["import { I18nProviderElement } from '../i18n/provider-element';\nimport { TextElement } from '../ui/text/text-element';\nimport { safeDefine } from './safe-define';\n\nsafeDefine(I18nProviderElement);\nsafeDefine(TextElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [I18nProviderElement.tagName]: I18nProviderElement;\n [TextElement.tagName]: TextElement;\n }\n}\n"],"mappings":"2FAIA,EAAW,CAAmB,EAC9B,EAAW,CAAW"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./minimal-BWLTn7oQ.js";import"./minimal-ui-DDM48qb3.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { i as safeDefine } from "./context-OhQY847V.js";
|
|
2
|
+
import { n as createShadowStyle } from "./shadow-styles-BkjnRJ4e.js";
|
|
3
|
+
import { n as createTemplate } from "./template-ClYP_1RH.js";
|
|
4
|
+
import { t as SkinElement } from "./skin-element-BF1a0EIj.js";
|
|
5
|
+
import { t as renderIcon } from "./minimal-6w_Vyyl9.js";
|
|
6
|
+
import "./minimal-ui-DY4C1zGt.js";
|
|
7
|
+
|
|
8
|
+
//#region inline-css:src/define/live-audio/minimal-skin.js
|
|
9
|
+
var minimal_skin_default = "/* -------------------------------------------------------------------------- */\n/* Global styles for the host document, outside of the Shadow DOM */\n/* -------------------------------------------------------------------------- */\n\nvideo-player,\nlive-video-player,\nmedia-i18n {\n display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"],\nlive-video-player video,\nlive-video-player [slot=\"poster\"] {\n display: block;\n width: 100%;\n height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container,\nlive-video-player video::-webkit-media-text-track-container {\n z-index: 1;\n font-family: inherit;\n scale: 0.98;\n translate: 0 var(--media-caption-track-y, 0);\n transition: translate var(--media-caption-track-duration, 0) ease-out;\n transition-delay: var(--media-caption-track-delay, 0);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Shared styles for all HTML skins */\n/* -------------------------------------------------------------------------- */\n\nmedia-tooltip-group {\n display: contents;\n}\n\n:host {\n /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n display: grid;\n width: 100%;\n}\n\nmedia-container {\n min-width: 0;\n min-height: 0;\n}\n\n/* Hide the volume popover when its slider is unavailable. */\n.media-popover--volume:has(media-volume-slider[data-hidden]) {\n display: none;\n}\n\n.media-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n white-space: nowrap;\n border: 0;\n clip: rect(0, 0, 0, 0);\n}\n\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n display: block;\n max-width: 100%;\n}\n.media-minimal-skin button {\n font: inherit;\n}\n.media-minimal-skin [hidden][hidden] {\n /* Keep authored templates hidden even when component classes set display. */\n display: none;\n}\n@media (prefers-reduced-motion: no-preference) {\n .media-minimal-skin {\n interpolate-size: allow-keywords;\n }\n}\n\n.media-minimal-skin {\n /* Colors */\n --accent-color: var(--media-accent-color, var(--default-accent-color));\n --accent-contrast-color: contrast-color(var(--accent-color));\n --accent-background-color: var(\n --media-accent-color,\n oklch(from var(--default-accent-color) l c h / calc(alpha * 0.1))\n );\n --accent-text-color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0 0 0))));\n --shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n --shadow-subtle-current-color: oklch(from var(--shadow-current-color) l c h / calc(alpha * 0.4));\n --scrollbar-thumb-color: oklch(from currentColor l c h / 0.3);\n\n /* Scaling - used in video fullscreen to scale the UI. */\n --scale: 1;\n /* Fixed scaling unit to avoid inheriting the document's root font size. This must be a CSS <length>. */\n --scale-unit: var(--media-scale-unit, 16px);\n --size: calc(var(--scale-unit) * var(--scale));\n /* Create a Tailwind-like spacing unit where 1 equals 4px with default scaling. */\n --spacing: calc(var(--size) / 4);\n\n /* Font sizes */\n --font-size-medium: calc(0.9375 * var(--size)); /* 15px */\n --font-size-base: calc(0.8125 * var(--size)); /* 13px */\n --font-size-small: calc(0.6875 * var(--size)); /* 11px */\n --font-size-tiny: calc(0.5625 * var(--size)); /* 9px */\n --media-icon-size: calc(1.125 * var(--size)); /* 18px */\n\n /* Radii */\n --container-border-radius: var(--media-border-radius, 0.75rem);\n\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n container: media-root / inline-size;\n font-family:\n Inter Variable,\n Inter,\n ui-sans-serif,\n system-ui,\n sans-serif;\n font-size: var(--font-size-base);\n -webkit-font-smoothing: auto;\n -moz-osx-font-smoothing: auto;\n line-height: 1.5;\n letter-spacing: normal;\n outline: 2px solid transparent;\n outline-offset: -4px;\n scrollbar-color: var(--scrollbar-thumb-color) transparent;\n scrollbar-width: thin;\n border-radius: var(--container-border-radius);\n isolation: isolate;\n transition-timing-function: ease-out;\n transition-duration: 100ms;\n transition-property: outline-offset, outline-color;\n\n &:focus-visible {\n outline-color: var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb-color);\n border-radius: 9999px;\n }\n\n @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n --scrollbar-thumb-color: oklch(from currentColor l c h / 0.8);\n scrollbar-width: auto;\n }\n}\n\n.media-minimal-skin .media-buffering-indicator {\n position: absolute;\n inset: 0;\n z-index: 10;\n display: none;\n place-content: center;\n color: oklch(1 0 0);\n pointer-events: none;\n\n &:not([data-visible]) {\n --media-spinner-animation: none;\n }\n\n &[data-visible] {\n display: grid;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --media-spinner-animation: none;\n }\n}\n\n.media-minimal-skin .media-error:not([data-open]) {\n display: none;\n}\n\n.media-minimal-skin .media-error__title {\n font-weight: 600;\n line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n overflow-wrap: anywhere;\n opacity: 0.7;\n}\n\n.media-minimal-skin .media-error__actions {\n display: flex;\n gap: calc(var(--spacing) * 2);\n\n > * {\n flex: 1;\n }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n visibility: hidden;\n}\n\n.media-minimal-skin .media-controls {\n --media-popover-side-offset: calc(var(--spacing) * (var(--base-side-offset, 2) + 1));\n --media-tooltip-side-offset: var(--media-popover-side-offset);\n --media-popover-boundary-offset: calc(var(--spacing) * (var(--base-boundary-offset, 0) + 1));\n --media-tooltip-boundary-offset: var(--media-popover-boundary-offset);\n\n display: flex;\n align-items: center;\n padding: calc(var(--spacing) * 1);\n container: media-controls / inline-size;\n text-shadow: 0 1px 0 var(--shadow-current-color);\n background-color: var(--controls-background-color);\n backdrop-filter: var(--controls-backdrop-filter);\n\n &:dir(rtl) {\n flex-direction: row-reverse;\n }\n}\n\n.media-minimal-skin .media-time-controls {\n display: flex;\n flex: 1;\n flex-direction: row-reverse;\n gap: calc(var(--spacing) * 3);\n align-items: center;\n container: media-time-controls / inline-size;\n\n &:dir(rtl) {\n flex-direction: row;\n }\n}\n\n.media-minimal-skin .media-time-group {\n display: flex;\n gap: calc(var(--spacing) * 1);\n align-items: center;\n\n &:dir(rtl) {\n flex-direction: row-reverse;\n }\n}\n\n.media-minimal-skin .media-time {\n font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time[role=\"button\"] {\n cursor: pointer;\n outline: 2px solid transparent;\n outline-offset: -2px;\n border-radius: calc(var(--spacing) * 1);\n transition-timing-function: ease-out;\n transition-duration: 100ms;\n transition-property: outline-color, outline-offset;\n\n @supports (corner-shape: squircle) {\n border-radius: calc(var(--spacing) * 4);\n corner-shape: squircle;\n }\n\n &:focus-visible {\n outline-color: var(--focus-ring-color);\n outline-offset: 2px;\n }\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n display: none;\n}\n\n@container media-root (width > 42rem) {\n .media-minimal-skin .media-time-controls {\n flex-direction: row;\n\n &:dir(rtl) {\n flex-direction: row-reverse;\n }\n }\n\n .media-minimal-skin .media-time--duration,\n .media-minimal-skin .media-time-separator {\n color: oklch(from currentColor l c h / 0.6);\n }\n\n .media-minimal-skin .media-time--current,\n .media-minimal-skin .media-time-separator {\n display: inline;\n }\n}\n\n/* Base button */\n.media-minimal-skin .media-button {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n height: calc(var(--spacing) * 9.5);\n min-height: 0;\n padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);\n text-align: center;\n touch-action: manipulation;\n cursor: pointer;\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n border: none;\n border-radius: calc(var(--spacing) * 2);\n transition-timing-function: ease-out;\n transition-duration: 150ms;\n transition-property: background-color, outline-offset, scale;\n /* Fix weird jumping when clicking on the buttons in Safari. */\n will-change: scale;\n\n &:focus-visible {\n outline-color: var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &:active:not([aria-disabled=\"true\"]) {\n scale: 0.97;\n }\n\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}\n\n@supports (corner-shape: squircle) {\n .media-minimal-skin .media-button {\n border-radius: calc(var(--spacing) * 4);\n corner-shape: squircle;\n }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n font-weight: 500;\n color: var(--accent-contrast-color);\n text-shadow: none;\n background: var(--accent-color);\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n color: inherit;\n text-shadow: inherit;\n background: transparent;\n\n &:not([aria-disabled=\"true\"]) {\n &:hover,\n &:focus-visible,\n &[aria-expanded=\"true\"] {\n color: var(--accent-text-color);\n text-decoration: none;\n background-color: var(--accent-background-color);\n }\n }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n display: grid;\n aspect-ratio: 1;\n padding: 0;\n\n &:active:not([aria-disabled=\"true\"]) {\n scale: 0.97;\n }\n\n .media-icon__container {\n display: grid;\n }\n\n .media-icon {\n grid-area: 1 / 1;\n filter: drop-shadow(0 1px 0 var(--shadow-current-color));\n transition-timing-function: ease-out;\n transition-duration: 150ms;\n transition-property: opacity, scale;\n }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n .media-icon__label {\n position: absolute;\n right: -1px;\n bottom: -3px;\n font-size: 0.715em; /* 10px */\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n letter-spacing: -0.05em;\n }\n\n &:has(.media-icon--flipped) .media-icon__label {\n right: unset;\n left: -1px;\n }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n padding: 0;\n font-variant-numeric: tabular-nums;\n\n &::after {\n width: 4ch;\n content: attr(data-rate) \"\\00D7\";\n }\n\n &[data-inline-rate-label]::after {\n content: none;\n }\n}\n\n/* Settings button */\n.media-minimal-skin .media-button--settings {\n .media-icon--settings {\n transition: transform 150ms ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0ms;\n }\n }\n\n &[aria-expanded=\"true\"] .media-icon--settings {\n transform: rotate(90deg);\n }\n}\n\n/* Live button — wide pill button with a status dot (gray → red at the live\n edge) rendered via ::before, and \"LIVE\" text rendered as the button's own\n text content. */\n.media-minimal-skin .media-button--live {\n display: inline-flex;\n gap: calc(var(--spacing) * 1.5);\n align-items: center;\n width: auto;\n aspect-ratio: auto;\n padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);\n font-size: var(--font-size-small);\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n\n &::before {\n display: inline-block;\n flex-shrink: 0;\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n content: \"\";\n background-color: oklch(from currentColor l c h / 0.4);\n border-radius: 50%;\n transition: background-color 150ms ease-out;\n }\n\n &[data-live-edge]::before {\n background-color: oklch(0.65 0.22 27);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .media-minimal-skin .media-button {\n scale: 1;\n transition-property: background-color;\n will-change: auto;\n }\n}\n\n.media-minimal-skin .media-button-group {\n display: flex;\n gap: 1px;\n align-items: center;\n\n &:dir(rtl) {\n flex-direction: row-reverse;\n }\n}\n\n.media-minimal-skin .media-badge {\n padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);\n font-size: var(--font-size-small);\n font-weight: 500;\n line-height: 1;\n color: oklch(from currentColor l c h / 0.85);\n white-space: nowrap;\n background-color: oklch(from currentColor l c h / 0.1);\n border-radius: calc(var(--spacing) * 1);\n}\n\n.media-minimal-skin .media-icon__container {\n position: relative;\n}\n\n.media-minimal-skin .media-icon {\n flex-shrink: 0;\n width: var(--media-icon-size);\n height: var(--media-icon-size);\n}\n.media-minimal-skin .media-icon--flipped,\n.media-minimal-skin:dir(rtl) .media-menu__chevron {\n scale: -1 1;\n}\n\n.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {\n scale: 1 1;\n}\n\n.media-minimal-skin .media-slider {\n --track-size: calc(var(--spacing) * 1);\n --track-highlighted-size: calc(var(--spacing) * 1.75);\n --track-border-radius: 99px;\n --thumb-size: calc(var(--spacing) * 3);\n --chapter-gap: calc(var(--spacing) * 1);\n --chapter-inset-start: calc(var(--chapter-gap) / 2);\n --chapter-inset-end: calc(var(--chapter-gap) / 2);\n\n position: relative;\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n border-radius: var(--track-border-radius);\n\n &[data-orientation=\"horizontal\"] {\n width: var(--slider-width, 100%);\n min-width: calc(var(--spacing) * 20);\n height: var(--slider-height, calc(var(--spacing) * 8));\n }\n &[data-orientation=\"vertical\"] {\n width: var(--slider-width, calc(var(--spacing) * 8));\n height: var(--slider-height, calc(var(--spacing) * 20));\n }\n\n /* Track */\n .media-slider__track {\n position: relative;\n overflow: hidden;\n user-select: none;\n background-color: oklch(from currentColor l c h / 0.2);\n border-radius: inherit;\n isolation: isolate;\n\n &[data-orientation=\"horizontal\"] {\n width: 100%;\n height: var(--track-size);\n }\n &[data-orientation=\"vertical\"] {\n width: var(--track-size);\n height: 100%;\n }\n }\n\n /* Shared track fills */\n .media-slider__buffer,\n .media-slider__fill {\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n\n &[data-orientation=\"horizontal\"] {\n inset-block: 0;\n left: 0;\n width: 100%;\n }\n &[data-orientation=\"vertical\"] {\n inset-inline: 0;\n bottom: 0;\n height: 100%;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition: clip-path 200ms ease-out;\n }\n }\n &[data-dragging],\n &[data-seeking] {\n .media-slider__fill,\n .media-slider__buffer {\n transition-duration: 0ms;\n }\n }\n\n /* Buffer */\n .media-slider__buffer {\n background-color: oklch(from currentColor l c h / 0.2);\n\n &[data-orientation=\"horizontal\"] {\n clip-path: inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--track-border-radius));\n }\n &[data-orientation=\"vertical\"] {\n clip-path: inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--track-border-radius));\n }\n }\n\n /* Fill */\n .media-slider__fill {\n background-color: var(--accent-color);\n\n &[data-orientation=\"horizontal\"] {\n clip-path: inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--track-border-radius));\n }\n &[data-orientation=\"vertical\"] {\n clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));\n }\n }\n &[data-dragging] {\n .media-slider__fill[data-orientation=\"horizontal\"] {\n clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));\n }\n .media-slider__fill[data-orientation=\"vertical\"] {\n clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));\n }\n }\n\n /* Chapters */\n .media-slider__chapters {\n position: relative;\n display: flex;\n flex: 1;\n align-items: center;\n min-width: 0;\n min-height: 0;\n border-radius: inherit;\n\n &[data-orientation=\"horizontal\"] {\n width: 100%;\n height: 100%;\n }\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n width: 100%;\n height: 100%;\n }\n }\n\n .media-slider__chapter {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n min-height: 0;\n\n &:first-child {\n --chapter-inset-start: 0px;\n }\n &:last-child {\n --chapter-inset-end: 0px;\n }\n\n .media-slider__chapter-track {\n border-radius: var(--track-border-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: 200ms ease-out;\n transition-property: height, width;\n }\n }\n\n &[data-orientation=\"horizontal\"] {\n clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));\n\n .media-slider__chapter-track {\n height: var(--track-size);\n clip-path: inset(\n 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0\n calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)\n );\n }\n\n &[data-highlighted] .media-slider__chapter-track {\n height: var(--track-highlighted-size);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);\n\n .media-slider__chapter-track {\n width: var(--track-size);\n clip-path: inset(\n calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0\n calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)\n );\n }\n\n &[data-highlighted] .media-slider__chapter-track {\n width: var(--track-highlighted-size);\n }\n }\n }\n\n /* Thumb */\n .media-slider__thumb {\n position: absolute;\n z-index: 10;\n width: var(--thumb-size);\n height: var(--thumb-size);\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n background-color: currentColor;\n border-radius: calc(Infinity * 1px);\n box-shadow:\n 0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),\n 0 1px 3px 0 oklch(0 0 0 / 0.15),\n 0 1px 2px -1px oklch(0 0 0 / 0.15);\n opacity: 0;\n transform-origin: center;\n scale: 0.7;\n translate: -50% -50%;\n\n &[data-orientation=\"horizontal\"] {\n top: 50%;\n left: var(--media-slider-fill);\n }\n &[data-orientation=\"vertical\"] {\n top: calc(100% - var(--media-slider-fill));\n left: 50%;\n }\n\n &:focus-visible {\n outline-color: var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &:focus-visible,\n &.media-slider__thumb--persistent {\n opacity: 1;\n scale: 1;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n transition-timing-function: ease-out;\n transition-duration: 150ms;\n transition-property: opacity, outline-offset, left, top, scale;\n }\n }\n\n @media (hover: hover) and (pointer: fine) {\n &:hover .media-slider__thumb {\n opacity: 1;\n scale: 1;\n }\n }\n\n &[data-dragging] .media-slider__thumb {\n opacity: 1;\n scale: 0.9;\n\n @media (prefers-reduced-motion: no-preference) {\n transition-property: opacity, outline-offset, scale;\n }\n\n &[data-orientation=\"horizontal\"] {\n left: var(--media-slider-pointer);\n }\n &[data-orientation=\"vertical\"] {\n top: calc(100% - var(--media-slider-pointer));\n }\n }\n\n /* Preview */\n .media-slider__preview {\n --max-size-factor: 28;\n --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);\n\n min-width: 100%;\n height: calc(var(--spacing) * 1);\n\n @container media-root (width > 32rem) {\n --max-size-factor: 36;\n }\n\n @container media-root (width > 42rem) {\n --max-size-factor: 48;\n }\n\n .media-slider__thumbnail,\n .media-slider__value {\n position: absolute;\n left: var(--preview-left, var(--media-slider-pointer));\n max-width: var(--max-size);\n opacity: 0;\n filter: blur(8px);\n transform-origin: bottom;\n scale: 0.8;\n translate: -50% calc(var(--spacing) * 2);\n transition-timing-function: ease-out;\n transition-duration: 150ms;\n transition-property: filter, opacity, scale;\n }\n\n .media-slider__thumbnail {\n --thumbnail-max-width: var(--max-size);\n --thumbnail-max-height: var(--max-size);\n bottom: calc(100% + (var(--spacing) * 11));\n }\n\n .media-slider__value {\n bottom: calc(100% + (var(--spacing) * 5));\n display: flex;\n flex-direction: row-reverse;\n gap: calc(var(--spacing) * 2);\n justify-content: center;\n padding-inline: calc(var(--spacing) * 3);\n text-shadow: 0 1px 0 var(--shadow-current-color);\n }\n\n .media-slider__chapter-title {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:empty {\n display: none;\n }\n }\n\n &::before {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n content: \"\";\n background-color: oklch(from currentColor l c h / 0.35);\n opacity: 0;\n scale: 0.5;\n translate: -50% -50%;\n transition-timing-function: ease-out;\n transition-duration: 200ms;\n transition-property: opacity, scale;\n }\n\n &[data-orientation=\"horizontal\"]::before {\n top: 50%;\n left: var(--media-slider-pointer);\n width: 1px;\n height: calc(var(--spacing) * 5);\n }\n &[data-orientation=\"vertical\"]::before {\n top: calc(100% - var(--media-slider-pointer));\n left: 50%;\n width: calc(var(--spacing) * 5);\n height: 1px;\n }\n\n &[data-pointing]:not([data-dragging])::before {\n opacity: 1;\n scale: 1;\n }\n }\n\n &:is([data-pointing], :has(:focus-visible))\n .media-slider__preview\n :is(.media-slider__value, .media-slider__thumbnail) {\n opacity: 1;\n filter: blur(0);\n scale: 1;\n }\n}\n\n.media-minimal-skin {\n --popup-transition:\n opacity var(--popup-transition-timing-function) var(--popup-transition-duration),\n filter var(--popup-transition-timing-function) var(--popup-transition-duration),\n transform var(--popup-transition-timing-function) var(--popup-transition-duration),\n scale var(--popup-transition-timing-function) var(--popup-transition-duration);\n}\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n --popup-translate-distance: calc(var(--spacing) * 2);\n margin: 0;\n overflow: visible;\n color: inherit;\n border: 0;\n transition: var(--popup-transition);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n /* We have to use transform here for translate as the translate property is used for positioning by core. */\n transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0));\n scale: 0.95;\n }\n\n &[data-ending-style] {\n filter: blur(4px);\n transform: none;\n /* Speed up the exit transition. */\n transition-duration: max(0ms, calc(var(--popup-transition-duration) - 50ms));\n }\n\n &[data-side=\"top\"] {\n --popup-translate-y-distance: var(--popup-translate-distance);\n transform-origin: bottom;\n }\n &[data-side=\"bottom\"] {\n --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);\n transform-origin: top;\n }\n &[data-side=\"left\"] {\n --popup-translate-x-distance: var(--popup-translate-distance);\n transform-origin: right;\n }\n &[data-side=\"right\"] {\n --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);\n transform-origin: left;\n }\n\n /* Safe area between trigger and popup */\n &::before {\n position: absolute;\n pointer-events: inherit;\n content: \"\";\n }\n\n &[data-side=\"top\"]::before,\n &[data-side=\"bottom\"]::before {\n inset-inline: 0;\n width: 100%;\n }\n &[data-side=\"top\"]::before {\n top: 100%;\n }\n &[data-side=\"bottom\"]::before {\n bottom: 100%;\n }\n\n &[data-side=\"left\"]::before,\n &[data-side=\"right\"]::before {\n inset-block: 0;\n height: 100%;\n }\n &[data-side=\"left\"]::before {\n left: 100%;\n }\n &[data-side=\"right\"]::before {\n right: 100%;\n }\n}\n\n.media-minimal-skin .media-popover {\n &[data-side=\"top\"]::before,\n &[data-side=\"bottom\"]::before {\n height: var(--media-popover-side-offset);\n }\n &[data-side=\"left\"]::before,\n &[data-side=\"right\"]::before {\n width: var(--media-popover-side-offset);\n }\n}\n\n.media-minimal-skin .media-tooltip {\n padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);\n font-size: var(--font-size-base);\n color: var(--tooltip-text-color);\n white-space: nowrap;\n background-color: var(--tooltip-background-color);\n border-radius: calc(var(--spacing) * 2);\n box-shadow:\n 0 0 0 1px var(--tooltip-border-color),\n 0 4px 6px -1px oklch(0 0 0 / 0.2),\n 0 2px 4px -2px oklch(0 0 0 / 0.2);\n backdrop-filter: var(--tooltip-backdrop-filter);\n\n /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */\n &[data-open] {\n display: flex;\n column-gap: calc(var(--spacing) * 1);\n align-items: center;\n }\n\n &[data-side=\"top\"]::before,\n &[data-side=\"bottom\"]::before {\n height: var(--media-tooltip-side-offset);\n }\n &[data-side=\"left\"]::before,\n &[data-side=\"right\"]::before {\n width: var(--media-tooltip-side-offset);\n }\n\n .media-tooltip__kbd {\n min-width: 1.5em;\n padding: 0.1em;\n margin-right: calc(var(--spacing) * -1);\n font-family: inherit;\n font-size: var(--font-size-small);\n font-weight: 600;\n line-height: 1.25;\n text-align: center;\n background-color: oklch(from currentColor l c h / 0.15);\n border-radius: calc(var(--spacing) * 1);\n }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-hidden]) {\n display: none;\n}\n\n.media-minimal-skin .media-menu {\n --menu-transition-duration: 250ms;\n --menu-max-height: calc(var(--spacing) * 56);\n --menu-padding: calc(var(--spacing) * 1);\n --menu-border-radius: calc(var(--spacing) * 2.5);\n --menu-item-border-radius: calc(var(--menu-border-radius) - var(--menu-padding));\n box-sizing: border-box;\n min-width: max-content;\n max-width: var(--media-popover-available-width, none);\n max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height));\n padding: var(--menu-padding);\n overflow: auto;\n overscroll-behavior: none;\n background-color: var(--popover-background-color);\n border-radius: var(--menu-border-radius);\n box-shadow:\n 0 0 0 1px var(--popover-border-color),\n 0 4px 6px -1px oklch(0 0 0 / 0.1),\n 0 2px 4px -2px oklch(0 0 0 / 0.1);\n backdrop-filter: var(--popover-backdrop-filter);\n\n @media (prefers-reduced-motion: reduce) {\n --menu-transition-duration: 0ms;\n }\n\n & > .media-menu__panel {\n position: absolute;\n inset-inline: 0;\n top: 0;\n z-index: 10;\n max-height: inherit;\n padding: var(--menu-padding);\n overflow: auto;\n overscroll-behavior: none;\n outline: none;\n translate: 0 0;\n transition-timing-function: ease-out;\n transition-duration: var(--menu-transition-duration);\n transition-property: translate, filter;\n\n &:where([data-starting-style], [data-ending-style]) {\n overflow: hidden;\n pointer-events: none;\n filter: blur(8px);\n translate: 100% 0;\n }\n\n &:dir(rtl):where([data-starting-style], [data-ending-style]) {\n translate: -100% 0;\n }\n }\n\n .media-menu__separator {\n margin: calc(var(--spacing) * 1) 0;\n border-bottom: 1px solid oklch(1 0 0 / 0.1);\n }\n\n .media-menu__group {\n anchor-scope: --menu-item-highlight-anchor;\n display: flex;\n flex-direction: column;\n gap: calc(var(--spacing) * 0.5);\n\n @supports (top: anchor(top)) {\n &::before {\n position: absolute;\n position-anchor: --menu-item-highlight-anchor;\n inset: anchor(inside);\n /* Firefox treats the moving highlight as a content shift and re-scrolls\n the menu while hovering. Exclude it from scroll anchoring. */\n overflow-anchor: none;\n pointer-events: none;\n content: \"\";\n background-color: var(--accent-background-color);\n border-radius: var(--menu-item-border-radius);\n transition: inset 100ms ease-in-out;\n }\n\n &:has([data-highlighted=\"\"])::before {\n transition-duration: 0ms;\n }\n }\n }\n\n .media-menu__item,\n .media-menu__back {\n position: relative;\n display: flex;\n gap: calc(var(--spacing) * 1.5);\n align-items: center;\n padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);\n text-align: start;\n text-shadow: 0 1px 0 var(--shadow-current-color);\n cursor: pointer;\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n border-radius: var(--menu-item-border-radius);\n transition: background-color, color;\n transition-timing-function: ease-in-out;\n transition-duration: 100ms;\n\n .media-icon {\n flex-shrink: 0;\n color: oklch(from currentColor l c h / 0.5);\n filter: drop-shadow(0 1px 0 var(--shadow-current-color));\n }\n\n &:focus-visible {\n outline-color: var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &:hover,\n &[data-highlighted] {\n color: var(--accent-text-color);\n background-color: var(--accent-background-color);\n\n .media-icon {\n color: inherit;\n }\n }\n\n @supports (top: anchor(top)) {\n transition-duration: 50ms;\n\n &:hover,\n &[data-highlighted] {\n transition-duration: 200ms;\n }\n }\n }\n\n .media-menu__indicator {\n flex-shrink: 0;\n margin-inline: auto calc(var(--spacing) * -1);\n opacity: 0;\n }\n\n .media-menu__item {\n justify-content: space-between;\n font-variant-numeric: tabular-nums;\n color: inherit;\n\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &[aria-checked=\"true\"] .media-menu__indicator {\n opacity: 1;\n }\n\n &[data-availability=\"unavailable\"],\n &[data-availability=\"unsupported\"] {\n display: none;\n }\n\n &[data-highlighted] {\n @supports (top: anchor(top)) {\n anchor-name: --menu-item-highlight-anchor;\n background-color: transparent;\n }\n }\n }\n\n .media-menu__tier {\n padding-inline-start: calc(var(--spacing) * 0.5);\n padding-top: 1px;\n font-size: var(--font-size-tiny);\n font-weight: 600;\n line-height: 1;\n color: oklch(from currentColor l c h / 0.7);\n }\n\n .media-menu__back {\n width: 100%;\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n\n .media-menu__hint {\n display: inline-flex;\n gap: calc(var(--spacing) * 1);\n align-items: center;\n min-width: 0;\n padding-inline-start: calc(var(--spacing) * 2);\n margin-inline-start: auto;\n color: oklch(from currentColor l c h / 0.65);\n }\n\n .media-menu__hint-label {\n max-width: calc(var(--spacing) * 24);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .media-menu__chevron {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n /* Settings menu */\n &.media-menu--settings {\n width: var(--media-menu-width);\n min-width: calc(var(--spacing) * 48);\n height: var(--media-menu-height);\n overflow: hidden;\n /* Only the menu size changes between panels. */\n transition:\n var(--popup-transition),\n width var(--popup-transition-timing-function) var(--menu-transition-duration),\n height var(--popup-transition-timing-function) var(--menu-transition-duration);\n\n & > :not([data-submenu]) {\n translate: 0 0;\n transition:\n translate var(--menu-transition-duration) ease-out,\n filter var(--menu-transition-duration) ease-out;\n }\n\n &[data-submenu-expanded=\"true\"] > :not([data-submenu]) {\n filter: blur(8px);\n translate: -100% 0;\n }\n\n &:dir(rtl)[data-submenu-expanded=\"true\"] > :not([data-submenu]) {\n translate: 100% 0;\n }\n\n /* WebKit can restart the covered-content transition while the\n anchor-positioned highlight remains active. */\n &[data-submenu-expanded] > :not([data-submenu])::before {\n display: none;\n }\n\n /* Don't transition size on open/close. */\n &[data-starting-style],\n &[data-ending-style] {\n transition: var(--popup-transition);\n }\n }\n}\n\n/* ==========================================================================\n Icon State Visibility for Audio Skins\n\n Data-attribute-driven visibility rules for multi-state icon buttons shared\n by the HTML and React skins.\n ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high {\n display: none;\n opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused or not yet started (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,\n/* Play: started and not paused/ended → pause */\n.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high {\n display: block;\n opacity: 1;\n}\n\n\n/* Container */\n\n.media-minimal-skin--audio {\n --default-accent-color: light-dark(oklch(0 0 0), oklch(1 0 0));\n --focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));\n\n --controls-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\n --controls-backdrop-filter: blur(16px) saturate(1.5);\n --controls-border-color: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.1));\n --controls-text-color: light-dark(oklch(0 0 0), oklch(1 0 0));\n\n --error-dialog-transition-duration: 250ms;\n --error-dialog-transition-delay: 100ms;\n\n --popup-transition-duration: 100ms;\n --popup-transition-timing-function: ease-out;\n\n --popover-backdrop-filter: blur(16px) saturate(1.5);\n --popover-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\n --popover-border-color: oklch(0 0 0 / 0.1);\n\n --tooltip-backdrop-filter: var(--popover-backdrop-filter);\n --tooltip-background-color: var(--popover-background-color);\n --tooltip-border-color: var(--popover-border-color);\n\n --tooltip-text-color: currentColor;\n\n @media (prefers-reduced-motion: reduce) {\n --error-dialog-transition-duration: 50ms;\n --error-dialog-transition-delay: 0ms;\n --popup-transition-duration: 0ms;\n }\n\n @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n --tooltip-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\n }\n}\n\n/* Error Dialog */\n\n.media-minimal-skin--audio .media-error__dialog {\n position: absolute;\n inset: 0;\n z-index: 20;\n display: flex;\n gap: calc(var(--spacing) * 4);\n align-items: center;\n padding-inline: calc(var(--spacing) * 5) calc(var(--spacing) * 2);\n background-color: oklch(from var(--controls-background-color) l c h / 1);\n border-radius: calc(Infinity * 1px);\n transition-delay: var(--error-dialog-transition-delay);\n transition-timing-function: ease-out;\n transition-duration: var(--error-dialog-transition-duration);\n transition-property: opacity, filter, scale;\n}\n\n.media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n opacity: 0;\n filter: blur(4px);\n scale: 0.95;\n}\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n transition-delay: 0ms;\n}\n\n.media-minimal-skin--audio .media-error__content {\n display: flex;\n flex: 1;\n gap: calc(var(--spacing) * 2);\n align-items: center;\n}\n\n/* Controls */\n\n.media-minimal-skin--audio .media-controls {\n --base-side-offset: 2;\n --base-boundary-offset: 2;\n\n gap: calc(var(--spacing) * 2);\n color: var(--controls-text-color);\n border-radius: var(--media-border-radius, calc(var(--spacing) * 3.5));\n box-shadow: 0 0 0 1px var(--controls-border-color);\n}\n\n/* Buffering (spinner over play button — overlay only, no layout change) */\n\n.media-minimal-skin--audio .media-button--play__wrapper {\n position: relative;\n display: inline-flex;\n}\n\n.media-minimal-skin--audio .media-button--play__wrapper .media-buffering-indicator {\n color: inherit;\n}\n\n.media-minimal-skin--audio\n .media-button--play__wrapper:has(.media-buffering-indicator[data-visible])\n .media-button--play\n .media-icon {\n opacity: 0;\n}\n\n/* Popups & Animations */\n\n.media-minimal-skin--audio .media-popover--volume {\n --media-popover-side-offset: 0rem;\n padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 16);\n background: linear-gradient(to left, var(--controls-background-color) 80%, transparent 100%);\n}\n\n.media-minimal-skin--audio .media-slider .media-slider__preview .media-slider__value {\n bottom: calc(var(--spacing) * 10);\n}\n\n";
|
|
10
|
+
|
|
11
|
+
//#endregion
|
|
12
|
+
//#region src/define/live-audio/minimal-skin.ts
|
|
13
|
+
function getTemplateHTML() {
|
|
14
|
+
return `
|
|
15
|
+
<media-container class="media-minimal-skin media-minimal-skin--audio">
|
|
16
|
+
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
|
|
17
|
+
<slot name="media"></slot>
|
|
18
|
+
<slot></slot>
|
|
19
|
+
|
|
20
|
+
<media-error-dialog class="media-error">
|
|
21
|
+
<div class="media-error__dialog">
|
|
22
|
+
<div class="media-error__content">
|
|
23
|
+
<media-alert-dialog-title class="media-error__title"></media-alert-dialog-title>
|
|
24
|
+
<media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="media-error__actions">
|
|
27
|
+
<media-alert-dialog-close class="media-button media-button--subtle"></media-alert-dialog-close>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</media-error-dialog>
|
|
31
|
+
|
|
32
|
+
<div class="media-controls">
|
|
33
|
+
<media-tooltip-group>
|
|
34
|
+
<div class="media-button-group">
|
|
35
|
+
<span class="media-button--play__wrapper">
|
|
36
|
+
<media-buffering-indicator class="media-buffering-indicator">
|
|
37
|
+
${renderIcon("spinner", { class: "media-icon" })}
|
|
38
|
+
</media-buffering-indicator>
|
|
39
|
+
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
|
|
40
|
+
${renderIcon("restart", { class: "media-icon media-icon--restart" })}
|
|
41
|
+
${renderIcon("play", { class: "media-icon media-icon--play" })}
|
|
42
|
+
${renderIcon("pause", { class: "media-icon media-icon--pause" })}
|
|
43
|
+
</media-play-button>
|
|
44
|
+
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip">
|
|
45
|
+
<media-tooltip-label></media-tooltip-label>
|
|
46
|
+
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
|
|
47
|
+
</media-tooltip>
|
|
48
|
+
</span>
|
|
49
|
+
|
|
50
|
+
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div class="media-time-controls" aria-hidden="true"></div>
|
|
54
|
+
|
|
55
|
+
<div class="media-button-group">
|
|
56
|
+
<media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
|
|
57
|
+
${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
|
|
58
|
+
${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
|
|
59
|
+
${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
|
|
60
|
+
</media-mute-button>
|
|
61
|
+
|
|
62
|
+
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="media-popover media-popover--volume">
|
|
63
|
+
<media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
|
|
64
|
+
<media-slider-track class="media-slider__track">
|
|
65
|
+
<media-slider-fill class="media-slider__fill"></media-slider-fill>
|
|
66
|
+
</media-slider-track>
|
|
67
|
+
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
|
|
68
|
+
</media-volume-slider>
|
|
69
|
+
</media-popover>
|
|
70
|
+
</div>
|
|
71
|
+
</media-tooltip-group>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<!-- Hotkeys -->
|
|
75
|
+
<media-hotkey keys="Space" action="togglePaused"></media-hotkey>
|
|
76
|
+
<media-hotkey keys="k" action="togglePaused"></media-hotkey>
|
|
77
|
+
<media-hotkey keys="m" action="toggleMuted"></media-hotkey>
|
|
78
|
+
<media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey>
|
|
79
|
+
<media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey>
|
|
80
|
+
</media-container>
|
|
81
|
+
`;
|
|
82
|
+
}
|
|
83
|
+
var MinimalLiveAudioSkinElement = class extends SkinElement {
|
|
84
|
+
static {
|
|
85
|
+
this.tagName = "live-audio-minimal-skin";
|
|
86
|
+
}
|
|
87
|
+
static {
|
|
88
|
+
this.styles = createShadowStyle(minimal_skin_default);
|
|
89
|
+
}
|
|
90
|
+
static {
|
|
91
|
+
this.template = createTemplate(getTemplateHTML());
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
safeDefine(MinimalLiveAudioSkinElement);
|
|
95
|
+
|
|
96
|
+
//#endregion
|
|
97
|
+
//# sourceMappingURL=live-audio-minimal.dev.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"live-audio-minimal.dev.js","names":["styles"],"sources":["../inline-css:src/define/live-audio/minimal-skin.js","../src/define/live-audio/minimal-skin.ts"],"sourcesContent":["export default \"/* -------------------------------------------------------------------------- */\\n/* Global styles for the host document, outside of the Shadow DOM */\\n/* -------------------------------------------------------------------------- */\\n\\nvideo-player,\\nlive-video-player,\\nmedia-i18n {\\n display: contents;\\n}\\n\\n/*\\nRequired to override any default video and image styles (such as\\nTailwind's CSS reset) and ensure they fill the container as expected.\\n*/\\nvideo-player video,\\nvideo-player [slot=\\\"poster\\\"],\\nlive-video-player video,\\nlive-video-player [slot=\\\"poster\\\"] {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\nvideo-player video::-webkit-media-text-track-container,\\nlive-video-player video::-webkit-media-text-track-container {\\n z-index: 1;\\n font-family: inherit;\\n scale: 0.98;\\n translate: 0 var(--media-caption-track-y, 0);\\n transition: translate var(--media-caption-track-duration, 0) ease-out;\\n transition-delay: var(--media-caption-track-delay, 0);\\n}\\n\\n/* -------------------------------------------------------------------------- */\\n/* Shared styles for all HTML skins */\\n/* -------------------------------------------------------------------------- */\\n\\nmedia-tooltip-group {\\n display: contents;\\n}\\n\\n:host {\\n /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\\n display: grid;\\n width: 100%;\\n}\\n\\nmedia-container {\\n min-width: 0;\\n min-height: 0;\\n}\\n\\n/* Hide the volume popover when its slider is unavailable. */\\n.media-popover--volume:has(media-volume-slider[data-hidden]) {\\n display: none;\\n}\\n\\n.media-sr-only {\\n position: absolute;\\n width: 1px;\\n height: 1px;\\n padding: 0;\\n margin: -1px;\\n overflow: hidden;\\n white-space: nowrap;\\n border: 0;\\n clip: rect(0, 0, 0, 0);\\n}\\n\\n\\n.media-minimal-skin *,\\n.media-minimal-skin *::before,\\n.media-minimal-skin *::after {\\n box-sizing: border-box;\\n}\\n.media-minimal-skin img,\\n.media-minimal-skin video,\\n.media-minimal-skin svg {\\n display: block;\\n max-width: 100%;\\n}\\n.media-minimal-skin button {\\n font: inherit;\\n}\\n.media-minimal-skin [hidden][hidden] {\\n /* Keep authored templates hidden even when component classes set display. */\\n display: none;\\n}\\n@media (prefers-reduced-motion: no-preference) {\\n .media-minimal-skin {\\n interpolate-size: allow-keywords;\\n }\\n}\\n\\n.media-minimal-skin {\\n /* Colors */\\n --accent-color: var(--media-accent-color, var(--default-accent-color));\\n --accent-contrast-color: contrast-color(var(--accent-color));\\n --accent-background-color: var(\\n --media-accent-color,\\n oklch(from var(--default-accent-color) l c h / calc(alpha * 0.1))\\n );\\n --accent-text-color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0 0 0))));\\n --shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\\n --shadow-subtle-current-color: oklch(from var(--shadow-current-color) l c h / calc(alpha * 0.4));\\n --scrollbar-thumb-color: oklch(from currentColor l c h / 0.3);\\n\\n /* Scaling - used in video fullscreen to scale the UI. */\\n --scale: 1;\\n /* Fixed scaling unit to avoid inheriting the document's root font size. This must be a CSS <length>. */\\n --scale-unit: var(--media-scale-unit, 16px);\\n --size: calc(var(--scale-unit) * var(--scale));\\n /* Create a Tailwind-like spacing unit where 1 equals 4px with default scaling. */\\n --spacing: calc(var(--size) / 4);\\n\\n /* Font sizes */\\n --font-size-medium: calc(0.9375 * var(--size)); /* 15px */\\n --font-size-base: calc(0.8125 * var(--size)); /* 13px */\\n --font-size-small: calc(0.6875 * var(--size)); /* 11px */\\n --font-size-tiny: calc(0.5625 * var(--size)); /* 9px */\\n --media-icon-size: calc(1.125 * var(--size)); /* 18px */\\n\\n /* Radii */\\n --container-border-radius: var(--media-border-radius, 0.75rem);\\n\\n position: relative;\\n display: block;\\n width: 100%;\\n height: 100%;\\n container: media-root / inline-size;\\n font-family:\\n Inter Variable,\\n Inter,\\n ui-sans-serif,\\n system-ui,\\n sans-serif;\\n font-size: var(--font-size-base);\\n -webkit-font-smoothing: auto;\\n -moz-osx-font-smoothing: auto;\\n line-height: 1.5;\\n letter-spacing: normal;\\n outline: 2px solid transparent;\\n outline-offset: -4px;\\n scrollbar-color: var(--scrollbar-thumb-color) transparent;\\n scrollbar-width: thin;\\n border-radius: var(--container-border-radius);\\n isolation: isolate;\\n transition-timing-function: ease-out;\\n transition-duration: 100ms;\\n transition-property: outline-offset, outline-color;\\n\\n &:focus-visible {\\n outline-color: var(--focus-ring-color);\\n outline-offset: 2px;\\n }\\n\\n &::-webkit-scrollbar-thumb {\\n background: var(--scrollbar-thumb-color);\\n border-radius: 9999px;\\n }\\n\\n @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\\n --scrollbar-thumb-color: oklch(from currentColor l c h / 0.8);\\n scrollbar-width: auto;\\n }\\n}\\n\\n.media-minimal-skin .media-buffering-indicator {\\n position: absolute;\\n inset: 0;\\n z-index: 10;\\n display: none;\\n place-content: center;\\n color: oklch(1 0 0);\\n pointer-events: none;\\n\\n &:not([data-visible]) {\\n --media-spinner-animation: none;\\n }\\n\\n &[data-visible] {\\n display: grid;\\n }\\n\\n @media (prefers-reduced-motion: reduce) {\\n --media-spinner-animation: none;\\n }\\n}\\n\\n.media-minimal-skin .media-error:not([data-open]) {\\n display: none;\\n}\\n\\n.media-minimal-skin .media-error__title {\\n font-weight: 600;\\n line-height: 1.25;\\n}\\n\\n.media-minimal-skin .media-error__description {\\n overflow-wrap: anywhere;\\n opacity: 0.7;\\n}\\n\\n.media-minimal-skin .media-error__actions {\\n display: flex;\\n gap: calc(var(--spacing) * 2);\\n\\n > * {\\n flex: 1;\\n }\\n}\\n\\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\\n visibility: hidden;\\n}\\n\\n.media-minimal-skin .media-controls {\\n --media-popover-side-offset: calc(var(--spacing) * (var(--base-side-offset, 2) + 1));\\n --media-tooltip-side-offset: var(--media-popover-side-offset);\\n --media-popover-boundary-offset: calc(var(--spacing) * (var(--base-boundary-offset, 0) + 1));\\n --media-tooltip-boundary-offset: var(--media-popover-boundary-offset);\\n\\n display: flex;\\n align-items: center;\\n padding: calc(var(--spacing) * 1);\\n container: media-controls / inline-size;\\n text-shadow: 0 1px 0 var(--shadow-current-color);\\n background-color: var(--controls-background-color);\\n backdrop-filter: var(--controls-backdrop-filter);\\n\\n &:dir(rtl) {\\n flex-direction: row-reverse;\\n }\\n}\\n\\n.media-minimal-skin .media-time-controls {\\n display: flex;\\n flex: 1;\\n flex-direction: row-reverse;\\n gap: calc(var(--spacing) * 3);\\n align-items: center;\\n container: media-time-controls / inline-size;\\n\\n &:dir(rtl) {\\n flex-direction: row;\\n }\\n}\\n\\n.media-minimal-skin .media-time-group {\\n display: flex;\\n gap: calc(var(--spacing) * 1);\\n align-items: center;\\n\\n &:dir(rtl) {\\n flex-direction: row-reverse;\\n }\\n}\\n\\n.media-minimal-skin .media-time {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.media-minimal-skin .media-time[role=\\\"button\\\"] {\\n cursor: pointer;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n border-radius: calc(var(--spacing) * 1);\\n transition-timing-function: ease-out;\\n transition-duration: 100ms;\\n transition-property: outline-color, outline-offset;\\n\\n @supports (corner-shape: squircle) {\\n border-radius: calc(var(--spacing) * 4);\\n corner-shape: squircle;\\n }\\n\\n &:focus-visible {\\n outline-color: var(--focus-ring-color);\\n outline-offset: 2px;\\n }\\n}\\n\\n.media-minimal-skin .media-time--current,\\n.media-minimal-skin .media-time-separator {\\n display: none;\\n}\\n\\n@container media-root (width > 42rem) {\\n .media-minimal-skin .media-time-controls {\\n flex-direction: row;\\n\\n &:dir(rtl) {\\n flex-direction: row-reverse;\\n }\\n }\\n\\n .media-minimal-skin .media-time--duration,\\n .media-minimal-skin .media-time-separator {\\n color: oklch(from currentColor l c h / 0.6);\\n }\\n\\n .media-minimal-skin .media-time--current,\\n .media-minimal-skin .media-time-separator {\\n display: inline;\\n }\\n}\\n\\n/* Base button */\\n.media-minimal-skin .media-button {\\n display: flex;\\n flex-shrink: 0;\\n align-items: center;\\n justify-content: center;\\n height: calc(var(--spacing) * 9.5);\\n min-height: 0;\\n padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);\\n text-align: center;\\n touch-action: manipulation;\\n cursor: pointer;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n border: none;\\n border-radius: calc(var(--spacing) * 2);\\n transition-timing-function: ease-out;\\n transition-duration: 150ms;\\n transition-property: background-color, outline-offset, scale;\\n /* Fix weird jumping when clicking on the buttons in Safari. */\\n will-change: scale;\\n\\n &:focus-visible {\\n outline-color: var(--focus-ring-color);\\n outline-offset: 2px;\\n }\\n\\n &:active:not([aria-disabled=\\\"true\\\"]) {\\n scale: 0.97;\\n }\\n\\n &[aria-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n }\\n}\\n\\n@supports (corner-shape: squircle) {\\n .media-minimal-skin .media-button {\\n border-radius: calc(var(--spacing) * 4);\\n corner-shape: squircle;\\n }\\n}\\n\\n/* Primary button variant */\\n.media-minimal-skin .media-button--primary {\\n font-weight: 500;\\n color: var(--accent-contrast-color);\\n text-shadow: none;\\n background: var(--accent-color);\\n}\\n\\n/* Subtle button variant */\\n.media-minimal-skin .media-button--subtle {\\n color: inherit;\\n text-shadow: inherit;\\n background: transparent;\\n\\n &:not([aria-disabled=\\\"true\\\"]) {\\n &:hover,\\n &:focus-visible,\\n &[aria-expanded=\\\"true\\\"] {\\n color: var(--accent-text-color);\\n text-decoration: none;\\n background-color: var(--accent-background-color);\\n }\\n }\\n}\\n\\n/* Icon button variant */\\n.media-minimal-skin .media-button--icon {\\n display: grid;\\n aspect-ratio: 1;\\n padding: 0;\\n\\n &:active:not([aria-disabled=\\\"true\\\"]) {\\n scale: 0.97;\\n }\\n\\n .media-icon__container {\\n display: grid;\\n }\\n\\n .media-icon {\\n grid-area: 1 / 1;\\n filter: drop-shadow(0 1px 0 var(--shadow-current-color));\\n transition-timing-function: ease-out;\\n transition-duration: 150ms;\\n transition-property: opacity, scale;\\n }\\n}\\n\\n/* Seek button */\\n.media-minimal-skin .media-button--seek {\\n .media-icon__label {\\n position: absolute;\\n right: -1px;\\n bottom: -3px;\\n font-size: 0.715em; /* 10px */\\n font-weight: 500;\\n font-variant-numeric: tabular-nums;\\n letter-spacing: -0.05em;\\n }\\n\\n &:has(.media-icon--flipped) .media-icon__label {\\n right: unset;\\n left: -1px;\\n }\\n}\\n\\n/* Playback rate button */\\n.media-minimal-skin .media-button--playback-rate {\\n padding: 0;\\n font-variant-numeric: tabular-nums;\\n\\n &::after {\\n width: 4ch;\\n content: attr(data-rate) \\\"\\\\00D7\\\";\\n }\\n\\n &[data-inline-rate-label]::after {\\n content: none;\\n }\\n}\\n\\n/* Settings button */\\n.media-minimal-skin .media-button--settings {\\n .media-icon--settings {\\n transition: transform 150ms ease-in-out;\\n\\n @media (prefers-reduced-motion: reduce) {\\n transition-duration: 0ms;\\n }\\n }\\n\\n &[aria-expanded=\\\"true\\\"] .media-icon--settings {\\n transform: rotate(90deg);\\n }\\n}\\n\\n/* Live button — wide pill button with a status dot (gray → red at the live\\n edge) rendered via ::before, and \\\"LIVE\\\" text rendered as the button's own\\n text content. */\\n.media-minimal-skin .media-button--live {\\n display: inline-flex;\\n gap: calc(var(--spacing) * 1.5);\\n align-items: center;\\n width: auto;\\n aspect-ratio: auto;\\n padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);\\n font-size: var(--font-size-small);\\n font-weight: 600;\\n line-height: 1;\\n text-transform: uppercase;\\n letter-spacing: 0.05em;\\n\\n &::before {\\n display: inline-block;\\n flex-shrink: 0;\\n width: calc(var(--spacing) * 2);\\n height: calc(var(--spacing) * 2);\\n content: \\\"\\\";\\n background-color: oklch(from currentColor l c h / 0.4);\\n border-radius: 50%;\\n transition: background-color 150ms ease-out;\\n }\\n\\n &[data-live-edge]::before {\\n background-color: oklch(0.65 0.22 27);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .media-minimal-skin .media-button {\\n scale: 1;\\n transition-property: background-color;\\n will-change: auto;\\n }\\n}\\n\\n.media-minimal-skin .media-button-group {\\n display: flex;\\n gap: 1px;\\n align-items: center;\\n\\n &:dir(rtl) {\\n flex-direction: row-reverse;\\n }\\n}\\n\\n.media-minimal-skin .media-badge {\\n padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);\\n font-size: var(--font-size-small);\\n font-weight: 500;\\n line-height: 1;\\n color: oklch(from currentColor l c h / 0.85);\\n white-space: nowrap;\\n background-color: oklch(from currentColor l c h / 0.1);\\n border-radius: calc(var(--spacing) * 1);\\n}\\n\\n.media-minimal-skin .media-icon__container {\\n position: relative;\\n}\\n\\n.media-minimal-skin .media-icon {\\n flex-shrink: 0;\\n width: var(--media-icon-size);\\n height: var(--media-icon-size);\\n}\\n.media-minimal-skin .media-icon--flipped,\\n.media-minimal-skin:dir(rtl) .media-menu__chevron {\\n scale: -1 1;\\n}\\n\\n.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {\\n scale: 1 1;\\n}\\n\\n.media-minimal-skin .media-slider {\\n --track-size: calc(var(--spacing) * 1);\\n --track-highlighted-size: calc(var(--spacing) * 1.75);\\n --track-border-radius: 99px;\\n --thumb-size: calc(var(--spacing) * 3);\\n --chapter-gap: calc(var(--spacing) * 1);\\n --chapter-inset-start: calc(var(--chapter-gap) / 2);\\n --chapter-inset-end: calc(var(--chapter-gap) / 2);\\n\\n position: relative;\\n display: flex;\\n flex: 1;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n outline: none;\\n border-radius: var(--track-border-radius);\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n width: var(--slider-width, 100%);\\n min-width: calc(var(--spacing) * 20);\\n height: var(--slider-height, calc(var(--spacing) * 8));\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n width: var(--slider-width, calc(var(--spacing) * 8));\\n height: var(--slider-height, calc(var(--spacing) * 20));\\n }\\n\\n /* Track */\\n .media-slider__track {\\n position: relative;\\n overflow: hidden;\\n user-select: none;\\n background-color: oklch(from currentColor l c h / 0.2);\\n border-radius: inherit;\\n isolation: isolate;\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n width: 100%;\\n height: var(--track-size);\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n width: var(--track-size);\\n height: 100%;\\n }\\n }\\n\\n /* Shared track fills */\\n .media-slider__buffer,\\n .media-slider__fill {\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n inset-block: 0;\\n left: 0;\\n width: 100%;\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n inset-inline: 0;\\n bottom: 0;\\n height: 100%;\\n }\\n\\n @media (prefers-reduced-motion: no-preference) {\\n transition: clip-path 200ms ease-out;\\n }\\n }\\n &[data-dragging],\\n &[data-seeking] {\\n .media-slider__fill,\\n .media-slider__buffer {\\n transition-duration: 0ms;\\n }\\n }\\n\\n /* Buffer */\\n .media-slider__buffer {\\n background-color: oklch(from currentColor l c h / 0.2);\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n clip-path: inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--track-border-radius));\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n clip-path: inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--track-border-radius));\\n }\\n }\\n\\n /* Fill */\\n .media-slider__fill {\\n background-color: var(--accent-color);\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n clip-path: inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--track-border-radius));\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));\\n }\\n }\\n &[data-dragging] {\\n .media-slider__fill[data-orientation=\\\"horizontal\\\"] {\\n clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));\\n }\\n .media-slider__fill[data-orientation=\\\"vertical\\\"] {\\n clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));\\n }\\n }\\n\\n /* Chapters */\\n .media-slider__chapters {\\n position: relative;\\n display: flex;\\n flex: 1;\\n align-items: center;\\n min-width: 0;\\n min-height: 0;\\n border-radius: inherit;\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n width: 100%;\\n height: 100%;\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n flex-direction: column-reverse;\\n width: 100%;\\n height: 100%;\\n }\\n }\\n\\n .media-slider__chapter {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-width: 0;\\n min-height: 0;\\n\\n &:first-child {\\n --chapter-inset-start: 0px;\\n }\\n &:last-child {\\n --chapter-inset-end: 0px;\\n }\\n\\n .media-slider__chapter-track {\\n border-radius: var(--track-border-radius);\\n\\n @media (prefers-reduced-motion: no-preference) {\\n transition: 200ms ease-out;\\n transition-property: height, width;\\n }\\n }\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));\\n\\n .media-slider__chapter-track {\\n height: var(--track-size);\\n clip-path: inset(\\n 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0\\n calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)\\n );\\n }\\n\\n &[data-highlighted] .media-slider__chapter-track {\\n height: var(--track-highlighted-size);\\n }\\n }\\n\\n &[data-orientation=\\\"vertical\\\"] {\\n clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);\\n\\n .media-slider__chapter-track {\\n width: var(--track-size);\\n clip-path: inset(\\n calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0\\n calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)\\n );\\n }\\n\\n &[data-highlighted] .media-slider__chapter-track {\\n width: var(--track-highlighted-size);\\n }\\n }\\n }\\n\\n /* Thumb */\\n .media-slider__thumb {\\n position: absolute;\\n z-index: 10;\\n width: var(--thumb-size);\\n height: var(--thumb-size);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n background-color: currentColor;\\n border-radius: calc(Infinity * 1px);\\n box-shadow:\\n 0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),\\n 0 1px 3px 0 oklch(0 0 0 / 0.15),\\n 0 1px 2px -1px oklch(0 0 0 / 0.15);\\n opacity: 0;\\n transform-origin: center;\\n scale: 0.7;\\n translate: -50% -50%;\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n top: 50%;\\n left: var(--media-slider-fill);\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n top: calc(100% - var(--media-slider-fill));\\n left: 50%;\\n }\\n\\n &:focus-visible {\\n outline-color: var(--focus-ring-color);\\n outline-offset: 2px;\\n }\\n\\n &:focus-visible,\\n &.media-slider__thumb--persistent {\\n opacity: 1;\\n scale: 1;\\n }\\n\\n @media (prefers-reduced-motion: no-preference) {\\n transition-timing-function: ease-out;\\n transition-duration: 150ms;\\n transition-property: opacity, outline-offset, left, top, scale;\\n }\\n }\\n\\n @media (hover: hover) and (pointer: fine) {\\n &:hover .media-slider__thumb {\\n opacity: 1;\\n scale: 1;\\n }\\n }\\n\\n &[data-dragging] .media-slider__thumb {\\n opacity: 1;\\n scale: 0.9;\\n\\n @media (prefers-reduced-motion: no-preference) {\\n transition-property: opacity, outline-offset, scale;\\n }\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n left: var(--media-slider-pointer);\\n }\\n &[data-orientation=\\\"vertical\\\"] {\\n top: calc(100% - var(--media-slider-pointer));\\n }\\n }\\n\\n /* Preview */\\n .media-slider__preview {\\n --max-size-factor: 28;\\n --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);\\n\\n min-width: 100%;\\n height: calc(var(--spacing) * 1);\\n\\n @container media-root (width > 32rem) {\\n --max-size-factor: 36;\\n }\\n\\n @container media-root (width > 42rem) {\\n --max-size-factor: 48;\\n }\\n\\n .media-slider__thumbnail,\\n .media-slider__value {\\n position: absolute;\\n left: var(--preview-left, var(--media-slider-pointer));\\n max-width: var(--max-size);\\n opacity: 0;\\n filter: blur(8px);\\n transform-origin: bottom;\\n scale: 0.8;\\n translate: -50% calc(var(--spacing) * 2);\\n transition-timing-function: ease-out;\\n transition-duration: 150ms;\\n transition-property: filter, opacity, scale;\\n }\\n\\n .media-slider__thumbnail {\\n --thumbnail-max-width: var(--max-size);\\n --thumbnail-max-height: var(--max-size);\\n bottom: calc(100% + (var(--spacing) * 11));\\n }\\n\\n .media-slider__value {\\n bottom: calc(100% + (var(--spacing) * 5));\\n display: flex;\\n flex-direction: row-reverse;\\n gap: calc(var(--spacing) * 2);\\n justify-content: center;\\n padding-inline: calc(var(--spacing) * 3);\\n text-shadow: 0 1px 0 var(--shadow-current-color);\\n }\\n\\n .media-slider__chapter-title {\\n min-width: 0;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n\\n &:empty {\\n display: none;\\n }\\n }\\n\\n &::before {\\n position: absolute;\\n z-index: 1;\\n pointer-events: none;\\n content: \\\"\\\";\\n background-color: oklch(from currentColor l c h / 0.35);\\n opacity: 0;\\n scale: 0.5;\\n translate: -50% -50%;\\n transition-timing-function: ease-out;\\n transition-duration: 200ms;\\n transition-property: opacity, scale;\\n }\\n\\n &[data-orientation=\\\"horizontal\\\"]::before {\\n top: 50%;\\n left: var(--media-slider-pointer);\\n width: 1px;\\n height: calc(var(--spacing) * 5);\\n }\\n &[data-orientation=\\\"vertical\\\"]::before {\\n top: calc(100% - var(--media-slider-pointer));\\n left: 50%;\\n width: calc(var(--spacing) * 5);\\n height: 1px;\\n }\\n\\n &[data-pointing]:not([data-dragging])::before {\\n opacity: 1;\\n scale: 1;\\n }\\n }\\n\\n &:is([data-pointing], :has(:focus-visible))\\n .media-slider__preview\\n :is(.media-slider__value, .media-slider__thumbnail) {\\n opacity: 1;\\n filter: blur(0);\\n scale: 1;\\n }\\n}\\n\\n.media-minimal-skin {\\n --popup-transition:\\n opacity var(--popup-transition-timing-function) var(--popup-transition-duration),\\n filter var(--popup-transition-timing-function) var(--popup-transition-duration),\\n transform var(--popup-transition-timing-function) var(--popup-transition-duration),\\n scale var(--popup-transition-timing-function) var(--popup-transition-duration);\\n}\\n\\n.media-minimal-skin .media-popover,\\n.media-minimal-skin .media-tooltip {\\n --popup-translate-distance: calc(var(--spacing) * 2);\\n margin: 0;\\n overflow: visible;\\n color: inherit;\\n border: 0;\\n transition: var(--popup-transition);\\n\\n &[data-starting-style],\\n &[data-ending-style] {\\n opacity: 0;\\n /* We have to use transform here for translate as the translate property is used for positioning by core. */\\n transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0));\\n scale: 0.95;\\n }\\n\\n &[data-ending-style] {\\n filter: blur(4px);\\n transform: none;\\n /* Speed up the exit transition. */\\n transition-duration: max(0ms, calc(var(--popup-transition-duration) - 50ms));\\n }\\n\\n &[data-side=\\\"top\\\"] {\\n --popup-translate-y-distance: var(--popup-translate-distance);\\n transform-origin: bottom;\\n }\\n &[data-side=\\\"bottom\\\"] {\\n --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);\\n transform-origin: top;\\n }\\n &[data-side=\\\"left\\\"] {\\n --popup-translate-x-distance: var(--popup-translate-distance);\\n transform-origin: right;\\n }\\n &[data-side=\\\"right\\\"] {\\n --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);\\n transform-origin: left;\\n }\\n\\n /* Safe area between trigger and popup */\\n &::before {\\n position: absolute;\\n pointer-events: inherit;\\n content: \\\"\\\";\\n }\\n\\n &[data-side=\\\"top\\\"]::before,\\n &[data-side=\\\"bottom\\\"]::before {\\n inset-inline: 0;\\n width: 100%;\\n }\\n &[data-side=\\\"top\\\"]::before {\\n top: 100%;\\n }\\n &[data-side=\\\"bottom\\\"]::before {\\n bottom: 100%;\\n }\\n\\n &[data-side=\\\"left\\\"]::before,\\n &[data-side=\\\"right\\\"]::before {\\n inset-block: 0;\\n height: 100%;\\n }\\n &[data-side=\\\"left\\\"]::before {\\n left: 100%;\\n }\\n &[data-side=\\\"right\\\"]::before {\\n right: 100%;\\n }\\n}\\n\\n.media-minimal-skin .media-popover {\\n &[data-side=\\\"top\\\"]::before,\\n &[data-side=\\\"bottom\\\"]::before {\\n height: var(--media-popover-side-offset);\\n }\\n &[data-side=\\\"left\\\"]::before,\\n &[data-side=\\\"right\\\"]::before {\\n width: var(--media-popover-side-offset);\\n }\\n}\\n\\n.media-minimal-skin .media-tooltip {\\n padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);\\n font-size: var(--font-size-base);\\n color: var(--tooltip-text-color);\\n white-space: nowrap;\\n background-color: var(--tooltip-background-color);\\n border-radius: calc(var(--spacing) * 2);\\n box-shadow:\\n 0 0 0 1px var(--tooltip-border-color),\\n 0 4px 6px -1px oklch(0 0 0 / 0.2),\\n 0 2px 4px -2px oklch(0 0 0 / 0.2);\\n backdrop-filter: var(--tooltip-backdrop-filter);\\n\\n /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */\\n &[data-open] {\\n display: flex;\\n column-gap: calc(var(--spacing) * 1);\\n align-items: center;\\n }\\n\\n &[data-side=\\\"top\\\"]::before,\\n &[data-side=\\\"bottom\\\"]::before {\\n height: var(--media-tooltip-side-offset);\\n }\\n &[data-side=\\\"left\\\"]::before,\\n &[data-side=\\\"right\\\"]::before {\\n width: var(--media-tooltip-side-offset);\\n }\\n\\n .media-tooltip__kbd {\\n min-width: 1.5em;\\n padding: 0.1em;\\n margin-right: calc(var(--spacing) * -1);\\n font-family: inherit;\\n font-size: var(--font-size-small);\\n font-weight: 600;\\n line-height: 1.25;\\n text-align: center;\\n background-color: oklch(from currentColor l c h / 0.15);\\n border-radius: calc(var(--spacing) * 1);\\n }\\n}\\n\\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-hidden]) {\\n display: none;\\n}\\n\\n.media-minimal-skin .media-menu {\\n --menu-transition-duration: 250ms;\\n --menu-max-height: calc(var(--spacing) * 56);\\n --menu-padding: calc(var(--spacing) * 1);\\n --menu-border-radius: calc(var(--spacing) * 2.5);\\n --menu-item-border-radius: calc(var(--menu-border-radius) - var(--menu-padding));\\n box-sizing: border-box;\\n min-width: max-content;\\n max-width: var(--media-popover-available-width, none);\\n max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height));\\n padding: var(--menu-padding);\\n overflow: auto;\\n overscroll-behavior: none;\\n background-color: var(--popover-background-color);\\n border-radius: var(--menu-border-radius);\\n box-shadow:\\n 0 0 0 1px var(--popover-border-color),\\n 0 4px 6px -1px oklch(0 0 0 / 0.1),\\n 0 2px 4px -2px oklch(0 0 0 / 0.1);\\n backdrop-filter: var(--popover-backdrop-filter);\\n\\n @media (prefers-reduced-motion: reduce) {\\n --menu-transition-duration: 0ms;\\n }\\n\\n & > .media-menu__panel {\\n position: absolute;\\n inset-inline: 0;\\n top: 0;\\n z-index: 10;\\n max-height: inherit;\\n padding: var(--menu-padding);\\n overflow: auto;\\n overscroll-behavior: none;\\n outline: none;\\n translate: 0 0;\\n transition-timing-function: ease-out;\\n transition-duration: var(--menu-transition-duration);\\n transition-property: translate, filter;\\n\\n &:where([data-starting-style], [data-ending-style]) {\\n overflow: hidden;\\n pointer-events: none;\\n filter: blur(8px);\\n translate: 100% 0;\\n }\\n\\n &:dir(rtl):where([data-starting-style], [data-ending-style]) {\\n translate: -100% 0;\\n }\\n }\\n\\n .media-menu__separator {\\n margin: calc(var(--spacing) * 1) 0;\\n border-bottom: 1px solid oklch(1 0 0 / 0.1);\\n }\\n\\n .media-menu__group {\\n anchor-scope: --menu-item-highlight-anchor;\\n display: flex;\\n flex-direction: column;\\n gap: calc(var(--spacing) * 0.5);\\n\\n @supports (top: anchor(top)) {\\n &::before {\\n position: absolute;\\n position-anchor: --menu-item-highlight-anchor;\\n inset: anchor(inside);\\n /* Firefox treats the moving highlight as a content shift and re-scrolls\\n the menu while hovering. Exclude it from scroll anchoring. */\\n overflow-anchor: none;\\n pointer-events: none;\\n content: \\\"\\\";\\n background-color: var(--accent-background-color);\\n border-radius: var(--menu-item-border-radius);\\n transition: inset 100ms ease-in-out;\\n }\\n\\n &:has([data-highlighted=\\\"\\\"])::before {\\n transition-duration: 0ms;\\n }\\n }\\n }\\n\\n .media-menu__item,\\n .media-menu__back {\\n position: relative;\\n display: flex;\\n gap: calc(var(--spacing) * 1.5);\\n align-items: center;\\n padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);\\n text-align: start;\\n text-shadow: 0 1px 0 var(--shadow-current-color);\\n cursor: pointer;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n border-radius: var(--menu-item-border-radius);\\n transition: background-color, color;\\n transition-timing-function: ease-in-out;\\n transition-duration: 100ms;\\n\\n .media-icon {\\n flex-shrink: 0;\\n color: oklch(from currentColor l c h / 0.5);\\n filter: drop-shadow(0 1px 0 var(--shadow-current-color));\\n }\\n\\n &:focus-visible {\\n outline-color: var(--focus-ring-color);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-highlighted] {\\n color: var(--accent-text-color);\\n background-color: var(--accent-background-color);\\n\\n .media-icon {\\n color: inherit;\\n }\\n }\\n\\n @supports (top: anchor(top)) {\\n transition-duration: 50ms;\\n\\n &:hover,\\n &[data-highlighted] {\\n transition-duration: 200ms;\\n }\\n }\\n }\\n\\n .media-menu__indicator {\\n flex-shrink: 0;\\n margin-inline: auto calc(var(--spacing) * -1);\\n opacity: 0;\\n }\\n\\n .media-menu__item {\\n justify-content: space-between;\\n font-variant-numeric: tabular-nums;\\n color: inherit;\\n\\n &[aria-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n cursor: not-allowed;\\n opacity: 0.5;\\n }\\n\\n &[aria-checked=\\\"true\\\"] .media-menu__indicator {\\n opacity: 1;\\n }\\n\\n &[data-availability=\\\"unavailable\\\"],\\n &[data-availability=\\\"unsupported\\\"] {\\n display: none;\\n }\\n\\n &[data-highlighted] {\\n @supports (top: anchor(top)) {\\n anchor-name: --menu-item-highlight-anchor;\\n background-color: transparent;\\n }\\n }\\n }\\n\\n .media-menu__tier {\\n padding-inline-start: calc(var(--spacing) * 0.5);\\n padding-top: 1px;\\n font-size: var(--font-size-tiny);\\n font-weight: 600;\\n line-height: 1;\\n color: oklch(from currentColor l c h / 0.7);\\n }\\n\\n .media-menu__back {\\n width: 100%;\\n margin-bottom: calc(var(--spacing) * 0.5);\\n }\\n\\n .media-menu__hint {\\n display: inline-flex;\\n gap: calc(var(--spacing) * 1);\\n align-items: center;\\n min-width: 0;\\n padding-inline-start: calc(var(--spacing) * 2);\\n margin-inline-start: auto;\\n color: oklch(from currentColor l c h / 0.65);\\n }\\n\\n .media-menu__hint-label {\\n max-width: calc(var(--spacing) * 24);\\n overflow: hidden;\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n }\\n\\n .media-menu__chevron {\\n width: calc(var(--spacing) * 3.5);\\n height: calc(var(--spacing) * 3.5);\\n }\\n\\n /* Settings menu */\\n &.media-menu--settings {\\n width: var(--media-menu-width);\\n min-width: calc(var(--spacing) * 48);\\n height: var(--media-menu-height);\\n overflow: hidden;\\n /* Only the menu size changes between panels. */\\n transition:\\n var(--popup-transition),\\n width var(--popup-transition-timing-function) var(--menu-transition-duration),\\n height var(--popup-transition-timing-function) var(--menu-transition-duration);\\n\\n & > :not([data-submenu]) {\\n translate: 0 0;\\n transition:\\n translate var(--menu-transition-duration) ease-out,\\n filter var(--menu-transition-duration) ease-out;\\n }\\n\\n &[data-submenu-expanded=\\\"true\\\"] > :not([data-submenu]) {\\n filter: blur(8px);\\n translate: -100% 0;\\n }\\n\\n &:dir(rtl)[data-submenu-expanded=\\\"true\\\"] > :not([data-submenu]) {\\n translate: 100% 0;\\n }\\n\\n /* WebKit can restart the covered-content transition while the\\n anchor-positioned highlight remains active. */\\n &[data-submenu-expanded] > :not([data-submenu])::before {\\n display: none;\\n }\\n\\n /* Don't transition size on open/close. */\\n &[data-starting-style],\\n &[data-ending-style] {\\n transition: var(--popup-transition);\\n }\\n }\\n}\\n\\n/* ==========================================================================\\n Icon State Visibility for Audio Skins\\n\\n Data-attribute-driven visibility rules for multi-state icon buttons shared\\n by the HTML and React skins.\\n ========================================================================== */\\n\\n/* --- All icons hidden by default --- */\\n\\n.media-button--play .media-icon--restart,\\n.media-button--play .media-icon--play,\\n.media-button--play .media-icon--pause,\\n.media-button--mute .media-icon--volume-off,\\n.media-button--mute .media-icon--volume-low,\\n.media-button--mute .media-icon--volume-high {\\n display: none;\\n opacity: 0;\\n}\\n\\n/* --- Active icon per state --- */\\n\\n/* Play: ended → restart */\\n.media-button--play[data-ended] .media-icon--restart,\\n/* Play: paused or not yet started (not ended) → play */\\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\\n.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,\\n/* Play: started and not paused/ended → pause */\\n.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,\\n/* Mute: muted → volume off */\\n.media-button--mute[data-muted] .media-icon--volume-off,\\n/* Mute: volume low (not muted) → volume low */\\n.media-button--mute:not([data-muted])[data-volume-level=\\\"low\\\"] .media-icon--volume-low,\\n/* Mute: volume high (not muted, not low) → volume high */\\n.media-button--mute:not([data-muted]):not([data-volume-level=\\\"low\\\"]) .media-icon--volume-high {\\n display: block;\\n opacity: 1;\\n}\\n\\n\\n/* Container */\\n\\n.media-minimal-skin--audio {\\n --default-accent-color: light-dark(oklch(0 0 0), oklch(1 0 0));\\n --focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));\\n\\n --controls-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\\n --controls-backdrop-filter: blur(16px) saturate(1.5);\\n --controls-border-color: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.1));\\n --controls-text-color: light-dark(oklch(0 0 0), oklch(1 0 0));\\n\\n --error-dialog-transition-duration: 250ms;\\n --error-dialog-transition-delay: 100ms;\\n\\n --popup-transition-duration: 100ms;\\n --popup-transition-timing-function: ease-out;\\n\\n --popover-backdrop-filter: blur(16px) saturate(1.5);\\n --popover-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\\n --popover-border-color: oklch(0 0 0 / 0.1);\\n\\n --tooltip-backdrop-filter: var(--popover-backdrop-filter);\\n --tooltip-background-color: var(--popover-background-color);\\n --tooltip-border-color: var(--popover-border-color);\\n\\n --tooltip-text-color: currentColor;\\n\\n @media (prefers-reduced-motion: reduce) {\\n --error-dialog-transition-duration: 50ms;\\n --error-dialog-transition-delay: 0ms;\\n --popup-transition-duration: 0ms;\\n }\\n\\n @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\\n --tooltip-background-color: light-dark(oklch(1 0 0), oklch(0 0 0));\\n }\\n}\\n\\n/* Error Dialog */\\n\\n.media-minimal-skin--audio .media-error__dialog {\\n position: absolute;\\n inset: 0;\\n z-index: 20;\\n display: flex;\\n gap: calc(var(--spacing) * 4);\\n align-items: center;\\n padding-inline: calc(var(--spacing) * 5) calc(var(--spacing) * 2);\\n background-color: oklch(from var(--controls-background-color) l c h / 1);\\n border-radius: calc(Infinity * 1px);\\n transition-delay: var(--error-dialog-transition-delay);\\n transition-timing-function: ease-out;\\n transition-duration: var(--error-dialog-transition-duration);\\n transition-property: opacity, filter, scale;\\n}\\n\\n.media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog,\\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\\n opacity: 0;\\n filter: blur(4px);\\n scale: 0.95;\\n}\\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\\n transition-delay: 0ms;\\n}\\n\\n.media-minimal-skin--audio .media-error__content {\\n display: flex;\\n flex: 1;\\n gap: calc(var(--spacing) * 2);\\n align-items: center;\\n}\\n\\n/* Controls */\\n\\n.media-minimal-skin--audio .media-controls {\\n --base-side-offset: 2;\\n --base-boundary-offset: 2;\\n\\n gap: calc(var(--spacing) * 2);\\n color: var(--controls-text-color);\\n border-radius: var(--media-border-radius, calc(var(--spacing) * 3.5));\\n box-shadow: 0 0 0 1px var(--controls-border-color);\\n}\\n\\n/* Buffering (spinner over play button — overlay only, no layout change) */\\n\\n.media-minimal-skin--audio .media-button--play__wrapper {\\n position: relative;\\n display: inline-flex;\\n}\\n\\n.media-minimal-skin--audio .media-button--play__wrapper .media-buffering-indicator {\\n color: inherit;\\n}\\n\\n.media-minimal-skin--audio\\n .media-button--play__wrapper:has(.media-buffering-indicator[data-visible])\\n .media-button--play\\n .media-icon {\\n opacity: 0;\\n}\\n\\n/* Popups & Animations */\\n\\n.media-minimal-skin--audio .media-popover--volume {\\n --media-popover-side-offset: 0rem;\\n padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 16);\\n background: linear-gradient(to left, var(--controls-background-color) 80%, transparent 100%);\\n}\\n\\n.media-minimal-skin--audio .media-slider .media-slider__preview .media-slider__value {\\n bottom: calc(var(--spacing) * 10);\\n}\\n\\n\";","import { renderIcon } from '@videojs/icons/render/minimal';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './minimal-skin.css?inline';\n\n// Register the live audio player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"media-minimal-skin media-minimal-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--subtle\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <span class=\"media-button--play__wrapper\">\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </media-buffering-indicator>\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\" boundary=\"viewport\" class=\"media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n </span>\n\n <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n </div>\n\n <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n <div class=\"media-button-group\">\n <media-mute-button commandfor=\"live-audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"live-audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" boundary=\"viewport\" class=\"media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n\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=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n </media-container>\n `;\n}\n\nexport class MinimalLiveAudioSkinElement extends SkinElement {\n static readonly tagName = 'live-audio-minimal-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveAudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalLiveAudioSkinElement.tagName]: MinimalLiveAudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;AAAA,2BAAe;;;;ACSf,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;;;;;;;;;;;kBAuBA,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;kBAG/C,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;;;;;;gBAejE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAuB3F;AAEA,IAAa,8BAAb,cAAiD,YAAY;;iBACjC;;;gBACV,kBAAkBA,oBAAM;;;kBACtB,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,2BAA2B"}
|