add art.isLock

packages/artplayer-plugin-danmuku/src/setting.js

@@ -26,6 +26,7 @@ export default function setting(art, danmuku) {
     const $danmuOff = getIcon(danmuOff, 'danmu-off');
     const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
     const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
+    const $control = danmuku.option.mount || $controlsCenter;
 
     function addEmitter() {
         const colors = [
@@ -49,7 +50,7 @@ export default function setting(art, danmuku) {
         });
 
         const $emitter = append(
-            $controlsCenter,
+            $control,
             `
             <div class="art-danmuku-emitter">
                 <div class="art-danmuku-style">
@@ -142,7 +143,7 @@ export default function setting(art, danmuku) {
         });
 
         art.on('resize', () => {
-            setStyle($emitter, 'display', $controlsCenter.clientWidth < 150 ? 'none' : null);
+            setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
         });
     }
 

packages/artplayer-plugin-danmuku/src/style.less

@@ -9,6 +9,34 @@
     border-radius: 3px;
     color: #ffffff;
     background-color: rgb(255 255 255 / 30%);
+    font-family: Roboto, Arial, Helvetica, sans-serif;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    touch-action: manipulation;
+    -ms-high-contrast-adjust: none;
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .art-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        line-height: 1.5;
+        svg {
+            fill: #fff;
+        }
+    }
+
+    @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
+        .art-backdrop-filter {
+            -webkit-backdrop-filter: saturate(180%) blur(20px);
+            backdrop-filter: saturate(180%) blur(20px);
+            background-color: rgba(0, 0, 0, 0.7) !important;
+        }
+    }
 
     .art-danmuku-style {
         position: relative;

packages/artplayer/src/events/clickInit.js

@@ -26,7 +26,9 @@ export default function clickInit(art, events) {
             art.emit('dblclick');
 
             if (isMobile) {
-                art.toggle();
+                if (!art.isLock) {
+                    art.toggle();
+                }
             } else {
                 art.fullscreen = !art.fullscreen;
             }

packages/artplayer/src/index.js

@@ -36,6 +36,7 @@ export default class Artplayer extends Emitter {
         const mergeOption = utils.mergeDeep(Artplayer.option, option);
         this.option = validator(mergeOption, scheme);
 
+        this.isLock = false;
         this.isReady = false;
         this.isFocus = false;
         this.isInput = false;

packages/artplayer/src/plugins/fastForward.js

@@ -11,7 +11,7 @@ export default function fastForward(art) {
     let isPress = false;
 
     const onStart = (event) => {
-        if (event.touches.length === 1 && art.playing) {
+        if (event.touches.length === 1 && art.playing && !art.isLock) {
             timer = setTimeout(() => {
                 isPress = true;
                 art.playbackRate = constructor.FAST_FORWARD_VALUE;

packages/artplayer/src/plugins/lock.js

@@ -27,9 +27,11 @@ export default function lock(art) {
         click() {
             if (hasClass($player, 'art-lock')) {
                 removeClass($player, 'art-lock');
+                this.isLock = false;
                 art.emit('lock', false);
             } else {
                 addClass($player, 'art-lock');
+                this.isLock = true;
                 art.emit('lock', true);
             }
         },