Module: controller, comment, setting
This commit is contained in:
DIYgod
parent
0cae80ba24
commit
7a2a40e8a9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
286
src/DPlayer.js
286
src/DPlayer.js
|
|
@ -14,6 +14,9 @@ import Subtitle from './subtitle';
|
|||
import Bar from './bar';
|
||||
import Time from './time';
|
||||
import Bezel from './bezel';
|
||||
import Controller from './controller';
|
||||
import Setting from './setting';
|
||||
import Comment from './comment';
|
||||
|
||||
let index = 0;
|
||||
const instances = [];
|
||||
|
|
@ -68,6 +71,8 @@ class DPlayer {
|
|||
|
||||
this.bezel = new Bezel(this.template.bezel);
|
||||
|
||||
this.controller = new Controller(this);
|
||||
|
||||
if (this.options.danmaku) {
|
||||
this.danmaku = new Danmaku({
|
||||
container: this.template.danmaku,
|
||||
|
|
@ -103,8 +108,12 @@ class DPlayer {
|
|||
},
|
||||
events: this.events
|
||||
});
|
||||
|
||||
this.comment = new Comment(this);
|
||||
}
|
||||
|
||||
this.setting = new Setting(this);
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
this.focus = false;
|
||||
}, true);
|
||||
|
|
@ -127,16 +136,12 @@ class DPlayer {
|
|||
});
|
||||
}
|
||||
else {
|
||||
const toggleController = () => {
|
||||
if (this.container.classList.contains('dplayer-hide-controller')) {
|
||||
this.container.classList.remove('dplayer-hide-controller');
|
||||
}
|
||||
else {
|
||||
this.container.classList.add('dplayer-hide-controller');
|
||||
}
|
||||
};
|
||||
this.template.videoWrap.addEventListener('click', toggleController);
|
||||
this.template.controllerMask.addEventListener('click', toggleController);
|
||||
this.template.videoWrap.addEventListener('click', () => {
|
||||
this.controller.toggle();
|
||||
});
|
||||
this.template.controllerMask.addEventListener('click', () => {
|
||||
this.controller.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
this.time = new Time(this);
|
||||
|
|
@ -228,164 +233,6 @@ class DPlayer {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* auto hide controller
|
||||
*/
|
||||
this.hideTime = 0;
|
||||
const hideController = () => {
|
||||
this.container.classList.remove('dplayer-hide-controller');
|
||||
clearTimeout(this.hideTime);
|
||||
this.hideTime = setTimeout(() => {
|
||||
if (this.video.played.length && !this.disableHideController) {
|
||||
this.container.classList.add('dplayer-hide-controller');
|
||||
closeSetting();
|
||||
closeComment();
|
||||
}
|
||||
}, 2000);
|
||||
};
|
||||
if (!isMobile) {
|
||||
this.container.addEventListener('mousemove', hideController);
|
||||
this.container.addEventListener('click', hideController);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* setting
|
||||
*/
|
||||
// toggle setting box
|
||||
const closeSetting = () => {
|
||||
if (this.template.settingBox.classList.contains('dplayer-setting-box-open')) {
|
||||
this.template.settingBox.classList.remove('dplayer-setting-box-open');
|
||||
this.template.mask.classList.remove('dplayer-mask-show');
|
||||
setTimeout(() => {
|
||||
this.template.settingBox.classList.remove('dplayer-setting-box-narrow');
|
||||
this.template.settingBox.classList.remove('dplayer-setting-box-speed');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
this.disableHideController = false;
|
||||
};
|
||||
const openSetting = () => {
|
||||
this.disableHideController = true;
|
||||
|
||||
this.template.settingBox.classList.add('dplayer-setting-box-open');
|
||||
this.template.mask.classList.add('dplayer-mask-show');
|
||||
};
|
||||
|
||||
this.template.mask.addEventListener('click', () => {
|
||||
closeSetting();
|
||||
});
|
||||
this.template.settingButton.addEventListener('click', () => {
|
||||
openSetting();
|
||||
});
|
||||
|
||||
this.loop = this.options.loop;
|
||||
let showdan = this.user.get('danmaku');
|
||||
if (!showdan) {
|
||||
this.danmaku && this.danmaku.hide();
|
||||
}
|
||||
let unlimitDan = this.user.get('unlimited');
|
||||
|
||||
// loop control
|
||||
this.template.loopToggle.checked = this.loop;
|
||||
|
||||
this.template.loop.addEventListener('click', () => {
|
||||
this.template.loopToggle.checked = !this.template.loopToggle.checked;
|
||||
if (this.template.loopToggle.checked) {
|
||||
this.loop = true;
|
||||
}
|
||||
else {
|
||||
this.loop = false;
|
||||
}
|
||||
closeSetting();
|
||||
});
|
||||
|
||||
// show danmaku control
|
||||
this.template.showDanmakuToggle.checked = showdan;
|
||||
|
||||
this.template.showDanmaku.addEventListener('click', () => {
|
||||
this.template.showDanmakuToggle.checked = !this.template.showDanmakuToggle.checked;
|
||||
if (this.template.showDanmakuToggle.checked) {
|
||||
showdan = true;
|
||||
if (!this.paused) {
|
||||
this.danmaku.show();
|
||||
}
|
||||
}
|
||||
else {
|
||||
showdan = false;
|
||||
this.danmaku.hide();
|
||||
}
|
||||
this.user.set('danmaku', showdan ? 1 : 0);
|
||||
closeSetting();
|
||||
});
|
||||
|
||||
// unlimited danmaku control
|
||||
this.template.unlimitDanmakuToggle.checked = unlimitDan;
|
||||
|
||||
this.template.unlimitDanmaku.addEventListener('click', () => {
|
||||
this.template.unlimitDanmakuToggle.checked = !this.template.unlimitDanmakuToggle.checked;
|
||||
if (this.template.unlimitDanmakuToggle.checked) {
|
||||
unlimitDan = true;
|
||||
this.danmaku.unlimit(true);
|
||||
}
|
||||
else {
|
||||
unlimitDan = false;
|
||||
this.danmaku.unlimit(false);
|
||||
}
|
||||
this.user.set('unlimited', unlimitDan ? 1 : 0);
|
||||
closeSetting();
|
||||
});
|
||||
|
||||
// speed control
|
||||
this.template.speed.addEventListener('click', () => {
|
||||
this.template.settingBox.classList.add('dplayer-setting-box-narrow');
|
||||
this.template.settingBox.classList.add('dplayer-setting-box-speed');
|
||||
|
||||
for (let i = 0; i < this.template.speedItem.length; i++) {
|
||||
this.template.speedItem[i].addEventListener('click', () => {
|
||||
this.video.playbackRate = this.template.speedItem[i].dataset.speed;
|
||||
closeSetting();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (this.danmaku) {
|
||||
// danmaku opacity
|
||||
const dWidth = 130;
|
||||
this.on('danmaku_opacity', (percentage) => {
|
||||
this.bar.set('danmaku', percentage, 'width');
|
||||
this.user.set('opacity', percentage);
|
||||
});
|
||||
this.danmaku.opacity(this.user.get('opacity'));
|
||||
|
||||
const danmakuMove = (event) => {
|
||||
const e = event || window.event;
|
||||
let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
|
||||
percentage = Math.max(percentage, 0);
|
||||
percentage = Math.min(percentage, 1);
|
||||
this.danmaku.opacity(percentage);
|
||||
};
|
||||
const danmakuUp = () => {
|
||||
document.removeEventListener('mouseup', danmakuUp);
|
||||
document.removeEventListener('mousemove', danmakuMove);
|
||||
this.template.danmakuOpacityBox.classList.remove('dplayer-setting-danmaku-active');
|
||||
};
|
||||
|
||||
this.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
|
||||
const e = event || window.event;
|
||||
let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
|
||||
percentage = Math.max(percentage, 0);
|
||||
percentage = Math.min(percentage, 1);
|
||||
this.danmaku.opacity(percentage);
|
||||
});
|
||||
this.template.danmakuOpacityBarWrapWrap.addEventListener('mousedown', () => {
|
||||
document.addEventListener('mousemove', danmakuMove);
|
||||
document.addEventListener('mouseup', danmakuUp);
|
||||
this.template.danmakuOpacityBox.classList.add('dplayer-setting-danmaku-active');
|
||||
});
|
||||
}
|
||||
|
||||
// set duration time
|
||||
if (this.video.duration !== 1) { // compatibility: Android browsers will output 1 at first
|
||||
this.template.dtime.innerHTML = this.video.duration ? utils.secondToTime(this.video.duration) : '00:00';
|
||||
|
|
@ -401,101 +248,6 @@ class DPlayer {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* comment
|
||||
*/
|
||||
|
||||
const closeCommentSetting = () => {
|
||||
if (this.template.commentSettingBox.classList.contains('dplayer-comment-setting-open')) {
|
||||
this.template.commentSettingBox.classList.remove('dplayer-comment-setting-open');
|
||||
}
|
||||
};
|
||||
const toggleCommentSetting = () => {
|
||||
if (this.template.commentSettingBox.classList.contains('dplayer-comment-setting-open')) {
|
||||
this.template.commentSettingBox.classList.remove('dplayer-comment-setting-open');
|
||||
}
|
||||
else {
|
||||
this.template.commentSettingBox.classList.add('dplayer-comment-setting-open');
|
||||
}
|
||||
};
|
||||
|
||||
const closeComment = () => {
|
||||
if (!this.template.controller.classList.contains('dplayer-controller-comment')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.template.controller.classList.remove('dplayer-controller-comment');
|
||||
this.template.mask.classList.remove('dplayer-mask-show');
|
||||
this.container.classList.remove('dplayer-show-controller');
|
||||
|
||||
closeCommentSetting();
|
||||
|
||||
this.disableHideController = false;
|
||||
};
|
||||
const openComment = () => {
|
||||
this.disableHideController = true;
|
||||
|
||||
if (!this.template.controller.classList.contains('dplayer-controller-comment')) {
|
||||
this.template.controller.classList.add('dplayer-controller-comment');
|
||||
this.template.mask.classList.add('dplayer-mask-show');
|
||||
this.container.classList.add('dplayer-show-controller');
|
||||
this.template.commentInput.focus();
|
||||
}
|
||||
};
|
||||
|
||||
this.template.mask.addEventListener('click', () => {
|
||||
closeComment();
|
||||
});
|
||||
this.template.commentButton.addEventListener('click', () => {
|
||||
openComment();
|
||||
});
|
||||
this.template.commentSettingButton.addEventListener('click', () => {
|
||||
toggleCommentSetting();
|
||||
});
|
||||
|
||||
// comment setting box
|
||||
this.template.commentColorSettingBox.addEventListener('click', () => {
|
||||
const sele = this.template.commentColorSettingBox.querySelector(`input:checked+span`);
|
||||
if (sele) {
|
||||
const color = this.template.commentColorSettingBox.querySelector(`input:checked`).value;
|
||||
this.template.commentSettingFill.style.fill = color;
|
||||
this.template.commentInput.style.color = color;
|
||||
this.template.commentSendFill.style.fill = color;
|
||||
}
|
||||
});
|
||||
|
||||
const sendComment = () => {
|
||||
this.template.commentInput.blur();
|
||||
|
||||
// text can't be empty
|
||||
if (!this.template.commentInput.value.replace(/^\s+|\s+$/g, '')) {
|
||||
this.notice(this.tran('Please input danmaku content!'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.danmaku.send({
|
||||
text: this.template.commentInput.value,
|
||||
color: this.container.querySelector('.dplayer-comment-setting-color input:checked').value,
|
||||
type: this.container.querySelector('.dplayer-comment-setting-type input:checked').value
|
||||
}, () => {
|
||||
this.template.commentInput.value = '';
|
||||
closeComment();
|
||||
});
|
||||
};
|
||||
|
||||
this.template.commentInput.addEventListener('click', () => {
|
||||
closeCommentSetting();
|
||||
});
|
||||
this.template.commentInput.addEventListener('keydown', (e) => {
|
||||
const event = e || window.event;
|
||||
if (event.keyCode === 13) {
|
||||
sendComment();
|
||||
}
|
||||
});
|
||||
|
||||
this.template.commentSendButton.addEventListener('click', sendComment);
|
||||
|
||||
this.fullScreen = new FullScreen(this);
|
||||
|
||||
// browser full screen
|
||||
|
|
@ -526,12 +278,12 @@ class DPlayer {
|
|||
case 37:
|
||||
event.preventDefault();
|
||||
this.seek(this.video.currentTime - 5);
|
||||
hideController();
|
||||
this.controller.setAutoHide();
|
||||
break;
|
||||
case 39:
|
||||
event.preventDefault();
|
||||
this.seek(this.video.currentTime + 5);
|
||||
hideController();
|
||||
this.controller.setAutoHide();
|
||||
break;
|
||||
case 38:
|
||||
event.preventDefault();
|
||||
|
|
@ -873,7 +625,7 @@ class DPlayer {
|
|||
this.ended = false;
|
||||
this.on('ended', () => {
|
||||
this.bar.set('played', 1, 'width');
|
||||
if (!this.loop) {
|
||||
if (!this.setting.loop) {
|
||||
this.ended = true;
|
||||
this.pause();
|
||||
}
|
||||
|
|
@ -1050,7 +802,7 @@ class DPlayer {
|
|||
destroy () {
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
this.pause();
|
||||
clearTimeout(this.hideTime);
|
||||
this.controller.destroy();
|
||||
this.time.destroy();
|
||||
this.video.src = '';
|
||||
this.container.innerHTML = '';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
class Comment {
|
||||
constructor (player) {
|
||||
this.player = player;
|
||||
|
||||
this.player.template.mask.addEventListener('click', () => {
|
||||
this.hide();
|
||||
});
|
||||
this.player.template.commentButton.addEventListener('click', () => {
|
||||
this.show();
|
||||
});
|
||||
this.player.template.commentSettingButton.addEventListener('click', () => {
|
||||
this.toggleSetting();
|
||||
});
|
||||
|
||||
this.player.template.commentColorSettingBox.addEventListener('click', () => {
|
||||
const sele = this.player.template.commentColorSettingBox.querySelector(`input:checked+span`);
|
||||
if (sele) {
|
||||
const color = this.player.template.commentColorSettingBox.querySelector(`input:checked`).value;
|
||||
this.player.template.commentSettingFill.style.fill = color;
|
||||
this.player.template.commentInput.style.color = color;
|
||||
this.player.template.commentSendFill.style.fill = color;
|
||||
}
|
||||
});
|
||||
|
||||
this.player.template.commentInput.addEventListener('click', () => {
|
||||
this.hideSetting();
|
||||
});
|
||||
this.player.template.commentInput.addEventListener('keydown', (e) => {
|
||||
const event = e || window.event;
|
||||
if (event.keyCode === 13) {
|
||||
this.send();
|
||||
}
|
||||
});
|
||||
|
||||
this.player.template.commentSendButton.addEventListener('click', () => {
|
||||
this.send();
|
||||
});
|
||||
}
|
||||
|
||||
show () {
|
||||
this.player.controller.disableAutoHide = true;
|
||||
this.player.template.controller.classList.add('dplayer-controller-comment');
|
||||
this.player.template.mask.classList.add('dplayer-mask-show');
|
||||
this.player.container.classList.add('dplayer-show-controller');
|
||||
this.player.template.commentInput.focus();
|
||||
}
|
||||
|
||||
hide () {
|
||||
this.player.template.controller.classList.remove('dplayer-controller-comment');
|
||||
this.player.template.mask.classList.remove('dplayer-mask-show');
|
||||
this.player.container.classList.remove('dplayer-show-controller');
|
||||
this.player.controller.disableAutoHide = false;
|
||||
this.hideSetting();
|
||||
}
|
||||
|
||||
showSetting () {
|
||||
this.player.template.commentSettingBox.classList.add('dplayer-comment-setting-open');
|
||||
}
|
||||
|
||||
hideSetting () {
|
||||
this.player.template.commentSettingBox.classList.remove('dplayer-comment-setting-open');
|
||||
}
|
||||
|
||||
toggleSetting () {
|
||||
if (this.player.template.commentSettingBox.classList.contains('dplayer-comment-setting-open')) {
|
||||
this.hideSetting();
|
||||
}
|
||||
else {
|
||||
this.showSetting();
|
||||
}
|
||||
}
|
||||
|
||||
send () {
|
||||
this.player.template.commentInput.blur();
|
||||
|
||||
// text can't be empty
|
||||
if (!this.player.template.commentInput.value.replace(/^\s+|\s+$/g, '')) {
|
||||
this.player.notice(this.player.tran('Please input danmaku content!'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.player.danmaku.send({
|
||||
text: this.player.template.commentInput.value,
|
||||
color: this.player.container.querySelector('.dplayer-comment-setting-color input:checked').value,
|
||||
type: this.player.container.querySelector('.dplayer-comment-setting-type input:checked').value
|
||||
}, () => {
|
||||
this.player.template.commentInput.value = '';
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Comment;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { isMobile } from './utils';
|
||||
|
||||
class Controller {
|
||||
constructor (player) {
|
||||
this.player = player;
|
||||
|
||||
this.autoHideTimer = 0;
|
||||
if (!isMobile) {
|
||||
this.player.container.addEventListener('mousemove', () => {
|
||||
this.setAutoHide();
|
||||
});
|
||||
this.player.container.addEventListener('click', () => {
|
||||
this.setAutoHide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setAutoHide () {
|
||||
this.show();
|
||||
clearTimeout(this.autoHideTimer);
|
||||
this.autoHideTimer = setTimeout(() => {
|
||||
if (this.player.video.played.length && !this.disableAutoHide) {
|
||||
this.hide();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
show () {
|
||||
this.player.container.classList.remove('dplayer-hide-controller');
|
||||
}
|
||||
|
||||
hide () {
|
||||
this.player.container.classList.add('dplayer-hide-controller');
|
||||
this.player.setting.hide();
|
||||
this.player.comment.hide();
|
||||
}
|
||||
|
||||
isShow () {
|
||||
return !this.player.container.classList.contains('dplayer-hide-controller');
|
||||
}
|
||||
|
||||
toggle () {
|
||||
if (this.isShow()) {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
destroy () {
|
||||
clearTimeout(this.autoHideTimer);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Controller;
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import utils from './utils';
|
||||
|
||||
class SettingBox {
|
||||
constructor (player) {
|
||||
this.player = player;
|
||||
|
||||
this.player.template.mask.addEventListener('click', () => {
|
||||
this.hide();
|
||||
});
|
||||
this.player.template.settingButton.addEventListener('click', () => {
|
||||
this.show();
|
||||
});
|
||||
|
||||
// loop
|
||||
this.loop = this.player.options.loop;
|
||||
this.player.template.loopToggle.checked = this.loop;
|
||||
this.player.template.loop.addEventListener('click', () => {
|
||||
this.player.template.loopToggle.checked = !this.player.template.loopToggle.checked;
|
||||
if (this.player.template.loopToggle.checked) {
|
||||
this.loop = true;
|
||||
}
|
||||
else {
|
||||
this.loop = false;
|
||||
}
|
||||
this.hide();
|
||||
});
|
||||
|
||||
// show danmaku
|
||||
this.showDanmaku = this.player.user.get('danmaku');
|
||||
if (!this.showDanmaku) {
|
||||
this.player.danmaku && this.player.danmaku.hide();
|
||||
}
|
||||
this.player.template.showDanmakuToggle.checked = this.showDanmaku;
|
||||
this.player.template.showDanmaku.addEventListener('click', () => {
|
||||
this.player.template.showDanmakuToggle.checked = !this.player.template.showDanmakuToggle.checked;
|
||||
if (this.player.template.showDanmakuToggle.checked) {
|
||||
this.showDanmaku = true;
|
||||
this.player.danmaku.show();
|
||||
}
|
||||
else {
|
||||
this.showDanmaku = false;
|
||||
this.player.danmaku.hide();
|
||||
}
|
||||
this.player.user.set('danmaku', this.showDanmaku ? 1 : 0);
|
||||
this.hide();
|
||||
});
|
||||
|
||||
// unlimit danmaku
|
||||
this.unlimitDanmaku = this.player.user.get('unlimited');
|
||||
this.player.template.unlimitDanmakuToggle.checked = this.unlimitDanmaku;
|
||||
this.player.template.unlimitDanmaku.addEventListener('click', () => {
|
||||
this.player.template.unlimitDanmakuToggle.checked = !this.player.template.unlimitDanmakuToggle.checked;
|
||||
if (this.player.template.unlimitDanmakuToggle.checked) {
|
||||
this.unlimitDanmaku = true;
|
||||
this.player.danmaku.unlimit(true);
|
||||
}
|
||||
else {
|
||||
this.unlimitDanmaku = false;
|
||||
this.player.danmaku.unlimit(false);
|
||||
}
|
||||
this.player.user.set('unlimited', this.unlimitDanmaku ? 1 : 0);
|
||||
this.hide();
|
||||
});
|
||||
|
||||
// speed
|
||||
this.player.template.speed.addEventListener('click', () => {
|
||||
this.player.template.settingBox.classList.add('dplayer-setting-box-narrow');
|
||||
this.player.template.settingBox.classList.add('dplayer-setting-box-speed');
|
||||
});
|
||||
for (let i = 0; i < this.player.template.speedItem.length; i++) {
|
||||
this.player.template.speedItem[i].addEventListener('click', () => {
|
||||
this.player.video.playbackRate = this.player.template.speedItem[i].dataset.speed;
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
|
||||
// danmaku opacity
|
||||
if (this.player.danmaku) {
|
||||
const dWidth = 130;
|
||||
this.player.on('danmaku_opacity', (percentage) => {
|
||||
this.player.bar.set('danmaku', percentage, 'width');
|
||||
this.player.user.set('opacity', percentage);
|
||||
});
|
||||
this.player.danmaku.opacity(this.player.user.get('opacity'));
|
||||
|
||||
const danmakuMove = (event) => {
|
||||
const e = event || window.event;
|
||||
let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
|
||||
percentage = Math.max(percentage, 0);
|
||||
percentage = Math.min(percentage, 1);
|
||||
this.player.danmaku.opacity(percentage);
|
||||
};
|
||||
const danmakuUp = () => {
|
||||
document.removeEventListener('mouseup', danmakuUp);
|
||||
document.removeEventListener('mousemove', danmakuMove);
|
||||
this.player.template.danmakuOpacityBox.classList.remove('dplayer-setting-danmaku-active');
|
||||
};
|
||||
|
||||
this.player.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
|
||||
const e = event || window.event;
|
||||
let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
|
||||
percentage = Math.max(percentage, 0);
|
||||
percentage = Math.min(percentage, 1);
|
||||
this.player.danmaku.opacity(percentage);
|
||||
});
|
||||
this.player.template.danmakuOpacityBarWrapWrap.addEventListener('mousedown', () => {
|
||||
document.addEventListener('mousemove', danmakuMove);
|
||||
document.addEventListener('mouseup', danmakuUp);
|
||||
this.player.template.danmakuOpacityBox.classList.add('dplayer-setting-danmaku-active');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
hide () {
|
||||
this.player.template.settingBox.classList.remove('dplayer-setting-box-open');
|
||||
this.player.template.mask.classList.remove('dplayer-mask-show');
|
||||
setTimeout(() => {
|
||||
this.player.template.settingBox.classList.remove('dplayer-setting-box-narrow');
|
||||
this.player.template.settingBox.classList.remove('dplayer-setting-box-speed');
|
||||
}, 300);
|
||||
|
||||
this.player.controller.disableAutoHide = false;
|
||||
}
|
||||
|
||||
show () {
|
||||
this.player.template.settingBox.classList.add('dplayer-setting-box-open');
|
||||
this.player.template.mask.classList.add('dplayer-mask-show');
|
||||
|
||||
this.player.controller.disableAutoHide = true;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = SettingBox;
|
||||
|
|
@ -38,7 +38,7 @@ class Template {
|
|||
this.unlimitDanmaku = this.container.querySelector('.dplayer-setting-danunlimit');
|
||||
this.unlimitDanmakuToggle = this.container.querySelector('.dplayer-danunlimit-setting-input');
|
||||
this.speed = this.container.querySelector('.dplayer-setting-speed');
|
||||
this.speedItem = this.container.querySelectorAll('dplayer-setting-speed-item');
|
||||
this.speedItem = this.container.querySelectorAll('.dplayer-setting-speed-item');
|
||||
this.danmakuOpacityBar = this.container.querySelector('.dplayer-danmaku-bar-inner');
|
||||
this.danmakuOpacityBarWrap = this.container.querySelector('.dplayer-danmaku-bar');
|
||||
this.danmakuOpacityBarWrapWrap = this.container.querySelector('.dplayer-danmaku-bar-wrap');
|
||||
|
|
|
|||
Loading…
Reference in New Issue