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

add i18n

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-21 14:20:35 +08:00
1 parent 1b3b2de8d4
commit 0c6a297ee7
12 files changed
+374 -308
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/controls/index.js
+18 -3
View File
@@ -1,3 +1,4 @@
import { secondToTime, clamp } from '../utils';
import validControl from '../verification/control';
import Danmu from './danmu';
import Fullscreen from './fullscreen';
@@ -8,6 +9,7 @@ import Subtitle from './subtitle';
import Time from './time';
import Volume from './volume';
import Setting from './setting';
import Thumbnails from './thumbnails';
let id = 0;
export default class Controls {
@@ -30,6 +32,13 @@ export default class Controls {
index: 10
});
this.add({
control: Thumbnails,
disable: !this.art.option.thumbnails.url,
position: 'top',
index: 20
});
this.add({
control: PlayAndPause,
disable: false,
@@ -155,9 +164,15 @@ export default class Controls {
}
});
Object.defineProperty(option.control.prototype, 'addMenu', {
value: menus => {
console.log(menus);
Object.defineProperty(option.control.prototype, 'getPosFromEvent', {
value: event => {
const { $video, $progress } = this.art.refs;
const { left } = $progress.getBoundingClientRect();
const width = clamp(event.x - left, 0, $progress.clientWidth);
const second = width / $progress.clientWidth * $video.duration;
const time = secondToTime(second);
const percentage = clamp(width / $progress.clientWidth, 0, 1);
return { second, time, width, percentage };
}
});
}
src/controls/progress.js
+12 -53
View File
@@ -1,4 +1,4 @@
import { append, secondToTime, clamp } from '../utils';
import { append } from '../utils';
export default class Progress {
constructor(art, option) {
@@ -7,7 +7,6 @@ export default class Progress {
this.isDroging = false;
this.getLoaded = this.getLoaded.bind(this);
this.getPlayed = this.getPlayed.bind(this);
this.getPos = this.getPos.bind(this);
this.set = this.set.bind(this);
this.init();
}
@@ -23,21 +22,19 @@ export default class Progress {
append(
this.option.ref,
`
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
<div class="art-progress-played" style="background: ${theme}"></div>
<div class="art-progress-highlight"></div>
<div class="art-progress-thumbnails"></div>
<div class="art-progress-indicator" style="background: ${theme}"></div>
<div class="art-progress-tip art-tip"></div>
</div>
`
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
<div class="art-progress-played" style="background: ${theme}"></div>
<div class="art-progress-highlight"></div>
<div class="art-progress-indicator" style="background: ${theme}"></div>
<div class="art-progress-tip art-tip"></div>
</div>
`
);
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
this.$played = this.option.ref.querySelector('.art-progress-played');
this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
this.$thumbnails = this.option.ref.querySelector('.art-progress-thumbnails');
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
this.$tip = this.option.ref.querySelector('.art-progress-tip');
@@ -71,23 +68,15 @@ export default class Progress {
} else {
this.showTime(event);
}
if (this.art.option.thumbnails.url) {
this.$thumbnails.style.display = 'block';
this.showThumbnails(event);
}
});
proxy(this.option.ref, 'mouseout', () => {
this.$tip.style.display = 'none';
if (this.art.option.thumbnails.url) {
this.$thumbnails.style.display = 'none';
}
});
proxy(this.option.ref, 'click', event => {
if (event.target !== this.$indicator) {
const { second, percentage } = this.getPos(event);
const { second, percentage } = this.getPosFromEvent(event);
this.set('played', percentage);
player.seek(second);
}
@@ -99,7 +88,7 @@ export default class Progress {
proxy(document, 'mousemove', event => {
if (this.isDroging) {
const { second, percentage } = this.getPos(event);
const { second, percentage } = this.getPosFromEvent(event);
this.$indicator.classList.add('show-indicator');
this.set('played', percentage);
player.seek(second);
@@ -126,7 +115,7 @@ export default class Progress {
}
showTime(event) {
const { width, time } = this.getPos(event);
const { width, time } = this.getPosFromEvent(event);
const tipWidth = this.$tip.clientWidth;
this.$tip.innerHTML = time;
if (width <= tipWidth / 2) {
@@ -138,36 +127,6 @@ export default class Progress {
}
}
showThumbnails(event) {
const { width: posWidth } = this.getPos(event);
const { url, height, width, number } = this.art.option.thumbnails;
this.$thumbnails.style.backgroundImage = `url(${url})`;
this.$thumbnails.style.height = `${height}px`;
this.$thumbnails.style.width = `${width}px`;
if (posWidth <= width / 2) {
this.$thumbnails.style.left = 0;
} else if (posWidth > this.option.ref.clientWidth - width / 2) {
this.$thumbnails.style.left = `${this.option.ref.clientWidth - width}px`;
} else {
this.$thumbnails.style.left = `${posWidth - width / 2}px`;
}
const perWidth = this.option.ref.clientWidth / number;
const index = Math.ceil(posWidth / perWidth);
this.$thumbnails.style.backgroundPosition = `-${index * width}px 0`;
}
getPos(event) {
const { $video } = this.art.refs;
const { left } = this.option.ref.getBoundingClientRect();
const width = clamp(event.x - left, 0, this.option.ref.clientWidth);
const second = width / this.option.ref.clientWidth * $video.duration;
const time = secondToTime(second);
const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
return { second, time, width, percentage };
}
getPlayed() {
const { $video } = this.art.refs;
return $video.currentTime / $video.duration;
src/controls/thumbnails.js
+43
View File
@@ -0,0 +1,43 @@
export default class Thumbnails {
constructor(art, option) {
this.art = art;
this.option = option;
this.init();
}
init() {
const {
refs: { $progress },
events: { proxy }
} = this.art;
proxy($progress, 'mousemove', event => {
this.option.ref.style.display = 'block';
this.showThumbnails(event);
});
proxy($progress, 'mouseout', () => {
this.option.ref.style.display = 'none';
});
}
showThumbnails(event) {
const { $progress } = this.art.refs;
const { width: posWidth } = this.getPosFromEvent(event);
const { url, height, width, number } = this.art.option.thumbnails;
const perWidth = $progress.clientWidth / number;
const index = Math.ceil(posWidth / perWidth);
this.option.ref.style.backgroundImage = `url(${url})`;
this.option.ref.style.height = `${height}px`;
this.option.ref.style.width = `${width}px`;
this.option.ref.style.backgroundPosition = `-${index * width}px 0`;
if (posWidth <= width / 2) {
this.option.ref.style.left = 0;
} else if (posWidth > $progress.clientWidth - width / 2) {
this.option.ref.style.left = `${$progress.clientWidth - width}px`;
} else {
this.option.ref.style.left = `${posWidth - width / 2}px`;
}
}
}