优化手机端UI

packages/artplayer/src/events/clickInit.js

@@ -1,12 +1,20 @@
 export default function clickInit(art, events) {
-    const { $player } = art.template;
+    const {
+        controls,
+        template: { $player },
+    } = art;
+
     events.proxy(document, ['click', 'contextmenu'], (event) => {
         if (event.composedPath && event.composedPath().indexOf($player) > -1) {
             art.isFocus = true;
             art.emit('focus');
-        } else if (art.isFocus) {
+        } else {
             art.isFocus = false;
             art.emit('blur');
         }
     });
+
+    art.on('blur', () => {
+        controls.delayHide();
+    });
 }

packages/artplayer/src/events/hoverInit.js

@@ -1,7 +1,11 @@
 import { addClass, removeClass } from '../utils';
 
 export default function hoverInit(art, events) {
-    const { $player } = art.template;
+    const {
+        controls,
+        template: { $player },
+    } = art;
+
     events.hover(
         $player,
         () => {
@@ -13,4 +17,8 @@ export default function hoverInit(art, events) {
             art.emit('hoverleave');
         },
     );
+
+    art.on('hoverleave', () => {
+        controls.delayHide();
+    });
 }

packages/artplayer/src/events/mousemoveInit.js

@@ -1,4 +1,4 @@
-import { debounce, addClass, removeClass } from '../utils';
+import { removeClass } from '../utils';
 
 export default function mousemoveInitInit(art, events) {
     const {
@@ -7,25 +7,16 @@ export default function mousemoveInitInit(art, events) {
         controls,
     } = art;
 
-    const autoHide = debounce(() => {
-        addClass($player, 'art-hide-cursor');
-        removeClass($player, 'art-hover');
-        controls.show = false;
-    }, 3000);
-
-    art.on('hoverleave', () => {
-        if (player.playing) {
-            autoHide();
-        }
+    events.proxy($player, 'mousemove', (event) => {
+        art.emit('mousemove', event);
     });
 
-    events.proxy($player, 'mousemove', event => {
-        autoHide.clearTimeout();
+    art.on('mousemove', (event) => {
+        controls.cancelDelayHide();
         removeClass($player, 'art-hide-cursor');
         controls.show = true;
-        if (!player.pip && player.playing && event.target === $video) {
-            autoHide();
+        if (!player.pip && event.target === $video) {
+            controls.delayHide();
         }
-        art.emit('mousemove');
     });
 }