@videojs/html 0.1.0-preview.9 → 10.0.0-alpha.3
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/README.md +4 -2
- package/dist/default/define/audio/player.js +15 -0
- package/dist/default/define/audio/player.js.map +1 -0
- package/dist/default/define/background/player.js +15 -0
- package/dist/default/define/background/player.js.map +1 -0
- package/dist/default/define/background/skin.js +0 -0
- package/dist/default/define/feature/video.js +0 -0
- package/dist/default/define/media/background-video.js +13 -0
- package/dist/default/define/media/background-video.js.map +1 -0
- package/dist/default/define/media/hls-video.js +13 -0
- package/dist/default/define/media/hls-video.js.map +1 -0
- package/dist/default/define/ui/buffering-indicator.js +7 -0
- package/dist/default/define/ui/buffering-indicator.js.map +1 -0
- package/dist/default/define/ui/controls.js +9 -0
- package/dist/default/define/ui/controls.js.map +1 -0
- package/dist/default/define/ui/fullscreen-button.js +7 -0
- package/dist/default/define/ui/fullscreen-button.js.map +1 -0
- package/dist/default/define/ui/mute-button.js +7 -0
- package/dist/default/define/ui/mute-button.js.map +1 -0
- package/dist/default/define/ui/pip-button.js +7 -0
- package/dist/default/define/ui/pip-button.js.map +1 -0
- package/dist/default/define/ui/play-button.js +7 -0
- package/dist/default/define/ui/play-button.js.map +1 -0
- package/dist/default/define/ui/poster.js +7 -0
- package/dist/default/define/ui/poster.js.map +1 -0
- package/dist/default/define/ui/seek-button.js +7 -0
- package/dist/default/define/ui/seek-button.js.map +1 -0
- package/dist/default/define/ui/time.js +11 -0
- package/dist/default/define/ui/time.js.map +1 -0
- package/dist/default/define/video/player.js +15 -0
- package/dist/default/define/video/player.js.map +1 -0
- package/dist/default/define/video/skin.js +0 -0
- package/dist/default/index.js +24 -0
- package/dist/default/media/background-video/index.js +77 -0
- package/dist/default/media/background-video/index.js.map +1 -0
- package/dist/default/media/hls-video/index.js +21 -0
- package/dist/default/media/hls-video/index.js.map +1 -0
- package/dist/default/player/context.js +14 -0
- package/dist/default/player/context.js.map +1 -0
- package/dist/default/player/create-player.js +29 -0
- package/dist/default/player/create-player.js.map +1 -0
- package/dist/default/player/player-controller.js +63 -0
- package/dist/default/player/player-controller.js.map +1 -0
- package/dist/default/player/player-mixin.js +23 -0
- package/dist/default/player/player-mixin.js.map +1 -0
- package/dist/default/store/container-mixin.js +74 -0
- package/dist/default/store/container-mixin.js.map +1 -0
- package/dist/default/store/provider-mixin.js +39 -0
- package/dist/default/store/provider-mixin.js.map +1 -0
- package/dist/default/ui/buffering-indicator/buffering-indicator-element.js +47 -0
- package/dist/default/ui/buffering-indicator/buffering-indicator-element.js.map +1 -0
- package/dist/default/ui/controls/controls-element.js +27 -0
- package/dist/default/ui/controls/controls-element.js.map +1 -0
- package/dist/default/ui/controls/controls-group-element.js +16 -0
- package/dist/default/ui/controls/controls-group-element.js.map +1 -0
- package/dist/default/ui/fullscreen-button/fullscreen-button-element.js +56 -0
- package/dist/default/ui/fullscreen-button/fullscreen-button-element.js.map +1 -0
- package/dist/default/ui/media-element.js +8 -0
- package/dist/default/ui/media-element.js.map +1 -0
- package/dist/default/ui/mute-button/mute-button-element.js +56 -0
- package/dist/default/ui/mute-button/mute-button-element.js.map +1 -0
- package/dist/default/ui/pip-button/pip-button-element.js +56 -0
- package/dist/default/ui/pip-button/pip-button-element.js.map +1 -0
- package/dist/default/ui/play-button/play-button-element.js +56 -0
- package/dist/default/ui/play-button/play-button-element.js.map +1 -0
- package/dist/default/ui/poster/poster-element.js +27 -0
- package/dist/default/ui/poster/poster-element.js.map +1 -0
- package/dist/default/ui/seek-button/seek-button-element.js +58 -0
- package/dist/default/ui/seek-button/seek-button-element.js.map +1 -0
- package/dist/default/ui/time/time-element.js +67 -0
- package/dist/default/ui/time/time-element.js.map +1 -0
- package/dist/default/ui/time/time-group-element.js +12 -0
- package/dist/default/ui/time/time-group-element.js.map +1 -0
- package/dist/default/ui/time/time-separator-element.js +17 -0
- package/dist/default/ui/time/time-separator-element.js.map +1 -0
- package/dist/dev/define/audio/player.d.ts +17 -0
- package/dist/dev/define/audio/player.d.ts.map +1 -0
- package/dist/dev/define/audio/player.js +15 -0
- package/dist/dev/define/audio/player.js.map +1 -0
- package/dist/dev/define/audio/skin.js +0 -0
- package/dist/dev/define/background/player.d.ts +17 -0
- package/dist/dev/define/background/player.d.ts.map +1 -0
- package/dist/dev/define/background/player.js +15 -0
- package/dist/dev/define/background/player.js.map +1 -0
- package/dist/dev/define/background/skin.js +0 -0
- package/dist/dev/define/feature/video.js +0 -0
- package/dist/dev/define/media/background-video.d.ts +14 -0
- package/dist/dev/define/media/background-video.d.ts.map +1 -0
- package/dist/dev/define/media/background-video.js +13 -0
- package/dist/dev/define/media/background-video.js.map +1 -0
- package/dist/dev/define/media/hls-video.d.ts +14 -0
- package/dist/dev/define/media/hls-video.d.ts.map +1 -0
- package/dist/dev/define/media/hls-video.js +13 -0
- package/dist/dev/define/media/hls-video.js.map +1 -0
- package/dist/dev/define/ui/buffering-indicator.d.ts +9 -0
- package/dist/dev/define/ui/buffering-indicator.d.ts.map +1 -0
- package/dist/dev/define/ui/buffering-indicator.js +7 -0
- package/dist/dev/define/ui/buffering-indicator.js.map +1 -0
- package/dist/dev/define/ui/controls.d.ts +11 -0
- package/dist/dev/define/ui/controls.d.ts.map +1 -0
- package/dist/dev/define/ui/controls.js +9 -0
- package/dist/dev/define/ui/controls.js.map +1 -0
- package/dist/dev/define/ui/fullscreen-button.d.ts +9 -0
- package/dist/dev/define/ui/fullscreen-button.d.ts.map +1 -0
- package/dist/dev/define/ui/fullscreen-button.js +7 -0
- package/dist/dev/define/ui/fullscreen-button.js.map +1 -0
- package/dist/dev/define/ui/mute-button.d.ts +9 -0
- package/dist/dev/define/ui/mute-button.d.ts.map +1 -0
- package/dist/dev/define/ui/mute-button.js +7 -0
- package/dist/dev/define/ui/mute-button.js.map +1 -0
- package/dist/dev/define/ui/pip-button.d.ts +9 -0
- package/dist/dev/define/ui/pip-button.d.ts.map +1 -0
- package/dist/dev/define/ui/pip-button.js +7 -0
- package/dist/dev/define/ui/pip-button.js.map +1 -0
- package/dist/dev/define/ui/play-button.d.ts +9 -0
- package/dist/dev/define/ui/play-button.d.ts.map +1 -0
- package/dist/dev/define/ui/play-button.js +7 -0
- package/dist/dev/define/ui/play-button.js.map +1 -0
- package/dist/dev/define/ui/poster.d.ts +9 -0
- package/dist/dev/define/ui/poster.d.ts.map +1 -0
- package/dist/dev/define/ui/poster.js +7 -0
- package/dist/dev/define/ui/poster.js.map +1 -0
- package/dist/dev/define/ui/seek-button.d.ts +9 -0
- package/dist/dev/define/ui/seek-button.d.ts.map +1 -0
- package/dist/dev/define/ui/seek-button.js +7 -0
- package/dist/dev/define/ui/seek-button.js.map +1 -0
- package/dist/dev/define/ui/time.d.ts +13 -0
- package/dist/dev/define/ui/time.d.ts.map +1 -0
- package/dist/dev/define/ui/time.js +11 -0
- package/dist/dev/define/ui/time.js.map +1 -0
- package/dist/dev/define/video/player.d.ts +17 -0
- package/dist/dev/define/video/player.d.ts.map +1 -0
- package/dist/dev/define/video/player.js +15 -0
- package/dist/dev/define/video/player.js.map +1 -0
- package/dist/dev/define/video/skin.js +0 -0
- package/dist/dev/index.d.ts +23 -0
- package/dist/dev/index.js +24 -0
- package/dist/dev/media/background-video/index.d.ts +15 -0
- package/dist/dev/media/background-video/index.d.ts.map +1 -0
- package/dist/dev/media/background-video/index.js +77 -0
- package/dist/dev/media/background-video/index.js.map +1 -0
- package/dist/dev/media/hls-video/index.d.ts +11 -0
- package/dist/dev/media/hls-video/index.d.ts.map +1 -0
- package/dist/dev/media/hls-video/index.js +21 -0
- package/dist/dev/media/hls-video/index.js.map +1 -0
- package/dist/dev/player/context.d.ts +16 -0
- package/dist/dev/player/context.d.ts.map +1 -0
- package/dist/dev/player/context.js +14 -0
- package/dist/dev/player/context.js.map +1 -0
- package/dist/dev/player/create-player.d.ts +73 -0
- package/dist/dev/player/create-player.d.ts.map +1 -0
- package/dist/dev/player/create-player.js +29 -0
- package/dist/dev/player/create-player.js.map +1 -0
- package/dist/dev/player/player-controller.d.ts +56 -0
- package/dist/dev/player/player-controller.d.ts.map +1 -0
- package/dist/dev/player/player-controller.js +63 -0
- package/dist/dev/player/player-controller.js.map +1 -0
- package/dist/dev/player/player-mixin.d.ts +20 -0
- package/dist/dev/player/player-mixin.d.ts.map +1 -0
- package/dist/dev/player/player-mixin.js +23 -0
- package/dist/dev/player/player-mixin.js.map +1 -0
- package/dist/dev/store/container-mixin.d.ts +16 -0
- package/dist/dev/store/container-mixin.d.ts.map +1 -0
- package/dist/dev/store/container-mixin.js +74 -0
- package/dist/dev/store/container-mixin.js.map +1 -0
- package/dist/dev/store/provider-mixin.d.ts +17 -0
- package/dist/dev/store/provider-mixin.d.ts.map +1 -0
- package/dist/dev/store/provider-mixin.js +39 -0
- package/dist/dev/store/provider-mixin.js.map +1 -0
- package/dist/dev/store/types.d.ts +18 -0
- package/dist/dev/store/types.d.ts.map +1 -0
- package/dist/dev/ui/buffering-indicator/buffering-indicator-element.d.ts +21 -0
- package/dist/dev/ui/buffering-indicator/buffering-indicator-element.d.ts.map +1 -0
- package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js +48 -0
- package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js.map +1 -0
- package/dist/dev/ui/controls/controls-element.d.ts +13 -0
- package/dist/dev/ui/controls/controls-element.d.ts.map +1 -0
- package/dist/dev/ui/controls/controls-element.js +28 -0
- package/dist/dev/ui/controls/controls-element.js.map +1 -0
- package/dist/dev/ui/controls/controls-group-element.d.ts +10 -0
- package/dist/dev/ui/controls/controls-group-element.d.ts.map +1 -0
- package/dist/dev/ui/controls/controls-group-element.js +16 -0
- package/dist/dev/ui/controls/controls-group-element.js.map +1 -0
- package/dist/dev/ui/fullscreen-button/fullscreen-button-element.d.ts +26 -0
- package/dist/dev/ui/fullscreen-button/fullscreen-button-element.d.ts.map +1 -0
- package/dist/dev/ui/fullscreen-button/fullscreen-button-element.js +57 -0
- package/dist/dev/ui/fullscreen-button/fullscreen-button-element.js.map +1 -0
- package/dist/dev/ui/media-element.d.ts +9 -0
- package/dist/dev/ui/media-element.d.ts.map +1 -0
- package/dist/dev/ui/media-element.js +8 -0
- package/dist/dev/ui/media-element.js.map +1 -0
- package/dist/dev/ui/mute-button/mute-button-element.d.ts +26 -0
- package/dist/dev/ui/mute-button/mute-button-element.d.ts.map +1 -0
- package/dist/dev/ui/mute-button/mute-button-element.js +57 -0
- package/dist/dev/ui/mute-button/mute-button-element.js.map +1 -0
- package/dist/dev/ui/pip-button/pip-button-element.d.ts +26 -0
- package/dist/dev/ui/pip-button/pip-button-element.d.ts.map +1 -0
- package/dist/dev/ui/pip-button/pip-button-element.js +57 -0
- package/dist/dev/ui/pip-button/pip-button-element.js.map +1 -0
- package/dist/dev/ui/play-button/play-button-element.d.ts +26 -0
- package/dist/dev/ui/play-button/play-button-element.d.ts.map +1 -0
- package/dist/dev/ui/play-button/play-button-element.js +57 -0
- package/dist/dev/ui/play-button/play-button-element.js.map +1 -0
- package/dist/dev/ui/poster/poster-element.d.ts +13 -0
- package/dist/dev/ui/poster/poster-element.d.ts.map +1 -0
- package/dist/dev/ui/poster/poster-element.js +28 -0
- package/dist/dev/ui/poster/poster-element.js.map +1 -0
- package/dist/dev/ui/seek-button/seek-button-element.d.ts +30 -0
- package/dist/dev/ui/seek-button/seek-button-element.d.ts.map +1 -0
- package/dist/dev/ui/seek-button/seek-button-element.js +59 -0
- package/dist/dev/ui/seek-button/seek-button-element.js.map +1 -0
- package/dist/dev/ui/time/time-element.d.ts +32 -0
- package/dist/dev/ui/time/time-element.d.ts.map +1 -0
- package/dist/dev/ui/time/time-element.js +68 -0
- package/dist/dev/ui/time/time-element.js.map +1 -0
- package/dist/dev/ui/time/time-group-element.d.ts +9 -0
- package/dist/dev/ui/time/time-group-element.d.ts.map +1 -0
- package/dist/dev/ui/time/time-group-element.js +12 -0
- package/dist/dev/ui/time/time-group-element.js.map +1 -0
- package/dist/dev/ui/time/time-separator-element.d.ts +10 -0
- package/dist/dev/ui/time/time-separator-element.d.ts.map +1 -0
- package/dist/dev/ui/time/time-separator-element.js +17 -0
- package/dist/dev/ui/time/time-separator-element.js.map +1 -0
- package/package.json +62 -40
- package/dist/button-Bu1mGG-F.js +0 -63
- package/dist/button-Bu1mGG-F.js.map +0 -1
- package/dist/component-factory-C0cl1nrL.js +0 -73
- package/dist/component-factory-C0cl1nrL.js.map +0 -1
- package/dist/current-time-display-DpoDrQu9.js +0 -46
- package/dist/current-time-display-DpoDrQu9.js.map +0 -1
- package/dist/custom-element-3bDlB2XO.js +0 -10
- package/dist/custom-element-3bDlB2XO.js.map +0 -1
- package/dist/define/index.d.ts +0 -12
- package/dist/define/index.js +0 -27
- package/dist/define/media-container.d.ts +0 -1
- package/dist/define/media-container.js +0 -3
- package/dist/define/media-current-time-display.d.ts +0 -1
- package/dist/define/media-current-time-display.js +0 -4
- package/dist/define/media-duration-display.d.ts +0 -1
- package/dist/define/media-duration-display.js +0 -4
- package/dist/define/media-fullscreen-button.d.ts +0 -1
- package/dist/define/media-fullscreen-button.js +0 -5
- package/dist/define/media-mute-button.d.ts +0 -1
- package/dist/define/media-mute-button.js +0 -5
- package/dist/define/media-play-button.d.ts +0 -1
- package/dist/define/media-play-button.js +0 -5
- package/dist/define/media-popover.d.ts +0 -1
- package/dist/define/media-popover.js +0 -3
- package/dist/define/media-preview-time-display.d.ts +0 -1
- package/dist/define/media-preview-time-display.js +0 -4
- package/dist/define/media-time-slider.d.ts +0 -1
- package/dist/define/media-time-slider.js +0 -4
- package/dist/define/media-tooltip.d.ts +0 -1
- package/dist/define/media-tooltip.js +0 -3
- package/dist/define/media-volume-slider.d.ts +0 -1
- package/dist/define/media-volume-slider.js +0 -4
- package/dist/define/video-provider.d.ts +0 -1
- package/dist/define/video-provider.js +0 -3
- package/dist/duration-display-BFRQmaOz.js +0 -48
- package/dist/duration-display-BFRQmaOz.js.map +0 -1
- package/dist/fullscreen-button-B0R9K3GV.js +0 -47
- package/dist/fullscreen-button-B0R9K3GV.js.map +0 -1
- package/dist/icons-CuxuONCk.js +0 -209
- package/dist/icons-CuxuONCk.js.map +0 -1
- package/dist/icons.d.ts +0 -1
- package/dist/icons.js +0 -2
- package/dist/index.d.ts +0 -146
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -17
- package/dist/media-container-BOL0PKuG.js +0 -80
- package/dist/media-container-BOL0PKuG.js.map +0 -1
- package/dist/media-container-DwKSOa1h.js +0 -8
- package/dist/media-container-DwKSOa1h.js.map +0 -1
- package/dist/media-current-time-display-DVCqNt7c.js +0 -8
- package/dist/media-current-time-display-DVCqNt7c.js.map +0 -1
- package/dist/media-duration-display-tzVLafRm.js +0 -8
- package/dist/media-duration-display-tzVLafRm.js.map +0 -1
- package/dist/media-fullscreen-button-BgUK3lgu.d.ts +0 -1
- package/dist/media-fullscreen-button-DDQ6EdLz.js +0 -8
- package/dist/media-fullscreen-button-DDQ6EdLz.js.map +0 -1
- package/dist/media-mute-button-NVJF2EEW.d.ts +0 -1
- package/dist/media-mute-button-Uy18NpPx.js +0 -8
- package/dist/media-mute-button-Uy18NpPx.js.map +0 -1
- package/dist/media-play-button-CDBZrhmx.js +0 -8
- package/dist/media-play-button-CDBZrhmx.js.map +0 -1
- package/dist/media-play-button-oq8yDlxe.d.ts +0 -1
- package/dist/media-popover-BtJmPv0E.d.ts +0 -1
- package/dist/media-popover-Cw9d_Bh3.js +0 -8
- package/dist/media-popover-Cw9d_Bh3.js.map +0 -1
- package/dist/media-preview-time-display-4YX5Rics.d.ts +0 -1
- package/dist/media-preview-time-display-ufqXiNXg.js +0 -8
- package/dist/media-preview-time-display-ufqXiNXg.js.map +0 -1
- package/dist/media-skin-CxnuHwhu.js +0 -36
- package/dist/media-skin-CxnuHwhu.js.map +0 -1
- package/dist/media-skin-Di3vSHvS.d.ts +0 -11
- package/dist/media-skin-Di3vSHvS.d.ts.map +0 -1
- package/dist/media-time-slider-BOdJr4QE.js +0 -12
- package/dist/media-time-slider-BOdJr4QE.js.map +0 -1
- package/dist/media-time-slider-DvMnfYXZ.d.ts +0 -1
- package/dist/media-tooltip-BqV17mdM.d.ts +0 -1
- package/dist/media-tooltip-CMRN_X4D.js +0 -8
- package/dist/media-tooltip-CMRN_X4D.js.map +0 -1
- package/dist/media-volume-slider-BB6GhrzS.js +0 -11
- package/dist/media-volume-slider-BB6GhrzS.js.map +0 -1
- package/dist/media-volume-slider-DP47VLVi.d.ts +0 -1
- package/dist/mute-button-C7XQB6iK.js +0 -49
- package/dist/mute-button-C7XQB6iK.js.map +0 -1
- package/dist/play-button-DFbxwrrq.js +0 -47
- package/dist/play-button-DFbxwrrq.js.map +0 -1
- package/dist/popover-BUCVOjnO.js +0 -167
- package/dist/popover-BUCVOjnO.js.map +0 -1
- package/dist/preview-time-display-CtA58pCS.js +0 -43
- package/dist/preview-time-display-CtA58pCS.js.map +0 -1
- package/dist/skins/frosted.d.ts +0 -23
- package/dist/skins/frosted.d.ts.map +0 -1
- package/dist/skins/frosted.js +0 -145
- package/dist/skins/frosted.js.map +0 -1
- package/dist/skins/minimal.d.ts +0 -23
- package/dist/skins/minimal.d.ts.map +0 -1
- package/dist/skins/minimal.js +0 -150
- package/dist/skins/minimal.js.map +0 -1
- package/dist/store.d.ts +0 -1
- package/dist/time-slider-DHpKPCI1.js +0 -165
- package/dist/time-slider-DHpKPCI1.js.map +0 -1
- package/dist/tooltip-B-glki2f.js +0 -171
- package/dist/tooltip-B-glki2f.js.map +0 -1
- package/dist/video-provider-BKDqoKFf.js +0 -17
- package/dist/video-provider-BKDqoKFf.js.map +0 -1
- package/dist/video-provider-BPPI5e47.js +0 -8
- package/dist/video-provider-BPPI5e47.js.map +0 -1
- package/dist/video-provider-nSCfwA7l.d.ts +0 -1
- package/dist/volume-slider-CUyfwehe.js +0 -140
- package/dist/volume-slider-CUyfwehe.js.map +0 -1
- /package/dist/{store.js → default/define/audio/skin.js} +0 -0
- /package/dist/{index-LKrIp3Oo.d.ts → dev/define/audio/skin.d.ts} +0 -0
- /package/dist/{media-container-ChS9lZvf.d.ts → dev/define/background/skin.d.ts} +0 -0
- /package/dist/{media-current-time-display-Cd0rPAuj.d.ts → dev/define/feature/video.d.ts} +0 -0
- /package/dist/{media-duration-display-qvm6YX-q.d.ts → dev/define/video/skin.d.ts} +0 -0
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
//#region src/media/media-skin.ts
|
|
2
|
-
function getTemplateHTML() {
|
|
3
|
-
return `
|
|
4
|
-
<style>
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
media-container {
|
|
10
|
-
display: block;
|
|
11
|
-
width: 100%;
|
|
12
|
-
height: 100%;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<slot></slot>
|
|
16
|
-
`;
|
|
17
|
-
}
|
|
18
|
-
var MediaSkinElement = class extends HTMLElement {
|
|
19
|
-
static {
|
|
20
|
-
this.shadowRootOptions = { mode: "open" };
|
|
21
|
-
}
|
|
22
|
-
static {
|
|
23
|
-
this.getTemplateHTML = getTemplateHTML;
|
|
24
|
-
}
|
|
25
|
-
constructor() {
|
|
26
|
-
super();
|
|
27
|
-
if (!this.shadowRoot) {
|
|
28
|
-
this.attachShadow(this.constructor.shadowRootOptions);
|
|
29
|
-
this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
//#endregion
|
|
35
|
-
export { MediaSkinElement as t };
|
|
36
|
-
//# sourceMappingURL=media-skin-CxnuHwhu.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-skin-CxnuHwhu.js","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":["export function getTemplateHTML() {\n return /* html */ `\n <style>\n :host {\n display: block;\n }\n\n media-container {\n display: block;\n width: 100%;\n height: 100%;\n }\n </style>\n <slot></slot>\n `;\n}\n\nexport class MediaSkinElement extends HTMLElement {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML: () => string = getTemplateHTML;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();\n }\n }\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;;;;;;;;AAgBpB,IAAa,mBAAb,cAAsC,YAAY;;2BACrB,EAAE,MAAM,QAA0B;;;yBACtB;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAwC,kBAAkB;AAClF,QAAK,WAAY,YAAa,KAAK,YAAwC,iBAAiB"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
//#region src/media/media-skin.d.ts
|
|
2
|
-
declare class MediaSkinElement extends HTMLElement {
|
|
3
|
-
static shadowRootOptions: {
|
|
4
|
-
mode: ShadowRootMode;
|
|
5
|
-
};
|
|
6
|
-
static getTemplateHTML: () => string;
|
|
7
|
-
constructor();
|
|
8
|
-
}
|
|
9
|
-
//#endregion
|
|
10
|
-
export { MediaSkinElement as t };
|
|
11
|
-
//# sourceMappingURL=media-skin-Di3vSHvS.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-skin-Di3vSHvS.d.ts","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":[],"mappings":";AAiBa,cAAA,gBAAA,SAAyB,WAAA,CAAA;;UACS"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { a as TimeSliderThumbElement, i as TimeSliderRootElement, n as TimeSliderPointerElement, o as TimeSliderTrackElement, r as TimeSliderProgressElement } from "./time-slider-DHpKPCI1.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-time-slider.ts
|
|
5
|
-
defineCustomElement("media-time-slider", TimeSliderRootElement);
|
|
6
|
-
defineCustomElement("media-time-slider-track", TimeSliderTrackElement);
|
|
7
|
-
defineCustomElement("media-time-slider-progress", TimeSliderProgressElement);
|
|
8
|
-
defineCustomElement("media-time-slider-pointer", TimeSliderPointerElement);
|
|
9
|
-
defineCustomElement("media-time-slider-thumb", TimeSliderThumbElement);
|
|
10
|
-
|
|
11
|
-
//#endregion
|
|
12
|
-
//# sourceMappingURL=media-time-slider-BOdJr4QE.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-time-slider-BOdJr4QE.js","names":[],"sources":["../src/define/media-time-slider.ts"],"sourcesContent":["import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-time-slider', TimeSliderRootElement);\ndefineCustomElement('media-time-slider-track', TimeSliderTrackElement);\ndefineCustomElement('media-time-slider-progress', TimeSliderProgressElement);\ndefineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);\ndefineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,sBAAsB;AAC/D,oBAAoB,2BAA2B,uBAAuB;AACtE,oBAAoB,8BAA8B,0BAA0B;AAC5E,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,2BAA2B,uBAAuB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { };
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { t as TooltipElement } from "./tooltip-B-glki2f.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-tooltip.ts
|
|
5
|
-
defineCustomElement("media-tooltip", TooltipElement);
|
|
6
|
-
|
|
7
|
-
//#endregion
|
|
8
|
-
//# sourceMappingURL=media-tooltip-CMRN_X4D.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-tooltip-CMRN_X4D.js","names":[],"sources":["../src/define/media-tooltip.ts"],"sourcesContent":["import { TooltipElement } from '@/elements/tooltip';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-tooltip', TooltipElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,eAAe"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { a as VolumeSliderTrackElement, i as VolumeSliderThumbElement, n as VolumeSliderIndicatorElement, r as VolumeSliderRootElement } from "./volume-slider-CUyfwehe.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-volume-slider.ts
|
|
5
|
-
defineCustomElement("media-volume-slider", VolumeSliderRootElement);
|
|
6
|
-
defineCustomElement("media-volume-slider-track", VolumeSliderTrackElement);
|
|
7
|
-
defineCustomElement("media-volume-slider-indicator", VolumeSliderIndicatorElement);
|
|
8
|
-
defineCustomElement("media-volume-slider-thumb", VolumeSliderThumbElement);
|
|
9
|
-
|
|
10
|
-
//#endregion
|
|
11
|
-
//# sourceMappingURL=media-volume-slider-BB6GhrzS.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-volume-slider-BB6GhrzS.js","names":[],"sources":["../src/define/media-volume-slider.ts"],"sourcesContent":["import { VolumeSliderIndicatorElement, VolumeSliderRootElement, VolumeSliderThumbElement, VolumeSliderTrackElement } from '@/elements/volume-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-volume-slider', VolumeSliderRootElement);\ndefineCustomElement('media-volume-slider-track', VolumeSliderTrackElement);\ndefineCustomElement('media-volume-slider-indicator', VolumeSliderIndicatorElement);\ndefineCustomElement('media-volume-slider-thumb', VolumeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,uBAAuB,wBAAwB;AACnE,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,iCAAiC,6BAA6B;AAClF,oBAAoB,6BAA6B,yBAAyB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { };
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
|
|
2
|
-
import { t as ButtonElement } from "./button-Bu1mGG-F.js";
|
|
3
|
-
import { muteButtonStateDefinition } from "@videojs/core/store";
|
|
4
|
-
import { setAttributes } from "@videojs/utils/dom";
|
|
5
|
-
|
|
6
|
-
//#region src/elements/mute-button.ts
|
|
7
|
-
var MuteButton = class extends ButtonElement {
|
|
8
|
-
handleEvent(event) {
|
|
9
|
-
super.handleEvent(event);
|
|
10
|
-
const { type } = event;
|
|
11
|
-
const state = this._state;
|
|
12
|
-
if (state) {
|
|
13
|
-
if (type === "click") if (state.volumeLevel === "off") state.requestUnmute();
|
|
14
|
-
else state.requestMute();
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
get muted() {
|
|
18
|
-
return this._state?.muted ?? false;
|
|
19
|
-
}
|
|
20
|
-
get volumeLevel() {
|
|
21
|
-
return this._state?.volumeLevel ?? "high";
|
|
22
|
-
}
|
|
23
|
-
_update(props, state) {
|
|
24
|
-
this._state = state;
|
|
25
|
-
/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP) */
|
|
26
|
-
setAttributes(this, props);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
function getMuteButtonState(mediaStore) {
|
|
30
|
-
return {
|
|
31
|
-
...muteButtonStateDefinition.stateTransform(mediaStore.getState()),
|
|
32
|
-
...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
const getMuteButtonProps = (state, _element) => {
|
|
36
|
-
return {
|
|
37
|
-
"data-muted": state.muted,
|
|
38
|
-
"data-volume-level": state.volumeLevel,
|
|
39
|
-
role: "button",
|
|
40
|
-
tabindex: "0",
|
|
41
|
-
"aria-label": state.muted ? "unmute" : "mute",
|
|
42
|
-
"data-tooltip": state.muted ? "Unmute" : "Mute"
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
const MuteButtonElement = toConnectedHTMLComponent(MuteButton, getMuteButtonState, getMuteButtonProps, "MuteButton");
|
|
46
|
-
|
|
47
|
-
//#endregion
|
|
48
|
-
export { MuteButtonElement as t };
|
|
49
|
-
//# sourceMappingURL=mute-button-C7XQB6iK.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"mute-button-C7XQB6iK.js","names":["getMuteButtonProps: PropsHook<{\n muted: boolean;\n volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonStateWithMethods>"],"sources":["../src/elements/mute-button.ts"],"sourcesContent":["import type { MediaStore, MuteButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class MuteButton extends ButtonElement {\n _state:\n | {\n muted: boolean;\n volumeLevel: string;\n requestMute: () => void;\n requestUnmute: () => void;\n }\n | undefined;\n\n handleEvent(event: Event): void {\n super.handleEvent(event);\n\n const { type } = event;\n const state = this._state;\n\n if (state) {\n if (type === 'click') {\n if (state.volumeLevel === 'off') {\n state.requestUnmute();\n } else {\n state.requestMute();\n }\n }\n }\n }\n\n get muted(): boolean {\n return this._state?.muted ?? false;\n }\n\n get volumeLevel(): string {\n return this._state?.volumeLevel ?? 'high';\n }\n\n _update(props: any, state: any): void {\n this._state = state;\n /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP) */\n setAttributes(this, props);\n }\n}\n\ntype MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;\n\nexport function getMuteButtonState(mediaStore: MediaStore): MuteButtonStateWithMethods {\n return {\n ...muteButtonStateDefinition.stateTransform(mediaStore.getState()),\n ...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n };\n}\n\nexport const getMuteButtonProps: PropsHook<{\n muted: boolean;\n volumeLevel: string;\n}> = (state, _element) => {\n const baseProps: Record<string, any> = {\n /** data attributes/props */\n 'data-muted': state.muted,\n 'data-volume-level': state.volumeLevel,\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n tabindex: '0',\n 'aria-label': state.muted ? 'unmute' : 'mute',\n /** tooltip */\n 'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n /** external props spread last to allow for overriding */\n // ...props,\n };\n\n return baseProps;\n};\n\nexport const MuteButtonElement: ConnectedComponentConstructor<MuteButtonStateWithMethods> = toConnectedHTMLComponent(\n MuteButton,\n getMuteButtonState,\n getMuteButtonProps,\n 'MuteButton',\n);\n"],"mappings":";;;;;;AAUA,IAAa,aAAb,cAAgC,cAAc;CAU5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AAEnB,MAAI,OACF;OAAI,SAAS,QACX,KAAI,MAAM,gBAAgB,MACxB,OAAM,eAAe;OAErB,OAAM,aAAa;;;CAM3B,IAAI,QAAiB;AACnB,SAAO,KAAK,QAAQ,SAAS;;CAG/B,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,QAAQ,OAAY,OAAkB;AACpC,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;AAM9B,SAAgB,mBAAmB,YAAoD;AACrF,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;;AAGH,MAAaA,sBAGP,OAAO,aAAa;AAiBxB,QAhBuC;EAErC,cAAc,MAAM;EACpB,qBAAqB,MAAM;EAG3B,MAAM;EACN,UAAU;EACV,cAAc,MAAM,QAAQ,WAAW;EAEvC,gBAAgB,MAAM,QAAQ,WAAW;EAI1C;;AAKH,MAAaC,oBAA+E,yBAC1F,YACA,oBACA,oBACA,aACD"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
|
|
2
|
-
import { t as ButtonElement } from "./button-Bu1mGG-F.js";
|
|
3
|
-
import { playButtonStateDefinition } from "@videojs/core/store";
|
|
4
|
-
import { setAttributes } from "@videojs/utils/dom";
|
|
5
|
-
|
|
6
|
-
//#region src/elements/play-button.ts
|
|
7
|
-
var PlayButton = class extends ButtonElement {
|
|
8
|
-
handleEvent(event) {
|
|
9
|
-
super.handleEvent(event);
|
|
10
|
-
const { type } = event;
|
|
11
|
-
const state = this._state;
|
|
12
|
-
if (state && type === "click") if (state.paused) state.requestPlay();
|
|
13
|
-
else state.requestPause();
|
|
14
|
-
}
|
|
15
|
-
get paused() {
|
|
16
|
-
return this._state?.paused ?? true;
|
|
17
|
-
}
|
|
18
|
-
_update(props, state, _mediaStore) {
|
|
19
|
-
this._state = state;
|
|
20
|
-
/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP) */
|
|
21
|
-
setAttributes(this, props);
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* PlayButton state hook - equivalent to React's usePlayButtonState
|
|
26
|
-
* Handles media store state subscription and transformation
|
|
27
|
-
*/
|
|
28
|
-
function getPlayButtonState(mediaStore) {
|
|
29
|
-
return {
|
|
30
|
-
...playButtonStateDefinition.stateTransform(mediaStore.getState()),
|
|
31
|
-
...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
const getPlayButtonProps = (state, _element) => {
|
|
35
|
-
return {
|
|
36
|
-
"data-paused": state.paused,
|
|
37
|
-
role: "button",
|
|
38
|
-
tabindex: "0",
|
|
39
|
-
"aria-label": state.paused ? "play" : "pause",
|
|
40
|
-
"data-tooltip": state.paused ? "Play" : "Pause"
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
const PlayButtonElement = toConnectedHTMLComponent(PlayButton, getPlayButtonState, getPlayButtonProps, "PlayButton");
|
|
44
|
-
|
|
45
|
-
//#endregion
|
|
46
|
-
export { PlayButtonElement as t };
|
|
47
|
-
//# sourceMappingURL=play-button-DFbxwrrq.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"play-button-DFbxwrrq.js","names":["getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonStateWithMethods>"],"sources":["../src/elements/play-button.ts"],"sourcesContent":["import type { MediaStore, PlayButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class PlayButton extends ButtonElement {\n _state: { paused: boolean; requestPlay: () => void; requestPause: () => void } | undefined;\n\n handleEvent(event: Event): void {\n super.handleEvent(event);\n\n const { type } = event;\n const state = this._state;\n if (state && type === 'click') {\n if (state.paused) {\n state.requestPlay();\n } else {\n state.requestPause();\n }\n }\n }\n\n get paused(): boolean {\n return this._state?.paused ?? true;\n }\n\n _update(props: any, state: any, _mediaStore?: any): void {\n this._state = state;\n /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP) */\n setAttributes(this, props);\n }\n}\n\ntype PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;\n\n/**\n * PlayButton state hook - equivalent to React's usePlayButtonState\n * Handles media store state subscription and transformation\n */\nexport function getPlayButtonState(mediaStore: MediaStore): PlayButtonStateWithMethods {\n return {\n ...playButtonStateDefinition.stateTransform(mediaStore.getState()),\n ...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n };\n}\n\nexport const getPlayButtonProps: PropsHook<{ paused: boolean }> = (state, _element) => {\n const baseProps: Record<string, any> = {\n /** data attributes/props */\n 'data-paused': state.paused,\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n tabindex: '0',\n 'aria-label': state.paused ? 'play' : 'pause',\n /** tooltip */\n 'data-tooltip': state.paused ? 'Play' : 'Pause',\n /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n /** external props spread last to allow for overriding */\n // ...props,\n };\n\n return baseProps;\n};\n\nexport const PlayButtonElement: ConnectedComponentConstructor<PlayButtonStateWithMethods> = toConnectedHTMLComponent(\n PlayButton,\n getPlayButtonState,\n getPlayButtonProps,\n 'PlayButton',\n);\n"],"mappings":";;;;;;AAUA,IAAa,aAAb,cAAgC,cAAc;CAG5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,OACR,OAAM,aAAa;MAEnB,OAAM,cAAc;;CAK1B,IAAI,SAAkB;AACpB,SAAO,KAAK,QAAQ,UAAU;;CAGhC,QAAQ,OAAY,OAAY,aAAyB;AACvD,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;;;;;AAU9B,SAAgB,mBAAmB,YAAoD;AACrF,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,0BAA0B,qBAAqB,WAAW,SAAS;EACvE;;AAGH,MAAaA,sBAAsD,OAAO,aAAa;AAgBrF,QAfuC;EAErC,eAAe,MAAM;EAGrB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,SAAS,SAAS;EAEtC,gBAAgB,MAAM,SAAS,SAAS;EAIzC;;AAKH,MAAaC,oBAA+E,yBAC1F,YACA,oBACA,oBACA,aACD"}
|
package/dist/popover-BUCVOjnO.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from "@videojs/utils/dom";
|
|
2
|
-
|
|
3
|
-
//#region src/elements/popover.ts
|
|
4
|
-
var PopoverElement = class extends HTMLElement {
|
|
5
|
-
static get observedAttributes() {
|
|
6
|
-
return [
|
|
7
|
-
"id",
|
|
8
|
-
"open-on-hover",
|
|
9
|
-
"delay",
|
|
10
|
-
"close-delay",
|
|
11
|
-
"side",
|
|
12
|
-
"side-offset"
|
|
13
|
-
];
|
|
14
|
-
}
|
|
15
|
-
#open = false;
|
|
16
|
-
#transitionStatus = "initial";
|
|
17
|
-
#hoverTimeout = null;
|
|
18
|
-
#cleanup = null;
|
|
19
|
-
#abortController = null;
|
|
20
|
-
attributeChangedCallback(name, _oldValue, newValue) {
|
|
21
|
-
if (name === "id") this.style.setProperty("position-anchor", `--${newValue}`);
|
|
22
|
-
const [side, alignment] = this.side.split("-");
|
|
23
|
-
this.style.setProperty("top", `calc(anchor(${side}) - ${this.sideOffset}px)`);
|
|
24
|
-
this.style.setProperty("translate", `0 -100%`);
|
|
25
|
-
this.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
|
|
26
|
-
}
|
|
27
|
-
connectedCallback() {
|
|
28
|
-
this.#abortController ??= new AbortController();
|
|
29
|
-
const { signal } = this.#abortController;
|
|
30
|
-
const trigger = this.#triggerElement;
|
|
31
|
-
if (trigger) {
|
|
32
|
-
if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
|
|
33
|
-
trigger.addEventListener("pointerenter", this, { signal });
|
|
34
|
-
trigger.addEventListener("pointerleave", this, { signal });
|
|
35
|
-
}
|
|
36
|
-
trigger.addEventListener("focusin", this, { signal });
|
|
37
|
-
trigger.addEventListener("focusout", this, { signal });
|
|
38
|
-
}
|
|
39
|
-
this.addEventListener("pointerenter", this, { signal });
|
|
40
|
-
this.addEventListener("focusout", this, { signal });
|
|
41
|
-
}
|
|
42
|
-
disconnectedCallback() {
|
|
43
|
-
this.#clearHoverTimeout();
|
|
44
|
-
this.#cleanup?.();
|
|
45
|
-
this.#abortController?.abort();
|
|
46
|
-
this.#abortController = null;
|
|
47
|
-
}
|
|
48
|
-
handleEvent(event) {
|
|
49
|
-
switch (event.type) {
|
|
50
|
-
case "pointerenter":
|
|
51
|
-
this.#handlePointerEnter(event);
|
|
52
|
-
break;
|
|
53
|
-
case "pointerleave":
|
|
54
|
-
this.#handlePointerLeave(event);
|
|
55
|
-
break;
|
|
56
|
-
case "pointermove":
|
|
57
|
-
this.#handlePointerMove(event);
|
|
58
|
-
break;
|
|
59
|
-
case "focusin":
|
|
60
|
-
this.#handleFocusIn(event);
|
|
61
|
-
break;
|
|
62
|
-
case "focusout":
|
|
63
|
-
this.#handleFocusOut(event);
|
|
64
|
-
break;
|
|
65
|
-
default: break;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
get openOnHover() {
|
|
69
|
-
return this.hasAttribute("open-on-hover");
|
|
70
|
-
}
|
|
71
|
-
get delay() {
|
|
72
|
-
return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
|
|
73
|
-
}
|
|
74
|
-
get closeDelay() {
|
|
75
|
-
return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
|
|
76
|
-
}
|
|
77
|
-
get side() {
|
|
78
|
-
return this.getAttribute("side");
|
|
79
|
-
}
|
|
80
|
-
get sideOffset() {
|
|
81
|
-
return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
|
|
82
|
-
}
|
|
83
|
-
get #triggerElement() {
|
|
84
|
-
return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`);
|
|
85
|
-
}
|
|
86
|
-
#setOpen(open) {
|
|
87
|
-
if (this.#open === open) return;
|
|
88
|
-
this.#open = open;
|
|
89
|
-
if (open) {
|
|
90
|
-
this.#transitionStatus = "initial";
|
|
91
|
-
this.#updateVisibility();
|
|
92
|
-
this.showPopover();
|
|
93
|
-
requestAnimationFrame(() => {
|
|
94
|
-
this.#transitionStatus = "open";
|
|
95
|
-
this.#updateVisibility();
|
|
96
|
-
});
|
|
97
|
-
} else {
|
|
98
|
-
this.#transitionStatus = "close";
|
|
99
|
-
this.#updateVisibility();
|
|
100
|
-
const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
|
|
101
|
-
if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
|
|
102
|
-
else this.hidePopover();
|
|
103
|
-
this.#cleanup?.();
|
|
104
|
-
this.#cleanup = null;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
#updateVisibility() {
|
|
108
|
-
this.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
|
|
109
|
-
this.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
|
|
110
|
-
this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
|
|
111
|
-
this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
|
|
112
|
-
}
|
|
113
|
-
#clearHoverTimeout() {
|
|
114
|
-
if (this.#hoverTimeout) {
|
|
115
|
-
globalThis.clearTimeout(this.#hoverTimeout);
|
|
116
|
-
this.#hoverTimeout = null;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
#handlePointerEnter(event) {
|
|
120
|
-
if (!this.openOnHover) return;
|
|
121
|
-
this.#clearHoverTimeout();
|
|
122
|
-
if (event.currentTarget === this) this.#addPointerMoveListener();
|
|
123
|
-
if (this.#open) return;
|
|
124
|
-
this.#hoverTimeout = globalThis.setTimeout(() => {
|
|
125
|
-
this.#setOpen(true);
|
|
126
|
-
}, this.delay);
|
|
127
|
-
}
|
|
128
|
-
#handlePointerLeave(_event) {
|
|
129
|
-
this.#addPointerMoveListener();
|
|
130
|
-
}
|
|
131
|
-
#addPointerMoveListener() {
|
|
132
|
-
if (!globalThis.matchMedia?.("(hover: hover)")?.matches) return;
|
|
133
|
-
const { signal } = this.#abortController;
|
|
134
|
-
getDocument(this).documentElement.addEventListener("pointermove", this, { signal });
|
|
135
|
-
}
|
|
136
|
-
#handlePointerMove(event) {
|
|
137
|
-
if (!this.openOnHover || !this.#triggerElement) return;
|
|
138
|
-
safePolygon({ blockPointerEvents: true })({
|
|
139
|
-
placement: this.side,
|
|
140
|
-
elements: {
|
|
141
|
-
domReference: this.#triggerElement,
|
|
142
|
-
floating: this
|
|
143
|
-
},
|
|
144
|
-
x: event.clientX,
|
|
145
|
-
y: event.clientY,
|
|
146
|
-
onClose: () => {
|
|
147
|
-
getDocument(this).documentElement.removeEventListener("pointermove", this);
|
|
148
|
-
this.#clearHoverTimeout();
|
|
149
|
-
this.#hoverTimeout = globalThis.setTimeout(() => {
|
|
150
|
-
this.#setOpen(false);
|
|
151
|
-
}, this.closeDelay);
|
|
152
|
-
}
|
|
153
|
-
})(event);
|
|
154
|
-
}
|
|
155
|
-
#handleFocusIn(_event) {
|
|
156
|
-
this.#setOpen(true);
|
|
157
|
-
}
|
|
158
|
-
#handleFocusOut(event) {
|
|
159
|
-
const relatedTarget = event.relatedTarget;
|
|
160
|
-
if (relatedTarget && contains(this, relatedTarget)) return;
|
|
161
|
-
this.#setOpen(false);
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
//#endregion
|
|
166
|
-
export { PopoverElement as t };
|
|
167
|
-
//# sourceMappingURL=popover-BUCVOjnO.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover-BUCVOjnO.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#transitionStatus","#updateVisibility","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\nexport class PopoverElement extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['id', 'open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\n }\n\n #open = false;\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #cleanup: (() => void) | null = null;\n #abortController: AbortController | null = null;\n\n attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {\n if (name === 'id') {\n this.style.setProperty('position-anchor', `--${newValue}`);\n }\n\n const [side, alignment] = this.side.split('-');\n this.style.setProperty('top', `calc(anchor(${side}) - ${this.sideOffset}px)`);\n this.style.setProperty('translate', `0 -100%`);\n this.style.setProperty('justify-self', alignment === 'start'\n ? 'anchor-start'\n : alignment === 'end'\n ? 'anchor-end'\n : 'anchor-center');\n }\n\n connectedCallback(): void {\n this.#abortController ??= new AbortController();\n const { signal } = this.#abortController;\n\n const trigger = this.#triggerElement as HTMLElement;\n if (trigger) {\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n trigger.addEventListener('pointerenter', this, { signal });\n trigger.addEventListener('pointerleave', this, { signal });\n }\n\n trigger.addEventListener('focusin', this, { signal });\n trigger.addEventListener('focusout', this, { signal });\n }\n\n this.addEventListener('pointerenter', this, { signal });\n this.addEventListener('focusout', this, { signal });\n }\n\n disconnectedCallback(): void {\n this.#clearHoverTimeout();\n this.#cleanup?.();\n\n this.#abortController?.abort();\n this.#abortController = null;\n }\n\n handleEvent(event: Event): void {\n switch (event.type) {\n case 'pointerenter':\n this.#handlePointerEnter(event as PointerEvent);\n break;\n case 'pointerleave':\n this.#handlePointerLeave(event as PointerEvent);\n break;\n case 'pointermove':\n this.#handlePointerMove(event as PointerEvent);\n break;\n case 'focusin':\n this.#handleFocusIn(event as FocusEvent);\n break;\n case 'focusout':\n this.#handleFocusOut(event as FocusEvent);\n break;\n default:\n break;\n }\n }\n\n get openOnHover(): boolean {\n return this.hasAttribute('open-on-hover');\n }\n\n get delay(): number {\n return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n }\n\n get closeDelay(): number {\n return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n }\n\n get side(): Placement {\n return this.getAttribute('side') as Placement;\n }\n\n get sideOffset(): number {\n return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n }\n\n get #triggerElement(): HTMLElement | null {\n return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor=\"${this.id}\"]`) as HTMLElement | null;\n }\n\n #setOpen(open: boolean): void {\n if (this.#open === open) return;\n\n this.#open = open;\n\n if (open) {\n this.#transitionStatus = 'initial';\n this.#updateVisibility();\n\n this.showPopover();\n\n requestAnimationFrame(() => {\n this.#transitionStatus = 'open';\n this.#updateVisibility();\n });\n } else {\n this.#transitionStatus = 'close';\n this.#updateVisibility();\n\n const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition);\n if (transitions.length > 0) {\n Promise.all(transitions.map(t => t.finished))\n .then(() => this.hidePopover())\n .catch(() => this.hidePopover());\n } else {\n this.hidePopover();\n }\n\n this.#cleanup?.();\n this.#cleanup = null;\n }\n }\n\n #updateVisibility(): void {\n this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n globalThis.clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(event: PointerEvent): void {\n if (!this.openOnHover) return;\n\n this.#clearHoverTimeout();\n\n if (event.currentTarget === this) {\n this.#addPointerMoveListener();\n }\n\n if (this.#open) {\n return;\n }\n\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#addPointerMoveListener();\n }\n\n #addPointerMoveListener(): void {\n if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n const { signal } = this.#abortController as AbortController;\n getDocument(this).documentElement.addEventListener('pointermove', this, { signal });\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (!this.openOnHover || !this.#triggerElement) return;\n\n const close = safePolygon({ blockPointerEvents: true })({\n placement: this.side,\n elements: {\n domReference: this.#triggerElement,\n floating: this,\n },\n x: event.clientX,\n y: event.clientY,\n onClose: () => {\n getDocument(this).documentElement.removeEventListener('pointermove', this);\n\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n },\n });\n close(event);\n }\n\n #handleFocusIn(_event: FocusEvent): void {\n this.#setOpen(true);\n }\n\n #handleFocusOut(event: FocusEvent): void {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && contains(this, relatedTarget)) return;\n\n this.#setOpen(false);\n };\n}\n"],"mappings":"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"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
|
|
2
|
-
import { previewTimeDisplayStateDefinition } from "@videojs/core/store";
|
|
3
|
-
import { formatDisplayTime } from "@videojs/utils";
|
|
4
|
-
|
|
5
|
-
//#region src/elements/preview-time-display.ts
|
|
6
|
-
var PreviewTimeDisplay = class extends HTMLElement {
|
|
7
|
-
static {
|
|
8
|
-
this.shadowRootOptions = { mode: "open" };
|
|
9
|
-
}
|
|
10
|
-
static {
|
|
11
|
-
this.observedAttributes = ["show-remaining"];
|
|
12
|
-
}
|
|
13
|
-
constructor() {
|
|
14
|
-
super();
|
|
15
|
-
if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
|
|
16
|
-
}
|
|
17
|
-
get previewTime() {
|
|
18
|
-
return this._state?.previewTime ?? 0;
|
|
19
|
-
}
|
|
20
|
-
get showRemaining() {
|
|
21
|
-
return this.hasAttribute("show-remaining");
|
|
22
|
-
}
|
|
23
|
-
attributeChangedCallback(name, _oldValue, _newValue) {
|
|
24
|
-
if (name === "show-remaining" && this._state) this._update({}, this._state);
|
|
25
|
-
}
|
|
26
|
-
_update(_props, state) {
|
|
27
|
-
this._state = state;
|
|
28
|
-
/** @TODO Should this live here or elsewhere? (CJP) */
|
|
29
|
-
const timeLabel = formatDisplayTime(state.previewTime);
|
|
30
|
-
if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
function getPreviewTimeDisplayState(mediaStore) {
|
|
34
|
-
return { ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()) };
|
|
35
|
-
}
|
|
36
|
-
const getPreviewTimeDisplayProps = (_state, _element) => {
|
|
37
|
-
return {};
|
|
38
|
-
};
|
|
39
|
-
const PreviewTimeDisplayElement = toConnectedHTMLComponent(PreviewTimeDisplay, getPreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
|
|
40
|
-
|
|
41
|
-
//#endregion
|
|
42
|
-
export { PreviewTimeDisplayElement as t };
|
|
43
|
-
//# sourceMappingURL=preview-time-display-CtA58pCS.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-time-display-CtA58pCS.js","names":["getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../src/elements/preview-time-display.ts"],"sourcesContent":["import type { MediaStore, PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class PreviewTimeDisplay extends HTMLElement {\n static shadowRootOptions = {\n mode: 'open' as ShadowRootMode,\n };\n\n static observedAttributes: string[] = ['show-remaining'];\n\n _state:\n | {\n previewTime: number | undefined;\n }\n | undefined;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions);\n }\n }\n\n get previewTime(): number {\n return this._state?.previewTime ?? 0;\n }\n\n get showRemaining(): boolean {\n return this.hasAttribute('show-remaining');\n }\n\n attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n if (name === 'show-remaining' && this._state) {\n // Re-render with current state when show-remaining attribute changes\n this._update({}, this._state);\n }\n }\n\n _update(_props: any, state: any): void {\n this._state = state;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel = formatDisplayTime(state.previewTime);\n\n if (this.shadowRoot) {\n this.shadowRoot.textContent = timeLabel;\n }\n }\n}\n\nexport function getPreviewTimeDisplayState(mediaStore: MediaStore): {\n previewTime: number | undefined;\n} {\n return {\n ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),\n // Preview time display is read-only, so no request methods needed\n };\n}\n\nexport const getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}> = (_state, _element) => {\n const baseProps: Record<string, any> = {};\n return baseProps;\n};\n\nexport const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState> = toConnectedHTMLComponent(\n PreviewTimeDisplay,\n getPreviewTimeDisplayState,\n getPreviewTimeDisplayProps,\n 'PreviewTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAQxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,SAAgB,2BAA2B,YAEzC;AACA,QAAO,EACL,GAAG,kCAAkC,eAAe,WAAW,UAAU,CAAC,EAE3E;;AAGH,MAAaA,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}
|
package/dist/skins/frosted.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import "../video-provider-nSCfwA7l.js";
|
|
2
|
-
import "../media-container-ChS9lZvf.js";
|
|
3
|
-
import "../media-play-button-oq8yDlxe.js";
|
|
4
|
-
import "../media-mute-button-NVJF2EEW.js";
|
|
5
|
-
import "../media-volume-slider-DP47VLVi.js";
|
|
6
|
-
import "../media-time-slider-DvMnfYXZ.js";
|
|
7
|
-
import "../media-fullscreen-button-BgUK3lgu.js";
|
|
8
|
-
import "../media-duration-display-qvm6YX-q.js";
|
|
9
|
-
import "../media-current-time-display-Cd0rPAuj.js";
|
|
10
|
-
import "../media-preview-time-display-4YX5Rics.js";
|
|
11
|
-
import "../media-popover-BtJmPv0E.js";
|
|
12
|
-
import "../media-tooltip-BqV17mdM.js";
|
|
13
|
-
import "../index-LKrIp3Oo.js";
|
|
14
|
-
import { t as MediaSkinElement } from "../media-skin-Di3vSHvS.js";
|
|
15
|
-
|
|
16
|
-
//#region src/skins/frosted/index.d.ts
|
|
17
|
-
declare function getTemplateHTML(): string;
|
|
18
|
-
declare class MediaSkinFrostedElement extends MediaSkinElement {
|
|
19
|
-
static getTemplateHTML: () => string;
|
|
20
|
-
}
|
|
21
|
-
//#endregion
|
|
22
|
-
export { MediaSkinFrostedElement, getTemplateHTML };
|
|
23
|
-
//# sourceMappingURL=frosted.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"frosted.d.ts","names":[],"sources":["../../src/skins/frosted/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cAqGH,uBAAA,SAAgC,gBAAA;EArG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAqGhB"}
|