@videojs/html 10.0.0-beta.3 → 10.0.0-beta.5
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 +68 -31
- 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 +61 -23
- 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 +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 -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 +7 -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/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 +68 -31
- 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 +61 -23
- 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 +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 -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 +7 -4
- 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
|
@@ -13,6 +13,7 @@ import "../ui/seek-button.js";
|
|
|
13
13
|
import "../ui/time.js";
|
|
14
14
|
import "../ui/time-slider.js";
|
|
15
15
|
import "../ui/tooltip.js";
|
|
16
|
+
import "../ui/tooltip-group.js";
|
|
16
17
|
import "../ui/volume-slider.js";
|
|
17
18
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
18
19
|
import skin_default from "../../_virtual/inline-css_src/define/video/skin.js";
|
|
@@ -32,94 +33,96 @@ function getTemplateHTML() {
|
|
|
32
33
|
</media-buffering-indicator>
|
|
33
34
|
|
|
34
35
|
<media-controls class="media-surface media-controls">
|
|
35
|
-
<media-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
<media-tooltip-group>
|
|
37
|
+
<media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
|
|
38
|
+
${renderIcon("restart", { class: "media-icon media-icon--restart" })}
|
|
39
|
+
${renderIcon("play", { class: "media-icon media-icon--play" })}
|
|
40
|
+
${renderIcon("pause", { class: "media-icon media-icon--pause" })}
|
|
41
|
+
</media-play-button>
|
|
42
|
+
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
|
|
43
|
+
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
|
|
44
|
+
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
|
|
45
|
+
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
|
|
46
|
+
</media-tooltip>
|
|
45
47
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
|
|
49
|
+
<span class="media-icon__container">
|
|
50
|
+
${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
|
|
51
|
+
<span class="media-icon__label">${SEEK_TIME}</span>
|
|
52
|
+
</span>
|
|
53
|
+
</media-seek-button>
|
|
54
|
+
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
|
|
55
|
+
Seek backward ${SEEK_TIME} seconds
|
|
56
|
+
</media-tooltip>
|
|
55
57
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
|
|
59
|
+
<span class="media-icon__container">
|
|
60
|
+
${renderIcon("seek", { class: "media-icon" })}
|
|
61
|
+
<span class="media-icon__label">${SEEK_TIME}</span>
|
|
62
|
+
</span>
|
|
63
|
+
</media-seek-button>
|
|
64
|
+
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
|
|
65
|
+
Seek forward ${SEEK_TIME} seconds
|
|
66
|
+
</media-tooltip>
|
|
65
67
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
68
|
+
<media-time-group class="media-time">
|
|
69
|
+
<media-time type="current" class="media-time__value"></media-time>
|
|
70
|
+
<media-time-slider class="media-slider">
|
|
71
|
+
<media-slider-track class="media-slider__track">
|
|
72
|
+
<media-slider-fill class="media-slider__fill"></media-slider-fill>
|
|
73
|
+
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
|
|
74
|
+
</media-slider-track>
|
|
75
|
+
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
|
|
76
|
+
</media-time-slider>
|
|
77
|
+
<media-time type="duration" class="media-time__value"></media-time>
|
|
78
|
+
</media-time-group>
|
|
77
79
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
|
|
81
|
+
<media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
|
|
82
|
+
Toggle playback rate
|
|
83
|
+
</media-tooltip>
|
|
82
84
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
|
|
86
|
+
${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
|
|
87
|
+
${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
|
|
88
|
+
${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
|
|
89
|
+
</media-mute-button>
|
|
88
90
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
91
|
+
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
|
|
92
|
+
<media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
|
|
93
|
+
<media-slider-track class="media-slider__track">
|
|
94
|
+
<media-slider-fill class="media-slider__fill"></media-slider-fill>
|
|
95
|
+
</media-slider-track>
|
|
96
|
+
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
|
|
97
|
+
</media-volume-slider>
|
|
98
|
+
</media-popover>
|
|
97
99
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
100
|
+
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
|
|
101
|
+
${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
|
|
102
|
+
${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
|
|
103
|
+
</media-captions-button>
|
|
104
|
+
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
|
|
105
|
+
<span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
|
|
106
|
+
<span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
|
|
107
|
+
</media-tooltip>
|
|
106
108
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
109
|
+
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
|
|
110
|
+
${renderIcon("pip", { class: "media-icon" })}
|
|
111
|
+
</media-pip-button>
|
|
112
|
+
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
|
|
113
|
+
<span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
|
|
114
|
+
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
|
|
115
|
+
</media-tooltip>
|
|
114
116
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
117
|
+
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
|
|
118
|
+
${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
|
|
119
|
+
${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
|
|
120
|
+
</media-fullscreen-button>
|
|
121
|
+
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
|
|
122
|
+
<span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
|
|
123
|
+
<span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
|
|
124
|
+
</media-tooltip>
|
|
125
|
+
</media-tooltip-group>
|
|
123
126
|
</media-controls>
|
|
124
127
|
|
|
125
128
|
<div class="media-overlay"></div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/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/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=\"media-default-skin media-default-skin--video\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n <div class=\"media-surface\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </div>\n </media-buffering-indicator>\n\n <media-controls 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":["styles"],"sources":["../../../../src/define/video/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/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=\"media-default-skin media-default-skin--video\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n <div class=\"media-surface\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </div>\n </media-buffering-indicator>\n\n <media-controls 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--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' })}\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=\"video-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=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon media-button--pip\">\n ${renderIcon('pip', { class: 'media-icon' })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n </media-tooltip>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinElement.tagName]: VideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;YAMN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;cAO7C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;cAqBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;cAQ3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;cAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"mappings":";;;iBA0CS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cAqHX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}
|
|
@@ -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/buffering-indicator.js";
|
|
4
6
|
import "../ui/captions-button.js";
|
|
@@ -13,15 +15,14 @@ import "../ui/seek-button.js";
|
|
|
13
15
|
import "../ui/time.js";
|
|
14
16
|
import "../ui/time-slider.js";
|
|
15
17
|
import "../ui/tooltip.js";
|
|
18
|
+
import "../ui/tooltip-group.js";
|
|
16
19
|
import "../ui/volume-slider.js";
|
|
17
20
|
import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
|
|
18
21
|
import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
|
|
19
22
|
import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
|
|
20
23
|
import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
|
|
21
24
|
import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
|
|
22
|
-
import { iconState } from "../../skins/dist/default/default/tailwind/components/icon-state.js";
|
|
23
25
|
import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
|
|
24
|
-
import { tooltipState } from "../../skins/dist/default/default/tailwind/components/tooltip-state.js";
|
|
25
26
|
import { bufferingIndicator, controls, popup, root, slider } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
|
|
26
27
|
import { renderIcon } from "../../icons/dist/render/default/index.js";
|
|
27
28
|
import { ReactiveElement } from "@videojs/element";
|
|
@@ -41,102 +42,104 @@ function getTemplateHTML() {
|
|
|
41
42
|
</media-buffering-indicator>
|
|
42
43
|
|
|
43
44
|
<media-controls data-controls="" class="${controls}">
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
|
|
58
|
-
<span class="${iconContainer}">
|
|
59
|
-
${renderIcon("seek", { class: cn(icon, iconFlipped) })}
|
|
60
|
-
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
|
|
45
|
+
<media-tooltip-group class="contents">
|
|
46
|
+
<span class="${tooltipState.play.wrapper}">
|
|
47
|
+
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
|
|
48
|
+
${renderIcon("restart", { class: cn(icon, iconState.play.restart) })}
|
|
49
|
+
${renderIcon("play", { class: cn(icon, iconState.play.play) })}
|
|
50
|
+
${renderIcon("pause", { class: cn(icon, iconState.play.pause) })}
|
|
51
|
+
</media-play-button>
|
|
52
|
+
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
53
|
+
<span class="${tooltipState.play.replay}">Replay</span>
|
|
54
|
+
<span class="${tooltipState.play.play}">Play</span>
|
|
55
|
+
<span class="${tooltipState.play.pause}">Pause</span>
|
|
56
|
+
</media-tooltip>
|
|
61
57
|
</span>
|
|
62
|
-
</media-seek-button>
|
|
63
|
-
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
64
|
-
Seek backward ${SEEK_TIME} seconds
|
|
65
|
-
</media-tooltip>
|
|
66
58
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
59
|
+
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
|
|
60
|
+
<span class="${iconContainer}">
|
|
61
|
+
${renderIcon("seek", { class: cn(icon, iconFlipped) })}
|
|
62
|
+
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
|
|
63
|
+
</span>
|
|
64
|
+
</media-seek-button>
|
|
65
|
+
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
66
|
+
Seek backward ${SEEK_TIME} seconds
|
|
67
|
+
</media-tooltip>
|
|
76
68
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</media-
|
|
86
|
-
<media-time type="duration" class="${time.duration}"></media-time>
|
|
87
|
-
</media-time-group>
|
|
69
|
+
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
|
|
70
|
+
<span class="${iconContainer}">
|
|
71
|
+
${renderIcon("seek", { class: icon })}
|
|
72
|
+
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
|
|
73
|
+
</span>
|
|
74
|
+
</media-seek-button>
|
|
75
|
+
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
76
|
+
Seek forward ${SEEK_TIME} seconds
|
|
77
|
+
</media-tooltip>
|
|
88
78
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
79
|
+
<media-time-group class="${time.group}">
|
|
80
|
+
<media-time type="current" class="${time.current}"></media-time>
|
|
81
|
+
<media-time-slider class="${slider.root}">
|
|
82
|
+
<media-slider-track class="${slider.track}">
|
|
83
|
+
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
|
|
84
|
+
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
|
|
85
|
+
</media-slider-track>
|
|
86
|
+
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
|
|
87
|
+
</media-time-slider>
|
|
88
|
+
<media-time type="duration" class="${time.duration}"></media-time>
|
|
89
|
+
</media-time-group>
|
|
93
90
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</media-mute-button>
|
|
91
|
+
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
|
|
92
|
+
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
93
|
+
Toggle playback rate
|
|
94
|
+
</media-tooltip>
|
|
99
95
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
|
|
106
|
-
</media-volume-slider>
|
|
107
|
-
</media-popover>
|
|
96
|
+
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
|
|
97
|
+
${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })}
|
|
98
|
+
${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })}
|
|
99
|
+
${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })}
|
|
100
|
+
</media-mute-button>
|
|
108
101
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
</media-tooltip>
|
|
118
|
-
</span>
|
|
102
|
+
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
|
|
103
|
+
<media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
|
|
104
|
+
<media-slider-track class="${slider.track}">
|
|
105
|
+
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
|
|
106
|
+
</media-slider-track>
|
|
107
|
+
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
|
|
108
|
+
</media-volume-slider>
|
|
109
|
+
</media-popover>
|
|
119
110
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
111
|
+
<span class="${tooltipState.captions.wrapper}">
|
|
112
|
+
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
|
|
113
|
+
${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })}
|
|
114
|
+
${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })}
|
|
115
|
+
</media-captions-button>
|
|
116
|
+
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
117
|
+
<span class="${tooltipState.captions.enable}">Enable captions</span>
|
|
118
|
+
<span class="${tooltipState.captions.disable}">Disable captions</span>
|
|
119
|
+
</media-tooltip>
|
|
120
|
+
</span>
|
|
129
121
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
</
|
|
139
|
-
|
|
122
|
+
<span class="${tooltipState.pip.wrapper}">
|
|
123
|
+
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
|
|
124
|
+
${renderIcon("pip", { class: icon })}
|
|
125
|
+
</media-pip-button>
|
|
126
|
+
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
127
|
+
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
|
|
128
|
+
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
|
|
129
|
+
</media-tooltip>
|
|
130
|
+
</span>
|
|
131
|
+
|
|
132
|
+
<span class="${tooltipState.fullscreen.wrapper}">
|
|
133
|
+
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
|
|
134
|
+
${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })}
|
|
135
|
+
${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })}
|
|
136
|
+
</media-fullscreen-button>
|
|
137
|
+
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
|
|
138
|
+
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
|
|
139
|
+
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
|
|
140
|
+
</media-tooltip>
|
|
141
|
+
</span>
|
|
142
|
+
</media-tooltip-group>
|
|
140
143
|
</media-controls>
|
|
141
144
|
|
|
142
145
|
<div class="${overlay}"></div>
|
|
@@ -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
|