update

packages/artplayer/src/plugins/index.js

@@ -1,5 +1,6 @@
-import { errorHandle, has, def } from '../utils';
+import { errorHandle, isMobile, has, def } from '../utils';
 import miniProgressBar from './miniProgressBar';
+import lock from './lock';
 
 export default class Plugins {
     constructor(art) {
@@ -12,6 +13,10 @@ export default class Plugins {
             this.add(miniProgressBar);
         }
 
+        if (isMobile) {
+            this.add(lock);
+        }
+
         for (let index = 0; index < option.plugins.length; index++) {
             this.add(option.plugins[index]);
         }

packages/artplayer/src/plugins/lock.js

@@ -1,28 +1,36 @@
+import { setStyle } from '../utils';
+
 export default function lock(art) {
-    const { layers } = art;
+    const { layers, icons } = art;
 
     layers.add({
-        name: 'miniProgressBar',
+        name: 'lock',
+        html: icons.unlock,
         style: {
-            display: 'none',
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'center',
             position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            height: '2px',
-            backgroundColor: 'var(--theme)',
+            left: '15px',
+            top: 'calc(50% - 17px)',
+            height: '34px',
+            width: '34px',
+            color: '#fff',
+            'border-radius': '50%',
+            'background-color': 'rgb(0 0 0 / 50%)',
         },
-        mounted($progressBar) {
-            art.on('control', (value) => {
-                $progressBar.style.display = value ? 'none' : 'block';
-            });
+        mounted($lock) {
+            let timeout = 0;
 
-            art.on('destroy', () => {
-                $progressBar.style.display = 'none';
+            art.on('click', () => {
+                setStyle($lock, 'display', 'flex');
+                timeout = Date.now();
             });
 
             art.on('video:timeupdate', () => {
-                $progressBar.style.width = `${art.played * 100}%`;
+                if (art.playing && Date.now() - timeout >= 3000) {
+                    setStyle($lock, 'display', 'none');
+                }
             });
         },
     });