restore player info displayName

Hubs-Foundation · Jul 4, 2023 · 9d0b47c · 9d0b47c
1 parent aec0dc8
commit 9d0b47c
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js
@@ -29,7 +29,7 @@ AFRAME.registerComponent("avatar-volume-controls", {
     this.onRemoteMuteUpdated = this.onRemoteMuteUpdated.bind(this);
     this.playerInfo.el.addEventListener("remote_mute_updated", this.onRemoteMuteUpdated);
     this.muteButton.object3D.visible = this.playerInfo.data.muted;
-    const volumePref = getAvatarVolumePref(this.playerInfo.playerSessionId);
+    const volumePref = getAvatarVolumePref(this.playerInfo.displayName);
     this.updateGainMultiplier(volumePref === undefined ? DEFAULT_VOLUME_BAR_MULTIPLIER : volumePref.gainMultiplier);
     this.updateLocalMuted(volumePref === undefined ? false : volumePref.muted);
   },
@@ -48,7 +48,7 @@ AFRAME.registerComponent("avatar-volume-controls", {
     this.updateVolumeLabel();
     this.el.emit("gain_multiplier_updated", { gainMultiplier });
     const isLocalMuted = APP.mutedState.has(this.audioEl);
-    updatePref && updateAvatarVolumesPref(this.playerInfo.playerSessionId, gainMultiplier, isLocalMuted);
+    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);
@@ -69,7 +69,7 @@ AFRAME.registerComponent("avatar-volume-controls", {
     this.el.emit("local_muted_updated", { muted });
     const gainMultiplier = APP.gainMultipliers.get(this.audioEl);
     const isLocalMuted = APP.mutedState.has(this.audioEl);
-    updatePref && updateAvatarVolumesPref(this.playerInfo.playerSessionId, gainMultiplier, isLocalMuted);
+    updatePref && updateAvatarVolumesPref(this.playerInfo.displayName, gainMultiplier, isLocalMuted);
   },
 
   volumeUp() {

diff --git a/src/components/player-info.js b/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;
         }
       });
     }

diff --git a/src/react-components/icons/UserSoundOff.svg b/src/react-components/icons/UserSoundOff.svg
diff --git a/src/react-components/icons/UserSoundOn.svg b/src/react-components/icons/UserSoundOn.svg
diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js
@@ -160,13 +160,20 @@ export function PeopleSidebar({
                 {person.hand_raised && <HandRaisedIcon />}
                 {<DeviceIcon title={getDeviceLabel(person.context, intl)} />}
                 {!person.context.discord && VoiceIcon && <VoiceIcon title={getVoiceLabel(person.micPresence, intl)} />}
-                <ToolTip description={getToolTipDescription(store._preferences?.avatarVoiceLevels?.[person.id]?.muted)}>
-                  {store._preferences?.avatarVoiceLevels?.[person.id]?.muted ? (
-                    <UserSoundOffIcon />
-                  ) : (
-                    <UserSoundOnIcon />
-                  )}
-                </ToolTip>
+                {!person.isMe && (
+                  <ToolTip
+                    classProp="tooltip"
+                    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

diff --git a/src/react-components/room/PeopleSidebar.scss b/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;
 
@@ -22,3 +22,9 @@
   flex: 1;
   justify-content: flex-end;
 }
+
+:local(.tooltip) {
+  z-index: 100;
+  position: fixed;
+  position: absolute;
+}