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

update daumuku demo

Browse Source
This commit is contained in:
Harvey committed 2022-05-13 18:33:06 +08:00
1 parent a043a55b38
commit 8c9e1e3446
12 files changed
+88 -228
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-danmuku/src/control/App.vue
-37
View File
@@ -1,37 +0,0 @@
<template>
<div class="artplayer-plugin-danmuku">
<div class="apd-toggle">toggle</div>
<div class="apd-config">config</div>
<div class="apd-input">input</div>
</div>
</template>
<script>
export default {
data() {
return {
option: {
danmuku: [],
speed: 5,
margin: [10, 100],
opacity: 1,
fontSize: 25,
filter: () => true,
antiOverlap: true,
useWorker: true,
synchronousPlayback: false,
},
danmu: {
text: '',
mode: 0,
time: 0,
color: '#ffffff',
border: true,
},
};
},
mounted() {
this.option = Object.assign(this.option, this.$danmuku.option);
},
};
</script>
packages/artplayer-plugin-danmuku/src/control/index.js
-45
View File
@@ -1,45 +0,0 @@
import style from 'bundle-text:./style.less';
import { createApp } from 'vue';
import App from './App.vue';
if (typeof document !== 'undefined') {
if (!document.getElementById('artplayer-plugin-danmuku-style')) {
const $style = document.createElement('style');
$style.id = 'artplayer-plugin-danmuku-style';
$style.textContent = style;
document.head.appendChild($style);
}
}
export default class Control {
constructor(art, danmuku) {
this.art = art;
this.danmuku = danmuku;
this.apps = new Map();
}
mount(el) {
const that = this;
const app = createApp(App);
app.use({
install(app) {
app.config.globalProperties.$art = that.art;
app.config.globalProperties.$danmuku = that.danmuku;
},
});
app.mount(el);
this.apps.set(el, app);
return app;
}
unmount(el) {
const app = this.apps.get(el);
if (app) {
app.unmount();
this.apps.delete(el);
}
}
}
packages/artplayer-plugin-danmuku/src/control/style.less
-39
View File
@@ -1,39 +0,0 @@
.artplayer-plugin-danmuku {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-family: Roboto, Arial, Helvetica, sans-serif;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #666;
}
::-webkit-scrollbar-thumb:hover {
background-color: #ccc;
}
.apd-toggle {
width: 50px;
}
.apd-config {
width: 50px;
}
.apd-input {
flex: 1;
}
}
packages/artplayer-plugin-danmuku/src/danmuku.js
+22 -19
View File
@@ -109,23 +109,6 @@ export default class Danmuku {
return Danmuku.option.margin[1];
}
get fontSize() {
const { clamp } = this.utils;
const value = this.option.fontSize;
const { clientHeight } = this.$player;
if (typeof value === 'number') {
return clamp(value, 12, 200);
}
if (typeof value === 'string' && value.endsWith('%')) {
const ratio = parseFloat(value) / 100;
return clamp(clientHeight * ratio, 12, 200);
}
return this.option.fontSize;
}
filter(state, callback) {
return this.queue.filter((danmu) => danmu.$state === state).map(callback);
}
@@ -200,6 +183,22 @@ export default class Danmuku {
return result;
}
getFontSize(fontSize) {
const { clamp } = this.utils;
const { clientHeight } = this.$player;
if (typeof fontSize === 'number') {
return clamp(fontSize, 12, clientHeight);
}
if (typeof fontSize === 'string' && fontSize.endsWith('%')) {
const ratio = parseFloat(fontSize) / 100;
return clamp(clientHeight * ratio, 12, clientHeight);
}
return Danmuku.option.fontSize;
}
postMessage(message = {}) {
return new Promise((resolve) => {
if (this.option.useWorker && this.worker && this.worker.postMessage) {
@@ -250,11 +249,15 @@ export default class Danmuku {
this.option = Object.assign({}, Danmuku.option, this.option, option);
this.validator(this.option, Danmuku.scheme);
if (option.fontSize) this.reset();
this.option.speed = clamp(this.option.speed, 1, 10);
this.option.opacity = clamp(this.option.opacity, 0, 1);
if (option.fontSize) {
this.option.fontSize = this.getFontSize(this.option.fontSize);
this.reset();
}
this.art.emit('artplayerPluginDanmuku:config', this.option);
return this;
@@ -338,7 +341,7 @@ export default class Danmuku {
danmu.$ref.style.left = `${clientWidth}px`;
danmu.$ref.style.opacity = this.option.opacity;
danmu.$ref.style.fontSize = `${this.fontSize}px`;
danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
danmu.$ref.style.color = danmu.color || '#fff';
danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color || '#fff'}` : 'none';
danmu.$ref.style.marginLeft = '0px';
packages/artplayer-plugin-danmuku/src/setting.js
+10 -10
View File
@@ -110,30 +110,30 @@ export default function setting(art, danmuku) {
tooltip: '适中',
selector: [
{
html: '极慢',
fontSize: 12,
html: '极小',
fontSize: '2%',
},
{
html: '较慢',
fontSize: 7.5,
html: '较小',
fontSize: '4%',
},
{
default: true,
html: '适中',
fontSize: 5,
fontSize: '6%',
},
{
html: '较快',
fontSize: 2.5,
html: '较大',
fontSize: '8%',
},
{
html: '极快',
fontSize: 1,
html: '极大',
fontSize: '10%',
},
],
onSelect: function (item) {
danmuku.config({
speed: item.time,
fontSize: item.fontSize,
});
return item.html;
},
packages/artplayer/src/setting/index.js
+12 -9
View File
@@ -17,7 +17,7 @@ function makeRecursion(option, parentItem, parentList) {
return option;
}
function isHtmlType(val) {
function isStringOrNumber(val) {
return ['string', 'number'].includes(typeof val);
}
@@ -135,11 +135,11 @@ export default class Setting extends Component {
const $item = document.createElement('div');
addClass($item, 'art-setting-item');
if (isHtmlType(item.name)) {
if (isStringOrNumber(item.name)) {
$item.dataset.name = item.name;
}
if (isHtmlType(item.value)) {
if (isStringOrNumber(item.value)) {
$item.dataset.value = item.value;
}
@@ -151,11 +151,14 @@ export default class Setting extends Component {
switch (type) {
case 'switch':
append($icon, isHtmlType(item.icon) ? item.icon : icons.config);
append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
break;
case 'selector':
if (item.selector && item.selector.length) {
append($icon, isHtmlType(item.icon) ? item.icon : icons.config);
append(
$icon,
isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config,
);
} else {
append($icon, icons.check);
}
@@ -172,7 +175,7 @@ export default class Setting extends Component {
return $icon.innerHTML;
},
set(value) {
if (isHtmlType(value)) {
if (isStringOrNumber(value)) {
$icon.innerHTML = value;
}
},
@@ -189,7 +192,7 @@ export default class Setting extends Component {
return $html.innerHTML;
},
set(value) {
if (isHtmlType(value)) {
if (isStringOrNumber(value)) {
$html.innerHTML = value;
}
},
@@ -206,7 +209,7 @@ export default class Setting extends Component {
return $tooltip.innerHTML;
},
set(value) {
if (isHtmlType(value)) {
if (isStringOrNumber(value)) {
$tooltip.innerHTML = value;
}
},
@@ -270,7 +273,7 @@ export default class Setting extends Component {
if (item._parentItem && item._parentItem.onSelect) {
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
if (item._parentItem._$tooltip && isHtmlType(result)) {
if (item._parentItem._$tooltip && isStringOrNumber(result)) {
item._parentItem._$tooltip.innerHTML = result;
}
}