import { Box, Button, Callout, Label, Tabs, Scrollable, PaletteStyleTag, } from '@rocket.chat/fuselage'; import type { DesktopCapturer, DesktopCapturerSource, SourcesOptions, } from 'electron'; import { ipcRenderer } from 'electron'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Dialog } from '../ui/components/Dialog'; const desktopCapturer: DesktopCapturer = { getSources: (opts: SourcesOptions) => ipcRenderer.invoke('desktop-capturer-get-sources', [opts]), }; interface IScreenSharePickerProps { onMounted?: (setVisible: (visible: boolean) => void) => void; responseChannel?: string; permissionChannel?: string; openUrlChannel?: string; includeTheme?: boolean; } export function ScreenSharePicker({ onMounted, responseChannel = 'video-call-window/screen-sharing-source-responded', permissionChannel = 'video-call-window/screen-recording-is-permission-granted', openUrlChannel = 'video-call-window/open-url', includeTheme = true, }: IScreenSharePickerProps = {}) { const { t } = useTranslation(); const [visible, setVisible] = useState(false); const [sources, setSources] = useState([]); const [currentTab, setCurrentTab] = useState<'screen' | 'window'>('screen'); const [selectedSourceId, setSelectedSourceId] = useState(null); const [ isScreenRecordingPermissionGranted, setIsScreenRecordingPermissionGranted, ] = useState(false); // Track whether an IPC response has been sent for the current picker session. // This ensures cancellation is always sent regardless of how the dialog is dismissed // (click outside, ESC key, programmatic close, etc.). const responseSentRef = useRef(false); const wasVisibleRef = useRef(false); const fetchSources = useCallback(async (): Promise => { try { const sources = await desktopCapturer.getSources({ types: ['window', 'screen'], }); // Filter out sources that are not capturable const filteredSources = sources .filter((source) => { // Only check for basic validity - thumbnail validation is already done by IPC handler if (!source.name || source.name.trim() === '') { return false; } return true; }) .sort((a, b) => a.name.localeCompare(b.name)); setSources(filteredSources); // If the currently selected source is no longer available, clear the selection if ( selectedSourceId && !filteredSources.find((s) => s.id === selectedSourceId) ) { console.log( 'Previously selected source no longer available, clearing selection' ); setSelectedSourceId(null); } } catch (error) { console.error('Error fetching screen sharing sources:', error); // Keep the previous sources list instead of clearing it — a transient // enumeration failure shouldn't blank out an otherwise valid picker. } }, [selectedSourceId]); useEffect(() => { const checkScreenRecordingPermission = async () => { const result = await ipcRenderer.invoke(permissionChannel); setIsScreenRecordingPermissionGranted(result); }; checkScreenRecordingPermission().catch(console.error); }, [visible, permissionChannel]); useEffect(() => { if (onMounted) { onMounted(setVisible); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Safety net: if the picker closes without handleShare or handleClose having sent a // response (e.g. due to dialog close event not firing correctly), send cancellation. useEffect(() => { if (visible) { responseSentRef.current = false; wasVisibleRef.current = true; } else if (wasVisibleRef.current) { wasVisibleRef.current = false; if (!responseSentRef.current) { responseSentRef.current = true; ipcRenderer.send(responseChannel, null); } } }, [visible, responseChannel]); useEffect(() => { if (!visible) { return undefined; } fetchSources(); const timer = setInterval(() => { fetchSources(); }, 3000); return () => { clearInterval(timer); }; }, [visible, fetchSources]); const handleScreenSharingSourceClick = (id: string) => () => { setSelectedSourceId(id); }; const handleShare = (): void => { if (selectedSourceId) { // Validate that the selected source still exists in our current sources list const selectedSource = sources.find((s) => s.id === selectedSourceId); if (!selectedSource) { console.error('Selected source no longer available:', selectedSourceId); // Refresh sources and clear selection fetchSources(); setSelectedSourceId(null); return; } // Additional validation before sharing if (selectedSource.thumbnail.isEmpty()) { console.error( 'Selected source has empty thumbnail, cannot share:', selectedSourceId ); setSelectedSourceId(null); return; } console.log('Sharing screen source:', { id: selectedSource.id, name: selectedSource.name, }); responseSentRef.current = true; setVisible(false); ipcRenderer.send(responseChannel, selectedSourceId); } }; const handleClose = (): void => { if (responseSentRef.current) { // Response already sent (e.g. handleShare ran first and triggered onclose via setVisible) return; } responseSentRef.current = true; setVisible(false); ipcRenderer.send(responseChannel, null); }; // Filter sources based on the current tab const filteredSources = sources.filter((source) => { if (currentTab === 'screen') { return source.id.includes('screen'); } return source.id.includes('window'); }); return ( <> {includeTheme && } ); }