feat(header): tambahkan suara notifikasi pada header

- Menambahkan elemen audio untuk suara notifikasi.
- Memainkan suara notifikasi jika ada notifikasi yang belum dibaca.
- Menggunakan localStorage untuk menghindari pemutaran suara berulang dalam sesi yang sama.
- Menghapus flag setelah 5 menit untuk memungkinkan pemutaran suara lagi jika pengguna menyegarkan halaman.
This commit is contained in:
Daeng Deni Mardaeni 2025-04-22 14:22:08 +07:00
parent b3ce06e03c
commit 34aea1b015
4 changed files with 37 additions and 0 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -74,6 +74,12 @@
<div class="border-b border-b-gray-200"></div> <div class="border-b border-b-gray-200"></div>
@endif @endif
@endforeach @endforeach
<!-- Notification sound -->
<audio id="notification-sound" style="display: none;">
<source src="{{ asset('assets/media/notif/1.mp3') }}" type="audio/mpeg">
</audio>
</div> </div>
</div> </div>
<div class="border-b border-b-gray-200"> <div class="border-b border-b-gray-200">
@ -155,3 +161,34 @@
</div> </div>
<!-- end: container --> <!-- end: container -->
</header> </header>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Check if there are unread notifications
const unreadNotifications = {{ auth()->user()->unreadNotifications->count() }};
const notificationSound = document.getElementById('notification-sound');
// Play sound if there are unread notifications
if (unreadNotifications > 0 && notificationSound) {
// Set a flag in localStorage to track if sound has been played in this session
const soundPlayed = localStorage.getItem('notification_sound_played');
if (!soundPlayed) {
// Play the notification sound
notificationSound.play().catch(error => {
console.error('Error playing notification sound:', error);
});
// Set the flag to prevent playing the sound again in this session
localStorage.setItem('notification_sound_played', 'true');
// Clear the flag after 5 minutes to allow sound to play again if user refreshes
setTimeout(() => {
localStorage.removeItem('notification_sound_played');
}, 5 * 60 * 1000);
}
}
});
</script>
@endpush