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:
2026-05-24 23:16:43 -04:00
parent 0d303169f2
commit 0ebe24be20
6 changed files with 106 additions and 13 deletions
+18 -1
View File
@@ -35,7 +35,7 @@ import {
useCallStart,
} from '../hooks/useCallEmbed';
import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
import { CallEmbed } from '../plugins/call';
import { CallEmbed, useCallControlState } from '../plugins/call';
import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
import { useMatrixClient } from '../hooks/useMatrixClient';
@@ -421,6 +421,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
const pipMode = callActive && !inCallRoom;
const { navigateRoom } = useRoomNavigate();
const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
// Sync pip mode into CallControl so it can adjust behavior accordingly
useEffect(() => {
if (!callEmbed) return;
callEmbed.control.setPipMode(!!pipMode);
}, [pipMode, callEmbed]);
// When entering pip with screenshare active (or screenshare starts while in pip),
// enable spotlight so the screenshare fills the pip window
useEffect(() => {
if (!pipMode || !callEmbed || !pipScreenshare) return;
if (!callEmbed.control.spotlight) {
callEmbed.control.toggleSpotlight();
}
}, [pipMode, pipScreenshare, callEmbed]);
const theme = useTheme();
const isDark = theme.kind === ThemeKind.Dark;
const [chatBackground] = useSetting(settingsAtom, 'chatBackground');