From 6174a6c79b9b949aff0624f9a3cfa676c354c038 Mon Sep 17 00:00:00 2001
From: db123 <erfan@db123.ir>
Date: Fri, 24 Apr 2026 23:39:44 +0330
Subject: [PATCH] feat: added BaseUI with simple play button

---
 src/ui/BaseUI.ts | 77 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/ui/index.ts  |  1 +
 2 files changed, 78 insertions(+)
 create mode 100644 src/ui/BaseUI.ts
 create mode 100644 src/ui/index.ts

diff --git a/src/ui/BaseUI.ts b/src/ui/BaseUI.ts
new file mode 100644
index 0000000..1d8e5d4
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/ui/index.ts b/src/ui/index.ts
new file mode 100644
index 0000000..f04b970
--- /dev/null
+++ b/src/ui/index.ts
@@ -0,0 +1 @@
+export { BaseUI } from "./BaseUI";