frame the photograph in the shape you chose
With a shape set, MediaField replaces the plain thumbnail: it draws the picture in that shape and lets somebody drag and zoom to say which part shows. It already did all of that — it needed the block's crop and the aspect. Without a shape there is nothing to frame into, so the thumbnail stays and there is no framing control that would do nothing. Changing the shape clears the crop. A crop is a rectangle OF a shape, and keeping it would frame the new one by numbers chosen for the old. One SHAPES table, because three things have to agree: the options, the float stored as content.ratio, and the Tailwind aspect MediaField frames into. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -38,6 +38,34 @@ import { BandSettings } from './BandSettings';
|
||||
import { BlockSettings } from './BlockSettings';
|
||||
import { GalleryItems } from './GalleryItems';
|
||||
import { PartnersEditor } from './PartnersEditor';
|
||||
import { MediaField } from '../MediaField';
|
||||
|
||||
/**
|
||||
* The shapes a photograph block may take.
|
||||
*
|
||||
* One list, because three things need it and must agree: the select's options, the number stored as
|
||||
* `content.ratio`, and the Tailwind aspect `MediaField` frames into. Two of those are strings and one
|
||||
* is a float, which is exactly the drift a single table prevents.
|
||||
*/
|
||||
const SHAPES = [
|
||||
{ value: '', label: "The picture's own shape", ratio: null as number | null },
|
||||
{ value: '21/9', label: '21:9 — a letterbox band', ratio: 21 / 9 },
|
||||
{ value: '16/9', label: '16:9', ratio: 16 / 9 },
|
||||
{ value: '3/2', label: '3:2', ratio: 3 / 2 },
|
||||
{ value: '4/3', label: '4:3', ratio: 4 / 3 },
|
||||
{ value: '1/1', label: '1:1 — square', ratio: 1 },
|
||||
{ value: '3/4', label: '3:4 — upright', ratio: 3 / 4 },
|
||||
{ value: '2/3', label: '2:3 — upright', ratio: 2 / 3 },
|
||||
];
|
||||
|
||||
/** Stored as a float, matched with a tolerance: 21/9 does not survive a round trip exactly. */
|
||||
const closeTo = (a: number, b: unknown): boolean => typeof b === 'number' && Math.abs(a - b) < 0.01;
|
||||
|
||||
/** The Tailwind aspect for a block's stored ratio, or null when it keeps its own shape. */
|
||||
const shapeOf = (block: { content?: { url?: string; ratio?: number } }): string | null => {
|
||||
if (!block.content?.url || /\.(mp4|mov|webm|m4v)$/i.test(block.content.url)) return null;
|
||||
return SHAPES.find((one) => one.ratio && closeTo(one.ratio, block.content?.ratio))?.value ?? null;
|
||||
};
|
||||
import { useEditorSlot } from '../useEditorSlot';
|
||||
import { AddComponentDialog, type ComponentKind } from './AddComponentDialog';
|
||||
import { MediaPicker } from '../MediaPicker';
|
||||
@@ -737,7 +765,60 @@ export const PageBuilderPanel = () => {
|
||||
)}
|
||||
|
||||
{(block.kind === 'media' || block.kind === 'video') && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
{/*
|
||||
The shape of the slot, and the framing inside it.
|
||||
|
||||
The ratio becomes a slot shape and the site serves a rendition cut to it, so a band
|
||||
shorter than its photograph costs FEWER bytes rather than more.
|
||||
|
||||
With a shape chosen, `MediaField` replaces the plain thumbnail: it draws the picture in
|
||||
that shape and lets somebody drag and zoom to say which part shows. Without one there
|
||||
is nothing to frame into — the whole picture is used — so framing would be a control
|
||||
that does nothing.
|
||||
|
||||
`content` is replaced wholesale by the API, so every write sends what is already there
|
||||
alongside the new value.
|
||||
*/}
|
||||
{!/\.(mp4|mov|webm|m4v)$/i.test(block.content?.url ?? '') && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs">Shape</label>
|
||||
<select
|
||||
value={shapeOf(block) ?? ''}
|
||||
onChange={(event) => {
|
||||
const chosen = SHAPES.find((one) => one.value === event.currentTarget.value);
|
||||
void handlersRef.current.setContent(block, {
|
||||
...block.content,
|
||||
ratio: chosen?.ratio ?? undefined,
|
||||
// A crop is a rectangle of a SHAPE. Changing the shape makes it meaningless,
|
||||
// and keeping it would frame the new one by numbers chosen for the old.
|
||||
crop: undefined,
|
||||
});
|
||||
}}
|
||||
className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
|
||||
>
|
||||
{SHAPES.map((one) => (
|
||||
<option key={one.value || 'own'} value={one.value}>
|
||||
{one.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{shapeOf(block) ? (
|
||||
<MediaField
|
||||
value={block.content?.url ?? null}
|
||||
onChange={(url) => void handlersRef.current.setContent(block, { ...block.content, url: url ?? '' })}
|
||||
crop={block.content?.crop ?? null}
|
||||
onCropChange={(crop) =>
|
||||
void handlersRef.current.setContent(block, { ...block.content, crop: crop ?? undefined })
|
||||
}
|
||||
aspect={shapeOf(block)!}
|
||||
label="Choose a photograph"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -752,54 +833,7 @@ export const PageBuilderPanel = () => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
The shape of the slot, for a PHOTOGRAPH.
|
||||
|
||||
It is how you make a band shorter than the picture in it: the ratio becomes a slot
|
||||
shape, and the site asks av-club for a rendition cut to that — so the bytes served
|
||||
match the space rather than being scaled down by the browser.
|
||||
|
||||
Not offered for a video. There is nothing to crop and a ratio would letterbox it.
|
||||
|
||||
`content` is replaced wholesale by the API, so this sends what is already there
|
||||
alongside the new value — a PATCH with `{ ratio }` alone would drop the url.
|
||||
*/}
|
||||
{block.content?.url && !/\.(mp4|mov|webm|m4v)$/i.test(block.content.url) && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs">Shape</label>
|
||||
<select
|
||||
value={block.content.ratio ? String(block.content.ratio) : ''}
|
||||
onChange={(event) => {
|
||||
const value = event.currentTarget.value;
|
||||
void handlersRef.current.setContent(block, {
|
||||
...block.content,
|
||||
ratio: value ? Number(value) : undefined,
|
||||
});
|
||||
}}
|
||||
className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
|
||||
>
|
||||
<option value="">The picture's own shape</option>
|
||||
<option value={String(21 / 9)}>21:9 — a letterbox band</option>
|
||||
<option value={String(16 / 9)}>16:9</option>
|
||||
<option value={String(3 / 2)}>3:2</option>
|
||||
<option value={String(4 / 3)}>4:3</option>
|
||||
<option value="1">1:1 — square</option>
|
||||
<option value={String(3 / 4)}>3:4 — upright</option>
|
||||
<option value={String(2 / 3)}>2:3 — upright</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*
|
||||
What is actually in the block, at the width of the column.
|
||||
|
||||
A button that says "Choose media…" and nothing else asks somebody to open a dialog to
|
||||
find out what they already chose. Full width and its own aspect, because a strip of a
|
||||
photograph tells you it is a photograph and not which one.
|
||||
|
||||
A video shows its POSTER rather than playing: the question here is which file this is,
|
||||
and a frame answers it.
|
||||
*/}
|
||||
{/* A video shows its POSTER rather than playing: the question is which file this is. */}
|
||||
{block.content?.url && (
|
||||
<img
|
||||
src={
|
||||
@@ -811,6 +845,8 @@ export const PageBuilderPanel = () => {
|
||||
className="w-full rounded border border-border"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>,
|
||||
|
||||
Reference in New Issue
Block a user