Stop video playback on close to fix signalapp#6661

Timeout is subject to change

app/main.ts

@@ -932,19 +932,32 @@ async function createWindow() {
     // Prevent the shutdown
     e.preventDefault();
 
-    /**
-     * if the user is in fullscreen mode and closes the window, not the
-     * application, we need them leave fullscreen first before closing it to
-     * prevent a black screen.
-     *
-     * issue: https://github.com/signalapp/Signal-Desktop/issues/4348
-     */
-
-    if (mainWindow.isFullScreen()) {
-      mainWindow.once('leave-full-screen', () => mainWindow?.hide());
-      mainWindow.setFullScreen(false);
-    } else {
-      mainWindow.hide();
+    mainWindow.webContents
+
+    let stopPlaybackConfirmed = false;
+
+    const playbackTimeout = setTimeout(() => {
+      if (!stopPlaybackConfirmed) {
+        console.log("No response from renderer, hiding mainWindow by timeout");
+        hideMainWindow();
+      }
+    }, 100); // This timeout is based on my testing and subject to change, tried to balance responsiveness and appropriate wait time
+
+    // Inform video renderer of coming close to enable it to stop playback
+    mainWindow.webContents.send('prepare-close');
+    ipc.once('stop-playback-confirmed', () => {
+      stopPlaybackConfirmed = true;
+      clearTimeout(playbackTimeout);
+      hideMainWindow();
+    });
+
+    function hideMainWindow() {
+      if (mainWindow?.isFullScreen()) {
+        mainWindow.once('leave-full-screen', () => mainWindow?.hide());
+        mainWindow.setFullScreen(false);
+      } else {
+        mainWindow?.hide();
+      }
     }
 
     // On Mac, or on other platforms when the tray icon is in use, the window

ts/components/Lightbox.tsx

@@ -26,6 +26,7 @@ import { isGIF } from '../types/Attachment';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 import { usePrevious } from '../hooks/usePrevious';
 import { arrow } from '../util/keyboard';
+import { ipcRenderer } from 'electron';
 
 export type PropsType = {
   children?: ReactNode;
@@ -224,6 +225,21 @@ export function Lightbox({
     closeLightbox();
   };
 
+  useEffect(() => {
+    const prepareClose = () => {
+      if (videoElement && !videoElement.paused) {
+        videoElement.pause();
+      }
+      ipcRenderer.send('stop-playback-confirmed');
+    };
+
+    ipcRenderer.on('prepare-close', prepareClose);
+
+    return () => {
+      ipcRenderer.removeListener('prepare-close', prepareClose);
+    };
+  }, [videoElement]);
+
   const playVideo = useCallback(() => {
     if (!videoElement) {
       return;