feat: 视频插件移动端优化

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -52,19 +52,22 @@ const { setVideo } = (() => {
             videoFillMode: 'contain',
             autoplay: true,
             download: true,
+            ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
+            lang: 'zh-cn',
+            playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
+            texttrack,
             screenShot: {
                 saveImg: true,
                 quality: 1,
                 type: 'image/png',
                 format: '.png'
             },
-            lang: 'zh-cn',
-            playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
             playNext: {
                 urlList: videos.map(v => v.url)
             },
-            texttrack,
+            progress: {
-            ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[]
+                isDragingSeek: true
+            }
         })
     }
     return {

src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts

@@ -1,109 +1,99 @@
-import { BasePlugin } from 'xgplayer'
+import { BasePlugin } from "xgplayer";
-import './lockScreen.scss'
+import "./lockScreen.scss";
+import MobilePlugin from "xgplayer/es/plugins/mobile";
 
 export default class LockPlugin extends BasePlugin {
 	static get pluginName() {
-        return 'lockPlugin'
+		return "lockPlugin";
 	}
 
-    private locked: boolean
+	private locked: boolean;
-    private lockDiv: HTMLDivElement | null = null
+	private lockDiv: HTMLDivElement | null = null;
-    private overlayDiv: HTMLDivElement | null = null
+	private overlayDiv: HTMLDivElement | null = null;
 
 	private lockOpenSVG: string = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
             <rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
-        </svg>`
+        </svg>`;
 
 	private lockClosedSVG: string = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
             <rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
-        </svg>`
+        </svg>`;
 
 	constructor(args: any) {
-        super(args)
+		super(args);
-        this.locked = false
+		this.locked = false;
 	}
 
 	afterCreate() {
-        this.createLockDiv()
+		this.createLockDiv();
-        this.createOverlayDiv()
+		this.createOverlayDiv();
-        this.bindEvents()
+		this.bindEvents();
 	}
 
 	private createLockDiv() {
-        this.lockDiv = document.createElement('div')
+		this.lockDiv = document.createElement("div");
-        this.lockDiv.innerHTML = this.lockClosedSVG
+		this.lockDiv.innerHTML = this.lockClosedSVG;
-        this.lockDiv.className = 'lock-div'
+		this.lockDiv.className = "lock-div";
-        this.player.root !== null && this.player.root.appendChild(this.lockDiv)
+		this.player.root !== null && this.player.root.appendChild(this.lockDiv);
 	}
 
 	private createOverlayDiv() {
-        this.overlayDiv = document.createElement('div')
+		this.overlayDiv = document.createElement("div");
-        this.overlayDiv.className = 'overlay-div'
+		this.overlayDiv.className = "overlay-div";
-        this.player.root !== null &&
+		this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
-            this.player.root.appendChild(this.overlayDiv)
 	}
 
 	private bindEvents() {
-        this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
+		this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
-        this.player.root !== null &&
+		this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
-            this.player.root.addEventListener(
+		this.player.usePluginHooks("progress", "dragstart", () => {
-                'click',
+			if (this.locked) {
-                this.preventClick.bind(this),
+				return false;
-                true
+			}
-            )
+			return true;
+		});
+        // 阻止进度条默认行为
+        for(const event of ['dragstart', 'drag', 'dragend']) {
+            this.player.usePluginHooks("progress", event, () => {
+                if (this.locked) {
+                    return false;
+                }
+                return true;
+            });
+        }
 	}
 
 	private toggleLock() {
-        console.log(this.player.seek)
+        const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
-        this.player.seek = () => {}
 		if (this.lockDiv && this.overlayDiv) {
-            this.locked = !this.locked
+			this.locked = !this.locked;
-            this.lockDiv.innerHTML = this.locked
+			this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
-                ? this.lockOpenSVG
+			this.overlayDiv.style.display = this.locked ? "block" : "none";
-                : this.lockClosedSVG
+			this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
-            this.overlayDiv.style.display = this.locked ? 'block' : 'none'
+			this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
-            this.player.controls &&
+            this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
-                (this.locked
-                    ? this.player.controls.hide()
-                    : this.player.controls.show())
-            this.player.root !== null &&
-                this.player.root.classList.toggle('xgplayer-locked', this.locked)
 		}
 	}
 
 	private preventClick(event: MouseEvent) {
-        if (
+		if (this.locked && event.target instanceof HTMLElement && !event.target.classList.contains("lock-div")) {
-            this.locked &&
+			event.stopPropagation();
-            event.target instanceof HTMLElement &&
+			event.preventDefault();
-            !event.target.classList.contains('lock-div')
-        ) {
-            event.stopPropagation()
-            event.preventDefault()
 		}
 	}
 
 	destroy() {
 		if (this.lockDiv) {
-            this.lockDiv.removeEventListener(
+			this.lockDiv.removeEventListener("click", this.toggleLock.bind(this));
-                'click',
+			this.player.root !== null && this.player.root.removeEventListener("click", this.preventClick.bind(this), true);
-                this.toggleLock.bind(this)
+			this.player.root !== null && this.player.root.removeChild(this.lockDiv);
-            )
-            this.player.root !== null &&
-                this.player.root.removeEventListener(
-                    'click',
-                    this.preventClick.bind(this),
-                    true
-                )
-            this.player.root !== null &&
-                this.player.root.removeChild(this.lockDiv)
 		}
 		if (this.overlayDiv) {
-            this.player.root !== null &&
+			this.player.root !== null && this.player.root.removeChild(this.overlayDiv);
-                this.player.root.removeChild(this.overlayDiv)
 		}
 	}
 }