From c2c0fdb445e60eb2f30b6c62c70fb913206c43ad Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Thu, 24 Sep 2026 14:04:05 +0200
Subject: [PATCH] fix(app): make corner volume control the focused stream
 (#2928)

---
 .../components/VoiceCallCornerControls.tsx    |  9 +++++-
 .../voice/components/VoiceCallView.tsx        | 30 ++++++++++---------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/fluxer_app/src/features/voice/components/VoiceCallCornerControls.tsx b/fluxer_app/src/features/voice/components/VoiceCallCornerControls.tsx
index 99a8ab8a1..87304bf26 100644
--- a/fluxer_app/src/features/voice/components/VoiceCallCornerControls.tsx
+++ b/fluxer_app/src/features/voice/components/VoiceCallCornerControls.tsx
@@ -24,6 +24,7 @@ interface VoiceCallCornerControlsProps {
 	fullscreenLabel: string;
 	fullscreenIcon: Icon;
 	onToggleFullscreen: () => void;
+	volumeControl?: React.ReactNode;
 }
 
 export const VoiceCallCornerControls: React.FC<VoiceCallCornerControlsProps> = ({
@@ -36,6 +37,7 @@ export const VoiceCallCornerControls: React.FC<VoiceCallCornerControlsProps> = (
 	fullscreenLabel,
 	fullscreenIcon,
 	onToggleFullscreen,
+	volumeControl,
 }) => {
 	const {i18n} = useLingui();
 	const PopOutIcon = useMemo(() => {
@@ -52,7 +54,12 @@ export const VoiceCallCornerControls: React.FC<VoiceCallCornerControlsProps> = (
 	}, []);
 	return (
 		<div className={wrapClassName} data-flx="voice.voice-call-corner-controls.wrap">
-			<CallVolumeControl className={buttonClassName} data-flx="voice.voice-call-corner-controls.call-volume-control" />
+			{volumeControl ?? (
+				<CallVolumeControl
+					className={buttonClassName}
+					data-flx="voice.voice-call-corner-controls.call-volume-control"
+				/>
+			)}
 			{showPopout && onPopOut && (
 				<ChannelHeaderIcon
 					icon={PopOutIcon}
diff --git a/fluxer_app/src/features/voice/components/VoiceCallView.tsx b/fluxer_app/src/features/voice/components/VoiceCallView.tsx
index 71fd2a918..640ad383e 100644
--- a/fluxer_app/src/features/voice/components/VoiceCallView.tsx
+++ b/fluxer_app/src/features/voice/components/VoiceCallView.tsx
@@ -627,20 +627,6 @@ const VoiceCallViewInner = observer(
 									{connectionStateText}
 								</div>
 							)}
-							{isFocusedOnScreenShare && focusedStreamKey && hasFocusedStreamAudio && canControlFocusedStreamVolume && (
-								<MediaVerticalVolumeControl
-									volume={focusedStreamVolume / 100}
-									isMuted={isFocusedStreamMuted}
-									maxVolume={VOICE_VOLUME_MAX_SLIDER_VOLUME}
-									onVolumeChange={handleFocusedStreamVolumeChange}
-									onToggleMute={handleFocusedStreamToggleMute}
-									iconSize={18}
-									className={styles.voiceHeaderIconButton}
-									position="below"
-									ariaLabel={i18n._(STREAM_VOLUME_DESCRIPTOR)}
-									data-flx="voice.voice-call-view.voice-call-view-inner.hud-stream-volume-control"
-								/>
-							)}
 							{statsButton}
 							{isMobile && (
 								<ChannelHeaderIcon
@@ -712,6 +698,22 @@ const VoiceCallViewInner = observer(
 						fullscreenLabel={fullscreenButtonLabel}
 						fullscreenIcon={FullscreenButtonIcon}
 						onToggleFullscreen={handleToggleVoiceCallAppFullscreen}
+						volumeControl={
+							isFocusedOnScreenShare && focusedStreamKey && hasFocusedStreamAudio && canControlFocusedStreamVolume ? (
+								<MediaVerticalVolumeControl
+									volume={focusedStreamVolume / 100}
+									isMuted={isFocusedStreamMuted}
+									maxVolume={VOICE_VOLUME_MAX_SLIDER_VOLUME}
+									onVolumeChange={handleFocusedStreamVolumeChange}
+									onToggleMute={handleFocusedStreamToggleMute}
+									iconSize={18}
+									className={styles.voiceHeaderIconButton}
+									position="above"
+									ariaLabel={i18n._(STREAM_VOLUME_DESCRIPTOR)}
+									data-flx="voice.voice-call-view.voice-call-view-inner.stream-volume-control"
+								/>
+							) : undefined
+						}
 						data-flx="voice.voice-call-view.voice-call-view-inner.voice-call-corner-controls"
 					/>
 					{isMobile && (