Lanjut. Sekarang step paling berguna setelah category filter adalah:

Auto detect orientasi video

Karena konten kamu banyak dari:

• TikTok
• Instagram
• reels / shorts

maka metadata seperti ini bakal sangat berguna:

• orientation: "portrait"
• orientation: "landscape"
• width
• height

Nanti bisa dipakai untuk:

• badge VERTICAL / WIDE
• sorting
• player yang menyesuaikan
• halaman khusus short video

Step 1 — upgrade generate.js

Kita tambahkan pembaca resolusi video pakai ffprobe.

Tambahkan function ini di atas files.forEach(...)

function getVideoDimensions(filePath) {
  try {
    const result = execSync(
      `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0:s=x "${filePath}"`
    )
      .toString()
      .trim();

    const [width, height] = result.split("x").map(Number);

    if (!width || !height) {
      return {
        width: null,
        height: null,
        orientation: "unknown"
      };
    }

    let orientation = "square";

    if (height > width) {
      orientation = "portrait";
    } else if (width > height) {
      orientation = "landscape";
    }

    return {
      width,
      height,
      orientation
    };
  } catch {
    return {
      width: null,
      height: null,
      orientation: "unknown"
    };
  }
}

Step 2 — masukkan ke blok MP4

Di bagian MP4, sebelum data.push(...), tambahkan:

const videoMeta = getVideoDimensions(fullPath);

Lalu ubah object MP4 jadi seperti ini:

data.push({
  title: meta.title,
  category: meta.category,
  categorySlug: meta.categorySlug,
  tags: meta.tags,
  slug: meta.slug,
  type: "mp4",
  kind: "video",
  src: makeMediaUrl(file),
  thumb: thumb
    ? makeMediaUrl(thumb)
    : "https://dummyimage.com/300x200/000/fff&text=No+Thumb",
  duration: getVideoDuration(fullPath),
  size: getFileSize(fullPath),
  width: videoMeta.width,
  height: videoMeta.height,
  orientation: videoMeta.orientation
});

Step 3 — kalau mau, tambahkan juga ke M3U8

Untuk .m3u8 lokal ini kadang tidak selalu praktis dibaca dimensinya dari playlist, jadi untuk sekarang:

• fokus dulu ke MP4
• stream belakangan

Itu lebih aman.

Step 4 — generate ulang

npm run generate

Lalu cek data.json.

Sekarang item video harus punya seperti ini:

{
  "title": "cewek manis dance",
  "type": "mp4",
  "kind": "video",
  "width": 720,
  "height": 1280,
  "orientation": "portrait"
}

Step 5 — tampilkan badge orientasi di card

Di app.js, cari bagian ini:

const categoryText = item.category
  ? `<span class="card-category">${item.category}</span>`
  : "";

Tambahkan di atasnya:

const orientationText =
  item.orientation && item.orientation !== "unknown"
    ? `<span class="card-orientation">${item.orientation.toUpperCase()}</span>`
    : "";

Lalu di div.innerHTML, bagian body jadi:

<div class="card-body">
  <p class="card-title" title="${item.title}">${item.title}</p>
  ${categoryText}
  ${orientationText}
</div>

Step 6 — CSS badge orientasi

Tambahkan ke style.css:

.card-orientation {
  display: inline-block;
  margin-top: 6px;
  margin-left: 6px;
  font-size: 11px;
  color: #ddd;
  background: #2a2a2a;
  padding: 3px 6px;
  border-radius: 6px;
}

Kalau mau sejajar dengan category, bisa juga nanti kita rapikan ke flex row.

Hasilnya

Nanti di bawah judul kamu akan lihat misalnya:

• Social Media
• PORTRAIT

atau

• Movies
• LANDSCAPE

Kenapa ini langkah berikutnya yang tepat

Karena sekarang kamu sudah punya:

• type
• category
• tags
• duration

Yang kurang tinggal:

• bentuk media

Dan untuk situs video kamu, itu sangat berguna.

Kalau kamu mau, next saya bisa langsung bikinkan generate.js full final version v2 yang sudah termasuk:

• category
• tags
• slug
• duration
• size
• width
• height
• orientation

jadi kamu tinggal replace sekali lagi.