From 8c9e1e34465b45d61d77e2bcb6d882069e07d324 Mon Sep 17 00:00:00 2001 From: Harvey Date: Fri, 13 May 2022 18:33:06 +0800 Subject: [PATCH] update daumuku demo --- docs/assets/example/danmuku.js | 11 +++-- docs/mobile.html | 30 ------------ .../artplayer-plugin-danmuku/index.js | 48 ++++++++++--------- .../artplayer-plugin-danmuku/index.js.map | 2 +- docs/uncompiled/artplayer/index.js | 20 ++++---- docs/uncompiled/artplayer/index.js.map | 2 +- .../src/control/App.vue | 37 -------------- .../src/control/index.js | 45 ----------------- .../src/control/style.less | 39 --------------- .../artplayer-plugin-danmuku/src/danmuku.js | 41 ++++++++-------- .../artplayer-plugin-danmuku/src/setting.js | 20 ++++---- packages/artplayer/src/setting/index.js | 21 ++++---- 12 files changed, 88 insertions(+), 228 deletions(-) delete mode 100644 packages/artplayer-plugin-danmuku/src/control/App.vue delete mode 100644 packages/artplayer-plugin-danmuku/src/control/index.js delete mode 100644 packages/artplayer-plugin-danmuku/src/control/style.less diff --git a/docs/assets/example/danmuku.js b/docs/assets/example/danmuku.js index ec422aa81..2bd28f052 100644 --- a/docs/assets/example/danmuku.js +++ b/docs/assets/example/danmuku.js @@ -4,15 +4,18 @@ var art = new Artplayer({ autoSize: true, fullscreen: true, fullscreenWeb: true, + flip: true, + playbackRate: true, + aspectRatio: true, setting: true, plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku-v2.xml', - speed: 5, // 弹幕持续时间，单位秒 - opacity: 1, // 弹幕透明度 - margin: ['2%', 60], // 弹幕上下边距 + speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10] + opacity: 1, // 弹幕透明度，范围在[0 ~ 1] + fontSize: 25, // 字体大小，支持数字和百分比 + margin: ['2%', 60], // 弹幕上下边距，支持数字和百分比 antiOverlap: true, // 是否防重叠 - fontSize: 25, // 字体大小 useWorker: true, // 是否使用 web worker synchronousPlayback: false, // 是否同步到播放速度 filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数 diff --git a/docs/mobile.html b/docs/mobile.html index 6771ab98a..42535fe7f 100644 --- a/docs/mobile.html +++ b/docs/mobile.html @@ -42,7 +42,6 @@ - \ No newline at end of file diff --git a/packages/artplayer-plugin-danmuku/src/control/index.js b/packages/artplayer-plugin-danmuku/src/control/index.js deleted file mode 100644 index ce6520f94..000000000 --- a/packages/artplayer-plugin-danmuku/src/control/index.js +++ /dev/null @@ -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); - } - } -} diff --git a/packages/artplayer-plugin-danmuku/src/control/style.less b/packages/artplayer-plugin-danmuku/src/control/style.less deleted file mode 100644 index f8e9585ef..000000000 --- a/packages/artplayer-plugin-danmuku/src/control/style.less +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/packages/artplayer-plugin-danmuku/src/danmuku.js b/packages/artplayer-plugin-danmuku/src/danmuku.js index 3eaa9bab1..598678540 100644 --- a/packages/artplayer-plugin-danmuku/src/danmuku.js +++ b/packages/artplayer-plugin-danmuku/src/danmuku.js @@ -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'; diff --git a/packages/artplayer-plugin-danmuku/src/setting.js b/packages/artplayer-plugin-danmuku/src/setting.js index 194e3f222..331b6a37a 100644 --- a/packages/artplayer-plugin-danmuku/src/setting.js +++ b/packages/artplayer-plugin-danmuku/src/setting.js @@ -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; }, diff --git a/packages/artplayer/src/setting/index.js b/packages/artplayer/src/setting/index.js index 515909ffd..52658dbea 100644 --- a/packages/artplayer/src/setting/index.js +++ b/packages/artplayer/src/setting/index.js @@ -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; } }