fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a media slot is the picture, at the shape the page will show it

Browse Source 
It was a read-only text box holding a path and a Browse button beside it. A path is not what anybody is
choosing — somebody picking the header photograph is choosing a PHOTOGRAPH, and reading
`ABOUT US/HEADER.jpg` to find out whether you picked the right one is doing the computer's job for it.

MediaField is the slot: empty, it is a dashed box at the page's own aspect ratio that you click or drop
onto; filled, it is the picture, with Change and Remove appearing over it on hover. The panel also stops
changing height as things are chosen, so a page with three slots starts to look like the page rather
than like a form.

── The aspect ratio is a prop and has to be ──

The header is 21:9, the product video 16:9, a gallery slot square. The component cannot know that and
must not guess: the SITE decides what shape a slot is, and a component that guessed would be a second
opinion to keep in step with the stylesheet. Both callers name the ratio their partial draws.

── Dropping ──

It accepts a drag from Officer's own file browser, which carries paths under
`application/x-officer-files` — the same payload that moves files between windows. So dragging a
photograph out of Media onto a slot is one gesture and no upload.

It does not accept a file from the desktop. That is an upload into originals/, a different operation
with its own failure modes, and the Media section already does it properly.

── Also ──

`thumbUrl` was copied into GalleriesPanel and RecordsPanel and was about to be copied a third time. It
is a module now: three copies of a URL shape is three places to be wrong about the rung when the ladder
changes, which it did four times in a day.

A file that has gone since it was chosen falls back to the empty state rather than a browser's
broken-image glyph, and says so.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-30 23:43:12 +01:00
co-authored by Claude Opus 5
parent abdb519e8b
commit 9d3cd7702f
3 changed files with 219 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/MediaField.tsx
+171
View File
@@ -0,0 +1,171 @@
import { useState } from 'react';
import { ImageOff, Pencil, Trash2, Upload } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { MediaPicker } from './MediaPicker';
import { posterUrl, thumbUrl } from './thumbnail';
/**
* One picture or video on the page, shown at the shape the page will show it.
*
* ── Why not a path in a text box ──
*
* It was one, and a path is not what anybody is choosing. Somebody picking the header photograph is
* choosing a PHOTOGRAPH; `ABOUT US/HEADER.jpg` is how the machine refers to it, and reading a string to
* find out whether you picked the right image is doing the computer's job for it.
*
* So the field is the picture, at the aspect ratio the page uses. An empty one is the same box, empty —
* which also means the panel stops changing height as things are chosen, and a page with three slots
* looks like the page rather than like a form.
*
* ── The aspect ratio is a prop, and has to be ──
*
* The header is 21:9, the product video is 16:9, a gallery slot is square. This component cannot know
* that and must not guess: it is the SITE that decides what shape a slot is, and a component that
* guessed would be a second opinion to keep in step with the stylesheet.
*
* ── Dropping ──
*
* It accepts a drag from Officer's own file browser, which carries paths under
* `application/x-officer-files`. That is the same payload the file browser uses to move files between
* windows, so dragging a photograph out of Media and onto a slot is one gesture with no upload.
*
* It does NOT accept a file dragged from the desktop. That would be an upload into `originals/`, which
* is a different operation with its own failure modes, and the Media section already does it properly.
*/
const DRAG_TYPE = 'application/x-officer-files';
export const MediaField = ({
value,
onChange,
aspect,
kind = 'photo',
label,
}: {
/** A path under `originals/`, or null. */
value: string | null;
onChange: (path: string | null) => void;
/** Tailwind's ratio, as the page spells it — `21/9`, `16/9`, `1/1`. */
aspect: string;
/** A video is shown by its poster; there is no width rung to ask for. */
kind?: 'photo' | 'video';
/** What the picker's title says, so it names the thing rather than saying "media". */
label?: string;
}) => {
const [picking, setPicking] = useState(false);
const [over, setOver] = useState(false);
const [broken, setBroken] = useState(false);
const preview = value ? (kind === 'video' ? posterUrl(value) : thumbUrl(value, 640)) : null;
const accept = (event: React.DragEvent): string | null => {
if (!event.dataTransfer.types.includes(DRAG_TYPE)) return null;
try {
const paths = JSON.parse(event.dataTransfer.getData(DRAG_TYPE));
return Array.isArray(paths) && typeof paths[0] === 'string' ? paths[0] : null;
} catch {
return null;
}
};
return (
<>
<div
// `group` so the controls can appear on hover of the whole slot rather than of themselves.
className={`group relative w-full overflow-hidden rounded-md border ${
over ? 'border-primary bg-primary/5' : 'border-dashed border-border'
} ${value ? 'border-solid' : ''}`}
style={{ aspectRatio: aspect.replace('/', ' / ') }}
onDragOver={(event) => {
if (!accept(event)) return;
// Without preventDefault the browser refuses the drop entirely — the one line whose absence
// makes a target look dead with no error anywhere.
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
setOver(true);
}}
onDragLeave={() => setOver(false)}
onDrop={(event) => {
const path = accept(event);
setOver(false);
if (!path) return;
event.preventDefault();
setBroken(false);
onChange(path);
}}
>
{preview && !broken ? (
<img
src={preview}
alt=""
className="h-full w-full object-cover"
// A ladder that has not been built yet, or a file removed since it was chosen. Falls back
// to the empty state rather than a browser's broken-image glyph, which says nothing.
onError={() => setBroken(true)}
/>
) : (
<button
type="button"
onClick={() => setPicking(true)}
className="flex h-full w-full flex-col items-center justify-center gap-1.5 text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
>
{broken ? <ImageOff className="size-5" /> : <Upload className="size-5" />}
<span className="text-xs">
{broken ? 'That file is not there any more' : 'Click to choose, or drag one here'}
</span>
</button>
)}
{/*
The controls, over the picture, on hover.
Only when there IS one — on an empty slot the whole box is already a button, and a Change
button floating over "click to choose" would be two ways to do one thing.
`focus-within` as well as `group-hover`, so they can be reached by keyboard rather than only
by a pointer.
*/}
{value && !broken && (
<div className="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
<Button
size="sm"
variant="secondary"
className="h-7 gap-1 px-2 text-xs shadow"
onClick={() => setPicking(true)}
>
<Pencil className="size-3" />
Change
</Button>
<Button
size="sm"
variant="secondary"
className="h-7 px-2 text-xs shadow hover:text-destructive"
onClick={() => {
setBroken(false);
onChange(null);
}}
title="Remove"
>
<Trash2 className="size-3" />
</Button>
</div>
)}
</div>
{/* The path, small and underneath. Not editable — it is what was chosen, not a field — but
somebody comparing two similar photographs needs to be able to tell which is which. */}
{value && <p className="truncate font-mono text-[11px] text-muted-foreground/70">{value}</p>}
<MediaPicker
open={picking}
onClose={() => setPicking(false)}
title={label ? `Choose the ${label}` : 'Choose media'}
onPick={(path) => {
setPicking(false);
setBroken(false);
onChange(path);
}}
/>
</>
);
};
web/sections/AboutPanel.tsx
+14 -48
View File
@@ -1,12 +1,12 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { FolderOpen, Loader2 } from 'lucide-react';
import { Loader2 } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { readableError } from '../errors';
import { useFlash } from '../useFlash';
import { RichText } from '../RichText';
import { MediaPicker } from '../MediaPicker';
import { MediaField } from '../MediaField';
import { useSaveTarget } from '../SaveTarget';
/**
@@ -47,9 +47,6 @@ type About = {
manifesto_text: string | null;
};
/** Which media slot the picker is open for, or null. The two cannot be open at once. */
type Picking = 'header' | 'product' | null;
export const AboutPanel = () => {
const client = useClient();
const clientRef = useRef(client);
@@ -65,7 +62,6 @@ export const AboutPanel = () => {
const [busy, setBusy] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [saved, flashSaved] = useFlash();
const [picking, setPicking] = useState<Picking>(null);
/** Every write answers with the whole payload, so this is the only place state is set. */
const apply = useCallback((data: About) => {
@@ -154,20 +150,10 @@ export const AboutPanel = () => {
<p className="text-xs text-muted-foreground">The photograph at the top, and the line over it.</p>
</div>
{/* Chosen from originals/, never typed. The same picker Home's hero uses — a path somebody
types is a path that is wrong by one character and renders as a broken image. */}
<div className="flex items-center gap-2">
<Input
value={headerUrl}
readOnly
placeholder="No photograph chosen"
className="font-mono text-xs"
/>
<Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking('header')}>
<FolderOpen className="size-3.5" />
Browse
</Button>
</div>
{/* 21/9 because that is what the page uses — `aspect-[21/9]` in about/partials.tsx. The two
have to agree or the admin shows a shape the site does not have, which is worse than showing
no shape at all: it looks decided. */}
<MediaField value={headerUrl || null} onChange={(path) => setHeaderUrl(path ?? '')} aspect="21/9" label="header photograph" />
<div className="flex flex-col gap-1">
<label className="text-xs text-muted-foreground">Phrase</label>
@@ -191,18 +177,14 @@ export const AboutPanel = () => {
<p className="text-xs text-muted-foreground">What you make, and a video of it being made.</p>
</div>
<div className="flex items-center gap-2">
<Input
value={productVideo}
readOnly
placeholder="No video chosen"
className="font-mono text-xs"
/>
<Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking('product')}>
<FolderOpen className="size-3.5" />
Browse
</Button>
</div>
{/* 16/9, matching the `aspect-video` the product block draws. */}
<MediaField
value={productVideo || null}
onChange={(path) => setProductVideo(path ?? '')}
aspect="16/9"
kind="video"
label="product video"
/>
<RichText value={productText} onChange={setProductText} placeholder="What the product is." />
</section>
@@ -218,22 +200,6 @@ export const AboutPanel = () => {
{error && <p className="text-xs text-destructive">{error}</p>}
{/*
One picker, two slots.
`picking` names which one asked, so the chosen path lands in the right field. Two pickers would
be two copies of a modal that already knows how to browse originals/.
*/}
<MediaPicker
open={picking !== null}
onClose={() => setPicking(null)}
title={picking === 'product' ? 'Choose the product video' : 'Choose the header photograph'}
onPick={(path) => {
if (picking === 'product') setProductVideo(path);
else setHeaderUrl(path);
setPicking(null);
}}
/>
</div>
);
};
web/thumbnail.ts
+34
View File
@@ -0,0 +1,34 @@
import { getHeaders } from 'hooks/useClient';
/**
* A thumbnail URL for something under `originals/`, authenticated by `?token=`.
*
* ── Why the token is in the query ──
*
* An `<img>` cannot send an Authorization header. `user-middleware` and the permission gate both accept
* the token in the query string for exactly this, and the platform's own file browser does the same.
* Built without it first, and every picture 401s while the layout looks perfectly correct.
*
* ── Why this is a module ──
*
* It was copied into GalleriesPanel and again into RecordsPanel, and a third copy was about to go into
* MediaField. Three copies of a URL shape is three places to be wrong about the rung when the ladder
* changes — which it did, four times in a day.
*/
export const thumbUrl = (path: string, width: 256 | 320 | 480 | 640 = 320): string => {
const token = getHeaders()['Authorization']?.replace('Bearer ', '') ?? '';
const encoded = path.split('/').map(encodeURIComponent).join('/');
return `/api/fofos-admin/derived/${encoded}/${width}.webp?token=${encodeURIComponent(token)}`;
};
/**
* A video's poster, for the same reason.
*
* A video has no width rungs — `poster-448.webp` and friends are cut from its still — so a slot showing
* one asks for the poster rather than a width that does not exist.
*/
export const posterUrl = (path: string): string => {
const token = getHeaders()['Authorization']?.replace('Bearer ', '') ?? '';
const encoded = path.split('/').map(encodeURIComponent).join('/');
return `/api/fofos-admin/derived/${encoded}/poster-512.webp?token=${encodeURIComponent(token)}`;
};