fix(sound-settings) Disable checkbox for disabled sounds (#12976)

react/features/base/ui/components/web/Checkbox.tsx

@@ -53,6 +53,10 @@ const useStyles = makeStyles()(theme => {
             }
         },
 
+        disabled: {
+            cursor: 'not-allowed'
+        },
+
         activeArea: {
             display: 'grid',
             placeContent: 'center',
@@ -73,7 +77,6 @@ const useStyles = makeStyles()(theme => {
                 height: '18px',
                 border: `2px solid ${theme.palette.icon03}`,
                 borderRadius: '3px',
-                cursor: 'pointer',
 
                 display: 'grid',
                 placeContent: 'center',
@@ -154,7 +157,7 @@ const Checkbox = ({
 
     return (
         <div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
-            <label className = { cx(styles.activeArea, isMobile && 'is-mobile') }>
+            <label className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
                 <input
                     checked = { checked }
                     disabled = { disabled }

react/features/settings/components/web/SoundsTab.tsx

@@ -98,6 +98,7 @@ class SoundsTab extends AbstractDialogTab<Props> {
      */
     render() {
         const {
+            disabledSounds,
             soundsIncomingMessage,
             soundsParticipantJoined,
             soundsParticipantKnocking,
@@ -117,40 +118,45 @@ class SoundsTab extends AbstractDialogTab<Props> {
                     {t('settings.playSounds')}
                 </h2>
                 {enableReactions && <Checkbox
-                    checked = { soundsReactions }
+                    checked = { soundsReactions && !disabledSounds.includes('REACTION_SOUND') }
                     className = 'settings-checkbox'
-                    disabled = { moderatorMutedSoundsReactions }
+                    disabled = { moderatorMutedSoundsReactions || disabledSounds.includes('REACTION_SOUND') }
                     label = { t('settings.reactions') }
                     name = 'soundsReactions'
                     onChange = { this._onChange } />
                 }
                 <Checkbox
-                    checked = { soundsIncomingMessage }
+                    checked = { soundsIncomingMessage && !disabledSounds.includes('INCOMING_MSG_SOUND') }
                     className = 'settings-checkbox'
+                    disabled = { disabledSounds.includes('INCOMING_MSG_SOUND') }
                     label = { t('settings.incomingMessage') }
                     name = 'soundsIncomingMessage'
                     onChange = { this._onChange } />
                 <Checkbox
-                    checked = { soundsParticipantJoined }
+                    checked = { soundsParticipantJoined && !disabledSounds.includes('PARTICIPANT_JOINED_SOUND') }
                     className = 'settings-checkbox'
+                    disabled = { disabledSounds.includes('PARTICIPANT_JOINED_SOUND') }
                     label = { t('settings.participantJoined') }
                     name = 'soundsParticipantJoined'
                     onChange = { this._onChange } />
                 <Checkbox
-                    checked = { soundsParticipantLeft }
+                    checked = { soundsParticipantLeft && !disabledSounds.includes('PARTICIPANT_LEFT_SOUND') }
                     className = 'settings-checkbox'
+                    disabled = { disabledSounds.includes('PARTICIPANT_LEFT_SOUND') }
                     label = { t('settings.participantLeft') }
                     name = 'soundsParticipantLeft'
                     onChange = { this._onChange } />
                 <Checkbox
-                    checked = { soundsTalkWhileMuted }
+                    checked = { soundsTalkWhileMuted && !disabledSounds.includes('TALK_WHILE_MUTED_SOUND') }
                     className = 'settings-checkbox'
+                    disabled = { disabledSounds.includes('TALK_WHILE_MUTED_SOUND') }
                     label = { t('settings.talkWhileMuted') }
                     name = 'soundsTalkWhileMuted'
                     onChange = { this._onChange } />
                 <Checkbox
-                    checked = { soundsParticipantKnocking }
+                    checked = { soundsParticipantKnocking && !disabledSounds.includes('KNOCKING_PARTICIPANT_SOUND') }
                     className = 'settings-checkbox'
+                    disabled = { disabledSounds.includes('KNOCKING_PARTICIPANT_SOUND') }
                     label = { t('settings.participantKnocking') }
                     name = 'soundsParticipantKnocking'
                     onChange = { this._onChange } />

react/features/settings/functions.any.ts

@@ -241,6 +241,7 @@ export function getSoundsTabProps(stateful: IStateful) {
     const moderatorMutedSoundsReactions = state['features/base/conference'].startReactionsMuted ?? false;
 
     return {
+        disabledSounds: state['features/base/config'].disabledSounds || [],
         soundsIncomingMessage,
         soundsParticipantJoined,
         soundsParticipantKnocking,