diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx index 059c0df..0ebed3a 100644 --- a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx +++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx @@ -1,4 +1,4 @@ -import { remote } from 'electron'; +import { ipcRenderer } from 'electron'; import React, { useCallback, useEffect, useState } from 'react'; import { H3, Card, Dialog, Button } from '@blueprintjs/core'; import { Row, Col } from 'react-flexbox-grid'; @@ -6,12 +6,8 @@ import { createStyles, makeStyles } from '@material-ui/core/styles'; import { useTranslation } from 'react-i18next'; import CloseOverlayButton from '../../CloseOverlayButton'; import PreviewGridList from './PreviewGridList'; -import DesktopCapturerSources from '../../../features/DesktopCapturerSourcesService'; import isWithReactRevealAnimations from '../../../utils/isWithReactRevealAnimations'; - -const desktopCapturerSourcesService = remote.getGlobal( - 'desktopCapturerSourcesService' -) as DesktopCapturerSources; +import { IpcEvents } from '../../../main/IpcEvents.enum'; const Zoom = require('react-reveal/Zoom'); const Fade = require('react-reveal/Fade'); @@ -62,37 +58,22 @@ export default function ChooseAppOrScreenOverlay( } = props; const classes = useStyles(); - const [ - screenViewSharingObjectsMap, - setScreenViewSharingObjectsMap, - ] = useState>(new Map()); + const [screenViewSharingIds, setScreenViewSharingIds] = useState( + [] + ); - const [ - appsWindowsViewSharingObjectsMap, - setAppsWindowsViewSharingObjectsMap, - ] = useState>(new Map()); + const [appWindowsViewSharingIds, setAppWindowsViewSharingIds] = useState< + string[] + >([]); - const handleRefreshSources = useCallback(() => { + const handleRefreshSources = useCallback(async () => { + const ids = await ipcRenderer.invoke(IpcEvents.GetDesktopSharingSourceIds, { + isEntireScreenToShareChosen, + }); if (isEntireScreenToShareChosen) { - const sourcesToShare = desktopCapturerSourcesService.getScreenSources(); - const screenViewMap = new Map(); - sourcesToShare.forEach((source) => { - screenViewMap.set(source.id, { - thumbnailUrl: source.thumbnail.toDataURL(), - name: source.name, - }); - }); - setScreenViewSharingObjectsMap(screenViewMap); + setScreenViewSharingIds(ids); } else { - const sourcesToShare = desktopCapturerSourcesService.getAppWindowSources(); - const appViewMap = new Map(); - sourcesToShare.forEach((source) => { - appViewMap.set(source.id, { - thumbnailUrl: source.thumbnail.toDataURL(), - name: source.name, - }); - }); - setAppsWindowsViewSharingObjectsMap(appViewMap); + setAppWindowsViewSharingIds(ids); } }, [isEntireScreenToShareChosen]); @@ -208,10 +189,10 @@ export default function ChooseAppOrScreenOverlay(
{ diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx index b55ab48..25759f5 100644 --- a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx +++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx @@ -1,5 +1,5 @@ +import React from 'react'; import { remote } from 'electron'; -import React, { useEffect, useState } from 'react'; import { Row, Col } from 'react-flexbox-grid'; import SharingSessionService from '../../../features/SharingSessionService'; import SharingSourcePreviewCard from '../../SharingSourcePreviewCard'; @@ -8,10 +8,8 @@ const sharingSessionService = remote.getGlobal( 'sharingSessionService' ) as SharingSessionService; -const EMPTY_VIEW_SHARING_OBJECTS_MAP = new Map(); - class PreviewGridListProps { - viewSharingObjectsMap = EMPTY_VIEW_SHARING_OBJECTS_MAP; + viewSharingIds: string[] = []; isEntireScreen = true; @@ -22,26 +20,11 @@ class PreviewGridListProps { export default function PreviewGridList(props: PreviewGridListProps) { const { - viewSharingObjectsMap, + viewSharingIds, isEntireScreen, handleNextEntireScreen, handleNextApplicationWindow, } = props; - const [showPreviewNamesMap, setShowPreviewNamesMap] = useState( - new Map() - ); - - useEffect(() => { - const map = new Map(); - if (viewSharingObjectsMap === EMPTY_VIEW_SHARING_OBJECTS_MAP) { - setShowPreviewNamesMap(map); - return; - } - [...viewSharingObjectsMap.keys()].forEach((id: string) => { - map.set(id, false); - }); - setShowPreviewNamesMap(map); - }, [viewSharingObjectsMap]); return ( - {[...showPreviewNamesMap.keys()].map((id) => { + {viewSharingIds.map((id) => { return ( void; resetPendingConnectionDevice: () => void; resetUserAllowedConnection: () => void; + connectedDevice: Device | null; } function getStepContent( @@ -25,7 +26,7 @@ function getStepContent( stepIndex: number, handleNextEntireScreen: () => void, handleNextApplicationWindow: () => void, - device: Device + connectedDevice: Device | null ) { switch (stepIndex) { case 0: @@ -47,7 +48,7 @@ function getStepContent( ); case 2: - return ; + return ; default: return 'Unknown stepIndex'; } @@ -59,7 +60,6 @@ function isConfirmStep(activeStep: number, steps: string[]) { export default function IntermediateStep(props: IntermediateStepProps) { const { t } = useTranslation(); - const [pendingConnectionDevice, setPendingConnectionDevice] = useState(); const { activeStep, @@ -70,19 +70,9 @@ export default function IntermediateStep(props: IntermediateStepProps) { handleNextApplicationWindow, resetPendingConnectionDevice, resetUserAllowedConnection, + connectedDevice, } = props; - useEffect(() => { - // eslint-disable-next-line promise/always-return - ipcRenderer - .invoke(IpcEvents.GetPendingConnectionDevice) - // eslint-disable-next-line promise/always-return - .then((device) => { - setPendingConnectionDevice(device); - }) - .catch((e) => console.error(e)); - }, []); - return ( - {pendingConnectionDevice && - getStepContent( - t, - activeStep, - handleNextEntireScreen, - handleNextApplicationWindow, - pendingConnectionDevice - )} - + {getStepContent( + t, + activeStep, + handleNextEntireScreen, + handleNextApplicationWindow, + connectedDevice + )} { // eslint-disable-next-line no-nested-ternary process.env.NODE_ENV === 'production' && diff --git a/app/containers/DeskreenStepper.tsx b/app/containers/DeskreenStepper.tsx index 6ddcb3d..6ef6a99 100644 --- a/app/containers/DeskreenStepper.tsx +++ b/app/containers/DeskreenStepper.tsx @@ -239,11 +239,9 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { handleBack={handleBack} handleNextEntireScreen={handleNextEntireScreen} handleNextApplicationWindow={handleNextApplicationWindow} - resetPendingConnectionDevice={ - () => setPendingConnectionDevice(null) - // eslint-disable-next-line react/jsx-curly-newline - } + resetPendingConnectionDevice={() => setPendingConnectionDevice(null)} resetUserAllowedConnection={() => setIsUserAllowedConnection(false)} + connectedDevice={pendingConnectionDevice} />
); @@ -255,6 +253,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { handleBack, handleNextEntireScreen, handleNextApplicationWindow, + pendingConnectionDevice, ]); const renderStepLabelContent = useCallback( diff --git a/app/main/IpcEvents.enum.ts b/app/main/IpcEvents.enum.ts index 263e849..01acbbf 100644 --- a/app/main/IpcEvents.enum.ts +++ b/app/main/IpcEvents.enum.ts @@ -18,4 +18,5 @@ export enum IpcEvents { StartSharingOnWaitingForConnectionSharingSession = 'start-sharing-on-waiting-for-connection-sharing-session', GetPendingConnectionDevice = 'get-pending-connection-device', GetWaitingForConnectionSharingSessionRoomId = 'get-waiting-for-connection-sharing-session-room-id', + GetDesktopSharingSourceIds = 'get-desktop-sharing-source-ids', } diff --git a/app/main/ipcMainHandlers.ts b/app/main/ipcMainHandlers.ts index 2d38ae2..1748281 100644 --- a/app/main/ipcMainHandlers.ts +++ b/app/main/ipcMainHandlers.ts @@ -246,4 +246,18 @@ export default function initIpcMainHandlers( return getDeskreenGlobal().sharingSessionService .waitingForConnectionSharingSession?.roomID; }); + + ipcMain.handle( + IpcEvents.GetDesktopSharingSourceIds, + (_, { isEntireScreenToShareChosen }) => { + if (isEntireScreenToShareChosen === true) { + return getDeskreenGlobal() + .desktopCapturerSourcesService.getScreenSources() + .map((source) => source.id); + } + return getDeskreenGlobal() + .desktopCapturerSourcesService.getAppWindowSources() + .map((source) => source.id); + } + ); }