🚸(frontend) mute join notification sound in larger rooms

In particularly large rooms, with more than 5 or 10 participants,
the entry notification sound can quickly feel spammy.

A configuration to disable it exists, but new users do not discover
it easily. The sound notification is most useful while waiting for
the first few participants to arrive; once a few people are in, the
meeting usually starts and the sound becomes more disruptive than
helpful.

The visual notification remains in place, so users are still aware
when newcomers join. Roll this out and check whether users find the
change helpful.

src/backend/meet/settings.py

@@ -411,6 +411,9 @@ class Base(Configuration):
         "transcription_destination": values.Value(
             None, environ_name="FRONTEND_TRANSCRIPTION_DESTINATION", environ_prefix=None
         ),
+        "max_participants_for_sound": values.PositiveIntegerValue(
+            5, environ_name="FRONTEND_MAX_PARTICIPANTS_FOR_SOUND", environ_prefix=None
+        )
     }
 
     # Mail

src/frontend/src/api/useConfig.ts

@@ -55,6 +55,7 @@ export interface ApiConfig {
     default_sources: Source[]
   }
   transcription_destination?: string
+  max_participants_for_sound: number
 }
 
 const fetchConfig = (): Promise<ApiConfig> => {

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -14,9 +14,11 @@ import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { Emoji } from '@/features/reactions/types'
 import { useReactions } from '@/features/reactions/hooks/useReactions'
 import { NotificationProvider } from './NotificationProvider'
+import { useConfig } from '@/api/useConfig'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
+  const { data } = useConfig()
   const { triggerNotificationSound } = useNotificationSound()
   const { t } = useTranslation('notifications')
   const announce = useScreenReaderAnnounce()
@@ -135,12 +137,21 @@ export const MainNotificationToast = () => {
     }
   }, [room, handleEmoji])
 
+  const triggerNotificationSoundIfRoomIsSmall = useCallback(
+    (type: NotificationType) => {
+      if (!data) return
+      if (room.numParticipants >= data.max_participants_for_sound) return
+      triggerNotificationSound(type)
+    },
+    [room, data, triggerNotificationSound]
+  )
+
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
       if (isMobileBrowser()) {
         return
       }
-      triggerNotificationSound(NotificationType.ParticipantJoined)
+      triggerNotificationSoundIfRoomIsSmall(NotificationType.ParticipantJoined)
       toastQueue.add(
         {
           participant,
@@ -155,7 +166,7 @@ export const MainNotificationToast = () => {
     return () => {
       room.off(RoomEvent.ParticipantConnected, showJoinNotification)
     }
-  }, [room, triggerNotificationSound])
+  }, [room, triggerNotificationSoundIfRoomIsSmall])
 
   useEffect(() => {
     const removeParticipantNotifications = (participant: Participant) => {