🚸 [settings] show AVIF status

IsaacInsoll · Feb 28, 2025 · 8b204c2 · 8b204c2
1 parent 8502be5
commit 8b204c2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/frontend/src/components/FileListView/FileListView.tsx b/frontend/src/components/FileListView/FileListView.tsx
@@ -174,6 +174,7 @@ const Row = ({
         <Table.Td onClick={onClick}>
           <Text fz="sm" ta="right">
             {file.fileSize ? prettyBytes(file.fileSize) : null}
+            {/*  TODO: replace null with 'if folder, show users'*/}
           </Text>
           <Text fz="xs" ta="right" c="dimmed">
             {file.type ?? 'Folder'}

diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
@@ -23,7 +23,7 @@ const documents = {
     "\n  query AccessLogsQuery(\n    $folderId: ID!\n    $userId: ID\n    $includeChildren: Boolean\n    $userType: UserType\n  ) {\n    accessLogs(\n      folderId: $folderId\n      userId: $userId\n      includeChildren: $includeChildren\n      userType: $userType\n    ) {\n      id\n      timestamp\n      type\n      userId\n      folderId\n      ipAddress\n      userAgent\n      folder {\n        ...FolderFragment\n      }\n    }\n  }\n": types.AccessLogsQueryDocument,
     "\n  mutation EditBrandingMutation(\n    $folderId: ID!\n    $mode: ThemeMode\n    $primaryColor: PrimaryColor\n    $logoUrl: String\n  ) {\n    editBranding(\n      folderId: $folderId\n      mode: $mode\n      primaryColor: $primaryColor\n      logoUrl: $logoUrl\n    ) {\n      ...FolderFragment\n    }\n  }\n": types.EditBrandingMutationDocument,
     "\n  mutation DeleteBrandingMutation($folderId: ID!) {\n    deleteBranding(folderId: $folderId) {\n      ...FolderFragment\n    }\n  }\n": types.DeleteBrandingMutationDocument,
-    "\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      #      cacheSize\n      #      mediaSize\n      host\n    }\n  }\n": types.ServerInfoQueryDocument,
+    "\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      host\n    }\n  }\n": types.ServerInfoQueryDocument,
     "\n  query expensiveServerFileSizeQuery {\n    serverInfo {\n      cacheSize\n      mediaSize\n    }\n  }\n": types.ExpensiveServerFileSizeQueryDocument,
     "\n  query TreeSizeQuery($folderId: ID!) {\n    folder(id: $folderId) {\n      parents {\n        id\n        name\n      }\n      ...TreeSizeFragment\n      files {\n        id\n        name\n        type\n        fileSize\n      }\n      subFolders {\n        ...TreeSizeFragment\n        subFolders {\n          ...TreeSizeFragment\n        }\n      }\n    }\n  }\n": types.TreeSizeQueryDocument,
     "\n  fragment TreeSizeFragment on Folder {\n    id\n    name\n    totalFiles\n    totalFolders\n    totalSize\n    totalDirectSize\n  }\n": types.TreeSizeFragmentFragmentDoc,
@@ -103,7 +103,7 @@ export function graphql(source: "\n  mutation DeleteBrandingMutation($folderId:
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      #      cacheSize\n      #      mediaSize\n      host\n    }\n  }\n"): (typeof documents)["\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      #      cacheSize\n      #      mediaSize\n      host\n    }\n  }\n"];
+export function graphql(source: "\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      host\n    }\n  }\n"): (typeof documents)["\n  query serverInfoQuery {\n    serverInfo {\n      version\n      latest\n      databaseUrl\n      dev\n      usePolling\n      host\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/frontend/src/pages/management/ServerInfo.tsx b/frontend/src/pages/management/ServerInfo.tsx
@@ -5,20 +5,21 @@ import { FaGithub } from 'react-icons/fa6';
 import { ReactNode, Suspense } from 'react';
 import prettyBytes from 'pretty-bytes';
 import { LoadingIndicator } from '../../components/LoadingIndicator';
-import { useMe } from '../../hooks/useMe';
+import { useAvifEnabled, useMe } from '../../hooks/useMe';
 import { MdOutlineSdStorage } from 'react-icons/md';
 import { PicrLink } from '../../components/PicrLink';
 
 export const ServerInfo = () => {
   const [result] = useQuery({ query: serverInfoQuery });
-  const data = result?.data?.serverInfo;
+  console.log(result);
+  const server = result?.data?.serverInfo;
   return (
     <Table striped highlightOnHover withTableBorder>
       <TableHeader />
       <Table.Tbody>
-        <Version version={data.version} latest={data.latest} />
+        <Version version={server.version} latest={server.latest} />
         <Row title="Client URL">{window.location.origin}</Row>
-        <Row title="Server URL">{data.host}</Row>
+        <Row title="Server URL">{server.host}</Row>
         <Suspense
           fallback={
             <>
@@ -36,19 +37,31 @@ export const ServerInfo = () => {
         </Suspense>
 
         <Row title="Database URL">
-          <Code>{data.databaseUrl}</Code>
+          <Code>{server.databaseUrl}</Code>
         </Row>
         <Row title="Dev Mode">
-          <Bool value={data.dev} />
+          <Bool value={server.dev} />
         </Row>
         <Row title="Use Polling">
-          <Bool value={data.usePolling} />
+          <Bool value={server.usePolling} />
         </Row>
+        <Suspense>
+          <AvifEnabled />
+        </Suspense>
       </Table.Tbody>
     </Table>
   );
 };
 
+const AvifEnabled = () => {
+  const avif = useAvifEnabled();
+  return (
+    <Row title="AVIF Enabled">
+      <Bool value={avif} />
+    </Row>
+  );
+};
+
 const Version = ({ version, latest }) => {
   const isLatest = latest == version;
   return (
@@ -113,8 +126,6 @@ const serverInfoQuery = gql(/* GraphQL */ `
       databaseUrl
       dev
       usePolling
-      #      cacheSize
-      #      mediaSize
       host
     }
   }