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

update docs

Browse Source
This commit is contained in:
Harvey committed 2022-05-16 15:40:05 +08:00
1 parent d0f6d643a4
commit 93a517eaf8
53 files changed
+444 -245
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/setting.js
+32 -14
View File
@@ -8,7 +8,7 @@ export default function setting(art, danmuku) {
const {
template: { $controlsCenter },
constructor: {
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass },
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass, isMobile },
},
} = art;
@@ -26,7 +26,12 @@ export default function setting(art, danmuku) {
const $danmuOff = getIcon(danmuOff, 'danmu-off');
const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
const $control = danmuku.option.mount instanceof Element ? danmuku.option.mount : $controlsCenter;
let $control = $controlsCenter;
if (danmuku.option.mount instanceof Element) {
$control = danmuku.option.mount;
}
function addEmitter() {
const colors = [
@@ -55,14 +60,16 @@ export default function setting(art, danmuku) {
<div class="art-danmuku-emitter">
<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 class="art-danmuku-style-panel-colors">
${colors.join('')}
<div class="art-danmuku-style-panel-inner">
<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 class="art-danmuku-style-panel-colors">
${colors.join('')}
</div>
</div>
</div>
</div>
@@ -72,10 +79,18 @@ export default function setting(art, danmuku) {
`,
);
if (isMobile) {
addClass($emitter, 'art-danmuku-mobile');
}
if ($control !== $controlsCenter) {
addClass($emitter, 'art-danmuku-mount');
}
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 $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);
@@ -117,6 +132,10 @@ export default function setting(art, danmuku) {
art.emit('artplayerPluginDanmuku:emit', danmu);
}
function resize() {
setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
}
art.proxy($send, 'click', onSend);
art.proxy($input, 'keypress', (event) => {
@@ -142,9 +161,8 @@ export default function setting(art, danmuku) {
}
});
art.on('resize', () => {
setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
});
resize();
art.on('resize', resize);
art.on('destroy', () => {
if ($control !== $controlsCenter) {
packages/artplayer-plugin-danmuku/src/style.less
+69 -57
View File
@@ -14,7 +14,7 @@
touch-action: manipulation;
-ms-high-contrast-adjust: none;
* {
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -47,71 +47,77 @@
.art-danmuku-style-panel {
display: none;
flex-direction: column;
position: absolute;
left: -70px;
bottom: 29px;
z-index: 999;
left: -65px;
bottom: 30px;
width: 160px;
padding: 10px 10px 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
padding-bottom: 10px;
.art-danmuku-style-panel-title {
font-size: 13px;
margin-bottom: 10px;
}
.art-danmuku-style-panel-modes {
.art-danmuku-style-panel-inner {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
flex-direction: column;
padding: 10px 10px 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
width: 47%;
padding: 4px 0;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
.art-danmuku-style-panel-title {
font-size: 13px;
margin-bottom: 10px;
}
}
.art-danmuku-style-panel-colors {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: space-between;
.art-danmuku-style-panel-color {
cursor: pointer;
width: 15px;
height: 15px;
border: 1px solid #fff;
&.art-current{
position: relative;
box-shadow: 0 0 2px #fff;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
.art-danmuku-style-panel-modes {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
width: 47%;
padding: 4px 0;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
}
}
.art-danmuku-style-panel-colors {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: space-between;
.art-danmuku-style-panel-color {
cursor: pointer;
width: 15px;
height: 15px;
border: 1px solid #fff;
&.art-current{
position: relative;
box-shadow: 0 0 2px #fff;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
}
}
}
}
}
}
@@ -163,4 +169,10 @@
pointer-events: none;
}
}
&.art-danmuku-mobile {
.art-danmuku-style .art-danmuku-style-panel {
left: 0;
}
}
}