mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 17:51:20 -08:00
remove danmuku mount
This commit is contained in:
Harvey Zack committed
1 parent
7379df3f00
commit
876989a572
56 files changed
+176
-251
No files matched your search
@@ -87,10 +87,8 @@ var art = new Artplayer({
|
||||
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
|
||||
moveOnFullscreen: true, // Whether to automatically move the input box in the control bar when the fullscreen
|
||||
// mount: document.querySelector('.your-danmu-input'), // Custom barrage input box position
|
||||
minWidth: 200, // At the at least width of the input box
|
||||
maxWidth: 600, // Maximum width in the input box
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -87,14 +87,8 @@ var art = new Artplayer({
|
||||
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% 宽度
|
||||
moveOnFullscreen: true, // 自定义挂载输入框时，当全屏状态下是否自动把输入框移动到控制栏里
|
||||
|
||||
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
||||
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
||||
// 移动端弹幕DEMO：http://artplayer.org/danmuku.html
|
||||
// mount: document.querySelector('.your-danmu-input'),
|
||||
minWidth: 200, // 输入框最少宽度，范围在[0 ~ 500]，填 0 则为无限制
|
||||
maxWidth: 600, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -58,8 +58,8 @@ export default class Danmuku {
|
||||
synchronousPlayback: false,
|
||||
lockTime: 5,
|
||||
maxLength: 100,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minWidth: 200,
|
||||
maxWidth: 600,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ import danmuStyle from 'bundle-text:./img/danmu-style.svg';
|
||||
export default function setting(art, danmuku) {
|
||||
const { option } = danmuku;
|
||||
const {
|
||||
template: { $controlsCenter },
|
||||
template: { $controlsCenter, $player },
|
||||
constructor: {
|
||||
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass, isMobile },
|
||||
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass },
|
||||
},
|
||||
} = art;
|
||||
|
||||
@@ -72,29 +72,13 @@ export default function setting(art, danmuku) {
|
||||
`,
|
||||
);
|
||||
|
||||
const $control = art.layers.add({
|
||||
name: 'danmuku-emitter',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: '-38px',
|
||||
height: '38px',
|
||||
width: '100%',
|
||||
padding: '2px',
|
||||
},
|
||||
});
|
||||
|
||||
if (isMobile) {
|
||||
addClass($emitter, 'art-danmuku-mobile');
|
||||
}
|
||||
|
||||
const $style = query('.art-danmuku-style', $emitter);
|
||||
const $input = query('.art-danmuku-input', $emitter);
|
||||
const $send = query('.art-danmuku-send', $emitter);
|
||||
const $panel = query('.art-danmuku-style-panel-inner', $emitter);
|
||||
const $modes = query('.art-danmuku-style-panel-modes', $emitter);
|
||||
const $colors = query('.art-danmuku-style-panel-colors', $emitter);
|
||||
const $layer = append($player, '<div class="art-layer-danmuku-emitter"></div>');
|
||||
|
||||
if (art.option.backdrop) {
|
||||
addClass($panel, 'art-backdrop-filter');
|
||||
@@ -136,11 +120,11 @@ export default function setting(art, danmuku) {
|
||||
|
||||
function onResize() {
|
||||
if ($controlsCenter.clientWidth < option.minWidth) {
|
||||
append($control, $emitter);
|
||||
setStyle($control, 'display', 'flex');
|
||||
append($layer, $emitter);
|
||||
setStyle($layer, 'display', 'flex');
|
||||
} else {
|
||||
append($controlsCenter, $emitter);
|
||||
setStyle($control, 'display', 'none');
|
||||
setStyle($layer, 'display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,7 +356,7 @@ export default function setting(art, danmuku) {
|
||||
});
|
||||
}
|
||||
|
||||
art.on(isMobile ? 'video:loadedmetadata' : 'ready', () => {
|
||||
art.once('video:loadedmetadata', () => {
|
||||
addEmitter();
|
||||
addControl();
|
||||
addSetting();
|
||||
|
||||
@@ -10,35 +10,6 @@
|
||||
max-width: 100%;
|
||||
color: #ffffff;
|
||||
background-color: rgb(255 255 255 / 30%);
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
touch-action: manipulation;
|
||||
-ms-high-contrast-adjust: none;
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
|
||||
.art-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.art-danmuku-style {
|
||||
position: relative;
|
||||
@@ -173,7 +144,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
.art-layer-danmuku-emitter {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -42px;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #000;
|
||||
|
||||
.art-danmuku-style .art-danmuku-style-panel {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user