PROGRES DALAM PENGEMBANGAN TAHAP PENYESUAIAN PROJECT OWNER

Progress Scope & Status Project

Daftar cakupan pekerjaan dari sisi Web Player Custom maupun persiapan server VPS. Pengembangan terus disesuaikan berdasarkan arahan dan keinginan Project Owner.

Web App Custom PlayerReview & Testing
Skrip & Config VPSReady Setup
Eksekusi Server VPSMenunggu VPS Ubuntu
A. Video Streaming ServerTerkonfigurasi (5 Poin)Menunggu VPS Ubuntu dari Client
B. Radio Online ServerTerkonfigurasi (5 Poin)Menunggu VPS Ubuntu dari Client
C. Custom Web PlayerSiap Review (3 Poin)Penyesuaian Keinginan PO

Catatan Alur Pekerjaan (Workflow Deployment):

Server Ubuntu akan disediakan oleh pihak client. Sisi kodingan Web Player Custom dan skrip konfigurasi server (MediaMTX, AzuraCast, FFmpeg 24/7, Nginx SSL) sudah disiapkan. Begitu server VPS Ubuntu & subdomain diberikan, instalasi server siap dilakukan dan tampilan web player disesuaikan sepenuhnya sesuai instruksi Project Owner.

Filter Scope:
SCOPE A

A. Sisi Server Streaming Video (VPS Ubuntu)

Konfigurasi MediaMTX, RTMP/HLS, Nginx SSL, FFmpeg 24/7 looper daemon.

Tahap Konfigurasi • Menunggu Akses VPS

1. Install & konfigurasi RTMP/HLS server (MediaMTX / Nginx-RTMP)

File `mediamtx.yml` dan script setup telah disiapkan. Siap dieksekusi begitu akses VPS Ubuntu diserahkan.

MediaMTX EngineKonfigurasi DisiapkanSiap Install di VPS Client
Komponen/File: vps-scripts/mediamtx.yml
Status: mediamtx.yml & setup-vps.sh

2. Setup SSL/HTTPS untuk subdomain streaming (misal: live.rtm.tl)

Konfigurasi Nginx Reverse Proxy & automatisasi SSL Certbot disiapkan di `nginx-streaming.conf`.

Nginx SSL ProxyNginx Proxy PreparedMenunggu Subdomain Client
Komponen/File: vps-scripts/nginx-streaming.conf
Status: nginx-streaming.conf

3. Sistem auto-looping playlist video MP4 → siaran 24/7 M3U8 (HLS)

Service `ffmpeg-tv-loop.service` disiapkan untuk memutar playlist video MP4 nonstop ke HLS stream.

FFmpeg 24/7 DaemonSystemd Service PreparedSiap Run Daemon di VPS
Komponen/File: vps-scripts/ffmpeg-tv-loop.service
Status: ffmpeg-tv-loop.service

4. Menyediakan RTMP URL + Stream Key untuk live manual dari OBS Studio

Routing RTMP path `/live/{stream_key}` di MediaMTX disiapkan untuk live stream dari OBS Studio.

OBS RTMP IngestRouting Rule PreparedSiap Ingest OBS
Komponen/File: vps-scripts/mediamtx.yml
Status: MediaMTX RTMP ingest rule

5. M3U8 teruji bisa diputar di web player & VLC

Struktur segmen HLS dipastikan kompatibel diputar pada Web Player (hls.js) dan VLC Media Player.

HLS Standard ComplianceFormat ValidatedReview & Verification
Komponen/File: src/components/TVPlayer.tsx
Status: hls.js Web Player engine
SCOPE B

B. Radio Online (VPS yang sama)

Pengaturan server radio AzuraCast/Icecast2, AutoDJ 24/7, dan Live DJ takeover.

Tahap Konfigurasi • Menunggu Akses VPS

1. Install server radio streaming (Icecast2 / AzuraCast / Shoutcast)

Script automatisasi Docker install AzuraCast & Icecast2 disiapkan di `setup-vps.sh`.

AzuraCast / Icecast2Docker Script PreparedSiap Deploy di VPS Client
Komponen/File: vps-scripts/setup-vps.sh
Status: Docker AzuraCast setup

2. Setup AutoDJ 24/7: playlist MP3 looping otomatis + jadwal acara

Arsitektur Liquidsoap AutoDJ 24/7 disiapkan untuk pemutaran MP3 dan penjadwalan siaran.

AutoDJ EngineAutoDJ Engine PreparedSiap Upload MP3 & Schedule
Komponen/File: vps-scripts/setup-vps.sh
Status: AzuraCast Liquidsoap engine

3. Menyediakan URL stream radio (MP3/AAC) untuk web player & aplikasi radio

Format stream MP3/AAC disesuaikan agar kompatibel dengan Web Player, TuneIn, & Radio Garden.

Icecast Mount PointMount Point ConfiguredSiap Stream Output
Komponen/File: src/components/RadioPlayer.tsx
Status: Icecast audio mount format

4. Fitur Live DJ: penyiar bisa mengambil alih siaran live dari PC/HP (Mixxx / BUTT)

Konfigurasi Icecast Live Source disiapkan untuk penyiaran langsung dari Mixxx / BUTT.

Live DJ TakeoverRelay Port PreparedSiap Testing Connection
Komponen/File: vps-scripts/setup-vps.sh
Status: Icecast Live relay port

5. Setup SSL/HTTPS untuk subdomain radio (misal: radio.rtm.tl)

Proxy reverse Nginx ke port Icecast via SSL Certbot disiapkan di `nginx-streaming.conf`.

HTTPS Radio ProxyNginx SSL Proxy PreparedMenunggu Subdomain Radio
Komponen/File: vps-scripts/nginx-streaming.conf
Status: Nginx SSL reverse proxy
SCOPE C

C. Sisi Web Player Custom

Pengembangan web player custom Next.js untuk tontonan TV HLS & radio online.

Review & Penyesuaian Project Owner

1. Membuat halaman tontonan live video (HLS player: hls.js / Video.js)

Halaman `/tv` & `TVPlayer.tsx` lengkap dengan hls.js, live indicator, bitrate selector, PIP & Fullscreen.

Video Web Player UITahap Review UISiap Penyesuaian PO
Komponen/File: src/components/TVPlayer.tsx
Status: src/app/tv/page.tsx

2. Membuat halaman dengarkan radio online (audio player)

Halaman `/radio` & `RadioPlayer.tsx` dengan Canvas Frequency Visualizer, controls, & metadata song info.

Audio Player UITahap Review UISiap Penyesuaian PO
Komponen/File: src/components/RadioPlayer.tsx
Status: src/app/radio/page.tsx

3. Desain halaman mengikuti tampilan (referensi UI)

Tampilan UI modern, light mode responsive, navbar navigasi, jadwal siaran, & diagram arsitektur.

Custom Design SystemTahap Penyesuaian UIReview Project Owner
Komponen/File: src/app/page.tsx
Status: Next.js App Router UI