Skip to content

Commit 39884a7

Browse files
jeanfbritojeanfbrito
authored
fix: Jitsi not loading in some cases (#3059)
* fix: Jitsi not loading in some cases * fix lint * bump version * revamp screen capture * fix lint * force webview and window destroy when close * add video call dev tools menu * update electron to 37.2.1 * bump version * add auto-start devtools for video call * add loading state to the video call webview * bump version * make video call submenu always appear * improve performance for slower machines * bump version * fix lint * add another auto recover * change video call background color * Enhance Cleanup Sequence * improve spacings on screen spicker * increase screen sizes * improve screens grid * improve picture placement and screen name * cleanup * Add IPC handlers for video call window state management and implement auto-recovery strategies * bump version * clean comments * Refactor video call window initialization and fallback UI logic, removing unnecessary comments and implementing silent auto-recovery mechanism for improved user experience. * Add logging for video call window URL management and improve race condition handling * Enhance video call window initialization with increased retry attempts and improved logging for IPC readiness * Update Electron and Node.js versions in package.json and yarn.lock to 37.2.4 and 22.17.1 respectively * Update Node.js version to 22.17.1 in package.json and workflow files, and add additional distribution files to the release action * Add comprehensive documentation for video call window flow, detailing architecture components, flow diagram, error handling, and performance optimizations. * Refactor IPC handlers in video call window to return structured responses, enhance URL request handling, and improve logging for better debugging and state management. * Refine video call window documentation by simplifying language, enhancing clarity on URL handling, and detailing IPC acknowledgment patterns for improved understanding and troubleshooting. * Enhance video call URL request handling with retry logic and improved error logging. Implement immediate retries for failed requests and log attempts for better debugging and state management. * Enhance video call window flow documentation with detailed retry strategies for URL requests and initialization, including progressive error handling and IPC acknowledgment patterns for improved resilience and debugging clarity. * Update version in package.json to 4.7.2-alpha.6 for the next release * Add invokeWithRetry function to IPC renderer for enhanced error handling and retry logic This commit introduces the invokeWithRetry function, which allows for retrying IPC calls with customizable options such as maximum attempts, delay between retries, and logging. This enhancement improves resilience in handling IPC calls by providing a structured approach to manage failures and retries. * Refactor video call window initialization to utilize invokeWithRetry for IPC calls, enhancing error handling and retry logic. Introduce fallback UI for initialization failures, improving user experience during errors. Clean up unused code and streamline the setup process for better maintainability. * Refactor IPC calls in VideoCallWindow to use invokeWithRetry for improved error handling and retry logic. This change enhances the robustness of URL confirmation, close requests, webview loading, and state management, while streamlining the code by removing unnecessary checks and logging. Development environment logging remains intact for debugging purposes. * Add comprehensive documentation for video call screen sharing and window management flows This commit introduces detailed markdown files explaining the processes involved in screen sharing during video calls and the management of video call windows in Rocket.Chat Electron. The documentation includes flow diagrams, step-by-step explanations, and key features, enhancing clarity and understanding for developers and users alike. * Enhance video call window fallback UI and error handling This commit improves the fallback UI for the video call window by updating styles and adding an automatic reload feature after initialization failures. The retry logic for URL requests has been adjusted to increase the maximum attempts and delay between retries, enhancing robustness. Additionally, the cleanup of the React root element is implemented to prevent warnings during reinitialization, ensuring a smoother user experience. * Update IPC logging and URL handling in video call window This commit modifies the `setPendingVideoCallUrl` function to accept a non-null URL and updates the logging to provide clearer messages. It removes unnecessary logging in the URL request handler and simplifies the return structure for better clarity. Additionally, it ensures that the timestamp in logs is formatted as an ISO string for consistency. * fix lint * Enhance application initialization and video call window management This commit adds a console log to indicate successful application initialization in `main.ts`. In `app.ts`, it improves the window closing logic to prevent immediate quitting when the video call window closes, ensuring a smoother user experience. Additionally, it refines the cleanup process in `ipc.ts` to include safety checks and delays, preventing crashes during app initialization. The `videoCallWindow.tsx` file is updated to manage loading and error displays with delays, enhancing the user interface by preventing flickers during state transitions.
1 parent d051807 commit 39884a7

27 files changed

Lines changed: 2893 additions & 280 deletions

‎.github/workflows/build-release.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ jobs:
3131
with:
3232
fetch-depth: 0
3333

34-
- name: Setup Node 22.13.1
34+
- name: Setup Node 22.17.1
3535
uses: actions/setup-node@v4
3636
with:
37-
node-version: '22.13.1'
37+
node-version: '22.17.1'
3838

3939
- name: Setup node_modules cache
4040
uses: actions/cache@v4

‎.github/workflows/pull-request-build.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ jobs:
3030
with:
3131
fetch-depth: 0
3232

33-
- name: Setup Node 22.13.1
33+
- name: Setup Node 22.17.1
3434
uses: actions/setup-node@v4
3535
with:
36-
node-version: '22.13.1'
36+
node-version: '22.17.1'
3737

3838
- name: Setup node_modules cache
3939
uses: actions/cache@v4

‎.github/workflows/validate-pr.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ jobs:
2424
run: git config --global core.autocrlf false
2525
- name: Checkout code
2626
uses: actions/checkout@v3
27-
- name: Setup Node 22.13.1
27+
- name: Setup Node 22.17.1
2828
uses: actions/setup-node@v4
2929
with:
30-
node-version: '22.13.1'
30+
node-version: '22.17.1'
3131
- name: Setup node_modules cache
3232
uses: actions/cache@v4
3333
with:

‎docs/video-call-screen-sharing.md‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
# Video Call Screen Sharing
2+
3+
## Overview
4+
5+
This document shows how screen sharing works within an active video call in Rocket.Chat Electron.
6+
7+
## Screen Sharing Flow
8+
9+
```mermaid
10+
flowchart TD
11+
%% Screen Sharing Initiation
12+
A[Video Call Active] --> B[User Requests Screen Share]
13+
B --> C[Webview Calls requestScreenSharing API]
14+
C --> D[Preload Script Receives Request]
15+
16+
%% IPC Communication to Main Process
17+
D --> E[Send video-call-window/open-screen-picker IPC]
18+
E --> F[Main Process Receives Request]
19+
F --> G[Create Screen Picker Window]
20+
G --> H[Load ScreenSharePicker Component]
21+
22+
%% Desktop Capturer Cache Check
23+
H --> I{Desktop Capturer Cache Valid?}
24+
I -->|Yes - Within 3s TTL| J[Return Cached Sources]
25+
I -->|No - Cache Expired/Empty| K[Fetch Available Sources]
26+
27+
%% System Source Fetching
28+
K --> L[Call desktopCapturer.getSources]
29+
L --> M[System Returns Available Sources]
30+
M --> N[Filter & Process Sources]
31+
N --> O[Cache Sources with 3s TTL]
32+
O --> J[Return Sources to UI]
33+
34+
%% Source Selection UI
35+
J --> P[Display Sources in Tabs]
36+
P --> Q[Windows Tab - Application Windows]
37+
P --> R[Screens Tab - Desktop Displays]
38+
Q --> S[User Selects Window]
39+
R --> T[User Selects Screen]
40+
S --> U[Validate Selected Source]
41+
T --> U
42+
43+
%% Source Validation with Caching
44+
U --> V{Source in Validation Cache?}
45+
V -->|Yes - Within 30s TTL| W[Return Cached Validation]
46+
V -->|No - Not Cached/Expired| X[Validate Source Availability]
47+
X --> Y[Check Source Still Exists]
48+
Y --> Z{Source Valid?}
49+
Z -->|Yes| AA[Cache Validation with 30s TTL]
50+
Z -->|No| BB[Show Source Unavailable Error]
51+
AA --> W
52+
W --> CC[Return Source ID to Main Process]
53+
54+
%% IPC Response to Webview
55+
CC --> DD[Send Source ID via IPC Response]
56+
DD --> EE[Preload Script Receives Source ID]
57+
EE --> FF[Return Source to Webview]
58+
FF --> GG[Webview Gets Stream Access]
59+
GG --> HH[User Sees Screen Share Active]
60+
61+
%% Error Handling
62+
BB --> II[User Selects Different Source]
63+
II --> U
64+
65+
%% Cache Cleanup on Window Close
66+
HH --> JJ[Video Call Window Closes]
67+
JJ --> KK[Schedule Cache Cleanup - 60s Delay]
68+
KK --> LL{Other Video Call Windows?}
69+
LL -->|Yes| MM[Keep Cache Active]
70+
LL -->|No| NN[Clear Desktop Capturer Cache]
71+
NN --> OO[Clear Source Validation Cache]
72+
OO --> PP[Cache Cleanup Complete]
73+
74+
%% Cache Miss Performance Path
75+
K --> QQ[Background Promise Deduplication]
76+
QQ --> RR{Existing Fetch in Progress?}
77+
RR -->|Yes| SS[Wait for Existing Fetch]
78+
RR -->|No| TT[Start New Fetch Operation]
79+
SS --> J
80+
TT --> L
81+
82+
%% Styling
83+
classDef mainProcess fill:#e1f5fe,stroke:#0277bd,stroke-width:2px
84+
classDef renderer fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
85+
classDef webview fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
86+
classDef cache fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
87+
classDef ui fill:#fff3e0,stroke:#f57c00,stroke-width:2px
88+
classDef validation fill:#f3e5f5,stroke:#8e24aa,stroke-width:2px
89+
classDef error fill:#ffebee,stroke:#c62828,stroke-width:2px
90+
classDef success fill:#e8f5e8,stroke:#388e3c,stroke-width:2px
91+
92+
class F,G,L,M,N,CC,DD,KK,LL,NN,OO mainProcess
93+
class D,E,EE,FF renderer
94+
class A,C,GG,HH webview
95+
class I,J,O,V,W,AA,QQ,RR,SS,TT cache
96+
class H,P,Q,R,S,T ui
97+
class U,X,Y,Z,BB validation
98+
class BB,II error
99+
class CC,GG,HH,PP success
100+
```
101+
102+
## Explanation
103+
104+
**What this diagram shows:**
105+
- How screen sharing works inside an active video call
106+
- The caching system that makes it fast and smooth
107+
- How users select what to share from their computer
108+
- Error handling when something goes wrong
109+
110+
**Key parts:**
111+
1. **User Request** - User clicks screen share button in video call
112+
2. **Source Discovery** - App finds all windows and screens available
113+
3. **Caching System** - Remembers recent results to avoid slow lookups
114+
4. **User Selection** - Shows windows and screens in easy-to-use tabs
115+
5. **Validation** - Checks that selected window/screen still exists
116+
6. **Stream Access** - Gives video call access to share the screen
117+
7. **Cache Cleanup** - Cleans up memory when no longer needed
118+
119+
**Performance Features:**
120+
- **3-second cache** for source lists (faster when user reopens picker)
121+
- **30-second validation cache** (remembers which sources work)
122+
- **60-second cleanup delay** (keeps cache active for quick re-use)
123+
- **Promise deduplication** (prevents multiple slow system calls)
124+
125+
**Color Guide:**
126+
- **Blue** - Main process & Cache operations
127+
- **Purple** - Renderer process & Validation
128+
- **Green** - Webview & Success states
129+
- **Orange** - User interface elements
130+
- **Red** - Error states
131+
132+
**Starting Point:**
133+
This flow starts from the "Video Call Active" state that you get after completing the window management flow.
134+
135+
## Detailed Step-by-Step Explanation
136+
137+
### 1. Starting Screen Sharing
138+
When you're in an active video call and want to share your screen, you click the screen share button in the video call interface.
139+
140+
**What happens:**
141+
- The video call website detects your click on the screen share button
142+
- It calls a special function that Rocket.Chat provides for screen sharing
143+
- This request goes through a secure bridge between the video call and the main app
144+
- The main app receives the screen sharing request
145+
146+
### 2. Opening the Source Picker
147+
The app needs to show you what you can share (windows and screens).
148+
149+
**What happens:**
150+
- Creates a new small window specifically for choosing what to share
151+
- This picker window is separate from your video call window
152+
- Loads a user interface that will show you all available options
153+
- Prepares to fetch information about what's available on your computer
154+
155+
### 3. Checking the Cache First
156+
Before asking your computer for available windows and screens, the app checks if it already knows.
157+
158+
**What happens:**
159+
- Looks in its memory for a recent list of windows and screens
160+
- If it found a list less than 3 seconds ago, it uses that (much faster!)
161+
- If the information is older than 3 seconds, it needs to get fresh data
162+
- This caching makes screen sharing feel instant when you use it multiple times
163+
164+
### 4. Getting Available Sources
165+
When the cache is empty or old, the app asks your operating system what you can share.
166+
167+
**What happens:**
168+
- Asks your computer for a list of all open windows
169+
- Asks for a list of all monitors/screens you have
170+
- Your operating system provides thumbnails and names for each option
171+
- The app filters and organizes this information for display
172+
173+
### 5. Caching for Performance
174+
To make future requests faster, the app remembers what it just learned.
175+
176+
**What happens:**
177+
- Stores the list of windows and screens in memory
178+
- Sets a 3-second expiration time on this information
179+
- If multiple screen share requests come in quickly, they all use the same cached data
180+
- This prevents overwhelming your computer with repeated requests
181+
182+
### 6. Showing Your Options
183+
Now you see a nice interface with everything you can share.
184+
185+
**What happens:**
186+
- Creates tabs to organize your options: "Windows" and "Screens"
187+
- **Windows tab**: Shows all your open applications with preview thumbnails
188+
- **Screens tab**: Shows each monitor/display you have connected
189+
- Each option shows a preview image and the name of the window or screen
190+
- You can click on any option to select it
191+
192+
### 7. Validating Your Choice
193+
When you click on something to share, the app double-checks it's still available.
194+
195+
**What happens:**
196+
- Checks if the window or screen you selected still exists
197+
- Sometimes windows get closed between when the list was made and when you click
198+
- If it checked the same source recently (within 30 seconds), it uses that cached result
199+
- If not, it quickly verifies the source is still available
200+
201+
### 8. Handling Unavailable Sources
202+
If what you selected is no longer available, the app helps you choose something else.
203+
204+
**What happens:**
205+
- Shows an error message explaining the window or screen is no longer available
206+
- The source picker stays open so you can choose a different option
207+
- Your previous selection is cleared
208+
- You can try selecting a different window or screen
209+
210+
### 9. Returning the Source
211+
When you've successfully selected something that's available, the app provides it to your video call.
212+
213+
**What happens:**
214+
- Caches the validation result for 30 seconds (in case you want to share the same thing again soon)
215+
- Sends the source information back to the main app
216+
- The main app passes this information to your video call
217+
- The source picker window closes since you've made your choice
218+
219+
### 10. Activating Screen Sharing
220+
Your video call now has permission to share your selected screen or window.
221+
222+
**What happens:**
223+
- The video call website receives the source information
224+
- It can now access the stream from your selected window or screen
225+
- Other people in the call start seeing what you're sharing
226+
- The screen sharing is now active and working
227+
228+
### 11. Cache Cleanup
229+
When you close your video call, the app cleans up the memory it was using.
230+
231+
**What happens:**
232+
- Waits 60 seconds after the video call window closes (in case you open another call quickly)
233+
- Checks if any other video call windows are still open
234+
- If no other video calls are running, it clears all cached screen sharing data
235+
- This prevents the app from using memory unnecessarily
236+
237+
### 12. Performance Optimization
238+
The app has special features to make screen sharing as fast as possible.
239+
240+
**What happens:**
241+
- **Promise deduplication**: If multiple requests come in at the same time, it only asks the system once
242+
- **Background processing**: Fetching source information happens in the background
243+
- **Smart caching**: Keeps frequently used information readily available
244+
- **Efficient cleanup**: Only clears memory when it's actually not needed
245+
246+
## Why This System Works Well
247+
248+
### Speed and Responsiveness
249+
- **3-second source cache**: Makes the picker open almost instantly on repeat use
250+
- **30-second validation cache**: Avoids re-checking the same sources repeatedly
251+
- **Immediate response**: You see your options as quickly as your computer can provide them
252+
- **Background optimization**: Multiple requests don't slow each other down
253+
254+
### Reliability
255+
- **Real-time validation**: Ensures what you select actually works
256+
- **Error recovery**: Helps you choose something else if your first choice isn't available
257+
- **Source verification**: Double-checks everything before committing
258+
- **Graceful degradation**: Still works even if some features are slow
259+
260+
### Resource Management
261+
- **Smart caching**: Only keeps information as long as it's useful
262+
- **Memory cleanup**: Automatically frees up memory when not needed
263+
- **Efficient requests**: Doesn't overwhelm your computer with repeated system calls
264+
- **Multi-window support**: Handles multiple video calls without conflicts
265+
266+
### User Experience
267+
- **Visual previews**: See exactly what you'll be sharing before you choose
268+
- **Organized tabs**: Easy to find windows vs. screens
269+
- **Clear feedback**: Know immediately if something isn't available
270+
- **Fast response**: Screen sharing starts quickly once you make a choice
271+
272+
This system ensures that screen sharing is fast, reliable, and doesn't slow down your computer, even when you have many windows open or multiple monitors connected.

‎docs/video-call-window-flow.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Video Call Window Documentation
2+
3+
## Overview
4+
5+
The video call window system in Rocket.Chat Electron has two main parts:
6+
7+
1. **Window Management** - How the video call window is created and managed
8+
2. **Screen Sharing** - How screen sharing works within the video call
9+
10+
## Documentation Files
11+
12+
### 📊 [Window Management Flow](./video-call-window-management.md)
13+
**What it covers:** How Rocket.Chat opens a video call window when you click a video call button.
14+
15+
This document explains the complete process from when you click "Join Call" to when you see a working video call interface. It shows how the app creates a separate window for your video call, sets it up safely, handles any problems that might occur, and makes sure everything works reliably even on slower computers.
16+
17+
**You'll learn about:**
18+
- How the app validates video call URLs for security
19+
- Why video calls open in separate windows
20+
- How the app handles errors and tries to fix them automatically
21+
- The retry system that makes video calls work reliably
22+
- How multiple attempts ensure success even with slow internet
23+
- What happens when you close a video call window
24+
25+
**Perfect for understanding:** Why video calls sometimes take a moment to open, how the app recovers from problems, and what's happening behind the scenes when you start a video call.
26+
27+
### 🖥️ [Screen Sharing Flow](./video-call-screen-sharing.md)
28+
**What it covers:** How screen sharing works when you're already in a video call.
29+
30+
This document explains what happens when you click the screen share button during a video call. It shows how the app finds all your windows and screens, how it makes the selection process fast with smart caching, and how it ensures what you choose actually works before sharing it with others.
31+
32+
**You'll learn about:**
33+
- How the app discovers all your open windows and screens
34+
- Why screen sharing feels instant the second time you use it
35+
- How the app organizes your options into easy-to-use tabs
36+
- The smart caching system that makes everything fast
37+
- How the app handles closed windows and disconnected screens
38+
- What happens to memory and cache when you end calls
39+
40+
**Perfect for understanding:** Why screen sharing opens quickly, how the preview thumbnails are generated, what the app does when windows disappear, and how it manages computer resources efficiently.
41+
42+
## How They Work Together
43+
44+
### The Complete User Journey
45+
46+
1. **📊 Window Management** → You click a video call button, and the app creates a working video call window
47+
2. **🖥️ Screen Sharing** → While in the call, you click screen share and select what to share
48+
49+
### Real-World Example
50+
51+
**Starting a call:**
52+
- You click "Join Video Call" in a Rocket.Chat message
53+
- Window Management Flow takes over
54+
- A new window opens and loads the video call interface
55+
- You see other participants and can talk/video chat
56+
57+
**Sharing your screen:**
58+
- You click the screen share button in the video call
59+
- Screen Sharing Flow takes over
60+
- A small window shows all your options with preview images
61+
- You click on a window or screen to share it
62+
- Others in the call immediately see what you're sharing
63+
64+
Both systems work together seamlessly to give you a complete video calling experience that's fast, reliable, and easy to use.

0 commit comments

Comments
 (0)