fix: autoplay sound overlapping with main window

This created some distortion because while we were hiding the autoplay
window, this would not stop it's media. It's better to stop the media
completely

js/src/autoplay_window/AutoplayApp.tsx

@@ -10,6 +10,13 @@ export function AutoplayApp() {
     return window.electronAutoplay.onPlay((p) => setPayload(p));
   }, []);
 
+  useEffect(() => {
+    return window.electronAutoplay.onStop(() => {
+      mediaRef.current?.pause();
+      setPayload(null);
+    });
+  }, []);
+
   const stop = useCallback(() => {
     mediaRef.current?.pause();
     setPayload(null);

js/src/electron.d.ts

@@ -27,6 +27,7 @@ declare global {
       dismiss: () => void;
       navigate: (data: { networkId: string; streamId: string }) => void;
       onPlay: (callback: (payload: AutoplayPayload) => void) => () => void;
+      onStop: (callback: () => void) => () => void;
       onNavigate: (callback: (data: { networkId: string; streamId: string }) => void) => () => void;
     };
     electronLink: {

js/src/main.ts

@@ -184,10 +184,12 @@ ipcMain.on('autoplay:play', (_event, payload) => {
 });
 
 ipcMain.on('autoplay:dismiss', () => {
+  autoplayWindow?.webContents.send('autoplay:stop');
   autoplayWindow?.hide();
 });
 
 ipcMain.on('autoplay:navigate', (_event, data) => {
+  autoplayWindow?.webContents.send('autoplay:stop');
   autoplayWindow?.hide();
   if (mainWindow) {
     mainWindow.webContents.send('autoplay:navigate', data);

js/src/preload.ts

@@ -29,6 +29,11 @@ contextBridge.exposeInMainWorld('electronAutoplay', {
     ipcRenderer.on('autoplay:play', handler);
     return () => { ipcRenderer.removeListener('autoplay:play', handler); };
   },
+  onStop: (callback: () => void) => {
+    const handler = () => callback();
+    ipcRenderer.on('autoplay:stop', handler);
+    return () => { ipcRenderer.removeListener('autoplay:stop', handler); };
+  },
   onNavigate: (callback: (data: { networkId: string; streamId: string }) => void) => {
     const handler = (_event: Electron.IpcRendererEvent, data: { networkId: string; streamId: string }) => callback(data);
     ipcRenderer.on('autoplay:navigate', handler);