From ef65b070e895a3d1a699627e3ad82ec165954dfb Mon Sep 17 00:00:00 2001 From: Jean Brito Date: Wed, 22 Mar 2023 11:29:05 -0300 Subject: [PATCH] chore: Check screen recording permission (#2623) * chore: add cancel button to screen picker dialog * add check Screen Recording Permission to IPC * add Callout when the permission os denied * filter not available screens --- src/ipc/channels.ts | 1 + src/public/video-call-window.html | 21 ++-- src/videoCallWindow/ipc.ts | 9 ++ src/videoCallWindow/screenSharePicker.tsx | 112 ++++++++++++++++------ 4 files changed, 106 insertions(+), 37 deletions(-) diff --git a/src/ipc/channels.ts b/src/ipc/channels.ts index 1eaef32f2d..4cee7f7f31 100644 --- a/src/ipc/channels.ts +++ b/src/ipc/channels.ts @@ -27,6 +27,7 @@ type ChannelToArgsMap = { 'video-call-window/web-contents-id': (webContentsId: number) => void; 'video-call-window/open-screen-picker': () => void; 'video-call-window/screen-sharing-source-responded': (source: string) => void; + 'video-call-window/screen-recording-is-permission-granted': () => boolean; 'jitsi-desktop-capturer-get-sources': ( options: Electron.SourcesOptions ) => Electron.DesktopCapturerSource[]; diff --git a/src/public/video-call-window.html b/src/public/video-call-window.html index e0226bbbd9..48c8016d4e 100644 --- a/src/public/video-call-window.html +++ b/src/public/video-call-window.html @@ -1,22 +1,25 @@ + Rocket.Chat + - +
- + + \ No newline at end of file diff --git a/src/videoCallWindow/ipc.ts b/src/videoCallWindow/ipc.ts index 7a20031cb4..808b37f092 100644 --- a/src/videoCallWindow/ipc.ts +++ b/src/videoCallWindow/ipc.ts @@ -7,6 +7,7 @@ import { ipcMain, WebContents, screen, + systemPreferences, } from 'electron'; import { handle } from '../ipc/main'; @@ -19,6 +20,14 @@ export const handleDesktopCapturerGetSources = () => { }; export const startVideoCallWindowHandler = (): void => { + handle( + 'video-call-window/screen-recording-is-permission-granted', + async () => { + const permission = systemPreferences.getMediaAccessStatus('screen'); + return permission === 'granted'; + } + ); + handle('video-call-window/open-window', async (_event, url) => { console.log('[Rocket.Chat Desktop] open-internal-video-chat-window', url); const validUrl = new URL(url); diff --git a/src/videoCallWindow/screenSharePicker.tsx b/src/videoCallWindow/screenSharePicker.tsx index 96e4a53cc6..cddaf8fc0d 100644 --- a/src/videoCallWindow/screenSharePicker.tsx +++ b/src/videoCallWindow/screenSharePicker.tsx @@ -1,4 +1,10 @@ -import { Box, Margins } from '@rocket.chat/fuselage'; +import { + Box, + Button, + Callout, + Margins, + Scrollable, +} from '@rocket.chat/fuselage'; import { DesktopCapturer, DesktopCapturerSource, @@ -18,14 +24,32 @@ const desktopCapturer: DesktopCapturer = { export function ScreenSharePicker() { const [visible, setVisible] = useState(false); const [sources, setSources] = useState([]); + const [ + isScreenRecordingPermissionGranted, + setIsScreenRecordingPermissionGranted, + ] = useState(false); const fetchSources = async (): Promise => { const sources = await desktopCapturer.getSources({ types: ['window', 'screen'], }); - setSources(sources); + const filteredSources = sources.filter( + (source) => source.thumbnail.isEmpty() === false + ); + setSources(filteredSources); }; + useEffect(() => { + const checkScreenRecordingPermission = async () => { + const result = await ipcRenderer.invoke( + 'video-call-window/screen-recording-is-permission-granted' + ); + setIsScreenRecordingPermissionGranted(result); + }; + + checkScreenRecordingPermission().catch(console.error); + }, [visible]); + useEffect(() => { fetchSources(); }, []); @@ -62,40 +86,72 @@ export function ScreenSharePicker() { return ( - - Select a screen to share - - - {sources.map(({ id, name, thumbnail }) => ( - + + The screen sharing feature requires screen recording permissions + to be granted. Please grant screen recording permissions in your + system settings and try again. +
+ Open System Preferences - Security & Privacy - + Screen Recording and check + Rocket.Chat + + + )} + + + Select a screen to share + + + + + - - - - {name} - - ))} - + {sources.map(({ id, name, thumbnail }) => ( + + + + + {name} + + ))} + + + + + + );