Add files

src/renderer/features/action-required/components/action-required-container.tsx

@@ -0,0 +1,26 @@
+import { Stack, Group } from '@mantine/core';
+import { RiAlertFill } from 'react-icons/ri';
+import { Text } from '/@/renderer/components';
+
+interface ActionRequiredContainerProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+export const ActionRequiredContainer = ({ title, children }: ActionRequiredContainerProps) => (
+  <Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
+    <Group>
+      <RiAlertFill
+        color="var(--warning-color)"
+        size={30}
+      />
+      <Text
+        size="xl"
+        sx={{ textTransform: 'uppercase' }}
+      >
+        {title}
+      </Text>
+    </Group>
+    <Stack>{children}</Stack>
+  </Stack>
+);

src/renderer/features/action-required/components/error-fallback.tsx

@@ -0,0 +1,83 @@
+import { Box, Center, Divider, Group, Stack } from '@mantine/core';
+import type { FallbackProps } from 'react-error-boundary';
+import { RiErrorWarningLine, RiArrowLeftLine } from 'react-icons/ri';
+import { useNavigate, useRouteError } from 'react-router';
+import styled from 'styled-components';
+import { Button, Text } from '/@/renderer/components';
+
+const Container = styled(Box)`
+  background: var(--main-bg);
+`;
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  return (
+    <Container>
+      <Center sx={{ height: '100vh' }}>
+        <Stack sx={{ maxWidth: '50%' }}>
+          <Group spacing="xs">
+            <RiErrorWarningLine
+              color="var(--danger-color)"
+              size={30}
+            />
+            <Text size="lg">Something went wrong</Text>
+          </Group>
+          <Text>{error.message}</Text>
+          <Button
+            variant="filled"
+            onClick={resetErrorBoundary}
+          >
+            Reload
+          </Button>
+        </Stack>
+      </Center>
+    </Container>
+  );
+};
+
+export const RouteErrorBoundary = () => {
+  const navigate = useNavigate();
+  const error = useRouteError() as any;
+  console.log('error', error);
+
+  const handleReload = () => {
+    navigate(0);
+  };
+
+  const handleReturn = () => {
+    navigate(-1);
+  };
+
+  return (
+    <Container>
+      <Center sx={{ height: '100vh' }}>
+        <Stack sx={{ maxWidth: '50%' }}>
+          <Group>
+            <RiErrorWarningLine
+              color="var(--danger-color)"
+              size={30}
+            />
+            <Text size="lg">Something went wrong</Text>
+          </Group>
+          <Divider my={5} />
+          <Text size="sm">{error?.message}</Text>
+          <Group grow>
+            <Button
+              leftIcon={<RiArrowLeftLine />}
+              sx={{ flex: 0.5 }}
+              variant="default"
+              onClick={handleReturn}
+            >
+              Go back
+            </Button>
+            <Button
+              variant="filled"
+              onClick={handleReload}
+            >
+              Reload
+            </Button>
+          </Group>
+        </Stack>
+      </Center>
+    </Container>
+  );
+};

src/renderer/features/action-required/components/mpv-required.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import isElectron from 'is-electron';
+import { FileInput, Text, Button } from '/@/renderer/components';
+
+const localSettings = window.electron.localSettings;
+
+export const MpvRequired = () => {
+  const [mpvPath, setMpvPath] = useState('');
+  const handleSetMpvPath = (e: File) => {
+    localSettings.set('mpv_path', e.path);
+  };
+
+  useEffect(() => {
+    const getMpvPath = async () => {
+      if (!isElectron()) return setMpvPath('');
+      const mpvPath = localSettings.get('mpv_path') as string;
+      return setMpvPath(mpvPath);
+    };
+
+    getMpvPath();
+  }, []);
+
+  return (
+    <>
+      <Text size="lg">Set your MPV executable location below and restart the application.</Text>
+      <Text>
+        MPV is available at the following:{' '}
+        <a
+          href="https://mpv.io/installation/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          https://mpv.io/
+        </a>
+      </Text>
+      <FileInput
+        placeholder={mpvPath}
+        onChange={handleSetMpvPath}
+      />
+      <Button onClick={() => localSettings.restart()}>Restart</Button>
+    </>
+  );
+};

src/renderer/features/action-required/components/server-credential-required.tsx

@@ -0,0 +1,18 @@
+import { Text } from '/@/renderer/components';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const ServerCredentialRequired = () => {
+  const currentServer = useCurrentServer();
+
+  return (
+    <>
+      <Text size="lg">
+        The selected server &apos;{currentServer?.name}&apos; requires an additional login to
+        access.
+      </Text>
+      <Text size="lg">
+        Add your credentials in the &apos;manage servers&apos; menu or switch to a different server.
+      </Text>
+    </>
+  );
+};

src/renderer/features/action-required/components/server-required.tsx

@@ -0,0 +1,10 @@
+import { Text } from '/@/renderer/components';
+
+export const ServerRequired = () => {
+  return (
+    <>
+      <Text size="xl">No server selected.</Text>
+      <Text>Add or select a server in the file menu.</Text>
+    </>
+  );
+};