Merge pull request #6152 from mozilla/add-muted-indicator-to-people-list

feat: Add muted indicator to people list

src/components/avatar-volume-controls.js

@@ -49,6 +49,10 @@ AFRAME.registerComponent("avatar-volume-controls", {
     this.el.emit("gain_multiplier_updated", { gainMultiplier });
     const isLocalMuted = APP.mutedState.has(this.audioEl);
     updatePref && updateAvatarVolumesPref(this.playerInfo.displayName, gainMultiplier, isLocalMuted);
+    // If the gainMultiplier is lowered to 0, updated muted status in local storage
+    if (!gainMultiplier) {
+      this.updateLocalMuted(true, true);
+    }
   },
 
   updateLocalMuted(muted, updatePref = false) {

src/components/player-info.js

@@ -49,13 +49,15 @@ AFRAME.registerComponent("player-info", {
 
     this.isLocalPlayerInfo = this.el.id === "avatar-rig";
     this.playerSessionId = null;
+    this.displayName = null;
 
     if (!this.isLocalPlayerInfo) {
       NAF.utils.getNetworkedEntity(this.el).then(networkedEntity => {
         this.playerSessionId = NAF.utils.getCreator(networkedEntity);
         const playerPresence = window.APP.hubChannel.presence.state[this.playerSessionId];
         if (playerPresence) {
           this.permissions = playerPresence.metas[0].permissions;
+          this.displayName = playerPresence.metas[0].profile.displayName;
         }
       });
     }

src/react-components/room/PeopleSidebar.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { ToolTip } from "@mozilla/lilypad-ui";
 import styles from "./PeopleSidebar.scss";
 import { Sidebar } from "../sidebar/Sidebar";
 import { CloseButton } from "../input/CloseButton";
@@ -13,10 +14,17 @@ import { ReactComponent as VolumeOffIcon } from "../icons/VolumeOff.svg";
 import { ReactComponent as VolumeHighIcon } from "../icons/VolumeHigh.svg";
 import { ReactComponent as VolumeMutedIcon } from "../icons/VolumeMuted.svg";
 import { ReactComponent as HandRaisedIcon } from "../icons/HandRaised.svg";
+import { ReactComponent as UserSoundOnIcon } from "../icons/UserSoundOn.svg";
+import { ReactComponent as UserSoundOffIcon } from "../icons/UserSoundOff.svg";
 import { List, ButtonListItem } from "../layout/List";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, defineMessage, useIntl } from "react-intl";
 import { PermissionNotification } from "./PermissionNotifications";
 
+const toolTipDescription = defineMessage({
+  id: "people-sidebar.muted-tooltip",
+  defaultMessage: "User is {mutedState}"
+});
+
 function getDeviceLabel(ctx, intl) {
   if (ctx) {
     if (ctx.hmd) {
@@ -110,6 +118,11 @@ export function PeopleSidebar({
       return a.hand_raised ? -1 : 1;
     });
   me && filteredPeople.unshift(me);
+  const store = window.APP.store;
+
+  function getToolTipDescription(isMuted) {
+    return intl.formatMessage(toolTipDescription, { mutedState: isMuted ? "muted" : "not muted" });
+  }
 
   return (
     <Sidebar
@@ -147,6 +160,21 @@ export function PeopleSidebar({
                 {person.hand_raised && <HandRaisedIcon />}
                 {<DeviceIcon title={getDeviceLabel(person.context, intl)} />}
                 {!person.context.discord && VoiceIcon && <VoiceIcon title={getVoiceLabel(person.micPresence, intl)} />}
+                {!person.isMe && (
+                  <ToolTip
+                    classProp="tooltip"
+                    location="bottom"
+                    description={getToolTipDescription(
+                      store._preferences?.avatarVoiceLevels?.[person.profile.displayName]?.muted
+                    )}
+                  >
+                    {store._preferences?.avatarVoiceLevels?.[person.profile.displayName]?.muted ? (
+                      <UserSoundOffIcon />
+                    ) : (
+                      <UserSoundOnIcon />
+                    )}
+                  </ToolTip>
+                )}
                 <p>{getPersonName(person, intl)}</p>
                 {person.roles.owner && (
                   <StarIcon

src/react-components/room/PeopleSidebar.scss

@@ -3,7 +3,7 @@
 :local(.person) {
   font-size: theme.$font-size-sm;
   color: theme.$text1-color;
-
+  position: relative;
   & > * {
     margin-right: 8px;
 

src/react-components/room/UserProfileSidebar.js

@@ -51,6 +51,7 @@ export function UserProfileSidebar({
     [updateMultiplier]
   );
   const newLevel = calcLevel(multiplier);
+
   return (
     <Sidebar
       beforeTitle={showBackButton ? <BackButton onClick={onBack} /> : <CloseButton onClick={onClose} />}

src/react-components/styles/theme.scss

@@ -271,3 +271,106 @@ $tile-button-bg-color: var(--tile-button-bg-color);
 $tile-button-bg-color-hover: var(--tile-button-bg-color-hover);
 $tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed);
 $tile-button-border-color: var(--tile-button-border-color);
+
+// Lilypad compatible variables (to eventually replace the above)
+
+/**
+  PRIMARY INTERACTION
+  **/
+$color-interaction-primary: var(--color-interaction-primary);
+$color-interaction-primary-hover: var(--color-interaction-primary-hover);
+$color-interaction-primary-active: var(--color-interaction-primary-active);
+$color-interaction-primary-disabled: var(--color-interaction-primary-disabled);
+$color-interaction-primary-alt: var(--color-interaction-primary-alt);
+$color-interaction-primary-alt-hover: var(--color-interaction-primary-alt-hover);
+$color-interaction-primary-alt-active: var(--color-interaction-primary-alt-active);
+$color-interaction-primary-alt-disabled: var(--color-interaction-primary-alt-disabled);
+
+/**
+  SECONDARY INTERACTION
+  **/
+$color-interaction-secondary: var(--color-interaction-secondary);
+$color-interaction-secondary-hover: var(--color-interaction-secondary-hover);
+$color-interaction-secondary-active: var(--color-interaction-secondary-active);
+$color-interaction-secondary-disabled: var(--color-interaction-secondary-disabled);
+$color-interaction-secondary-alt: var(--color-interaction-secondary-alt);
+$color-interaction-secondary-alt-hover: var(--color-interaction-secondary-alt-hover);
+$color-interaction-secondary-alt-active: var(--color-interaction-secondary-alt-active);
+$color-interaction-secondary-alt-disabled: var(--color-interaction-secondary-alt-disabled);
+
+/**
+  SEMANTIC
+  **/
+$color-semantic-info: var(--color-semantic-info);
+$color-semantic-info-hover: var(--color-semantic-info-hover);
+$color-semantic-info-active: var(--color-semantic-info-active);
+$color-semantic-disabled: var(--color-semantic-disabled);
+$color-semantic-success: var(--color-semantic-success);
+$color-semantic-success-hover: var(--color-semantic-success-hover);
+$color-semantic--success-active: var(--color-semantic-success-active);
+$color-semantic-success-disabled: var(--color-semantic-success-disabled);
+$color-semantic-warning: var(--color-semantic-warning);
+$color-semantic-warning-hover: var(--color-semantic-warning-hover);
+$color-semantic-warning-active: var(--color-semantic-warning-active);
+$color-semantic-warning-disabled: var(--color-semantic-warning-disabled);
+$color-semantic-critical: var(--color-semantic-critical);
+$color-semantic-critical-hover: var(--color-semantic-critical-hover);
+$color-semantic-critical-active: var(--color-semantic-critical-active);
+$color-semantic-critical-disabled: var(--color-semantic-critical-disabled);
+$color-semantic-critical-bg-alt: var(--color-semantic-critical-bg-alt);
+$color-semantic-neutral: var(--color-semantic-neutral);
+$color-semantic-neutral-hover: var(--color-semantic-neutral-hover);
+$color-semantic-neutral-active: var(--color-semantic-neutral-active);
+$color-semantic-neutral-inactive: var(--color-semantic-neutral-inactive);
+
+/**
+  TEXT
+  **/
+$color-text-main: var(--color-text-main);
+$color-text-subtle: var(--color-text-subtle);
+$color-text-reverse: var(--color-text-reverse);
+$color-text-reverse-subtle: var(--color-text-reverse-subtle);
+$color-text-disabled: var(--color-text-disabled);
+$color-text-info: var(--color-text-info);
+$color-text-success: var(--color-text-success);
+$color-text-warning: var(--color-text-warning);
+$color-text-critical: var(--color-text-critical);
+
+/**
+  BORDER
+  **/
+$color-border-1: var(--color-border-1);
+$color-border-2: var(--color-border-2);
+$color-border-3: var(--color-border-3);
+
+/**
+  NEUTRALS
+  **/
+$color-neutral-0: var(--color-neutral-0);
+$color-neutral-0-reverse: var(--color-neutral-0-reverse);
+$color-neutral-1: var(--color-neutral-1);
+$color-neutral-2: var(--color-neutral-2);
+$color-neutral-3: var(--color-neutral-3);
+
+/**
+  STATUS
+  **/
+$color-status-ready: var(--color-status-ready);
+$color-status-offline: var(--color-status-offline);
+$color-status-busy: var(--color-status-busy);
+
+/**
+  BACKGROUNDS
+  **/
+$color-background-overlay: var(--color-background-overlay);
+$color-background-callout: var(--color-background-subtle-callout);
+$color-background-modal-overlay: var(--color-background-modal-overlay);
+$color-background-critical: var(--color-background-critical);
+$color-background-neutral-0: var(--color-background-neutral-0);
+
+/**
+  MENU
+  **/
+$color-interactions-menu: var(--color-interactions-menu);
+$color-interactions-menu-hover: var(--color-interactions-menu-hover);
+$color-interactions-menu-inactive: var(--color-interactions-menu-inactive);