fix(voice): surface stream audio volume for screen-share viewers (#2095)

This commit is contained in:
Hampus
2026-08-29 22:05:06 +02:00
committed by GitHub
parent ce91ff95ab
commit dbc63e9ef7
4 changed files with 12 additions and 7 deletions
@@ -199,10 +199,6 @@ const RELATIONSHIP_ACTIONS_DESCRIPTOR = msg({
message: 'Relationship',
comment: 'Voice participant context menu submenu label for friend and block actions.',
});
const STREAM_CONTROLS_DESCRIPTOR = msg({
message: 'Stream controls',
comment: 'Voice participant context menu submenu label for incoming screen share audio controls.',
});
const USER_ACTIONS_DESCRIPTOR = msg({
message: 'User actions',
comment: 'Voice participant context menu submenu label for lower-frequency profile and communication actions.',
@@ -492,6 +488,9 @@ export function useVoiceParticipantMenuData(options: VoiceParticipantMenuDataOpt
if (streamRootActions.length > 0) {
menuGroups.push({items: streamRootActions});
}
if (streamControlActions.length > 0) {
menuGroups.push({items: streamControlActions});
}
const primaryActions: Array<MenuItemType> = [];
primaryActions.push({
icon: (
@@ -1384,7 +1383,6 @@ export function useVoiceParticipantMenuData(options: VoiceParticipantMenuDataOpt
TextCopyCommands.copy(i18n, user.id, true);
},
});
addSecondarySubmenu(i18n._(STREAM_CONTROLS_DESCRIPTOR), streamControlActions);
addSecondarySubmenu(i18n._(MEDIA_CONTROLS_DESCRIPTOR), mediaActions);
addSecondarySubmenu(i18n._(DEVICE_CONTROLS_DESCRIPTOR), deviceActions);
addSecondarySubmenu(i18n._(DISPLAY_OPTIONS_DESCRIPTOR), displayActions);
@@ -9,7 +9,9 @@ import {
} from '@app/features/voice/components/CallVolumeState';
import {MediaVerticalVolumeControl} from '@app/features/voice/components/media_player/components/MediaVerticalVolumeControl';
import VoiceSettings from '@app/features/voice/state/VoiceSettings';
import {VOICE_OUTPUT_VOLUME_DESCRIPTOR} from '@app/features/voice/utils/VoiceMessageDescriptors';
import {VOICE_VOLUME_MAX_SLIDER_VOLUME} from '@app/features/voice/utils/VoiceVolumeUtils';
import {useLingui} from '@lingui/react/macro';
import {observer} from 'mobx-react-lite';
import type React from 'react';
import {useCallback, useEffect, useRef} from 'react';
@@ -25,6 +27,7 @@ export const CallVolumeControl: React.FC<CallVolumeControlProps> = observer(func
position = 'above',
iconSize = 18,
}) {
const {i18n} = useLingui();
const outputVolume = VoiceSettings.outputVolume;
const lastNonZeroVolumeRef = useRef(resolveLastNonZeroCallVolume(outputVolume, 0));
useEffect(() => {
@@ -50,6 +53,7 @@ export const CallVolumeControl: React.FC<CallVolumeControlProps> = observer(func
iconSize={iconSize}
className={className}
position={position}
ariaLabel={i18n._(VOICE_OUTPUT_VOLUME_DESCRIPTOR)}
data-flx="voice.call-volume-control.media-vertical-volume-control"
/>
);
@@ -615,7 +615,7 @@ const VoiceParticipantTileInner = observer(function VoiceParticipantTileInner({
const participantDisplayName =
(participantUser ? NicknameUtils.getNickname(participantUser, guildId, channelId) : participant.name) ||
i18n._(UNKNOWN_USER_DESCRIPTOR);
const showStreamAudioControls = isScreenShare && !isOwnScreenShare && isWatching;
const showStreamAudioControls = isScreenShare && !isOwnScreenShare && isWatching && hasScreenShareAudio;
const viewerStreamCount = graphViewerStreamKeys.length;
const addStreamTooltipText = plural(
{count: viewerStreamCount},
@@ -49,6 +49,7 @@ interface MediaVerticalVolumeControlProps {
className?: string;
position?: 'above' | 'below';
maxVolume?: number;
ariaLabel?: string;
}
function getVolumeIcon(volume: number, isMuted: boolean) {
@@ -75,6 +76,7 @@ export function MediaVerticalVolumeControl({
className,
position = 'above',
maxVolume = 1,
ariaLabel,
}: MediaVerticalVolumeControlProps) {
const {i18n} = useLingui();
const buttonRef = useRef<HTMLButtonElement>(null);
@@ -286,7 +288,8 @@ export function MediaVerticalVolumeControl({
<div
className={clsx(styles.container, className)}
role="group"
aria-label={i18n._(VOLUME_CONTROL_DESCRIPTOR)}
aria-label={ariaLabel ?? i18n._(VOLUME_CONTROL_DESCRIPTOR)}
title={ariaLabel}
data-flx="voice.media-player.media-vertical-volume-control.container"
>
{popoutElement}