image viewer

backend/routers/index.ts

@@ -1,4 +1,4 @@
-import { BusBoyFile, AssFile } from 'ass';
+import { BusBoyFile, AssFile, AssUser } from 'ass';
 
 import fs from 'fs-extra';
 import bb from 'express-busboy';
@@ -13,6 +13,7 @@ import { random } from '../generators';
 import { UserConfig } from '../UserConfig';
 import { getFileS3, uploadFileS3 } from '../s3';
 import { rateLimiterMiddleware } from '../ratelimit';
+import { DBManager } from '../sql/database';
 
 const router = Router({ caseSensitive: true });
 
@@ -96,7 +97,34 @@ router.post('/', rateLimiterMiddleware('upload', UserConfig.config?.rateLimit?.u
 	}
 });
 
-router.get('/:fakeId', (req, res) => res.redirect(`/direct/${req.params.fakeId}`));
+router.get('/:fakeId', async (req, res) => {
+	if (!UserConfig.ready) res.redirect('/setup');
+
+	// Get the ID
+	const fakeId = req.params.fakeId;
+
+	// Get the file metadata
+	let _data;
+	try { _data = await DBManager.get('assfiles', fakeId); }
+	catch (err) {
+		log.error('Failed to get', fakeId);
+		console.error(err);
+		return res.status(500).send();
+	}
+
+	if (!_data) return res.status(404).send();
+	else {
+		let meta = _data as AssFile;
+		let user = await DBManager.get('assusers', meta.uploader) as AssUser | undefined;
+
+		res.render("viewer", {
+			url:      `/direct/${fakeId}`,
+			uploader: user?.username ?? 'unknown',
+			size:     meta.size,
+			time:     meta.timestamp
+		});
+	}
+});
 
 router.get('/direct/:fakeId', async (req, res) => {
 	if (!UserConfig.ready) res.redirect('/setup');

tailwind.css

@@ -24,6 +24,15 @@
 	.setup-panel>sl-input {
 		@apply mb-4;
 	}
+
+	.res-image {
+		@apply max-h-[75vh];
+	}
+
+	/* THANKS TAILWIND */
+	sl-divider {
+		border: solid var(--width) var(--color);
+	}
 }
 
 @layer utilities {

views/viewer.pug

@@ -0,0 +1,53 @@
+doctype html 
+html.dark.sl-theme-dark(lang='en')
+    head
+        //- this stuff
+        meta(charset='UTF-8')
+        meta(name='viewport', content='width=device-witdh, initial-scale=1.0')
+        meta(name='theme-color' content='black')
+        link(rel='stylesheet' href='/.css')
+
+        //- title
+        title ass 🍑
+
+        //- embed data
+
+        //- mixins
+        include ../node_modules/shoelace-fontawesome-pug/sl-fa-mixin.pug
+        include ../node_modules/shoelace-pug-loader/loader.pug
+
+        //- shoelace
+        +slTheme('dark')
+        +slAuto
+    body.w-screen.h-screen.flex-col
+        div.w-full.h-full.flex.justify-center.items-center.text-center
+            main.flex.flex-col
+                - let borderStyle = { 'border-color': 'var(--sl-color-neutral-200)' };
+                header.border-t.border-x.flex.h-8.bg-stone-900(style=borderStyle)
+                    - let dividerStyle = { '--spacing': '0px', 'margin-left': '8px' };
+
+                    //- uploader
+                    span
+                        sl-icon.p-2.align-middle(name='person-fill', label='uploader')
+                        | #{uploader}
+                    sl-divider(vertical, style=dividerStyle)
+                    //- file size
+                    span
+                        sl-icon.p-2.align-middle(name='database-fill', label='size')
+                        sl-format-bytes(value=size)
+                    sl-divider(vertical, style=dividerStyle)
+                    //- upload date
+                    span
+                        //- calendar is a funny word
+                        sl-icon.p-2.align-middle(name='calendar-fill', label='upload date')
+                        sl-format-date(value=time)
+                    sl-divider(vertical, style=dividerStyle)
+                    
+                    //- spacer
+                    div.flex-grow
+
+                    //- download button
+                    sl-divider(vertical, style=dividerStyle)
+                    span.float-right
+                        sl-icon-button(name='download', href=url, download, label='download')
+                img.res-image.border-b.border-x(src=url, style=borderStyle)