From 12d7048326b93ace4c7f6684329385d22d076f47 Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Thu, 29 Jun 2023 12:18:09 -0400 Subject: [PATCH 1/9] use playerInfo playerSessionId instead of undefined displayName --- src/components/avatar-volume-controls.js | 6 +++--- src/utils/avatar-volume-utils.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js index 15a3e70d35..f588c7996f 100644 --- 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.displayName); + const volumePref = getAvatarVolumePref(this.playerInfo.playerSessionId); 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.displayName, gainMultiplier, isLocalMuted); + updatePref && updateAvatarVolumesPref(this.playerInfo.playerSessionId, gainMultiplier, isLocalMuted); }, updateLocalMuted(muted, updatePref = false) { @@ -65,7 +65,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.displayName, gainMultiplier, isLocalMuted); + updatePref && updateAvatarVolumesPref(this.playerInfo.playerSessionId, gainMultiplier, isLocalMuted); }, volumeUp() { diff --git a/src/utils/avatar-volume-utils.js b/src/utils/avatar-volume-utils.js index 62a2020fed..644c4119e0 100644 --- a/src/utils/avatar-volume-utils.js +++ b/src/utils/avatar-volume-utils.js @@ -30,9 +30,9 @@ export function calcGainMultiplier(level) { ); } -export function updateAvatarVolumesPref(displayName, gainMultiplier, muted) { +export function updateAvatarVolumesPref(playerSessionId, gainMultiplier, muted) { const avatarVoiceLevels = APP.store.state.preferences.avatarVoiceLevels || {}; - avatarVoiceLevels[displayName] = { + avatarVoiceLevels[playerSessionId] = { gainMultiplier, muted }; @@ -43,6 +43,6 @@ export function updateAvatarVolumesPref(displayName, gainMultiplier, muted) { }); } -export function getAvatarVolumePref(displayName) { - return APP.store.state.preferences.avatarVoiceLevels?.[displayName]; +export function getAvatarVolumePref(playerSessionId) { + return APP.store.state.preferences.avatarVoiceLevels?.[playerSessionId]; } From a615f3f21257a4b34ddf5c64309c9e56e4512067 Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Thu, 29 Jun 2023 13:47:54 -0400 Subject: [PATCH 2/9] indicate personally muted users --- src/components/avatar-volume-controls.js | 8 + src/react-components/room/PeopleSidebar.js | 4 + src/react-components/room/PeopleSidebar.scss | 5 + .../room/UserProfileSidebar.js | 3 +- src/react-components/styles/theme.scss | 168 ++++++++++++++---- 5 files changed, 154 insertions(+), 34 deletions(-) diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js index f588c7996f..952f565bbe 100644 --- a/src/components/avatar-volume-controls.js +++ b/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.playerSessionId, 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) { @@ -80,6 +84,10 @@ AFRAME.registerComponent("avatar-volume-controls", { const step = -calcGainStepDown(gainMultiplier); gainMultiplier = THREE.MathUtils.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER); this.updateGainMultiplier(gainMultiplier, true); + // If the gainMultiplier is lowered to 0, updated muted status in local storage + if (!gainMultiplier) { + this.updateLocalMuted(true, true); + } }, updateVolumeLabel() { diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js index 6ca8ff131f..8f793c1072 100644 --- a/src/react-components/room/PeopleSidebar.js +++ b/src/react-components/room/PeopleSidebar.js @@ -110,6 +110,7 @@ export function PeopleSidebar({ return a.hand_raised ? -1 : 1; }); me && filteredPeople.unshift(me); + const store = window.APP.store; return ( )} + {store._preferences?.avatarVoiceLevels?.[person.id]?.muted && ( + muted + )}

{getPresenceMessage(person.presence, intl)}

); diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss index ee3020ae6c..2b0d2ba36d 100644 --- a/src/react-components/room/PeopleSidebar.scss +++ b/src/react-components/room/PeopleSidebar.scss @@ -22,3 +22,8 @@ flex: 1; justify-content: flex-end; } + +:local(.isMuted) { + font-style: italic; + color: theme.$color-semantic-warning; +} diff --git a/src/react-components/room/UserProfileSidebar.js b/src/react-components/room/UserProfileSidebar.js index 11092a9f3b..345fe78bab 100644 --- a/src/react-components/room/UserProfileSidebar.js +++ b/src/react-components/room/UserProfileSidebar.js @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect } from "react"; import PropTypes from "prop-types"; import { Sidebar } from "../sidebar/Sidebar"; import { CloseButton } from "../input/CloseButton"; @@ -51,6 +51,7 @@ export function UserProfileSidebar({ [updateMultiplier] ); const newLevel = calcLevel(multiplier); + return ( : } diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss index bfe6fca35b..38a2cc3435 100644 --- a/src/react-components/styles/theme.scss +++ b/src/react-components/styles/theme.scss @@ -10,60 +10,60 @@ $transparent: transparent; $transparent-hover: rgba(0, 0, 0, 0.08); $transparent-pressed: rgba(0, 0, 0, 0.12); -$white: #FFFFFF; -$white-hover: #E7E7E7; -$white-pressed: #DBDBDB; +$white: #ffffff; +$white-hover: #e7e7e7; +$white-pressed: #dbdbdb; -$lightgrey: #E7E7E7; -$lightgrey-hover: #F5F5F5; -$lightgrey-pressed: #DBDBDB; +$lightgrey: #e7e7e7; +$lightgrey-hover: #f5f5f5; +$lightgrey-pressed: #dbdbdb; -$grey: #BBBBBB; -$grey-hover: #C7C7C7; -$grey-pressed: #ADADAD; +$grey: #bbbbbb; +$grey-hover: #c7c7c7; +$grey-pressed: #adadad; $darkgrey: #868686; $darkgrey-hover: #949494; -$darkgrey-pressed: #7A7A7A; +$darkgrey-pressed: #7a7a7a; $black: #000000; $black-hover: #404040; -$black-pressed: #7A7A7A; +$black-pressed: #7a7a7a; -$red: #F5325C; -$red-hover: #F64B70; -$red-pressed: #F41A49; +$red: #f5325c; +$red-hover: #f64b70; +$red-pressed: #f41a49; -$orange: #FF8500; -$orange-hover: #FF911A; -$orange-pressed: #E67800; +$orange: #ff8500; +$orange-hover: #ff911a; +$orange-pressed: #e67800; -$green: #7ED320; -$green-hover: #8CDF2F; -$green-pressed: #72BE1D; +$green: #7ed320; +$green-hover: #8cdf2f; +$green-pressed: #72be1d; -$blue: #007AB8; -$blue-hover: #008BD1; -$blue-pressed: #00699E; +$blue: #007ab8; +$blue-hover: #008bd1; +$blue-pressed: #00699e; -$purple: #7854F6; -$purple-hover: #8C6EF7; -$purple-pressed: #663DF5; +$purple: #7854f6; +$purple-hover: #8c6ef7; +$purple-pressed: #663df5; $recessed-bg: #f9f9f9; -$yellow: #FFC000; +$yellow: #ffc000; // Brand Colors -$spoke-primary-color: #2F80ED; -$twitter-primary-color: #6FC0FD; -$slack-primary-color: #611F69; -$discord--primary-color: #7289DA; +$spoke-primary-color: #2f80ed; +$twitter-primary-color: #6fc0fd; +$slack-primary-color: #611f69; +$discord--primary-color: #7289da; // Discord Bot Page Colors -$discord-bg-color: #2A2D32; +$discord-bg-color: #2a2d32; $discord-text1-color: white; -$discord-text2-color: #A3A3A3; +$discord-text2-color: #a3a3a3; $discord-text3-color: rgb(127, 127, 127); $discord-text4-color: rgb(64, 64, 64); @@ -272,3 +272,105 @@ $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); From 8a0ef4e0701fcd0613eb5070386c73e9e1b81ffc Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Thu, 29 Jun 2023 14:44:32 -0400 Subject: [PATCH 3/9] remove unused useeffect --- src/react-components/room/UserProfileSidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react-components/room/UserProfileSidebar.js b/src/react-components/room/UserProfileSidebar.js index 345fe78bab..b98062553a 100644 --- a/src/react-components/room/UserProfileSidebar.js +++ b/src/react-components/room/UserProfileSidebar.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback } from "react"; import PropTypes from "prop-types"; import { Sidebar } from "../sidebar/Sidebar"; import { CloseButton } from "../input/CloseButton"; From 9b2c6f5ba06431c2b503567335d32f710e90348a Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Thu, 29 Jun 2023 15:12:39 -0400 Subject: [PATCH 4/9] add intl translation id --- src/react-components/room/PeopleSidebar.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js index 8f793c1072..063aefef59 100644 --- a/src/react-components/room/PeopleSidebar.js +++ b/src/react-components/room/PeopleSidebar.js @@ -158,7 +158,9 @@ export function PeopleSidebar({ /> )} {store._preferences?.avatarVoiceLevels?.[person.id]?.muted && ( - muted + + {intl.formatMessage({ id: "people-sidebar.muted-label", defaultMessage: "muted" })} + )}

{getPresenceMessage(person.presence, intl)}

From aec0dc85ca5a7a6d51a55a1007548e8ee8b96ed1 Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Tue, 4 Jul 2023 15:15:32 -0400 Subject: [PATCH 5/9] Change muted text to icon --- src/react-components/icons/UserSoundOff.svg | 11 +++++++++ src/react-components/icons/UserSoundOn.svg | 4 +++ src/react-components/room/PeopleSidebar.js | 26 +++++++++++++++----- src/react-components/room/PeopleSidebar.scss | 5 ---- 4 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 src/react-components/icons/UserSoundOff.svg create mode 100644 src/react-components/icons/UserSoundOn.svg diff --git a/src/react-components/icons/UserSoundOff.svg b/src/react-components/icons/UserSoundOff.svg new file mode 100644 index 0000000000..6ccf1455fd --- /dev/null +++ b/src/react-components/icons/UserSoundOff.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/react-components/icons/UserSoundOn.svg b/src/react-components/icons/UserSoundOn.svg new file mode 100644 index 0000000000..d696583e54 --- /dev/null +++ b/src/react-components/icons/UserSoundOn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js index 063aefef59..33078c6c07 100644 --- a/src/react-components/room/PeopleSidebar.js +++ b/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) { @@ -112,6 +120,10 @@ export function PeopleSidebar({ me && filteredPeople.unshift(me); const store = window.APP.store; + function getToolTipDescription(isMuted) { + return intl.formatMessage(toolTipDescription, { mutedState: isMuted ? "muted" : "not muted" }); + } + return ( } {} {!person.context.discord && VoiceIcon && } + + {store._preferences?.avatarVoiceLevels?.[person.id]?.muted ? ( + + ) : ( + + )} +

{getPersonName(person, intl)}

{person.roles.owner && ( )} - {store._preferences?.avatarVoiceLevels?.[person.id]?.muted && ( - - {intl.formatMessage({ id: "people-sidebar.muted-label", defaultMessage: "muted" })} - - )}

{getPresenceMessage(person.presence, intl)}

); diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss index 2b0d2ba36d..ee3020ae6c 100644 --- a/src/react-components/room/PeopleSidebar.scss +++ b/src/react-components/room/PeopleSidebar.scss @@ -22,8 +22,3 @@ flex: 1; justify-content: flex-end; } - -:local(.isMuted) { - font-style: italic; - color: theme.$color-semantic-warning; -} From 9d0b47ce4e74e287322e1729bc448e8041a998d1 Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Tue, 4 Jul 2023 16:21:14 -0400 Subject: [PATCH 6/9] restore player info displayName --- src/components/avatar-volume-controls.js | 6 +++--- src/components/player-info.js | 2 ++ src/react-components/icons/UserSoundOff.svg | 2 +- src/react-components/icons/UserSoundOn.svg | 2 +- src/react-components/room/PeopleSidebar.js | 21 +++++++++++++------- src/react-components/room/PeopleSidebar.scss | 8 +++++++- 6 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js index 952f565bbe..9654252aad 100644 --- 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 index 24c95d078a..fac43f8220 100644 --- a/src/components/player-info.js +++ b/src/components/player-info.js @@ -49,6 +49,7 @@ 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 => { @@ -56,6 +57,7 @@ AFRAME.registerComponent("player-info", { 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 index 6ccf1455fd..ae4dc24831 100644 --- a/src/react-components/icons/UserSoundOff.svg +++ b/src/react-components/icons/UserSoundOff.svg @@ -1,4 +1,4 @@ - + diff --git a/src/react-components/icons/UserSoundOn.svg b/src/react-components/icons/UserSoundOn.svg index d696583e54..f4650f8adc 100644 --- a/src/react-components/icons/UserSoundOn.svg +++ b/src/react-components/icons/UserSoundOn.svg @@ -1,4 +1,4 @@ - + diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js index 33078c6c07..e69efb47ff 100644 --- a/src/react-components/room/PeopleSidebar.js +++ b/src/react-components/room/PeopleSidebar.js @@ -160,13 +160,20 @@ export function PeopleSidebar({ {person.hand_raised && } {} {!person.context.discord && VoiceIcon && } - - {store._preferences?.avatarVoiceLevels?.[person.id]?.muted ? ( - - ) : ( - - )} - + {!person.isMe && ( + + {store._preferences?.avatarVoiceLevels?.[person.profile.displayName]?.muted ? ( + + ) : ( + + )} + + )}

{getPersonName(person, intl)}

{person.roles.owner && ( * { margin-right: 8px; @@ -22,3 +22,9 @@ flex: 1; justify-content: flex-end; } + +:local(.tooltip) { + z-index: 100; + position: fixed; + position: absolute; +} From 5260a2e4465258affeaa57d0297a9f7a51897d9d Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Thu, 6 Jul 2023 15:39:16 -0400 Subject: [PATCH 7/9] change tooltip position --- src/react-components/room/PeopleSidebar.js | 1 + src/react-components/room/PeopleSidebar.scss | 6 ------ 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js index e69efb47ff..7dda31013b 100644 --- a/src/react-components/room/PeopleSidebar.js +++ b/src/react-components/room/PeopleSidebar.js @@ -163,6 +163,7 @@ export function PeopleSidebar({ {!person.isMe && ( Date: Thu, 6 Jul 2023 17:43:42 -0400 Subject: [PATCH 8/9] remove duplicate call --- src/components/avatar-volume-controls.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js index 9654252aad..10ad968cd9 100644 --- a/src/components/avatar-volume-controls.js +++ b/src/components/avatar-volume-controls.js @@ -84,10 +84,6 @@ AFRAME.registerComponent("avatar-volume-controls", { const step = -calcGainStepDown(gainMultiplier); gainMultiplier = THREE.MathUtils.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER); this.updateGainMultiplier(gainMultiplier, true); - // If the gainMultiplier is lowered to 0, updated muted status in local storage - if (!gainMultiplier) { - this.updateLocalMuted(true, true); - } }, updateVolumeLabel() { From fe8dcba0777bb30b5e276cf7d878b63e5c83fb4a Mon Sep 17 00:00:00 2001 From: Nikki Sharpley Date: Tue, 11 Jul 2023 14:57:53 -0400 Subject: [PATCH 9/9] rename arg to displayName --- src/utils/avatar-volume-utils.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/avatar-volume-utils.js b/src/utils/avatar-volume-utils.js index 644c4119e0..62a2020fed 100644 --- a/src/utils/avatar-volume-utils.js +++ b/src/utils/avatar-volume-utils.js @@ -30,9 +30,9 @@ export function calcGainMultiplier(level) { ); } -export function updateAvatarVolumesPref(playerSessionId, gainMultiplier, muted) { +export function updateAvatarVolumesPref(displayName, gainMultiplier, muted) { const avatarVoiceLevels = APP.store.state.preferences.avatarVoiceLevels || {}; - avatarVoiceLevels[playerSessionId] = { + avatarVoiceLevels[displayName] = { gainMultiplier, muted }; @@ -43,6 +43,6 @@ export function updateAvatarVolumesPref(playerSessionId, gainMultiplier, muted) }); } -export function getAvatarVolumePref(playerSessionId) { - return APP.store.state.preferences.avatarVoiceLevels?.[playerSessionId]; +export function getAvatarVolumePref(displayName) { + return APP.store.state.preferences.avatarVoiceLevels?.[displayName]; }