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

add danmuku style

Browse Source
This commit is contained in:
Harvey Zack committed 2022-05-14 11:44:51 +08:00
1 parent 31eacefa97
commit 1ec4719806
4 files changed
+96 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/setting.js
+28 -3
View File
@@ -8,7 +8,7 @@ export default function setting(art, danmuku) {
const {
template: { $controlsCenter },
constructor: {
utils: { removeClass, addClass, append, setStyle, tooltip, query },
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass },
},
} = art;
@@ -32,7 +32,16 @@ export default function setting(art, danmuku) {
$controlsCenter,
`
<div class="art-danmuku-emitter">
<div class="art-danmuku-style"></div>
<div class="art-danmuku-style">
<div class="art-danmuku-style-panel">
<div class="art-danmuku-style-panel-title">模式</div>
<div class="art-danmuku-style-panel-modes">
<div class="art-danmuku-style-panel-mode art-current" data-mode="0">滚动</div>
<div class="art-danmuku-style-panel-mode" data-mode="1">静止</div>
</div>
<div class="art-danmuku-style-panel-title">颜色</div>
</div>
</div>
<input class="art-danmuku-input" maxlength="100" placeholder="发个弹幕见证当下" />
<div class="art-danmuku-send">发送</div>
</div>
@@ -42,7 +51,14 @@ export default function setting(art, danmuku) {
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', $emitter);
const $modes = query('.art-danmuku-style-panel-modes', $emitter);
if (art.option.backdrop) {
addClass($panel, 'art-backdrop-filter');
}
let mode = 0;
let timer = null;
append($style, $danmuStyle);
@@ -63,7 +79,7 @@ export default function setting(art, danmuku) {
const danmu = {
text,
mode: 0,
mode,
color: '#ffffff',
border: true,
};
@@ -76,12 +92,21 @@ export default function setting(art, danmuku) {
}
art.proxy($send, 'click', onSend);
art.proxy($input, 'keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
onSend();
}
});
art.proxy($modes, 'click', (event) => {
const { dataset } = event.target;
if (dataset.mode) {
mode = Number(dataset.mode);
inverseClass(event.target, 'art-current');
}
});
}
function addControl() {
packages/artplayer-plugin-danmuku/src/style.less
+43 -1
View File
@@ -11,14 +11,56 @@
background-color: rgb(255 255 255 / 30%);
.art-danmuku-style {
position: relative;
display: flex;
width: 30px;
align-items: center;
justify-content: center;
cursor: pointer;
.art-danmuku-style-panel {
display: none;
flex-direction: column;
position: absolute;
left: -65px;
bottom: 29px;
width: 150px;
padding: 10px 10px 5px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
.art-danmuku-style-panel-title {
margin-bottom: 10px;
}
.art-danmuku-style-panel-modes {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
width: 48%;
padding: 4px 0;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
}
}
}
&:hover .art-danmuku-style-panel{
display: flex;
}
.art-icon {
opacity: 0.75;
cursor: pointer;
&:hover {
opacity: 1;