Add files

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+import { Center, Group, Stack } from '@mantine/core';
+import isElectron from 'is-electron';
+import { RiCheckFill } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
+import { Button, Text } from '/@/renderer/components';
+import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
+import { MpvRequired } from '/@/renderer/features/action-required/components/mpv-required';
+import { ServerCredentialRequired } from '/@/renderer/features/action-required/components/server-credential-required';
+import { ServerRequired } from '/@/renderer/features/action-required/components/server-required';
+import { AnimatedPage } from '/@/renderer/features/shared';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useCurrentServer } from '/@/renderer/store';
+
+const localSettings = window.electron.localSettings;
+
+const ActionRequiredRoute = () => {
+  const currentServer = useCurrentServer();
+  const [isMpvRequired, setIsMpvRequired] = useState(false);
+  const isServerRequired = !currentServer;
+  // const isCredentialRequired = currentServer?.noCredential && !serverToken;
+  const isCredentialRequired = false;
+
+  useEffect(() => {
+    const getMpvPath = async () => {
+      if (!isElectron()) return setIsMpvRequired(false);
+      const mpvPath = await localSettings.get('mpv_path');
+      return setIsMpvRequired(!mpvPath);
+    };
+
+    getMpvPath();
+  }, []);
+
+  const checks = [
+    {
+      component: <MpvRequired />,
+      title: 'MPV required',
+      valid: !isMpvRequired,
+    },
+    {
+      component: <ServerCredentialRequired />,
+      title: 'Credentials required',
+      valid: !isCredentialRequired,
+    },
+    {
+      component: <ServerRequired />,
+      title: 'Server required',
+      valid: !isServerRequired,
+    },
+  ];
+
+  const canReturnHome = checks.every((c) => c.valid);
+  const displayedCheck = checks.find((c) => !c.valid);
+
+  return (
+    <AnimatedPage>
+      <Center sx={{ height: '100%', width: '100vw' }}>
+        <Stack
+          spacing="xl"
+          sx={{ maxWidth: '50%' }}
+        >
+          <Group noWrap>
+            {displayedCheck && (
+              <ActionRequiredContainer title={displayedCheck.title}>
+                {displayedCheck?.component}
+              </ActionRequiredContainer>
+            )}
+          </Group>
+          <Stack mt="2rem">
+            {canReturnHome && (
+              <>
+                <Group
+                  noWrap
+                  position="center"
+                >
+                  <RiCheckFill
+                    color="var(--success-color)"
+                    size={30}
+                  />
+                  <Text size="xl">No issues found</Text>
+                </Group>
+                <Button
+                  component={Link}
+                  disabled={!canReturnHome}
+                  to={AppRoute.HOME}
+                  variant="filled"
+                >
+                  Go back
+                </Button>
+              </>
+            )}
+          </Stack>
+        </Stack>
+      </Center>
+    </AnimatedPage>
+  );
+};
+
+export default ActionRequiredRoute;

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -0,0 +1,38 @@
+import { Center, Group, Stack } from '@mantine/core';
+import { RiQuestionLine } from 'react-icons/ri';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Button, Text } from '/@/renderer/components';
+import { AnimatedPage } from '/@/renderer/features/shared';
+
+const InvalidRoute = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <AnimatedPage>
+      <Center sx={{ height: '100%', width: '100%' }}>
+        <Stack>
+          <Group
+            noWrap
+            position="center"
+          >
+            <RiQuestionLine
+              color="var(--warning-color)"
+              size={30}
+            />
+            <Text size="xl">Page not found</Text>
+          </Group>
+          <Text>{location.pathname}</Text>
+          <Button
+            variant="filled"
+            onClick={() => navigate(-1)}
+          >
+            Go back
+          </Button>
+        </Stack>
+      </Center>
+    </AnimatedPage>
+  );
+};
+
+export default InvalidRoute;