web: frame through the recipe, with the viewfinder where the stage was
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.
This commit is contained in:
+32
-20
@@ -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}
|
||||
</div>
|
||||
|
||||
<ImageStage
|
||||
{/* The stage's place in the workspace. The viewfinder covers the stage
|
||||
while it is open, and nothing else: the rail and the columns stay
|
||||
where they are, so a slider moves the look on the LIVE frames — the
|
||||
loop reads the recipe again for every one of them. */}
|
||||
<div className="stage-slot">
|
||||
<ImageStage
|
||||
previewUrl={previewUrl}
|
||||
// Nothing to show until the neutral render lands: the file itself is
|
||||
// the wrong geometry the moment the photo has been turned or cropped.
|
||||
@@ -3227,7 +3235,11 @@ export function Workspace() {
|
||||
peek={peek}
|
||||
onPeek={setPeek}
|
||||
onFile={(file) => 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 ? (
|
||||
<CameraView
|
||||
recipe={recipe}
|
||||
// A crop being framed is not committed, so the live view composes
|
||||
// on the bare photo — the geometry the stage behind it uses.
|
||||
frameId={cropEditing ? 'none' : frameId}
|
||||
options={stageOptions}
|
||||
useGeotag={useGeotag}
|
||||
gpsInfo={gpsInfo}
|
||||
assets={engine.assets}
|
||||
onShot={takeShot}
|
||||
onClose={() => setShooting(false)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{naming === 'recipe' ? (
|
||||
@@ -3369,21 +3396,6 @@ export function Workspace() {
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{shooting && engine ? (
|
||||
<CameraView
|
||||
recipe={recipe}
|
||||
// A crop being framed is not committed, so the live view composes on
|
||||
// the bare photo — exactly the geometry the preview behind it uses.
|
||||
frameId={cropEditing ? 'none' : frameId}
|
||||
options={stageOptions}
|
||||
useGeotag={useGeotag}
|
||||
gpsInfo={gpsInfo}
|
||||
assets={engine.assets}
|
||||
onShot={takeShot}
|
||||
onClose={() => setShooting(false)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{choosingExport ? (
|
||||
<ExportModal
|
||||
longest={editedLongest}
|
||||
|
||||
@@ -717,13 +717,19 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
.stage .toolbar .dims { font-family: var(--mono); white-space: nowrap; }
|
||||
.err { color: var(--danger); font-size: 12px; max-width: 520px; text-align: center; }
|
||||
|
||||
/* The stage and, over it, the live viewfinder: the slot they share in the
|
||||
workspace. The columns beside it are the app's own — a slider there moves the
|
||||
look on the frames the camera is grading right now. */
|
||||
.stage-slot { flex: 1 1 auto; min-width: 0; display: flex; position: relative; }
|
||||
|
||||
/* --- live viewfinder ---------------------------------------------------- */
|
||||
/* Full screen and black whatever the theme: a viewfinder is something the user
|
||||
looks through, not a panel in the page. */
|
||||
.camera-backdrop {
|
||||
position: fixed;
|
||||
/* Covers the stage, not the app: black whatever the theme, because a viewfinder
|
||||
is something the user looks through, but the tabs stay in reach — that is the
|
||||
whole point of framing through the recipe. */
|
||||
.camera-view {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 70;
|
||||
z-index: 5;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -203,7 +203,7 @@ export function CameraView({
|
||||
}, [onShot, shooting, t]);
|
||||
|
||||
return (
|
||||
<div className="camera-backdrop" data-key="camera-view">
|
||||
<div className="camera-view" data-key="camera-view">
|
||||
{/* 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. */}
|
||||
<canvas ref={canvasRef} className="camera-feed" data-key="camera-feed" />
|
||||
|
||||
@@ -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')}
|
||||
<span className="pro">PRO</span>
|
||||
</button>
|
||||
) : null}
|
||||
<p className="hint">{t('drop.demoLimit', { px: 2048 })}</p>
|
||||
@@ -2000,6 +2002,7 @@ export function ImageStage({
|
||||
{onCamera ? (
|
||||
<button type="button" className="btn" data-key="open-camera" onClick={onCamera}>
|
||||
{t('cam.open')}
|
||||
<span className="pro">PRO</span>
|
||||
</button>
|
||||
) : null}
|
||||
{onSaveOriginal ? (
|
||||
|
||||
Reference in New Issue
Block a user