mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 23:51: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
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user