From adb01009eb11a32d1238c973676832b6d3088085 Mon Sep 17 00:00:00 2001 From: g Date: Tue, 9 Dec 2025 22:17:20 +0000 Subject: [PATCH] Handle play() and load() promises for audio elements Updated audio playback and preloading logic to check for and handle returned promises from play() and load() methods. This prevents uncaught promise rejections in browsers where these methods may return undefined, improving reliability and error handling for notification sounds. --- components/admin/AdminAnalytics.tsx | 2 +- components/audio-preloader.tsx | 11 +++++-- components/dashboard/ChatDetail.tsx | 33 ++++++++++--------- components/dashboard/ChatTable.tsx | 9 +++-- .../notifications/OrderNotifications.tsx | 33 ++++++++++--------- lib/notification-context.tsx | 33 ++++++++++--------- 6 files changed, 70 insertions(+), 51 deletions(-) diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx index dfa3a92..3aa294b 100644 --- a/components/admin/AdminAnalytics.tsx +++ b/components/admin/AdminAnalytics.tsx @@ -438,7 +438,7 @@ export default function AdminAnalytics() { Today: {analyticsData?.orders?.totalToday || 0} diff --git a/components/audio-preloader.tsx b/components/audio-preloader.tsx index faff29e..51adb02 100644 --- a/components/audio-preloader.tsx +++ b/components/audio-preloader.tsx @@ -12,9 +12,16 @@ export function AudioPreloader() { audio.preload = 'auto' // Try to load it immediately - audio.load().catch(err => { + try { + const loadPromise = audio.load(); + if (loadPromise !== undefined) { + loadPromise.catch(err => { + console.log('Audio preload failed (non-critical):', err) + }); + } + } catch (err) { console.log('Audio preload failed (non-critical):', err) - }) + } return () => { // Cleanup diff --git a/components/dashboard/ChatDetail.tsx b/components/dashboard/ChatDetail.tsx index 67e6ec7..017d176 100644 --- a/components/dashboard/ChatDetail.tsx +++ b/components/dashboard/ChatDetail.tsx @@ -153,21 +153,24 @@ export default function ChatDetail({ chatId }: { chatId: string }) { const playNotificationSound = () => { if (audioRef.current) { audioRef.current.currentTime = 0; - audioRef.current.play().catch(err => { - console.log('Error playing sound:', err); - // Fallback to simple beep if audio file fails - try { - const context = new (window.AudioContext || (window as any).webkitAudioContext)(); - const oscillator = context.createOscillator(); - oscillator.type = 'sine'; - oscillator.frequency.setValueAtTime(800, context.currentTime); - oscillator.connect(context.destination); - oscillator.start(); - oscillator.stop(context.currentTime + 0.2); - } catch (e) { - console.error('Could not play fallback audio', e); - } - }); + const playPromise = audioRef.current.play(); + if (playPromise !== undefined) { + playPromise.catch(err => { + console.log('Error playing sound:', err); + // Fallback to simple beep if audio file fails + try { + const context = new (window.AudioContext || (window as any).webkitAudioContext)(); + const oscillator = context.createOscillator(); + oscillator.type = 'sine'; + oscillator.frequency.setValueAtTime(800, context.currentTime); + oscillator.connect(context.destination); + oscillator.start(); + oscillator.stop(context.currentTime + 0.2); + } catch (e) { + console.error('Could not play fallback audio', e); + } + }); + } } else { // Fallback to simple beep if audio element is not available try { diff --git a/components/dashboard/ChatTable.tsx b/components/dashboard/ChatTable.tsx index d3b981b..ff63394 100644 --- a/components/dashboard/ChatTable.tsx +++ b/components/dashboard/ChatTable.tsx @@ -92,9 +92,12 @@ export default function ChatTable() { // Play notification sound const playNotificationSound = () => { if (audioRef.current) { - audioRef.current.play().catch(e => { - console.log("Failed to play notification sound:", e); - }); + const playPromise = audioRef.current.play(); + if (playPromise !== undefined) { + playPromise.catch(e => { + console.log("Failed to play notification sound:", e); + }); + } } }; diff --git a/components/notifications/OrderNotifications.tsx b/components/notifications/OrderNotifications.tsx index b1eae7f..d10f488 100644 --- a/components/notifications/OrderNotifications.tsx +++ b/components/notifications/OrderNotifications.tsx @@ -51,21 +51,24 @@ export default function OrderNotifications() { const playNotificationSound = () => { if (audioRef.current) { audioRef.current.currentTime = 0; - audioRef.current.play().catch(err => { - console.log('Error playing sound:', err); - // Fallback to simple beep if audio file fails - try { - const context = new (window.AudioContext || (window as any).webkitAudioContext)(); - const oscillator = context.createOscillator(); - oscillator.type = 'sine'; - oscillator.frequency.setValueAtTime(800, context.currentTime); - oscillator.connect(context.destination); - oscillator.start(); - oscillator.stop(context.currentTime + 0.2); - } catch (e) { - console.error('Could not play fallback audio', e); - } - }); + const playPromise = audioRef.current.play(); + if (playPromise !== undefined) { + playPromise.catch(err => { + console.log('Error playing sound:', err); + // Fallback to simple beep if audio file fails + try { + const context = new (window.AudioContext || (window as any).webkitAudioContext)(); + const oscillator = context.createOscillator(); + oscillator.type = 'sine'; + oscillator.frequency.setValueAtTime(800, context.currentTime); + oscillator.connect(context.destination); + oscillator.start(); + oscillator.stop(context.currentTime + 0.2); + } catch (e) { + console.error('Could not play fallback audio', e); + } + }); + } } }; diff --git a/lib/notification-context.tsx b/lib/notification-context.tsx index daeb11e..9b97c74 100644 --- a/lib/notification-context.tsx +++ b/lib/notification-context.tsx @@ -147,21 +147,24 @@ export function NotificationProvider({ children }: NotificationProviderProps) { const playNotificationSound = () => { if (audioRef.current) { audioRef.current.currentTime = 0; - audioRef.current.play().catch(err => { - console.log('Error playing sound:', err); - // Fallback beep if audio file fails - try { - const context = new (window.AudioContext || (window as any).webkitAudioContext)(); - const oscillator = context.createOscillator(); - oscillator.type = 'sine'; - oscillator.frequency.setValueAtTime(800, context.currentTime); - oscillator.connect(context.destination); - oscillator.start(); - oscillator.stop(context.currentTime + 0.2); - } catch (e) { - console.error('Could not play fallback audio', e); - } - }); + const playPromise = audioRef.current.play(); + if (playPromise !== undefined) { + playPromise.catch(err => { + console.log('Error playing sound:', err); + // Fallback beep if audio file fails + try { + const context = new (window.AudioContext || (window as any).webkitAudioContext)(); + const oscillator = context.createOscillator(); + oscillator.type = 'sine'; + oscillator.frequency.setValueAtTime(800, context.currentTime); + oscillator.connect(context.destination); + oscillator.start(); + oscillator.stop(context.currentTime + 0.2); + } catch (e) { + console.error('Could not play fallback audio', e); + } + }); + } } };