feat: added BaseUI with simple play button

src/ui/BaseUI.ts

@@ -0,0 +1,77 @@
+/**
+ * default base ui
+ *
+ * author: db123 at db
+ * creation: 24/4/2026
+ */
+
+import { VP } from "../core";
+
+export class BaseUI {
+  private player: VP;
+  private video: HTMLVideoElement;
+  private prefixClass: string;
+  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.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();
+  }
+
+  private createPlayButton(): void {
+    const playButton = document.createElement("button");
+    playButton.className = this.prefixClass + "-playButton";
+
+    this.video.addEventListener("play", function (): void {
+      playButton.innerText = "pause";
+    });
+    this.video.addEventListener("pause", function (): void {
+      playButton.innerText = "play";
+    });
+
+    playButton.onclick = (): void => {
+      if (this.video.paused) {
+        this.player.play();
+      } else {
+        this.player.pause();
+      }
+    };
+
+    this.controlsWrap.appendChild(playButton);
+  }
+}

src/ui/index.ts

@@ -0,0 +1 @@
+export { BaseUI } from "./BaseUI";