diff --git a/src/frontend/src/features/notifications/hooks/useSoundNotification.tsx b/src/frontend/src/features/notifications/hooks/useSoundNotification.tsx index ce9b3d3e..fcaa6cb7 100644 --- a/src/frontend/src/features/notifications/hooks/useSoundNotification.tsx +++ b/src/frontend/src/features/notifications/hooks/useSoundNotification.tsx @@ -1,7 +1,11 @@ import useSound from 'use-sound' +import { useSnapshot } from 'valtio' +import { notificationsStore } from '@/stores/notifications' +import { NotificationType } from '@/features/notifications/NotificationType' // fixme - handle dynamic audio output changes export const useNotificationSound = () => { + const notificationsSnap = useSnapshot(notificationsStore) const [play] = useSound('./sounds/notifications.mp3', { sprite: { participantJoined: [0, 1150], @@ -10,9 +14,11 @@ export const useNotificationSound = () => { waiting: [2039, 710], success: [2740, 1304], }, + volume: notificationsSnap.soundNotificationVolume, }) - const triggerNotificationSound = (type: string) => { - play({ id: type }) + const triggerNotificationSound = (type: NotificationType) => { + const isSoundEnabled = notificationsSnap.soundNotifications.get(type) + if (isSoundEnabled) play({ id: type }) } return { triggerNotificationSound } } diff --git a/src/frontend/src/stores/notifications.ts b/src/frontend/src/stores/notifications.ts new file mode 100644 index 00000000..19871f42 --- /dev/null +++ b/src/frontend/src/stores/notifications.ts @@ -0,0 +1,44 @@ +import { proxy, subscribe } from 'valtio' +import { proxyMap } from 'valtio/utils' +import { deserializeToProxyMap, serializeProxyMap } from '@/utils/valtio' +import { STORAGE_KEYS } from '@/utils/storageKeys' +import { NotificationType } from '@/features/notifications/NotificationType' + +type State = { + soundNotifications: Map + soundNotificationVolume: number +} + +const DEFAULT_STATE: State = { + soundNotifications: proxyMap( + new Map([ + [NotificationType.ParticipantJoined, true], + [NotificationType.HandRaised, true], + ]) + ), + soundNotificationVolume: 0.1, +} + +function getNotificationsState(): State { + try { + const stored = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS) + if (!stored) return DEFAULT_STATE + const parsed = JSON.parse(stored, deserializeToProxyMap) + return parsed || DEFAULT_STATE + } catch (error: unknown) { + console.error( + '[NotificationsStore] Failed to parse stored settings:', + error + ) + return DEFAULT_STATE + } +} + +export const notificationsStore = proxy(getNotificationsState()) + +subscribe(notificationsStore, () => { + localStorage.setItem( + STORAGE_KEYS.NOTIFICATIONS, + JSON.stringify(notificationsStore, serializeProxyMap) + ) +})