feat(call): doubleclick on focused tile clears pin

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-05-12 18:50:29 +02:00
parent 187f8dc95a
commit c87d4e82d3
2 changed files with 12 additions and 0 deletions
@@ -83,6 +83,7 @@ export interface ParticipantTileProps {
size?: 'default' | 'small'; size?: 'default' | 'small';
focused?: boolean; focused?: boolean;
onClick?: () => void; onClick?: () => void;
onDoubleClick?: () => void;
onContextMenu?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void;
} }
@@ -102,6 +103,7 @@ export function CallParticipantTile(props: ParticipantTileProps) {
size = 'default', size = 'default',
focused = false, focused = false,
onClick, onClick,
onDoubleClick,
onContextMenu, onContextMenu,
} = props; } = props;
@@ -120,6 +122,7 @@ export function CallParticipantTile(props: ParticipantTileProps) {
return ( return (
<div <div
onClick={onClick} onClick={onClick}
onDoubleClick={onDoubleClick}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
className={ className={
'relative flex flex-col overflow-hidden rounded-[14px] border-[2px] bg-surface-3 transition-colors duration-150 ' + 'relative flex flex-col overflow-hidden rounded-[14px] border-[2px] bg-surface-3 transition-colors duration-150 ' +
@@ -917,6 +917,7 @@ function TileRender({
size, size,
focused, focused,
onClick, onClick,
onDoubleClick,
onContextMenu, onContextMenu,
}: { }: {
tile: Tile; tile: Tile;
@@ -927,6 +928,7 @@ function TileRender({
size?: 'default' | 'small'; size?: 'default' | 'small';
focused?: boolean; focused?: boolean;
onClick?: () => void; onClick?: () => void;
onDoubleClick?: () => void;
onContextMenu?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void;
}): JSX.Element { }): JSX.Element {
if (tile.kind === 'screen') { if (tile.kind === 'screen') {
@@ -939,6 +941,7 @@ function TileRender({
return ( return (
<div <div
onClick={onClick} onClick={onClick}
onDoubleClick={onDoubleClick}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
className={'h-full w-full [&>div]:h-full [&>div]:w-full ' + (onClick ? 'cursor-pointer' : '')} className={'h-full w-full [&>div]:h-full [&>div]:w-full ' + (onClick ? 'cursor-pointer' : '')}
> >
@@ -969,6 +972,7 @@ function TileRender({
{...(size ? { size } : {})} {...(size ? { size } : {})}
{...(focused ? { focused } : {})} {...(focused ? { focused } : {})}
{...(onClick ? { onClick } : {})} {...(onClick ? { onClick } : {})}
{...(onDoubleClick ? { onDoubleClick } : {})}
{...(onContextMenu ? { onContextMenu } : {})} {...(onContextMenu ? { onContextMenu } : {})}
/> />
); );
@@ -997,6 +1001,7 @@ function CallStage({
activeSpeakers={activeSpeakers} activeSpeakers={activeSpeakers}
remoteScreenShares={remoteScreenShares} remoteScreenShares={remoteScreenShares}
conversationMembers={conversationMembers} conversationMembers={conversationMembers}
onDoubleClick={() => onFocusTile(speaker.id)}
{...(onTileContextMenu {...(onTileContextMenu
? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(speaker, e) } ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(speaker, e) }
: {})} : {})}
@@ -1068,6 +1073,7 @@ function FocusedTile({
remoteScreenShares, remoteScreenShares,
conversationMembers, conversationMembers,
onContextMenu, onContextMenu,
onDoubleClick,
}: { }: {
tile: Tile; tile: Tile;
e2ee: boolean; e2ee: boolean;
@@ -1075,6 +1081,7 @@ function FocusedTile({
remoteScreenShares: StageProps['remoteScreenShares']; remoteScreenShares: StageProps['remoteScreenShares'];
conversationMembers: StageProps['conversationMembers']; conversationMembers: StageProps['conversationMembers'];
onContextMenu?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void;
onDoubleClick?: () => void;
}) { }) {
return ( return (
<div className="h-full [&>div]:h-full"> <div className="h-full [&>div]:h-full">
@@ -1086,6 +1093,7 @@ function FocusedTile({
conversationMembers={conversationMembers} conversationMembers={conversationMembers}
focused focused
{...(onContextMenu ? { onContextMenu } : {})} {...(onContextMenu ? { onContextMenu } : {})}
{...(onDoubleClick ? { onDoubleClick } : {})}
/> />
</div> </div>
); );
@@ -1226,6 +1234,7 @@ function FullscreenCall({
<div <div
className="relative min-h-0 flex-1 cursor-pointer p-4 pb-2 [&>div]:h-full [&>div]:w-full" className="relative min-h-0 flex-1 cursor-pointer p-4 pb-2 [&>div]:h-full [&>div]:w-full"
onClick={() => onFocusTile(speaker!.id)} onClick={() => onFocusTile(speaker!.id)}
onDoubleClick={() => onFocusTile(speaker!.id)}
title="Zurück zur Übersicht" title="Zurück zur Übersicht"
> >
<TileRender <TileRender