cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
518 lines (514 loc) • 360 kB
JavaScript
import { getDefaultExportFromCjs, commonjsGlobal } from "../../../_virtual/_commonjsHelpers.mjs";
import { D as DPlayer_min } from "../../../_virtual/DPlayer.min.mjs";
(function(module, exports) {
!function(n, e) {
module.exports = e();
}(self, () => (() => {
var n = { 916: (n2, e2, t2) => {
var a2 = t2(471);
n2.exports = function(n3) {
var e3, o = "", r = (n3 = n3 || {}).video, i = n3.options, l = a2.$escape, s = n3.tran, p = n3.icons, d = n3.index, c = a2.$each;
return n3.$value, n3.$index, o += '<div class="dplayer-mask"></div>\n<div class="dplayer-video-wrap">\n ', e3 = t2(568)(r), o += e3, o += "\n ", i.logo && (o += '\n <div class="dplayer-logo">\n <img src="', o += l(i.logo), o += '">\n </div>\n '), o += '\n <div class="dplayer-danmaku"', i.danmaku && i.danmaku.bottom && (o += ' style="margin-bottom:', o += l(i.danmaku.bottom), o += '"'), o += '>\n <div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>\n </div>\n <div class="dplayer-subtitle"></div>\n <div class="dplayer-bezel">\n <span class="dplayer-bezel-icon"></span>\n ', i.danmaku && (o += '\n <span class="dplayer-danloading">', o += l(s("danmaku-loading")), o += "</span>\n "), o += '\n <span class="diplayer-loading-icon">', o += p.loading, o += '</span>\n </div>\n</div>\n<div class="dplayer-controller-mask"></div>\n<div class="dplayer-controller">\n <div class="dplayer-icons dplayer-comment-box">\n <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="', o += l(s("setting")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.pallette, o += '</span>\n </button>\n <div class="dplayer-comment-setting-box">\n <div class="dplayer-comment-setting-color">\n <div class="dplayer-comment-setting-title">', o += l(s("set-danmaku-color")), o += '</div>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#fff" checked>\n <span style="background: #fff;"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#e54256">\n <span style="background: #e54256"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#ffe133">\n <span style="background: #ffe133"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#64DD17">\n <span style="background: #64DD17"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#39ccff">\n <span style="background: #39ccff"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-', o += l(d), o += '" value="#D500F9">\n <span style="background: #D500F9"></span>\n </label>\n </div>\n <div class="dplayer-comment-setting-type">\n <div class="dplayer-comment-setting-title">', o += l(s("set-danmaku-type")), o += '</div>\n <label>\n <input type="radio" name="dplayer-danmaku-type-', o += l(d), o += '" value="1">\n <span>', o += l(s("top")), o += '</span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-type-', o += l(d), o += '" value="0" checked>\n <span>', o += l(s("rolling")), o += '</span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-type-', o += l(d), o += '" value="2">\n <span>', o += l(s("bottom")), o += '</span>\n </label>\n </div>\n </div>\n <input class="dplayer-comment-input" type="text" placeholder="', o += l(s("input-danmaku-enter")), o += '" maxlength="30">\n <button class="dplayer-icon dplayer-send-icon" data-balloon="', o += l(s("send")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.send, o += '</span>\n </button>\n </div>\n <div class="dplayer-icons dplayer-icons-left">\n <button class="dplayer-icon dplayer-play-icon">\n <span class="dplayer-icon-content">', o += p.play, o += '</span>\n </button>\n <div class="dplayer-volume">\n <button class="dplayer-icon dplayer-volume-icon">\n <span class="dplayer-icon-content">', o += p.volumeDown, o += '</span>\n </button>\n <div class="dplayer-volume-bar-wrap" data-balloon-pos="up">\n <div class="dplayer-volume-bar">\n <div class="dplayer-volume-bar-inner" style="background: ', o += l(i.theme), o += ';">\n <span class="dplayer-thumb" style="background: ', o += l(i.theme), o += '"></span>\n </div>\n </div>\n </div>\n </div>\n <span class="dplayer-time">\n <span class="dplayer-ptime">0:00</span> /\n <span class="dplayer-dtime">0:00</span>\n </span>\n ', i.live && (o += '\n <span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: ', o += l(i.theme), o += ';"></span>', o += l(s("live")), o += "</span>\n "), o += '\n </div>\n <div class="dplayer-icons dplayer-icons-right">\n ', i.video.quality && (o += '\n <div class="dplayer-quality">\n <button class="dplayer-icon dplayer-quality-icon">', o += l(i.video.quality[i.video.defaultQuality].name), o += '</button>\n <div class="dplayer-quality-mask">\n <div class="dplayer-quality-list">\n ', c(i.video.quality, function(n4, e4) {
o += '\n <div class="dplayer-quality-item" data-index="', o += l(e4), o += '">', o += l(n4.name), o += "</div>\n ";
}), o += "\n </div>\n </div>\n </div>\n "), o += "\n ", i.screenshot && (o += '\n <div class="dplayer-icon dplayer-camera-icon" data-balloon="', o += l(s("screenshot")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.camera, o += "</span>\n </div>\n "), o += "\n ", i.airplay && (o += '\n <div class="dplayer-icon dplayer-airplay-icon" data-balloon="', o += l(s("airplay")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.airplay, o += "</span>\n </div>\n "), o += "\n ", i.chromecast && (o += '\n <div class="dplayer-icon dplayer-chromecast-icon" data-balloon="', o += l(s("chromecast")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.chromecast, o += "</span>\n </div>\n "), o += '\n <div class="dplayer-comment">\n <button class="dplayer-icon dplayer-comment-icon" data-balloon="', o += l(s("send-danmaku")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.comment, o += "</span>\n </button>\n </div>\n ", i.subtitle && (o += "\n ", "string" == typeof i.subtitle.url ? (o += '\n <div class="dplayer-subtitle-btn">\n <button class="dplayer-icon dplayer-subtitle-icon" data-balloon="', o += l(s("hide-subs")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.subtitle, o += "</span>\n </button>\n </div>\n ") : (o += '\n <div class="dplayer-subtitles">\n <button class="dplayer-icon dplayer-subtitles-icon" data-balloon="', o += l(s("subtitle")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.subtitle, o += '</span>\n </button>\n <div class="dplayer-subtitles-box">\n <div class="dplayer-subtitles-panel">\n ', c(i.subtitle.url, function(n4, e4) {
o += '\n <div class="dplayer-subtitles-item" data-subtitle="', o += l(n4.url), o += '">\n <!-- if lang, show tran(lang). if lang and name, show name + (tran(lang)). if name, show name. off option use lang for translation. -->\n <span class="dplayer-label">', o += l(n4.lang ? n4.name ? n4.name + " (" + s(n4.lang) + ")" : s(n4.lang) : n4.name), o += "</span>\n </div>\n ";
}), o += "\n </div>\n </div>\n </div>\n "), o += "\n "), o += '\n <div class="dplayer-setting">\n <button class="dplayer-icon dplayer-setting-icon" data-balloon="', o += l(s("setting")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.setting, o += '</span>\n </button>\n <div class="dplayer-setting-box">\n <div class="dplayer-setting-origin-panel">\n <div class="dplayer-setting-item dplayer-setting-speed">\n <span class="dplayer-label">', o += l(s("speed")), o += '</span>\n <div class="dplayer-toggle">', o += p.right, o += '</div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-loop">\n <span class="dplayer-label">', o += l(s("loop")), o += '</span>\n <div class="dplayer-toggle">\n <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">\n <label for="dplayer-toggle"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-showdan">\n <span class="dplayer-label">', o += l(s("show-danmaku")), o += '</span>\n <div class="dplayer-toggle">\n <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">\n <label for="dplayer-toggle-dan"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-danunlimit">\n <span class="dplayer-label">', o += l(s("unlimited-danmaku")), o += '</span>\n <div class="dplayer-toggle">\n <input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">\n <label for="dplayer-toggle-danunlimit"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-danmaku">\n <span class="dplayer-label">', o += l(s("opacity-danmaku")), o += '</span>\n <div class="dplayer-danmaku-bar-wrap">\n <div class="dplayer-danmaku-bar">\n <div class="dplayer-danmaku-bar-inner">\n <span class="dplayer-thumb"></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="dplayer-setting-speed-panel">\n ', c(i.playbackSpeed, function(n4, e4) {
o += '\n <div class="dplayer-setting-speed-item" data-speed="', o += l(n4), o += '">\n <span class="dplayer-label">', o += l(1 === n4 ? s("normal") : n4), o += "</span>\n </div>\n ";
}), o += '\n </div>\n </div>\n </div>\n <div class="dplayer-full">\n <button class="dplayer-icon dplayer-full-in-icon" data-balloon="', o += l(s("web-fullscreen")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.fullWeb, o += '</span>\n </button>\n <button class="dplayer-icon dplayer-full-icon" data-balloon="', o += l(s("fullscreen")), o += '" data-balloon-pos="up">\n <span class="dplayer-icon-content">', o += p.full, o += '</span>\n </button>\n </div>\n </div>\n <div class="dplayer-bar-wrap">\n <div class="dplayer-bar-time hidden">00:00</div>\n <div class="dplayer-bar-preview"></div>\n <div class="dplayer-bar">\n <div class="dplayer-loaded" style="width: 0;"></div>\n <div class="dplayer-played" style="width: 0; background: ', o += l(i.theme), o += '">\n <span class="dplayer-thumb" style="background: ', o += l(i.theme), o += '"></span>\n </div>\n </div>\n </div>\n</div>\n<div class="dplayer-info-panel dplayer-info-panel-hide">\n <div class="dplayer-info-panel-close">[x]</div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-version">\n <span class="dplayer-info-panel-item-title">Player version</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-fps">\n <span class="dplayer-info-panel-item-title">Player FPS</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-type">\n <span class="dplayer-info-panel-item-title">Video type</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-url">\n <span class="dplayer-info-panel-item-title">Video url</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-resolution">\n <span class="dplayer-info-panel-item-title">Video resolution</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-duration">\n <span class="dplayer-info-panel-item-title">Video duration</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n ', i.danmaku && (o += '\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">\n <span class="dplayer-info-panel-item-title">Danmaku id</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">\n <span class="dplayer-info-panel-item-title">Danmaku api</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">\n <span class="dplayer-info-panel-item-title">Danmaku amount</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n '), o += '\n</div>\n<div class="dplayer-menu">\n ', c(i.contextmenu, function(n4, e4) {
o += '\n <div class="dplayer-menu-item">\n <a', n4.link && (o += ' target="_blank"'), o += ' href="', o += l(n4.link || "javascript:void(0);"), o += '">', n4.key && (o += " ", o += l(s(n4.key))), n4.text && (o += " ", o += l(n4.text)), o += "</a>\n </div>\n ";
}), o += '\n</div>\n<div class="dplayer-notice-list"></div>\n<button class="dplayer-mobile-play">\n ', o += p.play, o += "\n</button>";
};
}, 568: (n2, e2, t2) => {
var a2 = t2(471);
n2.exports = function(n3) {
var e3 = "", t3 = (n3 = n3 || {}).enableSubtitle, o = n3.subtitle, r = n3.current, i = n3.airplay, l = n3.pic, s = a2.$escape, p = n3.screenshot, d = n3.preload, c = n3.url;
return t3 = o && "webvtt" === o.type, e3 += '\n<video\n class="dplayer-video ', r && (e3 += "dplayer-video-current"), e3 += '"\n webkit-playsinline\n ', i && (e3 += ' x-webkit-airplay="allow" '), e3 += "\n playsinline\n ", l && (e3 += 'poster="', e3 += s(l), e3 += '"'), e3 += "\n ", (p || t3) && (e3 += 'crossorigin="anonymous"'), e3 += "\n ", d && (e3 += 'preload="', e3 += s(d), e3 += '"'), e3 += "\n ", i ? e3 += "\n nosrc\n " : c && (e3 += '\n src="', e3 += s(c), e3 += '"\n '), e3 += "\n >\n ", i && (e3 += '\n <source src="', e3 += s(c), e3 += '">\n '), e3 += "\n ", t3 && (e3 += '\n <track class="dplayer-subtrack" kind="metadata" default src="', e3 += s("string" == typeof o.url ? o.url : o.url[o.index].url), e3 += '"></track>\n '), e3 + "\n</video>";
};
}, 49: (n2, e2, t2) => {
t2.d(e2, { Z: () => l });
var a2 = t2(415), o = t2.n(a2), r = t2(352), i = t2.n(r)()(o());
i.push([n2.id, `:root {
--balloon-border-radius: 2px;
--balloon-color: rgba(16, 16, 16, 0.95);
--balloon-text-color: #fff;
--balloon-font-size: 12px;
--balloon-move: 4px; }
button[aria-label][data-balloon-pos] {
overflow: visible; }
[aria-label][data-balloon-pos] {
position: relative;
cursor: pointer; }
[aria-label][data-balloon-pos]:after {
opacity: 0;
pointer-events: none;
transition: all 0.18s ease-out 0.18s;
text-indent: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
font-style: normal;
text-shadow: none;
font-size: 12px;
font-size: var(--balloon-font-size);
background: rgba(16, 16, 16, 0.95);
background: var(--balloon-color);
border-radius: 2px;
color: #fff;
color: var(--balloon-text-color);
border-radius: var(--balloon-border-radius);
content: attr(aria-label);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[aria-label][data-balloon-pos]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: rgba(16, 16, 16, 0.95);
border-top-color: var(--balloon-color);
opacity: 0;
pointer-events: none;
transition: all 0.18s ease-out 0.18s;
content: "";
position: absolute;
z-index: 10; }
[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
opacity: 1;
pointer-events: none; }
[aria-label][data-balloon-pos].font-awesome:after {
font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
[aria-label][data-balloon-pos][data-balloon-break]:after {
white-space: pre; }
[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
white-space: pre-line;
word-break: break-word; }
[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
transition: none; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
left: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
left: 5px; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
right: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
right: 5px; }
[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
bottom: 100%;
transform-origin: top;
transform: translate(0, 4px);
transform: translate(0, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
margin-bottom: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
left: 50%;
transform: translate(-50%, 4px);
transform: translate(-50%, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
top: 100%;
transform: translate(0, calc(4px * -1));
transform: translate(0, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
margin-top: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: rgba(16, 16, 16, 0.95);
border-bottom-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
left: 50%;
transform: translate(-50%, calc(4px * -1));
transform: translate(-50%, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
right: 100%;
top: 50%;
transform: translate(4px, -50%);
transform: translate(var(--balloon-move), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
margin-right: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: rgba(16, 16, 16, 0.95);
border-left-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
left: 100%;
top: 50%;
transform: translate(calc(4px * -1), -50%);
transform: translate(calc(var(--balloon-move) * -1), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
margin-left: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: rgba(16, 16, 16, 0.95);
border-right-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-length]:after {
white-space: normal; }
[aria-label][data-balloon-pos][data-balloon-length="small"]:after {
width: 80px; }
[aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
width: 150px; }
[aria-label][data-balloon-pos][data-balloon-length="large"]:after {
width: 260px; }
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
width: 380px; }
@media screen and (max-width: 768px) {
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
width: 90vw; } }
[aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
width: 100%; }
`, "", { version: 3, sources: ["webpack://./node_modules/.pnpm/balloon-css@1.2.0/node_modules/balloon-css/balloon.css"], names: [], mappings: "AAAA;EACE,4BAA4B;EAC5B,uCAAuC;EACvC,0BAA0B;EAC1B,yBAAyB;EACzB,mBAAmB,EAAE;;AAEvB;EACE,iBAAiB,EAAE;;AAErB;EACE,kBAAkB;EAClB,eAAe,EAAE;EACjB;IACE,UAAU;IACV,oBAAoB;IACpB,oCAAoC;IACpC,cAAc;IACd,wIAAwI;IACxI,mBAAmB;IACnB,kBAAkB;IAClB,iBAAiB;IACjB,eAAmC;IAAnC,mCAAmC;IACnC,kCAAgC;IAAhC,gCAAgC;IAChC,kBAAkB;IAClB,WAAgC;IAAhC,gCAAgC;IAChC,2CAA2C;IAC3C,yBAAyB;IACzB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,WAAW,EAAE;EACf;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,wCAAsC;IAAtC,sCAAsC;IACtC,UAAU;IACV,oBAAoB;IACpB,oCAAoC;IACpC,WAAW;IACX,kBAAkB;IAClB,WAAW,EAAE;EACf;IACE,UAAU;IACV,oBAAoB,EAAE;EACxB;IACE,qJAAqJ,EAAE;EACzJ;IACE,gBAAgB,EAAE;EACpB;IACE,qBAAqB;IACrB,sBAAsB,EAAE;EAC1B;IACE,gBAAgB,EAAE;EACpB;IACE,6BAA6B,EAAE;EACjC;IACE,6BAA6B,EAAE;EACjC;IACE,OAAO,EAAE;EACX;IACE,SAAS,EAAE;EACb;IACE,QAAQ,EAAE;EACZ;IACE,UAAU,EAAE;EACd;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,YAAY;IACZ,qBAAqB;IACrB,4BAA4C;IAA5C,4CAA4C,EAAE;EAChD;IACE,mBAAmB,EAAE;EACvB;IACE,SAAS;IACT,+BAA+C;IAA/C,+CAA+C,EAAE;EACnD;IACE,SAAS;IACT,uCAAuD;IAAvD,uDAAuD,EAAE;EAC3D;IACE,gBAAgB,EAAE;EACpB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,2CAAyC;IAAzC,yCAAyC,EAAE;EAC7C;IACE,SAAS;IACT,0CAA0D;IAA1D,0DAA0D,EAAE;EAC9D;IACE,6BAA6B,EAAE;EACjC;IACE,6BAA6B,EAAE;EACjC;IACE,WAAW;IACX,QAAQ;IACR,+BAA+C;IAA/C,+CAA+C,EAAE;EACnD;IACE,kBAAkB,EAAE;EACtB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,yCAAuC;IAAvC,uCAAuC,EAAE;EAC3C;IACE,UAAU;IACV,QAAQ;IACR,0CAA0D;IAA1D,0DAA0D,EAAE;EAC9D;IACE,iBAAiB,EAAE;EACrB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,0CAAwC;IAAxC,wCAAwC,EAAE;EAC5C;IACE,mBAAmB,EAAE;EACvB;IACE,WAAW,EAAE;EACf;IACE,YAAY,EAAE;EAChB;IACE,YAAY,EAAE;EAChB;IACE,YAAY,EAAE;IACd;MACE;QACE,WAAW,EAAE,EAAE;EACrB;IACE,WAAW,EAAE", sourcesContent: [`:root {
--balloon-border-radius: 2px;
--balloon-color: rgba(16, 16, 16, 0.95);
--balloon-text-color: #fff;
--balloon-font-size: 12px;
--balloon-move: 4px; }
button[aria-label][data-balloon-pos] {
overflow: visible; }
[aria-label][data-balloon-pos] {
position: relative;
cursor: pointer; }
[aria-label][data-balloon-pos]:after {
opacity: 0;
pointer-events: none;
transition: all 0.18s ease-out 0.18s;
text-indent: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
font-style: normal;
text-shadow: none;
font-size: var(--balloon-font-size);
background: var(--balloon-color);
border-radius: 2px;
color: var(--balloon-text-color);
border-radius: var(--balloon-border-radius);
content: attr(aria-label);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[aria-label][data-balloon-pos]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: var(--balloon-color);
opacity: 0;
pointer-events: none;
transition: all 0.18s ease-out 0.18s;
content: "";
position: absolute;
z-index: 10; }
[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
opacity: 1;
pointer-events: none; }
[aria-label][data-balloon-pos].font-awesome:after {
font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
[aria-label][data-balloon-pos][data-balloon-break]:after {
white-space: pre; }
[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
white-space: pre-line;
word-break: break-word; }
[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
transition: none; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
left: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
left: 5px; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
right: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
right: 5px; }
[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
bottom: 100%;
transform-origin: top;
transform: translate(0, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
margin-bottom: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
left: 50%;
transform: translate(-50%, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
top: 100%;
transform: translate(0, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
margin-top: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
left: 50%;
transform: translate(-50%, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
right: 100%;
top: 50%;
transform: translate(var(--balloon-move), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
margin-right: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
left: 100%;
top: 50%;
transform: translate(calc(var(--balloon-move) * -1), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
margin-left: 10px; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-length]:after {
white-space: normal; }
[aria-label][data-balloon-pos][data-balloon-length="small"]:after {
width: 80px; }
[aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
width: 150px; }
[aria-label][data-balloon-pos][data-balloon-length="large"]:after {
width: 260px; }
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
width: 380px; }
@media screen and (max-width: 768px) {
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
width: 90vw; } }
[aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
width: 100%; }
`], sourceRoot: "" }]);
const l = i;
}, 685: (n2, e2, t2) => {
t2.d(e2, { Z: () => u });
var a2 = t2(415), o = t2.n(a2), r = t2(352), i = t2.n(r), l = t2(49), s = t2(80), p = t2.n(s), d = new URL(t2(831), t2.b), c = i()(o());
c.i(l.Z);
var A = p()(d);
c.push([n2.id, '@keyframes my-face {\n 2% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 4% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 6% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 8% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 10% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 12% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 14% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 16% {\n transform: translate(0, -0.5px) rotate(-1.5deg);\n }\n 18% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 20% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 22% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 24% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 26% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 28% {\n transform: translate(0, 0.5px) rotate(1.5deg);\n }\n 30% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 32% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 34% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 36% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 38% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 40% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 42% {\n transform: translate(0, 2.5px) rotate(-1.5deg);\n }\n 44% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 46% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 48% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 50% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 52% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 54% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 56% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 58% {\n transform: translate(0, 0.5px) rotate(2.5deg);\n }\n 60% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 62% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 64% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 66% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 68% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 70% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 72% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 74% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 76% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 78% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 80% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 82% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 84% {\n transform: translate(0, 1.5px) rotate(2.5deg);\n }\n 86% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 88% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 90% {\n transform: translate(0, 2.5px) rotate(-0.5deg);\n }\n 92% {\n transform: translate(0, 0.5px) rotate(-0.5deg);\n }\n 94% {\n transform: translate(0, 2.5px) rotate(0.5deg);\n }\n 96% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 98% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 0%,\n 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n}\n.dplayer {\n position: relative;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: 1;\n}\n.dplayer * {\n box-sizing: content-box;\n}\n.dplayer svg {\n width: 100%;\n height: 100%;\n}\n.dplayer svg path,\n.dplayer svg circle {\n fill: #fff;\n}\n.dplayer:-webkit-full-screen {\n width: 100%;\n height: 100%;\n background: #000;\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0;\n transform: translate(0, 0);\n}\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan,\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danmaku,\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danunlimit {\n display: none;\n}\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment {\n display: none;\n}\n.dplayer.dplayer-no-danmaku .dplayer-danmaku {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-time {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-bar-wrap {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-setting-speed {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-setting-loop {\n display: none;\n}\n.dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting {\n display: none;\n}\n.dplayer.dplayer-arrow .dplayer-danmaku {\n font-size: 18px;\n}\n.dplayer.dplayer-arrow .dplayer-icon {\n margin: 0 -3px;\n}\n.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move {\n animation-play-state: running;\n}\n@media (min-width: 900px) {\n .dplayer.dplayer-playing .dplayer-controller-mask {\n opacity: 0;\n }\n .dplayer.dplayer-playing .dplayer-controller {\n opacity: 0;\n }\n .dplayer.dplayer-playing:hover .dplayer-controller-mask {\n opacity: 1;\n }\n .dplayer.dplayer-playing:hover .dplayer-controller {\n opacity: 1;\n }\n}\n.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon {\n display: block;\n}\n.dplayer.dplayer-loading .dplayer-danmaku,\n.dplayer.dplayer-paused .dplayer-danmaku,\n.dplayer.dplayer-loading .dplayer-danmaku-move,\n.dplayer.dplayer-paused .dplayer-danmaku-move {\n animation-play-state: paused;\n}\n.dplayer.dplayer-hide-controller {\n cursor: none;\n}\n.dplayer.dplayer-hide-controller .dplayer-controller-mask {\n opacity: 0;\n transform: translateY(100%);\n}\n.dplayer.dplayer-hide-controller .dplayer-controller {\n opacity: 0;\n transform: translateY(100%);\n}\n.dplayer.dplayer-show-controller .dplayer-controller-mask {\n opacity: 1;\n}\n.dplayer.dplayer-show-controller .dplayer-controller {\n opacity: 1;\n}\n.dplayer.dplayer-fulled {\n width: 100% !important;\n height: 100% !important;\n}\n.dplayer.dplayer-fulled {\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n}\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-airplay-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-chromecast-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-play-icon {\n display: none;\n}\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {\n position: static;\n display: inline-block;\n}\n.dplayer.dplayer-mobile .dplayer-bar-time {\n display: none;\n}\n.dplayer.dplayer-mobile.dplayer-hide-controller .dplayer-mobile-play {\n display: none;\n}\n.dplayer.dplayer-mobile .dplayer-mobile-play {\n display: block;\n}\n.dplayer-web-fullscreen-fix {\n position: fixed;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n}\n[data-balloon]:before {\n display: none;\n}\n[data-balloon]:after {\n padding: 0.3em 0.7em;\n background: rgba(17, 17, 17, 0.7);\n}\n[data-balloon][data-balloon-pos="up"]:after {\n margin-bottom: 0;\n}\n.dplayer-bezel {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 22px;\n color: #fff;\n pointer-events: none;\n}\n.dplayer-bezel .dplayer-bezel-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -26px 0 0 -26px;\n height: 52px;\n width: 52px;\n padding: 12px;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition {\n animation: bezel-hide 0.5s linear;\n}\n@keyframes bezel-hide {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(2);\n }\n}\n.dplayer-bezel .dplayer-danloading {\n position: absolute;\n top: 50%;\n margin-top: -7px;\n width: 100%;\n text-align: center;\n font-size: 14px;\n line-height: 14px;\n animation: my-face 5s infinite ease-in-out;\n}\n.dplayer-bezel .diplayer-loading-icon {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -18px 0 0 -18px;\n height: 36px;\n width: 36px;\n pointer-events: none;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide {\n display: none;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot {\n animation: diplayer-loading-dot-fade 0.8s ease infinite;\n opacity: 0;\n transform-origin: 4px 4px;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {\n animation-delay: 0.1s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {\n animation-delay: 0.2s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {\n animation-delay: 0.3s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {\n animation-delay: 0.4s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {\n animation-delay: 0.5s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {\n animation-delay: 0.6s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 {\n animation-delay: 0.7s;\n}\n@keyframes diplayer-loading-dot-fade {\n 0% {\n opacity: 0.7;\n transform: scale(1.2, 1.2);\n }\n 50% {\n opacity: 0.25;\n transform: scale(0.9, 0.9);\n }\n to {\n opacity: 0.25;\n transform: scale(0.85, 0.85);\n }\n}\n.dplayer-controller-mask {\n background: url(' + A + `) repeat-x bottom;
height: 98px;
width: 100%;
position: absolute;
bottom: 0;
transition: all 0.3s ease;
}
.dplayer-controller {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 41px;
padding: 0 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: all 0.3s ease;
}
.dplayer-controller.dplayer-controller-comment .dplayer-icons {
display: none;
}
.dplayer-controller.dplayer-controller-comment .dplayer-icons.dplayer-comment-box {
display: block;
}
.dplayer-controller .dplayer-bar-wrap {
padding: 5px 0;
cursor: pointer;
position: absolute;
bottom: 33px;
width: calc(100% - 40px);
height: 3px;
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb {
transform: scale(1);
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight {
display: block;
width: 8px;
transform: translateX(-4px);
top: 4px;
height: 40%;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight {
z-index: 12;
position: absolute;
top: 5px;
width: 6px;
height: 20%;
border-radius: 6px;
background-color: #fff;
text-align: center;
transform: translateX(-3px);
transition: all 0.2s ease-in-out;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text {
display: block;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-preview {
opacity: 0;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-time {
opacity: 0;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight .dplayer-highlight-text {
display: none;
position: absolute;
left: 50%;
top: -24px;
padding: 5px 8px;
background-color: rgba(0, 0, 0, 0.62);
color: #fff;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
transform: translateX(-50%);
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview {
position: absolute;
background: #fff;
pointer-events: none;
display: none;
background-size: 16000px 100%;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time {
position: absolute;
left: 0px;
top: -20px;
border-radius: 4px;
padding: 5px 7px;
background-color: rgba(0, 0, 0, 0.62);
color: #fff;
font-size: 12px;
text-align: center;
opacity: 1;
transition: opacity 0.1s ease-in-out;
word-wrap: normal;
word-break: normal;
z-index: 2;
pointer-events: none;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden {
opacity: 0;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar {
position: relative;
height: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.4);
height: 3px;
transition: all 0.5s ease;
will-change: width;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 3px;
will-change: width;
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(0);
}
.dplayer-controller .dplayer-icons {
height: 38px;
position: absolute;
bottom: 0;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box {
display: none;
position: absolute;
transition: all 0.3s ease-in-out;
z-index: 2;
height: 38px;
bottom: 0;
left: 20px;
right: 20px;
color: #fff;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon {
padding: 7px;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon {
position: absolute;
left: 0;
top: 0;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon {
position: absolute;
right: 0;
top: 0;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box {
position: absolute;
background: rgba(28, 28, 28, 0.9);
bottom: 41px;
left: 0;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 10px 10px 16px;
font-size: 14px;
width: 204px;
transition: all 0.3s ease-in-out;
transform: scale(0);
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open {
transform: scale(1);
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box input[type=radio] {
display: none;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label {
cursor: pointer;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplay