update

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');
+                }
             });
         },
     });