优化手机端UI

packages/artplayer/src/control/index.js

@@ -1,4 +1,4 @@
-import { errorHandle, addClass } from '../utils';
+import { errorHandle, addClass, debounce, removeClass } from '../utils';
 import Component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -19,7 +19,21 @@ export default class Control extends Component {
 
         this.name = 'control';
 
-        const { option } = art;
+        const {
+            option,
+            player,
+            template: { $player },
+        } = art;
+
+        this.delayHide = debounce(() => {
+            if (player.playing && this.show) {
+                addClass($player, 'art-hide-cursor');
+                removeClass($player, 'art-hover');
+                this.show = false;
+            }
+        }, 3000);
+
+        this.cancelDelayHide = this.delayHide.clearTimeout;
 
         art.on('ready', () => {
             this.add(
@@ -130,7 +144,7 @@ export default class Control extends Component {
                 }),
             );
 
-            option.controls.forEach(item => {
+            option.controls.forEach((item) => {
                 this.add(item);
             });
         });
@@ -158,7 +172,7 @@ export default class Control extends Component {
                 break;
         }
 
-        super.add(option, $ref => {
+        super.add(option, ($ref) => {
             if (
                 !option.disable &&
                 option.position !== 'top' &&

packages/artplayer/src/control/volume.js

@@ -1,9 +1,9 @@
 import { append, clamp, tooltip, setStyle } from '../utils';
 
 export default function volume(option) {
-    return art => ({
+    return (art) => ({
         ...option,
-        mounted: $control => {
+        mounted: ($control) => {
             const {
                 events: { proxy },
                 icons,
@@ -21,6 +21,10 @@ export default function volume(option) {
             tooltip($volume, i18n.get('Mute'));
             setStyle($volumeClose, 'display', 'none');
 
+            if (art.isMobile) {
+                setStyle($volumePanel, 'display', 'none');
+            }
+
             function volumeChangeFromEvent(event) {
                 const { left: panelLeft } = $volumePanel.getBoundingClientRect();
                 const percentage =
@@ -55,7 +59,7 @@ export default function volume(option) {
                 player.muted = false;
             });
 
-            proxy($volumePanel, 'click', event => {
+            proxy($volumePanel, 'click', (event) => {
                 player.muted = false;
                 player.volume = volumeChangeFromEvent(event);
             });
@@ -64,7 +68,7 @@ export default function volume(option) {
                 isDroging = true;
             });
 
-            proxy($control, 'mousemove', event => {
+            proxy($control, 'mousemove', (event) => {
                 if (isDroging) {
                     player.muted = false;
                     player.volume = volumeChangeFromEvent(event);