Change BG Video

ArkReCode/index.html

@@ -19,8 +19,8 @@
     <input type="text" id="charName" placeholder="Masukkan nama karakter...">
     <button onclick="fetchData()">Cari</button>
     <br>
-    <button class="chara" onclick="playVideo('Edalia')">Edalia</button>
-    <button class="chara" onclick="playVideo('Ermes')">Ermes</button>    
+    <button class="chara" onclick="playVideo(this)">Edalia</button>
+    <button class="chara" onclick="playVideo(this)">Ermes</button>    
     <div id="result"></div>
   </div>
 

ArkReCode/script.js

@@ -1,5 +1,9 @@
-function playVideo(charName) {
-    const videoPath = `https://gilbertclaus.pythonanywhere.com/video/${encodeURIComponent("Ark ReCode")}/${encodeURIComponent(charName)}.mp4`;
+// Ganti domain kamu di sini:
+const baseURL = "https://gilbertclaus.pythonanywhere.com";
+
+function playVideo(button) {
+  const charName = button.textContent.trim();
+  const videoPath = `${baseURL}/video/${encodeURIComponent("Ark ReCode")}/${encodeURIComponent(charName)}.mp4`;
 
     const wrapper = document.getElementById("videoWrapper");
     wrapper.innerHTML = "";
@@ -26,19 +30,54 @@ function playVideo(charName) {
 }
 
 function fetchData() {
+    // Ambil elemen tombol karakter
     const input = document.getElementById("charName").value.trim();
     const charaBtns = document.querySelectorAll(".chara");
 
+    // Ambil elemen video
+    const video = document.getElementById("bgVideo");
+    const source = video.querySelector("source");
+
     if (input === "") {
         // Ambil status tombol pertama sebagai acuan
         const isHidden = charaBtns[0].style.display === "none" || charaBtns[0].style.display === "";
 
         // Toggle semua tombol
         charaBtns.forEach(btn => {
-        btn.style.display = isHidden ? "inline-block" : "none";
+            btn.style.display = isHidden ? "inline-block" : "none";
         });
+
+        // Cek apakah sedang bukan video Edalia
+        const isSafe = !source.src.includes("Edalia");
+
+        // Pilih URL video berdasarkan status tombol
+        const newVideoURL = isSafe
+            ? `${baseURL}/video/${encodeURIComponent("Edalia Skill")}.mp4`
+            : `https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4`;
+
+        // Set dan muat ulang video
+        source.src = newVideoURL;
+        video.load();
+        video.play();
+
     } else {
         const name = document.getElementById("charName").value;
         alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
     }
-}
+}
+
+// Ambil daftar karakter dari server
+window.onload = () => {
+  fetch(`${baseURL}/list-videos`)
+    .then(res => res.json())
+    .then(data => {
+      const container = document.getElementById("charButtons");
+      data.videos.forEach(name => {
+        const btn = document.createElement("button");
+        btn.textContent = name;
+        btn.className = "chara";
+        btn.onclick = () => playVideo(name);
+        container.appendChild(btn);
+      });
+    });
+};