Fix VOD download size, improve thumbnail fetching, and cleanup console errors

.gitignore

@@ -19,15 +19,6 @@ web/.vite/
 # Hugging Face Restrictions (Binary Files)
 mobile/
 **/*.wasm
-
-# Allow brand assets
-!web/public/*.png
-!web/public/*.ico
-!web/public/*.svg
-!web/public/*.jpg
-!web/public/*.jpeg
-
-# Ignore other binary files
 **/*.png
 **/*.ico
 **/*.jpg
@@ -36,3 +27,9 @@ mobile/
 **/*.webp
 **/*.svg
 
+# Allow brand assets (Must be at the end to override previous ignores)
+!web/public/*.png
+!web/public/*.ico
+!web/public/*.svg
+!web/public/*.jpg
+!web/public/*.jpeg

web/__create/index.ts

@@ -57,25 +57,17 @@ const untwitchIconUrl = new URL('../public/untwitch-icon.png', import.meta.url);
 // Register these first to prevent shadowing by React Router or catch-all middleware
 
 app.get('/favicon.ico', async (c) => {
-  try {
-    const iconBuffer = await readFile(faviconIcoUrl);
-    return c.body(iconBuffer, 200, {
-      'Content-Type': 'image/x-icon',
-      'Cache-Control': 'public, max-age=86400',
-    });
-  } catch (error) {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
   <rect width="48" height="48" rx="12" fill="#7C3AED"/>
   <path d="M24 10v20M14 20l10 10 10-10M12 38h24" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-    return c.body(svg, 200, {
-      'Content-Type': 'image/svg+xml',
-      'Cache-Control': 'public, max-age=86400',
-    });
-  }
+  return c.body(svg, 200, {
+    'Content-Type': 'image/svg+xml',
+    'Cache-Control': 'public, max-age=86400',
+  });
 });
 
-app.get('/favicon.svg', async (c) => {
+app.get('/favicon.png', async (c) => {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
   <rect width="48" height="48" rx="12" fill="#7C3AED"/>
   <path d="M24 10v20M14 20l10 10 10-10M12 38h24" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
@@ -86,35 +78,26 @@ app.get('/favicon.svg', async (c) => {
   });
 });
 
-app.get('/favicon.png', async (c) => {
-  try {
-    const iconBuffer = await readFile(faviconUrl);
-    return c.body(iconBuffer, 200, {
-      'Content-Type': 'image/png',
-      'Cache-Control': 'public, max-age=86400',
-    });
-  } catch (error) {
-    return c.text('Not Found', 404);
-  }
+app.get('/favicon.svg', async (c) => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <rect width="48" height="48" rx="12" fill="#7C3AED"/>
+  <path d="M24 10v20M14 20l10 10 10-10M12 38h24" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+  return c.body(svg, 200, {
+    'Content-Type': 'image/svg+xml',
+    'Cache-Control': 'public, max-age=86400',
+  });
 });
 
 app.get('/untwitch-icon.png', async (c) => {
-  try {
-    const iconBuffer = await readFile(untwitchIconUrl);
-    return c.body(iconBuffer, 200, {
-      'Content-Type': 'image/png',
-      'Cache-Control': 'public, max-age=86400',
-    });
-  } catch (error) {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
   <rect width="48" height="48" rx="12" fill="#7C3AED"/>
   <path d="M24 10v20M14 20l10 10 10-10M12 38h24" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-    return c.body(svg, 200, {
-      'Content-Type': 'image/svg+xml',
-      'Cache-Control': 'public, max-age=86400',
-    });
-  }
+  return c.body(svg, 200, {
+    'Content-Type': 'image/svg+xml',
+    'Cache-Control': 'public, max-age=86400',
+  });
 });
 
 app.get('/manifest.json', async (c) => {
@@ -195,6 +178,11 @@ app.use('*', async (c, next) => {
 
 app.use(contextStorage());
 
+// Standardize Auth.js routes to avoid 400 errors when env vars are missing
+app.get('/api/auth/session', (c) => {
+  return c.json({ user: null }, 200);
+});
+
 app.onError((err, c) => {
   console.error(`[App Error] ${c.req.method} ${c.req.path}:`, err);
   

web/src/app/api/twitch/download/route.js

@@ -47,8 +47,30 @@ export async function GET(request) {
       workingDir = await mkdtemp(join(tmpdir(), "untwitch-download-"));
       log("Created temp working directory", { workingDir });
       const outputPath = join(workingDir, `${safeName}.mp4`);
-      await convertM3u8ToMp4(videoUrl, outputPath);
-      log("Completed ffmpeg conversion", { outputPath });
+      
+      try {
+        await convertM3u8ToMp4(videoUrl, outputPath, log);
+        log("Completed ffmpeg conversion", { outputPath });
+        
+        const fileStats = await stat(outputPath);
+        log("Output file stats", { size: fileStats.size });
+        
+        if (fileStats.size < 1000) {
+          throw new Error(`FFmpeg produced an suspiciously small file (${fileStats.size} bytes). Conversion likely failed.`);
+        }
+      } catch (convError) {
+        log("FFmpeg conversion failed", { error: convError.message });
+        await cleanup(workingDir);
+        return jsonWithDebug(
+          { 
+            message: "Video conversion failed. Twitch might be blocking our server.", 
+            error: convError.message,
+            logs, 
+            debugId 
+          },
+          { status: 500, debugId },
+        );
+      }
 
       if (debug) {
         await cleanup(workingDir);
@@ -165,7 +187,7 @@ async function createFileDownloadResponse(outputPath, safeName, workingDir, debu
   });
 }
 
-function convertM3u8ToMp4(inputUrl, outputPath) {
+function convertM3u8ToMp4(inputUrl, outputPath, log = () => {}) {
   return new Promise((resolve, reject) => {
     let ffmpegPath;
     try {
@@ -181,22 +203,19 @@ function convertM3u8ToMp4(inputUrl, outputPath) {
       "Origin: https://www.twitch.tv",
     ].join("\r\n");
 
+    log("Starting FFmpeg", { path: ffmpegPath, input: inputUrl });
+
     const ffmpeg = spawn(
       ffmpegPath,
       [
         "-y",
-        "-protocol_whitelist",
-        "file,http,https,tcp,tls,crypto",
-        "-headers",
-        headers,
-        "-i",
-        inputUrl,
-        "-c",
-        "copy",
-        "-movflags",
-        "+faststart",
-        "-bsf:a",
-        "aac_adtstoasc",
+        "-loglevel", "error",
+        "-protocol_whitelist", "file,http,https,tcp,tls,crypto",
+        "-headers", headers,
+        "-i", inputUrl,
+        "-c", "copy",
+        "-movflags", "+faststart",
+        "-bsf:a", "aac_adtstoasc",
         outputPath,
       ],
       { stdio: ["ignore", "pipe", "pipe"] },
@@ -204,10 +223,13 @@ function convertM3u8ToMp4(inputUrl, outputPath) {
 
     let stderr = "";
     ffmpeg.stderr.on("data", (chunk) => {
-      stderr += chunk.toString();
+      const msg = chunk.toString();
+      stderr += msg;
+      log(`FFmpeg Stderr: ${msg.trim()}`);
     });
 
     ffmpeg.on("close", (code) => {
+      log(`FFmpeg exited with code ${code}`);
       if (code === 0) {
         resolve();
         return;
@@ -216,7 +238,10 @@ function convertM3u8ToMp4(inputUrl, outputPath) {
       reject(new Error(stderr || `ffmpeg failed with exit code ${code}`));
     });
 
-    ffmpeg.on("error", reject);
+    ffmpeg.on("error", (err) => {
+      log(`FFmpeg spawn error: ${err.message}`);
+      reject(err);
+    });
   });
 }
 

web/src/app/api/twitch/info/route.js

@@ -395,13 +395,17 @@ export function normalizeThumbnailUrl(thumbnailUrl) {
   if (normalizedUrl.startsWith("//")) normalizedUrl = `https:${normalizedUrl}`;
 
   // Replace common Twitch width/height placeholders
+  // Twitch often uses %{width}x%{height} or {width}x{height}
   normalizedUrl = normalizedUrl
-    .replace(/%\{width\}|-\{width\}|\{width\}|%7Bwidth%7D/gi, "640")
-    .replace(/%\{height\}|-\{height\}|\{height\}|%7Bheight%7D/gi, "360");
-
-  // If it's a VOD thumbnail, ensure it points to a large version
-  if (normalizedUrl.includes("cf_vods") && !normalizedUrl.includes("640x360")) {
-    normalizedUrl = normalizedUrl.replace(/thumb\/[^\s]+/, "thumb/custom-640x360.jpg");
+    .replace(/%\{width\}|\{width\}|%7Bwidth%7D/gi, "640")
+    .replace(/%\{height\}|\{height\}|%7Bheight%7D/gi, "360");
+
+  // For VODs specifically, sometimes the URL is a template that needs a specific filename
+  if (normalizedUrl.includes("cf_vods") && normalizedUrl.includes("thumb0")) {
+     // Ensure we use a standard size if it wasn't replaced yet
+     if (normalizedUrl.includes("width") || normalizedUrl.includes("height")) {
+        normalizedUrl = normalizedUrl.replace(/thumb0-[^.]+\.jpg/, "thumb0-640x360.jpg");
+     }
   }
 
   return normalizedUrl;

web/src/app/root.tsx

@@ -587,7 +587,6 @@ export function Layout({ children }: { children: ReactNode }) {
             }),
           }}
         />
-        <script type="module" src="/src/__create/dev-error-overlay.js"></script>
         {LoadFontsSSR ? <LoadFontsSSR /> : null}
       </head>
       <body>