FIX sudahbisa.. saya pakai title pake spasi juga bisa dibaca,, berektensi wabp udah normal bisa diplay tanpa masalah.. NEXT

Mantap. Berarti sekarang fondasi kamu sudah kuat:

• title dengan spasi aman
• webp normal
• player jalan
• R2 jalan
• release flow jalan

Sekarang NEXT yang paling layak adalah:

Auto parsing filename jadi metadata

Ini upgrade yang paling masuk akal, karena sekarang kamu sudah mulai rapikan nama file.
Biar nanti kamu tidak cuma punya:

• title
• type
• src

Tapi juga otomatis punya:

• category
• tags
• slug

Kenapa ini penting

Karena nanti kamu bisa:

• filter per kategori
• bikin halaman kategori
• SEO lebih rapi
• title tidak perlu edit manual
• data.json makin “hidup”

Format filename yang kita pakai

Biar gampang, kita sepakati pola ini:

kategori__judul__tag1-tag2-tag3.mp4

Contoh:

reels__cewek manis dance__viral-fyp.mp4
tiktok__kucing lucu tidur__funny-hewan.mp4
shorts__kuliner bakso enak__makan-jajan.mp4

Hasil otomatis yang kita mau

Dari file ini:

reels__cewek manis dance__viral-fyp.mp4

jadi data.json:

{
  "title": "cewek manis dance",
  "category": "reels",
  "tags": ["viral", "fyp"],
  "slug": "cewek-manis-dance",
  "type": "mp4"
}

Step 1 — Tambahkan helper ke generate.js

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

function parseFileMeta(fileName) {
  const ext = path.extname(fileName);
  const base = path.basename(fileName, ext);

  const parts = base.split("__");

  let category = "uncategorized";
  let title = base;
  let tags = [];

  if (parts.length >= 2) {
    category = parts[0].trim() || "uncategorized";
    title = parts[1].trim() || base;
  }

  if (parts.length >= 3) {
    tags = parts[2]
      .split("-")
      .map(tag => tag.trim())
      .filter(Boolean);
  }

  const slug = title
    .toLowerCase()
    .replace(/\s+/g, "-")
    .replace(/[^a-z0-9\-]/g, "");

  return {
    category,
    title,
    tags,
    slug
  };
}

Step 2 — Pakai hasil parsing di tiap item

Di blok MP4, ganti bagian data.push({ ... }) jadi:

const meta = parseFileMeta(file);

data.push({
  title: meta.title,
  category: meta.category,
  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)
});

Di blok M3U8, ganti jadi:

const meta = parseFileMeta(file);

data.push({
  title: meta.title,
  category: meta.category,
  tags: meta.tags,
  slug: meta.slug,
  type: "m3u8",
  kind: "stream",
  src: makeMediaUrl(file),
  thumb: thumb
    ? makeMediaUrl(thumb)
    : "https://dummyimage.com/300x200/000/fff&text=Stream",
  size: getFileSize(fullPath)
});

Di blok IMAGE, ganti jadi:

const meta = parseFileMeta(file);

data.push({
  title: meta.title,
  category: meta.category,
  tags: meta.tags,
  slug: meta.slug,
  type: "image",
  kind: "image",
  src: makeMediaUrl(file),
  thumb: makeMediaUrl(file),
  size: getFileSize(fullPath)
});

Hasilnya

Kalau nama file:

reels__cewek manis dance__viral-fyp.mp4

maka data.json akan punya:

{
  "title": "cewek manis dance",
  "category": "reels",
  "tags": ["viral", "fyp"],
  "slug": "cewek-manis-dance"
}

Step berikutnya sesudah ini

Setelah metadata filename jalan, upgrade paling enak adalah:

Filter kategori otomatis

Jadi bukan cuma:

• All
• Video
• Stream
• Image

tapi juga:

• reels
• tiktok
• shorts

Itu bakal terasa banget.

Saran saya

Next terbaik:
filename parsing dulu, lalu
filter kategori otomatis.

Kalau kamu mau, saya bisa langsung kasih generate.js full final version yang sudah digabung semua:

• R2 URL
• metadata
• size
• duration
• parse category/tag/slug

Jadi kamu tinggal replace sekali.

jika category nya ada spasinya bagaimana misalnya Social Media

Pertanyaan bagus — ini penting kalau kamu mulai serius struktur data 👍

Jawaban singkat:
👉 BOLEH pakai spasi (Social Media)
👉 tapi jangan dipakai mentah untuk logic/filter

🎯 Best Practice

Kita pisahkan jadi 2:

🔥 Contoh hasil ideal

Filename:

Social Media__cewek manis dance__viral-fyp.mp4

Hasil data.json:

{
  "category": "Social Media",
  "categorySlug": "social-media",
  "title": "cewek manis dance",
  "slug": "cewek-manis-dance",
  "tags": ["viral", "fyp"]
}

⚡ Kenapa ini penting

Kalau kamu pakai spasi langsung:

if (item.category === "Social Media")

👉 rawan error:

• beda kapital
• typo
• spasi dobel

Kalau pakai slug:

if (item.categorySlug === "social-media")

👉 aman & konsisten ✔

🔧 Update parseFileMeta

Ganti function kamu jadi ini:

function slugify(text) {
  return text
    .toLowerCase()
    .trim()
    .replace(/\s+/g, "-")
    .replace(/[^a-z0-9\-]/g, "");
}

function parseFileMeta(fileName) {
  const ext = path.extname(fileName);
  const base = path.basename(fileName, ext);

  const parts = base.split("__");

  let category = "Uncategorized";
  let title = base;
  let tags = [];

  if (parts.length >= 2) {
    category = parts[0].trim() || "Uncategorized";
    title = parts[1].trim() || base;
  }

  if (parts.length >= 3) {
    tags = parts[2]
      .split("-")
      .map(tag => tag.trim())
      .filter(Boolean);
  }

  return {
    category,
    categorySlug: slugify(category),
    title,
    slug: slugify(title),
    tags
  };
}

🎯 Hasilnya sekarang

Kalau file:

Social Media__video lucu banget__funny-viral.mp4

👉 otomatis:

{
  "category": "Social Media",
  "categorySlug": "social-media",
  "title": "video lucu banget",
  "slug": "video-lucu-banget",
  "tags": ["funny", "viral"]
}

🚀 Bonus (ini bakal kamu pakai nanti)

Dengan categorySlug, kamu bisa:

🔥 Filter UI otomatis

item.categorySlug === "social-media"

🔥 URL routing (next level)

/site/category/social-media

💬 Saran jujur

Mulai sekarang:

👉 selalu pakai slug untuk logic
👉 pakai label (spasi) untuk tampilan

👉 Next step paling cocok

Setelah ini:

👉 kita bikin:
filter kategori otomatis dari data.json

Jadi tombol filter tidak hardcoded lagi 🔥

Kalau siap, bilang saja:

👉 "gas auto category filter"

Ini bakal bikin site kamu terasa jauh lebih “hidup” 🚀