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:
parent
b3ce06e03c
commit
34aea1b015
BIN
public/assets/media/notif/1.mp3
Normal file
BIN
public/assets/media/notif/1.mp3
Normal file
Binary file not shown.
BIN
public/assets/media/notif/2.mp3
Normal file
BIN
public/assets/media/notif/2.mp3
Normal file
Binary file not shown.
BIN
public/assets/media/notif/3.mp3
Normal file
BIN
public/assets/media/notif/3.mp3
Normal file
Binary file not shown.
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user