xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bar module

This commit is contained in:
DIYgod 2017-12-22 00:44:30 +08:00
parent febfc6a0dd
commit 44866d64ce
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
5 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -140,4 +140,4 @@ var dp = new DPlayer({
**DPlayer** © [DIYgod](https://github.com/DIYgod), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by DIYgod with help from contributors ([list](https://github.com/DIYgod/DPlayer/contributors)).
> Blog [@Anotherhome](https://www.anotherhome.net) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)
> [Blog](https://diygod.me) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)

2
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

78
src/DPlayer.js
View File

@ -11,6 +11,7 @@ import Events from './events';
import FullScreen from './fullscreen';
import User from './user';
import Subtitle from './subtitle';
import Bar from './bar';
let index = 0;
const instances = [];
@ -26,22 +27,17 @@ class DPlayer {
constructor (options) {
this.options = handleOption(options);
this.options.container.classList.add('dplayer');
if (this.options.video.quality) {
this.qualityIndex = this.options.video.defaultQuality;
this.quality = this.options.video.quality[this.options.video.defaultQuality];
}
this.tran = new i18n(this.options.lang).tran;
this.icons = new SvgCollection(this.options);
this.events = new Events();
this.user = new User(this);
this.container = this.options.container;
this.container.classList.add('dplayer');
if (!this.options.danmaku) {
this.container.classList.add('dplayer-no-danmaku');
}
@ -60,24 +56,7 @@ class DPlayer {
icons: this.icons
});
const bar = {};
bar.volumeBar = this.template.volumeBar;
bar.playedBar = this.template.playedBar;
bar.loadedBar = this.template.loadedBar;
let barWidth;
/**
* Update progress bar, including loading progress bar and play progress bar
*
* @param {String} type - Point out which bar it is, should be played loaded or volume
* @param {Number} percentage
* @param {String} direction - Point out the direction of this bar, Should be height or width
*/
this.updateBar = (type, percentage, direction) => {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
bar[type + 'Bar'].style[direction] = percentage * 100 + '%';
};
this.bar = new Bar(this.template);
document.addEventListener('click', () => {
this.focus = false;
@ -208,7 +187,7 @@ class DPlayer {
this.playedTime = false;
this.animationFrame = () => {
if (this.playedTime) {
this.updateBar('played', this.video.currentTime / this.video.duration, 'width');
this.bar.set('played', this.video.currentTime / this.video.duration, 'width');
this.template.ptime.innerHTML = utils.secondToTime(this.video.currentTime);
}
window.requestAnimationFrame(this.animationFrame);
@ -249,12 +228,12 @@ class DPlayer {
this.template.playedBarWrap.addEventListener('mouseenter', this.mouseHandler);
this.template.playedBarWrap.addEventListener('mouseleave', this.mouseHandler);
let barWidth;
const thumbMove = (e) => {
let percentage = (e.clientX - utils.getElementViewLeft(this.template.playedBarWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.updateBar('played', percentage, 'width');
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.bar.set('played', percentage, 'width');
this.template.ptime.innerHTML = utils.secondToTime(percentage * this.video.duration);
};
@ -262,10 +241,10 @@ class DPlayer {
document.removeEventListener('mouseup', thumbUp);
document.removeEventListener('mousemove', thumbMove);
let percentage = (e.clientX - utils.getElementViewLeft(this.template.playedBarWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.updateBar('played', percentage, 'width');
this.seek(parseFloat(bar.playedBar.style.width) / 100 * this.video.duration);
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.bar.set('played', percentage, 'width');
this.seek(this.bar.get('played') * this.video.duration);
this.setTime();
};
@ -318,12 +297,12 @@ class DPlayer {
if (this.video.muted) {
this.video.muted = false;
this.switchVolumeIcon();
this.updateBar('volume', this.volume(), 'width');
this.bar.set('volume', this.volume(), 'width');
}
else {
this.video.muted = true;
this.template.volumeIcon.innerHTML = this.icons.get('volume-off');
this.updateBar('volume', 0, 'width');
this.bar.set('volume', 0, 'width');
}
});
@ -451,10 +430,9 @@ class DPlayer {
if (this.danmaku) {
// danmaku opacity
bar.danmakuBar = this.template.danmakuOpacityBar;
const dWidth = 130;
this.on('danmaku_opacity', (percentage) => {
this.updateBar('danmaku', percentage, 'width');
this.bar.set('danmaku', percentage, 'width');
this.user.set('opacity', percentage);
});
this.danmaku.opacity(this.user.get('opacity'));
@ -462,8 +440,8 @@ class DPlayer {
const danmakuMove = (event) => {
const e = event || window.event;
let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.danmaku.opacity(percentage);
};
const danmakuUp = () => {
@ -475,8 +453,8 @@ class DPlayer {
this.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
const e = event || window.event;
let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.danmaku.opacity(percentage);
});
this.template.danmakuOpacityBarWrapWrap.addEventListener('mousedown', () => {
@ -778,7 +756,7 @@ class DPlayer {
this.danmaku.seek();
}
this.updateBar('played', time / this.video.duration, 'width');
this.bar.set('played', time / this.video.duration, 'width');
}
/**
@ -836,9 +814,9 @@ class DPlayer {
volume (percentage, nostorage, nonotice) {
percentage = parseFloat(percentage);
if (!isNaN(percentage)) {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.updateBar('volume', percentage, 'width');
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.bar.set('volume', percentage, 'width');
const formatPercentage = `${(percentage * 100).toFixed(0)}%`;
this.template.volumeBarWrapWrap.dataset.balloon = formatPercentage;
if (!nostorage) {
@ -890,8 +868,8 @@ class DPlayer {
this.initMSE(this.video, video.type || 'auto');
if (danmakuAPI) {
this.template.danmakuLoading.style.display = 'block';
this.updateBar('played', 0, 'width');
this.updateBar('loaded', 0, 'width');
this.bar.set('played', 0, 'width');
this.bar.set('loaded', 0, 'width');
this.template.ptime.innerHTML = '00:00';
this.template.danmaku.innerHTML = '';
if (this.danmaku) {
@ -963,7 +941,7 @@ class DPlayer {
// show video loaded bar: to inform interested parties of progress downloading the media
this.on('progress', () => {
const percentage = video.buffered.length ? video.buffered.end(video.buffered.length - 1) / video.duration : 0;
this.updateBar('loaded', percentage, 'width');
this.bar.set('loaded', percentage, 'width');
});
// video download error: an error occurs
@ -974,7 +952,7 @@ class DPlayer {
// video end
this.ended = false;
this.on('ended', () => {
this.updateBar('played', 1, 'width');
this.bar.set('played', 1, 'width');
if (!this.loop) {
this.ended = true;
this.pause();

28
src/bar.js Normal file
View File

@ -0,0 +1,28 @@
class Bar {
constructor (template) {
this.elements = {};
this.elements.volume = template.volumeBar;
this.elements.played = template.playedBar;
this.elements.loaded = template.loadedBar;
this.elements.danmaku = template.danmakuOpacityBar;
}
/**
* Update progress
*
* @param {String} type - Point out which bar it is
* @param {Number} percentage
* @param {String} direction - Point out the direction of this bar, Should be height or width
*/
set (type, percentage, direction) {
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.elements[type].style[direction] = percentage * 100 + '%';
}
get (type) {
return parseFloat(this.elements[type].style.width) / 100;
}
}
module.exports = Bar;