Fix mobile event

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { setStyles, includeFromEvent } from '../utils';
+import { setStyles, includeFromEvent, isMobile } from '../utils';
 import Component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -10,95 +10,101 @@ export default class Contextmenu extends Component {
     constructor(art) {
         super(art);
 
+        this.art = art;
         this.name = 'contextmenu';
+        this.$parent = art.template.$contextmenu;
 
+        art.once('ready', () => {
+            if (!isMobile) {
+                this.init();
+            }
+        });
+    }
+
+    init() {
         const {
             option,
             template: { $player, $contextmenu },
             events: { proxy },
-        } = art;
+        } = this.art;
 
-        this.$parent = $contextmenu;
+        this.add(
+            playbackRate({
+                disable: !option.playbackRate,
+                name: 'playbackRate',
+                index: 10,
+            }),
+        );
 
-        art.once('ready', () => {
-            this.add(
-                playbackRate({
-                    disable: !option.playbackRate,
-                    name: 'playbackRate',
-                    index: 10,
-                }),
-            );
+        this.add(
+            aspectRatio({
+                disable: !option.aspectRatio,
+                name: 'aspectRatio',
+                index: 20,
+            }),
+        );
 
-            this.add(
-                aspectRatio({
-                    disable: !option.aspectRatio,
-                    name: 'aspectRatio',
-                    index: 20,
-                }),
-            );
+        this.add(
+            info({
+                disable: false,
+                name: 'info',
+                index: 30,
+            }),
+        );
 
-            this.add(
-                info({
-                    disable: false,
-                    name: 'info',
-                    index: 30,
-                }),
-            );
+        this.add(
+            version({
+                disable: false,
+                name: 'version',
+                index: 40,
+            }),
+        );
 
-            this.add(
-                version({
-                    disable: false,
-                    name: 'version',
-                    index: 40,
-                }),
-            );
+        this.add(
+            close({
+                disable: false,
+                name: 'close',
+                index: 60,
+            }),
+        );
 
-            this.add(
-                close({
-                    disable: false,
-                    name: 'close',
-                    index: 60,
-                }),
-            );
+        for (let index = 0; index < option.contextmenu.length; index++) {
+            this.add(option.contextmenu[index]);
+        }
 
-            for (let index = 0; index < option.contextmenu.length; index++) {
-                this.add(option.contextmenu[index]);
+        proxy($player, 'contextmenu', (event) => {
+            event.preventDefault();
+            this.show = true;
+
+            const mouseX = event.clientX;
+            const mouseY = event.clientY;
+            const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
+            const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
+            let menuLeft = mouseX - cLeft;
+            let menuTop = mouseY - cTop;
+
+            if (mouseX + mWidth > cLeft + cWidth) {
+                menuLeft = cWidth - mWidth;
             }
 
-            proxy($player, 'contextmenu', (event) => {
-                event.preventDefault();
-                this.show = true;
+            if (mouseY + mHeight > cTop + cHeight) {
+                menuTop = cHeight - mHeight;
+            }
 
-                const mouseX = event.clientX;
-                const mouseY = event.clientY;
-                const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
-                const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
-                let menuLeft = mouseX - cLeft;
-                let menuTop = mouseY - cTop;
-
-                if (mouseX + mWidth > cLeft + cWidth) {
-                    menuLeft = cWidth - mWidth;
-                }
-
-                if (mouseY + mHeight > cTop + cHeight) {
-                    menuTop = cHeight - mHeight;
-                }
-
-                setStyles($contextmenu, {
-                    top: `${menuTop}px`,
-                    left: `${menuLeft}px`,
-                });
+            setStyles($contextmenu, {
+                top: `${menuTop}px`,
+                left: `${menuLeft}px`,
             });
+        });
 
-            proxy($player, 'click', (event) => {
-                if (!includeFromEvent(event, $contextmenu)) {
-                    this.show = false;
-                }
-            });
-
-            art.on('blur', () => {
+        proxy($player, 'click', (event) => {
+            if (!includeFromEvent(event, $contextmenu)) {
                 this.show = false;
-            });
+            }
+        });
+
+        this.art.on('blur', () => {
+            this.show = false;
         });
     }
 }

packages/artplayer/src/control/progress.js

@@ -3,7 +3,8 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
 export function getPosFromEvent(art, event) {
     const { $progress } = art.template;
     const { left } = $progress.getBoundingClientRect();
-    const width = clamp(event.pageX - left, 0, $progress.clientWidth);
+    const eventLeft = event.pageX || event.touches[0].clientX;
+    const width = clamp(eventLeft - left, 0, $progress.clientWidth);
     const second = (width / $progress.clientWidth) * art.duration;
     const time = secondToTime(second);
     const percentage = clamp(width / $progress.clientWidth, 0, 1);
@@ -154,6 +155,26 @@ export default function progress(options) {
                         isDroging = false;
                     }
                 });
+
+                proxy($indicator, 'touchstart', (event) => {
+                    if (event.touches.length === 1) {
+                        isDroging = true;
+                    }
+                });
+
+                proxy(document, 'touchmove', (event) => {
+                    if (event.touches.length === 1 && isDroging) {
+                        const { second, percentage } = getPosFromEvent(art, event);
+                        setBar('played', percentage);
+                        art.seek = second;
+                    }
+                });
+
+                proxy(document, 'touchend', () => {
+                    if (isDroging) {
+                        isDroging = false;
+                    }
+                });
             },
         };
     };

packages/artplayer/src/events/gestureInit.js

@@ -18,7 +18,7 @@ export default function gestureInit(art, events) {
             }
         });
 
-        events.proxy(document, 'touchmove', (event) => {
+        events.proxy($video, 'touchmove', (event) => {
             if (event.touches.length === 1 && isDroging) {
                 const widthDiff = event.touches[0].clientX - startX;
                 const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);

packages/artplayer/src/info.js

@@ -1,4 +1,4 @@
-import { queryAll } from './utils';
+import { queryAll, isMobile } from './utils';
 import Component from './utils/component';
 
 export default class Info extends Component {
@@ -6,7 +6,9 @@ export default class Info extends Component {
         super(art);
         this.name = 'info';
         art.once('ready', () => {
-            this.init();
+            if (!isMobile) {
+                this.init();
+            }
         });
     }
 

packages/artplayer/src/player/currentTimeMix.js

@@ -6,8 +6,9 @@ export default function currentTimeMix(art) {
     def(art, 'currentTime', {
         get: () => $video.currentTime || 0,
         set: (time) => {
-            // Fixed: The provided double value is non-finite
-            $video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, art.duration);
+            time = parseFloat(time);
+            if (Number.isNaN(time)) return;
+            $video.currentTime = clamp(time, 0, art.duration);
         },
     });
 }