mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 16:11:20 -08:00
refactor(core): CORE-12 type template resources and verify bundled notices
This commit is contained in:
Harvey Zhao committed
1 parent
b8039ad1f1
commit
9eb7c945ca
101 files changed
+7363
-664
No files matched your search
+196
-124
@@ -3,6 +3,69 @@
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*
|
||||
* ArtPlayer bundled third-party notices
|
||||
*
|
||||
*
|
||||
* screenfull - reference v6.0.2, locally adapted
|
||||
* https://github.com/sindresorhus/screenfull
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* Hint.css v2.7.0 - scoped and styled for ArtPlayer
|
||||
* https://github.com/chinchang/hint.css
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2021 Kushagra Gour
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*
|
||||
* option-validator v2.0.6
|
||||
* https://github.com/zhw2590582/option-validator
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2018 Harvey Zack
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
function getDefaultExportFromCjs(x) {
|
||||
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
|
||||
@@ -245,6 +308,21 @@ const isIOS = /iPad|iPhone|iPod/i.test(userAgent) && !window.MSStream;
|
||||
const isIOS13 = isIOS || userAgent.includes("Macintosh") && navigator.maxTouchPoints >= 1;
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || isIOS13;
|
||||
const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
|
||||
function setStyleText(id2, style) {
|
||||
let $style = document.getElementById(id2);
|
||||
if (!$style) {
|
||||
$style = document.createElement("style");
|
||||
$style.id = id2;
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.head.appendChild($style);
|
||||
});
|
||||
} else {
|
||||
(document.head || document.documentElement).appendChild($style);
|
||||
}
|
||||
}
|
||||
$style.textContent = style;
|
||||
}
|
||||
function query(selector, parent = document) {
|
||||
return parent.querySelector(selector);
|
||||
}
|
||||
@@ -317,28 +395,13 @@ function replaceElement(newChild, oldChild) {
|
||||
function createElement(tag) {
|
||||
return document.createElement(tag);
|
||||
}
|
||||
function getIcon(key = "", html = "") {
|
||||
function getIcon(key = "", html2 = "") {
|
||||
const icon = createElement("i");
|
||||
addClass(icon, "art-icon");
|
||||
addClass(icon, `art-icon-${key}`);
|
||||
append(icon, html);
|
||||
append(icon, html2);
|
||||
return icon;
|
||||
}
|
||||
function setStyleText(id2, style2) {
|
||||
let $style = document.getElementById(id2);
|
||||
if (!$style) {
|
||||
$style = document.createElement("style");
|
||||
$style.id = id2;
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.head.appendChild($style);
|
||||
});
|
||||
} else {
|
||||
(document.head || document.documentElement).appendChild($style);
|
||||
}
|
||||
}
|
||||
$style.textContent = style2;
|
||||
}
|
||||
function supportsFlex() {
|
||||
const div = document.createElement("div");
|
||||
div.style.display = "flex";
|
||||
@@ -397,12 +460,12 @@ function getSafeAreaInsets() {
|
||||
const div = document.createElement("div");
|
||||
div.style.cssText = "position:fixed;top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);pointer-events:none;visibility:hidden;";
|
||||
document.body.appendChild(div);
|
||||
const style2 = getComputedStyle(div);
|
||||
const style = getComputedStyle(div);
|
||||
const insets = {
|
||||
top: Number.parseFloat(style2.top) || 0,
|
||||
right: Number.parseFloat(style2.right) || 0,
|
||||
bottom: Number.parseFloat(style2.bottom) || 0,
|
||||
left: Number.parseFloat(style2.left) || 0
|
||||
top: Number.parseFloat(style.top) || 0,
|
||||
right: Number.parseFloat(style.right) || 0,
|
||||
bottom: Number.parseFloat(style.bottom) || 0,
|
||||
left: Number.parseFloat(style.left) || 0
|
||||
};
|
||||
div.remove();
|
||||
return insets;
|
||||
@@ -877,12 +940,12 @@ function aspectRatio$2(option) {
|
||||
i18n,
|
||||
constructor: { ASPECT_RATIO }
|
||||
} = art;
|
||||
const html = ASPECT_RATIO.map(
|
||||
const html2 = ASPECT_RATIO.map(
|
||||
(item) => `<span data-value="${item}">${item === "default" ? i18n.get("Default") : item}</span>`
|
||||
).join("");
|
||||
return {
|
||||
...option,
|
||||
html: `${i18n.get("Aspect Ratio")}: ${html}`,
|
||||
html: `${i18n.get("Aspect Ratio")}: ${html2}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
@@ -920,10 +983,10 @@ function flip$2(option) {
|
||||
i18n,
|
||||
constructor: { FLIP }
|
||||
} = art;
|
||||
const html = FLIP.map((item) => `<span data-value="${item}">${i18n.get(capitalize(item))}</span>`).join("");
|
||||
const html2 = FLIP.map((item) => `<span data-value="${item}">${i18n.get(capitalize(item))}</span>`).join("");
|
||||
return {
|
||||
...option,
|
||||
html: `${i18n.get("Video Flip")}: ${html}`,
|
||||
html: `${i18n.get("Video Flip")}: ${html2}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
@@ -962,12 +1025,12 @@ function playbackRate$2(option) {
|
||||
i18n,
|
||||
constructor: { PLAYBACK_RATE }
|
||||
} = art;
|
||||
const html = PLAYBACK_RATE.map(
|
||||
const html2 = PLAYBACK_RATE.map(
|
||||
(item) => `<span data-value="${item}">${item === 1 ? i18n.get("Normal") : item.toFixed(1)}</span>`
|
||||
).join("");
|
||||
return {
|
||||
...option,
|
||||
html: `${i18n.get("Play Speed")}: ${html}`,
|
||||
html: `${i18n.get("Play Speed")}: ${html2}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
@@ -1476,8 +1539,8 @@ function progress(options) {
|
||||
for (let index = 0; index < option.highlight.length; index++) {
|
||||
const item = option.highlight[index];
|
||||
const left = clamp(item.time, 0, art.duration) / art.duration * 100;
|
||||
const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
|
||||
append($highlight, html);
|
||||
const html2 = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
|
||||
append($highlight, html2);
|
||||
}
|
||||
}
|
||||
function setBar(type, percentage, event) {
|
||||
@@ -2298,6 +2361,12 @@ class Hotkey {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
function publishLanguage(name, value) {
|
||||
if (typeof window !== "undefined") {
|
||||
const globals = window;
|
||||
globals[name] = value;
|
||||
}
|
||||
}
|
||||
const zhCn = {
|
||||
"Video Info": "统计信息",
|
||||
"Close": "关闭",
|
||||
@@ -2336,24 +2405,20 @@ const zhCn = {
|
||||
"AirPlay": "隔空播放",
|
||||
"AirPlay Not Available": "隔空播放不可用"
|
||||
};
|
||||
if (typeof window !== "undefined") {
|
||||
window["artplayer-i18n-zh-cn"] = zhCn;
|
||||
}
|
||||
publishLanguage("artplayer-i18n-zh-cn", zhCn);
|
||||
class I18n {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
this.languages = {
|
||||
"zh-cn": zhCn
|
||||
};
|
||||
this.languages = { "zh-cn": zhCn };
|
||||
this.language = {};
|
||||
this.update(art.option.i18n);
|
||||
}
|
||||
init() {
|
||||
const lang = this.art.option.lang.toLowerCase();
|
||||
this.language = this.languages[lang] || {};
|
||||
this.language = has(this.languages, lang) && this.languages[lang] || {};
|
||||
}
|
||||
get(key) {
|
||||
return this.language[key] || key;
|
||||
return has(this.language, key) && this.language[key] || key;
|
||||
}
|
||||
update(value) {
|
||||
this.languages = mergeDeep(this.languages, value);
|
||||
@@ -2387,38 +2452,38 @@ const switchOn = '<?xml version="1.0" standalone="no"?>\r\n<!DOCTYPE svg PUBLIC
|
||||
const unlock = '<?xml version="1.0" standalone="no"?>\r\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r\n<svg t="1650612464266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M666.752 194.517333L617.386667 268.629333A128 128 0 0 0 384 341.333333l0.042667 85.333334h384a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-256a85.333333 85.333333 0 0 1 85.333333-85.333333h42.666667V341.333333a213.333333 213.333333 0 0 1 368.085333-146.816z"></path></svg>\r\n';
|
||||
const volumeClose = '<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 22 22">\r\n <path d="M15 11a3.998 3.998 0 0 0-2-3.465v2.636l1.865 1.865A4.02 4.02 0 0 0 15 11z"></path>\r\n <path d="M13.583 5.583A5.998 5.998 0 0 1 17 11a6 6 0 0 1-.585 2.587l1.477 1.477a8.001 8.001 0 0 0-3.446-11.286 1 1 0 0 0-.863 1.805zM18.778 18.778l-2.121-2.121-1.414-1.414-1.415-1.415L13 13l-2-2-3.889-3.889-3.889-3.889a.999.999 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1l4.188 3.35a.5.5 0 0 0 .812-.39v-3.131l2.587 2.587-.01.005a1 1 0 0 0 .86 1.806c.215-.102.424-.214.627-.333l2.3 2.3a1.001 1.001 0 0 0 1.414-1.416zM11 5.04a.5.5 0 0 0-.813-.39L8.682 5.854 11 8.172V5.04z"></path>\r\n</svg>';
|
||||
const volume = '<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 22 22">\r\n <path d="M10.188 4.65L6 8H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1l4.188 3.35a.5.5 0 0 0 .812-.39V5.04a.498.498 0 0 0-.812-.39zM14.446 3.778a1 1 0 0 0-.862 1.804 6.002 6.002 0 0 1-.007 10.838 1 1 0 0 0 .86 1.806A8.001 8.001 0 0 0 19 11a8.001 8.001 0 0 0-4.554-7.222z"></path>\r\n <path d="M15 11a3.998 3.998 0 0 0-2-3.465v6.93A3.998 3.998 0 0 0 15 11z"></path>\r\n</svg>';
|
||||
const defaults = {
|
||||
loading,
|
||||
state,
|
||||
play,
|
||||
pause,
|
||||
check,
|
||||
volume,
|
||||
volumeClose,
|
||||
screenshot,
|
||||
setting,
|
||||
pip,
|
||||
arrowLeft,
|
||||
arrowRight,
|
||||
playbackRate: playbackRate$1,
|
||||
aspectRatio: aspectRatio$1,
|
||||
config,
|
||||
lock: lock$1,
|
||||
flip: flip$1,
|
||||
unlock,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
fullscreenWebOff,
|
||||
fullscreenWebOn,
|
||||
switchOn,
|
||||
switchOff,
|
||||
error,
|
||||
close,
|
||||
airplay
|
||||
};
|
||||
class Icons {
|
||||
constructor(art) {
|
||||
const icons = {
|
||||
loading,
|
||||
state,
|
||||
play,
|
||||
pause,
|
||||
check,
|
||||
volume,
|
||||
volumeClose,
|
||||
screenshot,
|
||||
setting,
|
||||
pip,
|
||||
arrowLeft,
|
||||
arrowRight,
|
||||
playbackRate: playbackRate$1,
|
||||
aspectRatio: aspectRatio$1,
|
||||
config,
|
||||
lock: lock$1,
|
||||
flip: flip$1,
|
||||
unlock,
|
||||
fullscreenOff,
|
||||
fullscreenOn,
|
||||
fullscreenWebOff,
|
||||
fullscreenWebOn,
|
||||
switchOn,
|
||||
switchOff,
|
||||
error,
|
||||
close,
|
||||
airplay,
|
||||
...art.option.icons
|
||||
};
|
||||
const icons = { ...defaults, ...art.option.icons };
|
||||
for (const key in icons) {
|
||||
def(this, key, {
|
||||
get: () => getIcon(key, icons[key])
|
||||
@@ -2609,8 +2674,8 @@ function createDefaults() {
|
||||
lang: navigator?.language.toLowerCase()
|
||||
};
|
||||
}
|
||||
function resolveOption(input, defaults) {
|
||||
const merged = mergeDeep(defaults, input);
|
||||
function resolveOption(input, defaults2) {
|
||||
const merged = mergeDeep(defaults2, input);
|
||||
merged.container = input.container;
|
||||
return validator(merged, scheme);
|
||||
}
|
||||
@@ -5063,7 +5128,7 @@ class Storage {
|
||||
}
|
||||
}
|
||||
}
|
||||
const style = ".art-video-player {\n --art-theme: #f00;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: rgba(0, 0, 0, 0.5);\n --art-transition-duration: 0.2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: rgba(255, 255, 255, 0.25);\n --art-progress-top-gap: 10px;\n --art-hover-color: rgba(255, 255, 255, 0.25);\n --art-loaded-color: rgba(255, 255, 255, 0.25);\n --art-state-size: 80px;\n --art-state-opacity: 0.8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: rgba(255, 255, 255, 0.5);\n --art-control-height: 46px;\n --art-control-opacity: 0.75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: rgba(0, 0, 0, 0.85);\n --art-tip-background: rgba(0, 0, 0, 0.7);\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: rgba(255, 255, 255, 0.25);\n --art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);\n --art-mini-progress-height: 2px;\n}\n.art-bg-cover {\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.4), transparent);\n background-repeat: repeat-x;\n background-position: center bottom;\n}\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.art-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.art-video-player {\n position: relative;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n outline: 0;\n zoom: 1;\n padding: 0;\n text-align: left;\n direction: ltr;\n font-size: 14px;\n line-height: 1.3;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n}\n.art-video-player *,\n.art-video-player *::before,\n.art-video-player *::after {\n box-sizing: border-box;\n}\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n.art-icon {\n line-height: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.art-video-player.art-backdrop .art-contextmenus,\n.art-video-player.art-backdrop .art-info,\n.art-video-player.art-backdrop .art-settings,\n.art-video-player.art-backdrop .art-layer-auto-playback,\n.art-video-player.art-backdrop .art-selector-list,\n.art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.art-video {\n position: absolute;\n inset: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\n.art-poster {\n position: absolute;\n inset: 0;\n z-index: 11;\n width: 100%;\n height: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: none;\n}\n.art-video-player .art-subtitle {\n display: none;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n position: absolute;\n z-index: 20;\n width: 100%;\n padding: 0 5%;\n text-align: center;\n pointer-events: none;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1pLine truncated
|
||||
const css = ".art-video-player {\n --art-theme: #f00;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: rgba(0, 0, 0, 0.5);\n --art-transition-duration: 0.2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: rgba(255, 255, 255, 0.25);\n --art-progress-top-gap: 10px;\n --art-hover-color: rgba(255, 255, 255, 0.25);\n --art-loaded-color: rgba(255, 255, 255, 0.25);\n --art-state-size: 80px;\n --art-state-opacity: 0.8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: rgba(255, 255, 255, 0.5);\n --art-control-height: 46px;\n --art-control-opacity: 0.75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: rgba(0, 0, 0, 0.85);\n --art-tip-background: rgba(0, 0, 0, 0.7);\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: rgba(255, 255, 255, 0.25);\n --art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);\n --art-mini-progress-height: 2px;\n}\n.art-bg-cover {\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.4), transparent);\n background-repeat: repeat-x;\n background-position: center bottom;\n}\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.art-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.art-video-player {\n position: relative;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n outline: 0;\n zoom: 1;\n padding: 0;\n text-align: left;\n direction: ltr;\n font-size: 14px;\n line-height: 1.3;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n}\n.art-video-player *,\n.art-video-player *::before,\n.art-video-player *::after {\n box-sizing: border-box;\n}\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n.art-icon {\n line-height: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.art-video-player.art-backdrop .art-contextmenus,\n.art-video-player.art-backdrop .art-info,\n.art-video-player.art-backdrop .art-settings,\n.art-video-player.art-backdrop .art-layer-auto-playback,\n.art-video-player.art-backdrop .art-selector-list,\n.art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.art-video {\n position: absolute;\n inset: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\n.art-poster {\n position: absolute;\n inset: 0;\n z-index: 11;\n width: 100%;\n height: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: none;\n}\n.art-video-player .art-subtitle {\n display: none;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n position: absolute;\n z-index: 20;\n width: 100%;\n padding: 0 5%;\n text-align: center;\n pointer-events: none;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px,Line truncated
|
||||
class Subtitle extends Component {
|
||||
constructor(art) {
|
||||
super(art);
|
||||
@@ -5234,30 +5299,7 @@ function captureTemplate(container) {
|
||||
}
|
||||
};
|
||||
}
|
||||
class Template {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
const { option, constructor } = art;
|
||||
if (option.container instanceof Element) {
|
||||
this.$container = option.container;
|
||||
} else {
|
||||
this.$container = query(option.container);
|
||||
errorHandle(this.$container, `No container element found by ${option.container}`);
|
||||
}
|
||||
errorHandle(supportsFlex(), "The current browser does not support flex layout");
|
||||
const type = this.$container.tagName.toLowerCase();
|
||||
errorHandle(type === "div", `Unsupported container element type, only support 'div' but got '${type}'`);
|
||||
errorHandle(
|
||||
constructor.instances.every((ins) => ins.template.$container !== this.$container),
|
||||
"Cannot mount multiple instances on the same dom element"
|
||||
);
|
||||
this.query = this.query.bind(this);
|
||||
ownContainer(art, this.$container, captureTemplate(this.$container));
|
||||
this.$container.dataset.artId = art.id;
|
||||
this.init();
|
||||
}
|
||||
static get html() {
|
||||
return `
|
||||
const html = `
|
||||
<div class="art-video-player art-subtitle-show art-layer-show art-control-show art-mask-show">
|
||||
<video class="art-video">
|
||||
<track default kind="metadata" src=""></track>
|
||||
@@ -5316,6 +5358,55 @@ class Template {
|
||||
<div class="art-contextmenus"></div>
|
||||
</div>
|
||||
`;
|
||||
function bindNodes(target) {
|
||||
target.$player = target.query(".art-video-player");
|
||||
target.$video = target.query(".art-video");
|
||||
target.$track = target.query("track");
|
||||
target.$poster = target.query(".art-poster");
|
||||
target.$subtitle = target.query(".art-subtitle");
|
||||
target.$danmuku = target.query(".art-danmuku");
|
||||
target.$bottom = target.query(".art-bottom");
|
||||
target.$progress = target.query(".art-progress");
|
||||
target.$controls = target.query(".art-controls");
|
||||
target.$controlsLeft = target.query(".art-controls-left");
|
||||
target.$controlsCenter = target.query(".art-controls-center");
|
||||
target.$controlsRight = target.query(".art-controls-right");
|
||||
target.$layer = target.query(".art-layers");
|
||||
target.$loading = target.query(".art-loading");
|
||||
target.$notice = target.query(".art-notice");
|
||||
target.$noticeInner = target.query(".art-notice-inner");
|
||||
target.$mask = target.query(".art-mask");
|
||||
target.$state = target.query(".art-state");
|
||||
target.$setting = target.query(".art-settings");
|
||||
target.$info = target.query(".art-info");
|
||||
target.$infoPanel = target.query(".art-info-panel");
|
||||
target.$infoClose = target.query(".art-info-close");
|
||||
target.$contextmenu = target.query(".art-contextmenus");
|
||||
}
|
||||
class Template {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
const { option, constructor } = art;
|
||||
if (option.container instanceof Element) {
|
||||
this.$container = option.container;
|
||||
} else {
|
||||
this.$container = query(option.container);
|
||||
errorHandle(this.$container, `No container element found by ${option.container}`);
|
||||
}
|
||||
errorHandle(supportsFlex(), "The current browser does not support flex layout");
|
||||
const type = this.$container.tagName.toLowerCase();
|
||||
errorHandle(type === "div", `Unsupported container element type, only support 'div' but got '${type}'`);
|
||||
errorHandle(
|
||||
constructor.instances.every((ins) => ins.template.$container !== this.$container),
|
||||
"Cannot mount multiple instances on the same dom element"
|
||||
);
|
||||
this.query = this.query.bind(this);
|
||||
ownContainer(art, this.$container, captureTemplate(this.$container));
|
||||
this.$container.dataset.artId = String(art.id);
|
||||
this.init();
|
||||
}
|
||||
static get html() {
|
||||
return html;
|
||||
}
|
||||
query(className) {
|
||||
return query(className, this.$container);
|
||||
@@ -5325,35 +5416,10 @@ class Template {
|
||||
if (!option.useSSR) {
|
||||
this.$container.innerHTML = Template.html;
|
||||
}
|
||||
this.$player = this.query(".art-video-player");
|
||||
this.$video = this.query(".art-video");
|
||||
this.$track = this.query("track");
|
||||
this.$poster = this.query(".art-poster");
|
||||
this.$subtitle = this.query(".art-subtitle");
|
||||
this.$danmuku = this.query(".art-danmuku");
|
||||
this.$bottom = this.query(".art-bottom");
|
||||
this.$progress = this.query(".art-progress");
|
||||
this.$controls = this.query(".art-controls");
|
||||
this.$controlsLeft = this.query(".art-controls-left");
|
||||
this.$controlsCenter = this.query(".art-controls-center");
|
||||
this.$controlsRight = this.query(".art-controls-right");
|
||||
this.$layer = this.query(".art-layers");
|
||||
this.$loading = this.query(".art-loading");
|
||||
this.$notice = this.query(".art-notice");
|
||||
this.$noticeInner = this.query(".art-notice-inner");
|
||||
this.$mask = this.query(".art-mask");
|
||||
this.$state = this.query(".art-state");
|
||||
this.$setting = this.query(".art-settings");
|
||||
this.$info = this.query(".art-info");
|
||||
this.$infoPanel = this.query(".art-info-panel");
|
||||
this.$infoClose = this.query(".art-info-close");
|
||||
this.$contextmenu = this.query(".art-contextmenus");
|
||||
bindNodes(this);
|
||||
if (option.proxy) {
|
||||
const video = option.proxy.call(this.art, this.art);
|
||||
errorHandle(
|
||||
video instanceof HTMLVideoElement || video instanceof HTMLCanvasElement,
|
||||
`Function 'option.proxy' needs to return 'HTMLVideoElement' or 'HTMLCanvasElement'`
|
||||
);
|
||||
assertProxy(video);
|
||||
replaceElement(video, this.$video);
|
||||
video.className = "art-video";
|
||||
this.$video = video;
|
||||
@@ -5373,6 +5439,12 @@ class Template {
|
||||
}
|
||||
}
|
||||
}
|
||||
function assertProxy(video) {
|
||||
errorHandle(
|
||||
video instanceof HTMLVideoElement || video instanceof HTMLCanvasElement,
|
||||
"Function 'option.proxy' needs to return 'HTMLVideoElement' or 'HTMLCanvasElement'"
|
||||
);
|
||||
}
|
||||
const owns = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
|
||||
class Emitter {
|
||||
on(name, fn, ctx) {
|
||||
@@ -5531,7 +5603,7 @@ class Artplayer extends Emitter {
|
||||
destroyInstance(this, instances, removeHtml, Artplayer.REMOVE_SRC_WHEN_DESTROY);
|
||||
}
|
||||
}
|
||||
Artplayer.STYLE = style;
|
||||
Artplayer.STYLE = css;
|
||||
Artplayer.DEBUG = false;
|
||||
Artplayer.CONTEXTMENU = true;
|
||||
Artplayer.NOTICE_TIME = 2e3;
|
||||
@@ -5567,7 +5639,7 @@ Artplayer.USE_RAF = false;
|
||||
Artplayer.REMOVE_SRC_WHEN_DESTROY = true;
|
||||
if (isBrowser) {
|
||||
window.Artplayer = Artplayer;
|
||||
setStyleText("artplayer-style", style);
|
||||
setStyleText("artplayer-style", css);
|
||||
setTimeout(() => {
|
||||
if (Artplayer.LOG_VERSION) {
|
||||
console.log(
|
||||
|
||||
Reference in new issue
Block a user