feat: 添加prettier格式化代码
This commit is contained in:
539943419 committed
1 parent
5823d5876b
commit
f33e9386cd
81 files changed
+8114
-7395
No files matched your search
@@ -1,104 +1,125 @@
|
||||
import { BasePlugin } from "xgplayer";
|
||||
import "./lockScreen.scss";
|
||||
import MobilePlugin from "xgplayer/es/plugins/mobile";
|
||||
import { BasePlugin } from 'xgplayer'
|
||||
import './lockScreen.scss'
|
||||
import MobilePlugin from 'xgplayer/es/plugins/mobile'
|
||||
|
||||
export default class LockPlugin extends BasePlugin {
|
||||
static get pluginName() {
|
||||
return "lockPlugin";
|
||||
}
|
||||
static get pluginName() {
|
||||
return 'lockPlugin'
|
||||
}
|
||||
|
||||
private locked: boolean;
|
||||
private lockDiv: HTMLDivElement = document.createElement("div");
|
||||
private overlayDiv: HTMLDivElement = document.createElement("div");
|
||||
private locked: boolean
|
||||
private lockDiv: HTMLDivElement = document.createElement('div')
|
||||
private overlayDiv: HTMLDivElement = document.createElement('div')
|
||||
|
||||
private lockOpenSVG: string = `
|
||||
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 = `
|
||||
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);
|
||||
this.locked = false;
|
||||
}
|
||||
constructor(args: any) {
|
||||
super(args)
|
||||
this.locked = false
|
||||
}
|
||||
|
||||
afterCreate() {
|
||||
this.initLockDiv();
|
||||
this.initOverlayDiv();
|
||||
this.bindEvents();
|
||||
}
|
||||
afterCreate() {
|
||||
this.initLockDiv()
|
||||
this.initOverlayDiv()
|
||||
this.bindEvents()
|
||||
}
|
||||
|
||||
private initLockDiv() {
|
||||
this.lockDiv.innerHTML = this.lockClosedSVG;
|
||||
this.lockDiv.className = "lock-div";
|
||||
this.player.root !== null && this.player.root.appendChild(this.lockDiv);
|
||||
}
|
||||
private initLockDiv() {
|
||||
this.lockDiv.innerHTML = this.lockClosedSVG
|
||||
this.lockDiv.className = 'lock-div'
|
||||
this.player.root !== null && this.player.root.appendChild(this.lockDiv)
|
||||
}
|
||||
|
||||
private initOverlayDiv() {
|
||||
this.overlayDiv.className = "overlay-div";
|
||||
this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
|
||||
this.overlayDiv.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
this.overlayDiv.addEventListener('mousemove', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
private initOverlayDiv() {
|
||||
this.overlayDiv.className = 'overlay-div'
|
||||
this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
|
||||
this.overlayDiv.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault()
|
||||
})
|
||||
this.overlayDiv.addEventListener('mousemove', (e) => {
|
||||
e.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
|
||||
this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
|
||||
this.player.usePluginHooks("progress", "dragstart", () => {
|
||||
if (this.locked) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
// 阻止进度条默认行为
|
||||
for(const event of ['dragstart', 'drag', 'dragend']) {
|
||||
this.player.usePluginHooks("progress", event, () => {
|
||||
if (this.locked) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
private bindEvents() {
|
||||
this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
|
||||
this.player.root !== null &&
|
||||
this.player.root.addEventListener(
|
||||
'click',
|
||||
this.preventClick.bind(this),
|
||||
true
|
||||
)
|
||||
this.player.usePluginHooks('progress', 'dragstart', () => {
|
||||
if (this.locked) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
// 阻止进度条默认行为
|
||||
for (const event of ['dragstart', 'drag', 'dragend']) {
|
||||
this.player.usePluginHooks('progress', event, () => {
|
||||
if (this.locked) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private toggleLock() {
|
||||
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
|
||||
// mobile?.disableGesture()
|
||||
if (this.lockDiv && this.overlayDiv) {
|
||||
this.locked = !this.locked;
|
||||
this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
|
||||
this.overlayDiv.style.display = this.locked ? "block" : "none";
|
||||
this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
|
||||
this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
|
||||
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
|
||||
}
|
||||
}
|
||||
private toggleLock() {
|
||||
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
|
||||
// mobile?.disableGesture()
|
||||
if (this.lockDiv && this.overlayDiv) {
|
||||
this.locked = !this.locked
|
||||
this.lockDiv.innerHTML = this.locked
|
||||
? this.lockOpenSVG
|
||||
: this.lockClosedSVG
|
||||
this.overlayDiv.style.display = this.locked ? 'block' : 'none'
|
||||
this.player.controls &&
|
||||
(this.locked
|
||||
? this.player.controls.hide()
|
||||
: this.player.controls.show())
|
||||
this.player.root !== null &&
|
||||
this.player.root.classList.toggle('xgplayer-locked', this.locked)
|
||||
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
|
||||
}
|
||||
}
|
||||
|
||||
private preventClick(event: MouseEvent) {
|
||||
if (this.locked && event.target instanceof HTMLElement && !event.target.classList.contains("lock-div")) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
private preventClick(event: MouseEvent) {
|
||||
if (
|
||||
this.locked &&
|
||||
event.target instanceof HTMLElement &&
|
||||
!event.target.classList.contains('lock-div')
|
||||
) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.lockDiv) {
|
||||
this.lockDiv.removeEventListener("click", this.toggleLock.bind(this));
|
||||
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.removeChild(this.overlayDiv);
|
||||
}
|
||||
}
|
||||
destroy() {
|
||||
if (this.lockDiv) {
|
||||
this.lockDiv.removeEventListener('click', this.toggleLock.bind(this))
|
||||
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.removeChild(this.overlayDiv)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user