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

调整传参方式

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-03 09:20:25 +08:00
1 parent d0fdab870d
commit e4668df2db
20 files changed
+127 -163
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/controls/progress.js
+15 -18
View File
@@ -9,16 +9,13 @@ export default class Progress {
this.set = this.set.bind(this);
}
apply(art) {
apply(art, $control) {
this.art = art;
this.init();
}
init() {
const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = this.art;
this.$control = $control;
const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = art;
append(
this.option.$control,
$control,
`
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
@@ -30,11 +27,11 @@ export default class Progress {
`
);
this.$loaded = this.option.$control.querySelector('.art-progress-loaded');
this.$played = this.option.$control.querySelector('.art-progress-played');
this.$highlight = this.option.$control.querySelector('.art-progress-highlight');
this.$indicator = this.option.$control.querySelector('.art-progress-indicator');
this.$tip = this.option.$control.querySelector('.art-progress-tip');
this.$loaded = $control.querySelector('.art-progress-loaded');
this.$played = $control.querySelector('.art-progress-played');
this.$highlight = $control.querySelector('.art-progress-highlight');
this.$indicator = $control.querySelector('.art-progress-indicator');
this.$tip = $control.querySelector('.art-progress-tip');
this.set('loaded', this.getLoaded());
highlight.forEach(item => {
@@ -57,7 +54,7 @@ export default class Progress {
this.set('played', 1);
});
proxy(this.option.$control, 'mousemove', event => {
proxy($control, 'mousemove', event => {
setStyle(this.$tip, 'display', 'block');
if (event.path.indexOf(this.$highlight) > -1) {
this.showHighlight(event);
@@ -66,11 +63,11 @@ export default class Progress {
}
});
proxy(this.option.$control, 'mouseout', () => {
proxy($control, 'mouseout', () => {
setStyle(this.$tip, 'display', 'none');
});
proxy(this.option.$control, 'click', event => {
proxy($control, 'click', event => {
if (event.target !== this.$indicator) {
const { second, percentage } = this.getPosFromEvent(event);
this.set('played', percentage);
@@ -104,7 +101,7 @@ export default class Progress {
const { text, time } = event.target.dataset;
this.$tip.innerHTML = text;
const left =
Number(time) / $video.duration * this.option.$control.clientWidth +
Number(time) / $video.duration * this.$control.clientWidth +
event.target.clientWidth / 2 -
this.$tip.clientWidth / 2;
setStyle(this.$tip, 'left', `${left}px`);
@@ -116,8 +113,8 @@ export default class Progress {
this.$tip.innerHTML = time;
if (width <= tipWidth / 2) {
setStyle(this.$tip, 'left', 0);
} else if (width > this.option.$control.clientWidth - tipWidth / 2) {
setStyle(this.$tip, 'left', `${this.option.$control.clientWidth - tipWidth}px`);
} else if (width > this.$control.clientWidth - tipWidth / 2) {
setStyle(this.$tip, 'left', `${this.$control.clientWidth - tipWidth}px`);
} else {
setStyle(this.$tip, 'left', `${width - tipWidth / 2}px`);
}