jamshalat-masjid-screen/brief.md

Project Brief: Smart Digital Prayer Clock (Jam Shalat Masjid) for Android TV Box

Target Platform: Android TV Box (Android 13/14, 4GB RAM, 64GB ROM) - Landscape Display (1080p).

Framework: Flutter (Latest Stable).

Architecture Pattern: Clean Architecture or MVVM.

State Management Suggestion: Riverpod atau Provider (Pilih salah satu yang paling stabil).

Local Storage: Hive atau Isar (Untuk caching API bulanan & Settings).

1. Project Overview

Aplikasi ini adalah sistem Digital Signage untuk masjid yang akan menyala 24/7 non-stop pada layar TV yang terhubung ke Android Box. Aplikasi ini TIDAK boleh mengandalkan internet real-time. Internet hanya tersedia sebulan sekali (via tethering HP) untuk menarik data jadwal shalat dari API (Bulk 1 bulan) dan melakukan sinkronisasi jam sistem (NTP). Selebihnya, aplikasi berjalan 100% OFFLINE membaca database lokal.

2. Core Features & App State Machine

Aplikasi memiliki siklus layar (Screen State Machine) berdasarkan waktu saat ini (DateTime.now()):

1. [STATE: NORMAL / ROTATION] -> Ini adalah state default. Layar akan terus berotasi/berganti secara otomatis berdasarkan skema yang ditentukan di Settings. Terdapat 2 jenis screen dalam rotasi ini:
   • Screen A (Main Screen): Khusus menampilkan Jam Digital (Current Time), Tanggal (Masehi & Hijriah), Baris Jadwal Shalat (5/6 waktu), dan Countdown detikan menuju shalat berikutnya. Memiliki background statis/dinamis yang telah ditentukan.
   • Screen B (Slideshow Screen): Khusus menampilkan poster informasi/pengumuman dalam bentuk gambar penuh (JPG/PNG). Transisi antar gambar atau saat berpindah dari/ke Main Screen menggunakan Fade In-Out atau Slide In-Out.
   • Skema Rotasi: Dinamis (misal: Main -> Slide 1 -> Main -> Slide 2 -> Main -> Slide 3, ATAU Main -> Slide 1 -> Slide 2 -> Main -> Slide 3 dst).
2. [STATE: MENUJU ADZAN] -> (Misal 10 menit sebelum waktu masuk) Rotasi Slidehow dihentikan paksa. Layar terkunci di Main Screen, fokus menampilkan hitung mundur menuju Adzan agar jamaah bersiap.
3. [STATE: ADZAN] -> Waktu masuk. Menampilkan tulisan besar "WAKTU ADZAN [NAMA SHALAT]", membunyikan alarm/beep pendek.
4. [STATE: MENUJU IQOMAH] -> Menampilkan hitung mundur Iqomah. Khusus hari Jumat, hitung mundur ini diganti tulisan "PERSIAPAN KHUTBAH".
5. [STATE: SHALAT/BLACK SCREEN] -> Setelah waktu Iqomah habis, layar berubah menjadi HITAM PEKAT (Blank) dengan hanya sedikit teks samar agar tidak mengganggu kekhusyukan shalat.
6. [STATE: KEMBALI NORMAL] -> Setelah durasi Shalat habis, layar kembali ke [STATE: NORMAL / ROTATION].

3. Specific Logic Requirements

A. Waktu Shalat & Logika Hari Jumat (Crucial!)

• Terdapat 6 jadwal harian: Imsak (opsional), Subuh, Terbit/Syuruq, Dzuhur, Ashar, Maghrib, Isya.
• Logika Hari Jumat: JIKA DateTime.now().weekday == DateTime.friday, MAKA jadwal "Dzuhur" HARUS diubah string/labelnya menjadi "JUMAT".
• Khusus masuk waktu "JUMAT", State [MENUJU IQOMAH] di-bypass atau diganti dengan tampilan Nama Khatib dan Imam.

B. Offline-First API Fetching

• Buat satu halaman Admin/Settings Page (tersembunyi, diakses dengan menekan pojok layar 5 kali atau via icon gembok).
• Di Admin Page, ada tombol "Sync Data Bulanan".
• Saat ditekan, fetch API -> Parse JSON -> Simpan ke Hive/Isar -> Update last_sync_date.
• Di UI utama, timer HANYA boleh membaca dari database lokal, bukan nembak ke API.

C. Watchdog & Anti-Freeze (Device Specific)

• Wajib menggunakan package wakelock_plus dan panggil WakelockPlus.enable() di main.dart agar TV Box tidak masuk mode Sleep.
• Gunakan Timer.periodic yang efisien.

4. Controllable Settings (Dynamic Variables)

Semua variabel di bawah ini TIDAK BOLEH hardcoded. Buatkan model class AppSettings yang disimpan di Local Storage:

{
"masjid_name": "Masjid Al-Ikhlas",
"masjid_address": "Jl. Kebaikan No. 1, Padang",
"city_id_api": "1234",
"show_imsak": true,
"show_terbit": true,
"iqomah_durations": {
"subuh": 15,
"dzuhur": 10,
"ashar": 10,
"maghrib": 7,
"isya": 10
},
"blank_screen_durations": {
"normal": 15,
"jumat": 45
},
"running_text": [
"Mohon luruskan dan rapatkan shaf",
"Kajian rutin setiap Ahad pagi"
],
"jumat_officers": {
"khatib": "Ust. Fulan, S.Ag",
"imam": "Ust. Alan, Lc"
},
"theme_color": "0xFF006400",
"main_screen_background": "/path/to/local/bg.jpg",
"slideshow_images": [
"/path/to/local/slide1.jpg",
"/path/to/local/slide2.png"
],
"rotation_settings": {
"main_screen_duration_sec": 15,
"slide_duration_sec": 10,
"sequence_pattern": ["main", "slide_1", "main", "slide_2"]
}
}

(Catatan untuk AI: sequence_pattern bisa diimplementasikan sebagai logic antrean berulang yang membaca array tersebut).

5. UI/UX Layout Structure (Landscape 16:9)

UI harus dibuat menjadi 2 komponen terpisah yang saling bergantian (menggunakan AnimatedSwitcher untuk transisi Fade):

A. Komponen: Main Screen (Jam & Jadwal)

• Background: Gambar statis yang di-set dari Settings, ditambah overlay gradient gelap agar teks terbaca jelas.
• Top Area (Header): Nama Masjid, Alamat, dan Logo.
• Center Area (Fokus Utama):
  • Jam Digital berukuran sangat besar (mendominasi tengah layar).
  • Tanggal Masehi & Tanggal Hijriah tepat di bawah jam.
  • Teks dinamis: "Menuju [Nama Shalat Berikutnya] - [Hitung Mundur HH:MM:SS]".
• Bottom Area (Footer): Row horizontal berisi kotak/kartu jadwal shalat hari ini. Kotak shalat yang akan datang diberi highlight warna berbeda.
• Bottom Edge: Marquee (Running Text) berjalan tanpa henti.

B. Komponen: Slideshow Screen (Informasi Poster)

• Center Area: Gambar poster (JPG/PNG) dirender secara fullscreen (atau fit center dengan proporsi terjaga).
• Floating Information Widget (Overlay): Sebuah box melayang di pojok layar (misal pojok kanan atas) dengan background dark transparent (opacity 35% - 50%). Widget ini menampilkan:
  • Jam Digital (Current Time) dalam ukuran sedang.
  • Nama Shalat Mendatang (Hanya filter 5 shalat fardhu: Subuh, Dzuhur/Jumat, Ashar, Maghrib, Isya. Abaikan waktu Imsak dan Terbit di widget ini).
  • Countdown Timer menuju waktu shalat tersebut.
• Bottom Edge: Marquee (Running Text) HARUS tetap terlihat meskipun sedang dalam mode Slideshow, agar pengumuman darurat tetap terbaca.

6. AI Output Instructions

Tolong generate kode dengan urutan berikut:

1. pubspec.yaml dependencies.
2. Model class untuk Settings & Jadwal Shalat.
3. Service layer untuk Local Storage (Hive/SharedPrefs).
4. State Machine Logic (Timer provider/manager untuk handle transisi State, TERMASUK logic Rotation Scheme antara Main Screen dan Slideshow).
5. UI Layout: Pisahkan MainScreenWidget dan SlideshowWidget, lalu gabungkan di HomeView dengan AnimatedSwitcher.
6. Admin Screen sederhana untuk mengatur variabel Controllable Settings.

Pastikan kodenya null-safe dan efisien dalam penggunaan memori (hindari memory leaks pada Timer rotasi maupun interval).