v3: added emoji picker, various bug and layout fixes

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