Dict

ArkReCode/script.js

@@ -1,33 +1,34 @@
-// Ganti domain kamu di sini:
-const baseURL = "https://gilbertclaus.pythonanywhere.com";
+const videoMap = {}; // name => url
 
 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 = "";
-
-    const video = document.createElement("video");
-    video.src = videoPath;
-    video.width = 360;
-    video.controls = true;
-    video.autoplay = true
-    video.loop = true;
-    video.volume = 0.01;
-    video.style.marginTop = "20px";
-    wrapper.appendChild(video);
-    
-    // Minta fullscreen setelah video ditambahkan ke halaman
-    // video.addEventListener("loadedmetadata", () => {
-    if (video.requestFullscreen) {
-      video.requestFullscreen();
-    } else if (video.webkitRequestFullscreen) { // Safari
-      video.webkitRequestFullscreen();
-    } else if (video.msRequestFullscreen) { // IE11
-      video.msRequestFullscreen();
-    }
-    // });
+  const videoPath = videoMap[charName]; // Ambil dari map
+
+  if (!videoPath) {
+    showNotif(`Video untuk "${charName}" tidak ditemukan`);
+    return;
+  }
+
+  const wrapper = document.getElementById("videoWrapper");
+  wrapper.innerHTML = "";
+
+  const video = document.createElement("video");
+  video.src = videoPath;
+  video.width = 360;
+  video.controls = true;
+  video.autoplay = true;
+  video.loop = true;
+  video.volume = 0.01;
+  video.style.marginTop = "20px";
+  wrapper.appendChild(video);
+
+  if (video.requestFullscreen) {
+    video.requestFullscreen();
+  } else if (video.webkitRequestFullscreen) {
+    video.webkitRequestFullscreen();
+  } else if (video.msRequestFullscreen) {
+    video.msRequestFullscreen();
+  }
 }
 
 function showNotif(message, duration = 3000) {
@@ -36,66 +37,54 @@ function showNotif(message, duration = 3000) {
   notif.textContent = message;
 
   document.body.appendChild(notif);
+  requestAnimationFrame(() => notif.style.opacity = 1);
 
-  // Trigger fade-in
-  requestAnimationFrame(() => {
-      notif.style.opacity = 1;
-  });
-
-  // Auto-hide
   setTimeout(() => {
-      notif.style.opacity = 0;
-      setTimeout(() => {
-          notif.remove();
-      }, 500); // Tunggu animasi selesai
+    notif.style.opacity = 0;
+    setTimeout(() => notif.remove(), 500);
   }, duration);
 }
 
 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";
-        });
-
-        // Cek apakah sedang bukan video Edalia
-        const isSafe = !source.src.includes("Edalia");
-
-        // Pilih URL video berdasarkan status tombol
-        const newVideoURL = isSafe
-            ? `${baseURL}/video/${encodeURIComponent("Ark ReCode - 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 {
-        showNotif(`Fungsi fetchData untuk karakter "${input}" belum diimplementasikan`);
-    }
+  const input = document.getElementById("charName").value.trim();
+  const charaBtns = document.querySelectorAll(".chara");
+
+  const video = document.getElementById("bgVideo");
+  const source = video.querySelector("source");
+
+  if (input === "") {
+    const isHidden = charaBtns[0].style.display === "none" || charaBtns[0].style.display === "";
+    charaBtns.forEach(btn => {
+      btn.style.display = isHidden ? "inline-block" : "none";
+    });
+
+    const isSafe = !source.src.includes("Edalia");
+    const newVideoURL = isSafe
+      ? videoMap["Edalia"]
+      : "https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4";
+
+    source.src = newVideoURL;
+    video.load();
+    video.play();
+  } else {
+    showNotif(`Fungsi fetchData untuk karakter "${input}" belum diimplementasikan`);
+  }
 }
 
-// Ambil daftar karakter dari server
+// Ambil daftar karakter dan URL dari server
 window.onload = () => {
-  fetch(`${baseURL}/list-videos-ark-recode`)
+  fetch("https://gilbertclaus.pythonanywhere.com/list-videos-ark-recode")
     .then(res => res.json())
     .then(data => {
       const container = document.getElementById("charButtons");
 
-      // Urutkan nama-nama video secara alfabet
-      const sortedNames = data.videos.sort((a, b) => a.localeCompare(b));
+      // Simpan ke videoMap
+      Object.entries(data).forEach(([name, url]) => {
+        videoMap[name] = url;
+      });
+
+      // Urutkan nama-nama berdasarkan key
+      const sortedNames = Object.keys(videoMap).sort((a, b) => a.localeCompare(b));
 
       sortedNames.forEach(name => {
         const btn = document.createElement("button");