feat: 添加对移动设备的支持并优化滑块事件处理

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

@@ -502,7 +502,9 @@ export default class Setting {
     }
 
     createSlider({ min, max, container, findIndex, onChange, steps = [] }) {
-        const { query, clamp } = this.utils;
+        const { query, clamp, setStyle } = this.utils;
+
+        setStyle(container, 'touch-action', 'none');
 
         container.innerHTML = `
             <div class="apd-slider-line">
@@ -533,30 +535,36 @@ export default class Setting {
         }
 
         function updateLeft(event) {
-            const { left, width } = container.getBoundingClientRect();
-            const value = clamp(event.clientX - left, 0, width);
-            const index = Math.round((value / width) * (max - min) + min);
-            reset(index);
+            const { top, height, left, width } = container.getBoundingClientRect();
+            if (this.art.isRotate) {
+                const value = clamp(event.clientY - top, 0, height);
+                const index = Math.round((value / height) * (max - min) + min);
+                reset(index);
+            } else {
+                const value = clamp(event.clientX - left, 0, width);
+                const index = Math.round((value / width) * (max - min) + min);
+                reset(index);
+            }
         }
 
         this.art.proxy(container, 'click', (event) => {
-            updateLeft(event);
+            updateLeft.call(this, event);
         });
 
-        this.art.proxy(container, 'mousedown', (event) => {
+        this.art.proxy(container, 'pointerdown', (event) => {
             isDroging = event.button === 0;
         });
 
-        this.art.on('document:mousemove', (event) => {
+        this.art.proxy(document, 'pointermove', (event) => {
             if (isDroging) {
-                updateLeft(event);
+                updateLeft.call(this, event);
             }
         });
 
-        this.art.on('document:mouseup', (event) => {
+        this.art.proxy(document, 'pointerup', (event) => {
             if (isDroging) {
                 isDroging = false;
-                updateLeft(event);
+                updateLeft.call(this, event);
             }
         });
 

packages/artplayer/src/setting/index.js

@@ -11,6 +11,7 @@ import {
     getRect,
     addClass,
     setStyle,
+    isMobile,
     errorHandle,
     inverseClass,
     createElement,
@@ -174,6 +175,9 @@ export default class Setting extends Component {
 
             setStyle($setting, 'height', `${settingHeight}px`);
             setStyle($setting, 'width', `${settingWidth}px`);
+
+            if (this.art.isRotate || isMobile) return;
+
             if (settingLeft + settingWidth > playerWidth) {
                 setStyle($setting, 'left', null);
                 setStyle($setting, 'right', null);