From 6814b055cbb7f07116ee8615b8d9d2777fec2219 Mon Sep 17 00:00:00 2001 From: 3dtours Date: Sat, 26 Sep 2026 08:39:17 +0700 Subject: [PATCH] web: frame through the recipe, with the viewfinder where the stage was MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The live view is the one place where the look is chosen before the picture exists, so the columns that hold it have to stay in reach while the camera is open. The viewfinder was a fixed black sheet over the whole app: the rail and every slider were behind it, and the only way to change the look was to close the camera, grade the file, and open it again. It now covers the stage and nothing else — the stage and the view share a slot (`.stage-slot`, position relative) and the view is absolutely placed inside it, z-index 5, black in either theme. Measured at 1600px: the rail and the columns are on screen, the feed takes 1347px of the 1600 and the stage's own 253px rail the rest. A slider moved with the camera open reaches the very next frame (the render loop reads the recipe per frame, so nothing had to be wired), a monochrome sim takes the live feed from sat 42.1 to 0, and the shutter hands the studio that same frame with the sim already on it. The preview render is skipped while the viewfinder is up (`|| shooting` in the guard, and in the effect's deps): it would run the same recipe through the same renderer as the frames the user is actually watching, and the live one wins. Opening it is PRO, like the HSL chips and the geotag — the frames are the paid ones. The button stays on the page for everyone and carries the badge, and the click runs the app's own `promptPro`: the account dialog for a guest, the verification panel for a signed-in account, `/api/auth/me` being what says which. A verified account gets the camera; a guest gets `.modal-backdrop` and no `camera-view` at all. Probes: cam-pro-gate (guest sees the badge, the click opens the dialog, no viewfinder; verified opens it), cam-live-edit (rail and columns survive the live view, feed covers the stage, the recipe reaches the live frames and the shot), cam-smoke, cam-renegotiate, cam-close-flip. --- docker/frontend/src/App.tsx | 52 ++++++++++++++++----------- docker/frontend/src/styles/app.css | 16 ++++++--- docker/frontend/src/ui/CameraView.tsx | 2 +- docker/frontend/src/ui/ImageStage.tsx | 5 ++- 4 files changed, 48 insertions(+), 27 deletions(-) diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx index 49d9b7f..60d082b 100644 --- a/docker/frontend/src/App.tsx +++ b/docker/frontend/src/App.tsx @@ -675,7 +675,10 @@ export function Workspace() { ); useEffect(() => { - if (!engine || !previewBytes) return; + // While the viewfinder is up it grades the camera's frames with this very + // recipe, so a preview behind it would only compete for the same renderer — + // and the user is watching the live one. It comes back with the camera. + if (!engine || !previewBytes || shooting) return; const token = ++renderToken.current; const timer = setTimeout(async () => { setBusy(t('act.exporting')); @@ -730,7 +733,7 @@ export function Workspace() { }, PREVIEW_DEBOUNCE_MS); return () => clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [engine, previewBytes, recipe, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing]); + }, [engine, previewBytes, recipe, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing, shooting]); // The source copy behind previewBytes, re-made only when previewMax moves: // applying a crop upgrades it, CANCEL/UNDO brings the 1600px one back. @@ -3215,7 +3218,12 @@ export function Workspace() { ) : null} - + void loadFile(file)} - onCamera={cameraSupported() ? () => setShooting(true) : undefined} + onCamera={ + // PRO, like the frames and the geotag: the button is there for + // everyone and the click says why when it is not theirs to open. + cameraSupported() ? () => (pro ? setShooting(true) : promptPro()) : undefined + } cropEditing={cropEditing} cropRect={cropRect} cropWH={cropWH} @@ -3318,7 +3330,22 @@ export function Workspace() { /> ) : null } - /> + /> + {shooting && engine ? ( + setShooting(false)} + /> + ) : null} + {naming === 'recipe' ? ( @@ -3369,21 +3396,6 @@ export function Workspace() { /> ) : null} - {shooting && engine ? ( - setShooting(false)} - /> - ) : null} - {choosingExport ? ( +
{/* The stage and the file are one look; the live frame is shown whole, so the user composes against the geometry the export will use. */} diff --git a/docker/frontend/src/ui/ImageStage.tsx b/docker/frontend/src/ui/ImageStage.tsx index 0860101..bf1ef46 100644 --- a/docker/frontend/src/ui/ImageStage.tsx +++ b/docker/frontend/src/ui/ImageStage.tsx @@ -292,7 +292,8 @@ export function ImageStage({ onFile: (file: File) => void; // The other way a picture arrives: shot here, on the device's own camera, and // graded by the same pipeline the export uses (see CameraView). Absent on a - // build with no camera to open. + // build with no camera to open, and PRO — the button carries the badge and the + // click says why when the account is not one that may open it. onCamera?: () => void; // Crop editor: shown over the un-cropped preview until APPLY commits it. cropEditing?: boolean; @@ -1440,6 +1441,7 @@ export function ImageStage({ }} > {t('cam.open')} + PRO ) : null}

{t('drop.demoLimit', { px: 2048 })}

@@ -2000,6 +2002,7 @@ export function ImageStage({ {onCamera ? ( ) : null} {onSaveOriginal ? (