diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index dc1b6010..ca91d517 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -192,6 +192,7 @@ "collapse": "Collapse", "expand": "Expand", "mute_for_me": "Mute for me", + "muted_for_me": "Muted for me", "volume": "Volume" } } diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index 12f041e2..6a7de733 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -26,6 +26,7 @@ import { VisibilityOnIcon, UserProfileIcon, ExpandIcon, + VolumeOffSolidIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { ContextMenu, @@ -62,6 +63,7 @@ interface TileProps { interface UserMediaTileProps extends TileProps { vm: UserMediaViewModel; mirror: boolean; + locallyMuted: boolean; menuStart?: ReactNode; menuEnd?: ReactNode; } @@ -71,6 +73,7 @@ const UserMediaTile = forwardRef( { vm, showSpeakingIndicators, + locallyMuted, menuStart, menuEnd, className, @@ -96,7 +99,16 @@ const UserMediaTile = forwardRef( ); const { raisedHands, lowerHand, reactions } = useReactions(); - const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon; + const AudioIcon = locallyMuted + ? VolumeOffSolidIcon + : audioEnabled + ? MicOnSolidIcon + : MicOffSolidIcon; + const audioIconLabel = locallyMuted + ? t("video_tile.muted_for_me") + : audioEnabled + ? t("microphone_on") + : t("microphone_off"); const [menuOpen, setMenuOpen] = useState(false); const menu = ( @@ -134,11 +146,11 @@ const UserMediaTile = forwardRef( [styles.handRaised]: !showSpeaking && !!handRaised, })} nameTagLeadingIcon={ - } @@ -199,6 +211,7 @@ const LocalUserMediaTile = forwardRef(