Address feedback

common/components/Menubar.svelte

@@ -13,22 +13,10 @@
 
   const debug = persisted('debug', '', {
     serializer: {
-      parse: (e) => e,
+      parse: e => e,
-      stringify: (e) => e
+      stringify: e => e
     }
   })
-
-  function minimize () {
-    window.ipcRenderer.send('minimize')
-  }
-
-  function maximize () {
-    window.ipcRenderer.send('maximize')
-  }
-
-  function closeapp () {
-    window.ipcRenderer.send('closeapp')
-  }
 </script>
 
 <div class='w-full z-101 navbar bg-transparent border-0 p-0 d-flex'>
@@ -37,10 +25,10 @@
       <img src='./logo_filled.png' class='position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5' alt='ico' use:click={close} />
     {/if}
   </div>
-  <div id='window-controls'>
+  <div class='window-controls'>
-    <button class='button' id='max-button' on:click={minimize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
+    <button class='button max-button'  on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
-    <button class='button' id='restore-button' on:click={maximize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
+    <button class='button restore-button'  on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
-    <button class='button' id='close-button' on:click={closeapp}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='evenodd' points='11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1' /></svg></button>
+    <button class='button close-button' on:click={() => IPC.emit('close')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='evenodd' points='11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1' /></svg></button>
   </div>
   <div class='h-full bg-dark flex-grow-1'>
   </div>
@@ -64,7 +52,7 @@
     --navbar-height: 32px !important;
   }
   .z-101 {
-    z-index: 101 !important;
+    z-index: 101 !important
   }
   .draggable {
     -webkit-app-region: drag;
@@ -74,7 +62,7 @@
   }
   img {
     top: 0;
-    -webkit-app-region: no-drag;
+    -webkit-app-region: no-drag
   }
   svg {
     width: 18px;
@@ -90,7 +78,7 @@
       height: 0;
     }
   }
-  #window-controls {
+  .window-controls {
     display: grid;
     grid-template-columns: repeat(3, 46px);
     position: absolute;
@@ -98,12 +86,10 @@
     right: 0;
     height: 100%;
   }
-
+  .window-controls {
-  #window-controls {
     -webkit-app-region: no-drag;
   }
-
+  .window-controls .button {
-  #window-controls .button {
     grid-row: 1 / span 1;
     display: flex;
     justify-content: center;
@@ -114,24 +100,19 @@
     border: none;
     color: #ffffff;
   }
-
+  .window-controls .button {
-  #window-controls .button {
     user-select: none;
   }
-
+  .window-controls .button:hover {
-  #window-controls .button:hover {
     background: rgba(24, 24, 28, 0.2);
   }
-
+  .window-controls .button:active {
-  #window-controls .button:active {
     background: rgba(24, 24, 28, 0.4);
   }
-
+  .close-button:hover {
-  #close-button:hover {
     background: #e81123 !important;
   }
-
+  .close-button:active {
-  #close-button:active {
     background: #f1707a !important;
   }
   .svg-controls {

electron/src/main/app.js

@@ -36,9 +36,7 @@ export default class App {
       allowRunningInsecureContent: false,
       enableBlinkFeatures: 'FontAccess, AudioVideoTracks',
       backgroundThrottling: false,
-      preload: join(__dirname, '/preload.js'),
+      preload: join(__dirname, '/preload.js')
-      contextIsolation: true,
-      nodeIntegration: false
     },
     icon: join(__dirname, '/logo_filled.png'),
     show: false
@@ -62,6 +60,11 @@ export default class App {
     this.mainWindow.on('closed', () => this.destroy())
     this.webtorrentWindow.on('closed', () => this.destroy())
     ipcMain.on('close', () => this.destroy())
+    ipcMain.on('minimize', () => BrowserWindow.getFocusedWindow()?.minimize())
+    ipcMain.on('maximize', () => {
+      const focusedWindow = BrowserWindow.getFocusedWindow()
+      focusedWindow?.isMaximized() ? focusedWindow.unmaximize() : focusedWindow.maximize()
+});
     app.on('before-quit', e => {
       if (this.destroyed) return
       e.preventDefault()
@@ -156,28 +159,3 @@ export default class App {
     if (!this.updater.install(forceRunAfter)) app.quit()
   }
 }
-
-ipcMain.on('minimize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    focusedWindow.minimize()
-  }
-})
-
-ipcMain.on('maximize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    if (focusedWindow.isMaximized()) {
-      focusedWindow.unmaximize()
-    } else {
-      focusedWindow.maximize()
-    }
-  }
-})
-
-ipcMain.on('closeapp', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    focusedWindow.close()
-  }
-})

electron/src/preload/preload.js

@@ -30,8 +30,3 @@ ipcRenderer.once('port', ({ ports }) => {
     }
   })
 })
-
-contextBridge.exposeInMainWorld('ipcRenderer', {
-  send: (channel, data) => ipcRenderer.send(channel, data),
-  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
-})