[Fix] Prevent uninstalling a game while it's running (#3779)

* Prevent uninstalling a game while it's running

* refactor

public/locales/en/gamepage.json

@@ -36,6 +36,7 @@
             "cannotUninstallEpic": "Epic games cannot be uninstalled while another Epic game is being installed.",
             "checkbox": "Remove prefix: {{prefix}}{{newLine}}Note: This can't be undone and will also remove not backed up save files.",
             "dlc": "Do you want to uninstall \"{{title}}\" (DLC)?",
+            "gameIsRunning": "{{title}} is running. Close the game to uninstall it.",
             "message": "Do you want to uninstall \"{{title}}\"?",
             "prefix_warning": "The Wine prefix for this game is the default prefix. If you really want to delete it, you have to do it manually.",
             "settingcheckbox": "Erase settings and remove log{{newLine}}Note: This can't be undone. Any modified settings will be forgotten and log will be deleted.",

src/frontend/components/UI/UninstallModal/index.tsx

@@ -34,9 +34,14 @@ const UninstallModal: React.FC<UninstallModalProps> = function ({
   const [showUninstallModal, setShowUninstallModal] = useState(false)
   const navigate = useNavigate()
   const location = useLocation()
-  const { installingEpicGame } = useContext(ContextProvider)
+  const { installingEpicGame, libraryStatus } = useContext(ContextProvider)
   const [gameTitle, setGameTitle] = useState('')
 
+  const isGameRunning = libraryStatus.find(
+    (st) =>
+      st.appName === appName && st.runner === runner && st.status === 'playing'
+  )
+
   const checkIfIsNative = async () => {
     // This assumes native games are installed should be changed in the future
     // if we add option to install windows games even if native is available
@@ -125,6 +130,32 @@ const UninstallModal: React.FC<UninstallModalProps> = function ({
     )
   }
 
+  if (isGameRunning) {
+    return (
+      <>
+        {showUninstallModal && (
+          <Dialog onClose={onClose} showCloseButton className="uninstall-modal">
+            <DialogHeader onClose={onClose}>
+              {t('gamepage:box.uninstall.title')}
+            </DialogHeader>
+            <DialogContent>
+              {t('gamepage:box.uninstall.gameIsRunning', {
+                defaultValue:
+                  '{{title}} is running. Close the game to uninstall it.',
+                title: gameTitle
+              })}
+            </DialogContent>
+            <DialogFooter>
+              <button onClick={onClose} className={`button outline`}>
+                {t('box.close', 'Close')}
+              </button>
+            </DialogFooter>
+          </Dialog>
+        )}
+      </>
+    )
+  }
+
   // normal dialog to uninstall a game
   return (
     <>

src/frontend/screens/Game/GameSubMenu/index.tsx

@@ -12,6 +12,7 @@ import { NavLink } from 'react-router-dom'
 import { InstallModal } from 'frontend/screens/Library/components'
 import { CircularProgress } from '@mui/material'
 import UninstallModal from 'frontend/components/UI/UninstallModal'
+import GameContext from '../GameContext'
 
 interface Props {
   appName: string
@@ -51,6 +52,7 @@ export default function GamesSubmenu({
     showDialogModal,
     setIsSettingsModalOpen
   } = useContext(ContextProvider)
+  const { is } = useContext(GameContext)
   const isWin = platform === 'win32'
   const isLinux = platform === 'linux'
 
@@ -281,6 +283,7 @@ export default function GamesSubmenu({
               <button
                 onClick={async () => setShowUninstallModal(true)}
                 className="link button is-text is-link"
+                disabled={is.playing}
               >
                 {t('button.uninstall', 'Uninstall')}
               </button>{' '}

src/frontend/screens/Library/components/GameCard/index.tsx

@@ -358,7 +358,7 @@ const GameCard = ({
       // uninstall
       label: t('button.uninstall'),
       onclick: onUninstallClick,
-      show: isInstalled && !isUpdating
+      show: isInstalled && !isUpdating && !isPlaying
     }
   ]