mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-16 01:26:16 -08:00
add danmuku maxWidth
This commit is contained in:
Harvey committed
1 parent
93a517eaf8
commit
2cb73141fb
54 files changed
+211
-169
No files matched your search
@@ -80,11 +80,15 @@ var art = new Artplayer({
|
||||
fontSize: 25, // Font size, supports numbers and percentages
|
||||
color: '#FFFFFF', // Default font color
|
||||
mode: 0, // Default mode, 0-scroll, 1-still
|
||||
margin: ['2%', 60], // Barrage top and bottom margins, supports numbers and percentages
|
||||
margin: [10, '25%'], // Barrage top and bottom margins, supports numbers and percentages
|
||||
antiOverlap: true, // Whether to prevent overlapping
|
||||
useWorker: true, // whether to use web workers
|
||||
synchronousPlayback: false, // Whether to sync to playback speed
|
||||
filter: (danmu) => danmu.text.length < 50, // Barrage filter function
|
||||
lockTime: 5, // Input box lock time
|
||||
maxLength: 100, // The maximum number of words that can be input can be input box
|
||||
minWidth: 150, // At the at least width of the input box
|
||||
maxWidth: 400, // Maximum width in the input box
|
||||
// mount: document.querySelector('.your-danmu-input'), // Custom barrage input box position
|
||||
}),
|
||||
],
|
||||
|
||||
@@ -80,11 +80,15 @@ var art = new Artplayer({
|
||||
fontSize: 25, // 字体大小，支持数字和百分比
|
||||
color: '#FFFFFF', // 默认字体颜色
|
||||
mode: 0, // 默认模式，0-滚动，1-静止
|
||||
margin: ['2%', 60], // 弹幕上下边距，支持数字和百分比
|
||||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
||||
antiOverlap: true, // 是否防重叠
|
||||
useWorker: true, // 是否使用 web worker
|
||||
synchronousPlayback: false, // 是否同步到播放速度
|
||||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
|
||||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
||||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
||||
minWidth: 150, // 输入框最少宽度，范围在[0 ~ 500]，超出则隐藏，填 0 则永不隐藏
|
||||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则 100% 宽度
|
||||
|
||||
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
||||
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
||||
|
||||
@@ -57,6 +57,9 @@ export default class Danmuku {
|
||||
useWorker: true,
|
||||
synchronousPlayback: false,
|
||||
lockTime: 5,
|
||||
maxLength: 100,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -74,6 +77,9 @@ export default class Danmuku {
|
||||
useWorker: 'boolean',
|
||||
synchronousPlayback: 'boolean',
|
||||
lockTime: 'number',
|
||||
maxLength: 'number',
|
||||
minWidth: 'number',
|
||||
maxWidth: 'number',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -259,6 +265,9 @@ export default class Danmuku {
|
||||
this.option.speed = clamp(this.option.speed, 1, 10);
|
||||
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
||||
this.option.lockTime = clamp(this.option.lockTime, 0, 60);
|
||||
this.option.maxLength = clamp(this.option.maxLength, 0, 500);
|
||||
this.option.minWidth = clamp(this.option.minWidth, 0, 500);
|
||||
this.option.maxWidth = clamp(this.option.maxWidth, 0, Infinity);
|
||||
|
||||
if (option.fontSize) {
|
||||
this.option.fontSize = this.getFontSize(this.option.fontSize);
|
||||
|
||||
@@ -5,6 +5,7 @@ import danmuConfig from 'bundle-text:./img/danmu-config.svg';
|
||||
import danmuStyle from 'bundle-text:./img/danmu-style.svg';
|
||||
|
||||
export default function setting(art, danmuku) {
|
||||
const { option } = danmuku;
|
||||
const {
|
||||
template: { $controlsCenter },
|
||||
constructor: {
|
||||
@@ -29,8 +30,8 @@ export default function setting(art, danmuku) {
|
||||
|
||||
let $control = $controlsCenter;
|
||||
|
||||
if (danmuku.option.mount instanceof Element) {
|
||||
$control = danmuku.option.mount;
|
||||
if (option.mount instanceof Element) {
|
||||
$control = option.mount;
|
||||
}
|
||||
|
||||
function addEmitter() {
|
||||
@@ -50,14 +51,14 @@ export default function setting(art, danmuku) {
|
||||
'#9B9B9B',
|
||||
'#FFFFFF',
|
||||
].map((item) => {
|
||||
const isCurrent = danmuku.option.color === item ? ' art-current' : '';
|
||||
const isCurrent = option.color === item ? ' art-current' : '';
|
||||
return `<div class="art-danmuku-style-panel-color${isCurrent}" data-color="${item}" style="background-color:${item}"></div>`;
|
||||
});
|
||||
|
||||
const $emitter = append(
|
||||
$control,
|
||||
`
|
||||
<div class="art-danmuku-emitter">
|
||||
<div class="art-danmuku-emitter" style="max-width: ${option.maxWidth ? `${option.maxWidth}px` : null}">
|
||||
<div class="art-danmuku-style">
|
||||
<div class="art-danmuku-style-panel">
|
||||
<div class="art-danmuku-style-panel-inner">
|
||||
@@ -73,7 +74,7 @@ export default function setting(art, danmuku) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="art-danmuku-input" maxlength="100" placeholder="发个弹幕见证当下" />
|
||||
<input class="art-danmuku-input" maxlength="${option.maxLength}" placeholder="发个弹幕见证当下" />
|
||||
<div class="art-danmuku-send">发送</div>
|
||||
</div>
|
||||
`,
|
||||
@@ -99,8 +100,8 @@ export default function setting(art, danmuku) {
|
||||
}
|
||||
|
||||
let timer = null;
|
||||
let mode = danmuku.option.mode;
|
||||
let color = danmuku.option.color;
|
||||
let mode = option.mode;
|
||||
let color = option.color;
|
||||
append($style, $danmuStyle);
|
||||
|
||||
function countdown(time) {
|
||||
@@ -128,12 +129,14 @@ export default function setting(art, danmuku) {
|
||||
$input.value = '';
|
||||
danmuku.emit(danmu);
|
||||
addClass($send, 'art-disabled');
|
||||
countdown(danmuku.option.lockTime);
|
||||
countdown(option.lockTime);
|
||||
art.emit('artplayerPluginDanmuku:emit', danmu);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
|
||||
if (option.minWidth) {
|
||||
setStyle($emitter, 'display', $control.clientWidth < option.minWidth ? 'none' : null);
|
||||
}
|
||||
}
|
||||
|
||||
art.proxy($send, 'click', onSend);
|
||||
@@ -343,8 +346,8 @@ export default function setting(art, danmuku) {
|
||||
{
|
||||
html: '弹幕防重叠',
|
||||
icon: '',
|
||||
tooltip: danmuku.option.antiOverlap ? '开启' : '关闭',
|
||||
switch: danmuku.option.antiOverlap,
|
||||
tooltip: option.antiOverlap ? '开启' : '关闭',
|
||||
switch: option.antiOverlap,
|
||||
onSwitch(item) {
|
||||
danmuku.config({
|
||||
antiOverlap: !item.switch,
|
||||
@@ -356,8 +359,8 @@ export default function setting(art, danmuku) {
|
||||
{
|
||||
html: '同步视频速度',
|
||||
icon: '',
|
||||
tooltip: danmuku.option.synchronousPlayback ? '开启' : '关闭',
|
||||
switch: danmuku.option.synchronousPlayback,
|
||||
tooltip: option.synchronousPlayback ? '开启' : '关闭',
|
||||
switch: option.synchronousPlayback,
|
||||
onSwitch(item) {
|
||||
danmuku.config({
|
||||
synchronousPlayback: !item.switch,
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
max-width: 400px;
|
||||
border-radius: 3px;
|
||||
max-width: 100%;
|
||||
color: #ffffff;
|
||||
background-color: rgb(255 255 255 / 30%);
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
|
||||
Reference in new issue
Block a user