mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 08:01:20 -08:00
V5 (#500)
* update dep * Update package.json * update contextmenu * update d.ts * update onVttLoad * build artplayer * update style * --art-theme * update style * update style * update user-select * add getIcon * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * add progress-hover * update mini * update style * update style * update style * update style * update style * update volume * update style * add art-backdrop * update style * update style * update style * update currentLevel * update artplayerPluginControl * update artplayerPluginDanmuku * Update package.json
This commit is contained in:
Harvey Zack authored and GitHub committed
1 parent
af12bd9634
commit
7b53de941d
80 files changed
+1393
-1362
No files matched your search
@@ -6,13 +6,14 @@ export default function aspectRatio(option) {
|
||||
i18n,
|
||||
constructor: { ASPECT_RATIO },
|
||||
} = art;
|
||||
|
||||
const html = ASPECT_RATIO.map(
|
||||
(item) => `<span data-value="${item}">${item === 'default' ? i18n.get('Default') : item}</span>`,
|
||||
).join('');
|
||||
|
||||
return {
|
||||
...option,
|
||||
html: `${i18n.get('Aspect Ratio')}:
|
||||
${ASPECT_RATIO.map(
|
||||
(item) => `<span data-value="${item}">${item === 'default' ? i18n.get('Default') : item}</span>`,
|
||||
).join('')}
|
||||
`,
|
||||
html: `${i18n.get('Aspect Ratio')}: ${html}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
@@ -22,7 +23,9 @@ export default function aspectRatio(option) {
|
||||
},
|
||||
mounted: ($panel) => {
|
||||
const $default = query('[data-value="default"]', $panel);
|
||||
if ($default) inverseClass($default, 'art-current');
|
||||
if ($default) {
|
||||
inverseClass($default, 'art-current');
|
||||
}
|
||||
art.on('aspectRatio', (value) => {
|
||||
const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
|
||||
if ($current) {
|
||||
|
||||
@@ -7,11 +7,11 @@ export default function flip(option) {
|
||||
constructor: { FLIP },
|
||||
} = art;
|
||||
|
||||
const html = FLIP.map((item) => `<span data-value="${item}">${i18n.get(capitalize(item))}</span>`).join('');
|
||||
|
||||
return {
|
||||
...option,
|
||||
html: `${i18n.get('Video Flip')}:
|
||||
${FLIP.map((item) => `<span data-value="${item}">${i18n.get(capitalize(item))}</span>`).join('')}
|
||||
`,
|
||||
html: `${i18n.get('Video Flip')}: ${html}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
@@ -21,7 +21,9 @@ export default function flip(option) {
|
||||
},
|
||||
mounted: ($panel) => {
|
||||
const $default = query('[data-value="normal"]', $panel);
|
||||
if ($default) inverseClass($default, 'art-current');
|
||||
if ($default) {
|
||||
inverseClass($default, 'art-current');
|
||||
}
|
||||
art.on('flip', (value) => {
|
||||
const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
|
||||
if ($current) {
|
||||
|
||||
@@ -7,13 +7,13 @@ export default function playbackRate(option) {
|
||||
constructor: { PLAYBACK_RATE },
|
||||
} = art;
|
||||
|
||||
const html = 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')}:
|
||||
${PLAYBACK_RATE.map(
|
||||
(item) => `<span data-value="${item}">${item === 1 ? i18n.get('Normal') : item}</span>`,
|
||||
).join('')}
|
||||
`,
|
||||
html: `${i18n.get('Play Speed')}: ${html}`,
|
||||
click: (contextmenu, event) => {
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function loop(option) {
|
||||
|
||||
art.on('loop', (value) => {
|
||||
if (value && value.length) {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($control, 'display', 'flex');
|
||||
setStyle($left, 'left', `calc(${(value[0] / art.duration) * 100}% - ${$left.clientWidth}px)`);
|
||||
setStyle($right, 'left', `${(value[1] / art.duration) * 100}%`);
|
||||
} else {
|
||||
|
||||
@@ -32,6 +32,7 @@ export default function progress(options) {
|
||||
...options,
|
||||
html: `
|
||||
<div class="art-control-progress-inner">
|
||||
<div class="art-progress-hover"></div>
|
||||
<div class="art-progress-loaded"></div>
|
||||
<div class="art-progress-played"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
@@ -41,22 +42,17 @@ export default function progress(options) {
|
||||
`,
|
||||
mounted: ($control) => {
|
||||
let isDroging = false;
|
||||
const $hover = query('.art-progress-hover', $control);
|
||||
const $loaded = query('.art-progress-loaded', $control);
|
||||
const $played = query('.art-progress-played', $control);
|
||||
const $highlight = query('.art-progress-highlight', $control);
|
||||
const $indicator = query('.art-progress-indicator', $control);
|
||||
const $tip = query('.art-progress-tip', $control);
|
||||
|
||||
const {
|
||||
PROGRESS_HEIGHT,
|
||||
INDICATOR_SIZE,
|
||||
INDICATOR_SIZE_ICON,
|
||||
INDICATOR_SIZE_MOBILE,
|
||||
INDICATOR_SIZE_MOBILE_ICON,
|
||||
} = art.constructor;
|
||||
const { INDICATOR_SIZE, INDICATOR_SIZE_ICON, INDICATOR_SIZE_MOBILE, INDICATOR_SIZE_MOBILE_ICON } =
|
||||
art.constructor;
|
||||
|
||||
setStyle($control, 'height', `${PROGRESS_HEIGHT}px`);
|
||||
setStyle($played, 'backgroundColor', 'var(--theme)');
|
||||
setStyle($played, 'backgroundColor', 'var(--art-theme)');
|
||||
|
||||
let indicatorSize = INDICATOR_SIZE;
|
||||
|
||||
@@ -65,7 +61,7 @@ export default function progress(options) {
|
||||
append($indicator, icons.indicator);
|
||||
} else {
|
||||
setStyles($indicator, {
|
||||
backgroundColor: 'var(--theme)',
|
||||
backgroundColor: 'var(--art-theme)',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -120,14 +116,18 @@ export default function progress(options) {
|
||||
}
|
||||
}
|
||||
|
||||
function setHover(event) {
|
||||
const { width } = getPosFromEvent(art, event);
|
||||
setStyle($hover, 'width', `${width}px`);
|
||||
setStyle($hover, 'display', 'flex');
|
||||
}
|
||||
|
||||
art.on('video:loadedmetadata', () => {
|
||||
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;
|
||||
append(
|
||||
$highlight,
|
||||
`<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
|
||||
);
|
||||
const html = `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`;
|
||||
append($highlight, html);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -157,7 +157,8 @@ export default function progress(options) {
|
||||
});
|
||||
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
setStyle($tip, 'display', 'block');
|
||||
setHover(event);
|
||||
setStyle($tip, 'display', 'flex');
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
showHighlight(event);
|
||||
} else {
|
||||
@@ -167,6 +168,7 @@ export default function progress(options) {
|
||||
|
||||
proxy($control, 'mouseleave', () => {
|
||||
setStyle($tip, 'display', 'none');
|
||||
setStyle($hover, 'display', 'none');
|
||||
});
|
||||
|
||||
proxy($control, 'mousedown', () => {
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function thumbnails(options) {
|
||||
}
|
||||
|
||||
if (isLoad) {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($control, 'display', 'flex');
|
||||
showThumbnails(event);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function time(option) {
|
||||
...option,
|
||||
style: {
|
||||
cursor: 'auto',
|
||||
marginLeft: '10px',
|
||||
margin: '0 10px',
|
||||
},
|
||||
mounted: ($control) => {
|
||||
function getTime() {
|
||||
|
||||
@@ -1,72 +1,68 @@
|
||||
import { append, clamp, tooltip, setStyle, isMobile } from '../utils';
|
||||
import { append, setStyle, isMobile } from '../utils';
|
||||
|
||||
export default function volume(option) {
|
||||
return (art) => ({
|
||||
...option,
|
||||
mounted: ($control) => {
|
||||
const { proxy, icons, i18n } = art;
|
||||
const { proxy, icons } = art;
|
||||
|
||||
let isDroging = false;
|
||||
const panelWidth = art.constructor.VOLUME_PANEL_WIDTH;
|
||||
const handleWidth = art.constructor.VOLUME_HANDLE_WIDTH;
|
||||
const $volume = append($control, icons.volume);
|
||||
const $volumeClose = append($control, icons.volumeClose);
|
||||
const $volumePanel = append($control, '<div class="art-volume-panel"></div>');
|
||||
const $volumeHandle = append($volumePanel, '<div class="art-volume-slider-handle"></div>');
|
||||
tooltip($volume, i18n.get('Mute'));
|
||||
setStyle($volumeClose, 'display', 'none');
|
||||
const $close = append($control, icons.volumeClose);
|
||||
const $panel = append($control, '<div class="art-volume-panel"></div>');
|
||||
const $inner = append($panel, '<div class="art-volume-inner"></div>');
|
||||
const $value = append($inner, `<div class="art-volume-val"></div>`);
|
||||
const $slider = append($inner, `<div class="art-volume-slider"></div>`);
|
||||
const $handle = append($slider, `<div class="art-volume-handle"></div>`);
|
||||
const $loaded = append($handle, `<div class="art-volume-loaded"></div>`);
|
||||
const $indicator = append($slider, `<div class="art-volume-indicator"></div>`);
|
||||
|
||||
if (isMobile) {
|
||||
setStyle($volumePanel, 'display', 'none');
|
||||
setStyle($panel, 'display', 'none');
|
||||
}
|
||||
|
||||
function volumeChangeFromEvent(event) {
|
||||
const { left: panelLeft } = $volumePanel.getBoundingClientRect();
|
||||
const percentage =
|
||||
clamp(event.pageX - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) /
|
||||
(panelWidth - handleWidth);
|
||||
return percentage;
|
||||
function getVolumeFromEvent(event) {
|
||||
const { top, height } = $slider.getBoundingClientRect();
|
||||
return 1 - (event.pageY - top) / height;
|
||||
}
|
||||
|
||||
function setVolumeHandle(percentage = 0.7) {
|
||||
if (art.muted || percentage === 0) {
|
||||
function update() {
|
||||
if (art.muted || art.volume === 0) {
|
||||
setStyle($volume, 'display', 'none');
|
||||
setStyle($volumeClose, 'display', 'flex');
|
||||
setStyle($volumeHandle, 'left', '0');
|
||||
setStyle($close, 'display', 'flex');
|
||||
setStyle($indicator, 'top', '100%');
|
||||
setStyle($loaded, 'top', '100%');
|
||||
$value.innerText = 0;
|
||||
} else {
|
||||
const width = (panelWidth - handleWidth) * percentage;
|
||||
const percentage = art.volume * 100;
|
||||
setStyle($volume, 'display', 'flex');
|
||||
setStyle($volumeClose, 'display', 'none');
|
||||
setStyle($volumeHandle, 'left', `${width}px`);
|
||||
setStyle($close, 'display', 'none');
|
||||
setStyle($indicator, 'top', `${100 - percentage}%`);
|
||||
setStyle($loaded, 'top', `${100 - percentage}%`);
|
||||
$value.innerText = Math.floor(percentage);
|
||||
}
|
||||
}
|
||||
|
||||
setVolumeHandle(art.volume);
|
||||
art.on('video:volumechange', () => {
|
||||
setVolumeHandle(art.volume);
|
||||
});
|
||||
update();
|
||||
art.on('video:volumechange', update);
|
||||
|
||||
proxy($volume, 'click', () => {
|
||||
art.muted = true;
|
||||
});
|
||||
|
||||
proxy($volumeClose, 'click', () => {
|
||||
proxy($close, 'click', () => {
|
||||
art.muted = false;
|
||||
});
|
||||
|
||||
proxy($volumePanel, 'click', (event) => {
|
||||
art.muted = false;
|
||||
art.volume = volumeChangeFromEvent(event);
|
||||
});
|
||||
|
||||
proxy($volumeHandle, 'mousedown', () => {
|
||||
let isDroging = false;
|
||||
proxy($slider, 'mousedown', (event) => {
|
||||
isDroging = true;
|
||||
art.volume = getVolumeFromEvent(event);
|
||||
});
|
||||
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
art.muted = false;
|
||||
art.volume = volumeChangeFromEvent(event);
|
||||
art.volume = getVolumeFromEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, def, addClass, createElement } from '../utils';
|
||||
import { def, getIcon } from '../utils';
|
||||
import loading from 'bundle-text:./loading.svg';
|
||||
import state from 'bundle-text:./state.svg';
|
||||
import check from 'bundle-text:./check.svg';
|
||||
@@ -62,13 +62,7 @@ export default class Icons {
|
||||
|
||||
Object.keys(icons).forEach((key) => {
|
||||
def(this, key, {
|
||||
get: () => {
|
||||
const icon = createElement('i');
|
||||
addClass(icon, 'art-icon');
|
||||
addClass(icon, `art-icon-${key}`);
|
||||
append(icon, icons[key]);
|
||||
return icon;
|
||||
},
|
||||
get: () => getIcon(key, icons[key]),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="60" width="60" style="filter: drop-shadow(0px 1px 1px black);" viewBox="0 0 24 24">
|
||||
<path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16 C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M9.5 9.325v5.35q0 .575.525.875t1.025-.05l4.15-2.65q.475-.3.475-.85t-.475-.85L11.05 8.5q-.5-.35-1.025-.05t-.525.875ZM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 467 B |
@@ -184,6 +184,7 @@ export default class Artplayer extends Emitter {
|
||||
style: {},
|
||||
escape: true,
|
||||
encoding: 'utf-8',
|
||||
onVttLoad: (vtt) => vtt,
|
||||
},
|
||||
moreVideoAttr: {
|
||||
controls: false,
|
||||
@@ -227,8 +228,6 @@ Artplayer.INDICATOR_SIZE = 14;
|
||||
Artplayer.INDICATOR_SIZE_ICON = 16;
|
||||
Artplayer.INDICATOR_SIZE_MOBILE = 18;
|
||||
Artplayer.INDICATOR_SIZE_MOBILE_ICON = 20;
|
||||
Artplayer.VOLUME_PANEL_WIDTH = 60;
|
||||
Artplayer.VOLUME_HANDLE_WIDTH = 12;
|
||||
Artplayer.RESIZE_TIME = 500;
|
||||
Artplayer.SCROLL_TIME = 200;
|
||||
Artplayer.SCROLL_GAP = 50;
|
||||
@@ -248,7 +247,6 @@ Artplayer.FAST_FORWARD_TIME = 1000;
|
||||
Artplayer.TOUCH_MOVE_RATIO = 0.5;
|
||||
Artplayer.VOLUME_STEP = 0.1;
|
||||
Artplayer.SEEK_STEP = 5;
|
||||
Artplayer.PROGRESS_HEIGHT = 6;
|
||||
Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 2];
|
||||
Artplayer.ASPECT_RATIO = ['default', '4:3', '16:9'];
|
||||
Artplayer.FLIP = ['normal', 'horizontal', 'vertical'];
|
||||
|
||||
@@ -16,6 +16,7 @@ export default function loopMix(art) {
|
||||
} else {
|
||||
interval = [];
|
||||
}
|
||||
art.emit('loop', interval);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,52 +1,105 @@
|
||||
import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
|
||||
import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport, createElement } from '../utils';
|
||||
|
||||
export default function miniMix(art) {
|
||||
const {
|
||||
i18n,
|
||||
option,
|
||||
storage,
|
||||
icons,
|
||||
proxy,
|
||||
template: { $player, $miniClose, $miniTitle, $miniHeader },
|
||||
storage,
|
||||
template: { $player, $video },
|
||||
} = art;
|
||||
|
||||
let isDroging = false;
|
||||
let lastPageX = 0;
|
||||
let lastPageY = 0;
|
||||
let lastPlayerLeft = 0;
|
||||
let lastPlayerTop = 0;
|
||||
|
||||
proxy($miniHeader, 'mousedown', (event) => {
|
||||
isDroging = true;
|
||||
lastPageX = event.pageX;
|
||||
lastPageY = event.pageY;
|
||||
lastPlayerLeft = art.left;
|
||||
lastPlayerTop = art.top;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
addClass($player, 'art-is-dragging');
|
||||
const top = lastPlayerTop + event.pageY - lastPageY;
|
||||
const left = lastPlayerLeft + event.pageX - lastPageX;
|
||||
setStyle($player, 'top', `${top}px`);
|
||||
setStyle($player, 'left', `${left}px`);
|
||||
storage.set('top', top);
|
||||
storage.set('left', left);
|
||||
function hideMini() {
|
||||
const { $mini } = art.template;
|
||||
if ($mini) {
|
||||
removeClass($player, 'art-mini');
|
||||
setStyle($mini, 'display', 'none');
|
||||
$player.prepend($video);
|
||||
art.emit('mini', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
isDroging = false;
|
||||
removeClass($player, 'art-is-dragging');
|
||||
});
|
||||
function initState($play, $pause) {
|
||||
if (art.playing) {
|
||||
setStyle($play, 'display', `none`);
|
||||
setStyle($pause, 'display', `flex`);
|
||||
} else {
|
||||
setStyle($play, 'display', `flex`);
|
||||
setStyle($pause, 'display', `none`);
|
||||
}
|
||||
}
|
||||
|
||||
proxy($miniClose, 'click', () => {
|
||||
art.mini = false;
|
||||
isDroging = false;
|
||||
removeClass($player, 'art-is-dragging');
|
||||
});
|
||||
function createMini() {
|
||||
const { $mini } = art.template;
|
||||
if ($mini) {
|
||||
append($mini, $video);
|
||||
return setStyle($mini, 'display', 'flex');
|
||||
} else {
|
||||
const $mini = createElement('div');
|
||||
addClass($mini, 'art-mini-popup');
|
||||
append(document.body, $mini);
|
||||
art.template.$mini = $mini;
|
||||
append($mini, $video);
|
||||
|
||||
append($miniTitle, option.title || i18n.get('Mini Player'));
|
||||
const $close = append($mini, `<div class="art-mini-close"></div>`);
|
||||
append($close, icons.close);
|
||||
proxy($close, 'click', hideMini);
|
||||
|
||||
const $state = append($mini, `<div class="art-mini-state"></div>`);
|
||||
const $play = append($state, icons.play);
|
||||
const $pause = append($state, icons.pause);
|
||||
proxy($play, 'click', () => art.play());
|
||||
proxy($pause, 'click', () => art.pause());
|
||||
initState($play, $pause);
|
||||
art.on('video:playing', () => initState($play, $pause));
|
||||
art.on('video:pause', () => initState($play, $pause));
|
||||
art.on('video:timeupdate', () => initState($play, $pause));
|
||||
|
||||
proxy($mini, 'mousedown', (event) => {
|
||||
isDroging = event.button === 0;
|
||||
lastPageX = event.pageX;
|
||||
lastPageY = event.pageY;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
addClass($mini, 'art-mini-droging');
|
||||
const x = event.pageX - lastPageX;
|
||||
const y = event.pageY - lastPageY;
|
||||
setStyle($mini, 'transform', `translate(${x}px, ${y}px)`);
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
removeClass($mini, 'art-mini-droging');
|
||||
const rect = $mini.getBoundingClientRect();
|
||||
storage.set('left', rect.left);
|
||||
storage.set('top', rect.top);
|
||||
setStyle($mini, 'left', `${rect.left}px`);
|
||||
setStyle($mini, 'top', `${rect.top}px`);
|
||||
setStyle($mini, 'transform', null);
|
||||
}
|
||||
});
|
||||
|
||||
return $mini;
|
||||
}
|
||||
}
|
||||
|
||||
function initMini() {
|
||||
const { $mini } = art.template;
|
||||
const rect = $mini.getBoundingClientRect();
|
||||
const top = window.innerHeight - rect.height - 50;
|
||||
const left = window.innerWidth - rect.width - 50;
|
||||
storage.set('top', top);
|
||||
storage.set('left', left);
|
||||
setStyle($mini, 'top', `${top}px`);
|
||||
setStyle($mini, 'left', `${left}px`);
|
||||
}
|
||||
|
||||
def(art, 'mini', {
|
||||
get() {
|
||||
@@ -54,40 +107,22 @@ export default function miniMix(art) {
|
||||
},
|
||||
set(value) {
|
||||
if (value) {
|
||||
art.normalSize = 'mini';
|
||||
art.autoSize = false;
|
||||
addClass($player, 'art-mini');
|
||||
const $mini = createMini();
|
||||
const top = storage.get('top');
|
||||
const left = storage.get('left');
|
||||
if (top && left) {
|
||||
setStyle($player, 'top', `${top}px`);
|
||||
setStyle($player, 'left', `${left}px`);
|
||||
if (!isInViewport($miniHeader)) {
|
||||
storage.del('top');
|
||||
storage.del('left');
|
||||
art.mini = true;
|
||||
setStyle($mini, 'top', `${top}px`);
|
||||
setStyle($mini, 'left', `${left}px`);
|
||||
if (!isInViewport($mini)) {
|
||||
initMini();
|
||||
}
|
||||
} else {
|
||||
const top = window.innerHeight - art.height - 50;
|
||||
const left = window.innerWidth - art.width - 50;
|
||||
storage.set('top', top);
|
||||
storage.set('left', left);
|
||||
setStyle($player, 'top', `${top}px`);
|
||||
setStyle($player, 'left', `${left}px`);
|
||||
initMini();
|
||||
}
|
||||
art.aspectRatio = false;
|
||||
art.playbackRate = false;
|
||||
art.notice.show = '';
|
||||
art.emit('mini', true);
|
||||
} else {
|
||||
removeClass($player, 'art-mini');
|
||||
setStyle($player, 'top', null);
|
||||
setStyle($player, 'left', null);
|
||||
art.aspectRatio = false;
|
||||
art.playbackRate = false;
|
||||
art.autoSize = option.autoSize;
|
||||
art.notice.show = '';
|
||||
art.emit('mini', false);
|
||||
hideMini();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -8,11 +8,11 @@ export default function themeMix(art) {
|
||||
|
||||
def(art, 'theme', {
|
||||
get() {
|
||||
return getComputedStyle($player).getPropertyValue('--theme');
|
||||
return getComputedStyle($player).getPropertyValue('--art-theme');
|
||||
},
|
||||
set(theme) {
|
||||
option.theme = theme;
|
||||
$player.style.setProperty('--theme', theme);
|
||||
$player.style.setProperty('--art-theme', theme);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -11,17 +11,17 @@ export default function autoPlayback(art) {
|
||||
} = art;
|
||||
|
||||
const $autoPlayback = art.layers.add({
|
||||
name: 'autoPlayback',
|
||||
name: 'auto-playback',
|
||||
html: `
|
||||
<div class="art-autoPlayback-close"></div>
|
||||
<div class="art-autoPlayback-last"></div>
|
||||
<div class="art-autoPlayback-jump"></div>
|
||||
<div class="art-auto-playback-close"></div>
|
||||
<div class="art-auto-playback-last"></div>
|
||||
<div class="art-auto-playback-jump"></div>
|
||||
`,
|
||||
});
|
||||
|
||||
const $last = query('.art-autoPlayback-last', $autoPlayback);
|
||||
const $jump = query('.art-autoPlayback-jump', $autoPlayback);
|
||||
const $close = query('.art-autoPlayback-close', $autoPlayback);
|
||||
const $last = query('.art-auto-playback-last', $autoPlayback);
|
||||
const $jump = query('.art-auto-playback-jump', $autoPlayback);
|
||||
const $close = query('.art-auto-playback-close', $autoPlayback);
|
||||
|
||||
art.on('video:timeupdate', () => {
|
||||
const times = storage.get('times') || {};
|
||||
@@ -63,7 +63,7 @@ export default function autoPlayback(art) {
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'autoPlayback',
|
||||
name: 'auto-playback',
|
||||
get times() {
|
||||
return storage.get('times') || {};
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default function miniProgressBar(art) {
|
||||
art.on('ready', () => {
|
||||
art.layers.add({
|
||||
name: 'miniProgressBar',
|
||||
name: 'mini-progress-bar',
|
||||
mounted($progressBar) {
|
||||
art.on('destroy', () => {
|
||||
$progressBar.style.display = 'none';
|
||||
@@ -21,6 +21,6 @@ export default function miniProgressBar(art) {
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'miniProgressBar',
|
||||
name: 'mini-progress-bar',
|
||||
};
|
||||
}
|
||||
@@ -113,6 +113,7 @@ export default {
|
||||
style: o,
|
||||
escape: b,
|
||||
encoding: s,
|
||||
onVttLoad: f,
|
||||
},
|
||||
moreVideoAttr: o,
|
||||
i18n: o,
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function playbackRate(art) {
|
||||
} = art;
|
||||
|
||||
function getI18n(value) {
|
||||
return value === 1.0 ? i18n.get('Normal') : value;
|
||||
return value === 1.0 ? i18n.get('Normal') : value.toFixed(1);
|
||||
}
|
||||
|
||||
function update($panel, $tooltip, value) {
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
.art-video-player {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
zoom: 1;
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
color: #eee;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background-color: #000;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
-ms-high-contrast-adjust: none;
|
||||
|
||||
@@ -28,27 +29,17 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: var(--art-scrollbar-size);
|
||||
height: var(--art-scrollbar-size);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #666;
|
||||
background-color: var(--art-scrollbar-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
background-color: var(--art-scrollbar-background-hover);
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -56,11 +47,12 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
|
||||
.art-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
.art-auto-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center();
|
||||
|
||||
.art-video-player {
|
||||
transition: all 0.2s ease;
|
||||
transition: width, height var(--art-duration) ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.art-video-player.art-backdrop {
|
||||
.art-contextmenus,
|
||||
.art-info,
|
||||
.art-settings,
|
||||
.art-layer-auto-playback,
|
||||
.art-selector-list,
|
||||
.art-volume-inner {
|
||||
.art-backdrop-filter();
|
||||
}
|
||||
}
|
||||
@@ -2,338 +2,24 @@
|
||||
.art-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
z-index: 60;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
padding: 50px 10px 0;
|
||||
justify-content: end;
|
||||
.art-full(60);
|
||||
top: auto;
|
||||
gap: var(--art-bottom-gap);
|
||||
bottom: var(--art-bottom-offset);
|
||||
height: var(--art-bottom-height);
|
||||
padding: 0 10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
|
||||
.art-progress {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.art-control-progress-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
.art-progress-loaded {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.art-progress-played {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.art-progress-highlight {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
visibility: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.1, 0.1);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
|
||||
.art-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2, 1.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
.art-control-loop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
|
||||
.art-loop-point {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-controls {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 45px;
|
||||
|
||||
.art-controls-left,
|
||||
.art-controls-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.art-controls-center {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.art-controls-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.art-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.75;
|
||||
font-size: 12px;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
.art-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
&:active {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-volume {
|
||||
.art-volume-panel {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: margin 0.2s cubic-bezier(0.4, 0, 1, 1), width 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
overflow: hidden;
|
||||
|
||||
.art-volume-slider-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
margin-top: -6px;
|
||||
background: #fff;
|
||||
|
||||
&::before {
|
||||
left: -54px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
height: 3px;
|
||||
margin-top: -2px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .art-volume-panel {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-quality {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
.art-qualitys {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
width: 100px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 3px;
|
||||
.art-quality-item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .art-qualitys {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner {
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
transition: all var(--art-duration) ease;
|
||||
.art-bottom-gradient();
|
||||
}
|
||||
|
||||
&.art-control-show,
|
||||
&.art-hover {
|
||||
.art-bottom {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-error,
|
||||
&.art-destroy {
|
||||
.art-progress-indicator,
|
||||
.art-progress-tip {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
.art-bottom {
|
||||
height: 105px;
|
||||
padding: 50px 7px 0;
|
||||
.art-controls {
|
||||
height: 40px;
|
||||
}
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,36 +4,24 @@
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
min-width: 200px;
|
||||
padding: 5px 0;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
background-color: var(--art-background);
|
||||
min-width: var(--art-contextmenus-min-width);
|
||||
|
||||
.art-contextmenu {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
padding: 0 8px;
|
||||
|
||||
&:hover,
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
color: var(--art-theme);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.art-controls {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--art-control-height);
|
||||
|
||||
.art-controls-left,
|
||||
.art-controls-right {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.art-controls-center {
|
||||
.art-center(none);
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.art-controls-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.art-control {
|
||||
.art-center();
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
opacity: var(--art-control-opacity);
|
||||
min-height: var(--art-control-height);
|
||||
min-width: var(--art-control-height);
|
||||
transition: opacity var(--art-duration) ease;
|
||||
|
||||
.art-icon {
|
||||
height: var(--art-control-icon-size);
|
||||
width: var(--art-control-icon-size);
|
||||
transform: scale(var(--art-control-icon-scale));
|
||||
transition: transform var(--art-duration) ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,4 @@
|
||||
.art-video-player {
|
||||
.art-danmuku {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.art-danmuku {
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,12 +1,3 @@
|
||||
.art-video-player {
|
||||
&.art-fullscreen-web {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.art-fullscreen-web {
|
||||
.art-full(9999, fixed);
|
||||
}
|
||||
@@ -1,7 +1,3 @@
|
||||
.art-video-player {
|
||||
&.art-hide-cursor {
|
||||
* {
|
||||
cursor: none !important;
|
||||
}
|
||||
}
|
||||
.art-hide-cursor * {
|
||||
cursor: none !important;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.art-icon {
|
||||
line-height: 1;
|
||||
.art-center();
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
@import './variables.less';
|
||||
@import './mixins.less';
|
||||
@import './artplayer.less';
|
||||
@import './icon.less';
|
||||
@import './backdrop.less';
|
||||
@import './video.less';
|
||||
@import './poster.less';
|
||||
@import './subtitle.less';
|
||||
@@ -7,6 +11,9 @@
|
||||
@import './mask.less';
|
||||
@import './loading.less';
|
||||
@import './bottom.less';
|
||||
@import './progress.less';
|
||||
@import './controls.less';
|
||||
@import './volume.less';
|
||||
@import './notice.less';
|
||||
@import './contextmenu.less';
|
||||
@import './setting.less';
|
||||
@@ -20,3 +27,4 @@
|
||||
@import './plugins.less';
|
||||
@import './selector.less';
|
||||
@import './hint.less';
|
||||
@import './mobile.less';
|
||||
@@ -1,38 +1,35 @@
|
||||
.art-video-player {
|
||||
.art-info {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 100;
|
||||
width: 350px;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 3px;
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-info-item {
|
||||
.art-info-panel {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
.art-info-title {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.art-info-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: all;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.art-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.art-info-title {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.art-info-content {
|
||||
width: 250px;
|
||||
.art-truncate();
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
.art-video-player {
|
||||
.art-layers {
|
||||
.art-full(40);
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
.art-layer {
|
||||
pointer-events: auto;
|
||||
}
|
||||
@@ -19,7 +11,7 @@
|
||||
|
||||
&.art-layer-show {
|
||||
.art-layers {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,7 @@
|
||||
.art-video-player {
|
||||
.art-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center(none);
|
||||
.art-full(70);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,43 +1,29 @@
|
||||
.art-video-player {
|
||||
.art-mask {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.art-center();
|
||||
.art-full(50);
|
||||
pointer-events: none;
|
||||
|
||||
.art-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 65px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0.85;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
.art-center();
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
width: var(--art-state-size);
|
||||
height: var(--art-state-size);
|
||||
transition: all var(--art-duration) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mask-show {
|
||||
.art-mask {
|
||||
display: flex;
|
||||
.art-state {
|
||||
opacity: var(--art-state-opacity);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
&.art-loading-show {
|
||||
.art-state {
|
||||
position: static;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +1,62 @@
|
||||
.art-video-player {
|
||||
.art-mini-header {
|
||||
display: none;
|
||||
.art-mini-popup {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
background: #000;
|
||||
border-radius: 3px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.art-video {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.art-mini-close {
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 20;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.art-mini-title {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: move;
|
||||
}
|
||||
.art-mini-close {
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.art-mini-state {
|
||||
.art-full(30);
|
||||
.art-center();
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
|
||||
.art-icon {
|
||||
opacity: 0.75;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
transform: scale(3);
|
||||
pointer-events: auto;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.art-is-dragging {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.art-mini {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 400px;
|
||||
height: 225px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
.art-mini-header {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.art-hover {
|
||||
.art-mini-header {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
&:active {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-mask {
|
||||
.art-state {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
&.art-mini-droging {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.art-contextmenu,
|
||||
.art-bottom,
|
||||
.art-danmu,
|
||||
.art-info,
|
||||
.art-layers,
|
||||
.art-notice,
|
||||
.art-settings,
|
||||
.art-subtitle {
|
||||
display: none !important;
|
||||
&:hover {
|
||||
.art-mini-close, .art-mini-state {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.art-center(@display: flex) {
|
||||
display: @display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.art-full(@index: 0, @position: absolute) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: @index;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.art-bg-cover {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.art-text-border {
|
||||
text-shadow: #000 1px 0 1px, #000 0 1px 1px, #000 -1px 0 1px, #000 0 -1px 1px, #000 1px 1px 1px, #000 -1px -1px 1px,
|
||||
#000 1px -1px 1px, #000 -1px 1px 1px;
|
||||
}
|
||||
|
||||
.art-bottom-gradient {
|
||||
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
.art-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.art-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Whitespace-only changes.
@@ -1,7 +1,6 @@
|
||||
.art-video-player {
|
||||
.art-notice {
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
left: 0;
|
||||
@@ -9,12 +8,13 @@
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.art-notice-inner {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: inline-flex;
|
||||
padding: 5px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,58 +1,48 @@
|
||||
.art-video-player {
|
||||
.art-layer-miniProgressBar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.art-layer-mini-progress-bar {
|
||||
display: flex;
|
||||
.art-full();
|
||||
top: auto;
|
||||
height: 2px;
|
||||
background-color: var(--theme);
|
||||
background-color: var(--art-theme);
|
||||
}
|
||||
|
||||
.art-layer-lock {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center(none);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: calc(50% - 17px);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
|
||||
.art-layer-autoPlayback {
|
||||
.art-layer-auto-playback {
|
||||
display: none;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 60px;
|
||||
left: 10px;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
line-height: 1;
|
||||
background-color: rgb(0 0 0 / 80%);
|
||||
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-autoPlayback-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.art-auto-playback-close {
|
||||
.art-center();
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--theme);
|
||||
fill: var(--art-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.art-autoPlayback-last {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.art-autoPlayback-jump {
|
||||
color: var(--theme);
|
||||
.art-auto-playback-jump {
|
||||
color: var(--art-theme);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -63,16 +53,16 @@
|
||||
}
|
||||
|
||||
.art-subtitle {
|
||||
bottom: 10px !important;
|
||||
bottom: var(--art-subtitle-bottom) !important;
|
||||
}
|
||||
|
||||
.art-layer-miniProgressBar {
|
||||
display: block !important;
|
||||
.art-layer-mini-progress-bar {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show {
|
||||
.art-layer-miniProgressBar {
|
||||
.art-layer-mini-progress-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
.art-video-player {
|
||||
.art-poster {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.art-poster {
|
||||
.art-full(11);
|
||||
.art-bg-cover();
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
.art-bottom {
|
||||
.art-progress {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
.art-center();
|
||||
cursor: pointer;
|
||||
height: var(--art-progress-height);
|
||||
|
||||
.art-control-progress-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: height var(--art-duration) ease;
|
||||
background-color: var(--art-progress-color);
|
||||
|
||||
.art-progress-hover {
|
||||
display: none;
|
||||
.art-full(0);
|
||||
width: 0%;
|
||||
background-color: var(--art-hover-color);
|
||||
}
|
||||
|
||||
.art-progress-loaded {
|
||||
.art-full(10);
|
||||
width: 0%;
|
||||
background-color: var(--art-loaded-color);
|
||||
}
|
||||
|
||||
.art-progress-played {
|
||||
.art-full(20);
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.art-progress-highlight {
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
.art-full();
|
||||
right: auto;
|
||||
pointer-events: auto;
|
||||
width: var(--art-highlight-width);
|
||||
transform: translateX(calc(var(--art-highlight-width) / -2));
|
||||
background-color: var(--art-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
.art-center();
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
transition: transform var(--art-duration) ease;
|
||||
|
||||
.art-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
padding: 3px 5px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-control-progress-inner {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
background-color: var(--art-background);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
.art-control-loop {
|
||||
.art-full();
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
.art-loop-point {
|
||||
.art-full();
|
||||
left: 0%;
|
||||
width: var(--art-loop-width);
|
||||
background-color: var(--art-loop-color);
|
||||
transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +1,42 @@
|
||||
.art-video-player {
|
||||
.art-control-selector {
|
||||
position: relative;
|
||||
.art-selector-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 3px;
|
||||
.art-selector-item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 5px;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
&:hover,
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
}
|
||||
.art-control-selector {
|
||||
position: relative;
|
||||
|
||||
.art-selector-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
bottom: var(--art-control-height);
|
||||
background-color: var(--art-background);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
transition: all var(--art-duration) ease;
|
||||
|
||||
.art-selector-item {
|
||||
.art-center();
|
||||
padding: 10px 15px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.art-current {
|
||||
color: var(--art-theme);
|
||||
}
|
||||
}
|
||||
&:hover .art-selector-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-selector-list {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,21 @@
|
||||
.art-video-player {
|
||||
.art-settings {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
left: 0;
|
||||
bottom: 60px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
max-height: 300px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
bottom: var(--art-control-height);
|
||||
transition: all var(--art-duration) ease;
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-setting-panel {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
&.art-current {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.art-setting-item {
|
||||
@@ -29,7 +27,7 @@
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@@ -37,15 +35,7 @@
|
||||
}
|
||||
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: var(--art-theme);
|
||||
}
|
||||
|
||||
.art-icon-check {
|
||||
@@ -58,35 +48,29 @@
|
||||
}
|
||||
|
||||
.art-setting-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
.art-center();
|
||||
gap: 5px;
|
||||
|
||||
.art-setting-item-left-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
.art-center();
|
||||
height: var(--art-settings-icon-size);
|
||||
width: var(--art-settings-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.art-setting-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.art-center();
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
.art-setting-item-right-tooltip {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.art-setting-item-right-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.art-center();
|
||||
min-width: 32px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@@ -108,13 +92,7 @@
|
||||
|
||||
&.art-setting-show {
|
||||
.art-settings {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
.art-settings {
|
||||
max-height: 200px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,33 @@
|
||||
.art-video-player {
|
||||
.art-subtitle {
|
||||
display: none;
|
||||
.art-center(none);
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 0 5%;
|
||||
gap: var(--art-subtitle-gap);
|
||||
bottom: var(--art-subtitle-bottom);
|
||||
font-size: var(--art-subtitle-font-size);
|
||||
pointer-events: none;
|
||||
transition: bottom 0.2s ease;
|
||||
text-shadow: #000 1px 0 1px, #000 0 1px 1px, #000 -1px 0 1px, #000 0 -1px 1px, #000 1px 1px 1px,
|
||||
#000 -1px -1px 1px, #000 1px -1px 1px, #000 -1px 1px 1px;
|
||||
transition: bottom var(--art-duration) ease;
|
||||
.art-text-border();
|
||||
|
||||
p {
|
||||
word-break: break-all;
|
||||
height: fit-content;
|
||||
margin: 5px 0 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-subtitle-show {
|
||||
.art-subtitle {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show {
|
||||
.art-subtitle {
|
||||
bottom: 50px;
|
||||
bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.art-video-player {
|
||||
--art-theme: #f00;
|
||||
--art-duration: 0.2s;
|
||||
--art-state-size: 80px;
|
||||
--art-state-opacity: 0.8;
|
||||
--art-subtitle-font-size: 20px;
|
||||
--art-subtitle-gap: 5px;
|
||||
--art-subtitle-bottom: 15px;
|
||||
--art-control-height: 46px;
|
||||
--art-bottom-height: 100px;
|
||||
--art-bottom-offset: -20px;
|
||||
--art-bottom-gap: 5px;
|
||||
--art-progress-height: 6px;
|
||||
--art-highlight-width: 8px;
|
||||
--art-loop-width: 2px;
|
||||
--art-control-opacity: 0.75;
|
||||
--art-control-icon-size: 36px;
|
||||
--art-control-icon-scale: 1.1;
|
||||
--art-volume-handle-size: 14px;
|
||||
--art-background: rgba(0, 0, 0, 0.85);
|
||||
--art-settings-icon-size: 24px;
|
||||
--art-progress-color: rgba(255, 255, 255, 0.2);
|
||||
--art-hover-color: rgba(255, 255, 255, 0.5);
|
||||
--art-loaded-color: rgba(255, 255, 255, 0.2);
|
||||
--art-highlight-color: rgba(255, 255, 255, 0.5);
|
||||
--art-loop-color: rgba(255, 255, 255, 0.75);
|
||||
--art-scrollbar-size: 5px;
|
||||
--art-scrollbar-background: #666;
|
||||
--art-scrollbar-background-hover: #ccc;
|
||||
--art-contextmenus-min-width: 250px;
|
||||
}
|
||||
@@ -1,14 +1,4 @@
|
||||
.art-video-player {
|
||||
.art-video {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
.art-video {
|
||||
.art-full(10);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.art-control-volume {
|
||||
position: relative;
|
||||
|
||||
.art-volume-panel {
|
||||
.art-center(flex);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--art-control-height);
|
||||
width: var(--art-control-height);
|
||||
height: 120px;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
transition: all var(--art-duration) ease;
|
||||
|
||||
.art-volume-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
padding: 10px 0 12px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-volume-slider {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.art-volume-handle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 2px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
|
||||
.art-volume-loaded {
|
||||
.art-full(0);
|
||||
background-color: var(--art-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.art-volume-indicator {
|
||||
position: absolute;
|
||||
width: var(--art-volume-handle-size);
|
||||
height: var(--art-volume-handle-size);
|
||||
margin-top: calc(var(--art-volume-handle-size) / -2);
|
||||
flex-shrink: 0;
|
||||
transform: scale(1);
|
||||
border-radius: 100%;
|
||||
background-color: var(--art-theme);
|
||||
transition: transform var(--art-duration) ease;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.art-volume-indicator {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-volume-panel {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -116,15 +116,22 @@ export default class Subtitle extends Component {
|
||||
.then((buffer) => {
|
||||
const decoder = new TextDecoder(subtitleOption.encoding);
|
||||
const text = decoder.decode(buffer);
|
||||
|
||||
this.art.emit('subtitleLoad', subtitleOption.url);
|
||||
switch (subtitleOption.type || getExt(subtitleOption.url)) {
|
||||
case 'srt':
|
||||
return vttToBlob(srtToVtt(text));
|
||||
case 'ass':
|
||||
return vttToBlob(assToVtt(text));
|
||||
case 'vtt':
|
||||
return vttToBlob(text);
|
||||
case 'srt': {
|
||||
const vtt = srtToVtt(text);
|
||||
const vttNew = subtitleOption.onVttLoad(vtt);
|
||||
return vttToBlob(vttNew);
|
||||
}
|
||||
case 'ass': {
|
||||
const vtt = assToVtt(text);
|
||||
const vttNew = subtitleOption.onVttLoad(vtt);
|
||||
return vttToBlob(vttNew);
|
||||
}
|
||||
case 'vtt': {
|
||||
const vttNew = subtitleOption.onVttLoad(text);
|
||||
return vttToBlob(vttNew);
|
||||
}
|
||||
default:
|
||||
return subtitleOption.url;
|
||||
}
|
||||
|
||||
@@ -88,10 +88,6 @@ export default class Template {
|
||||
</div>
|
||||
<div class="art-info-close">[x]</div>
|
||||
</div>
|
||||
<div class="art-mini-header">
|
||||
<div class="art-mini-title"></div>
|
||||
<div class="art-mini-close">×</div>
|
||||
</div>
|
||||
<div class="art-contextmenus"></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -130,15 +126,10 @@ export default class Template {
|
||||
this.$info = this.query('.art-info');
|
||||
this.$infoPanel = this.query('.art-info-panel');
|
||||
this.$infoClose = this.query('.art-info-close');
|
||||
this.$miniHeader = this.query('.art-mini-header');
|
||||
this.$miniTitle = this.query('.art-mini-title');
|
||||
this.$miniClose = this.query('.art-mini-close');
|
||||
this.$contextmenu = this.query('.art-contextmenus');
|
||||
|
||||
if (option.backdrop) {
|
||||
addClass(this.$setting, 'art-backdrop-filter');
|
||||
addClass(this.$contextmenu, 'art-backdrop-filter');
|
||||
addClass(this.$info, 'art-backdrop-filter');
|
||||
addClass(this.$player, 'art-backdrop');
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
@@ -122,12 +122,10 @@ export default class Component {
|
||||
append($list, list);
|
||||
append($ref, $list);
|
||||
|
||||
if (this.art.option.backdrop) {
|
||||
addClass($list, 'art-backdrop-filter');
|
||||
}
|
||||
|
||||
const setLeft = () => {
|
||||
const left = getStyle($ref, 'width') / 2 - getStyle($list, 'width') / 2;
|
||||
const refWidth = getStyle($ref, 'width');
|
||||
const listWidth = getStyle($list, 'width');
|
||||
const left = refWidth / 2 - listWidth / 2;
|
||||
$list.style.left = `${left}px`;
|
||||
};
|
||||
|
||||
|
||||
@@ -87,3 +87,11 @@ export function replaceElement(newChild, oldChild) {
|
||||
export function createElement(tag) {
|
||||
return document.createElement(tag);
|
||||
}
|
||||
|
||||
export function getIcon(key = '', html = '') {
|
||||
const icon = createElement('i');
|
||||
addClass(icon, 'art-icon');
|
||||
addClass(icon, `art-icon-${key}`);
|
||||
append(icon, html);
|
||||
return icon;
|
||||
}
|
||||
Reference in new issue
Block a user