diff --git a/src/public/video-call-window.html b/src/public/video-call-window.html index 48c8016d4..f55eb09a1 100644 --- a/src/public/video-call-window.html +++ b/src/public/video-call-window.html @@ -1,25 +1,24 @@ + + + + Rocket.Chat + + + + - - - - Rocket.Chat - - - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/src/videoCallWindow/screenSharePicker.tsx b/src/videoCallWindow/screenSharePicker.tsx index 1e2e21b39..78e45cf6a 100644 --- a/src/videoCallWindow/screenSharePicker.tsx +++ b/src/videoCallWindow/screenSharePicker.tsx @@ -2,7 +2,9 @@ import { Box, Button, Callout, + Label, Margins, + PaletteStyleTag, Scrollable, } from '@rocket.chat/fuselage'; import type { @@ -14,7 +16,6 @@ import { ipcRenderer } from 'electron'; import { useEffect, useState } from 'react'; import { Dialog } from '../ui/components/Dialog'; -import { Source } from '../ui/components/ScreenSharingDialog/styles'; const desktopCapturer: DesktopCapturer = { getSources: (opts: SourcesOptions) => @@ -24,6 +25,7 @@ const desktopCapturer: DesktopCapturer = { export function ScreenSharePicker() { const [visible, setVisible] = useState(false); const [sources, setSources] = useState([]); + const [hoveredSourceId, setHoveredSourceId] = useState(null); const [ isScreenRecordingPermissionGranted, setIsScreenRecordingPermissionGranted, @@ -33,9 +35,10 @@ export function ScreenSharePicker() { const sources = await desktopCapturer.getSources({ types: ['window', 'screen'], }); - const filteredSources = sources.filter( - (source) => source.thumbnail.isEmpty() === false - ); + const filteredSources = sources + .filter((source) => !source.thumbnail.isEmpty()) + .sort((a, b) => a.name.localeCompare(b.name)); + if (filteredSources.length === 0) return; setSources(filteredSources); }; @@ -67,7 +70,7 @@ export function ScreenSharePicker() { const timer = setInterval(() => { fetchSources(); - }, 2000); + }, 3000); return () => { clearInterval(timer); @@ -84,21 +87,37 @@ export function ScreenSharePicker() { ipcRenderer.send('video-call-window/screen-sharing-source-responded', null); }; + const handleMouseEnter = (id: string) => { + setHoveredSourceId(id); + }; + + const handleMouseLeave = () => { + setHoveredSourceId(null); + }; + return ( - - - {!isScreenRecordingPermissionGranted && ( - + + + + + {!isScreenRecordingPermissionGranted && ( The screen sharing feature requires screen recording permissions to be granted. Please grant screen recording permissions in your @@ -108,52 +127,72 @@ export function ScreenSharePicker() { Screen Recording and check Rocket.Chat + )} + + + Select a screen to share + - )} - - - Select a screen to share - - - - - - {sources.map(({ id, name, thumbnail }) => ( - + + + + {sources.map(({ id, name, thumbnail }) => ( handleMouseEnter(id)} + onMouseLeave={handleMouseLeave} + style={{ + cursor: 'pointer', + }} + borderRadius='x8' + border={ + hoveredSourceId === id + ? '2px solid var(--rcx-color-stroke-light)' + : '2px solid transparent' + } > + flexGrow={1} + display='flex' + alignItems='center' + justifyContent='center' + content='center' + > + + + - {name} - - ))} - - - - - - - - + ))} + + + + + + + + + ); } diff --git a/src/videoCallWindow/videoCallWindow.tsx b/src/videoCallWindow/videoCallWindow.tsx index 7349dfc40..d3d42d58f 100644 --- a/src/videoCallWindow/videoCallWindow.tsx +++ b/src/videoCallWindow/videoCallWindow.tsx @@ -1,3 +1,4 @@ +import { Box } from '@rocket.chat/fuselage'; import { ipcRenderer } from 'electron'; import { useEffect, useRef, useState } from 'react'; @@ -20,7 +21,7 @@ function VideoCallWindow() { }, [videoCallUrl]); return ( -
+ -
+ ); }