Changes for project screenshots

Author: stever

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

@@ -290,29 +290,25 @@ export class GIFGenerator {
         return buffer;
     }
 
-    /** Render a representative still frame to a square PNG (Spectrum border preserved). */
+    /** Render a representative still frame to a 4:3 PNG (Spectrum border included). */
     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 a square PNG, padding the (landscape) frame
-     *  with black so a rounded/tilted card crop never truncates the screen content. */
+    /** ffmpeg-encode one decoded frame to a PNG at its native 4:3 size (border
+     *  included). The card fills it with object-fit: cover, so the outer border
+     *  is cropped to the square crop, not the screen. */
     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`);
 
-        // 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', pad,
             '-frames:v', '1',
             '-y', outPath,
         ];

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

@@ -12,7 +12,7 @@ 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 RENDER_VERSION = 'v3';
 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.
@@ -83,10 +83,12 @@ router.get('/:id', async (req: Request, res: Response) => {
         res.send(png);
     } catch (err) {
         if (err instanceof CompileError) {
-            // 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');
+            // Unrenderable (e.g. unsupported lang, or bad source) → web falls
+            // back to the cartridge. Short negative-cache: enough to avoid
+            // re-rendering on every page load, but it self-heals quickly after a
+            // deploy that adds rendering support (the key is project-based, so a
+            // server capability change can't otherwise invalidate it).
+            res.setHeader('Cache-Control', 'public, max-age=300');
             res.status(422).end();
             return;
         }

apps/web/src/components/ProjectThumbnail.jsx

@@ -30,7 +30,7 @@ export default function ProjectThumbnail({ projectId, updatedAt }) {
         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%" }}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
       />
     </div>
   );