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

添加弹幕设置

Browse Source
This commit is contained in:
zhw2590582 committed 2019-05-01 10:43:48 +08:00
1 parent c89f99f8a3
commit 941ab07c66
13 files changed
+295 -59
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/bilibiliDanmuParse.js
+1 -1
View File
@@ -10,7 +10,7 @@ export function bilibiliDanmuParseFromXml(xmlString) {
text,
time: Number(attr[0]),
mode: Number(attr[1]),
size: Number(attr[2]),
fontSize: Number(attr[2]),
color: `#${Number(attr[3]).toString(16)}`,
timestamp: Number(attr[4]),
pool: Number(attr[5]),
packages/artplayer-plugin-danmuku/src/danmuku.js
+21 -20
View File
@@ -5,8 +5,10 @@ export default class Danmuku {
constructor(art, option) {
this.art = art;
this.queue = [];
this.isStop = false;
this.refs = [];
this.option = {};
this.config(option);
this.isStop = false;
this.animationFrameTimer = null;
this.$danmuku = art.template.$danmuku;
art.i18n.update(Danmuku.i18n);
@@ -16,7 +18,6 @@ export default class Danmuku {
art.on('video:waiting', this.stop.bind(this));
art.on('resize', this.resize.bind(this));
art.on('destroy', this.stop.bind(this));
this.config(option);
if (typeof this.option.danmuku === 'function') {
this.option.danmuku().then(danmus => {
danmus.forEach(this.addToQueue.bind(this));
@@ -50,11 +51,10 @@ export default class Danmuku {
return {
danmuku: [],
speed: 5,
opacity: 1,
color: '#fff',
size: 25,
maxlength: 50,
margin: [10, 20],
margin: [10, 100],
opacity: 1,
fontSize: 25,
};
}
@@ -62,11 +62,10 @@ export default class Danmuku {
return {
danmuku: 'array|function|string',
speed: 'number',
opacity: 'number',
color: 'string',
size: 'number',
maxlength: 'number',
margin: 'array',
opacity: 'number',
fontSize: 'number',
};
}
@@ -80,27 +79,29 @@ export default class Danmuku {
utils: { clamp },
validator,
} = this.art.constructor;
this.option = Object.assign({}, Danmuku.option, option);
this.option = Object.assign({}, Danmuku.option, this.option, option);
validator(this.option, Danmuku.scheme);
this.option.speed = clamp(this.option.speed, 1, 10);
this.option.opacity = clamp(this.option.opacity, 0, 1);
this.option.size = clamp(this.option.size, 12, 30);
this.option.maxlength = clamp(this.option.maxlength, 10, 100);
this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
this.option.opacity = clamp(this.option.opacity, 0, 1);
this.option.fontSize = clamp(this.option.fontSize, 12, 30);
this.art.emit('artplayerPluginDanmuku:config', this.option);
}
emit(danmu) {
const { $player } = this.art.template;
danmu.$ref = this.getDanmuRef();
danmu.$ref.style.opacity = this.option.opacity;
danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
danmu.$ref.innerText = danmu.text;
danmu.$ref.style.fontSize = `${danmu.size || this.option.size}px`;
danmu.$ref.style.color = danmu.color;
const playerWidth = Danmuku.getRect($player, 'width');
const danmuWidth = Danmuku.getRect(danmu.$ref, 'width');
danmu.$restWidth = playerWidth + danmuWidth + 5;
danmu.$restTime = this.option.speed;
danmu.$lastStartTime = Date.now();
danmu.$ref.style.color = danmu.color || this.option.color;
danmu.$ref.style.left = `${playerWidth}px`;
danmu.$ref.style.top = `${this.getDanmuTop()}px`;
danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
@@ -291,7 +292,7 @@ export default class Danmuku {
this.suspend(danmu);
});
window.cancelAnimationFrame(this.animationFrameTimer);
this.art.emit('artplayerPluginDanmu:stop');
this.art.emit('artplayerPluginDanmuku:stop');
}
start() {
@@ -302,16 +303,16 @@ export default class Danmuku {
Danmuku.continue(danmu);
});
this.update();
this.art.emit('artplayerPluginDanmu:start');
this.art.emit('artplayerPluginDanmuku:start');
}
show() {
this.$danmuku.style = 'none';
this.art.emit('artplayerPluginDanmu:show');
this.$danmuku.style = 'block';
this.art.emit('artplayerPluginDanmuku:show');
}
hide() {
this.$danmuku.style = 'block';
this.art.emit('artplayerPluginDanmu:hide');
this.$danmuku.style = 'none';
this.art.emit('artplayerPluginDanmuku:hide');
}
}
packages/artplayer-plugin-danmuku/src/i18n.js
+12
View File
@@ -0,0 +1,12 @@
export default {
'zh-cn': {
'Danmu opacity': '弹幕透明度',
'Danmu speed': '弹幕速度',
'Danmu size': '弹幕大小',
},
'zh-tw': {
'Danmu opacity': '彈幕透明度',
'Danmu speed': '彈幕速度',
'Danmu size': '弹幕大小',
},
};
packages/artplayer-plugin-danmuku/src/index.js
+10 -4
View File
@@ -1,9 +1,17 @@
import { bilibiliDanmuParseFromXml, bilibiliDanmuParseFromAv, bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
import * as bilibili from './bilibiliDanmuParse';
import Danmuku from './danmuku';
import i18n from './i18n';
import settingOpacity from './settingOpacity';
import settingSpeed from './settingSpeed';
import settingSize from './settingSize';
function artplayerPluginDanmuku(option) {
return art => {
const danmuku = new Danmuku(art, option);
art.i18n.update(i18n);
art.setting.add(settingOpacity);
art.setting.add(settingSpeed);
art.setting.add(settingSize);
return {
name: 'artplayerPluginDanmuku',
emit: danmuku.addToQueue.bind(danmuku),
@@ -16,7 +24,5 @@ function artplayerPluginDanmuku(option) {
};
}
artplayerPluginDanmuku.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
artplayerPluginDanmuku.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
artplayerPluginDanmuku.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
artplayerPluginDanmuku.bilibili = bilibili;
export default artplayerPluginDanmuku;
packages/artplayer-plugin-danmuku/src/settingOpacity.js
+38
View File
@@ -0,0 +1,38 @@
export default function setting(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-opacity',
index: 30,
html: `
<div class="art-setting-header">
${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
</div>
<div class="art-setting-range">
<input type="range" value="1" min="0.1" max="1" step="0.1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = Number(value) * 100;
art.plugins.artplayerPluginDanmuku.config({
opacity: Number(value),
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.opacity) {
$range.value = config.opacity;
$value.innerText = config.opacity * 100;
}
});
});
},
};
}
packages/artplayer-plugin-danmuku/src/settingSize.js
+38
View File
@@ -0,0 +1,38 @@
export default function setting(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-size',
index: 50,
html: `
<div class="art-setting-header">
${i18n.get('Danmu size')}: <span class="art-value">25</span>px
</div>
<div class="art-setting-range">
<input type="range" value="25" min="14" max="30" step="1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
fontSize: Number(value),
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.fontSize) {
$range.value = config.fontSize;
$value.innerText = config.fontSize;
}
});
});
},
};
}
packages/artplayer-plugin-danmuku/src/settingSpeed.js
+38
View File
@@ -0,0 +1,38 @@
export default function setting(art) {
const {
i18n,
events: { proxy },
} = art;
return {
name: 'danmuku-speed',
index: 40,
html: `
<div class="art-setting-header">
${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
</div>
<div class="art-setting-range">
<input type="range" value="5" min="1" max="10" step="1">
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('input[type=range]');
const $value = $setting.querySelector('.art-value');
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
art.plugins.artplayerPluginDanmuku.config({
speed: Number(value),
});
art.on('artplayerPluginDanmuku:config', config => {
if ($range.value !== config.speed) {
$range.value = config.speed;
$value.innerText = config.speed;
}
});
});
},
};
}
packages/artplayer/src/plugins/subtitle.js
+1 -1
View File
@@ -17,7 +17,7 @@ function settingMix(art) {
</div>
`,
mounted: $setting => {
const $range = $setting.querySelector('.art-subtitle-range');
const $range = $setting.querySelector('.art-setting-range input');
const $value = $setting.querySelector('.art-subtitle-value');
proxy($range, 'change', () => {
const { value } = $range;