Add audio attachments with a paperclip composer control and a styled timeline player

Hop-State: A_06FP9RVYP3SNM80AM7SMF98
Hop-Proposal: R_06FP9RTB5CCV1SZR9B7YSY0
Hop-Task: T_06FP9QHMNTRHD9BZ3B4BVMG
Hop-Attempt: AT_06FP9QHMNV944FQ20714908

src/app/api/media/stuffbox/uploads/route.ts

@@ -3,18 +3,16 @@ import { z } from 'zod';
 import { requireAuth } from '@/lib/auth';
 import { createUpload, StuffboxApiError } from '@/lib/stuffbox/client';
 import { getStuffboxAccess } from '@/lib/stuffbox/tokens';
+import { ALLOWED_MEDIA_TYPES, MAX_IMAGE_SIZE, MAX_AUDIO_SIZE, MAX_VIDEO_SIZE } from '@/lib/media/upload-policy';
 
 const uploadSchema = z.object({
   filename: z.string().min(1).max(255),
-  mimeType: z.enum([
-    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
-    'video/mp4', 'video/webm', 'video/quicktime',
-  ]),
-  size: z.number().int().positive().max(100 * 1024 * 1024),
+  mimeType: z.enum(ALLOWED_MEDIA_TYPES),
+  size: z.number().int().positive().max(Math.max(MAX_VIDEO_SIZE, MAX_AUDIO_SIZE)),
   sha256: z.string().regex(/^[a-f0-9]{64}$/).optional(),
 }).superRefine((upload, context) => {
-  if (upload.mimeType.startsWith('image/') && upload.size > 10 * 1024 * 1024) {
-    context.addIssue({ code: 'too_big', maximum: 10 * 1024 * 1024, origin: 'number', inclusive: true, path: ['size'], message: 'Images must be 10MB or smaller' });
+  if (upload.mimeType.startsWith('image/') && upload.size > MAX_IMAGE_SIZE) {
+    context.addIssue({ code: 'too_big', maximum: MAX_IMAGE_SIZE, origin: 'number', inclusive: true, path: ['size'], message: 'Images must be 10MB or smaller' });
   }
 });
 

src/app/api/media/upload/route.ts

@@ -4,11 +4,7 @@ import { requireAuth } from '@/lib/auth';
 import { getStorageSession, createStorageSession } from '@/lib/storage/session';
 import { uploadWithStorageCredentials } from '@/lib/storage/s3';
 import { v4 as uuidv4 } from 'uuid';
-
-const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB for images
-const MAX_VIDEO_SIZE = 100 * 1024 * 1024; // 100MB for videos
-const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/quicktime'];
+import { getMaxMediaSize, getMediaKind } from '@/lib/media/upload-policy';
 
 export async function POST(req: NextRequest) {
     try {
@@ -24,20 +20,19 @@ export async function POST(req: NextRequest) {
         }
 
         // Validate file type
-        const isImage = ALLOWED_IMAGE_TYPES.includes(file.type);
-        const isVideo = ALLOWED_VIDEO_TYPES.includes(file.type);
-        
-        if (!isImage && !isVideo) {
+        const mediaKind = getMediaKind(file.type);
+
+        if (mediaKind === 'unsupported') {
             return NextResponse.json({
-                error: 'Invalid file type. Allowed: JPEG, PNG, GIF, WebP, MP4, WebM, MOV'
+                error: 'Invalid file type. Upload an image, video, MP3, M4A, AAC, WAV, OGG, or FLAC file.'
             }, { status: 400 });
         }
 
         // Validate file size based on type
-        const maxSize = isVideo ? MAX_VIDEO_SIZE : MAX_IMAGE_SIZE;
-        if (file.size > maxSize) {
+        const maxSize = getMaxMediaSize(file.type);
+        if (maxSize !== null && file.size > maxSize) {
             return NextResponse.json({
-                error: `File too large. Maximum size: ${isVideo ? '100MB' : '10MB'}`
+                error: `File too large. Maximum size: ${mediaKind === 'image' ? '10MB' : '100MB'}`
             }, { status: 400 });
         }
 

src/app/globals.css

@@ -443,6 +443,79 @@ a.btn-primary:visited {
   background: var(--background-tertiary);
 }
 
+.post-media-item.audio {
+  grid-column: 1 / -1;
+  overflow: visible;
+}
+
+.audio-player {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 92px;
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background:
+    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
+    var(--background-secondary);
+}
+
+.audio-player-toggle {
+  display: grid;
+  place-items: center;
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: var(--background);
+  background: var(--accent);
+  cursor: pointer;
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+
+.audio-player-toggle:hover {
+  filter: brightness(1.08);
+  transform: scale(1.04);
+}
+
+.audio-player-body {
+  min-width: 0;
+  flex: 1;
+}
+
+.audio-player-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 9px;
+  overflow: hidden;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.audio-player-progress {
+  display: block;
+  width: 100%;
+  height: 4px;
+  margin: 0;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.audio-player-time {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 7px;
+  color: var(--foreground-tertiary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
 .post-media-item img {
   width: 100%;
   height: auto;
@@ -716,6 +789,30 @@ a.btn-primary:visited {
   display: block;
 }
 
+.compose-media-item.audio {
+  width: min(100%, 320px);
+  max-height: none;
+}
+
+.compose-audio-preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  height: 80px;
+  padding: 0 38px 0 14px;
+  color: var(--foreground-secondary);
+  background: color-mix(in srgb, var(--accent) 8%, var(--background-tertiary));
+}
+
+.compose-audio-preview span {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .compose-media-remove {
   position: absolute;
   top: 4px;