Add Mute All button functionality

mozilla · Oct 8, 2020 · 300fe09 · 300fe09
1 parent 142728c
commit 300fe09
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js
@@ -94,7 +94,7 @@ function getLabel(person) {
   )} and ${getVoiceLabel(person.micPresence)} ${getDeviceLabel(person.context)}.`;
 }
 
-export function PeopleSidebar({ people, onSelectPerson, onClose }) {
+export function PeopleSidebar({ people, onSelectPerson, onClose, showMuteAll, onMuteAll }) {
   return (
     <Sidebar
       title={`People (${people.length})`}
@@ -104,9 +104,13 @@ export function PeopleSidebar({ people, onSelectPerson, onClose }) {
         </IconButton>
       }
       afterTitle={
-        <IconButton className={styles.muteAllButton} onClick={onClose}>
-          Mute All
-        </IconButton>
+        showMuteAll ? (
+          <IconButton className={styles.muteAllButton} onClick={onMuteAll}>
+            Mute All
+          </IconButton>
+        ) : (
+          undefined
+        )
       }
     >
       <List>
@@ -140,6 +144,8 @@ export function PeopleSidebar({ people, onSelectPerson, onClose }) {
 PeopleSidebar.propTypes = {
   people: PropTypes.array,
   onSelectPerson: PropTypes.func,
+  showMuteAll: PropTypes.bool,
+  onMuteAll: PropTypes.func,
   onClose: PropTypes.func
 };
 

diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss
@@ -26,4 +26,12 @@
   display: flex;
   flex: 1;
   justify-content: flex-end;
+}
+
+:local(.close-button) {
+  margin-left: 16px;
+}
+
+:local(.mute-all-button) {
+  margin-right: 16px;
 }
diff --git a/src/react-components/room/PeopleSidebarContainer.js b/src/react-components/room/PeopleSidebarContainer.js
@@ -37,7 +37,7 @@ function usePeopleList(presences, mySessionId, micUpdateFrequency = 500) {
   return people;
 }
 
-export function PeopleSidebarContainer({ history, presences, mySessionId, onOpenAvatarSettings, onClose }) {
+export function PeopleSidebarContainer({ hubChannel, history, presences, mySessionId, onOpenAvatarSettings, onClose }) {
   const people = usePeopleList(presences, mySessionId);
 
   // TODO: Dont use state routes for profiles
@@ -52,10 +52,30 @@ export function PeopleSidebarContainer({ history, presences, mySessionId, onOpen
     [history, mySessionId, onOpenAvatarSettings]
   );
 
-  return <PeopleSidebar people={people} onSelectPerson={onSelectPerson} onClose={onClose} />;
+  const onMuteAll = useCallback(
+    () => {
+      for (const person of people) {
+        if (person.presence === "room" && person.permissions && !person.permissions.mute_users) {
+          hubChannel.mute(person.id);
+        }
+      }
+    },
+    [people, hubChannel]
+  );
+
+  return (
+    <PeopleSidebar
+      people={people}
+      onSelectPerson={onSelectPerson}
+      onClose={onClose}
+      onMuteAll={onMuteAll}
+      showMuteAll={hubChannel.can("mute_users")}
+    />
+  );
 }
 
 PeopleSidebarContainer.propTypes = {
+  hubChannel: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
   onOpenAvatarSettings: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,

diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
@@ -1869,6 +1869,7 @@ class UIRoot extends Component {
                     )}
                     {this.state.sidebarId === "people" && (
                       <PeopleSidebarContainer
+                        hubChannel={this.props.hubChannel}
                         history={this.props.history}
                         mySessionId={this.props.sessionId}
                         presences={this.props.presences}