Oke, lanjut. Sekarang kita pakai metadata yang sudah masuk ke data.json supaya card gallery jadi lebih berguna.

Target step ini

Kita tampilkan di card:

• judul
• label type: VIDEO, STREAM, IMAGE
• durasi untuk video mp4

Jadi gallery kamu nanti lebih informatif.

1. Ganti app.js dengan versi ini

Replace seluruh isi app.js:

const gallery = document.getElementById("gallery");
const modal = document.getElementById("playerModal");
const player = document.getElementById("player");

let currentHls = null;

function formatDuration(seconds) {
  if (!seconds || isNaN(seconds)) return "";

  const hrs = Math.floor(seconds / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  if (hrs > 0) {
    return `${hrs}:${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
  }

  return `${mins}:${String(secs).padStart(2, "0")}`;
}

function getBadgeText(item) {
  if (item.kind === "video") return "VIDEO";
  if (item.kind === "stream") return "STREAM";
  if (item.kind === "image") return "IMAGE";
  return item.type ? item.type.toUpperCase() : "MEDIA";
}

function renderGallery(items) {
  gallery.innerHTML = "";

  items.forEach(item => {
    const div = document.createElement("div");
    div.className = "card";

    const durationText =
      item.kind === "video" && item.duration
        ? `<span class="card-duration">${formatDuration(item.duration)}</span>`
        : "";

    div.innerHTML = `
      <div class="thumb-wrap">
        <img src="${item.thumb}" alt="${item.title}">
        <span class="card-badge">${getBadgeText(item)}</span>
        ${durationText}
      </div>
      <div class="card-body">
        <p class="card-title">${item.title}</p>
      </div>
    `;

    div.onclick = () => openPlayer(item);
    gallery.appendChild(div);
  });
}

fetch("data.json")
  .then(res => res.json())
  .then(data => {
    renderGallery(data);
  })
  .catch(err => {
    console.error("Gagal load data.json:", err);
    gallery.innerHTML = `<p>Gagal memuat data gallery.</p>`;
  });

function openPlayer(item) {
  modal.classList.remove("hidden");

  if (currentHls) {
    currentHls.destroy();
    currentHls = null;
  }

  player.innerHTML = "";

  if (item.type === "mp4") {
    player.innerHTML = `
      <div class="video-wrapper">
        <video controls autoplay playsinline>
          <source src="${item.src}" type="video/mp4">
        </video>
      </div>
    `;
  } else if (item.type === "image") {
    player.innerHTML = `
      <div class="image-wrapper">
        <img src="${item.src}" alt="${item.title}">
      </div>
    `;
  } else if (item.type === "iframe") {
    player.innerHTML = `
      <div class="iframe-wrapper">
        <iframe
          src="${item.src}"
          allowfullscreen
          loading="lazy"
          referrerpolicy="strict-origin-when-cross-origin">
        </iframe>
      </div>
    `;
  } else if (item.type === "m3u8") {
    player.innerHTML = `
      <div class="video-wrapper">
        <video id="hlsPlayer" controls autoplay playsinline></video>
      </div>
    `;

    const video = document.getElementById("hlsPlayer");

    if (window.Hls && Hls.isSupported()) {
      currentHls = new Hls();
      currentHls.loadSource(item.src);
      currentHls.attachMedia(video);
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = item.src;
    } else {
      player.innerHTML = `<p>Browser tidak mendukung HLS.</p>`;
    }
  } else {
    player.innerHTML = `<p>Tipe media tidak dikenali.</p>`;
  }
}

function closePlayer() {
  modal.classList.add("hidden");

  if (currentHls) {
    currentHls.destroy();
    currentHls = null;
  }

  player.innerHTML = "";
}

2. Tambahkan CSS ini ke style.css

Tambahkan di bawah CSS yang sekarang:

.thumb-wrap {
  position: relative;
}

.card-body {
  padding: 10px;
}

.card-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
}

.card-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
}

Kalau mau lebih rapi, card p lama bisa dihapus karena sekarang kita pakai .card-title.

Kalau CSS kamu masih pakai ini:

.card p {
  margin: 0;
  padding: 10px;
  font-size: 14px;
}

boleh dihapus supaya tidak bentrok gaya.

3. Hasil yang akan kamu lihat

Nanti card akan tampil seperti ini:

• kiri atas: VIDEO / STREAM / IMAGE
• kanan bawah: durasi 2:05 untuk mp4
• bawah thumbnail: judul file

4. Kenapa ini penting

Sekarang data metadata kamu benar-benar kepakai.

Ini jadi dasar untuk step berikutnya:

• filter berdasarkan type
• sort berdasarkan duration
• tampilkan ukuran file
• bedakan short vertical dan horizontal nanti

5. Step berikutnya yang paling masuk akal

Setelah ini, saran terbaik adalah bikin filter tombol:

• All
• Video
• Stream
• Image

Itu sederhana, tapi langsung bikin site terasa jauh lebih hidup.

Kalau mau, next kita bikin filter itu.