Picture in Picture (PiP)
Relevant source files
The following files were used as context for generating this wiki page:
The Picture in Picture (PiP) feature in Messenger Unleashed allows users to pop out a conversation into a dedicated, compact, and floating window. This enables users to keep a mini chat interface visible over other applications while performing different tasks on their desktop.
Sources: src/main/index.ts:1330-1384, landing-page/src/app/HomeClient.tsx:288-291, CLAUDE.md:104-106
Architecture and Implementation
The PiP functionality is implemented using a separate Electron BrowserWindow instance that is distinct from the main application window. This window is specifically configured to stay above other windows and provide a streamlined chat experience.
Window Configuration
The PiP window is initialized with a specific set of properties to ensure it behaves as a floating utility:
| Property | Value | Description |
|---|---|---|
width | 400 | Initial width of the PiP window. |
height | 300 | Initial height of the PiP window. |
alwaysOnTop | true | Ensures the window floats over other applications. |
frame | false | Removes native window decorations for a cleaner look. |
resizable | true | Allows users to scale the mini chat. |
Sources: src/main/index.ts:1336-1350
Lifecycle and Navigation
The following diagram illustrates the lifecycle of a PiP window session, from activation via the main menu or shortcut to its closure.
The PiP window utilizes the same USER_AGENT as the main window to ensure compatibility with Messenger's web interface. It also implements a custom window open handler to ensure external links are opened in the system's default browser rather than inside the small PiP frame.
Sources: src/main/index.ts:1331-1335, src/main/index.ts:1352-1356, CLAUDE.md:76-77
Interaction and Controls
Because the PiP window is frameless, native OS close buttons are unavailable. The application provides two primary methods for closing the window and navigating back to the desktop.
Close Mechanisms
- Escape Key: A listener is attached to the
before-input-eventon the PiP window'swebContents. If the "Escape" key is detected, the window is immediately closed. - Injected UI: Upon the
did-finish-loadevent, the main process injects a custom CSS block and a JavaScript IIFE (Immediately Invoked Function Expression) into the window. This creates a floating "×" button in the top-right corner.
Sources: src/main/index.ts:1358-1380, CLAUDE.md:46-47
Trigger Methods
Users can activate the PiP mode through multiple entry points:
- Keyboard Shortcut:
CmdOrCtrl+Shift+P(Globally registered). - Application Menu: Located under
Unleashed > Power Tools > Picture in Picture. - Settings Modal: Can be toggled or configured within the "Shortcuts" or "Power Tools" sections of the settings interface.
Sources: src/main/index.ts:1210-1214, src/main/index.ts:1537, src/preload/settings-modal.ts:468
Technical Implementation Details
The implementation relies on Electron's main-to-renderer script injection to provide the custom UI.
// Example of injected close button logic in src/main/index.ts
pipWindow.webContents.on("did-finish-load", () => {
pipWindow.webContents.insertCSS(`
.pip-close-btn {
position: fixed; top: 8px; right: 8px;
/* ... styling ... */
-webkit-app-region: no-drag;
}
`);
pipWindow.webContents.executeJavaScript(`
(function() {
const btn = document.createElement('button');
btn.className = 'pip-close-btn';
btn.textContent = '×';
btn.onclick = () => window.close();
document.body.appendChild(btn);
})()
`);
});
The -webkit-app-region: no-drag property is critical, as it ensures the button remains clickable even if the rest of the window header is used for dragging the window.
Sources: src/main/index.ts:1364-1380
Summary
Picture in Picture (PiP) provides a highly accessible, floating Messenger interface by leveraging a secondary frameless Electron window. By injecting custom control elements and forcing an "Always on Top" state, it transforms the standard web-based Messenger into a desktop-native multitasking tool.