fix: resolve 4 media embed bugs from testing

1. Video aspect ratio: remove container border/overflow-hidden, use
   preload="metadata" so browser knows dimensions before play
2. YouTube Error 153: remove sandbox attr (too restrictive), add full
   allow permissions (encrypted-media, accelerometer, gyroscope, etc.)
3. Google Images not displaying: detect image Content-Type from HTTP
   response in metadataFetcher, override classifier to create image
   embed for URLs that serve image/* content
4. Audio seeking broken: add HTTP Range request support in uploads
   route (Accept-Ranges, Content-Range, 206 Partial Content)

packages/server/src/routes/uploads.ts

@@ -134,6 +134,28 @@ export async function uploadRoutes(app: FastifyInstance): Promise<void> {
       reply.header('Content-Disposition', `attachment; filename="${encodeURIComponent(originalName)}"`);
     }
 
+    // Support Range requests for audio/video seeking
+    const stat = fs.statSync(filepath);
+    const fileSize = stat.size;
+    const rangeHeader = request.headers.range;
+
+    if (rangeHeader) {
+      const parts = rangeHeader.replace(/bytes=/, '').split('-');
+      const start = parseInt(parts[0] ?? '0', 10);
+      const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
+      const chunkSize = end - start + 1;
+
+      reply.header('Content-Range', `bytes ${start}-${end}/${fileSize}`);
+      reply.header('Accept-Ranges', 'bytes');
+      reply.header('Content-Length', chunkSize);
+      reply.code(206);
+
+      const stream = fs.createReadStream(filepath, { start, end });
+      return reply.send(stream);
+    }
+
+    reply.header('Accept-Ranges', 'bytes');
+    reply.header('Content-Length', fileSize);
     const stream = fs.createReadStream(filepath);
     return reply.send(stream);
   });

packages/server/src/utils/embedResolver.ts

@@ -75,20 +75,36 @@ export async function resolveEmbeds(
       let image: string | null = null;
       let siteName: string | null = null;
 
+      // Track the effective embed type (may be overridden by Content-Type detection)
+      let effectiveEmbedType = classification.embedType;
+
       if (classification.embedType === 'image') {
         // Direct image URL — no fetch needed, use the URL as the image source
         image = url;
       } else if (classification.needsMetadataFetch) {
         const metadata = await fetchUrlMetadata(url);
         if (metadata) {
-          title = metadata.title;
+          // If the URL itself is a direct media resource (detected via Content-Type),
-          description = metadata.description;
+          // override the classification instead of trying to use og: metadata
-          image = metadata.image;
+          if (metadata.contentType) {
-          siteName = metadata.siteName;
+            if (metadata.contentType.startsWith('image/')) {
+              effectiveEmbedType = 'image';
+              image = url;
+            } else if (metadata.contentType.startsWith('video/')) {
+              effectiveEmbedType = 'video';
+            } else if (metadata.contentType.startsWith('audio/')) {
+              effectiveEmbedType = 'audio';
+            }
+          } else {
+            title = metadata.title;
+            description = metadata.description;
+            image = metadata.image;
+            siteName = metadata.siteName;
+          }
         }
 
-        // For generic embeds, skip if we couldn't extract a title
+        // For generic embeds, skip if we couldn't extract a title and it's not a media URL
-        if (classification.embedType === 'generic' && !title) {
+        if (effectiveEmbedType === 'generic' && !title) {
           continue;
         }
       }
@@ -99,7 +115,7 @@ export async function resolveEmbeds(
         messageId: isDm ? null : messageId,
         dmMessageId: isDm ? messageId : null,
         url,
-        embedType: classification.embedType,
+        embedType: effectiveEmbedType,
         provider: classification.provider,
         title,
         description,

packages/server/src/utils/metadataFetcher.ts

@@ -22,6 +22,8 @@ export interface UrlMetadata {
   image: string | null;
   siteName: string | null;
   url: string;
+  /** Set when the URL itself is a direct media resource (image/video/audio) */
+  contentType?: string;
 }
 
 export async function fetchUrlMetadata(url: string): Promise<UrlMetadata | null> {
@@ -66,6 +68,13 @@ export async function fetchUrlMetadata(url: string): Promise<UrlMetadata | null>
       return null;
     }
 
+    // If the response is a direct media file (image/video/audio), return early
+    // with the content type — don't try to parse it as HTML
+    const responseContentType = response.headers.get('content-type') ?? '';
+    if (responseContentType.startsWith('image/') || responseContentType.startsWith('video/') || responseContentType.startsWith('audio/')) {
+      return { title: null, description: null, image: null, siteName: null, url, contentType: responseContentType };
+    }
+
     // Early exit if Content-Length > 512KB
     const contentLength = parseInt(response.headers.get('content-length') ?? '0', 10);
     if (contentLength > 512_000) {

packages/web/src/components/chat/AttachmentRenderer.tsx

@@ -44,10 +44,10 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
 
   if (mimetype.startsWith('video/')) {
     return (
-      <div className="mt-1 max-w-[520px] rounded-lg overflow-hidden border border-white/[0.06]">
+      <div className="mt-1 max-w-[520px]">
         <video
           controls
-          preload="none"
+          preload="metadata"
           poster={thumbUrl ?? undefined}
           className="max-w-full max-h-[400px] rounded-lg"
         >

packages/web/src/components/chat/embeds/VideoEmbed.tsx

@@ -36,8 +36,8 @@ export function VideoEmbed({ embed }: VideoEmbedProps) {
             className="absolute inset-0 w-full h-full"
             src={`${embed.embedUrl}?autoplay=1`}
             title={embed.title ?? 'Video'}
-            allow="autoplay; fullscreen; picture-in-picture"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            sandbox="allow-scripts allow-same-origin allow-popups"
+            allowFullScreen
             referrerPolicy="no-referrer"
           />
         ) : (