update daumuku demo

packages/artplayer-plugin-danmuku/src/control/App.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
                     },