feat: screenshare fullscreen button + pip spotlight, fix screenshare view
- Remove revert-to-grid logic that was overriding EC's natural screenshare spotlight, causing fullscreen to show user avatars instead of the screen - Add fullscreen button to call controls (visible when screensharing) that requests fullscreen on the call embed container - Add FullscreenButton component with enter/exit SVG icons to Controls.tsx - PIP mode: sync setPipMode to CallControl; auto-enable spotlight when screenshare is active in pip so the screenshare fills the window - Make useCallControlState accept undefined control for safe use in CallEmbedProvider - Add package-lock.json to .gitignore (generated by local npm install) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -158,6 +158,56 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
|
||||
);
|
||||
}
|
||||
|
||||
const FullscreenIcon = () => (
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ExitFullscreenIcon = () => (
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 3H7v4H3v2h6V3zm6 0v6h6V7h-4V3h-2zM3 13v2h4v4h2v-6H3zm14 4v-4h2v6h-6v-2h4z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
type FullscreenButtonProps = {
|
||||
isFullscreen: boolean;
|
||||
onToggle: () => void;
|
||||
};
|
||||
export function FullscreenButton({ isFullscreen, onToggle }: FullscreenButtonProps) {
|
||||
return (
|
||||
<TooltipProvider
|
||||
position="Top"
|
||||
delay={500}
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text size="T200">{isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(anchorRef) => (
|
||||
<IconButton
|
||||
ref={anchorRef}
|
||||
variant="Surface"
|
||||
fill="Soft"
|
||||
radii="400"
|
||||
size="400"
|
||||
onClick={onToggle}
|
||||
aria-label={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
|
||||
aria-pressed={isFullscreen}
|
||||
outlined
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<ExitFullscreenIcon />
|
||||
) : (
|
||||
<FullscreenIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChatButton() {
|
||||
const [chat, setChat] = useAtom(callChatAtom);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user