From fed74afffe10dc7c8c13937aee3b801491b85cf2 Mon Sep 17 00:00:00 2001
From: Horatiu Muresan <39557534+horymury@users.noreply.github.com>
Date: Tue, 28 Feb 2023 16:47:00 +0200
Subject: [PATCH] fix(sound-settings) Disable checkbox for disabled sounds
 (#12976)

---
 .../base/ui/components/web/Checkbox.tsx       |  7 +++++--
 .../settings/components/web/SoundsTab.tsx     | 20 ++++++++++++-------
 react/features/settings/functions.any.ts      |  1 +
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/react/features/base/ui/components/web/Checkbox.tsx b/react/features/base/ui/components/web/Checkbox.tsx
index 9bf4c1c8c8..6051e1e02f 100644
--- a/react/features/base/ui/components/web/Checkbox.tsx
+++ b/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 }
diff --git a/react/features/settings/components/web/SoundsTab.tsx b/react/features/settings/components/web/SoundsTab.tsx
index a868f12759..efc99063d9 100644
--- a/react/features/settings/components/web/SoundsTab.tsx
+++ b/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 } />
diff --git a/react/features/settings/functions.any.ts b/react/features/settings/functions.any.ts
index 9fdb67fab5..b19b0bf089 100644
--- a/react/features/settings/functions.any.ts
+++ b/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,