[Fix] Some things missed in the EOS Overlay PR

electron/legendary/eos_overlay/eos_overlay.ts

@@ -188,12 +188,20 @@ function isInstalled() {
   return existsSync(installedVersionPath)
 }
 
-async function isEnabled(prefix: string) {
+async function isEnabled(appName: string, runner: Runner) {
   let enabled = false
 
-  // The overlay can't be enabled globally on Linux
-  if (isLinux && !prefix) {
-    return false
+  let prefix = ''
+  if (isLinux) {
+    const game = Game.get(appName, runner)
+    const { winePrefix, wineVersion } = await game.getSettings()
+    prefix =
+      wineVersion.type === 'proton' ? join(winePrefix, 'pfx') : winePrefix
+
+    // The overlay can't be enabled globally on Linux
+    if (!prefix) {
+      return false
+    }
   }
 
   await runLegendaryCommand(

electron/legendary/eos_overlay/ipc_handler.ts

@@ -23,6 +23,6 @@ ipcMain.handle('enableEosOverlay', async (e, appName, runner) => {
 ipcMain.handle('disableEosOverlay', async (e, appName, runner) => {
   return disable(appName, runner)
 })
-ipcMain.handle('isEosOverlayEnabled', async (e, prefix) => {
-  return isEnabled(prefix)
+ipcMain.handle('isEosOverlayEnabled', async (e, appName, runner) => {
+  return isEnabled(appName, runner)
 })

src/App.css

@@ -75,6 +75,7 @@ html,
 }
 
 .button {
+  --line-height: 17px;
   cursor: pointer;
   padding: 0.75rem;
   background: var(--primary);
@@ -84,7 +85,7 @@ html,
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 17px;
+  line-height: var(--line-height);
   color: #161616;
   border: none;
   max-height: 40px;

src/components/UI/Sidebar/components/CurrentDownload/index.tsx

@@ -70,7 +70,7 @@ export default function CurrentDownload({ appName, runner }: Props) {
               <Box sx={{ width: '100%', mr: 1 }}>
                 <LinearProgress
                   variant="determinate"
-                  value={progress.percent}
+                  value={progress.percent || 0}
                 />
               </Box>
               <Box sx={{ minWidth: 35 }}>

src/screens/Game/GameSubMenu/index.css

@@ -38,3 +38,12 @@
   padding-top: 60px;
   word-break: break-word;
 }
+
+.submenu .MuiCircularProgress-root.is-link {
+  width: auto !important;
+  height: auto !important;
+}
+.submenu .MuiCircularProgress-root.is-link svg {
+  width: var(--line-height) !important;
+  height: var(--line-height) !important;
+}

src/screens/Game/GameSubMenu/index.tsx

@@ -1,6 +1,6 @@
 import './index.css'
 
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import { AppSettings, GameStatus, Runner } from 'src/types'
 
@@ -12,6 +12,7 @@ import { uninstall } from 'src/helpers/library'
 import { NavLink } from 'react-router-dom'
 
 import { ipcRenderer } from 'src/helpers'
+import { CircularProgress } from '@mui/material'
 
 interface Props {
   appName: string
@@ -42,10 +43,10 @@ export default function GamesSubmenu({
   const isWin = platform === 'win32'
   const isMac = platform === 'darwin'
   const isLinux = platform === 'linux'
-  const [info, setInfo] = useState({ prefix: '', wine: '' } as otherInfo)
-  const [isNative, setIsNative] = useState(false)
-  const [eosOverlayEnabled, setEosOverlayEnabled] = useState(false)
-  const [eosOverlayInstalling, setEosOverlayInstalling] = useState(false)
+  const [info, setInfo] = useState<otherInfo>({ prefix: '', wine: '' } as otherInfo)
+  const [isNative, setIsNative] = useState<boolean>(false)
+  const [eosOverlayEnabled, setEosOverlayEnabled] = useState<boolean>(false)
+  const [eosOverlayRefresh, setEosOverlayRefresh] = useState<boolean>(false)
   const eosOverlayAppName = '98bc04bc842e4906993fd6d6644ffb8d'
   const { t } = useTranslation('gamepage')
 
@@ -120,6 +121,43 @@ export default function GamesSubmenu({
     ipcRenderer.send('addShortcut', appName, runner, true)
   }
 
+  async function handleEosOverlay() {
+    setEosOverlayRefresh(true)
+    if (eosOverlayEnabled) {
+      await ipcRenderer.invoke('disableEosOverlay', appName, runner)
+      setEosOverlayEnabled(false)
+    } else {
+      const initialEnableResult = await ipcRenderer.invoke(
+        'enableEosOverlay',
+        appName,
+        runner
+      )
+      const { installNow } = initialEnableResult
+      let { wasEnabled } = initialEnableResult
+
+      if (installNow) {
+        await handleGameStatus({
+          appName: eosOverlayAppName,
+          runner: 'legendary',
+          status: 'installing'
+        })
+
+        await ipcRenderer.invoke('installEosOverlay')
+        await handleGameStatus({
+          appName: eosOverlayAppName,
+          runner: 'legendary',
+          status: 'done'
+        })
+
+        wasEnabled = (
+          await ipcRenderer.invoke('enableEosOverlay', appName, runner)
+        ).wasEnabled
+      }
+      setEosOverlayEnabled(wasEnabled)
+    }
+    setEosOverlayRefresh(false)
+  }
+
   useEffect(() => {
     if (isWin) {
       return
@@ -146,70 +184,23 @@ export default function GamesSubmenu({
     }
     getWineInfo()
     getGameDetails()
-  }, [])
 
-  useEffect(() => {
-    // We only ever check for eosOverlayEnabled if we're on Linux
-    if (isWin) {
-      return
-    }
-    const isEosOverlayEnabled = async () => {
-      const { winePrefix } = await ipcRenderer.invoke(
-        'requestSettings',
-        appName
-      )
-      const enabled = await ipcRenderer.invoke(
-        'isEosOverlayEnabled',
-        winePrefix
-      )
-      setEosOverlayEnabled(enabled)
-    }
-    isEosOverlayEnabled()
-  }, [eosOverlayEnabled])
-
-  useEffect(() => {
     const { status } =
       libraryStatus.filter(
         (game: GameStatus) => game.appName === eosOverlayAppName
       )[0] || {}
-    setEosOverlayInstalling(status === 'installing')
-  }, [eosOverlayInstalling])
+    setEosOverlayRefresh(status === 'installing')
 
-  const handleEosOverlay = useCallback(async () => {
-    if (eosOverlayEnabled) {
-      await ipcRenderer.invoke('disableEosOverlay', appName, runner)
-      setEosOverlayEnabled(false)
-    } else {
-      const initialEnableResult = await ipcRenderer.invoke(
-        'enableEosOverlay',
-        appName,
-        runner
-      )
-      const { installNow } = initialEnableResult
-      let { wasEnabled } = initialEnableResult
-
-      if (installNow) {
-        await handleGameStatus({
-          appName: eosOverlayAppName,
-          runner: 'legendary',
-          status: 'installing'
-        })
-        setEosOverlayInstalling(true)
-        await ipcRenderer.invoke('installEosOverlay')
-        await handleGameStatus({
-          appName: eosOverlayAppName,
-          runner: 'legendary',
-          status: 'done'
-        })
-        setEosOverlayInstalling(false)
-        wasEnabled = (
-          await ipcRenderer.invoke('enableEosOverlay', appName, runner)
-        ).wasEnabled
-      }
-
-      setEosOverlayEnabled(wasEnabled)
+    if (!isWin) {
+      ipcRenderer
+        .invoke('isEosOverlayEnabled', appName, runner)
+        .then((enabled) => setEosOverlayEnabled(enabled))
     }
-  }, [eosOverlayEnabled])
+  }, [])
+
+  const refreshCircle = () => {
+    return <CircularProgress className="link button is-text is-link" />
+  }
 
   return (
     <div className="gameTools subMenuContainer">
@@ -269,16 +260,19 @@ export default function GamesSubmenu({
                 {t('submenu.addShortcut', 'Add shortcut')}
               </button>
             )}
-            {isLinux && !eosOverlayInstalling && (
-              <button
-                className="link button is-text is-link"
-                onClick={handleEosOverlay}
-              >
-                {eosOverlayEnabled
-                  ? t('submenu.disableEosOverlay', 'Disable EOS Overlay')
-                  : t('submenu.enableEosOverlay', 'Enable EOS Overlay')}
-              </button>
-            )}
+            {isLinux &&
+              (eosOverlayRefresh ? (
+                refreshCircle()
+              ) : (
+                <button
+                  className="link button is-text is-link"
+                  onClick={async () => handleEosOverlay()}
+                >
+                  {eosOverlayEnabled
+                    ? t('submenu.disableEosOverlay', 'Disable EOS Overlay')
+                    : t('submenu.enableEosOverlay', 'Enable EOS Overlay')}
+                </button>
+              ))}
           </>
         )}
         <NavLink