feat(screen-share): let users choose which screen or window to share

public/locales/en/translations.json

@@ -994,6 +994,13 @@
     "Placeholder": "Search contact or dial number...",
     "Call": "Call"
   },
+  "ScreenShare": {
+    "Title": "Choose what to share",
+    "Entire screen": "Entire screen",
+    "Screen": "Screen {{number}}",
+    "Window": "Window",
+    "Share": "Share"
+  },
   "Errors": {
     "browser_permissions": "Browser permissions error",
     "user_permissions": "Media permissions error",

public/locales/it/translations.json

@@ -994,6 +994,13 @@
     "Placeholder": "Cerca contatto o componi numero...",
     "Call": "Chiama"
   },
+  "ScreenShare": {
+    "Title": "Scegli cosa condividere",
+    "Entire screen": "Schermo intero",
+    "Screen": "Schermo {{number}}",
+    "Window": "Finestra",
+    "Share": "Condividi"
+  },
   "Errors": {
     "browser_permissions": "Errore nei permessi del browser",
     "user_permissions": "Errore nei permessi dei media",

src/main/classes/controllers/ScreenSharePickerController.ts

@@ -0,0 +1,211 @@
+import {
+  BrowserWindow,
+  DesktopCapturerSource,
+  desktopCapturer,
+  screen,
+  session,
+} from 'electron'
+import { IPC_EVENTS } from '@shared/constants'
+import { ScreenShareSource } from '@shared/types'
+import { Log } from '@shared/utils/logger'
+import { forceWindowFocus } from '@/lib/windowsFocus'
+import { SCREEN_SHARE_PICKER_SIZE, ScreenSharePickerWindow } from '../windows'
+import { PhoneIslandController } from './PhoneIslandController'
+
+type SettleRequest = (source?: DesktopCapturerSource) => void
+
+const PICKER_LOAD_TIMEOUT_MS = 30000
+
+export class ScreenSharePickerController {
+  static instance: ScreenSharePickerController
+  private window: ScreenSharePickerWindow | undefined
+  private settlePending: SettleRequest | undefined
+
+  constructor() {
+    ScreenSharePickerController.instance = this
+    session.defaultSession.setDisplayMediaRequestHandler((_request, callback) =>
+      this.handleRequest(callback),
+    )
+  }
+
+  cancel() {
+    this.settlePending?.()
+  }
+
+  private async handleRequest(callback: (streams: Electron.Streams) => void) {
+    if (this.settlePending) {
+      Log.warning('SCREEN SHARE request rejected: picker already open')
+      callback(null as unknown as Electron.Streams)
+      return
+    }
+
+    let settled = false
+    const restorePhoneIsland = this.lowerPhoneIslandForSystemPicker()
+    const settle: SettleRequest = (source) => {
+      if (settled) return
+      settled = true
+      this.settlePending = undefined
+      this.destroyWindow()
+      restorePhoneIsland()
+      if (source) {
+        Log.info('SCREEN SHARE source selected', source.id, source.name)
+        callback({ video: { id: source.id, name: source.name } })
+      } else {
+        Log.info('SCREEN SHARE request cancelled')
+        callback(null as unknown as Electron.Streams)
+      }
+    }
+    this.settlePending = settle
+
+    try {
+      const sources = await this.getSources()
+      if (settled) return
+      if (sources.length <= 1) {
+        settle(sources[0])
+        return
+      }
+      this.openPicker(sources, settle)
+    } catch (e) {
+      Log.error('SCREEN SHARE getSources error', e)
+      settle()
+    }
+  }
+
+  private lowerPhoneIslandForSystemPicker(): () => void {
+    const isWayland =
+      process.platform === 'linux' &&
+      (process.env['XDG_SESSION_TYPE'] === 'wayland' ||
+        !!process.env['WAYLAND_DISPLAY'])
+    try {
+      const window = PhoneIslandController.instance?.window?.getWindow()
+      if (
+        !isWayland ||
+        !window ||
+        window.isDestroyed() ||
+        !window.isAlwaysOnTop()
+      ) {
+        return () => {}
+      }
+      window.setAlwaysOnTop(false)
+      return () => {
+        try {
+          if (!window.isDestroyed()) {
+            window.setAlwaysOnTop(true, 'screen-saver')
+          }
+        } catch (e) {
+          Log.warning('SCREEN SHARE phone island restore error', e)
+        }
+      }
+    } catch (e) {
+      Log.warning('SCREEN SHARE phone island lowering error', e)
+      return () => {}
+    }
+  }
+
+  private async getSources(): Promise<DesktopCapturerSource[]> {
+    const ownMediaSourceIds = new Set(
+      BrowserWindow.getAllWindows()
+        .filter((w) => !w.isDestroyed())
+        .map((w) => w.getMediaSourceId()),
+    )
+    const sources = await desktopCapturer.getSources({
+      types: ['screen', 'window'],
+      thumbnailSize: { width: 320, height: 180 },
+      fetchWindowIcons: true,
+    })
+    return sources.filter((s) => !ownMediaSourceIds.has(s.id))
+  }
+
+  private openPicker(sources: DesktopCapturerSource[], settle: SettleRequest) {
+    const pickerWindow = new ScreenSharePickerWindow()
+    this.window = pickerWindow
+    const window = pickerWindow.getWindow()
+    if (!window) {
+      settle()
+      return
+    }
+
+    const serializedSources: ScreenShareSource[] = sources.map((s) => ({
+      id: s.id,
+      name: s.name,
+      type: s.id.startsWith('screen:') ? 'screen' : 'window',
+      thumbnail: s.thumbnail.toDataURL(),
+      appIcon:
+        s.appIcon && !s.appIcon.isEmpty() ? s.appIcon.toDataURL() : undefined,
+    }))
+
+    const loadTimeout = setTimeout(() => {
+      Log.warning('SCREEN SHARE picker did not load')
+      settle()
+    }, PICKER_LOAD_TIMEOUT_MS)
+
+    window.on('closed', () => {
+      clearTimeout(loadTimeout)
+      settle()
+    })
+    window.webContents.on('render-process-gone', () => settle())
+    window.webContents.on('did-fail-load', () => settle())
+
+    pickerWindow.addListener(IPC_EVENTS.SCREEN_SHARE_PICKER_SOURCES, () => {
+      clearTimeout(loadTimeout)
+      pickerWindow.emit(
+        IPC_EVENTS.SCREEN_SHARE_PICKER_SOURCES,
+        serializedSources,
+      )
+      this.showCentered(window)
+    })
+
+    pickerWindow.addListener(
+      IPC_EVENTS.SCREEN_SHARE_PICKER_SELECT,
+      (_event, sourceId: string | null) => {
+        settle(sources.find((s) => s.id === sourceId))
+      },
+    )
+  }
+
+  private showCentered(window: BrowserWindow) {
+    try {
+      const phoneIslandBounds = PhoneIslandController.instance?.window
+        ?.getWindow()
+        ?.getBounds()
+      const display =
+        phoneIslandBounds &&
+        phoneIslandBounds.width > 1 &&
+        phoneIslandBounds.height > 1
+          ? screen.getDisplayMatching(phoneIslandBounds)
+          : screen.getDisplayNearestPoint(screen.getCursorScreenPoint())
+      const { x, y, width, height } = display.workArea
+      const { width: w, height: h } = SCREEN_SHARE_PICKER_SIZE
+      window.setBounds({
+        x: x + Math.round((width - w) / 2),
+        y: y + Math.round((height - h) / 2),
+        width: w,
+        height: h,
+      })
+    } catch (e) {
+      Log.warning('SCREEN SHARE picker positioning error', e)
+    }
+    if (process.platform === 'darwin') {
+      window.setVisibleOnAllWorkspaces(true, {
+        visibleOnFullScreen: true,
+        skipTransformProcessType: true,
+      })
+    }
+    window.show()
+    window.setAlwaysOnTop(true, 'screen-saver')
+    setTimeout(() => {
+      if (window.isDestroyed()) return
+      forceWindowFocus(window)
+      window.focus()
+      window.webContents.focus()
+    }, 50)
+  }
+
+  private destroyWindow() {
+    const window = this.window?.getWindow()
+    this.window = undefined
+    if (window && !window.isDestroyed()) {
+      window.destroy()
+    }
+  }
+}

src/main/classes/windows/ScreenSharePickerWindow.ts

@@ -0,0 +1,45 @@
+import { PAGES } from '@shared/types'
+import { BaseWindow } from './BaseWindow'
+
+export const SCREEN_SHARE_PICKER_SIZE = { width: 720, height: 520 }
+
+export class ScreenSharePickerWindow extends BaseWindow {
+  constructor() {
+    super(PAGES.SCREENSHAREPICKER, {
+      width: SCREEN_SHARE_PICKER_SIZE.width,
+      height: SCREEN_SHARE_PICKER_SIZE.height,
+      show: false,
+      focusable: true,
+      fullscreenable: false,
+      autoHideMenuBar: true,
+      closable: true,
+      alwaysOnTop: true,
+      minimizable: false,
+      maximizable: false,
+      movable: true,
+      resizable: false,
+      skipTaskbar: true,
+      roundedCorners: true,
+      parent: undefined,
+      transparent: true,
+      hiddenInMissionControl: true,
+      hasShadow: false,
+      center: true,
+      fullscreen: false,
+      enableLargerThanScreen: false,
+      frame: false,
+      thickFrame: false,
+      trafficLightPosition: { x: 0, y: 0 },
+      webPreferences: {
+        nodeIntegration: true,
+      },
+    })
+
+    this.addOnBuildListener(() => {
+      const window = this.getWindow()
+      if (window) {
+        window.setAlwaysOnTop(true, 'screen-saver')
+      }
+    })
+  }
+}

src/main/classes/windows/index.ts

@@ -4,3 +4,4 @@ export * from './NethLinkWindow'
 export * from './PhoneIslandWindow'
 export * from './DevToolsWindow'
 export * from './CommandBarWindow'
+export * from './ScreenSharePickerWindow'

src/main/lib/ipcEvents.ts

@@ -11,7 +11,6 @@ import {
   net,
   screen,
   shell,
-  desktopCapturer,
   globalShortcut,
   clipboard,
   Notification,
@@ -732,20 +731,6 @@ export function registerIpcEvents() {
       Log.error('EXIT FULLSCREEN error ', e)
     }
   })
-  ipcMain.on(IPC_EVENTS.SCREEN_SHARE_INIT, () => {
-    desktopCapturer
-      .getSources({ types: ['screen'] }) // allow only entire screen sharing
-      .then((sources) => {
-        PhoneIslandController.instance?.window?.emit(
-          IPC_EVENTS.SCREEN_SHARE_SOURCES,
-          sources,
-        )
-      })
-      .catch((e) => {
-        Log.error('ENTER SCREEN_SHARE_INIT error ', e)
-      })
-  })
-
   ipcMain.on(IPC_EVENTS.URL_OPEN, (_, data) => {
     try {
       PhoneIslandController.instance.window.emit(IPC_EVENTS.URL_OPEN, data)

src/main/main.ts

@@ -21,6 +21,7 @@ import {
 import { AccountController } from './classes/controllers'
 import { PhoneIslandController } from './classes/controllers/PhoneIslandController'
 import { CommandBarController } from './classes/controllers/CommandBarController'
+import { ScreenSharePickerController } from './classes/controllers/ScreenSharePickerController'
 import {
   Account,
   AuthAppData,
@@ -130,6 +131,7 @@ function startup() {
         Log.warning('Failed to disable Command Bar on logout:', e)
       }
 
+      ScreenSharePickerController.instance?.cancel()
       await PhoneIslandController.instance.logout()
       NethLinkController.instance.logout()
       AccountController.instance.logout()
@@ -274,6 +276,7 @@ function attachOnReadyProcess() {
     // I create the Tray controller instance - I define to it the function it should execute upon clicking on the icon
     new SplashScreenController()
     new TrayController()
+    new ScreenSharePickerController()
 
     // I display the splashscreen when the splashscreen component is correctly loaded.
     SplashScreenController.instance.window.addOnBuildListener(() => {
@@ -546,6 +549,8 @@ function attachOnReadyProcess() {
       await CommandBarController.instance.safeQuit()
     }
 
+    ScreenSharePickerController.instance?.cancel()
+
     Log.info('APP QUIT CORRECTLY')
     app.exit()
   })

src/renderer/public/locales/en/translations.json

@@ -994,6 +994,13 @@
     "Placeholder": "Search contact or dial number...",
     "Call": "Call"
   },
+  "ScreenShare": {
+    "Title": "Choose what to share",
+    "Entire screen": "Entire screen",
+    "Screen": "Screen {{number}}",
+    "Window": "Window",
+    "Share": "Share"
+  },
   "Errors": {
     "browser_permissions": "Browser permissions error",
     "user_permissions": "Media permissions error",

src/renderer/public/locales/it/translations.json

@@ -994,6 +994,13 @@
     "Placeholder": "Cerca contatto o componi numero...",
     "Call": "Chiama"
   },
+  "ScreenShare": {
+    "Title": "Scegli cosa condividere",
+    "Entire screen": "Schermo intero",
+    "Screen": "Schermo {{number}}",
+    "Window": "Finestra",
+    "Share": "Condividi"
+  },
   "Errors": {
     "browser_permissions": "Errore nei permessi del browser",
     "user_permissions": "Errore nei permessi dei media",

src/renderer/src/App.tsx

@@ -6,6 +6,7 @@ import {
   SplashScreenPage,
   NethLinkPage,
   CommandBarPage,
+  ScreenSharePickerPage,
 } from '@/pages'
 import { loadI18n } from './lib/i18n'
 import { Log } from '@shared/utils/logger'
@@ -143,6 +144,10 @@ const RequestStateComponent = () => {
           path: PAGES.COMMANDBAR,
           element: <CommandBarPage />,
         },
+        {
+          path: PAGES.SCREENSHAREPICKER,
+          element: <ScreenSharePickerPage />,
+        },
       ],
     },
   ])