fix: Pexip screen selector (#2942)

RocketChat · Sep 13, 2024 · 4260bf2 · 4260bf2
1 parent 2f60cb9
commit 4260bf2
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 80 deletions.
diff --git a/src/public/video-call-window.html b/src/public/video-call-window.html
@@ -1,25 +1,24 @@
 <!doctype html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
+    <title>Rocket.Chat</title>
+    <link rel="stylesheet" href="./main.css" />
+    <style>
+      webview {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        display: inline-flex !important;
+      }
+    </style>
+    <link rel="stylesheet" href="./icons/rocketchat.css" />
+  </head>
 
-<head>
-	<meta charset="utf-8" />
-	<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
-	<title>Rocket.Chat</title>
-	<style>
-		webview {
-			position: absolute;
-			inset: 0;
-			width: 100%;
-			height: 100%;
-			display: inline-flex !important;
-		}
-	</style>
-	<link rel="stylesheet" href="./icons/rocketchat.css">
-</head>
-
-<body style="background-color: #347d9a">
-	<div id="root"></div>
-	<script src="./video-call-window.js"></script>
-</body>
-
-</html>
+  <body style="background-color: #347d9a">
+    <div id="root"></div>
+    <script src="./video-call-window.js"></script>
+  </body>
+</html>
diff --git 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<DesktopCapturerSource[]>([]);
+  const [hoveredSourceId, setHoveredSourceId] = useState<string | null>(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 (
-    <Dialog isVisible={visible} onClose={handleClose}>
-      <Box
-        display='flex'
-        flexWrap='wrap'
-        alignItems='stretch'
-        justifyContent='center'
-        maxWidth='x800'
-      >
-        {!isScreenRecordingPermissionGranted && (
-          <Box alignSelf='center' display='flex'>
+    <Box>
+      <PaletteStyleTag
+        theme='light'
+        selector=':root'
+        // tagId='sidebar-palette'
+      />
+      <Dialog isVisible={visible} onClose={handleClose}>
+        <Box
+          display='flex'
+          flexWrap='wrap'
+          alignItems='stretch'
+          justifyContent='center'
+          maxWidth='x800'
+          // bg='tint'
+          borderRadius='x16'
+        >
+          {!isScreenRecordingPermissionGranted && (
             <Callout
               title='Screen Recording Permissions Denied'
               type='danger'
               maxWidth='100%'
+              marginBlockEnd='x16'
             >
               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() {
               <b> Screen Recording</b> and check
               <b> Rocket.Chat</b>
             </Callout>
+          )}
+          <Box alignSelf='center' display='flex'>
+            <Box fontScale='h1' alignSelf='left'>
+              Select a screen to share
+            </Box>
           </Box>
-        )}
-        <Box alignSelf='center' display='flex'>
-          <Box fontScale='h1' alignSelf='left'>
-            Select a screen to share
-          </Box>
-        </Box>
-        <Scrollable>
-          <Margins blockStart='x16' blockEnd='x16'>
-            <Box
-              display='flex'
-              flexWrap='wrap'
-              alignItems='stretch'
-              justifyContent='center'
-              maxSize='x730'
-            >
-              {sources.map(({ id, name, thumbnail }) => (
-                <Source
-                  key={id}
-                  display='flex'
-                  flexDirection='column'
-                  onClick={handleScreenSharingSourceClick(id)}
-                >
+          <Scrollable>
+            <Margins blockStart='x16' blockEnd='x16'>
+              <Box
+                display='flex'
+                flexWrap='wrap'
+                alignItems='stretch'
+                justifyContent='center'
+                maxSize='x730'
+              >
+                {sources.map(({ id, name, thumbnail }) => (
                   <Box
-                    flexGrow={1}
+                    width='x160'
+                    height='x200'
+                    key={id}
                     display='flex'
-                    alignItems='center'
-                    justifyContent='center'
+                    flexDirection='column'
+                    onClick={handleScreenSharingSourceClick(id)}
+                    // bg='tint'
+                    margin='x8'
+                    // borderRadius='x8'
+                    onMouseEnter={() => handleMouseEnter(id)}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                      cursor: 'pointer',
+                    }}
+                    borderRadius='x8'
+                    border={
+                      hoveredSourceId === id
+                        ? '2px solid var(--rcx-color-stroke-light)'
+                        : '2px solid transparent'
+                    }
                   >
                     <Box
-                      is='img'
-                      src={thumbnail.toDataURL()}
-                      alt={name}
-                      style={{ maxWidth: '148px', maxHeight: '148px' }}
-                    />
+                      flexGrow={1}
+                      display='flex'
+                      alignItems='center'
+                      justifyContent='center'
+                      content='center'
+                    >
+                      <Box
+                        is='img'
+                        src={thumbnail.toDataURL()}
+                        alt={name}
+                        style={{ maxWidth: '148px', maxHeight: '148px' }}
+                        borderRadius='x2'
+                      />
+                    </Box>
+                    <Label margin='x8' withTruncatedText>
+                      {name}
+                    </Label>
                   </Box>
-                  <Box>{name}</Box>
-                </Source>
-              ))}
-            </Box>
-          </Margins>
-        </Scrollable>
-      </Box>
-      <Box alignSelf='center' display='flex'>
-        <Button onClick={handleClose}>Cancel</Button>
-      </Box>
-    </Dialog>
+                ))}
+              </Box>
+            </Margins>
+          </Scrollable>
+        </Box>
+        <Box alignSelf='center' display='flex' marginBlockStart='x24'>
+          <Button onClick={handleClose}>Cancel</Button>
+        </Box>
+      </Dialog>
+    </Box>
   );
 }
diff --git 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 (
-    <div>
+    <Box>
       <ScreenSharePicker />
       <webview
         ref={webviewRef}
@@ -29,7 +30,7 @@ function VideoCallWindow() {
         webpreferences='nodeIntegration,nativeWindowOpen=true'
         allowpopups={'true' as any}
       />
-    </div>
+    </Box>
   );
 }