Mantap, sudah live. Saya cek sosmedviral.pages.dev dan situsnya memang sudah tampil dengan judul My Video Gallery plus filter All / Video / Stream / Image. (SOS Med Viral)
Untuk tahap ini, video contoh kecil dari Instagram justru bagus. Itu pilihan yang masuk akal buat testing karena:
- upload/deploy lebih cepat
- thumbnail dan player lebih gampang diuji
- kalau ada bug, kamu tidak nunggu file besar
Sekarang fondasi kamu sudah beres:
- site live
- gallery tampil
- filter jalan
- player multi-format sudah ada
- pipeline lokal sudah kebentuk
Langkah paling masuk akal berikutnya bukan ganti UI dulu, tapi rapikan konten dan struktur produksi.
Yang sebaiknya kamu lakukan sekarang
1. Pisahkan konten test dan konten real
Buat aturan sederhana:
media/test/untuk uji cobamedia/live/untuk konten yang benar-benar mau ditampilkan
Atau kalau belum mau ubah struktur folder, minimal kasih prefix nama file:
test-video1.mp4live-video1.mp4
Tujuannya biar nanti kamu tidak campur aduk file demo dan file sungguhan.
2. Mulai batasi file besar di repo
Untuk contoh kecil aman. Tapi kalau nanti mulai masuk banyak MP4 atau HLS .ts, repo GitHub bisa cepat berat. Dalam jangka panjang, pendekatan yang lebih sehat adalah:
- frontend tetap di Pages
- media berat di external storage / CDN / R2
Itu nanti. Sekarang tidak perlu dipaksa dulu.
3. Tambah metadata yang benar-benar berguna
Step berikut yang paling terasa manfaatnya adalah:
- tampilkan
size - tampilkan
duration - tampilkan label
verticalataulandscape
Khusus konten Instagram/TikTok, label orientasi itu akan sangat berguna.
Saran next lesson yang paling cocok
Menurut saya yang paling pas setelah ini adalah:
deteksi orientasi video otomatis
Jadi nanti card bisa punya label:
VERTICALHORIZONTAL
Ini penting buat konten sosmed, karena sumber kamu banyak dari Instagram/TikTok. Setelah itu baru gampang bikin UI player yang menyesuaikan konten portrait.
Kalau mau, kita lanjut ke auto detect orientation video di generate.js.
