g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle play() and load() promises for audio elements

Browse Source 
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.
This commit is contained in:
g
2025-12-09 22:17:20 +00:00
parent e10ad2835e
commit adb01009eb
6 changed files with 70 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/admin/AdminAnalytics.tsx
View File

@@ -438,7 +438,7 @@ export default function AdminAnalytics() {
<span>Today: {analyticsData?.orders?.totalToday || 0}</span>
<TrendIndicator
current={analyticsData?.orders?.totalToday || 0}
previous={(analyticsData?.orders?.total || 0) / 30} // Rough estimate
previous={(analyticsData?.orders?.total || 0) / 30}
/>
</div>

11
components/audio-preloader.tsx
View File

@@ -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

33
components/dashboard/ChatDetail.tsx
View File

@@ -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 {

9
components/dashboard/ChatTable.tsx
View File

@@ -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);
});
}
}
};

33
components/notifications/OrderNotifications.tsx
View File

@@ -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);
}
});
}
}
};

33
lib/notification-context.tsx
View File

@@ -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);
}
});
}
}
};