chore: Bump version to 5.1.2 and update style.less in artplayer-plugin-danmuku

packages/artplayer-plugin-danmuku/package.json

@@ -1,6 +1,6 @@
 {
     "license": "MIT",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "name": "artplayer-plugin-danmuku",
     "types": "types/artplayer-plugin-danmuku.d.ts",
     "description": "Danmuku plugin for ArtPlayer",

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -180,12 +180,12 @@ export default class Danmuku {
         const fontSize = this.option.fontSize;
 
         if (typeof fontSize === 'number') {
-            return clamp(fontSize, 12, clientHeight);
+            return Math.round(clamp(fontSize, 12, clientHeight));
         }
 
         if (typeof fontSize === 'string' && fontSize.endsWith('%')) {
             const ratio = parseFloat(fontSize) / 100;
-            return clamp(clientHeight * ratio, 12, clientHeight);
+            return Math.round(clamp(clientHeight * ratio, 12, clientHeight));
         }
 
         return Danmuku.option.fontSize;

packages/artplayer-plugin-danmuku/src/setting.js

@@ -27,7 +27,11 @@ export default class Setting {
             $mount: $controlsCenter,
             $danmuku: null,
             $toggle: null,
+            $config: null,
+            $configPanel: null,
             $configModes: null,
+            $style: null,
+            $stylePanel: null,
             $styleModes: null,
             $colors: null,
             $opacitySlider: null,
@@ -61,6 +65,20 @@ export default class Setting {
 
         art.on('fullscreen', (state) => this.onFullscreen(state));
         art.on('fullscreenWeb', (state) => this.onFullscreen(state));
+
+        art.proxy(this.template.$config, 'mouseenter', () => {
+            this.onMouseEnter({
+                $control: this.template.$config,
+                $panel: this.template.$configPanel,
+            });
+        });
+
+        art.proxy(this.template.$style, 'mouseenter', () => {
+            this.onMouseEnter({
+                $control: this.template.$style,
+                $panel: this.template.$stylePanel,
+            });
+        });
     }
 
     static get icons() {
@@ -306,7 +324,11 @@ export default class Setting {
 
         this.template.$danmuku = $danmuku;
         this.template.$toggle = this.query('.apd-toggle');
+        this.template.$config = this.query('.apd-config');
+        this.template.$configPanel = this.query('.apd-config-panel');
         this.template.$configModes = this.query('.apd-config-mode .apd-modes');
+        this.template.$style = this.query('.apd-style');
+        this.template.$stylePanel = this.query('.apd-style-panel');
         this.template.$styleModes = this.query('.apd-style-mode .apd-modes');
         this.template.$colors = this.query('.apd-colors');
         this.template.$antiOverlap = this.query('.apd-anti-overlap');
@@ -441,11 +463,12 @@ export default class Setting {
             ...this.FONT_SIZE,
             container: this.template.$fontSizeSlider,
             findIndex: () => {
-                return Math.round(this.danmuku.fontSize);
+                return this.danmuku.fontSize;
             },
             onChange: (index) => {
                 const { $fontSizeValue } = this.template;
                 $fontSizeValue.textContent = `${index}px`;
+                if (index === this.danmuku.fontSize) return;
                 this.danmuku.config({
                     fontSize: index,
                 });
@@ -543,6 +566,15 @@ export default class Setting {
         }
     }
 
+    onMouseEnter({ $control, $panel }) {
+        const { $player } = this.art.template;
+        const controlRect = $control.getBoundingClientRect();
+        const panelRect = $panel.getBoundingClientRect();
+        const playerRect = $player.getBoundingClientRect();
+        const diff = Math.max(controlRect.right + panelRect.width / 2 - playerRect.right - controlRect.width / 2, 0);
+        $panel.style.left = `-${panelRect.width / 2 - controlRect.width / 2 + diff}px`;
+    }
+
     async emit() {
         const { $input } = this.template;
 

packages/artplayer-plugin-danmuku/src/style.less

@@ -32,10 +32,11 @@
         .apd-config-panel {
             position: absolute;
             bottom: 24px;
-            left: -148px;
-            display: none;
+            left: 0;
             width: 320px;
             padding: 10px;
+            opacity: 0;
+            pointer-events: none;
 
             .apd-config-panel-inner {
                 width: 100%;
@@ -47,7 +48,8 @@
 
         &:hover {
             .apd-config-panel {
-                display: flex;
+                opacity: 100;
+                pointer-events: all;
             }
         }
     }
@@ -194,10 +196,11 @@
         .apd-style-panel {
             position: absolute;
             bottom: 24px;
-            left: -88px;
-            display: none;
+            left: 0;
             width: 200px;
             padding: 10px;
+            opacity: 0;
+            pointer-events: none;
 
             .apd-style-panel-inner {
                 width: 100%;
@@ -209,7 +212,8 @@
 
         &:hover {
             .apd-style-panel {
-                display: flex;
+                opacity: 100;
+                pointer-events: all;
             }
         }
     }