🎵 Muzibu Premium Sistem TAMAM

1. play-limits.js - Alpine Component

Modules/Muzibu/resources/js/play-limits.js

• Alpine.js 'playLimits' component
• Player binding (muzibuApp ile entegrasyon)
• Progress tracking (5 saniyede bir backend'e rapor)
• Guest 30sn kontrolü (fade-out + modal)
• Member limit kontrolü (5 şarkı dolunca modal)
• Kalan hak real-time güncelleme

2. play-limits.css - Tema Bağımsız Stil

Modules/Muzibu/resources/css/play-limits.css

• Modern dark gradient modal (backdrop blur)
• Responsive design (mobil uyumlu)
• Progress bar (3 renk durumu: normal/low/critical)
• Premium badge (sınırsız göstergesi)
• Animasyonlar (fadeIn, slideUp, pulse)
• Accessibility (focus states, WCAG)

3. play-limits-modals.blade.php

Modules/Muzibu/resources/views/components/play-limits-modals.blade.php

• Guest Preview Ended Modal (30 saniye bitti)
• Member Limit Exceeded Modal (5 şarkı doldu)
• x-teleport ile body level rendering
• Kayıt ol / Giriş yap butonları
• Premium'a geç butonu

4. play-limits-widget.blade.php

Modules/Muzibu/resources/views/components/play-limits-widget.blade.php

• Sidebar kalan hak göstergesi (3/5 şarkı)
• Progress bar (renk değişimi)
• Premium badge (♾️ Sınırsız)
• Real-time update (Alpine reactivity)

5. Layout Entegrasyonu

resources/views/themes/muzibu/layouts/app.blade.php

• CSS include (head bölümü)
• Modals include (body sonunda)
• JS include (Livewire sonrası)

resources/views/themes/muzibu/components/sidebar.blade.php

• Widget include (@auth bölümü)

Akış Şeması

• 1️⃣ Kullanıcı şarkıya play tıklar
• 2️⃣ Alpine playLimits component çalışır
• 3️⃣ Her 5 saniyede backend'e progress raporu
• 4️⃣ Backend user limit kontrol eder
• 5️⃣ Frontend kalan hak günceller (widget)
• 6️⃣ Guest: 30sn'de fade-out + modal
• 7️⃣ Member: 5 şarkı dolunca modal

Güvenlik

• Backend validation (JS bypass edilemez)
• API endpoint: POST /api/muzibu/songs/{id}/track-progress
• Duration güvenlik kontrolü (max song duration + 10s)
• IP + User Agent + Device tracking

Backend (v2)

• Migration: duration_listened kolonu
• User Model: 5 yeni metod (tenant-aware)
• API Controller: stream() + trackProgress()
• API Route: track-progress endpoint

Frontend (v3)

• Alpine Component: play-limits.js
• CSS: play-limits.css
• Modals: play-limits-modals.blade.php
• Widget: play-limits-widget.blade.php
• Layout entegrasyonu tamamlandı

Guest Test

• Sisteme giriş yapmadan şarkı çal
• 30 saniye sonra fade-out kontrolü
• Modal görünürlüğü
• Kayıt ol / Giriş yap butonları

Member Test

• Normal üye ile giriş yap
• 5 şarkıyı 60+ saniye dinle
• Widget'ta kalan hak güncelleme kontrolü
• 6. şarkıda modal görünürlüğü
• Premium'a geç butonu

Premium Test

• Premium üye ile giriş yap
• Widget'ta "♾️ Sınırsız" badge kontrolü
• 10+ şarkı limitless dinleme
• Modal asla çıkmamalı