System Requirements Document for streaming-drama-lokareell

1. Introduction

LokaReel adalah aplikasi web streaming drama pendek mobile-first berbahasa Indonesia yang dibangun sebagai aplikasi hiburan untuk menemukan dan menonton serial drama pendek. Produk ini menyasar penonton muda yang menonton dari ponsel — di kasur, di perjalanan, di sela waktu istirahat — sehingga pengalaman utama dirancang untuk layar kecil, sentuhan jempol, dan sesi menonton pendek yang berulang.

Nama produk yang dipakai di logo teks, judul, dan UI adalah LokaReel. Aplikasi dibangun sebagai aplikasi web interaktif yang dapat diubah lewat AI Builder, bukan sekadar landing page, dengan pengalaman demo yang berfungsi dan status fitur yang belum aktif dijelaskan secara transparan.

Audiens produk:

• Penonton Gratis — pengguna yang menonton episode pilihan tanpa langganan, setelah iklan pra-putar.
• Pelanggan Premium — pengguna berlangganan yang membuka episode terkunci dan menonton tanpa iklan.
• Pengelola Katalog — aktor dengan akses pengelola terpisah untuk mengelola katalog dan memantau status pembayaran.

Seluruh materi poster dan judul drama bersifat demo orisinal atau placeholder; tidak ada karya berhak cipta yang disalin.

2. System Overview

LokaReel adalah aplikasi web streaming drama pendek dengan tema gelap elegan, aksen coral/ungu hangat, kartu poster besar, navigasi bawah, tombol mudah disentuh, serta loading/empty/error states, aksesibilitas, dan responsif desktop. Aplikasi menyediakan:

• Penemuan konten: beranda dengan hero drama unggulan, kategori, pencarian, tren, dan rekomendasi; katalog dengan filter genre; halaman detail drama dengan sinopsis, daftar episode, durasi, status kunci, dan tombol tonton.
• Pemutaran: pemutar video responsif dengan kontrol dasar, subtitle placeholder, lanjutkan menonton, dan simpan progres.
• Identitas dan profil: registrasi/masuk serta profil dengan watchlist, riwayat, dan pengaturan akun.
• Langganan dan pembayaran: halaman paket langganan, status keanggotaan, riwayat transaksi, dan checkout QRIS melalui PanzzPay.
• Tingkat akses konten: level gratis dapat menonton episode pilihan setelah iklan pra-putar; paket premium membuka episode terkunci dan meniadakan iklan.
• Pengelolaan: dashboard pengelola sederhana untuk mengelola drama, episode, paket, dan melihat status pembayaran tanpa membocorkan data sensitif.

Aktor sistem: tiga persona manusia (Penonton Gratis, Pelanggan Premium, Pengelola Katalog) serta aktor non-persona: PanzzPay (penyedia pembayaran QRIS eksternal) dan backend terintegrasi AI Builder (proses sistem).

Batas dan pengecualian sempit:

• Materi poster dan judul harus demo orisinal atau placeholder; dilarang menyalin karya berhak cipta.
• Pengguna hanya boleh membaca/mengubah data miliknya sendiri.
• Akses pengelola terpisah untuk katalog.
• Dashboard pengelola tidak boleh membocorkan data sensitif.
• Integrasi pembayaran PanzzPay harus sesuai dokumentasi pelanggan dengan API base https://panzzpay.my.id.
• Aplikasi dibangun sebagai aplikasi web interaktif yang dapat diubah lewat AI Builder, bukan sekadar landing page.

2a. Product Interpretation and Delivery Boundary

Kepemilikan delivery dan akses. LokaReel memiliki identitas aplikasi sendiri. Penonton mendaftar sendiri (self-service) sebelum fitur personal yang tahan lama — watchlist, riwayat, progres menonton, dan status langganan — dapat disimpan dan dilanjutkan. Verifikasi pengguna lama melayani penonton dan pengelola katalog melalui satu permukaan masuk bersama; pengelola katalog memerlukan otorisasi/provisioning terpisah sebelum dapat mengakses katalog dan pemantauan pembayaran. Permukaan masuk (Landing, Sign Up, Login) dapat diakses tanpa identitas; destinasi yang menyimpan state personal atau state pengelola dilindungi.

Batas current vs future. Seluruh perilaku yang dijelaskan dalam dokumen ini adalah current: penemuan konten, pemutaran dengan iklan pra-putar untuk episode gratis, langganan premium yang membuka episode terkunci dan meniadakan iklan, checkout QRIS PanzzPay, profil dengan watchlist/riwayat/pengaturan akun, serta dashboard pengelola. Status fitur yang belum aktif (misalnya callback pembayaran yang belum tersambung penuh di lingkungan demo) ditampilkan secara transparan di UI, bukan disembunyikan.

Kepemilikan eksternal. Pemrosesan pembayaran QRIS dan callback status pembayaran dimiliki oleh PanzzPay sebagai penyedia eksternal; LokaReel memiliki porsi first-party dari checkout (pemilihan paket, pembuatan order, tampilan QRIS, dan status transaksi). Pemutaran video menggunakan URL video placeholder.

2b. Source Content Inventory

Tidak ada direktif referensi dengan uses: content_source. Dokumentasi PanzzPay yang diberikan pelanggan dipakai sebagai feature_reference dan domain_context (integrasi pembayaran, API base https://panzzpay.my.id), bukan sebagai sumber inventaris konten faktual. Karena itu bagian ini tidak memuat inventaris konten.

2c. Page Content and Component Coverage

Landing

• Informasi/state: hero drama unggulan full-bleed (~72vh) untuk drama unggulan "Senja di Jakarta" dengan scrim gelap di bagian bawah; chip kapsul ungu "LOKAREEL ORIGINAL"; judul drama dalam Quicksand 700 skala display; satu baris meta muted ("12 Episode · Drama Romantis · 2024"); rail "Sedang Tren" berisi poster kapsul 160px yang dapat digeser horizontal; chip genre; rail "Rekomendasi Untukmu"; rail "Lanjut Tonton" dengan progress bar pada tiap poster (hanya muncul bila pengguna punya progres tersimpan); top bar mengambang dengan wordmark LokaReel dan kapsul pencarian.
• Aksi utama: tombol pill coral "TONTON" (menuju Player atau Drama Details), tombol glass-outline "DAFTAR SAYA" (menuju Sign Up bila belum masuk, atau Profile bila sudah masuk), ketuk poster untuk membuka Drama Details, ketuk chip genre untuk membuka Catalog terfilter, ketuk kapsul pencarian untuk membuka Search.
• Aksi pendukung: geser rail horizontal, ketuk item "Lanjut Tonton" untuk melanjutkan pemutaran.
• Entitas domain: Drama (judul, slug, sinopsis, poster, genre, status, featured), Episode (durasi, free/locked), WatchProgress.
• Tanggung jawab komponen: hero poster + light pool ambient coral-ke-ungu yang melayang lambat (20 detik, satu-satunya gerakan looping); rail poster kapsul dengan press-glow; chip genre; top bar mengambang; bottom nav kapsul mengambang.
• State: loading (skeleton poster kapsul), empty (rail tanpa konten menampilkan pesan "Belum ada drama di kategori ini"), success (hero + rail terisi), error (kartu error dengan tombol "Coba Lagi"), recovery (retry memuat ulang rail yang gagal).

Sign Up

• Informasi/state: form pendaftaran penonton baru (nama, email, kata sandi), penjelasan singkat manfaat akun (watchlist, riwayat, progres, langganan), tautan ke Login.
• Aksi utama: kirim pendaftaran; setelah berhasil, pengguna masuk dan diarahkan ke Landing atau tujuan awal.
• Aksi pendukung: beralih ke Login, tampilkan/sembunyikan kata sandi.
• Entitas domain: User/profile.
• Tanggung jawab komponen: form validasi input (email format, kata sandi minimum), pesan error inline, tombol pill coral 56px.
• State: loading (tombol mengirim), empty (form kosong), success (akun dibuat, sesi aktif), error (email sudah terdaftar, kata sandi lemah, jaringan gagal), recovery (pesan error + form tetap terisi).

Login

• Informasi/state: form masuk bersama untuk penonton dan pengelola katalog; tautan ke Sign Up.
• Aksi utama: kirim kredensial; penonton diarahkan ke Landing/Profile, pengelola katalog diarahkan ke Catalog Management.
• Aksi pendukung: beralih ke Sign Up, lupa kata sandi (bila didukung backend).
• Entitas domain: User/profile.
• Tanggung jawab komponen: form validasi, pesan error inline, tombol pill coral.
• State: loading, empty, success (sesi aktif sesuai peran), error (kredensial salah, akun tidak ditemukan), recovery (pesan error + form tetap terisi).

Search

• Informasi/state: kolom pencarian, hasil sebagai daftar poster kapsul, riwayat pencarian terakhir (bila ada), pesan kosong.
• Aksi utama: ketik kata kunci, jalankan pencarian, ketuk hasil untuk membuka Drama Details.
• Aksi pendukung: hapus kata kunci, filter hasil berdasarkan genre.
• Entitas domain: Drama (judul, slug, genre, poster).
• Tanggung jawab komponen: input pencarian, daftar hasil, state kosong, state error.
• State: loading (skeleton hasil), empty ("Tidak ada drama yang cocok"), success (daftar hasil), error (gagal memuat hasil + tombol "Coba Lagi"), recovery (retry).

Catalog

• Informasi/state: grid poster 2 kolom di 375px, 3 di 768px, 5 di 1280px; baris chip genre sticky yang dapat digeser horizontal; jumlah hasil.
• Aksi utama: pilih genre untuk memfilter, ketuk poster untuk membuka Drama Details.
• Aksi pendukung: reset filter, geser chip genre.
• Entitas domain: Drama (genre, status, featured, poster).
• Tanggung jawab komponen: grid poster kapsul, chip genre, indikator filter aktif.
• State: loading (skeleton grid), empty ("Belum ada drama untuk genre ini"), success (grid terisi), error (gagal memuat katalog + tombol "Coba Lagi"), recovery (retry).

Drama Details

• Informasi/state: poster full-width yang bleed di belakang sheet melengkung; sinopsis; daftar episode sebagai pill row dengan nomor episode, judul, durasi, dan status kunci; chip "PREMIUM" pada episode terkunci; tombol tonton.
• Aksi utama: ketuk episode untuk membuka Player; ketuk tombol tonton untuk memutar episode pertama yang tersedia; tambah/hapus dari watchlist.
• Aksi pendukung: gulir daftar episode, kembali ke Catalog/Search.
• Entitas domain: Drama (judul, slug, sinopsis, poster, genre, status, featured), Episode (drama, urutan, judul, durasi, video URL placeholder, free/locked), Watchlist.
• Tanggung jawab komponen: sheet melengkung yang naik menutupi poster, pill row episode dengan candy-lock ring ungu untuk episode terkunci, tombol pill coral.
• State: loading (skeleton detail), empty (drama tanpa episode menampilkan pesan), success (detail + daftar episode), error (gagal memuat detail + tombol "Coba Lagi"), recovery (retry).

Player

• Informasi/state: video full-bleed 16:9; kontrol dasar mengambang sebagai kapsul di atas video; subtitle placeholder; drawer episode yang meluncur dari bawah sebagai sheet melengkung; indikator progres; kartu iklan pra-putar (kartu coral datar dengan "IKLAN" dalam micro-caps dan countdown ring) untuk episode gratis; badge status premium.
• Aksi utama: putar/jeda, geser progres, atur volume, aktifkan subtitle placeholder, lanjutkan menonton dari posisi tersimpan, selesaikan iklan pra-putar untuk episode gratis, buka drawer episode untuk berpindah episode.
• Aksi pendukung: layar penuh, kembali ke Drama Details.
• Entitas domain: Episode (video URL placeholder, free/locked), WatchProgress, AdImpression/AdCompletion, Subscription (status).
• Tanggung jawab komponen: pemutar video responsif, kontrol kapsul, kartu iklan placeholder, drawer episode, penyimpanan progres.
• State: loading (buffering), empty (video placeholder tidak tersedia), success (pemutaran berjalan, progres tersimpan), error (video gagal dimuat + tombol "Coba Lagi"), recovery (retry atau pilih episode lain); episode terkunci menampilkan ajakan ke Plans bila langganan tidak aktif.

Profile

• Informasi/state: avatar kapsul besar (inisial coral/ungu), tab watchlist dan riwayat sebagai pill row, kartu langganan bergaris coral glossy, pengaturan akun.
• Aksi utama: buka watchlist, buka riwayat tontonan, ubah pengaturan akun, keluar.
• Aksi pendukung: ketuk item watchlist/riwayat untuk membuka Drama Details atau Player.
• Entitas domain: User/profile, Watchlist, WatchProgress, Subscription.
• Tanggung jawab komponen: avatar kapsul, tab pill, daftar pill row, kartu langganan.
• State: loading (skeleton), empty (watchlist/riwayat kosong dengan pesan ajakan menjelajah), success (daftar terisi), error (gagal memuat + tombol "Coba Lagi"), recovery (retry).

Plans

• Informasi/state: daftar paket langganan dengan nama, durasi, harga jelas, dan benefit; penjelasan level gratis (episode pilihan setelah iklan pra-putar) dan paket premium (membuka episode terkunci, meniadakan iklan); penanda paket aktif bila ada.
• Aksi utama: pilih paket untuk melanjutkan ke Checkout.
• Aksi pendukung: bandingkan benefit antar paket.
• Entitas domain: SubscriptionPlan (nama, durasi, harga, benefit), Subscription (status).
• Tanggung jawab komponen: kartu paket kapsul dengan tepi coral/ungu, tabel benefit, penekanan harga dengan numeral Manrope tabular.
• State: loading (skeleton kartu), empty (belum ada paket tersedia), success (daftar paket), error (gagal memuat paket + tombol "Coba Lagi"), recovery (retry).

Checkout

• Informasi/state: ringkasan paket terpilih (nama, durasi, harga), jumlah rupiah dan jumlah unik, order ID unik, payload QRIS dalam frame persegi (bukan kapsul, agar terbaca sebagai kode nyata), waktu kedaluwarsa, status transaksi (pending/paid/expired/canceled).
• Aksi utama: buat order, tampilkan QRIS, pantau status pembayaran, lanjutkan ke Membership setelah pembayaran terkonfirmasi.
• Aksi pendukung: batalkan order, kembali ke Plans.
• Entitas domain: Payment/TopUp (order ID unik, user, jumlah rupiah, jumlah unik, status pending/paid/expired/canceled, payload QRIS, waktu kedaluwarsa), SubscriptionPlan, Subscription.
• Tanggung jawab komponen: ringkasan paket, frame QRIS persegi, indikator status idempoten, countdown kedaluwarsa.
• State: loading (membuat order), empty (belum ada paket dipilih), success (QRIS tampil, status pending), error (gagal membuat order + tombol "Coba Lagi"), recovery (retry atau buat order baru); status expired/canceled menampilkan ajakan membuat order baru.

Membership

• Informasi/state: status keanggotaan (aktif/tidak aktif, paket, mulai, berakhir), riwayat transaksi sebagai daftar pill row dengan order ID, jumlah, status, dan waktu.
• Aksi utama: lihat status keanggotaan, buka riwayat transaksi, lanjutkan ke Plans untuk memperpanjang atau mengganti paket.
• Aksi pendukung: buka detail transaksi.
• Entitas domain: Subscription (user, paket, status, mulai, berakhir), Payment/TopUp.
• Tanggung jawab komponen: kartu status keanggotaan, daftar riwayat transaksi, chip status transaksi.
• State: loading (skeleton), empty (belum ada transaksi dengan pesan ajakan berlangganan), success (status + riwayat), error (gagal memuat + tombol "Coba Lagi"), recovery (retry).

Catalog Management

• Informasi/state: daftar drama, episode, dan paket langganan; form tambah/ubah drama (judul, slug, sinopsis, poster, genre, status, featured); form tambah/ubah episode (drama, urutan, judul, durasi, video URL placeholder, free/locked); form tambah/ubah paket (nama, durasi, harga, benefit).
• Aksi utama: buat, ubah, dan hapus drama/episode/paket; atur status free/locked episode.
• Aksi pendukung: cari dan filter daftar katalog.
• Entitas domain: Drama, Episode, SubscriptionPlan.
• Tanggung jawab komponen: tabel/daftar katalog, form validasi input, kontrol status free/locked, konfirmasi hapus.
• State: loading (skeleton), empty (belum ada drama/episode/paket), success (daftar terisi), error (validasi gagal atau gagal menyimpan + tombol "Coba Lagi"), recovery (retry atau perbaiki input).

Payment Monitoring

• Informasi/state: daftar transaksi dengan order ID, jumlah, status (pending/paid/expired/canceled), dan waktu; tanpa menampilkan payload QRIS mentah atau data sensitif lain.
• Aksi utama: lihat status pembayaran, filter berdasarkan status.
• Aksi pendukung: buka detail transaksi terbatas.
• Entitas domain: Payment/TopUp, Subscription.
• Tanggung jawab komponen: daftar transaksi, chip status, filter status.
• State: loading (skeleton), empty (belum ada transaksi), success (daftar terisi), error (gagal memuat + tombol "Coba Lagi"), recovery (retry).

3. Functional Requirements

Penemuan Konten

FR-01 — Beranda dengan hero drama unggulan (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat beranda dengan hero drama unggulan sehingga saya dapat langsung menemukan drama untuk ditonton.

• Trigger/input: membuka Landing.
• Observable result: hero full-bleed drama unggulan dengan judul, meta, dan tombol tonton.
• Access state: publik (tanpa identitas).
• Failure/recovery: gagal memuat hero → kartu error + tombol "Coba Lagi".
• Continuation: ketuk "TONTON" → Player atau Drama Details.

FR-02 — Kategori di beranda (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat kategori di beranda sehingga saya dapat menjelajah berdasarkan genre.

• Trigger/input: membuka Landing.
• Observable result: chip genre yang dapat diketuk.
• Access state: publik.
• Failure/recovery: gagal memuat kategori → chip disembunyikan dengan pesan error ringan.
• Continuation: ketuk chip → Catalog terfilter.

FR-03 — Pencarian dari beranda (explicit) As a Penonton Gratis / Pelanggan Premium, I should mencari drama dari beranda sehingga saya dapat menemukan judul tertentu.

• Trigger/input: ketuk kapsul pencarian, ketik kata kunci.
• Observable result: daftar hasil pencarian.
• Access state: publik.
• Failure/recovery: gagal memuat hasil → pesan error + tombol "Coba Lagi".
• Continuation: ketuk hasil → Drama Details.

FR-04 — Tren di beranda (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat rail "Sedang Tren" sehingga saya dapat mengikuti drama populer.

• Trigger/input: membuka Landing.
• Observable result: rail poster kapsul yang dapat digeser horizontal.
• Access state: publik.
• Failure/recovery: gagal memuat rail → pesan error + tombol "Coba Lagi".
• Continuation: ketuk poster → Drama Details.

FR-05 — Rekomendasi di beranda (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat rail "Rekomendasi Untukmu" sehingga saya dapat menemukan drama yang relevan.

• Trigger/input: membuka Landing.
• Observable result: rail poster kapsul rekomendasi.
• Access state: publik.
• Failure/recovery: gagal memuat rail → pesan error + tombol "Coba Lagi".
• Continuation: ketuk poster → Drama Details.

FR-06 — Katalog dengan filter genre (explicit) As a Penonton Gratis / Pelanggan Premium, I should memfilter katalog berdasarkan genre sehingga saya dapat mempersempit pilihan.

• Trigger/input: membuka Catalog, memilih chip genre.
• Observable result: grid poster terfilter.
• Access state: publik.
• Failure/recovery: gagal memuat katalog → pesan error + tombol "Coba Lagi".
• Continuation: ketuk poster → Drama Details.

FR-07 — Detail drama dengan sinopsis, daftar episode, durasi, status kunci, dan tombol tonton (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat detail drama sehingga saya dapat memutuskan untuk menonton.

• Trigger/input: ketuk poster dari Landing/Catalog/Search.
• Observable result: sinopsis, daftar episode dengan durasi dan status kunci, tombol tonton.
• Access state: publik.
• Failure/recovery: gagal memuat detail → pesan error + tombol "Coba Lagi".
• Continuation: ketuk episode → Player.

Pemutaran

FR-08 — Pemutar video responsif dengan kontrol dasar (explicit) As a Penonton Gratis / Pelanggan Premium, I should memutar video dengan kontrol dasar sehingga saya dapat menonton episode.

• Trigger/input: ketuk episode dari Drama Details.
• Observable result: video berjalan dengan kontrol putar/jeda, geser progres, volume, dan layar penuh.
• Access state: publik untuk episode gratis; episode terkunci memerlukan langganan premium aktif.
• Failure/recovery: video gagal dimuat → pesan error + tombol "Coba Lagi".
• Continuation: selesai menonton → episode berikutnya atau kembali ke Drama Details.

FR-09 — Subtitle placeholder (explicit) As a Penonton Gratis / Pelanggan Premium, I should mengaktifkan subtitle placeholder sehingga saya dapat melihat dukungan subtitle.

• Trigger/input: aktifkan kontrol subtitle di Player.
• Observable result: subtitle placeholder tampil di atas video.
• Access state: publik.
• Failure/recovery: subtitle gagal dimuat → indikator nonaktif.
• Continuation: lanjut menonton.

FR-10 — Lanjutkan menonton dan simpan progres (explicit) As a Penonton Gratis / Pelanggan Premium, I should melanjutkan menonton dari posisi terakhir dan menyimpan progres sehingga saya dapat menonton lintas sesi.

• Trigger/input: menonton episode; membuka kembali episode.
• Observable result: WatchProgress tersimpan; rail "Lanjut Tonton" dan riwayat menampilkan posisi terakhir.
• Access state: memerlukan identitas aplikasi (progres terikat ke pengguna).
• Failure/recovery: gagal menyimpan progres → progres lokal dipertahankan dan dicoba lagi.
• Continuation: lanjut menonton dari posisi tersimpan.

FR-11 — Iklan pra-putar untuk episode gratis (explicit) As a Penonton Gratis, I should menonton iklan pra-putar sebelum episode pilihan sehingga saya dapat menonton episode gratis.

• Trigger/input: memutar episode gratis tanpa langganan aktif.
• Observable result: kartu iklan placeholder dengan countdown ring; AdImpression/AdCompletion tercatat; episode diputar setelah iklan selesai.
• Access state: publik untuk episode gratis.
• Failure/recovery: iklan gagal dimuat → episode tetap dapat diputar atau pesan error dengan opsi coba lagi.
• Continuation: episode diputar.

FR-12 — Paket premium membuka episode terkunci dan meniadakan iklan (explicit) As a Pelanggan Premium, I should membuka episode terkunci dan menonton tanpa iklan sehingga saya mendapat akses penuh.

• Trigger/input: memutar episode terkunci dengan langganan premium aktif.
• Observable result: episode terkunci diputar tanpa iklan pra-putar.
• Access state: memerlukan langganan premium aktif.
• Failure/recovery: langganan tidak aktif → ajakan ke Plans.
• Continuation: lanjut menonton.

Identitas dan Profil

FR-13 — Registrasi penonton (required_inference) As a Penonton Gratis / Pelanggan Premium, I should mendaftar akun sehingga fitur personal (watchlist, riwayat, progres, langganan) dapat disimpan.

• Trigger/input: buka Sign Up, isi nama/email/kata sandi.
• Observable result: akun dibuat, sesi aktif.
• Access state: publik (tanpa identitas).
• Failure/recovery: email sudah terdaftar atau validasi gagal → pesan error inline.
• Continuation: diarahkan ke Landing/Profile.

FR-14 — Masuk pengguna lama (required_inference) As a Penonton Gratis / Pelanggan Premium / Pengelola Katalog, I should masuk sehingga saya dapat melanjutkan pekerjaan saya.

• Trigger/input: buka Login, isi kredensial.
• Observable result: sesi aktif sesuai peran.
• Access state: publik.
• Failure/recovery: kredensial salah → pesan error inline.
• Continuation: penonton → Landing/Profile; pengelola → Catalog Management.

FR-15 — Profil dengan watchlist, riwayat, dan pengaturan akun (explicit) As a Penonton Gratis / Pelanggan Premium, I should mengelola profil saya sehingga saya dapat mengakses watchlist, riwayat, dan pengaturan akun.

• Trigger/input: buka Profile.
• Observable result: watchlist, riwayat tontonan, dan pengaturan akun tampil.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal memuat → pesan error + tombol "Coba Lagi".
• Continuation: ketuk item → Drama Details/Player.

FR-16 — Watchlist (explicit) As a Penonton Gratis / Pelanggan Premium, I should menambah dan menghapus drama dari watchlist sehingga saya dapat menyimpan tontonan.

• Trigger/input: ketuk tombol watchlist di Drama Details.
• Observable result: Watchlist diperbarui dan tampil di Profile.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal menyimpan → pesan error + coba lagi.
• Continuation: buka watchlist dari Profile.

FR-17 — Riwayat tontonan (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat riwayat tontonan sehingga saya dapat menelusuri kembali apa yang sudah ditonton.

• Trigger/input: buka tab riwayat di Profile.
• Observable result: daftar riwayat dengan judul dan waktu.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal memuat → pesan error + tombol "Coba Lagi".
• Continuation: ketuk item → Drama Details/Player.

Langganan dan Pembayaran

FR-18 — Halaman paket langganan dengan penawaran, durasi, dan harga jelas (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat paket langganan dengan penawaran, durasi, dan harga yang jelas sehingga saya dapat memilih paket.

• Trigger/input: buka Plans.
• Observable result: daftar paket dengan nama, durasi, harga, dan benefit; penjelasan level gratis dan premium.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal memuat paket → pesan error + tombol "Coba Lagi".
• Continuation: pilih paket → Checkout.

FR-19 — Checkout QRIS PanzzPay (explicit) As a Penonton Gratis / Pelanggan Premium, I should menyelesaikan pembayaran QRIS sehingga langganan saya aktif.

• Trigger/input: pilih paket, buat order.
• Observable result: order ID unik, jumlah rupiah dan jumlah unik, payload QRIS, waktu kedaluwarsa, status pending.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal membuat order → pesan error + tombol "Coba Lagi"; status expired/canceled → ajakan membuat order baru.
• Continuation: setelah pembayaran terkonfirmasi → Membership.

FR-20 — Status keanggotaan (explicit) As a Pelanggan Premium, I should melihat status keanggotaan saya sehingga saya tahu masa aktif langganan.

• Trigger/input: buka Membership.
• Observable result: status, paket, mulai, berakhir.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal memuat → pesan error + tombol "Coba Lagi".
• Continuation: perpanjang → Plans.

FR-21 — Riwayat transaksi (explicit) As a Penonton Gratis / Pelanggan Premium, I should melihat riwayat transaksi saya sehingga saya dapat melacak pembayaran.

• Trigger/input: buka Membership.
• Observable result: daftar transaksi dengan order ID, jumlah, status, waktu.
• Access state: memerlukan identitas aplikasi.
• Failure/recovery: gagal memuat → pesan error + tombol "Coba Lagi".
• Continuation: buka detail transaksi.

FR-22 — Status transaksi idempoten (explicit) As a sistem, I should memproses status transaksi secara idempoten sehingga status pending/paid/expired/canceled konsisten meski callback berulang.

• Trigger/input: callback PanzzPay atau polling status.
• Observable result: status transaksi diperbarui sekali; langganan diaktifkan sekali.
• Access state: proses sistem.
• Failure/recovery: callback gagal → dicoba lagi tanpa duplikasi.
• Continuation: status final tercatat.

Pengelolaan

FR-23 — Dashboard pengelola untuk drama, episode, dan paket (explicit) As a Pengelola Katalog, I should mengelola drama, episode, dan paket sehingga katalog tetap konsisten.

• Trigger/input: buka Catalog Management.
• Observable result: drama/episode/paket dibuat, diubah, atau dihapus; status free/locked diatur.
• Access state: memerlukan otorisasi pengelola terpisah.
• Failure/recovery: validasi gagal → pesan error inline.
• Continuation: daftar katalog diperbarui.

FR-24 — Pemantauan status pembayaran tanpa membocorkan data sensitif (explicit) As a Pengelola Katalog, I should memantau status pembayaran sehingga saya dapat memverifikasi transaksi tanpa melihat data sensitif.

• Trigger/input: buka Payment Monitoring.
• Observable result: daftar transaksi dengan order ID, jumlah, status, waktu; tanpa payload QRIS mentah.
• Access state: memerlukan otorisasi pengelola terpisah.
• Failure/recovery: gagal memuat → pesan error + tombol "Coba Lagi".
• Continuation: filter berdasarkan status.

Kontrol Akses dan Validasi

FR-25 — Pengguna hanya membaca/mengubah data miliknya (explicit) As a sistem, I should menegakkan kontrol akses sehingga pengguna hanya membaca/mengubah data miliknya.

• Trigger/input: setiap permintaan baca/tulis data personal.
• Observable result: permintaan atas data pengguna lain ditolak.
• Access state: identitas aplikasi.
• Failure/recovery: akses ditolak → pesan error.
• Continuation: pengguna kembali ke data miliknya.

FR-26 — Akses pengelola terpisah untuk katalog (explicit) As a sistem, I should memisahkan akses pengelola sehingga hanya Pengelola Katalog yang dapat mengubah katalog.

• Trigger/input: permintaan ke Catalog Management/Payment Monitoring.
• Observable result: penonton ditolak; pengelola diizinkan.
• Access state: otorisasi pengelola terpisah.
• Failure/recovery: akses ditolak → pesan error.
• Continuation: pengelola melanjutkan pengelolaan.

FR-27 — Validasi input (explicit) As a sistem, I should memvalidasi input sehingga data yang tersimpan konsisten.

• Trigger/input: pengiriman form (drama, episode, paket, pendaftaran, checkout).
• Observable result: input tidak valid ditolak dengan pesan jelas.
• Access state: sesuai konteks.
• Failure/recovery: validasi gagal → pesan inline.
• Continuation: pengguna memperbaiki input.

FR-28 — Transparansi status yang belum aktif (explicit) As a Penonton Gratis / Pelanggan Premium / Pengelola Katalog, I should melihat status fitur yang belum aktif secara transparan sehingga saya tidak salah paham tentang kemampuan demo.

• Trigger/input: membuka halaman dengan fitur yang belum aktif.
• Observable result: indikator/label status yang jelas.
• Access state: sesuai konteks.
• Failure/recovery: tidak berlaku.
• Continuation: pengguna melanjutkan dengan ekspektasi yang benar.

4. User Personas

Penonton Gratis

Konteks produk: Pengguna yang menonton episode pilihan tanpa langganan, setelah iklan pra-putar. Ia menonton dari ponsel, sering di malam hari atau di sela waktu luang, dan menginginkan pengalaman pemutaran yang lancar tanpa hambatan.

Tujuan utama: Menikmati konten gratis dengan pengalaman pemutaran yang lancar dan progres tersimpan.

Tanggung jawab yang diterima: Menjelajah beranda/katalog, mencari drama, membuka detail drama, memutar episode gratis setelah iklan pra-putar, menyimpan progres dan watchlist, serta melihat riwayat tontonan.

Input/keputusan: Memilih drama dari rail/hero/katalog/pencarian; memutuskan untuk menonton episode gratis; menambahkan drama ke watchlist; memutuskan apakah akan berlangganan setelah melihat episode terkunci.

Interaksi dengan peserta lain: Berinteraksi dengan sistem (backend) untuk menyimpan progres dan watchlist; melihat konten yang dikelola Pengelola Katalog; berpotensi menjadi Pelanggan Premium melalui Plans/Checkout.

Keberhasilan yang terlihat: Dapat menikmati konten gratis dengan pemutaran lancar dan progres tersimpan.

Pelanggan Premium

Konteks produk: Pengguna berlangganan yang membuka episode terkunci dan menonton tanpa iklan. Ia menghargai akses penuh dan pengalaman tanpa gangguan.

Tujuan utama: Akses penuh ke episode terkunci tanpa iklan selama masa langganan aktif.

Tanggung jawab yang diterima: Memilih paket langganan, menyelesaikan pembayaran QRIS, memantau status keanggotaan dan riwayat transaksi, serta menonton episode terkunci dengan progres tersimpan.

Input/keputusan: Memilih paket berdasarkan durasi/harga/benefit; menyelesaikan pembayaran QRIS; memutuskan untuk memperpanjang atau mengganti paket.

Interaksi dengan peserta lain: Berinteraksi dengan PanzzPay untuk pembayaran QRIS; dengan sistem untuk aktivasi langganan dan penyimpanan progres; dengan konten yang dikelola Pengelola Katalog.

Keberhasilan yang terlihat: Akses penuh ke episode terkunci tanpa iklan selama masa langganan aktif.

Pengelola Katalog

Konteks produk: Aktor dengan akses pengelola terpisah yang mengelola drama, episode, dan paket langganan serta memantau status pembayaran tanpa membocorkan data sensitif.

Tujuan utama: Katalog dan paket tetap konsisten serta status pembayaran terpantau.

Tanggung jawab yang diterima: Menambah/mengubah data drama dan episode (termasuk status free/locked), mengatur paket, dan memeriksa status transaksi.

Input/keputusan: Mengisi form drama/episode/paket; memutuskan status free/locked episode; memverifikasi status pembayaran.

Interaksi dengan peserta lain: Berinteraksi dengan sistem untuk menyimpan katalog; memantau transaksi yang berasal dari Penonton Gratis/Pelanggan Premium; tidak melihat data sensitif pembayaran.

Keberhasilan yang terlihat: Katalog dan paket konsisten serta status pembayaran terpantau.

5. Core User Flows

Flow 1 — Penonton Gratis menemukan dan menonton episode gratis

1. Penonton Gratis membuka Landing (publik, tanpa identitas).
2. Ia melihat hero drama unggulan "Senja di Jakarta" dengan judul, meta, dan tombol "TONTON".
3. Ia menggeser rail "Sedang Tren" dan "Rekomendasi Untukmu", lalu mengetuk satu poster.
4. Drama Details terbuka menampilkan sinopsis, daftar episode dengan durasi dan status kunci, serta tombol tonton.
5. Ia mengetuk episode gratis. Player terbuka.
6. Karena ia belum berlangganan, iklan pra-putar tampil sebagai kartu coral dengan countdown ring; AdImpression/AdCompletion tercatat.
7. Setelah iklan selesai, episode diputar. Ia mengaktifkan subtitle placeholder bila ingin.
8. WatchProgress tersimpan; rail "Lanjut Tonton" di Landing dan riwayat di Profile menampilkan posisi terakhir.
9. Kegagalan/recovery: bila video gagal dimuat, ia melihat pesan error + tombol "Coba Lagi" dan dapat memilih episode lain.
10. Kelanjutan: ia menambahkan drama ke watchlist dari Drama Details, lalu kembali menjelajah.

Flow 2 — Penonton Gratis mendaftar dan menyimpan progres

1. Penonton Gratis membuka Sign Up dari Landing (tombol "DAFTAR SAYA").
2. Ia mengisi nama, email, dan kata sandi.
3. Kegagalan/recovery: bila email sudah terdaftar atau kata sandi lemah, pesan error inline tampil dan form tetap terisi.
4. Setelah berhasil, akun dibuat dan sesi aktif; ia diarahkan ke Landing/Profile.
5. Ia membuka Profile dan melihat watchlist, riwayat, dan pengaturan akun.
6. Kelanjutan: ia melanjutkan menonton dengan progres yang kini tersimpan lintas sesi.

Flow 3 — Pelanggan Premium berlangganan melalui QRIS PanzzPay

1. Pelanggan Premium (atau Penonton Gratis yang ingin naik tingkat) membuka Plans.
2. Ia melihat daftar paket dengan nama, durasi, harga jelas, dan benefit, serta penjelasan level gratis dan premium.
3. Ia memilih paket dan melanjutkan ke Checkout.
4. Checkout membuat order dengan order ID unik, jumlah rupiah dan jumlah unik, serta menampilkan payload QRIS dalam frame persegi dan waktu kedaluwarsa; status awal pending.
5. Ia memindai QRIS dan membayar melalui PanzzPay (penyedia eksternal).
6. PanzzPay mengirim callback status; sistem memprosesnya secara idempoten sehingga status paid tercatat sekali dan langganan diaktifkan sekali.
7. Kegagalan/recovery: bila order expired atau canceled, ia melihat ajakan membuat order baru; bila callback gagal, sistem mencoba lagi tanpa duplikasi.
8. Kelanjutan: ia diarahkan ke Membership dan melihat status keanggotaan aktif beserta riwayat transaksi.

Flow 4 — Pelanggan Premium menonton episode terkunci tanpa iklan

1. Pelanggan Premium membuka Drama Details sebuah drama dengan episode terkunci (chip "PREMIUM" dan candy-lock ring ungu).
2. Ia mengetuk episode terkunci.
3. Karena langganan premium aktif, Player memutar episode tanpa iklan pra-putar.
4. WatchProgress tersimpan; ia dapat berpindah episode melalui drawer episode.
5. Kegagalan/recovery: bila langganan tidak aktif, ia diarahkan ke Plans.
6. Kelanjutan: ia melanjutkan menonton atau kembali ke Drama Details.

Flow 5 — Pelanggan Premium memantau keanggotaan dan riwayat transaksi

1. Pelanggan Premium membuka Membership.
2. Ia melihat status keanggotaan (paket, mulai, berakhir) dan riwayat transaksi dengan order ID, jumlah, status, dan waktu.
3. Kegagalan/recovery: bila gagal memuat, pesan error + tombol "Coba Lagi" tampil.
4. Kelanjutan: ia membuka Plans untuk memperpanjang atau mengganti paket.

Flow 6 — Pengelola Katalog mengelola katalog

1. Pengelola Katalog membuka Login dan masuk dengan kredensial pengelola.
2. Sistem memverifikasi otorisasi pengelola terpisah dan mengarahkannya ke Catalog Management.
3. Ia membuat atau mengubah drama (judul, slug, sinopsis, poster, genre, status, featured).
4. Ia menambahkan atau mengubah episode (drama, urutan, judul, durasi, video URL placeholder, free/locked) dan mengatur status free/locked.
5. Ia mengatur paket langganan (nama, durasi, harga, benefit).
6. Kegagalan/recovery: bila validasi gagal, pesan error inline tampil dan ia memperbaiki input.
7. Kelanjutan: daftar katalog diperbarui dan tersedia bagi penonton.

Flow 7 — Pengelola Katalog memantau status pembayaran

1. Pengelola Katalog membuka Payment Monitoring.
2. Ia melihat daftar transaksi dengan order ID, jumlah, status (pending/paid/expired/canceled), dan waktu — tanpa payload QRIS mentah atau data sensitif lain.
3. Ia memfilter berdasarkan status untuk memverifikasi transaksi.
4. Kegagalan/recovery: bila gagal memuat, pesan error + tombol "Coba Lagi" tampil.
5. Kelanjutan: ia kembali ke Catalog Management atau keluar.

6. Visuals Colors and Theme

Muse: Karim Rashid. Headline: Sensual dark pop — glossy capsules, warm coral glow, drama in a night city.

Palette (dark mode):

• Background: #140F1A (aubergine-black hangat, bukan hitam murni)
• Surface: #1F1726 (satu tingkat terangkat untuk kartu poster, pill row, sheet, bottom nav)
• Text: #F5EFE9 (kontras >12:1 di atas #140F1A)
• Primary: #FF6B5A (coral — tombol tonton, nav aktif, progress bar, penekanan harga, CTA "LANJUT TONTON")
• Accent: #B57BFF (ungu hangat — ring episode terkunci, badge premium, chip genre, tepi kartu langganan)
• Muted: #9A8FA6 (metadata: durasi, jumlah episode, timestamp; kontras >4.5:1 di atas #140F1A)

Proporsi: 70% dark ground, 18% surface, 8% coral, 4% purple. Coral tidak pernah dipakai sebagai body text di atas dark; hanya untuk elemen interaktif dan penekanan. Tidak ada gradient pada teks, tidak ada gradient-blob hero — glow dicapai dengan light pool radial lembut di belakang poster.

Tipografi:

• Headings: Quicksand — 700 untuk display headline, 600 untuk section title; leading 0.95; section title sentence case dengan satu titik coral.
• Body: Manrope; episode title, tombol, dan label nav memakai Manrope 700 dengan tracking 0.01em; numeral Manrope tabular untuk harga dan durasi.
• Skala 1.333 modular dengan clamp mobile-first: display clamp(2.5rem, 8vw, 6rem); h1 32px→56px; h2 24px→36px; h3 20px→24px; body 16px→17px; meta 13px→14px; micro-label 11px uppercase 0.12em tracking.

Shape language: Kapsul dan blob di mana-mana. Poster card radius 24px mobile / 32px desktop; episode row pill 999px; bottom nav kapsul mengambang radius 28px dengan inner highlight lembut; tombol pill penuh (999px) dengan tinggi minimum 56px; badge (PREMIUM, GRATIS, EPISODE BARU) chip kapsul. Transisi section melengkung: tepi atas radius 48px mengangkat tiap section. Episode terkunci memakai ring ungu #B57BFF dengan glyph candy-lock kecil, bukan padlock abu-abu. Tidak ada sudut tajam kecuali avatar dan frame QRIS yang tetap persegi.

Layout: Mobile-first single column 375px dengan gutter 20px, berkembang ke grid 12 kolom di 1280px. Home: hero full-bleed ~72vh, rail "Sedang Tren" poster kapsul 160px, chip genre, rail "Rekomendasi Untukmu", rail "Lanjut Tonton" dengan progress bar. Catalog: grid 2 kolom di 375px, 3 di 768px, 5 di 1280px, chip genre sticky. Detail: poster bleed full-width di belakang sheet melengkung, episode list pill row. Player: video full-bleed 16:9, kontrol kapsul mengambang, drawer episode sheet melengkung. Profile: avatar kapsul besar, tab pill row, kartu langganan tepi coral glossy. Bottom nav kapsul mengambang 16px di atas safe area, lima item, item aktif mendapat blob coral.

Imagery: Poster placeholder orisinal — frame 2:3 dengan satu warna dominan dari palet (coral, ungu, deep teal, mustard), judul Quicksand oversized di dalam frame, satu motif geometris sederhana (lingkaran, band diagonal, blob lembut), dan kapsul kecil "LOKAREEL ORIGINAL" di sudut. Tanpa foto stok orang, tanpa still film. Thumbnail episode adalah crop 16:9 dari sistem poster yang sama dengan nomor episode besar di sudut. Hero memakai satu poster full-bleed dengan scrim gelap. Avatar profil adalah kapsul inisial coral/ungu. Placeholder iklan adalah kartu coral datar dengan "IKLAN" dalam micro-caps dan countdown ring.

7. Signature Design Concept

Konsep: "Night City Candy" — beranda LokaReel dibaca sebagai tumpukan lapisan glossy yang mengambang di atas malam aubergine, dengan poster sebagai objek yang bisa disentuh.

Elemen implementable untuk public entry (Landing):

1. Hero poster full-bleed 72vh untuk "Senja di Jakarta" — poster edge-to-edge dengan scrim bawah dari #140F1A. Di belakang poster, light pool ambient coral-ke-ungu yang melayang lambat 20 detik (satu-satunya gerakan looping).
2. Blok teks kiri-bawah di atas sepertiga bawah: chip kapsul ungu "LOKAREEL ORIGINAL", judul Quicksand 700 clamp(2.5rem, 8vw, 6rem) leading 0.95 yang boleh membentang hampir seluruh viewport, satu baris meta Manrope muted "12 Episode · Drama Romantis · 2024", lalu dua tombol pill berdampingan: "TONTON" coral #FF6B5A dengan teks gelap, dan "DAFTAR SAYA" glass-outline #F5EFE9.
3. Top bar mengambang dengan wordmark LokaReel Quicksand 700 dan kapsul pencarian.
4. Tepi atas melengkung 48px dari section berikutnya mengintip di dasar viewport, menandakan masih ada yang bisa digulir.
5. Bottom nav kapsul mengambang 16px di atas safe area dengan blob coral yang meluncur antar lima item.

Responsif: Di 375px judul membungkus tiga baris dan tombol menumpuk full-width; di 1280px poster tetap full-bleed tetapi blok teks dibatasi kolom 720px dengan margin kiri 80px. Semua teks dan kontrol tetap utuh di dalam viewport dan kontainernya.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief:

• Focal subject: poster full-bleed drama unggulan "Senja di Jakarta" dengan light pool ambient coral-ke-ungu di belakangnya.
• Input → transformation → outcome: saat Landing dimuat, light pool mulai melayang lambat (20 detik loop) di belakang poster; saat pengguna mengetuk poster atau tombol, poster kapsul scale ke 1.03 dengan cubic-bezier(0.2, 0.8, 0.2, 1) 180ms dan glow coral lembut blooming di belakangnya, lalu navigasi ke Drama Details/Player.
• Motion vocabulary: liquid morph dan glossy highlight — bukan bounce kartun. Rail section reveal dengan drift naik 12px dan stagger 0.02s. Bottom nav active indicator adalah blob coral yang meluncur antar item dengan 260ms ease-out. Locked episode rings pulse sekali saat masuk, lalu berhenti.
• Composed first frame: poster full-bleed dengan scrim bawah, chip "LOKAREEL ORIGINAL" ungu, judul Quicksand besar membentang dua baris, meta muted, dua tombol pill, top bar mengambang, tepi melengkung section berikutnya mengintip di dasar viewport.
• Reduced-motion state: semua transform dan loop berhenti; rail menjadi grid wrapped normal; light pool hero membeku; konten tetap utuh dan terbaca.

9. Non-Functional Requirements

NFR-01 — Mobile-first dan responsif desktop (explicit) Aplikasi harus nyaman di HP (mobile-first) dan responsif di desktop. Rasional: audiens menonton dari ponsel; desktop tetap didukung.

NFR-02 — Tema gelap elegan dengan aksen coral/ungu hangat (explicit) Tema gelap elegan dengan aksen coral/ungu hangat, tipografi jelas, kartu poster besar, navigasi bawah, dan tombol mudah disentuh. Rasional: preferensi desain pengguna.

NFR-03 — Loading/empty/error states (explicit) Setiap halaman harus menyediakan loading, empty, dan error states. Rasional: pengalaman demo yang berfungsi dan transparan.

NFR-04 — Aksesibilitas (explicit) Aplikasi harus aksesibel: kontras teks memadai (body >12:1, muted >4.5:1), target sentuh minimum 56px, dukungan prefers-reduced-motion. Rasional: permintaan pengguna dan praktik aksesibilitas.

NFR-05 — Kontrol akses dan kepemilikan data (explicit) Pengguna hanya boleh membaca/mengubah data miliknya; akses pengelola terpisah untuk katalog. Rasional: constraint eksplisit pengguna.

NFR-06 — Validasi input dan status transaksi idempoten (explicit) Validasi input diterapkan pada semua form; status transaksi idempoten (pending/paid/expired/canceled). Rasional: constraint eksplisit pengguna.

NFR-07 — Integrasi PanzzPay sesuai dokumentasi (explicit) Integrasi pembayaran PanzzPay harus sesuai dokumentasi pelanggan dengan API base https://panzzpay.my.id. Rasional: constraint eksplisit pengguna.

NFR-08 — Tidak membocorkan data sensitif (explicit) Dashboard pengelola tidak boleh membocorkan data sensitif (misalnya payload QRIS mentah). Rasional: constraint eksplisit pengguna.

NFR-09 — Materi demo orisinal (explicit) Poster dan judul harus demo orisinal atau placeholder; dilarang menyalin karya berhak cipta. Rasional: constraint eksplisit pengguna.

NFR-10 — Aplikasi web interaktif yang dapat diubah lewat AI Builder (explicit) Dibangun sebagai aplikasi web interaktif yang dapat diubah lewat AI Builder, bukan sekadar landing page. Rasional: constraint eksplisit pengguna.

NFR-11 — Transparansi status yang belum aktif (explicit) Status fitur yang belum aktif harus dijelaskan secara transparan. Rasional: constraint eksplisit pengguna.

NFR-12 — Konten demo yang cukup (explicit) Sertakan konten yang cukup untuk memperlihatkan semua halaman dan alur dengan jelas. Rasional: constraint eksplisit pengguna.

10. Tech Stack

• Frontend: React (aplikasi web interaktif, mobile-first, dapat diubah lewat AI Builder).
• Backend: Python/FastAPI (backend terintegrasi AI Builder dengan fondasi data konsisten).
• Storage: basis data relasional untuk entitas User/profile, Drama, Episode, SubscriptionPlan, Subscription, Payment/TopUp, WatchProgress, Watchlist, AdImpression/AdCompletion.
• Pembayaran: integrasi PanzzPay dengan API base https://panzzpay.my.id sesuai dokumentasi pelanggan.
• Deployment: Docker/docker-compose untuk lingkungan demo yang berfungsi.

11. Assumptions and Constraints

Asumsi:

• A-01: Identitas aplikasi diperlukan untuk fitur personal (watchlist, riwayat, progres, langganan); pendaftaran bersifat self-service. (required_inference)
• A-02: Verifikasi pengguna lama melayani penonton dan pengelola katalog melalui satu permukaan masuk bersama; pengelola katalog memerlukan otorisasi/provisioning terpisah. (required_inference)
• A-03: Pemrosesan QRIS dan callback status pembayaran dimiliki PanzzPay; LokaReel memiliki porsi first-party checkout. (required_inference)
• A-04: Langganan premium aktif diperlukan sebelum episode terkunci dapat ditonton tanpa iklan. (required_inference)
• A-05: Penyelesaian iklan pra-putar diperlukan sebelum episode gratis yang memenuhi syarat dapat ditonton. (required_inference)
• A-06: Video menggunakan URL placeholder; subtitle bersifat placeholder. (explicit)

Constraints:

• C-01: Materi poster dan judul demo orisinal atau placeholder; dilarang menyalin karya berhak cipta. (explicit)
• C-02: Pengguna hanya boleh membaca/mengubah data miliknya sendiri. (explicit)
• C-03: Akses pengelola terpisah untuk katalog. (explicit)
• C-04: Dashboard pengelola tidak boleh membocorkan data sensitif. (explicit)
• C-05: Integrasi PanzzPay sesuai dokumentasi pelanggan dengan API base https://panzzpay.my.id. (explicit)
• C-06: Dibangun sebagai aplikasi web interaktif yang dapat diubah lewat AI Builder, bukan sekadar landing page. (explicit)
• C-07: Status yang belum aktif dijelaskan secara transparan. (explicit)

12. Glossary

• LokaReel: Nama produk yang dipakai di logo teks, judul, dan UI.
• Drama: Serial drama pendek dengan atribut judul, slug, sinopsis, poster, genre, status, featured.
• Episode: Bagian dari drama dengan atribut drama, urutan, judul, durasi, video URL placeholder, free/locked.
• SubscriptionPlan: Paket langganan dengan nama, durasi, harga, benefit.
• Subscription: Langganan pengguna dengan atribut user, paket, status, mulai, berakhir.
• Payment/TopUp: Transaksi pembayaran dengan order ID unik, user, jumlah rupiah, jumlah unik, status pending/paid/expired/canceled, payload QRIS, waktu kedaluwarsa.
• WatchProgress: Progres menonton pengguna untuk melanjutkan tontonan.
• Watchlist: Daftar drama yang disimpan pengguna.
• AdImpression/AdCompletion: Catatan tayangan dan penyelesaian iklan pra-putar.
• PanzzPay: Penyedia pembayaran QRIS eksternal dengan API base https://panzzpay.my.id.
• QRIS: Kode pembayaran QR standar Indonesia yang ditampilkan di Checkout.
• Candy-lock: Ring ungu #B57BFF dengan glyph candy-lock kecil yang menandai episode terkunci.
• Light pool: Glow radial coral-ke-ungu lembut di belakang poster; satu-satunya gerakan looping di hero.