fix(web): sample the SnapShot band from the visible crop and add a Button overlay variant

The thumbnail renders with object-cover in a 52:28 frame, so a portrait capture hides its top and bottom and an ultra-wide one hides its sides. Sampling the full image's bottom band could tone the overlay from pixels the user never sees. readBottomBand now computes the centered cover crop for the frame's aspect ratio and samples the bottom band of that region. The contents button was overriding Button colors at the call site. Button gains an overlay variant that inherits currentColor and tints hover from it, so the host overlay sets the tone through its text color.

Julius Marminge committed 2 months ago

Commit 57a00a61 parent 25d04ea4 files · +85 −14Browse files

Unified · Split

4 files

apps/web/src/components/chat/SnapShotAttachmentDetails.tsx +5 −2
apps/web/src/components/ui/button.tsx +4 −0
apps/web/src/lib/snapShotOverlayTone.test.ts +34 −1
apps/web/src/lib/snapShotOverlayTone.ts +42 −11

apps/web/src/components/chat/SnapShotAttachmentDetails.tsx+5−2

   source,
   className,
   side = "top",
+  variant = "ghost-muted",
 }: {
   source: SnapShotSource;
   className?: string;
   side?: "top" | "right" | "bottom" | "left";
+  variant?: "ghost-muted" | "overlay";
 }) {
   const includesAccessibility = snapShotIncludesAccessibility(source);
   const ContentsIcon = includesAccessibility ? TextIcon : ImageIcon;
                   className={cn("[--control-icon-color:currentColor]", className)}
                   onClick={(event) => event.stopPropagation()}
                   size="icon-micro"
-                  variant="ghost-muted"
+                  variant={variant}
                 />
               }
             />
           <span className="truncate">{source.appName}</span>
           <SnapShotContentsButton
             source={source}
-            className="pointer-events-auto text-(--snap-shot-text-muted) hover:bg-(--snap-shot-badge) hover:text-(--snap-shot-text)"
+            variant="overlay"
+            className="pointer-events-auto"
           />
         </div>
         <div className="truncate text-[9px] leading-3.5 text-(--snap-shot-text-muted)">

apps/web/src/components/ui/button.tsx+4−0

         glass:
           "surface-glass [--control-icon-color:var(--contrast-muted-foreground)] border-border/60 text-foreground shadow-sm [:hover,[data-pressed]]:border-border",
         link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+        /** For controls placed over imagery: inherits the surrounding text color
+         * and tints its hover from it, so the host decides the tone. */
+        overlay:
+          "border-transparent text-current opacity-72 [:hover,[data-pressed]]:bg-current/14 [:hover,[data-pressed]]:opacity-100",
         outline:
           "[--control-icon-color:var(--contrast-muted-foreground)] border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
         secondary:

apps/web/src/lib/snapShotOverlayTone.test.ts+34−1

@@ -1,6 +1,11 @@
1	import { describe, expect, it } from "vite-plus/test";	1	import { describe, expect, it } from "vite-plus/test";
2		2
3	import { averageOpaqueColor, snapShotOverlayTone } from "./snapShotOverlayTone";	3	import {
		4	averageOpaqueColor,
		5	coverCrop,
		6	SNAP_SHOT_FRAME_ASPECT,
		7	snapShotOverlayTone,
		8	} from "./snapShotOverlayTone";
4		9
5	describe("snapShotOverlayTone", () => {	10	describe("snapShotOverlayTone", () => {
6	it("puts white text on a scrim darker than a dark capture", () => {	11	it("puts white text on a scrim darker than a dark capture", () => {
@@ -54,3 +59,31 @@ describe("averageOpaqueColor", () => { · 47 unmodified lines
54	expect(averageOpaqueColor(new Uint8ClampedArray([1, 2, 3, 0, 4, 5, 6, 0]))).toBeNull();	59	expect(averageOpaqueColor(new Uint8ClampedArray([1, 2, 3, 0, 4, 5, 6, 0]))).toBeNull();
55	});	60	});
56	});	61	});
		62
		63	describe("coverCrop", () => {
		64	it("keeps a frame-shaped image whole", () => {
		65	expect(coverCrop(520, 280, SNAP_SHOT_FRAME_ASPECT)).toEqual({
		66	x: 0,
		67	y: 0,
		68	width: 520,
		69	height: 280,
		70	});
		71	});
		72
		73	it("crops the top and bottom of a portrait capture, so the sampled band is mid-image", () => {
		74	const crop = coverCrop(400, 800, SNAP_SHOT_FRAME_ASPECT);
		75	expect(crop.x).toBe(0);
		76	expect(crop.width).toBe(400);
		77	expect(crop.height).toBeCloseTo(400 / SNAP_SHOT_FRAME_ASPECT);
		78	expect(crop.y).toBeCloseTo((800 - crop.height) / 2);
		79	expect(crop.y + crop.height).toBeLessThan(800);
		80	});
		81
		82	it("crops the sides of an ultra-wide capture and keeps its full height", () => {
		83	const crop = coverCrop(3000, 500, SNAP_SHOT_FRAME_ASPECT);
		84	expect(crop.y).toBe(0);
		85	expect(crop.height).toBe(500);
		86	expect(crop.width).toBeCloseTo(500 * SNAP_SHOT_FRAME_ASPECT);
		87	expect(crop.x).toBeCloseTo((3000 - crop.width) / 2);
		88	});
		89	});

apps/web/src/lib/snapShotOverlayTone.ts+42−11

 /** How far the scrim is pushed toward its text's opposite pole. */
 const SCRIM_PUSH = 0.35;
-/** Fraction of the image height, measured from the bottom, that the overlay covers. */
+/** Fraction of the visible thumbnail height, from the bottom, that the overlay covers. */
 const SAMPLE_BAND = 0.3;
+/**
+ * Aspect ratio of the frame the thumbnail is rendered into with `object-cover`
+ * (see `SNAP_SHOT_ATTACHMENT_FRAME_CLASS`: w-52 by h-28). Sampling must use the
+ * centered crop that ratio imposes, not the full source image.
+ */
+export const SNAP_SHOT_FRAME_ASPECT = 52 / 28;
 function relativeLuminance(color: RgbColor): number {
   const linearize = (channel: number) => {
     const normalized = channel / 255;
 const CACHE_LIMIT = 256;
 const sampleCache = new Map<string, Promise<RgbColor | null>>();
-function readBottomBand(image: HTMLImageElement): RgbColor | null {
+/**
+ * Source rectangle that `object-cover` shows for an image of the given size in
+ * a frame of the given aspect ratio: the largest centered region of that ratio.
+ */
+export function coverCrop(
+  width: number,
+  height: number,
+  frameAspect: number,
+): { x: number; y: number; width: number; height: number } {
+  const imageAspect = width / height;
+  if (imageAspect > frameAspect) {
+    const cropWidth = height * frameAspect;
+    return { x: (width - cropWidth) / 2, y: 0, width: cropWidth, height };
+  }
+  const cropHeight = width / frameAspect;
+  return { x: 0, y: (height - cropHeight) / 2, width, height: cropHeight };
+}
+function readBottomBand(image: HTMLImageElement, frameAspect: number): RgbColor | null {
   const { naturalWidth: width, naturalHeight: height } = image;
   if (width === 0 || height === 0) return null;
   const canvas = document.createElement("canvas");
   canvas.height = SAMPLE_HEIGHT;
   const context = canvas.getContext("2d", { willReadFrequently: true });
   if (context === null) return null;
-  const bandHeight = Math.max(1, Math.round(height * SAMPLE_BAND));
+  const crop = coverCrop(width, height, frameAspect);
+  const bandHeight = Math.max(1, crop.height * SAMPLE_BAND);
   // Drawing the band into a tiny canvas lets the rasterizer do the averaging.
   context.drawImage(
     image,
-    0,
+    crop.x,
-    height - bandHeight,
+    crop.y + crop.height - bandHeight,
-    width,
+    crop.width,
     bandHeight,
     0,
     0,
 }
 /**
- * Average color of the image's bottom band, or null when the image cannot be
+ * Average color of the bottom band of the region the thumbnail frame shows, or
- * loaded or read. Results are memoized per URL so the three surfaces that
+ * null when the image cannot be loaded or read. Results are memoized per URL
- * show the same capture decode it once.
+ * so the surfaces that show the same capture decode it once.
  */
-export function sampleSnapShotBottomColor(src: string): Promise<RgbColor | null> {
+export function sampleSnapShotBottomColor(
+  src: string,
+  frameAspect = SNAP_SHOT_FRAME_ASPECT,
+): Promise<RgbColor | null> {
   const cached = sampleCache.get(src);
   if (cached) return cached;
   const pending = new Promise<RgbColor | null>((resolve) => {
     const image = new Image();
     image.crossOrigin = "anonymous";
     image.decoding = "async";
-    image.addEventListener("load", () => resolve(readBottomBand(image)), { once: true });
+    image.addEventListener("load", () => resolve(readBottomBand(image, frameAspect)), {
+      once: true,
+    });
     image.addEventListener("error", () => resolve(null), { once: true });
     image.src = src;
   });

fix(web): sample the SnapShot band from the visible crop and add a Button overlay variant

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code