@videojs/html 10.0.0-beta.2 → 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 +197 -126
- 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 +191 -120
- 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 +40 -25
- 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 +220 -161
- package/cdn/video-minimal.dev.js.map +1 -1
- package/cdn/video-minimal.js +5 -5
- package/cdn/video-minimal.js.map +1 -1
- package/cdn/video.css +1 -1
- package/cdn/video.dev.js +217 -158
- package/cdn/video.dev.js.map +1 -1
- package/cdn/video.js +4 -4
- 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/base.js +6 -0
- package/dist/default/_virtual/inline-css_src/define/base.js.map +1 -0
- 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 +7 -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/base.css +25 -0
- package/dist/default/define/shared.css +3 -0
- package/dist/default/define/skin-mixin.js +10 -18
- package/dist/default/define/skin-mixin.js.map +1 -1
- package/dist/default/define/video/minimal-skin.css +35 -73
- 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 -4
- package/dist/default/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/default/define/video/skin.css +32 -71
- 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 +5 -4
- 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 +8 -5
- 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 -22
- 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 -4
- 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/base.js +6 -0
- package/dist/dev/_virtual/inline-css_src/define/base.js.map +1 -0
- 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 +7 -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/base.css +25 -0
- package/dist/dev/define/shared.css +3 -0
- package/dist/dev/define/skin-mixin.d.ts +2 -2
- package/dist/dev/define/skin-mixin.d.ts.map +1 -1
- package/dist/dev/define/skin-mixin.js +10 -32
- package/dist/dev/define/skin-mixin.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.css +35 -73
- package/dist/dev/define/video/minimal-skin.d.ts.map +1 -1
- package/dist/dev/define/video/minimal-skin.js +92 -101
- 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 -108
- package/dist/dev/define/video/minimal-skin.tailwind.js.map +1 -1
- package/dist/dev/define/video/skin.css +32 -71
- package/dist/dev/define/video/skin.d.ts.map +1 -1
- package/dist/dev/define/video/skin.js +82 -91
- 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 +93 -102
- 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 +8 -5
- 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 -22
- 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 -4
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/{default/tailwind/components → shared/tailwind}/icon-state.js +1 -1
- package/dist/dev/skins/dist/default/shared/tailwind/icon-state.js.map +1 -0
- package/dist/{default/skins/dist/default/minimal/tailwind/components → dev/skins/dist/default/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 +7 -7
- 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/error.js +0 -15
- package/dist/default/skins/dist/default/minimal/tailwind/components/error.js.map +0 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js +0 -29
- 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.map +0 -1
- 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/error.js +0 -15
- package/dist/dev/skins/dist/default/minimal/tailwind/components/error.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 +0 -28
- package/dist/dev/skins/dist/default/minimal/tailwind/components/tooltip-state.js.map +0 -1
|
@@ -9,6 +9,7 @@ import "../ui/seek-button.js";
|
|
|
9
9
|
import "../ui/time.js";
|
|
10
10
|
import "../ui/time-slider.js";
|
|
11
11
|
import "../ui/tooltip.js";
|
|
12
|
+
import "../ui/tooltip-group.js";
|
|
12
13
|
import "../ui/volume-slider.js";
|
|
13
14
|
import minimal_skin_default from "../../_virtual/inline-css_src/define/audio/minimal-skin.js";
|
|
14
15
|
import { ReactiveElement } from "@videojs/element";
|
|
@@ -16,7 +17,7 @@ import { ReactiveElement } from "@videojs/element";
|
|
|
16
17
|
//#region src/define/audio/minimal-skin.ts
|
|
17
18
|
const SEEK_TIME = 10;
|
|
18
19
|
function getTemplateHTML() {
|
|
19
|
-
return `<media-container class="media-minimal-skin media-minimal-skin--audio"><slot name="media"></slot><div class="media-controls"><
|
|
20
|
+
return `<media-container class="media-minimal-skin media-minimal-skin--audio"><slot name="media"></slot><div class="media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time-group class="media-time"><media-time type="current" class="media-time__value media-time__value--current"></media-time><media-time-separator class="media-time__separator"></media-time-separator><media-time type="duration" class="media-time__value media-time__value--duration"></media-time></media-time-group><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
20
21
|
}
|
|
21
22
|
var MinimalAudioSkinElement = class extends SkinMixin(ReactiveElement) {
|
|
22
23
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-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=\"media-minimal-skin media-minimal-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-controls\">\n <
|
|
1
|
+
{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-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=\"media-minimal-skin media-minimal-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n <media-time-separator class=\"media-time__separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n </media-time-group>\n\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\">\n </media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,6RAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,ynCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;;;iBAIM;;;gBACT,aAAa,qBAAA;;;yBACD;;;AAG3B,eAAe,OAAC,wBAA6B,SAAU,wBAAqB"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { SkinMixin } from "../skin-mixin.js";
|
|
2
2
|
import { renderIcon } from "../../icons/dist/render/minimal/index.js";
|
|
3
|
+
import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
|
|
4
|
+
import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
|
|
3
5
|
import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
|
|
4
6
|
import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
|
|
5
7
|
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
|
|
@@ -15,16 +17,17 @@ import "../ui/seek-button.js";
|
|
|
15
17
|
import "../ui/time.js";
|
|
16
18
|
import "../ui/time-slider.js";
|
|
17
19
|
import "../ui/tooltip.js";
|
|
20
|
+
import "../ui/tooltip-group.js";
|
|
18
21
|
import "../ui/volume-slider.js";
|
|
19
22
|
import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
|
|
20
|
-
import { controls,
|
|
23
|
+
import { controls, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
|
|
21
24
|
import { ReactiveElement } from "@videojs/element";
|
|
22
25
|
import { cn } from "@videojs/utils/style";
|
|
23
26
|
|
|
24
27
|
//#region src/define/audio/minimal-skin.tailwind.ts
|
|
25
28
|
const SEEK_TIME = 10;
|
|
26
29
|
function getTemplateHTML() {
|
|
27
|
-
return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><
|
|
30
|
+
return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><media-tooltip-group class="contents"><div class="${buttonGroup}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-time-slider class="${slider.root}"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider></div><div class="${buttonGroup}"><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"><media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
|
|
28
31
|
}
|
|
29
32
|
var MinimalAudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
|
|
30
33
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/minimal/tailwind/audio.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/mute-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}\">\n <slot name=\"media\"></slot>\n\n <div class=\"${controls}\">\n <
|
|
1
|
+
{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/minimal/tailwind/audio.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/mute-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}\">\n <slot name=\"media\"></slot>\n\n <div class=\"${controls}\">\n <media-tooltip-group class=\"contents\">\n <div class=\"${buttonGroup}\">\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 </div>\n\n <div class=\"${time.controls}\">\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-separator class=\"${time.separator}\"></media-time-separator>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\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 </div>\n\n <div class=\"${buttonGroup}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n </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=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" 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=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinTailwindElement.tagName]: MinimalAudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,0CAAA,SAAA,sDAAA,YAAA,iBAAA,aAAA,KAAA,QAAA,wDAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,iBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,SAAA,6BAAA,KAAA,MAAA,sCAAA,KAAA,QAAA,8CAAA,KAAA,UAAA,8DAAA,KAAA,SAAA,8DAAA,OAAA,KAAA,+BAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,+DAAA,YAAA,0EAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,+HAAA,GAAA,MAAA,OAAA,CAAA,gCAAA,OAAA,KAAA,+EAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,OAAA,MAAA,KAAA;;;;iBAIU;;;yBACL;;;AAGvB,eAAe,OAAM,gCAA6B,SAAS,gCAAoC"}
|
|
@@ -95,6 +95,8 @@
|
|
|
95
95
|
position: relative;
|
|
96
96
|
isolation: isolate;
|
|
97
97
|
display: block;
|
|
98
|
+
height: 100%;
|
|
99
|
+
width: 100%;
|
|
98
100
|
container: media-root / inline-size;
|
|
99
101
|
border-radius: var(--media-border-radius, 2rem);
|
|
100
102
|
font-family:
|
|
@@ -108,10 +110,6 @@
|
|
|
108
110
|
letter-spacing: normal;
|
|
109
111
|
-webkit-font-smoothing: auto;
|
|
110
112
|
-moz-osx-font-smoothing: auto;
|
|
111
|
-
|
|
112
|
-
&:fullscreen {
|
|
113
|
-
border-radius: 0;
|
|
114
|
-
}
|
|
115
113
|
}
|
|
116
114
|
|
|
117
115
|
/* ==========================================================================
|
|
@@ -629,7 +627,7 @@
|
|
|
629
627
|
--media-surface-inner-border-color: oklch(1 0 0 / 0.1);
|
|
630
628
|
--media-surface-outer-border-color: oklch(0 0 0 / 0.05);
|
|
631
629
|
--media-surface-shadow-color: oklch(0 0 0 / 0.15);
|
|
632
|
-
--media-surface-backdrop-filter: blur(
|
|
630
|
+
--media-surface-backdrop-filter: blur(16px) saturate(1.5);
|
|
633
631
|
|
|
634
632
|
@media (prefers-color-scheme: dark) {
|
|
635
633
|
--media-border-color: oklch(1 0 0 / 0.1);
|
|
@@ -659,3 +657,7 @@
|
|
|
659
657
|
}
|
|
660
658
|
}
|
|
661
659
|
|
|
660
|
+
media-tooltip-group {
|
|
661
|
+
display: contents;
|
|
662
|
+
}
|
|
663
|
+
|
|
@@ -8,6 +8,7 @@ import "../ui/seek-button.js";
|
|
|
8
8
|
import "../ui/time.js";
|
|
9
9
|
import "../ui/time-slider.js";
|
|
10
10
|
import "../ui/tooltip.js";
|
|
11
|
+
import "../ui/tooltip-group.js";
|
|
11
12
|
import "../ui/volume-slider.js";
|
|
12
13
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
13
14
|
import skin_default from "../../_virtual/inline-css_src/define/audio/skin.js";
|
|
@@ -16,7 +17,7 @@ import { ReactiveElement } from "@videojs/element";
|
|
|
16
17
|
//#region src/define/audio/skin.ts
|
|
17
18
|
const SEEK_TIME = 10;
|
|
18
19
|
function getTemplateHTML() {
|
|
19
|
-
return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><div class="media-surface media-controls"><media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="media-time"><media-time type="current" class="media-time__value"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time__value"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-container>`;
|
|
20
|
+
return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><div class="media-surface media-controls"><media-tooltip-group><media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="media-time"><media-time type="current" class="media-time__value"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time__value"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></media-tooltip-group></div></media-container>`;
|
|
20
21
|
}
|
|
21
22
|
var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
|
|
22
23
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-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=\"media-default-skin media-default-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-surface media-controls\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n
|
|
1
|
+
{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-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=\"media-default-skin media-default-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n <span class=\"media-icon__label\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value\"></media-time>\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2QAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,w7BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;;;iBAIM;;;gBACT,aAAa,aAAA;;;yBACN;;;AAGtB,eAAc,OAAA,iBAAsB,SAAQ,iBAAqB"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { SkinMixin } from "../skin-mixin.js";
|
|
2
|
+
import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
|
|
3
|
+
import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
|
|
2
4
|
import "../media/container.js";
|
|
3
5
|
import "../ui/mute-button.js";
|
|
4
6
|
import "../ui/play-button.js";
|
|
@@ -8,6 +10,7 @@ import "../ui/seek-button.js";
|
|
|
8
10
|
import "../ui/time.js";
|
|
9
11
|
import "../ui/time-slider.js";
|
|
10
12
|
import "../ui/tooltip.js";
|
|
13
|
+
import "../ui/tooltip-group.js";
|
|
11
14
|
import "../ui/volume-slider.js";
|
|
12
15
|
import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
|
|
13
16
|
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
|
|
@@ -16,14 +19,14 @@ import { root } from "../../skins/dist/default/default/tailwind/components/root.
|
|
|
16
19
|
import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
|
|
17
20
|
import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
|
|
18
21
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
19
|
-
import { controls,
|
|
22
|
+
import { controls, popup, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
|
|
20
23
|
import { ReactiveElement } from "@videojs/element";
|
|
21
24
|
import { cn } from "@videojs/utils/style";
|
|
22
25
|
|
|
23
26
|
//#region src/define/audio/skin.tailwind.ts
|
|
24
27
|
const SEEK_TIME = 10;
|
|
25
28
|
function getTemplateHTML() {
|
|
26
|
-
return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"><media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div></media-container>`;
|
|
29
|
+
return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><media-tooltip-group class="contents"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"><media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></media-tooltip-group></div></media-container>`;
|
|
27
30
|
}
|
|
28
31
|
var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
|
|
29
32
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/audio.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/mute-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}\">\n <slot name=\"media\"></slot>\n\n <div class=\"${controls}\">\n <span class=\"${tooltipState.play.wrapper}\">\n
|
|
1
|
+
{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/audio.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/mute-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}\">\n <slot name=\"media\"></slot>\n\n <div 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=\"audio-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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,0CAAA,SAAA,uDAAA,aAAA,KAAA,QAAA,wDAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,iBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,oDAAA,KAAA,MAAA,sCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,+BAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,0GAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,gCAAA,OAAA,KAAA,6EAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA;;;;iBAIU;;;yBACL;;;AAGvB,eAAe,OAAC,yBAA+B,SAAS,yBAAyB"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
video-player {
|
|
2
|
+
display: contents;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
video-player video,
|
|
6
|
+
video-player hls-video,
|
|
7
|
+
video-player simple-hls-video {
|
|
8
|
+
display: block;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
video-player video::-webkit-media-text-track-container {
|
|
14
|
+
transition: transform var(--media-caption-track-duration, 150ms) ease-out;
|
|
15
|
+
transition-delay: var(--media-caption-track-delay, 600ms);
|
|
16
|
+
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
|
|
17
|
+
z-index: var(--media-caption-track-z, 1);
|
|
18
|
+
font-family: inherit;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media (prefers-reduced-motion: reduce) {
|
|
22
|
+
video-player video::-webkit-media-text-track-container {
|
|
23
|
+
transition-duration: 50ms;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -1,19 +1,12 @@
|
|
|
1
|
+
import base_default from "../_virtual/inline-css_src/define/base.js";
|
|
2
|
+
|
|
1
3
|
//#region src/define/skin-mixin.ts
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
*
|
|
6
|
-
* `::slotted(video)::-webkit-media-text-track-container` is invalid per
|
|
7
|
-
* CSS spec, so this bridge lives in light DOM where it can directly
|
|
8
|
-
* target the video element's pseudo-elements.
|
|
9
|
-
*/
|
|
10
|
-
const NATIVE_CAPTION_BRIDGE_CSS = `.media-skin>video::-webkit-media-text-track-container{transition:transform var(--media-caption-track-duration,.15s) ease-out;transition-delay:var(--media-caption-track-delay,.6s);transform:translateY(var(--media-caption-track-y,0)) scale(.98);z-index:var(--media-caption-track-z,1);font-family:inherit}@media (prefers-reduced-motion:reduce){.media-skin>video::-webkit-media-text-track-container{transition-duration:50ms}}`;
|
|
11
|
-
const BRIDGE_ID = "media-caption-bridge";
|
|
12
|
-
function ensureCaptionBridge() {
|
|
13
|
-
if (document.getElementById(BRIDGE_ID)) return;
|
|
4
|
+
const STYLES_ID = "__media-styles";
|
|
5
|
+
function ensureStyles() {
|
|
6
|
+
if (document.getElementById(STYLES_ID)) return;
|
|
14
7
|
const style = document.createElement("style");
|
|
15
|
-
style.id =
|
|
16
|
-
style.textContent =
|
|
8
|
+
style.id = STYLES_ID;
|
|
9
|
+
style.textContent = base_default;
|
|
17
10
|
document.head.appendChild(style);
|
|
18
11
|
}
|
|
19
12
|
/**
|
|
@@ -21,8 +14,8 @@ function ensureCaptionBridge() {
|
|
|
21
14
|
* `getTemplateHTML` method into a shadow root. Native `<slot>` elements
|
|
22
15
|
* handle light DOM projection automatically.
|
|
23
16
|
*
|
|
24
|
-
* When `static styles` is set, the stylesheet is adopted into the
|
|
25
|
-
* root via `adoptedStyleSheets`.
|
|
17
|
+
* When `static styles` is set, the stylesheet is adopted into the
|
|
18
|
+
* shadow root via `adoptedStyleSheets`.
|
|
26
19
|
*/
|
|
27
20
|
function SkinMixin(BaseClass) {
|
|
28
21
|
class SkinElement extends BaseClass {
|
|
@@ -31,8 +24,7 @@ function SkinMixin(BaseClass) {
|
|
|
31
24
|
}
|
|
32
25
|
constructor(...args) {
|
|
33
26
|
super(...args);
|
|
34
|
-
|
|
35
|
-
ensureCaptionBridge();
|
|
27
|
+
ensureStyles();
|
|
36
28
|
if (!this.shadowRoot) {
|
|
37
29
|
const ctor = this.constructor;
|
|
38
30
|
this.attachShadow(ctor.shadowRootOptions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin-mixin.js","names":[],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\
|
|
1
|
+
{"version":3,"file":"skin-mixin.js","names":["styles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport styles from './base.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureStyles(): void {\n if (document.getElementById(STYLES_ID)) return;\n const style = document.createElement('style');\n style.id = STYLES_ID;\n style.textContent = styles;\n document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n static styles?: CSSStyleSheet;\n\n constructor(...args: any[]) {\n super(...args);\n\n ensureStyles();\n\n if (!this.shadowRoot) {\n const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n this.attachShadow(ctor.shadowRootOptions);\n\n if (ctor.styles) {\n this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n }\n\n if (ctor.getTemplateHTML) {\n this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n }\n }\n }\n }\n\n return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n return sheet;\n}\n"],"mappings":";;;AAIA,MAAM,YAAY;AAElB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,iBAAc;AAEd,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}
|