byGalax/ChatApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(call): left-click toggles pin, drop manual focus mode

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-05-12 18:47:10 +02:00
parent f612c1bb50
commit 187f8dc95a
1 changed files with 4 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/InCallPanel.tsx
+4 -18
View File
@@ -27,7 +27,7 @@ import { CallControls } from './CallControls';
import { CallParticipantTile, type TileConnectionQuality } from './CallParticipantTile'; import { CallParticipantTile, type TileConnectionQuality } from './CallParticipantTile';
import { CallStatsOverlay } from './CallStatsOverlay'; import { CallStatsOverlay } from './CallStatsOverlay';
import { ScreenSharePickerModal } from './ScreenSharePickerModal'; import { ScreenSharePickerModal } from './ScreenSharePickerModal';
import { FocusIcon, GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons'; import { GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons';
import { ParticipantsPopover, type ParticipantRow } from './ParticipantsPopover'; import { ParticipantsPopover, type ParticipantRow } from './ParticipantsPopover';
import { ParticipantVolumeMenu } from './ParticipantVolumeMenu'; import { ParticipantVolumeMenu } from './ParticipantVolumeMenu';
import { ScreenShareContextMenu } from './ScreenShareContextMenu'; import { ScreenShareContextMenu } from './ScreenShareContextMenu';
@@ -557,22 +557,13 @@ export function InCallPanel({ conversation }: Props) {
<CallStage <CallStage
tiles={tiles} tiles={tiles}
speaker={bigTile} speaker={bigTile}
mode={callMode} mode={stageLayout.kind === 'equal-grid' ? 'grid' : 'focus'}
activeSpeakers={activeSpeakers} activeSpeakers={activeSpeakers}
e2ee={isE2EEActive} e2ee={isE2EEActive}
remoteScreenShares={remoteScreenShares} remoteScreenShares={remoteScreenShares}
conversationMembers={conversation.members} conversationMembers={conversation.members}
onFocusTile={(id) => { onFocusTile={(id) => {
// Discord-style toggle: clicking the already-focused tile setFocusedId(focusedId === id ? null : id);
// collapses back to grid; clicking another tile swaps focus;
// clicking any tile in grid mode focuses it.
if (callMode === 'focus' && focusedId === id) {
setFocusedId(null);
setCallMode('grid');
return;
}
setFocusedId(id);
if (callMode === 'grid') setCallMode('focus');
}} }}
onTileContextMenu={openTileContextMenu} onTileContextMenu={openTileContextMenu}
compact compact
@@ -590,9 +581,7 @@ export function InCallPanel({ conversation }: Props) {
y={volumeMenu.y} y={volumeMenu.y}
pinned={focusedId === volumeMenu.tileId} pinned={focusedId === volumeMenu.tileId}
onTogglePin={() => { onTogglePin={() => {
const isPinned = focusedId === volumeMenu.tileId; setFocusedId(focusedId === volumeMenu.tileId ? null : volumeMenu.tileId);
setFocusedId(isPinned ? null : volumeMenu.tileId);
if (!isPinned && callMode === 'grid') setCallMode('focus');
}} }}
{...(volumeMenu.self ? { renderVolume: false } : {})} {...(volumeMenu.self ? { renderVolume: false } : {})}
{...(volumeMenu.self {...(volumeMenu.self
@@ -858,9 +847,6 @@ function ModeToggles({
<ModeButton active={mode === 'grid'} onClick={() => onChange('grid')} label="Grid"> <ModeButton active={mode === 'grid'} onClick={() => onChange('grid')} label="Grid">
<GridIcon className="h-4 w-4" /> <GridIcon className="h-4 w-4" />
</ModeButton> </ModeButton>
<ModeButton active={mode === 'focus'} onClick={() => onChange('focus')} label="Fokus">
<FocusIcon className="h-4 w-4" />
</ModeButton>
<ModeButton <ModeButton
active={mode === 'fullscreen'} active={mode === 'fullscreen'}
onClick={() => onChange('fullscreen')} onClick={() => onChange('fullscreen')}