add lock

packages/artplayer/src/index.js

@@ -146,6 +146,7 @@ export default class Artplayer extends Emitter {
             miniProgressBar: false,
             useSSR: false,
             playsInline: true,
+            lock: true,
             ads: [],
             layers: [],
             contextmenu: [],

packages/artplayer/src/plugins/index.js

@@ -13,7 +13,7 @@ export default class Plugins {
             this.add(miniProgressBar);
         }
 
-        if (isMobile) {
+        if (option.lock && isMobile) {
             this.add(lock);
         }
 

packages/artplayer/src/plugins/lock.js

@@ -1,38 +1,38 @@
-import { setStyle } from '../utils';
+import { append, setStyle, hasClass, addClass, removeClass } from '../utils';
 
 export default function lock(art) {
-    const { layers, icons } = art;
+    const {
+        layers,
+        icons,
+        template: { $player },
+    } = art;
 
     layers.add({
         name: 'lock',
-        html: icons.unlock,
-        style: {
-            display: 'flex',
-            'align-items': 'center',
-            'justify-content': 'center',
-            position: 'absolute',
-            left: '15px',
-            top: 'calc(50% - 17px)',
-            height: '34px',
-            width: '34px',
-            color: '#fff',
-            'border-radius': '50%',
-            'background-color': 'rgb(0 0 0 / 50%)',
-        },
-        mounted($lock) {
-            let timeout = 0;
+        mounted($el) {
+            const $lock = append($el, icons.lock);
+            const $unlock = append($el, icons.unlock);
+            setStyle($lock, 'display', 'none');
 
-            art.on('click', () => {
-                setStyle($lock, 'display', 'flex');
-                timeout = Date.now();
-            });
-
-            art.on('video:timeupdate', () => {
-                if (art.playing && Date.now() - timeout >= 3000) {
+            art.on('lock', (state) => {
+                if (state) {
+                    setStyle($lock, 'display', 'inline-flex');
+                    setStyle($unlock, 'display', 'none');
+                } else {
                     setStyle($lock, 'display', 'none');
+                    setStyle($unlock, 'display', 'inline-flex');
                 }
             });
         },
+        click() {
+            if (hasClass($player, 'art-lock')) {
+                removeClass($player, 'art-lock');
+                art.emit('lock', false);
+            } else {
+                addClass($player, 'art-lock');
+                art.emit('lock', true);
+            }
+        },
     });
 
     return {

packages/artplayer/src/scheme/index.js

@@ -56,6 +56,7 @@ export default {
     miniProgressBar: b,
     useSSR: b,
     playsInline: b,
+    lock: b,
     ads: [
         {
             url: s,

packages/artplayer/src/style/plugins.scss

@@ -1,20 +1,27 @@
-.art-video-player .art-layers .art-layer-log {
-    display: none;
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    width: 120px;
-    color: #fff;
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 3px;
-    padding: 5px;
-    font-size: 13px;
-    pointer-events: none;
-    user-select: none;
+.art-video-player {
+    .art-layer-lock {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        left: 15px;
+        top: calc(50% - 17px);
+        height: 34px;
+        width: 34px;
+        color: #fff;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
 
-    p {
-        margin-bottom: 0;
-        word-break: break-all;
+    &.art-control-show {
+        .art-layer-lock {
+            display: flex;
+        }
+    }
+
+    &.art-lock {
+        .art-bottom {
+            display: none !important;
+        }
     }
 }

packages/artplayer/types/artplayer.d.ts

@@ -324,6 +324,11 @@ type Option = {
      */
     playsInline?: boolean;
 
+    /**
+     * Whether use lock in mobile
+     */
+    lock?: boolean;
+
     /**
      * Custom plugin list
      */