Fix for screenshots

Author: stever

apps/gif-service/src/gif-generator.ts

@@ -290,33 +290,29 @@ export class GIFGenerator {
         return buffer;
     }
 
-    /** Render a representative still frame to PNG, with a ZX rainbow ribbon baked into a corner. */
+    /** Render a representative still frame to a square PNG (Spectrum border preserved). */
     async generatePngFromTAP(tapData: Buffer, machineType: number = 48): Promise<Buffer> {
         const { frames } = await this.captureFrames(tapData, machineType, false);
         const frame = frames[frames.length - 1] ?? frames[0];
         if (!frame) throw new Error('No frame captured');
         return this.encodePng(frame);
     }
 
-    /** ffmpeg-encode one decoded frame to PNG, drawing a 4-bar Spectrum ribbon bottom-right. */
+    /** ffmpeg-encode one decoded frame to a square PNG, padding the (landscape) frame
+     *  with black so a rounded/tilted card crop never truncates the screen content. */
     private async encodePng(frame: Uint8Array): Promise<Buffer> {
         const width = this.decoder.getWidth();
         const height = this.decoder.getHeight();
         const rgba = this.decoder.decode(frame);
         const outPath = join(tmpdir(), `zxshot-${process.pid}-${Date.now()}.png`);
 
-        // Four bars (red/yellow/green/cyan) tiled into the bottom-right corner.
-        const colors = ['red', 'yellow', 'lime', 'cyan'];
-        const ribbon = colors
-            .map((c, i) => {
-                const left = (0.24 - i * 0.06).toFixed(2);
-                return `drawbox=x=iw-iw*${left}:y=ih-ih*0.13:w=iw*0.06:h=ih*0.13:color=${c}:t=fill`;
-            })
-            .join(',');
+        // Pad the landscape frame (border included) to a centred square so the
+        // card's rounded corners clip black margin, not the Spectrum screen.
+        const pad = 'pad=iw:iw:0:(iw-ih)/2:black';
 
         const args = [
             '-f', 'rawvideo', '-pix_fmt', 'rgba', '-s', `${width}x${height}`, '-i', 'pipe:0',
-            '-vf', ribbon,
+            '-vf', pad,
             '-frames:v', '1',
             '-y', outPath,
         ];

apps/gif-service/src/routes/screenshot.ts

@@ -10,6 +10,9 @@ import { CompileError } from '../errors.js';
 const router = Router();
 
 const CACHE_DIR = process.env.SCREENSHOT_CACHE_DIR ?? '/cache';
+// Bump when the render output changes (size, padding, etc.) so cached PNGs
+// from older logic are superseded without manually clearing the volume.
+const RENDER_VERSION = 'v2';
 const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
 // Single-flight: collapse concurrent requests for the same cache key onto one render.
@@ -40,11 +43,14 @@ router.get('/:id', async (req: Request, res: Response) => {
     try {
         const project = await fetchProjectById(id);
         if (!project) {
+            // Negative-cache so the browser doesn't re-request missing/private
+            // projects on every page load (web shows the cartridge fallback).
+            res.setHeader('Cache-Control', 'public, max-age=3600');
             res.status(404).end();
             return;
         }
 
-        const key = `${id}-${Date.parse(project.updated_at) || 0}`;
+        const key = `${RENDER_VERSION}-${id}-${Date.parse(project.updated_at) || 0}`;
         const file = join(CACHE_DIR, `${key}.png`);
 
         let png: Buffer;
@@ -77,7 +83,11 @@ router.get('/:id', async (req: Request, res: Response) => {
         res.send(png);
     } catch (err) {
         if (err instanceof CompileError) {
-            res.status(422).end(); // unrenderable source → web falls back to cartridge
+            // Unrenderable (e.g. zmac/sdcc not supported, or bad source) → web
+            // falls back to the cartridge. Negative-cache to avoid re-rendering
+            // it on every page load.
+            res.setHeader('Cache-Control', 'public, max-age=3600');
+            res.status(422).end();
             return;
         }
         console.error('Screenshot error:', err);

apps/web/src/components/ProjectThumbnail.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 
-// Corner thumbnail for a project card. Shows a rendered screenshot of the
-// project (with the ZX rainbow ribbon baked into a corner by gif-service);
-// falls back to the static cartridge graphic when there's no screenshot yet,
-// the project isn't public, or the render failed.
+// Tilted corner thumbnail for a project card. Shows a rendered screenshot of
+// the project (a square, border-padded PNG from gif-service); falls back to the
+// static cartridge graphic when there's no screenshot yet, the project isn't
+// public, or it can't be rendered (e.g. zmac/sdcc).
 export default function ProjectThumbnail({ projectId, updatedAt }) {
   const [failed, setFailed] = useState(false);
   const version = updatedAt ? Date.parse(updatedAt) || 0 : 0;
@@ -19,27 +19,19 @@ export default function ProjectThumbnail({ projectId, updatedAt }) {
         height: "120px",
         background: "#000",
         borderRadius: "20px",
+        transform: "rotate(12deg)",
         overflow: "hidden",
-        // Screenshots read cleaner upright and opaque; the cartridge fallback
-        // keeps its original tilted, translucent look.
-        transform: showShot ? "none" : "rotate(12deg)",
+        // Screenshots are the real content, so show them opaque; the cartridge
+        // fallback keeps its original faded decoration look.
         opacity: showShot ? 1 : 0.7,
       }}
     >
-      {showShot ? (
-        <img
-          src={`/screenshots/${projectId}.png?v=${version}`}
-          alt=""
-          onError={() => setFailed(true)}
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
-      ) : (
-        <img
-          src="/assets/images/zx-square.png"
-          alt=""
-          style={{ width: "94%", height: "94%", objectFit: "cover", margin: "3%" }}
-        />
-      )}
+      <img
+        src={showShot ? `/screenshots/${projectId}.png?v=${version}` : "/assets/images/zx-square.png"}
+        alt=""
+        onError={showShot ? () => setFailed(true) : undefined}
+        style={{ width: "94%", height: "94%", objectFit: "cover", margin: "3%" }}
+      />
     </div>
   );
 }