Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-21 00:28:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show a different icon for participants that you've muted

Browse Source 
As a non-intrusive way to help you remember when you've locally muted a participant (so you're less likely to be confused about not hearing their audio), we can show a different icon on the tile.
This commit is contained in:
Robin 2024-11-13 11:08:16 -05:00
parent 3d096426be
commit 9eae1f4145
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/en-GB/app.json
View File

@ -192,6 +192,7 @@
"collapse": "Collapse", "collapse": "Collapse",
"expand": "Expand", "expand": "Expand",
"mute_for_me": "Mute for me", "mute_for_me": "Mute for me",
"muted_for_me": "Muted for me",
"volume": "Volume" "volume": "Volume"
} }
} }

22
src/tile/GridTile.tsx
View File

@ -26,6 +26,7 @@ import {
VisibilityOnIcon, VisibilityOnIcon,
UserProfileIcon, UserProfileIcon,
ExpandIcon, ExpandIcon,
VolumeOffSolidIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons"; } from "@vector-im/compound-design-tokens/assets/web/icons";
import { import {
ContextMenu, ContextMenu,
@ -62,6 +63,7 @@ interface TileProps {
interface UserMediaTileProps extends TileProps { interface UserMediaTileProps extends TileProps {
vm: UserMediaViewModel; vm: UserMediaViewModel;
mirror: boolean; mirror: boolean;
locallyMuted: boolean;
menuStart?: ReactNode; menuStart?: ReactNode;
menuEnd?: ReactNode; menuEnd?: ReactNode;
} }
@ -71,6 +73,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
{ {
vm, vm,
showSpeakingIndicators, showSpeakingIndicators,
locallyMuted,
menuStart, menuStart,
menuEnd, menuEnd,
className, className,
@ -96,7 +99,16 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
); );
const { raisedHands, lowerHand, reactions } = useReactions(); 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 [menuOpen, setMenuOpen] = useState(false);
const menu = ( const menu = (
@ -134,11 +146,11 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
[styles.handRaised]: !showSpeaking && !!handRaised, [styles.handRaised]: !showSpeaking && !!handRaised,
})} })}
nameTagLeadingIcon={ nameTagLeadingIcon={
<MicIcon <AudioIcon
width={20} width={20}
height={20} height={20}
aria-label={audioEnabled ? t("microphone_on") : t("microphone_off")} aria-label={audioIconLabel}
data-muted={!audioEnabled} data-muted={locallyMuted || !audioEnabled}
className={styles.muteIcon} className={styles.muteIcon}
/> />
} }
@ -199,6 +211,7 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
<UserMediaTile <UserMediaTile
ref={ref} ref={ref}
vm={vm} vm={vm}
locallyMuted={false}
mirror={mirror} mirror={mirror}
menuStart={ menuStart={
<ToggleMenuItem <ToggleMenuItem
@ -255,6 +268,7 @@ const RemoteUserMediaTile = forwardRef<
<UserMediaTile <UserMediaTile
ref={ref} ref={ref}
vm={vm} vm={vm}
locallyMuted={locallyMuted}
mirror={false} mirror={false}
menuStart={ menuStart={
<> <>