function playVideo(charName) {
    const cleanName = charName.split('-').pop().trim().toLowerCase();
    const videoPath = `https://gilbertclaus.pythonanywhere.com/video/Ark ReCode/${charName}/${cleanName}}.m3u8`;
    const encodedURL = encodeURI(videoPath);

    const wrapper = document.getElementById("videoWrapper");
    wrapper.innerHTML = "";

    const video = document.createElement("video");
    video.width = 360;
    video.controls = true;
    video.autoplay = true;
    video.volume = 0.1;
    video.style.marginTop = "20px";
    wrapper.appendChild(video);

    if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(encodedURL);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // Safari atau browser yang sudah dukung .m3u8
        video.src = encodedURL;
        video.addEventListener('loadedmetadata', () => {
        video.play();
        });
    } else {
        // Fallback, tidak bisa memutar HLS
        wrapper.innerHTML = "<p>Browser kamu tidak mendukung streaming video ini.</p>";
    }
}
  

function fetchData() {
    const input = document.getElementById("charName").value.trim();
    const charaBtns = document.querySelectorAll(".chara");

    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";
        });
    } else {
        const name = document.getElementById("charName").value;
        alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
    }
}