v3: added emoji picker, various bug and layout fixes

2026-03-22 20:24:29 +00:00
parent a104113e05
commit c5051e3485
24 changed files with 384 additions and 177 deletions
--- a/api/routes/avatars.ts
+++ b/api/routes/avatars.ts
@@ -3,35 +3,12 @@ import { authMiddleware } from "../middleware/auth.ts";
 import { getUserById, updateUserAvatar } from "../services/user-service.ts";
 import { updateClientAvatar } from "../services/ws-service.ts";
 import { APIErrorCode, APIException } from "../model/interfaces.ts";
-
-const AVATARS_DIR = "api/uploads/avatars";
-const MAX_AVATAR_SIZE = 5 * 1024 * 1024; // 5 MB
-const ALLOWED_AVATAR_MIMES = new Set([
-  "image/jpeg",
-  "image/png",
-  "image/gif",
-  "image/webp",
-]);
-
-// Magic bytes for image validation
-const MAGIC: Array<{ mime: string; bytes: number[]; offset?: number }> = [
-  { mime: "image/jpeg", bytes: [0xFF, 0xD8, 0xFF] },
-  { mime: "image/png", bytes: [0x89, 0x50, 0x4E, 0x47] },
-  { mime: "image/gif", bytes: [0x47, 0x49, 0x46, 0x38] },
-  { mime: "image/webp", bytes: [0x52, 0x49, 0x46, 0x46], offset: 0 }, // RIFF
-];
-
-function checkMagicBytes(data: Uint8Array, mime: string): boolean {
-  if (mime === "image/webp") {
-    // RIFF....WEBP
-    return data[0] === 0x52 && data[1] === 0x49 && data[2] === 0x46 &&
-      data[3] === 0x46 && data[8] === 0x57 && data[9] === 0x45 &&
-      data[10] === 0x42 && data[11] === 0x50;
-  }
-  const entry = MAGIC.find((m) => m.mime === mime);
-  if (!entry) return false;
-  return entry.bytes.every((b, i) => data[i] === b);
-}
+import {
+  AVATARS_DIR,
+  detectImageMime,
+  MAX_IMAGE_SIZE,
+  serveUploadedFile,
+} from "../utils/upload.ts";

 const router = new Router();

@@ -53,15 +30,7 @@ router.post("/api/avatars/me", authMiddleware, async (ctx) => {
    throw new APIException(APIErrorCode.BAD_REQUEST, 400, "Missing file field");
  }

-  if (!ALLOWED_AVATAR_MIMES.has(file.type)) {
-    throw new APIException(
-      APIErrorCode.BAD_REQUEST,
-      400,
-      "Only JPEG, PNG, GIF, WebP images are allowed",
-    );
-  }
-
-  if (file.size > MAX_AVATAR_SIZE) {
+  if (file.size > MAX_IMAGE_SIZE) {
    throw new APIException(
      APIErrorCode.BAD_REQUEST,
      400,
@@ -71,18 +40,19 @@ router.post("/api/avatars/me", authMiddleware, async (ctx) => {

  const data = new Uint8Array(await file.arrayBuffer());

-  if (!checkMagicBytes(data, file.type)) {
+  const mime = detectImageMime(data);
+  if (!mime) {
    throw new APIException(
      APIErrorCode.BAD_REQUEST,
      400,
-      "File content does not match declared type",
+      "File content is not a recognised image (JPEG, PNG, GIF, WebP)",
    );
  }

  await Deno.mkdir(AVATARS_DIR, { recursive: true });
  await Deno.writeFile(`${AVATARS_DIR}/${authPayload.userId}`, data);
-  updateUserAvatar(authPayload.userId, file.type);
-  updateClientAvatar(authPayload.userId, file.type);
+  updateUserAvatar(authPayload.userId, mime);
+  updateClientAvatar(authPayload.userId, mime);

  const user = getUserById(authPayload.userId);
  ctx.response.status = 200;
@@ -105,18 +75,7 @@ router.get("/api/avatars/:userId", async (ctx) => {
    return;
  }

-  let data: Uint8Array;
-  try {
-    data = await Deno.readFile(`${AVATARS_DIR}/${userId}`);
-  } catch {
-    ctx.response.status = 404;
-    return;
-  }
-
-  ctx.response.headers.set("Content-Type", user.avatarMime);
-  ctx.response.headers.set("Content-Disposition", "inline");
-  ctx.response.headers.set("Cache-Control", "public, max-age=3600");
-  ctx.response.body = data;
+  await serveUploadedFile(ctx, `${AVATARS_DIR}/${userId}`, user.avatarMime);
 });

 export default router;
--- a/api/routes/files.ts
+++ b/api/routes/files.ts
@@ -1,6 +1,7 @@
 import { Router } from "@oak/oak";
 import { APIErrorCode, APIException } from "../model/interfaces.ts";
 import { getDump } from "../services/dump-service.ts";
+import { DUMPS_DIR } from "../utils/upload.ts";

 const router = new Router({ prefix: "/api/files" });

@@ -22,7 +23,7 @@ router.get("/:dumpId", async (ctx) => {
    );
  }

-  const path = `api/uploads/${dumpId}`;
+  const path = `${DUMPS_DIR}/${dumpId}`;

  let data: Uint8Array;
  try {
--- a/api/routes/playlists.ts
+++ b/api/routes/playlists.ts
@@ -13,36 +13,19 @@ import {
  createPlaylist,
  deletePlaylist,
  getPlaylist,
-  getPlaylistImageMime,
+  getPlaylistImageInfo,
  getPlaylistMembershipsForDump,
  removeDumpFromPlaylist,
  reorderPlaylist,
  setPlaylistImage,
  updatePlaylist,
 } from "../services/playlist-service.ts";
-
-const PLAYLIST_IMAGES_DIR = "api/uploads/playlist-images";
-const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
-const ALLOWED_IMAGE_MIMES = new Set([
-  "image/jpeg",
-  "image/png",
-  "image/gif",
-  "image/webp",
-]);
-
-function checkImageMagicBytes(data: Uint8Array, mime: string): boolean {
-  if (mime === "image/webp") {
-    return data[0] === 0x52 && data[1] === 0x49 && data[2] === 0x46 &&
-      data[3] === 0x46 && data[8] === 0x57 && data[9] === 0x45 &&
-      data[10] === 0x42 && data[11] === 0x50;
-  }
-  const magic: Record<string, number[]> = {
-    "image/jpeg": [0xFF, 0xD8, 0xFF],
-    "image/png": [0x89, 0x50, 0x4E, 0x47],
-    "image/gif": [0x47, 0x49, 0x46, 0x38],
-  };
-  return (magic[mime] ?? []).every((b, i) => data[i] === b);
-}
+import {
+  detectImageMime,
+  MAX_IMAGE_SIZE,
+  PLAYLIST_IMAGES_DIR,
+  serveUploadedFile,
+} from "../utils/upload.ts";

 const router = new Router<AuthState>({ prefix: "/api/playlists" });

@@ -143,14 +126,6 @@ router.post("/:playlistId/image", authMiddleware, async (ctx) => {
    throw new APIException(APIErrorCode.BAD_REQUEST, 400, "Missing file field");
  }

-  if (!ALLOWED_IMAGE_MIMES.has(file.type)) {
-    throw new APIException(
-      APIErrorCode.BAD_REQUEST,
-      400,
-      "Only JPEG, PNG, GIF, WebP images are allowed",
-    );
-  }
-
  if (file.size > MAX_IMAGE_SIZE) {
    throw new APIException(
      APIErrorCode.BAD_REQUEST,
@@ -160,46 +135,38 @@ router.post("/:playlistId/image", authMiddleware, async (ctx) => {
  }

  const data = new Uint8Array(await file.arrayBuffer());
-  if (!checkImageMagicBytes(data, file.type)) {
+  const mime = detectImageMime(data);
+  if (!mime) {
    throw new APIException(
      APIErrorCode.BAD_REQUEST,
      400,
-      "File content does not match declared type",
+      "File content is not a recognised image (JPEG, PNG, GIF, WebP)",
    );
  }

-  await Deno.mkdir(PLAYLIST_IMAGES_DIR, { recursive: true });
-  await Deno.writeFile(`${PLAYLIST_IMAGES_DIR}/${ctx.params.playlistId}`, data);
+  // Resolve slug → UUID via service (validates ownership too), then write file
  const playlist = setPlaylistImage(
    ctx.params.playlistId,
-    file.type,
+    mime,
    ctx.state.user.userId,
  );
+  await Deno.mkdir(PLAYLIST_IMAGES_DIR, { recursive: true });
+  await Deno.writeFile(`${PLAYLIST_IMAGES_DIR}/${playlist.id}`, data);
  ctx.response.body = { success: true, data: playlist };
 });

 // GET /api/playlists/:playlistId/image — serve playlist image
 router.get("/:playlistId/image", async (ctx) => {
-  const imageMime = getPlaylistImageMime(ctx.params.playlistId);
-  if (!imageMime) {
+  const info = getPlaylistImageInfo(ctx.params.playlistId);
+  if (!info) {
    ctx.response.status = 404;
    return;
  }
-
-  let data: Uint8Array;
-  try {
-    data = await Deno.readFile(
-      `${PLAYLIST_IMAGES_DIR}/${ctx.params.playlistId}`,
-    );
-  } catch {
-    ctx.response.status = 404;
-    return;
-  }
-
-  ctx.response.headers.set("Content-Type", imageMime);
-  ctx.response.headers.set("Content-Disposition", "inline");
-  ctx.response.headers.set("Cache-Control", "public, max-age=3600");
-  ctx.response.body = data;
+  await serveUploadedFile(
+    ctx,
+    `${PLAYLIST_IMAGES_DIR}/${info.id}`,
+    info.imageMime,
+  );
 });

 // PUT /api/playlists/:playlistId/order — reorder