Mengapa Kartu Artikel Populer Video Tanpa Thumbnail
Kartu marquee cuma cek thumbnail eksplisit. Video item fallback ke gradient. Fix: rantai thumbnail → i.ytimg hqdefault → gradient. hqdefault selalu ada untuk video publik.
Ringkasan
Halaman KotaPortal rusak. Video YouTube cuma tampil gradient biru-ungu. Sekarang sudah diperbaiki dengan rantai fallback.
Masalah: Video Item Cuma Gradient Placeholder
Saya buka halaman KotaPortal, bagian "Artikel Populer" marquee. Item yang pakai video YouTube nampak jelek: cuma gradient placeholder biru-ungu, tidak ada thumbnail. Nyari di kode: PopularMarquee cuma cek field thumbnail eksplisit. Entitas video dari YouTube ngga punya field itu — mereka punya video_youtube_id.
Perbaikan: Rantai Fallback di Komponen
Commit 65ed6ab nambah rantai fallback di komponen: thumbnail eksplisit kalau ada, konstruksi URL i.ytimg.com/vi/{videoId}/hqdefault.jpg, lalu gradient placeholder. hqdefault (480x360) selalu ada untuk video publik [7][8]. maxresdefault (1280x720) cuma ada kalau video HD — jangan dipakai tanpa fallback.
Konfigurasi & Implementasi
Next.js next/image butuh remotePatterns buat domain eksternal [9]. CSP img-src udah allow i.ytimg.com + img.youtube.com. Ngga butuh YouTube Data API quota — fetch gambar murni ke CDN.
const getPoster = (item: PopulerItem) => {
if (item.thumbnail) return item.thumbnail
if (item.video_type === 'youtube' && item.video_youtube_id) {
return `https://i.ytimg.com/vi/${item.video_youtube_id}/hqdefault.jpg`
}
return '/gradient-placeholder.svg'
}PopulerItem type + mapping 3 pilar (olahraga/kebudayaan/kepemudaan) sekarang bawa video_type + video_youtube_id. Read-path only, ngga ada input user.
Sumber
- ThumbnailsGrabber: maxresdefault not always present; hqdefault always exists
- open-navigator/youtubeThumbnail.ts: hqdefault guaranteed; maxresdefault needs fallback
- Next.js Image: remotePatterns for i.ytimg.com / img.youtube.com