优化移动端UI

packages/artplayer/src/hotkey.js

@@ -21,7 +21,7 @@ export default class Hotkey {
                 });
 
                 this.add(37, () => {
-                    player.seek = player.currentTime - 5;
+                    player.backward = 5;
                 });
 
                 this.add(38, () => {
@@ -29,14 +29,14 @@ export default class Hotkey {
                 });
 
                 this.add(39, () => {
-                    player.seek = player.currentTime + 5;
+                    player.forward = 5;
                 });
 
                 this.add(40, () => {
                     player.volume -= 0.1;
                 });
 
-                proxy(window, 'keydown', event => {
+                proxy(window, 'keydown', (event) => {
                     if (art.isFocus) {
                         const tag = document.activeElement.tagName.toUpperCase();
                         const editable = document.activeElement.getAttribute('contenteditable');
@@ -44,7 +44,7 @@ export default class Hotkey {
                             const events = this.keys[event.keyCode];
                             if (events) {
                                 event.preventDefault();
-                                events.forEach(fn => fn());
+                                events.forEach((fn) => fn());
                                 art.emit('hotkey', event);
                             }
                         }

packages/artplayer/src/index.js

@@ -32,8 +32,9 @@ class Artplayer extends Emitter {
         this.option = validator(utils.mergeDeep(Artplayer.option, option), scheme);
         this.isFocus = false;
         this.isDestroy = false;
-        this.ua = utils.userAgent;
-        this.isMobile = utils.isMobile();
+        this.userAgent = utils.userAgent;
+        this.isMobile = utils.isMobile;
+        this.isWechat = utils.isWechat;
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);
         this.events = new Events(this);
@@ -148,7 +149,7 @@ class Artplayer extends Emitter {
             },
             moreVideoAttr: {
                 controls: false,
-                preload: utils.isSafari() ? 'auto' : 'metadata',
+                preload: utils.isSafari ? 'auto' : 'metadata',
             },
             icons: {},
             customType: {},

packages/artplayer/src/player/seekMix.js

@@ -6,8 +6,20 @@ export default function seekMix(art, player) {
     def(player, 'seek', {
         set(time) {
             player.currentTime = time;
-            notice.show = `${secondToTime(time)} / ${secondToTime(player.duration)}`;
-            art.emit('seek', time);
+            notice.show = `${secondToTime(player.currentTime)} / ${secondToTime(player.duration)}`;
+            art.emit('seek', player.currentTime);
+        },
+    });
+
+    def(player, 'forward', {
+        set(time) {
+            player.seek = player.currentTime + time;
+        },
+    });
+
+    def(player, 'backward', {
+        set(time) {
+            player.seek = player.currentTime - time;
         },
     });
 }

packages/artplayer/src/template.js

@@ -12,7 +12,7 @@ export default class Template {
         }
 
         errorHandle(
-            art.constructor.instances.every(art => art.template.$container !== this.$container),
+            art.constructor.instances.every((art) => art.template.$container !== this.$container),
             'Cannot mount multiple instances on the same dom element',
         );
 
@@ -131,6 +131,10 @@ export default class Template {
             addClass(this.$info, 'art-backdrop-filter');
             addClass(this.$contextmenu, 'art-backdrop-filter');
         }
+
+        if (this.art.isMobile) {
+            addClass(this.$container, 'art-mobile');
+        }
     }
 
     mobile() {

packages/artplayer/src/utils/compatibility.js

@@ -1,9 +1,4 @@
 export const userAgent = window.navigator.userAgent;
-
-export function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-}
-
-export function isSafari() {
-    return /^((?!chrome|android).)*safari/i.test(userAgent);
-}
+export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
+export const isWechat = /MicroMessenger/i.test(userAgent);

packages/artplayer/src/utils/dom.js

@@ -1,3 +1,5 @@
+import { isMobile } from './compatibility';
+
 export function query(selector, parent = document) {
     return parent.querySelector(selector);
 }
@@ -37,7 +39,7 @@ export function setStyle(element, key, value) {
 }
 
 export function setStyles(element, styles) {
-    Object.keys(styles).forEach(key => {
+    Object.keys(styles).forEach((key) => {
         setStyle(element, key, styles[key]);
     });
     return element;
@@ -49,15 +51,16 @@ export function getStyle(element, key, numberType = true) {
 }
 
 export function sublings(target) {
-    return Array.from(target.parentElement.children).filter(item => item !== target);
+    return Array.from(target.parentElement.children).filter((item) => item !== target);
 }
 
 export function inverseClass(target, className) {
-    sublings(target).forEach(item => removeClass(item, className));
+    sublings(target).forEach((item) => removeClass(item, className));
     addClass(target, className);
 }
 
 export function tooltip(target, msg, pos = 'up') {
+    if (isMobile) return;
     target.setAttribute('aria-label', msg);
     target.setAttribute('data-balloon-pos', pos);
 }

packages/artplayer/src/whitelist.js

@@ -9,11 +9,11 @@ export default class Whitelist {
             whitelist.some((item) => {
                 switch (kindOf(item)) {
                     case 'string':
-                        return item === '*' || art.ua.indexOf(item) > -1;
+                        return item === '*' || art.userAgent.indexOf(item) > -1;
                     case 'function':
-                        return item(art.ua);
+                        return item(art.userAgent);
                     case 'regexp':
-                        return item.test(art.ua);
+                        return item.test(art.userAgent);
                     default:
                         return false;
                 }