Fix and Feature dump

.npmrc

@@ -0,0 +1 @@
+package-lock=false

package.json

@@ -55,7 +55,7 @@
     "fflate": "^0.7.4",
     "find-my-way": "^7.5.0",
     "katex": "^0.16.4",
-    "mantine-datatable": "^1.8.6",
+    "mantine-datatable": "2.0.1",
     "minio": "^7.0.32",
     "ms": "canary",
     "multer": "^1.4.5-lts.1",

src/components/File/FileModal.tsx

@@ -50,6 +50,7 @@ export default function FileModal({
   refresh,
   reducedActions = false,
   exifEnabled,
+  compress,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -58,6 +59,7 @@ export default function FileModal({
   refresh: () => void;
   reducedActions?: boolean;
   exifEnabled?: boolean;
+  compress: boolean;
 }) {
   const deleteFile = useFileDelete();
   const favoriteFile = useFileFavorite();
@@ -215,11 +217,11 @@ export default function FileModal({
       <Stack>
         <Type
           file={file}
-          src={`/r/${encodeURI(file.name)}`}
+          src={`/r/${encodeURI(file.name)}?compress=${compress}`}
           alt={file.name}
           popup
-          sx={{ minHeight: 200 }}
-          style={{ minHeight: 200 }}
+          sx={{ minHeight: 200, overflowY: 'scroll', maxHeight: 500 }}
+          style={{ minHeight: 200, overflowY: 'scroll', maxHeight: 500 }}
           disableMediaPreview={false}
           overrideRender={overrideRender}
           setOverrideRender={setOverrideRender}

src/components/File/index.tsx

@@ -34,6 +34,7 @@ export default function File({
   exifEnabled,
   refreshImages,
   reducedActions = false,
+  onDash,
 }) {
   const [open, setOpen] = useState(false);
   const deleteFile = useFileDelete();
@@ -57,9 +58,10 @@ export default function File({
         refresh={refresh}
         reducedActions={reducedActions}
         exifEnabled={exifEnabled}
+        compress={onDash}
       />
 
-      <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>
+      <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md' onClick={() => setOpen(true)}>
         <Card.Section>
           <LoadingOverlay visible={loading} />
           <Type
@@ -78,9 +80,8 @@ export default function File({
               width: '100%',
               cursor: 'pointer',
             }}
-            src={`/r/${encodeURI(image.name)}`}
+            src={`/r/${encodeURI(image.name)}?compress=${onDash}`}
             alt={image.name}
-            onClick={() => setOpen(true)}
             disableMediaPreview={disableMediaPreview}
           />
         </Card.Section>

src/components/Theming.tsx

@@ -99,6 +99,7 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
           },
           Modal: {
             defaultProps: {
+              closeButtonProps: { size: 'lg' },
               centered: true,
               transitionProps: {
                 exitDuration: 100,
@@ -118,7 +119,7 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
           },
           LoadingOverlay: {
             defaultProps: {
-              overlayProps: {
+              overlayprops: {
                 blur: 3,
                 color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
               },

src/components/Type.tsx

@@ -45,8 +45,8 @@ function Placeholder({ text, Icon, ...props }) {
     );
 
   return (
-    <Box sx={{ height: 200 }} {...props}>
-      <Center sx={{ height: 200 }}>
+    <Box sx={{ height: 320 }} {...props}>
+      <Center sx={{ height: 320 }}>
         <PlaceholderContent text={text} Icon={Icon} />
       </Center>
     </Box>
@@ -158,6 +158,8 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
       image: (
         <Image
           placeholder={<PlaceholderContent Icon={IconPhotoCancel} text={'Image failed to load...'} />}
+          height={320}
+          fit='contain'
           {...props}
         />
       ),

src/components/pages/Dashboard/RecentFiles.tsx

@@ -5,7 +5,7 @@ import File from 'components/File';
 import MutedText from 'components/MutedText';
 import { useRecent } from 'lib/queries/files';
 
-export default function RecentFiles({ disableMediaPreview, exifEnabled }) {
+export default function RecentFiles({ disableMediaPreview, exifEnabled, compress }) {
   const recent = useRecent('media');
 
   return (
@@ -25,6 +25,7 @@ export default function RecentFiles({ disableMediaPreview, exifEnabled }) {
                 disableMediaPreview={disableMediaPreview}
                 exifEnabled={exifEnabled}
                 refreshImages={recent.refetch}
+                onDash={compress}
               />
             ))
           ) : (

src/components/pages/Dashboard/index.tsx

@@ -22,7 +22,7 @@ import { useRecoilValue } from 'recoil';
 import RecentFiles from './RecentFiles';
 import { StatCards } from './StatCards';
 
-export default function Dashboard({ disableMediaPreview, exifEnabled }) {
+export default function Dashboard({ disableMediaPreview, exifEnabled, compress }) {
   const user = useRecoilValue(userSelector);
 
   const recent = useRecent('media');
@@ -138,6 +138,7 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
           refresh={() => files.refetch()}
           reducedActions={false}
           exifEnabled={exifEnabled}
+          compress={compress}
         />
       )}
 
@@ -148,7 +149,7 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
 
       <StatCards />
 
-      <RecentFiles disableMediaPreview={disableMediaPreview} exifEnabled={exifEnabled} />
+      <RecentFiles disableMediaPreview={disableMediaPreview} exifEnabled={exifEnabled} compress={compress} />
 
       <Box my='sm'>
         <Title>Files</Title>

src/components/pages/Files/FilePagation.tsx

@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-export default function FilePagation({ disableMediaPreview, exifEnabled, queryPage }) {
+export default function FilePagation({ disableMediaPreview, exifEnabled, queryPage, compress }) {
   const [checked, setChecked] = useRecoilState(showNonMediaSelector);
   const [numPages, setNumPages] = useState(Number(queryPage)); // just set it to the queryPage, since the req may have not loaded yet
   const [page, setPage] = useState(Number(queryPage));
@@ -75,6 +75,7 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
                     disableMediaPreview={disableMediaPreview}
                     exifEnabled={exifEnabled}
                     refreshImages={pages.refetch}
+                    onDash={compress}
                   />
                 </div>
               ))

src/components/pages/Files/index.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import FilePagation from './FilePagation';
 
-export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
+export default function Files({ disableMediaPreview, exifEnabled, queryPage, compress }) {
   const [favoritePage, setFavoritePage] = useState(1);
   const [favoriteNumPages, setFavoriteNumPages] = useState(0);
   const favoritePages = usePaginatedFiles(favoritePage, 'media', true);
@@ -50,6 +50,7 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
                           disableMediaPreview={disableMediaPreview}
                           exifEnabled={exifEnabled}
                           refreshImages={favoritePages.refetch}
+                          onDash={compress}
                         />
                       </div>
                     ))
@@ -75,6 +76,7 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
         disableMediaPreview={disableMediaPreview}
         exifEnabled={exifEnabled}
         queryPage={queryPage}
+        compress={compress}
       />
     </>
   );

src/components/pages/Folders/ViewFolderFilesModal.tsx

@@ -3,7 +3,14 @@ import File from 'components/File';
 import MutedText from 'components/MutedText';
 import { useFolder } from 'lib/queries/folders';
 
-export default function ViewFolderFilesModal({ open, setOpen, folderId, disableMediaPreview, exifEnabled }) {
+export default function ViewFolderFilesModal({
+  open,
+  setOpen,
+  folderId,
+  disableMediaPreview,
+  exifEnabled,
+  compress,
+}) {
   if (!folderId) return null;
 
   const folder = useFolder(folderId, true);
@@ -26,6 +33,7 @@ export default function ViewFolderFilesModal({ open, setOpen, folderId, disableM
                   image={file}
                   exifEnabled={exifEnabled}
                   refreshImages={folder.refetch}
+                  onDash={compress}
                 />
               ))}
             </SimpleGrid>

src/components/pages/Folders/index.tsx

@@ -22,7 +22,7 @@ import { useEffect, useState } from 'react';
 import CreateFolderModal from './CreateFolderModal';
 import ViewFolderFilesModal from './ViewFolderFilesModal';
 
-export default function Folders({ disableMediaPreview, exifEnabled }) {
+export default function Folders({ disableMediaPreview, exifEnabled, compress }) {
   const folders = useFolders();
   const [createOpen, setCreateOpen] = useState(false);
   const [createWithFile, setCreateWithFile] = useState(null);
@@ -113,6 +113,7 @@ export default function Folders({ disableMediaPreview, exifEnabled }) {
         folderId={activeFolderId}
         disableMediaPreview={disableMediaPreview}
         exifEnabled={exifEnabled}
+        compress={compress}
       />
 
       <Group mb='md'>

src/lib/config/Config.ts

@@ -5,11 +5,18 @@ export interface ConfigCore {
   port: number;
   database_url: string;
   logger: boolean;
+  compression: ConfigCompression;
 
   stats_interval: number;
   invites_interval: number;
 }
 
+export interface ConfigCompression {
+  enabled: boolean;
+  threshold: number;
+  on_dashboard: boolean;
+}
+
 export interface ConfigDatasource {
   type: 'local' | 's3' | 'supabase';
   local: ConfigLocalDatasource;

src/lib/config/readConfig.ts

@@ -64,6 +64,9 @@ export default function readConfig() {
     map('CORE_LOGGER', 'boolean', 'core.logger'),
     map('CORE_STATS_INTERVAL', 'number', 'core.stats_interval'),
     map('CORE_INVITES_INTERVAL', 'number', 'core.invites_interval'),
+    map('CORE_COMPRESSION_ENABLED', 'boolean', 'core.compression.enabled'),
+    map('CORE_COMPRESSION_THRESHOLD', 'human-to-byte', 'core.compression.threshold'),
+    map('CORE_COMPRESSION_ON_DASHBOARD', 'boolean', 'core.compression.on_dashboard'),
 
     map('DATASOURCE_TYPE', 'string', 'datasource.type'),
 

src/lib/config/validateConfig.ts

@@ -34,6 +34,16 @@ const validator = s.object({
     logger: s.boolean.default(false),
     stats_interval: s.number.default(1800),
     invites_interval: s.number.default(1800),
+    compression: s
+      .object({
+        enabled: s.boolean.default(false),
+        threshold: s.number.default(2048),
+        on_dashboard: s.boolean.default(true),
+      })
+      .default({
+        enabled: false,
+        on_dashboard: false,
+      }),
   }),
   datasource: s
     .object({

src/lib/discord.ts

@@ -23,7 +23,7 @@ export function parseContent(
           image: content.embed.image,
         }
       : null,
-    url: args[3],
+    url: args.link,
   };
 }
 

src/lib/middleware/getServerSideProps.ts

@@ -64,6 +64,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async (ct
       max_size: config.chunks.max_size,
       totp_enabled: config.mfa.totp_enabled,
       exif_enabled: config.exif.enabled,
+      compress: config.core.compression.on_dashboard,
     } as ServerSideProps,
   };
 

src/lib/utils/parser.ts

@@ -24,11 +24,21 @@ export function parseString(str: string, value: ParseValue) {
       continue;
     }
 
-    if (matches.groups.prop in ['password', 'avatar']) {
+    if (['password', 'avatar'].includes(matches.groups.prop)) {
       str = replaceCharsFromString(str, '{unknown_property}', matches.index, re.lastIndex);
       re.lastIndex = matches.index;
       continue;
     }
+    if (['originalName', 'name'].includes(matches.groups.prop)) {
+      str = replaceCharsFromString(
+        str,
+        decodeURIComponent(escape(getV[matches.groups.prop])),
+        matches.index,
+        re.lastIndex
+      );
+      re.lastIndex = matches.index;
+      continue;
+    }
 
     const v = getV[matches.groups.prop];
 

src/pages/api/auth/login.ts

@@ -22,6 +22,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         username: 'administrator',
         password: await hashPassword('password'),
         token: createToken(),
+        superAdmin: true,
         administrator: true,
       },
     });

src/pages/api/user/[id].ts

@@ -72,9 +72,14 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       return res.json(newTarget);
     });
   } else if (req.method === 'PATCH') {
-    if (target.administrator && !user.superAdmin) return res.forbidden('cannot modify administrator');
+    if (
+      (target.administrator && !user.superAdmin) ||
+      (target.administrator && user.administrator && !user.superAdmin)
+    )
+      return res.forbidden('cannot modify administrator');
 
     logger.debug(`attempting to update user ${id} with ${JSON.stringify(req.body)}`);
+    logger.debug(`user ${id} has ${!req.body.administrator} in administrator`);
 
     if (req.body.password) {
       const hashed = await hashPassword(req.body.password);
@@ -84,7 +89,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       });
     }
 
-    if (req.body.administrator) {
+    if (typeof req.body.administrator != 'undefined') {
       await prisma.user.update({
         where: { id: target.id },
         data: { administrator: req.body.administrator },

src/pages/api/user/files.ts

@@ -99,6 +99,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         id: true,
         favorite: true,
         views: true,
+        folderId: true,
         maxViews: true,
         size: true,
       },

src/pages/api/user/recent.ts

@@ -26,6 +26,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       maxViews: true,
       folderId: true,
       size: true,
+      favorite: true,
     },
   });
 

src/pages/dashboard/files.tsx

@@ -22,6 +22,7 @@ export default function FilesPage(props) {
           disableMediaPreview={props.disable_media_preview}
           exifEnabled={props.exif_enabled}
           queryPage={props.queryPage}
+          compress={props.compress}
         />
       </Layout>
     </>

src/pages/dashboard/folders.tsx

@@ -18,7 +18,11 @@ export default function FilesPage(props) {
       </Head>
 
       <Layout props={props}>
-        <Folders disableMediaPreview={props.disable_media_preview} exifEnabled={props.exif_enabled} />
+        <Folders
+          disableMediaPreview={props.disable_media_preview}
+          exifEnabled={props.exif_enabled}
+          compress={props.compress}
+        />
       </Layout>
     </>
   );