@videojs/html 10.0.0-beta.3 → 10.0.0-beta.4
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.css +1 -1
- package/cdn/audio-minimal.dev.js +172 -87
- package/cdn/audio-minimal.dev.js.map +1 -1
- package/cdn/audio-minimal.js +5 -5
- package/cdn/audio-minimal.js.map +1 -1
- package/cdn/audio.css +1 -1
- package/cdn/audio.dev.js +166 -81
- package/cdn/audio.dev.js.map +1 -1
- package/cdn/audio.js +5 -5
- package/cdn/audio.js.map +1 -1
- package/cdn/background.dev.js +27 -18
- package/cdn/background.dev.js.map +1 -1
- package/cdn/background.js +4 -4
- package/cdn/background.js.map +1 -1
- package/cdn/media/hls-video.dev.js +0 -1
- package/cdn/media/hls-video.dev.js.map +1 -1
- package/cdn/media/hls-video.js +1 -1
- package/cdn/media/hls-video.js.map +1 -1
- package/cdn/media/simple-hls-video.dev.js +178 -158
- package/cdn/media/simple-hls-video.dev.js.map +1 -1
- package/cdn/media/simple-hls-video.js +1 -1
- package/cdn/media/simple-hls-video.js.map +1 -1
- package/cdn/video-minimal.css +1 -1
- package/cdn/video-minimal.dev.js +196 -111
- package/cdn/video-minimal.dev.js.map +1 -1
- package/cdn/video-minimal.js +3 -3
- package/cdn/video-minimal.js.map +1 -1
- package/cdn/video.css +1 -1
- package/cdn/video.dev.js +192 -107
- package/cdn/video.dev.js.map +1 -1
- package/cdn/video.js +5 -5
- 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/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 +8 -2
- package/dist/default/define/audio/minimal-skin.js +2 -1
- package/dist/default/define/audio/minimal-skin.js.map +1 -1
- package/dist/default/define/audio/minimal-skin.tailwind.js +5 -2
- package/dist/default/define/audio/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/audio/skin.css +5 -5
- package/dist/default/define/audio/skin.js +2 -1
- package/dist/default/define/audio/skin.js.map +1 -1
- package/dist/default/define/audio/skin.tailwind.js +5 -2
- package/dist/default/define/audio/skin.tailwind.js.map +1 -1
- package/dist/default/define/shared.css +3 -0
- package/dist/default/define/video/minimal-skin.css +34 -9
- package/dist/default/define/video/minimal-skin.js +2 -1
- package/dist/default/define/video/minimal-skin.js.map +1 -1
- package/dist/default/define/video/minimal-skin.tailwind.js +4 -3
- package/dist/default/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/video/skin.css +29 -7
- package/dist/default/define/video/skin.js +2 -1
- package/dist/default/define/video/skin.js.map +1 -1
- package/dist/default/define/video/skin.tailwind.js +4 -3
- package/dist/default/define/video/skin.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js +3 -21
- package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/overlay.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/root.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/root.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +7 -4
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js +3 -21
- package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +6 -3
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/{default/tailwind/components → shared/tailwind}/icon-state.js +1 -1
- package/dist/default/skins/dist/default/shared/tailwind/icon-state.js.map +1 -0
- package/dist/{dev/skins/dist/default/default/tailwind/components → default/skins/dist/default/shared/tailwind}/tooltip-state.js +1 -1
- package/dist/default/skins/dist/default/shared/tailwind/tooltip-state.js.map +1 -0
- package/dist/default/store/container-mixin.js +22 -10
- package/dist/default/store/container-mixin.js.map +1 -1
- package/dist/default/ui/tooltip/tooltip-group-element.js +4 -1
- package/dist/default/ui/tooltip/tooltip-group-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/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 +8 -2
- package/dist/dev/define/audio/minimal-skin.d.ts.map +1 -1
- package/dist/dev/define/audio/minimal-skin.js +67 -64
- package/dist/dev/define/audio/minimal-skin.js.map +1 -1
- package/dist/dev/define/audio/minimal-skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/audio/minimal-skin.tailwind.js +71 -66
- package/dist/dev/define/audio/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/audio/skin.css +5 -5
- package/dist/dev/define/audio/skin.d.ts.map +1 -1
- package/dist/dev/define/audio/skin.js +59 -56
- package/dist/dev/define/audio/skin.js.map +1 -1
- package/dist/dev/define/audio/skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/audio/skin.tailwind.js +64 -59
- package/dist/dev/define/audio/skin.tailwind.js.map +1 -1
- package/dist/dev/define/shared.css +3 -0
- package/dist/dev/define/video/minimal-skin.css +34 -9
- package/dist/dev/define/video/minimal-skin.d.ts.map +1 -1
- package/dist/dev/define/video/minimal-skin.js +88 -85
- package/dist/dev/define/video/minimal-skin.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/video/minimal-skin.tailwind.js +98 -95
- package/dist/dev/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/skin.css +29 -7
- package/dist/dev/define/video/skin.d.ts.map +1 -1
- package/dist/dev/define/video/skin.js +82 -79
- package/dist/dev/define/video/skin.js.map +1 -1
- package/dist/dev/define/video/skin.tailwind.d.ts.map +1 -1
- package/dist/dev/define/video/skin.tailwind.js +92 -89
- package/dist/dev/define/video/skin.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js +3 -21
- package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/root.js +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/root.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js +7 -4
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js +3 -21
- package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/popup.js +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/popup.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js +6 -3
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/{default/skins/dist/default/minimal/tailwind/components → dev/skins/dist/default/shared/tailwind}/icon-state.js +1 -1
- package/dist/dev/skins/dist/default/shared/tailwind/icon-state.js.map +1 -0
- package/dist/dev/skins/dist/default/{minimal/tailwind/components → shared/tailwind}/tooltip-state.js +1 -1
- package/dist/dev/skins/dist/default/shared/tailwind/tooltip-state.js.map +1 -0
- package/dist/dev/store/container-mixin.js +22 -10
- package/dist/dev/store/container-mixin.js.map +1 -1
- package/dist/dev/ui/tooltip/tooltip-group-element.js +4 -1
- package/dist/dev/ui/tooltip/tooltip-group-element.js.map +1 -1
- package/package.json +8 -8
- package/dist/default/skins/dist/default/default/tailwind/components/icon-state.js.map +0 -1
- package/dist/default/skins/dist/default/default/tailwind/components/tooltip-state.js +0 -28
- package/dist/default/skins/dist/default/default/tailwind/components/tooltip-state.js.map +0 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js.map +0 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/tooltip-state.js +0 -28
- package/dist/default/skins/dist/default/minimal/tailwind/components/tooltip-state.js.map +0 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/icon-state.js +0 -29
- package/dist/dev/skins/dist/default/default/tailwind/components/icon-state.js.map +0 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/tooltip-state.js.map +0 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/icon-state.js +0 -29
- package/dist/dev/skins/dist/default/minimal/tailwind/components/icon-state.js.map +0 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/tooltip-state.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${root(true)}\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: icon })}\n <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-slider class=\"${slider.root}\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <span class=\"${tooltipState.captions.wrapper}\">\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.pip.wrapper}\">\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n ${renderIcon('pip', { class: icon })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.fullscreen.wrapper}\">\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n </media-tooltip>\n </span>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /*html*/ `\n <media-container class=\"${root(true)}\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group class=\"contents\">\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: icon })}\n <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-slider class=\"${slider.root}\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <span class=\"${tooltipState.captions.wrapper}\">\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.pip.wrapper}\">\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n ${renderIcon('pip', { class: icon })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n </media-tooltip>\n </span>\n\n <span class=\"${tooltipState.fullscreen.wrapper}\">\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n </media-tooltip>\n </span>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { iconState } from "../../shared/tailwind/icon-state.js";
|
|
2
|
+
import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
|
|
1
3
|
import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
|
|
2
4
|
import { controls as controls$1 } from "./components/controls.js";
|
|
3
5
|
import { error as error$1 } from "./components/error.js";
|
|
@@ -19,26 +21,6 @@ const slider = {
|
|
|
19
21
|
...slider$1,
|
|
20
22
|
track: cn(slider$1.track, "bg-black/10", "dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
|
|
21
23
|
};
|
|
22
|
-
const iconState = {
|
|
23
|
-
play: {
|
|
24
|
-
button: "group",
|
|
25
|
-
restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
|
|
26
|
-
play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
|
|
27
|
-
pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
|
|
28
|
-
},
|
|
29
|
-
mute: {
|
|
30
|
-
button: "group",
|
|
31
|
-
volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
|
|
32
|
-
volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
|
|
33
|
-
volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const tooltipState = { play: {
|
|
37
|
-
wrapper: "contents group/play-tip",
|
|
38
|
-
replay: "hidden group-has-data-ended/play-tip:block",
|
|
39
|
-
play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
|
|
40
|
-
pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
|
|
41
|
-
} };
|
|
42
24
|
const popup = {
|
|
43
25
|
...popup$1,
|
|
44
26
|
popover: cn(surface, popup$1.popover),
|
|
@@ -54,5 +36,5 @@ const error = {
|
|
|
54
36
|
};
|
|
55
37
|
|
|
56
38
|
//#endregion
|
|
57
|
-
export { controls,
|
|
39
|
+
export { controls, popup, slider };
|
|
58
40
|
//# sourceMappingURL=audio.tailwind.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-brightness-98 backdrop-saturate-120 backdrop-blur\", \"ring-white/5 shadow-black/15\", \"after:ring-black/5\");\nconst controls = cn(controls$1, surface, \"dark:text-white\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst
|
|
1
|
+
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-brightness-98 backdrop-saturate-120 backdrop-blur\", \"ring-white/5 shadow-black/15\", \"after:ring-black/5\");\nconst controls = cn(controls$1, surface, \"dark:text-white\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,UAAU,GAAG,WAAW,gCAAgC,8DAA8D,gCAAgC,qBAAqB;AACjL,MAAM,WAAW,GAAG,YAAY,SAAS,kBAAkB;AAC3D,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,6DAA6D;CACtG;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@videojs/utils/style";
|
|
2
2
|
|
|
3
3
|
//#region ../skins/dist/default/default/tailwind/components/overlay.js
|
|
4
|
-
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-
|
|
4
|
+
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
export { overlay };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-
|
|
1
|
+
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,4CAA4C,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@videojs/utils/style";
|
|
2
2
|
|
|
3
3
|
//#region ../skins/dist/default/default/tailwind/components/root.js
|
|
4
|
-
const root = cn("block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,2rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]"
|
|
4
|
+
const root = cn("block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,2rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
export { root };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/root.ts\nconst root = cn(\"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,2rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\"
|
|
1
|
+
{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/root.ts\nconst root = cn(\"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,2rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8DAA8D,wCAAwC,uHAAuH,wBAAwB,6BAA6B,gDAAgD"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { iconState } from "../../shared/tailwind/icon-state.js";
|
|
2
|
+
import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
|
|
1
3
|
import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
|
|
2
4
|
import { controls as controls$1 } from "./components/controls.js";
|
|
3
5
|
import { error as error$1 } from "./components/error.js";
|
|
@@ -10,9 +12,7 @@ import { playbackRate } from "./components/playback-rate.js";
|
|
|
10
12
|
import { root as root$1 } from "./components/root.js";
|
|
11
13
|
import { seek } from "./components/seek.js";
|
|
12
14
|
import { time } from "./components/time.js";
|
|
13
|
-
import { iconState } from "./components/icon-state.js";
|
|
14
15
|
import { overlay } from "./components/overlay.js";
|
|
15
|
-
import { tooltipState } from "./components/tooltip-state.js";
|
|
16
16
|
import { cn } from "@videojs/utils/style";
|
|
17
17
|
|
|
18
18
|
//#region ../skins/dist/default/default/tailwind/video.tailwind.js
|
|
@@ -29,8 +29,11 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
|
|
|
29
29
|
"[&_video::-webkit-media-text-track-container]:z-1",
|
|
30
30
|
"[&_video::-webkit-media-text-track-container]:font-[inherit]",
|
|
31
31
|
"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
|
|
32
|
-
] : [], "[&:fullscreen]:rounded-none"
|
|
33
|
-
|
|
32
|
+
] : [], "[&:fullscreen]:rounded-none", {
|
|
33
|
+
"[&:fullscreen_video]:object-contain": !isShadowDOM,
|
|
34
|
+
"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
|
|
35
|
+
}, "[&:fullscreen>img]:object-contain");
|
|
36
|
+
const surface = cn(surface$1, "bg-white/10", "backdrop-saturate-150 backdrop-blur-lg", "ring-white/5 shadow-black/10", "after:ring-black/15", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-black/90");
|
|
34
37
|
const controls = cn(controls$1, surface, "absolute bottom-3 inset-x-3", "text-white z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-visible:pointer-events-none not-data-visible:blur-sm", "not-data-visible:scale-90 not-data-visible:opacity-0", "not-data-visible:delay-500 not-data-visible:duration-300", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100");
|
|
35
38
|
const slider = {
|
|
36
39
|
...slider$1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-white/5 shadow-black/10\", \"after:ring-black/15\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"absolute bottom-3 inset-x-3\", \"text-white z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,gJAAgJ;CAChJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,UAAU,GAAG,WAAW,eAAe,0CAA0C,gCAAgC,uBAAuB,6DAA6D,4BAA4B;AACvO,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,mBAAmB,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,2CAA2C;AACpiB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,mDAAmD;CAC7E;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { controls as controls$1 } from "./components/controls.js";
|
|
2
2
|
import { popup as popup$1 } from "./components/popup.js";
|
|
3
3
|
import { root as root$1 } from "./components/root.js";
|
|
4
|
+
import { iconState } from "../../shared/tailwind/icon-state.js";
|
|
5
|
+
import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
|
|
4
6
|
import { bufferingIndicator } from "./components/buffering.js";
|
|
5
7
|
import { button } from "./components/button.js";
|
|
6
8
|
import { buttonGroup } from "./components/button-group.js";
|
|
@@ -13,31 +15,11 @@ import { cn } from "@videojs/utils/style";
|
|
|
13
15
|
//#region ../skins/dist/default/minimal/tailwind/audio.tailwind.js
|
|
14
16
|
const root = cn(root$1, "[--media-controls-background-color:oklch(1_0_0)]", "[--media-controls-border-color:oklch(0_0_0/0.1)]", "[--media-controls-text-color:oklch(0_0_0)]", "dark:[--media-controls-background-color:oklch(0_0_0)]", "dark:[--media-controls-border-color:oklch(1_0_0/0.1)]", "dark:[--media-controls-text-color:oklch(1_0_0)]");
|
|
15
17
|
const controls = cn(controls$1, "gap-2 p-1.5", "rounded-(--media-border-radius,0.75rem)", "bg-(--media-controls-background-color)", "text-(--media-controls-text-color)", "backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]", "ring-1 ring-(color:--media-controls-border-color)");
|
|
16
|
-
const tooltipState = { play: {
|
|
17
|
-
wrapper: "contents group/play-tip",
|
|
18
|
-
replay: "hidden group-has-data-ended/play-tip:block",
|
|
19
|
-
play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
|
|
20
|
-
pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
|
|
21
|
-
} };
|
|
22
18
|
const popup = {
|
|
23
19
|
...popup$1,
|
|
24
20
|
volume: cn("py-2 pr-0 pl-16", "bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent", "[--media-popover-side-offset:0.75rem]")
|
|
25
21
|
};
|
|
26
|
-
const iconState = {
|
|
27
|
-
play: {
|
|
28
|
-
button: "group",
|
|
29
|
-
restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
|
|
30
|
-
play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
|
|
31
|
-
pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
|
|
32
|
-
},
|
|
33
|
-
mute: {
|
|
34
|
-
button: "group",
|
|
35
|
-
volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
|
|
36
|
-
volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
|
|
37
|
-
volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
22
|
|
|
41
23
|
//#endregion
|
|
42
|
-
export { controls,
|
|
24
|
+
export { controls, popup, root };
|
|
43
25
|
//# sourceMappingURL=audio.tailwind.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-controls-background-color:oklch(1_0_0)]\", \"[--media-controls-border-color:oklch(0_0_0/0.1)]\", \"[--media-controls-text-color:oklch(0_0_0)]\", \"dark:[--media-controls-background-color:oklch(0_0_0)]\", \"dark:[--media-controls-border-color:oklch(1_0_0/0.1)]\", \"dark:[--media-controls-text-color:oklch(1_0_0)]\");\nconst controls = cn(controls$1, \"gap-2 p-1.5\", \"rounded-(--media-border-radius,0.75rem)\", \"bg-(--media-controls-background-color)\", \"text-(--media-controls-text-color)\", \"backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]\", \"ring-1 ring-(color:--media-controls-border-color)\");\nconst
|
|
1
|
+
{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-controls-background-color:oklch(1_0_0)]\", \"[--media-controls-border-color:oklch(0_0_0/0.1)]\", \"[--media-controls-text-color:oklch(0_0_0)]\", \"dark:[--media-controls-background-color:oklch(0_0_0)]\", \"dark:[--media-controls-border-color:oklch(1_0_0/0.1)]\", \"dark:[--media-controls-text-color:oklch(1_0_0)]\");\nconst controls = cn(controls$1, \"gap-2 p-1.5\", \"rounded-(--media-border-radius,0.75rem)\", \"bg-(--media-controls-background-color)\", \"text-(--media-controls-text-color)\", \"backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]\", \"ring-1 ring-(color:--media-controls-border-color)\");\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"py-2 pr-0 pl-16\", \"bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent\", \"[--media-popover-side-offset:0.75rem]\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,GAAG,QAAQ,oDAAoD,oDAAoD,8CAA8C,yDAAyD,yDAAyD,kDAAkD;AAClV,MAAM,WAAW,GAAG,YAAY,eAAe,2CAA2C,0CAA0C,sCAAsC,oEAAoE,oDAAoD;AAClS,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,mBAAmB,oGAAoG,wCAAwC;CAC1K"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@videojs/utils/style";
|
|
2
2
|
|
|
3
3
|
//#region ../skins/dist/default/minimal/tailwind/components/overlay.js
|
|
4
|
-
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-
|
|
4
|
+
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
export { overlay };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-
|
|
1
|
+
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B"}
|
|
@@ -3,7 +3,7 @@ import { cn } from "@videojs/utils/style";
|
|
|
3
3
|
//#region ../skins/dist/default/minimal/tailwind/components/popup.js
|
|
4
4
|
const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left");
|
|
5
5
|
const popup = {
|
|
6
|
-
tooltip: cn(base, "px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-
|
|
6
|
+
tooltip: cn(base, "px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-lg backdrop-saturate-150 text-[0.75rem] whitespace-nowrap", "[--media-tooltip-side-offset:0.5rem]"),
|
|
7
7
|
volume: cn(base, "py-2.5 px-1 rounded-full")
|
|
8
8
|
};
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\ttooltip: cn(base, \"px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-
|
|
1
|
+
{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\ttooltip: cn(base, \"px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-lg backdrop-saturate-150 text-[0.75rem] whitespace-nowrap\", \"[--media-tooltip-side-offset:0.5rem]\"),\n\tvolume: cn(base, \"py-2.5 px-1 rounded-full\")\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,yFAAyF,mFAAmF,2BAA2B,0HAA0H;AAC3b,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,sIAAsI,uCAAuC;CAC/L,QAAQ,GAAG,MAAM,2BAA2B;CAC5C"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { controls as controls$1 } from "./components/controls.js";
|
|
2
2
|
import { popup as popup$1 } from "./components/popup.js";
|
|
3
3
|
import { root as root$1 } from "./components/root.js";
|
|
4
|
+
import { iconState } from "../../shared/tailwind/icon-state.js";
|
|
5
|
+
import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
|
|
4
6
|
import { bufferingIndicator } from "./components/buffering.js";
|
|
5
7
|
import { button } from "./components/button.js";
|
|
6
8
|
import { buttonGroup } from "./components/button-group.js";
|
|
@@ -8,9 +10,7 @@ import { icon, iconContainer, iconFlipped } from "./components/icon.js";
|
|
|
8
10
|
import { seek } from "./components/seek.js";
|
|
9
11
|
import { slider as slider$1 } from "./components/slider.js";
|
|
10
12
|
import { time } from "./components/time.js";
|
|
11
|
-
import { iconState } from "./components/icon-state.js";
|
|
12
13
|
import { overlay } from "./components/overlay.js";
|
|
13
|
-
import { tooltipState } from "./components/tooltip-state.js";
|
|
14
14
|
import { cn } from "@videojs/utils/style";
|
|
15
15
|
|
|
16
16
|
//#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
|
|
@@ -27,7 +27,10 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
|
|
|
27
27
|
"[&_video::-webkit-media-text-track-container]:z-1",
|
|
28
28
|
"[&_video::-webkit-media-text-track-container]:font-[inherit]",
|
|
29
29
|
"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
|
|
30
|
-
] : [], "[&:fullscreen]:rounded-none"
|
|
30
|
+
] : [], "[&:fullscreen]:rounded-none", {
|
|
31
|
+
"[&:fullscreen_video]:object-contain": !isShadowDOM,
|
|
32
|
+
"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
|
|
33
|
+
}, "[&:fullscreen>img]:object-contain");
|
|
31
34
|
const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
|
|
32
35
|
const slider = {
|
|
33
36
|
...slider$1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport {
|
|
1
|
+
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC3qB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/tooltip-state.js"],"sourcesContent":["//#region src/shared/tailwind/tooltip-state.ts\nconst tooltipState = {\n\tplay: {\n\t\twrapper: \"contents group/play-tip\",\n\t\treplay: \"hidden group-has-data-ended/play-tip:block\",\n\t\tplay: \"hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block\",\n\t\tpause: \"hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block\"\n\t},\n\tfullscreen: {\n\t\twrapper: \"contents group/fullscreen-tip\",\n\t\tenter: \"hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block\",\n\t\texit: \"hidden group-has-data-fullscreen/fullscreen-tip:block\"\n\t},\n\tcaptions: {\n\t\twrapper: \"contents group/captions-tip\",\n\t\tenable: \"hidden group-[:not(:has([data-active]))]/captions-tip:block\",\n\t\tdisable: \"hidden group-has-data-active/captions-tip:block\"\n\t},\n\tpip: {\n\t\twrapper: \"contents group/pip-tip\",\n\t\tenter: \"hidden group-[:not(:has([data-pip]))]/pip-tip:block\",\n\t\texit: \"hidden group-has-data-pip/pip-tip:block\"\n\t}\n};\n\n//#endregion\nexport { tooltipState };\n//# sourceMappingURL=tooltip-state.js.map"],"mappings":";AACA,MAAM,eAAe;CACpB,MAAM;EACL,SAAS;EACT,QAAQ;EACR,MAAM;EACN,OAAO;EACP;CACD,YAAY;EACX,SAAS;EACT,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,SAAS;EACT,QAAQ;EACR,SAAS;EACT;CACD,KAAK;EACJ,SAAS;EACT,OAAO;EACP,MAAM;EACN;CACD"}
|
|
@@ -30,13 +30,13 @@ function createContainerMixin(context) {
|
|
|
30
30
|
connectedCallback() {
|
|
31
31
|
super.connectedCallback();
|
|
32
32
|
this.#observer = new MutationObserver((records) => {
|
|
33
|
-
if (records.some(
|
|
33
|
+
if (records.some(hasMediaElement)) this.#attachMedia();
|
|
34
34
|
});
|
|
35
35
|
this.#observer.observe(this, {
|
|
36
36
|
childList: true,
|
|
37
37
|
subtree: true,
|
|
38
38
|
attributes: true,
|
|
39
|
-
attributeFilter: ["
|
|
39
|
+
attributeFilter: ["name"]
|
|
40
40
|
});
|
|
41
41
|
this.addEventListener("slotchange", this.#onSlotChange);
|
|
42
42
|
this.#attachMedia();
|
|
@@ -54,18 +54,24 @@ function createContainerMixin(context) {
|
|
|
54
54
|
#getSlottedMedia() {
|
|
55
55
|
const slot = this.querySelector("slot[name=\"media\"]");
|
|
56
56
|
if (!slot) return null;
|
|
57
|
-
for (const el of slot.assignedElements({ flatten: true })) if (el
|
|
57
|
+
for (const el of slot.assignedElements({ flatten: true })) if (isMediaElement(el)) return el;
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
#findMediaElement() {
|
|
61
|
+
const media = Array.from(this.children).find(isMediaElement);
|
|
62
|
+
if (media) return media;
|
|
58
63
|
return null;
|
|
59
64
|
}
|
|
60
65
|
#attachMedia() {
|
|
61
66
|
const store = this.#contextStore ?? this.store;
|
|
62
67
|
if (!store) return;
|
|
63
|
-
const media = this.querySelector("video, audio
|
|
68
|
+
const media = this.querySelector("video, audio") ?? this.#findMediaElement() ?? this.#getSlottedMedia();
|
|
64
69
|
if (!media) {
|
|
65
70
|
this.#detach();
|
|
66
71
|
this.#detach = noop;
|
|
67
72
|
return;
|
|
68
73
|
}
|
|
74
|
+
if (isCustomMediaElement(media)) globalThis.customElements?.upgrade?.(media);
|
|
69
75
|
const target = {
|
|
70
76
|
media,
|
|
71
77
|
container: this
|
|
@@ -80,13 +86,19 @@ function createContainerMixin(context) {
|
|
|
80
86
|
return PlayerContainerElement;
|
|
81
87
|
};
|
|
82
88
|
}
|
|
83
|
-
function
|
|
84
|
-
return node instanceof HTMLMediaElement || node
|
|
89
|
+
function isMediaElement(node) {
|
|
90
|
+
return node instanceof HTMLMediaElement || isCustomMediaElement(node);
|
|
91
|
+
}
|
|
92
|
+
function isCustomMediaElement(node) {
|
|
93
|
+
return node instanceof HTMLElement && (node.localName.endsWith("-audio") || node.localName.endsWith("-video"));
|
|
94
|
+
}
|
|
95
|
+
function isMediaSlotElement(node) {
|
|
96
|
+
return node instanceof HTMLSlotElement && node.name === "media";
|
|
85
97
|
}
|
|
86
|
-
function
|
|
87
|
-
if (record.
|
|
88
|
-
for (const node of record.addedNodes) if (
|
|
89
|
-
for (const node of record.removedNodes) if (
|
|
98
|
+
function hasMediaElement(record) {
|
|
99
|
+
if (isMediaSlotElement(record.target)) return true;
|
|
100
|
+
for (const node of record.addedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
|
|
101
|
+
for (const node of record.removedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
|
|
90
102
|
return false;
|
|
91
103
|
}
|
|
92
104
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#onSlotChange","#detach","#getSlottedMedia"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and auto-attaches media elements.\n *\n * @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n #detach = noop;\n #observer: MutationObserver | null = null;\n #contextStore: Store | null = null;\n\n constructor(...args: any[]) {\n super(...args);\n\n // Created in the constructor body (after all field initializers) so\n // that #contextStore's private slot exists if the callback fires\n // synchronously — which happens when the element is already connected.\n // The host's controller list keeps the consumer alive; no field needed.\n new ContextConsumer(this, {\n context,\n callback: (value) => {\n this.#contextStore = value ?? null;\n this.#attachMedia();\n },\n subscribe: true,\n });\n }\n\n get store(): Store | null {\n return this.#contextStore;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#observer = new MutationObserver((records) => {\n if (records.some(
|
|
1
|
+
{"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#onSlotChange","#detach","#findMediaElement","#getSlottedMedia"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and auto-attaches media elements.\n *\n * @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n #detach = noop;\n #observer: MutationObserver | null = null;\n #contextStore: Store | null = null;\n\n constructor(...args: any[]) {\n super(...args);\n\n // Created in the constructor body (after all field initializers) so\n // that #contextStore's private slot exists if the callback fires\n // synchronously — which happens when the element is already connected.\n // The host's controller list keeps the consumer alive; no field needed.\n new ContextConsumer(this, {\n context,\n callback: (value) => {\n this.#contextStore = value ?? null;\n this.#attachMedia();\n },\n subscribe: true,\n });\n }\n\n get store(): Store | null {\n return this.#contextStore;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#observer = new MutationObserver((records) => {\n if (records.some(hasMediaElement)) this.#attachMedia();\n });\n\n this.#observer.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['name'],\n });\n\n // Slotted media elements don't appear in the container's subtree,\n // so listen for slot reassignments to pick them up.\n this.addEventListener('slotchange', this.#onSlotChange);\n\n this.#attachMedia();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#observer?.disconnect();\n this.#observer = null;\n this.removeEventListener('slotchange', this.#onSlotChange);\n this.#detach();\n }\n\n #onSlotChange = () => {\n this.#attachMedia();\n };\n\n #getSlottedMedia(): HTMLMediaElement | null {\n const slot = this.querySelector<HTMLSlotElement>('slot[name=\"media\"]');\n if (!slot) return null;\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (isMediaElement(el)) return el as HTMLMediaElement;\n }\n\n return null;\n }\n\n #findMediaElement(): HTMLMediaElement | null {\n const media = Array.from(this.children).find(isMediaElement);\n if (media) return media as HTMLMediaElement;\n return null;\n }\n\n #attachMedia() {\n // Prefer the cached context value; fall back to `this.store` which\n // ProviderMixin overrides when both mixins are applied to one element.\n const store = this.#contextStore ?? this.store;\n if (!store) return;\n\n const media =\n this.querySelector<HTMLMediaElement>('video, audio') ?? this.#findMediaElement() ?? this.#getSlottedMedia();\n\n if (!media) {\n this.#detach();\n this.#detach = noop;\n return;\n }\n\n if (isCustomMediaElement(media)) {\n globalThis.customElements?.upgrade?.(media);\n }\n\n const target: PlayerTarget = {\n media,\n container: this,\n };\n\n const hasMediaChanged = store.target?.media !== target.media,\n hasContainerChanged = store.target?.container !== target.container;\n\n if (hasMediaChanged || hasContainerChanged) {\n this.#detach();\n this.#detach = store.attach(target);\n }\n }\n }\n\n return PlayerContainerElement;\n };\n}\n\nfunction isMediaElement(node: Node): boolean {\n return node instanceof HTMLMediaElement || isCustomMediaElement(node);\n}\n\nfunction isCustomMediaElement(node: Node): boolean {\n return node instanceof HTMLElement && (node.localName.endsWith('-audio') || node.localName.endsWith('-video'));\n}\n\nfunction isMediaSlotElement(node: Node): boolean {\n return node instanceof HTMLSlotElement && node.name === 'media';\n}\n\nfunction hasMediaElement(record: MutationRecord): boolean {\n if (isMediaSlotElement(record.target)) return true;\n\n for (const node of record.addedNodes) {\n if (isMediaElement(node) || isMediaSlotElement(node)) return true;\n }\n\n for (const node of record.removedNodes) {\n if (isMediaElement(node) || isMediaSlotElement(node)) return true;\n }\n\n return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GACrC,gBAA8B;GAE9B,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAMd,QAAI,gBAAgB,MAAM;KACxB;KACA,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;AAC9B,YAAKC,aAAc;;KAErB,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKE,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,gBAAgB,CAAE,OAAKD,aAAc;MACtD;AAEF,UAAKC,SAAU,QAAQ,MAAM;KAC3B,WAAW;KACX,SAAS;KACT,YAAY;KACZ,iBAAiB,CAAC,OAAO;KAC1B,CAAC;AAIF,SAAK,iBAAiB,cAAc,MAAKC,aAAc;AAEvD,UAAKF,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,SAAK,oBAAoB,cAAc,MAAKC,aAAc;AAC1D,UAAKC,QAAS;;GAGhB,sBAAsB;AACpB,UAAKH,aAAc;;GAGrB,mBAA4C;IAC1C,MAAM,OAAO,KAAK,cAA+B,uBAAqB;AACtE,QAAI,CAAC,KAAM,QAAO;AAElB,SAAK,MAAM,MAAM,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CACvD,KAAI,eAAe,GAAG,CAAE,QAAO;AAGjC,WAAO;;GAGT,oBAA6C;IAC3C,MAAM,QAAQ,MAAM,KAAK,KAAK,SAAS,CAAC,KAAK,eAAe;AAC5D,QAAI,MAAO,QAAO;AAClB,WAAO;;GAGT,eAAe;IAGb,MAAM,QAAQ,MAAKD,gBAAiB,KAAK;AACzC,QAAI,CAAC,MAAO;IAEZ,MAAM,QACJ,KAAK,cAAgC,eAAe,IAAI,MAAKK,kBAAmB,IAAI,MAAKC,iBAAkB;AAE7G,QAAI,CAAC,OAAO;AACV,WAAKF,QAAS;AACd,WAAKA,SAAU;AACf;;AAGF,QAAI,qBAAqB,MAAM,CAC7B,YAAW,gBAAgB,UAAU,MAAM;IAG7C,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,eAAe,MAAqB;AAC3C,QAAO,gBAAgB,oBAAoB,qBAAqB,KAAK;;AAGvE,SAAS,qBAAqB,MAAqB;AACjD,QAAO,gBAAgB,gBAAgB,KAAK,UAAU,SAAS,SAAS,IAAI,KAAK,UAAU,SAAS,SAAS;;AAG/G,SAAS,mBAAmB,MAAqB;AAC/C,QAAO,gBAAgB,mBAAmB,KAAK,SAAS;;AAG1D,SAAS,gBAAgB,QAAiC;AACxD,KAAI,mBAAmB,OAAO,OAAO,CAAE,QAAO;AAE9C,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,eAAe,KAAK,IAAI,mBAAmB,KAAK,CAAE,QAAO;AAG/D,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,eAAe,KAAK,IAAI,mBAAmB,KAAK,CAAE,QAAO;AAG/D,QAAO"}
|
|
@@ -25,7 +25,10 @@ var TooltipGroupElement = class extends MediaElement {
|
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
#core = new TooltipGroupCore();
|
|
28
|
-
#provider = new ContextProvider(this, {
|
|
28
|
+
#provider = new ContextProvider(this, {
|
|
29
|
+
context: tooltipGroupContext,
|
|
30
|
+
initialValue: this.#core
|
|
31
|
+
});
|
|
29
32
|
update(_changed) {
|
|
30
33
|
super.update(_changed);
|
|
31
34
|
this.#core.setProps(this);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n static readonly tagName = 'media-tooltip-group';\n\n static override properties = {\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n timeout: { type: Number },\n } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n delay = TooltipGroupCore.defaultProps.delay;\n closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n timeout = TooltipGroupCore.defaultProps.timeout;\n\n readonly #core = new TooltipGroupCore();\n readonly #provider = new ContextProvider(this, { context: tooltipGroupContext });\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n this.#core.setProps(this);\n this.#provider.setValue(this.#core);\n }\n}\n"],"mappings":";;;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM
|
|
1
|
+
{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n static readonly tagName = 'media-tooltip-group';\n\n static override properties = {\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n timeout: { type: Number },\n } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n delay = TooltipGroupCore.defaultProps.delay;\n closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n timeout = TooltipGroupCore.defaultProps.timeout;\n\n readonly #core = new TooltipGroupCore();\n readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n this.#core.setProps(this);\n this.#provider.setValue(this.#core);\n }\n}\n"],"mappings":";;;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAqB,cAAc,MAAKD;EAAO,CAAC;CAE1G,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAKA,KAAM,SAAS,KAAK;AACzB,QAAKC,SAAU,SAAS,MAAKD,KAAM"}
|