x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-29 11:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

add documentInit

Browse Source
This commit is contained in:
Harvey Zack committed 2023-04-17 22:04:57 +08:00
1 parent d531c41735
commit c4252b21b5
11 files changed
+60 -67
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/progress.js
+3 -22
View File
@@ -49,15 +49,9 @@ export default function progress(options) {
const $indicator = query('.art-progress-indicator', $control);
const $tip = query('.art-progress-tip', $control);
const { INDICATOR_SIZE, INDICATOR_SIZE_ICON, INDICATOR_SIZE_MOBILE, INDICATOR_SIZE_MOBILE_ICON } =
art.constructor;
setStyle($played, 'backgroundColor', 'var(--art-theme)');
let indicatorSize = INDICATOR_SIZE;
if (icons.indicator) {
indicatorSize = INDICATOR_SIZE_ICON;
append($indicator, icons.indicator);
} else {
setStyles($indicator, {
@@ -65,19 +59,6 @@ export default function progress(options) {
});
}
if (isMobile) {
indicatorSize = INDICATOR_SIZE_MOBILE;
if (icons.indicator) {
indicatorSize = INDICATOR_SIZE_MOBILE_ICON;
}
}
setStyles($indicator, {
left: `-${indicatorSize / 2}px`,
width: `${indicatorSize}px`,
height: `${indicatorSize}px`,
});
function showHighlight(event) {
const { width } = getPosFromEvent(art, event);
const { text } = event.target.dataset;
@@ -112,7 +93,7 @@ export default function progress(options) {
if (type === 'played') {
setStyle($played, 'width', `${percentage * 100}%`);
setStyle($indicator, 'left', `calc(${percentage * 100}% - ${indicatorSize / 2}px)`);
setStyle($indicator, 'left', `calc(${percentage * 100}% - var(--art-indicator-size) / 2)`);
}
}
@@ -175,7 +156,7 @@ export default function progress(options) {
isDroging = event.button === 0;
});
proxy(document, 'mousemove', (event) => {
art.on('document:mousemove', (event) => {
if (isDroging) {
const { second, percentage } = getPosFromEvent(art, event);
setBar('played', percentage);
@@ -183,7 +164,7 @@ export default function progress(options) {
}
});
proxy(document, 'mouseup', () => {
art.on('document:mouseup', () => {
if (isDroging) {
isDroging = false;
}
packages/artplayer/src/control/volume.js
+2 -2
View File
@@ -59,14 +59,14 @@ export default function volume(option) {
art.volume = getVolumeFromEvent(event);
});
proxy(document, 'mousemove', (event) => {
art.on('document:mousemove', (event) => {
if (isDroging) {
art.muted = false;
art.volume = getVolumeFromEvent(event);
}
});
proxy(document, 'mouseup', () => {
art.on('document:mouseup', () => {
if (isDroging) {
isDroging = false;
}
packages/artplayer/src/events/documentInit.js
+9
View File
@@ -0,0 +1,9 @@
export default function documentInit(art, events) {
events.proxy(document, 'mousemove', (event) => {
art.emit('document:mousemove', event);
});
events.proxy(document, 'mouseup', (event) => {
art.emit('document:mouseup', event);
});
}
packages/artplayer/src/events/index.js
+4 -2
View File
@@ -1,10 +1,11 @@
import { ArtPlayerError } from '../utils/error';
import clickInit from './clickInit';
import hoverInit from './hoverInit';
import mousemoveInit from './mousemoveInit';
import mouseMoveInit from './mouseMoveInit';
import resizeInit from './resizeInit';
import gestureInit from './gestureInit';
import viewInit from './viewInit';
import documentInit from './documentInit';
export default class Events {
constructor(art) {
@@ -16,10 +17,11 @@ export default class Events {
if (art.whitelist.state) {
clickInit(art, this);
hoverInit(art, this);
mousemoveInit(art, this);
mouseMoveInit(art, this);
resizeInit(art, this);
gestureInit(art, this);
viewInit(art, this);
documentInit(art, this);
}
}
packages/artplayer/src/index.js
-4
View File
@@ -224,10 +224,6 @@ Artplayer.NOTICE_TIME = 2000;
Artplayer.SETTING_WIDTH = 250;
Artplayer.SETTING_ITEM_WIDTH = 200;
Artplayer.SETTING_ITEM_HEIGHT = 35;
Artplayer.INDICATOR_SIZE = 14;
Artplayer.INDICATOR_SIZE_ICON = 16;
Artplayer.INDICATOR_SIZE_MOBILE = 18;
Artplayer.INDICATOR_SIZE_MOBILE_ICON = 20;
Artplayer.RESIZE_TIME = 500;
Artplayer.SCROLL_TIME = 200;
Artplayer.SCROLL_GAP = 50;
packages/artplayer/src/player/miniMix.js
+2 -2
View File
@@ -64,7 +64,7 @@ export default function miniMix(art) {
lastPageY = event.pageY;
});
proxy(document, 'mousemove', (event) => {
art.on('document:mousemove', (event) => {
if (isDroging) {
addClass($mini, 'art-mini-droging');
const x = event.pageX - lastPageX;
@@ -73,7 +73,7 @@ export default function miniMix(art) {
}
});
proxy(document, 'mouseup', () => {
art.on('document:mouseup', () => {
if (isDroging) {
isDroging = false;
removeClass($mini, 'art-mini-droging');
packages/artplayer/src/style/progress.less
+3
View File
@@ -55,6 +55,9 @@
.art-center();
position: absolute;
z-index: 40;
left: calc(var(--art-indicator-size) / -2);
width: var(--art-indicator-size);
height: var(--art-indicator-size);
border-radius: 50%;
transform: scale(0);
transition: transform var(--art-duration) ease;
packages/artplayer/src/style/variables.less
+1
View File
@@ -17,6 +17,7 @@
--art-control-icon-size: 36px;
--art-control-icon-scale: 1.1;
--art-volume-handle-size: 14px;
--art-indicator-size: 16px;
--art-background: rgba(0, 0, 0, 0.85);
--art-settings-icon-size: 24px;
--art-progress-color: rgba(255, 255, 255, 0.2);