87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
/**
|
|
* default base ui
|
|
*
|
|
* author: db123 at db
|
|
* creation: 24/4/2026
|
|
*/
|
|
|
|
import { VP } from "../core";
|
|
import { EventManager } from "../events";
|
|
|
|
export class BaseUI {
|
|
private player: VP;
|
|
private video: HTMLVideoElement;
|
|
private prefixClass: string;
|
|
private events: EventManager;
|
|
private wrapper!: HTMLElement;
|
|
private controlsWrap!: HTMLElement;
|
|
private originalParent!: Node;
|
|
private nextSibling: ChildNode | null = null;
|
|
|
|
constructor(player: VP, video: HTMLVideoElement, prefixClass: string = "vp") {
|
|
this.player = player;
|
|
this.video = video;
|
|
this.prefixClass = prefixClass;
|
|
this.events = new EventManager();
|
|
this.build();
|
|
this.createPlayButton();
|
|
}
|
|
|
|
private build(): void {
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = this.prefixClass + "-wrapper";
|
|
const controlsWrap = document.createElement("div");
|
|
controlsWrap.className = this.prefixClass + "-controls";
|
|
|
|
const videoParent = this.video.parentNode;
|
|
if (!videoParent) {
|
|
throw new Error(`Video parent element not found.`);
|
|
}
|
|
|
|
this.wrapper = wrapper;
|
|
this.controlsWrap = controlsWrap;
|
|
this.originalParent = videoParent!;
|
|
|
|
if (this.video.nextSibling) {
|
|
this.nextSibling = this.video.nextSibling;
|
|
}
|
|
|
|
videoParent.insertBefore(wrapper, this.video);
|
|
wrapper.appendChild(this.video);
|
|
wrapper.appendChild(controlsWrap);
|
|
}
|
|
|
|
destroy(): void {
|
|
this.originalParent.insertBefore(this.video, this.nextSibling);
|
|
this.wrapper.remove();
|
|
this.events.removeAll();
|
|
}
|
|
|
|
private createPlayButton(): void {
|
|
const playButton = document.createElement("button");
|
|
playButton.className = this.prefixClass + "-playButton";
|
|
if (this.video.paused) {
|
|
playButton.innerText = "play";
|
|
} else {
|
|
playButton.innerText = "pause";
|
|
}
|
|
|
|
this.events.add(this.video, "play", function (): void {
|
|
playButton.innerText = "pause";
|
|
});
|
|
this.events.add(this.video, "pause", function (): void {
|
|
playButton.innerText = "play";
|
|
});
|
|
|
|
playButton.onclick = (): void => {
|
|
if (this.video.paused) {
|
|
this.player.play();
|
|
} else {
|
|
this.player.pause();
|
|
}
|
|
};
|
|
|
|
this.controlsWrap.appendChild(playButton);
|
|
}
|
|
}
|