Performance and layout enhancements
This commit is contained in:
parent
d51eef4d42
commit
215ead0768
@ -1,4 +1,4 @@
|
||||
import { startTransition, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import { startTransition, useDeferredValue, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import {
|
||||
armCue,
|
||||
createCueRuntimeState,
|
||||
@ -37,7 +37,9 @@ import {
|
||||
deleteCue,
|
||||
fireCue,
|
||||
generateCue,
|
||||
loadState,
|
||||
loadAdminBootstrap,
|
||||
loadAdminLibrary,
|
||||
loadAdminLive,
|
||||
moderateAsset,
|
||||
moveCue,
|
||||
rescanLibrary,
|
||||
@ -46,6 +48,7 @@ import {
|
||||
} from "../features/live/api";
|
||||
import {
|
||||
createPresentationHash,
|
||||
createPresentationStructureHash,
|
||||
writeProgramOutputState,
|
||||
type ProgramOutputState
|
||||
} from "../features/live/output-sync";
|
||||
@ -199,6 +202,19 @@ const matchPresetForScene = (
|
||||
const getApprovedAssets = (payload: RepositoryState) =>
|
||||
payload.photoAssets.filter((asset) => asset.moderationStatus === "approved");
|
||||
|
||||
const getPendingModerationAssets = (photoAssets: PhotoAsset[], submissions: Submission[]) =>
|
||||
photoAssets.filter((asset) => {
|
||||
if (asset.moderationStatus !== "pending") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const submission = submissions.find((entry) => entry.id === asset.submissionId);
|
||||
return submission?.source !== "admin_upload";
|
||||
});
|
||||
|
||||
const getPendingModerationCount = (photoAssets: PhotoAsset[], submissions: Submission[]) =>
|
||||
getPendingModerationAssets(photoAssets, submissions).length;
|
||||
|
||||
const filterAvailableAssetIds = (payload: RepositoryState, assetIds: string[]) => {
|
||||
const available = new Set(getApprovedAssets(payload).map((asset) => asset.id));
|
||||
return assetIds.filter((assetId) => available.has(assetId));
|
||||
@ -491,12 +507,15 @@ export const App = () => {
|
||||
const [activePresetId, setActivePresetId] = useState(effectPresetLibrary[0]?.id ?? "");
|
||||
const [cueDraft, setCueDraft] = useState<CueDraftState>(createCueDraft());
|
||||
const [mediaSearch, setMediaSearch] = useState("");
|
||||
const deferredMediaSearch = useDeferredValue(mediaSearch);
|
||||
const [uploadName, setUploadName] = useState("");
|
||||
const [uploadCaption, setUploadCaption] = useState("");
|
||||
const [uploadPromptAnswer, setUploadPromptAnswer] = useState("");
|
||||
const [uploadFile, setUploadFile] = useState<File | null>(null);
|
||||
const [uploadAddToSelection, setUploadAddToSelection] = useState(true);
|
||||
const [status, setStatus] = useState("Connecting to local show state...");
|
||||
const [pendingCount, setPendingCount] = useState(0);
|
||||
const [approvedCount, setApprovedCount] = useState(0);
|
||||
const uploadInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const mediaSearchInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const metadataHydrationKeyRef = useRef<string | null>(null);
|
||||
@ -516,11 +535,13 @@ export const App = () => {
|
||||
};
|
||||
|
||||
const hydrate = (payload: RepositoryState, initialize: boolean) => {
|
||||
const pendingCount = payload.photoAssets.filter((asset) => asset.moderationStatus === "pending").length;
|
||||
const nextPendingCount = getPendingModerationCount(payload.photoAssets, payload.submissions);
|
||||
const nextApprovedCount = getApprovedAssets(payload).length;
|
||||
|
||||
startTransition(() => {
|
||||
setState(payload);
|
||||
setStatus(`Ready. ${pendingCount} pending / ${getApprovedAssets(payload).length} approved.`);
|
||||
setPendingCount(nextPendingCount);
|
||||
setApprovedCount(nextApprovedCount);
|
||||
|
||||
if (initialize) {
|
||||
const initial = createInitialLiveState(payload);
|
||||
@ -535,6 +556,7 @@ export const App = () => {
|
||||
setActivePresetId(initial.activePresetId);
|
||||
setCueDraft(initial.cueDraft);
|
||||
publishProgramOutput(initial.programPresentation, false, initial.programTransition);
|
||||
setStatus("Ready. Local show state loaded.");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -542,20 +564,59 @@ export const App = () => {
|
||||
...current,
|
||||
cueStack: payload.cues
|
||||
}));
|
||||
setSelectedAssetIds((current) => {
|
||||
const filtered = filterAvailableAssetIds(payload, current);
|
||||
return filtered.length > 0 ? filtered : getDefaultAssetIds(payload);
|
||||
});
|
||||
setSelectedAssetIds((current) => filterAvailableAssetIds(payload, current));
|
||||
});
|
||||
};
|
||||
|
||||
const refresh = async (initialize = false) => {
|
||||
const payload = await loadState();
|
||||
const refreshBootstrap = async (initialize = false) => {
|
||||
const payload = await loadAdminBootstrap();
|
||||
hydrate(payload, initialize);
|
||||
};
|
||||
|
||||
const refreshLiveState = async () => {
|
||||
const payload = await loadAdminLive();
|
||||
startTransition(() => {
|
||||
setPendingCount(payload.pendingCount);
|
||||
setApprovedCount(payload.approvedCount);
|
||||
setState((current) => (current ? { ...current, cues: payload.cues } : current));
|
||||
setCueState((current) => ({
|
||||
...current,
|
||||
cueStack: payload.cues
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
const refreshLibraryState = async () => {
|
||||
const payload = await loadAdminLibrary();
|
||||
const nextPendingCount = getPendingModerationCount(payload.photoAssets, payload.submissions);
|
||||
const nextApprovedCount = payload.photoAssets.filter((asset) => asset.moderationStatus === "approved").length;
|
||||
const availableIds = new Set(
|
||||
payload.photoAssets
|
||||
.filter((asset) => asset.moderationStatus === "approved")
|
||||
.map((asset) => asset.id)
|
||||
);
|
||||
const knownIds = new Set(payload.photoAssets.map((asset) => asset.id));
|
||||
|
||||
startTransition(() => {
|
||||
setPendingCount(nextPendingCount);
|
||||
setApprovedCount(nextApprovedCount);
|
||||
setState((current) =>
|
||||
current
|
||||
? {
|
||||
...current,
|
||||
photoAssets: payload.photoAssets,
|
||||
submissions: payload.submissions,
|
||||
collections: payload.collections
|
||||
}
|
||||
: current
|
||||
);
|
||||
setSelectedAssetIds((current) => current.filter((assetId) => availableIds.has(assetId)));
|
||||
setMetadataAssetId((current) => (current && knownIds.has(current) ? current : null));
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void refresh(true).catch((error) => {
|
||||
void refreshBootstrap(true).catch((error) => {
|
||||
setStatus(error instanceof Error ? error.message : "Could not load state.");
|
||||
});
|
||||
}, []);
|
||||
@ -566,34 +627,31 @@ export const App = () => {
|
||||
}
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
void refresh(false).catch(() => {
|
||||
void refreshLiveState().catch(() => {
|
||||
setStatus("Refresh failed. Local state may be stale.");
|
||||
});
|
||||
if (workspaceMode === "build" || showUtilityTab === "media" || showUtilityTab === "moderation") {
|
||||
void refreshLibraryState().catch(() => {
|
||||
setStatus("Library refresh failed. Media state may be stale.");
|
||||
});
|
||||
}
|
||||
}, 4000);
|
||||
|
||||
return () => window.clearInterval(interval);
|
||||
}, [state]);
|
||||
}, [showUtilityTab, state, workspaceMode]);
|
||||
|
||||
const pendingAssets = useMemo(
|
||||
() =>
|
||||
state?.photoAssets.filter((asset) => {
|
||||
if (asset.moderationStatus !== "pending") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const submission = state.submissions.find((entry) => entry.id === asset.submissionId);
|
||||
return submission?.source !== "admin_upload";
|
||||
}) ?? [],
|
||||
[state]
|
||||
() => (state ? getPendingModerationAssets(state.photoAssets, state.submissions) : []),
|
||||
[state?.photoAssets, state?.submissions]
|
||||
);
|
||||
const approvedAssets = useMemo(() => (state ? getApprovedAssets(state) : []), [state]);
|
||||
const approvedAssets = useMemo(() => (state ? getApprovedAssets(state) : []), [state?.photoAssets]);
|
||||
const availablePresets = useMemo(
|
||||
() => (state && state.effectPresets.length > 0 ? state.effectPresets : effectPresetLibrary),
|
||||
[state]
|
||||
[state?.effectPresets]
|
||||
);
|
||||
const selectedScene = useMemo(
|
||||
() => (state ? findSceneById(state, selectedSceneId) : undefined),
|
||||
[selectedSceneId, state]
|
||||
[selectedSceneId, state?.scenes]
|
||||
);
|
||||
const selectedScenePresets = useMemo(
|
||||
() => getScenePresets(selectedScene, availablePresets),
|
||||
@ -604,7 +662,7 @@ export const App = () => {
|
||||
(state?.scenes ?? []).filter(
|
||||
(scene) => sceneBrowserFilter === "all" || scene.sceneFamily === sceneBrowserFilter
|
||||
),
|
||||
[sceneBrowserFilter, state]
|
||||
[sceneBrowserFilter, state?.scenes]
|
||||
);
|
||||
const sceneFamilyCounts = useMemo(() => {
|
||||
const counts: Record<SceneBrowserFilter, number> = {
|
||||
@ -620,31 +678,31 @@ export const App = () => {
|
||||
}
|
||||
|
||||
return counts;
|
||||
}, [state]);
|
||||
}, [state?.scenes]);
|
||||
const previewCue = useMemo(
|
||||
() => (state ? findCueById(state, cueState.previewCueId) : undefined),
|
||||
[cueState.previewCueId, state]
|
||||
[cueState.previewCueId, state?.cues]
|
||||
);
|
||||
const currentCue = useMemo(
|
||||
() => (state ? findCueById(state, cueState.currentCueId) : undefined),
|
||||
[cueState.currentCueId, state]
|
||||
[cueState.currentCueId, state?.cues]
|
||||
);
|
||||
const safeCue = useMemo(
|
||||
() => state?.cues.find((cue) => cue.id === state.showConfig.safeSceneCueId),
|
||||
[state]
|
||||
[state?.cues, state?.showConfig.safeSceneCueId]
|
||||
);
|
||||
const cueStack = state?.cues ?? [];
|
||||
const favoriteCollection: Collection | undefined = useMemo(
|
||||
() => state?.collections.find((collection) => collection.kind === "favorites"),
|
||||
[state]
|
||||
[state?.collections]
|
||||
);
|
||||
const curatedCollection: Collection | undefined = useMemo(
|
||||
() => state?.collections.find((collection) => collection.id === "collection-curated-library"),
|
||||
[state]
|
||||
[state?.collections]
|
||||
);
|
||||
const submissionMap = useMemo(
|
||||
() => new Map((state?.submissions ?? []).map((submission) => [submission.id, submission] as const)),
|
||||
[state]
|
||||
[state?.submissions]
|
||||
);
|
||||
const selectedAssets = useMemo(() => {
|
||||
const assetMap = new Map(approvedAssets.map((asset) => [asset.id, asset] as const));
|
||||
@ -670,21 +728,21 @@ export const App = () => {
|
||||
[metadataAsset, submissionMap]
|
||||
);
|
||||
const filteredPendingAssets = useMemo(() => {
|
||||
const query = mediaSearch.trim().toLowerCase();
|
||||
const query = deferredMediaSearch.trim().toLowerCase();
|
||||
if (!query) {
|
||||
return pendingAssets;
|
||||
}
|
||||
|
||||
return pendingAssets.filter((asset) => getAssetSearchText(asset, submissionMap.get(asset.submissionId)).includes(query));
|
||||
}, [mediaSearch, pendingAssets, submissionMap]);
|
||||
}, [deferredMediaSearch, pendingAssets, submissionMap]);
|
||||
const filteredApprovedAssets = useMemo(() => {
|
||||
const query = mediaSearch.trim().toLowerCase();
|
||||
const query = deferredMediaSearch.trim().toLowerCase();
|
||||
if (!query) {
|
||||
return approvedAssets;
|
||||
}
|
||||
|
||||
return approvedAssets.filter((asset) => getAssetSearchText(asset, submissionMap.get(asset.submissionId)).includes(query));
|
||||
}, [approvedAssets, mediaSearch, submissionMap]);
|
||||
}, [approvedAssets, deferredMediaSearch, submissionMap]);
|
||||
const activePreset: EffectPreset | undefined =
|
||||
selectedScenePresets.find((preset) => preset.id === activePresetId) ??
|
||||
availablePresets.find((preset) => preset.id === activePresetId);
|
||||
@ -774,11 +832,11 @@ export const App = () => {
|
||||
}, [activePreset?.id, activePreset?.modeKey, previewCue, previewLabel, previewParams, previewUsesArmedCue, selectedAssets, selectedScene, state]);
|
||||
|
||||
const previewActivationKey = useMemo(
|
||||
() => createPresentationHash(previewPresentation, false, null),
|
||||
() => createPresentationStructureHash(previewPresentation),
|
||||
[previewPresentation]
|
||||
);
|
||||
const programPresentation = programOutputState?.presentation ?? null;
|
||||
const programActivationKey = programOutputState?.presentationHash ?? "program-empty";
|
||||
const programActivationKey = `${programOutputState?.outputRevision ?? 0}:${createPresentationStructureHash(programPresentation)}`;
|
||||
|
||||
useEffect(() => {
|
||||
if (metadataAsset?.id && metadataAssetId !== metadataAsset.id) {
|
||||
@ -902,7 +960,7 @@ export const App = () => {
|
||||
const handleRescanLibrary = async () => {
|
||||
try {
|
||||
const payload = await rescanLibrary();
|
||||
hydrate(payload, true);
|
||||
hydrate(payload, false);
|
||||
setStatus(
|
||||
`Library rescanned. ${getApprovedAssets(payload).length} approved assets ready / ${payload.collections.find((collection) => collection.id === "collection-curated-library")?.assetIds.length ?? 0} curated.`
|
||||
);
|
||||
@ -945,7 +1003,7 @@ export const App = () => {
|
||||
|
||||
try {
|
||||
const result = await createAdminUpload(form);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setMetadataAssetId(result.assetId);
|
||||
setMetadataDirty(false);
|
||||
|
||||
@ -1001,7 +1059,7 @@ export const App = () => {
|
||||
setMetadataSaving(true);
|
||||
await updateSubmissionMetadata(metadataSubmission.id, payload);
|
||||
setMetadataDirty(false);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setStatus(`Metadata saved for ${metadataTitle}.`);
|
||||
} catch (error) {
|
||||
setStatus(error instanceof Error ? error.message : "Could not save image metadata.");
|
||||
@ -1033,7 +1091,7 @@ export const App = () => {
|
||||
}
|
||||
setSelectedAssetIds((current) => current.filter((assetId) => assetId !== asset.id));
|
||||
setMetadataAssetId((current) => (current === asset.id ? null : current));
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setStatus(
|
||||
submission?.source === "library_import"
|
||||
? `Removed ${assetLabel} from the approved bank.`
|
||||
@ -1184,7 +1242,7 @@ export const App = () => {
|
||||
|
||||
const savedCue = cueDraft.id ? await updateCue(cueId, payload) : await createCue(payload);
|
||||
syncPreviewFromCue(savedCue);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setCueDraft(createCueDraft(savedCue, selectedScene));
|
||||
setStatus(cueDraft.id ? `Cue updated: ${savedCue.notes ?? savedCue.id}` : `Cue created: ${savedCue.notes ?? savedCue.id}`);
|
||||
};
|
||||
@ -1205,7 +1263,7 @@ export const App = () => {
|
||||
|
||||
const createdCue = await createCue(payload);
|
||||
syncPreviewFromCue(createdCue);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setCueDraft(createCueDraft(createdCue, selectedScene));
|
||||
setStatus(`Cue inserted: ${createdCue.notes ?? createdCue.id}`);
|
||||
};
|
||||
@ -1224,7 +1282,7 @@ export const App = () => {
|
||||
payload.notes = `${cueDraft.notes || selectedScene?.name || "Cue"} copy`;
|
||||
const duplicatedCue = await createCue(payload);
|
||||
syncPreviewFromCue(duplicatedCue);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setCueDraft(createCueDraft(duplicatedCue, selectedScene));
|
||||
setStatus(`Cue duplicated: ${duplicatedCue.notes ?? duplicatedCue.id}`);
|
||||
};
|
||||
@ -1235,7 +1293,7 @@ export const App = () => {
|
||||
}
|
||||
|
||||
await deleteCue(cueDraft.id);
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setCueDraft(createCueDraft(undefined, selectedScene));
|
||||
setStatus("Cue deleted.");
|
||||
};
|
||||
@ -1246,7 +1304,7 @@ export const App = () => {
|
||||
}
|
||||
|
||||
await moveCue(cueDraft.id, { direction });
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
setStatus(`Cue moved ${direction}.`);
|
||||
};
|
||||
|
||||
@ -1255,7 +1313,7 @@ export const App = () => {
|
||||
decision,
|
||||
reasonCode: decision === "rejected" ? "operator_review" : undefined
|
||||
});
|
||||
await refresh(false);
|
||||
await refreshBootstrap(false);
|
||||
};
|
||||
|
||||
const handleTakeCue = async () => {
|
||||
@ -2251,7 +2309,12 @@ export const App = () => {
|
||||
{selectedAssetCountLabel} / {selectedScene?.renderMode ?? "none"}
|
||||
</span>
|
||||
</div>
|
||||
<SceneViewport presentation={previewPresentation} activationKey={previewActivationKey} />
|
||||
<SceneViewport
|
||||
presentation={previewPresentation}
|
||||
activationKey={previewActivationKey}
|
||||
qualityProfile="preview"
|
||||
busy={workspaceMode === "build"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="surface-card surface-card--program">
|
||||
@ -2269,6 +2332,7 @@ export const App = () => {
|
||||
blackout={cueState.blackout}
|
||||
transition={programOutputState?.transition ?? null}
|
||||
activationKey={`${programActivationKey}:${cueState.blackout ? "blackout" : "live"}`}
|
||||
qualityProfile="program"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -2290,6 +2354,7 @@ export const App = () => {
|
||||
</div>
|
||||
<div className="admin-status">
|
||||
<span className="admin-topbar__status-text">{status}</span>
|
||||
<span className="source-badge">{pendingCount} pending / {approvedCount} approved</span>
|
||||
<div className="workspace-toggle" role="tablist" aria-label="Workspace mode">
|
||||
<button
|
||||
className={workspaceMode === "show" ? "workspace-toggle__button workspace-toggle__button--active" : "workspace-toggle__button"}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import type { RenderSurface as RenderSurfaceType, SurfacePresentation } from "@goodgrief/render-engine";
|
||||
import type {
|
||||
RenderSurface as RenderSurfaceType,
|
||||
SurfacePresentation,
|
||||
SurfaceQualityProfile
|
||||
} from "@goodgrief/render-engine";
|
||||
import type { CueTransition } from "@goodgrief/shared-types";
|
||||
import "./viewport.css";
|
||||
|
||||
@ -8,6 +12,8 @@ interface SceneViewportProps {
|
||||
blackout?: boolean;
|
||||
transition?: CueTransition | null;
|
||||
activationKey?: string;
|
||||
qualityProfile?: SurfaceQualityProfile;
|
||||
busy?: boolean;
|
||||
}
|
||||
|
||||
const defaultTransition: CueTransition = {
|
||||
@ -15,7 +21,14 @@ const defaultTransition: CueTransition = {
|
||||
durationMs: 0
|
||||
};
|
||||
|
||||
export const SceneViewport = ({ presentation, blackout = false, transition, activationKey }: SceneViewportProps) => {
|
||||
export const SceneViewport = ({
|
||||
presentation,
|
||||
blackout = false,
|
||||
transition,
|
||||
activationKey,
|
||||
qualityProfile = "program",
|
||||
busy = false
|
||||
}: SceneViewportProps) => {
|
||||
const frameRef = useRef<HTMLDivElement | null>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const surfaceRef = useRef<RenderSurfaceType | null>(null);
|
||||
@ -23,11 +36,15 @@ export const SceneViewport = ({ presentation, blackout = false, transition, acti
|
||||
const activationRef = useRef<string | undefined>(activationKey);
|
||||
const transitionRef = useRef<CueTransition | null | undefined>(transition);
|
||||
const blackoutRef = useRef(blackout);
|
||||
const qualityProfileRef = useRef<SurfaceQualityProfile>(qualityProfile);
|
||||
const busyRef = useRef(busy);
|
||||
|
||||
presentationRef.current = presentation;
|
||||
activationRef.current = activationKey;
|
||||
transitionRef.current = transition;
|
||||
blackoutRef.current = blackout;
|
||||
qualityProfileRef.current = qualityProfile;
|
||||
busyRef.current = busy;
|
||||
|
||||
useEffect(() => {
|
||||
const frame = frameRef.current;
|
||||
@ -46,6 +63,8 @@ export const SceneViewport = ({ presentation, blackout = false, transition, acti
|
||||
|
||||
const surface = new RenderSurface(canvas);
|
||||
surface.registerMany(defaultScenePlugins);
|
||||
surface.setQualityProfile(qualityProfileRef.current);
|
||||
surface.setBusy(busyRef.current);
|
||||
surface.setBlackout(blackoutRef.current);
|
||||
surfaceRef.current = surface;
|
||||
|
||||
@ -60,7 +79,7 @@ export const SceneViewport = ({ presentation, blackout = false, transition, acti
|
||||
|
||||
const initialPresentation = presentationRef.current;
|
||||
if (initialPresentation) {
|
||||
void surface.activate(initialPresentation, defaultTransition);
|
||||
void surface.activate(initialPresentation, defaultTransition, activationRef.current);
|
||||
}
|
||||
});
|
||||
|
||||
@ -76,15 +95,27 @@ export const SceneViewport = ({ presentation, blackout = false, transition, acti
|
||||
surfaceRef.current?.setBlackout(blackout);
|
||||
}, [blackout]);
|
||||
|
||||
useEffect(() => {
|
||||
surfaceRef.current?.setQualityProfile(qualityProfile);
|
||||
}, [qualityProfile]);
|
||||
|
||||
useEffect(() => {
|
||||
surfaceRef.current?.setBusy(busy);
|
||||
}, [busy]);
|
||||
|
||||
useEffect(() => {
|
||||
const surface = surfaceRef.current;
|
||||
if (!surface) {
|
||||
return;
|
||||
}
|
||||
|
||||
void surface.activate(presentationRef.current, transitionRef.current ?? defaultTransition);
|
||||
void surface.activate(presentationRef.current, transitionRef.current ?? defaultTransition, activationRef.current);
|
||||
}, [activationKey]);
|
||||
|
||||
useEffect(() => {
|
||||
surfaceRef.current?.updatePresentation(presentation, activationKey);
|
||||
}, [activationKey, presentation]);
|
||||
|
||||
return (
|
||||
<div ref={frameRef} className="surface-viewport">
|
||||
<canvas ref={canvasRef} className="surface-viewport__canvas" />
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
import type {
|
||||
Collection,
|
||||
Cue,
|
||||
CueGeneratePayload,
|
||||
CueMovePayload,
|
||||
CueUpsertPayload,
|
||||
ModerationActionPayload,
|
||||
PhotoAsset,
|
||||
RepositoryState,
|
||||
Submission,
|
||||
SubmissionUpdatePayload
|
||||
} from "@goodgrief/shared-types";
|
||||
|
||||
export interface AdminLivePayload {
|
||||
cues: Cue[];
|
||||
pendingCount: number;
|
||||
approvedCount: number;
|
||||
}
|
||||
|
||||
export interface AdminLibraryPayload {
|
||||
photoAssets: PhotoAsset[];
|
||||
submissions: Submission[];
|
||||
collections: Collection[];
|
||||
}
|
||||
|
||||
const postVoid = async (url: string, body?: unknown) => {
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
@ -42,13 +56,14 @@ const requestJson = async <T>(url: string, init?: RequestInit) => {
|
||||
return (await response.json()) as T;
|
||||
};
|
||||
|
||||
export const loadState = async (): Promise<RepositoryState> => {
|
||||
const response = await fetch("/api/state");
|
||||
if (!response.ok) {
|
||||
throw new Error("Could not load admin state.");
|
||||
}
|
||||
return (await response.json()) as RepositoryState;
|
||||
};
|
||||
export const loadAdminBootstrap = async (): Promise<RepositoryState> =>
|
||||
requestJson<RepositoryState>("/api/admin/bootstrap");
|
||||
|
||||
export const loadAdminLive = async (): Promise<AdminLivePayload> =>
|
||||
requestJson<AdminLivePayload>("/api/admin/live");
|
||||
|
||||
export const loadAdminLibrary = async (): Promise<AdminLibraryPayload> =>
|
||||
requestJson<AdminLibraryPayload>("/api/admin/library");
|
||||
|
||||
export const rescanLibrary = async (): Promise<RepositoryState> =>
|
||||
requestJson<RepositoryState>("/api/library/rescan", {
|
||||
|
||||
@ -13,6 +13,18 @@ export interface ProgramOutputState {
|
||||
|
||||
const storageKey = "goodgrief:program-output";
|
||||
const channelName = "goodgrief-program-output";
|
||||
const liveMutableParamPaths = new Set([
|
||||
"composition.motion",
|
||||
"composition.cameraTravel",
|
||||
"composition.orbitAmount",
|
||||
"scenicTreatment.fieldType",
|
||||
"scenicTreatment.fieldIntensity",
|
||||
"scenicTreatment.fieldScale",
|
||||
"scenicTreatment.fieldSpeed",
|
||||
"scenicTreatment.hue",
|
||||
"scenicTreatment.saturation",
|
||||
"scenicTreatment.lightness"
|
||||
]);
|
||||
|
||||
const canUseWindow = () => typeof window !== "undefined";
|
||||
|
||||
@ -28,6 +40,36 @@ const hashString = (input: string) => {
|
||||
return (hash >>> 0).toString(16);
|
||||
};
|
||||
|
||||
const getStructuralParams = (presentation: SurfacePresentation | null) => {
|
||||
if (!presentation?.params) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const flattened = flattenSceneParams(presentation.params);
|
||||
for (const path of liveMutableParamPaths) {
|
||||
delete flattened[path];
|
||||
}
|
||||
|
||||
return flattened;
|
||||
};
|
||||
|
||||
export const createPresentationStructureHash = (presentation: SurfacePresentation | null) =>
|
||||
hashString(
|
||||
JSON.stringify({
|
||||
presentation: presentation
|
||||
? {
|
||||
definitionId: presentation.definition.id,
|
||||
effectPresetId: presentation.effectPresetId ?? null,
|
||||
modeKey: presentation.modeKey ?? null,
|
||||
assetIds: presentation.assets.map((asset) => asset.id),
|
||||
textFragments: presentation.textFragments ?? [],
|
||||
anchorCaption: presentation.anchorCaption ?? null,
|
||||
params: getStructuralParams(presentation)
|
||||
}
|
||||
: null
|
||||
})
|
||||
);
|
||||
|
||||
export const createPresentationHash = (
|
||||
presentation: SurfacePresentation | null,
|
||||
blackout: boolean,
|
||||
|
||||
@ -24,6 +24,8 @@ export interface SurfacePresentation {
|
||||
anchorCaption?: string | null;
|
||||
}
|
||||
|
||||
export type SurfaceQualityProfile = "preview" | "program";
|
||||
|
||||
export interface LoadedPhotoAsset {
|
||||
asset: PhotoAsset;
|
||||
texture: THREE.Texture | null;
|
||||
@ -144,6 +146,21 @@ type PlaneBundle = {
|
||||
height: number;
|
||||
};
|
||||
|
||||
type LayoutRect = {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
width: number;
|
||||
height: number;
|
||||
yaw?: number;
|
||||
pitch?: number;
|
||||
};
|
||||
|
||||
const SAFE_FRAME = {
|
||||
width: 6.9,
|
||||
height: 4.6
|
||||
} as const;
|
||||
|
||||
const createPhotoPlane = (
|
||||
asset: LoadedPhotoAsset,
|
||||
_params: SceneParams["photoTreatment"],
|
||||
@ -216,13 +233,214 @@ const createPhotoPlane = (
|
||||
};
|
||||
};
|
||||
|
||||
const fitPlaneHeightToRect = (asset: LoadedPhotoAsset, rect: LayoutRect) =>
|
||||
clamp(Math.min(rect.height, rect.width / clamp(asset.aspect, 0.48, 1.95)), 0.9, rect.height);
|
||||
|
||||
const createFittedPhotoPlane = (
|
||||
asset: LoadedPhotoAsset,
|
||||
params: SceneParams["photoTreatment"],
|
||||
rect: LayoutRect,
|
||||
options: {
|
||||
opacity?: number;
|
||||
frameOpacity?: number;
|
||||
shadowOpacity?: number;
|
||||
tint?: string;
|
||||
} = {}
|
||||
) => {
|
||||
const plane = createPhotoPlane(asset, params, {
|
||||
...options,
|
||||
height: fitPlaneHeightToRect(asset, rect)
|
||||
});
|
||||
plane.group.position.set(rect.x, rect.y, rect.z);
|
||||
plane.group.rotation.x = rect.pitch ?? 0;
|
||||
plane.group.rotation.y = rect.yaw ?? 0;
|
||||
return plane;
|
||||
};
|
||||
|
||||
const applyLayoutSpread = (rects: LayoutRect[], spread: number, depth: number) => {
|
||||
const xGain = 0.92 + spread * 0.36;
|
||||
const yGain = 0.96 + spread * 0.14;
|
||||
const depthGain = 0.9 + depth * 0.45;
|
||||
return rects.map((rect, index) => ({
|
||||
...rect,
|
||||
x: rect.x * xGain,
|
||||
y: rect.y * yGain,
|
||||
z: rect.z * depthGain - index * depth * 0.08
|
||||
}));
|
||||
};
|
||||
|
||||
const createHeroLayoutRects = (
|
||||
count: number,
|
||||
formation: SceneParams["composition"]["formation"],
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
let base: LayoutRect[];
|
||||
|
||||
if (count <= 1) {
|
||||
base = [{ x: 0, y: 0.04, z: -0.9, width: 4.9, height: 4.2 }];
|
||||
} else if (count === 2) {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -1.05, y: 0.02, z: -0.92, width: 4.15, height: 4.12, yaw: 0.04 },
|
||||
{ x: 2.25, y: 0.7, z: -1.8, width: 2.15, height: 2.18, yaw: -0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.84, y: 0.04, z: -0.92, width: 4.1, height: 4.12, yaw: 0.04 },
|
||||
{ x: 2.3, y: -0.18, z: -1.72, width: 2.18, height: 2.14, yaw: -0.08 }
|
||||
];
|
||||
} else if (count === 3) {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -0.52, y: 0, z: -0.92, width: 3.95, height: 4.04, yaw: 0.02 },
|
||||
{ x: -2.5, y: 1.24, z: -1.9, width: 1.9, height: 1.96, yaw: 0.1 },
|
||||
{ x: 2.5, y: 1.02, z: -1.82, width: 1.92, height: 1.98, yaw: -0.1 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.58, y: 0.06, z: -0.92, width: 3.92, height: 4.02, yaw: 0.02 },
|
||||
{ x: 2.48, y: 1.04, z: -1.84, width: 1.88, height: 1.92, yaw: -0.1 },
|
||||
{ x: 2.48, y: -1.02, z: -1.98, width: 1.88, height: 1.92, yaw: -0.08 }
|
||||
];
|
||||
} else {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -0.42, y: 0, z: -0.92, width: 3.6, height: 3.86, yaw: 0.02 },
|
||||
{ x: -2.55, y: 1.34, z: -1.86, width: 1.68, height: 1.72, yaw: 0.1 },
|
||||
{ x: 2.52, y: 1.08, z: -1.94, width: 1.68, height: 1.72, yaw: -0.1 },
|
||||
{ x: 2.36, y: -1.22, z: -2.02, width: 1.68, height: 1.72, yaw: -0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.74, y: 0.04, z: -0.92, width: 3.66, height: 3.84, yaw: 0.02 },
|
||||
{ x: 2.44, y: 1.36, z: -1.82, width: 1.66, height: 1.68, yaw: -0.1 },
|
||||
{ x: 2.44, y: 0, z: -1.9, width: 1.66, height: 1.68, yaw: -0.08 },
|
||||
{ x: 2.44, y: -1.36, z: -1.98, width: 1.66, height: 1.68, yaw: -0.06 }
|
||||
];
|
||||
}
|
||||
|
||||
return applyLayoutSpread(base, composition.spread, composition.depth);
|
||||
};
|
||||
|
||||
const createEqualLayoutRects = (
|
||||
count: number,
|
||||
formation: SceneParams["composition"]["formation"],
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
let base: LayoutRect[];
|
||||
|
||||
if (count <= 1) {
|
||||
base = [{ x: 0, y: 0.04, z: -1, width: 4.6, height: 4 }];
|
||||
} else if (count === 2) {
|
||||
if (formation === "arc") {
|
||||
base = [
|
||||
{ x: -1.9, y: 0.62, z: -1.08, width: 2.7, height: 3.1, yaw: 0.08 },
|
||||
{ x: 1.9, y: -0.38, z: -1.18, width: 2.7, height: 3.1, yaw: -0.08 }
|
||||
];
|
||||
} else if (formation === "cluster") {
|
||||
base = [
|
||||
{ x: -1.6, y: 0.72, z: -1.02, width: 2.75, height: 3.05, yaw: 0.06 },
|
||||
{ x: 1.42, y: -0.66, z: -1.18, width: 2.75, height: 3.05, yaw: -0.06 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: -1.86, y: 0, z: -1.02, width: 2.9, height: 3.3, yaw: 0.04 },
|
||||
{ x: 1.86, y: 0, z: -1.12, width: 2.9, height: 3.3, yaw: -0.04 }
|
||||
];
|
||||
}
|
||||
} else if (count === 3) {
|
||||
if (formation === "line") {
|
||||
base = [
|
||||
{ x: -2.16, y: 0.16, z: -1.02, width: 2.18, height: 2.72, yaw: 0.04 },
|
||||
{ x: 0, y: 0, z: -1.1, width: 2.48, height: 3.04 },
|
||||
{ x: 2.16, y: -0.18, z: -1.18, width: 2.18, height: 2.72, yaw: -0.04 }
|
||||
];
|
||||
} else if (formation === "arc" || formation === "cluster") {
|
||||
base = [
|
||||
{ x: 0, y: 1.08, z: -1.02, width: 2.46, height: 2.72 },
|
||||
{ x: -1.96, y: -1.02, z: -1.12, width: 2.18, height: 2.62, yaw: 0.06 },
|
||||
{ x: 1.96, y: -0.92, z: -1.2, width: 2.18, height: 2.62, yaw: -0.06 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: 0, y: 1.02, z: -1.02, width: 2.4, height: 2.68 },
|
||||
{ x: -1.88, y: -1.04, z: -1.14, width: 2.22, height: 2.62 },
|
||||
{ x: 1.88, y: -1.04, z: -1.22, width: 2.22, height: 2.62 }
|
||||
];
|
||||
}
|
||||
} else {
|
||||
if (formation === "cluster") {
|
||||
base = [
|
||||
{ x: -1.82, y: 1.06, z: -1.02, width: 2.08, height: 2.28 },
|
||||
{ x: 1.58, y: 1.22, z: -1.1, width: 2.08, height: 2.28 },
|
||||
{ x: -1.46, y: -1.14, z: -1.18, width: 2.08, height: 2.28 },
|
||||
{ x: 1.9, y: -0.98, z: -1.26, width: 2.08, height: 2.28 }
|
||||
];
|
||||
} else if (formation === "ribbon") {
|
||||
base = [
|
||||
{ x: -2.64, y: 0.96, z: -1.02, width: 1.92, height: 2.24, yaw: 0.05 },
|
||||
{ x: -0.88, y: -0.16, z: -1.1, width: 1.92, height: 2.24, yaw: 0.02 },
|
||||
{ x: 0.88, y: 0.26, z: -1.18, width: 1.92, height: 2.24, yaw: -0.02 },
|
||||
{ x: 2.64, y: -0.88, z: -1.26, width: 1.92, height: 2.24, yaw: -0.05 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: -1.84, y: 1.16, z: -1.02, width: 2.08, height: 2.26 },
|
||||
{ x: 1.84, y: 1.16, z: -1.1, width: 2.08, height: 2.26 },
|
||||
{ x: -1.84, y: -1.16, z: -1.18, width: 2.08, height: 2.26 },
|
||||
{ x: 1.84, y: -1.16, z: -1.26, width: 2.08, height: 2.26 }
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
return applyLayoutSpread(base, composition.spread, composition.depth);
|
||||
};
|
||||
|
||||
const createArrivalLayoutRects = (
|
||||
count: number,
|
||||
mode: string,
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
const base: LayoutRect[] =
|
||||
count <= 1
|
||||
? [{ x: mode === "relay_rail" ? 0.96 : 0.72, y: 0.02, z: -0.92, width: 4.2, height: 4.06, yaw: -0.04 }]
|
||||
: count === 2
|
||||
? [
|
||||
{ x: 1.18, y: 0.02, z: -0.92, width: 3.72, height: 3.84, yaw: -0.04 },
|
||||
{ x: -2.24, y: 0.74, z: -1.66, width: 1.88, height: 1.98, yaw: 0.08 }
|
||||
]
|
||||
: count === 3
|
||||
? [
|
||||
{ x: 1.18, y: 0.02, z: -0.92, width: 3.68, height: 3.82, yaw: -0.04 },
|
||||
{ x: -2.3, y: 1.18, z: -1.66, width: 1.82, height: 1.92, yaw: 0.08 },
|
||||
{ x: -2.3, y: -1.04, z: -1.76, width: 1.82, height: 1.92, yaw: 0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: 1.22, y: 0.04, z: -0.92, width: 3.54, height: 3.7, yaw: -0.04 },
|
||||
{ x: -2.42, y: 1.56, z: -1.66, width: 1.68, height: 1.74, yaw: 0.08 },
|
||||
{ x: -2.42, y: 0, z: -1.78, width: 1.68, height: 1.74, yaw: 0.08 },
|
||||
{ x: -2.42, y: -1.56, z: -1.9, width: 1.68, height: 1.74, yaw: 0.08 }
|
||||
];
|
||||
|
||||
return applyLayoutSpread(base, composition.spread * 0.8, composition.depth * 0.7);
|
||||
};
|
||||
|
||||
type FieldBundle = {
|
||||
group: THREE.Group;
|
||||
uniforms: Array<{
|
||||
uniforms: FieldUniforms[];
|
||||
};
|
||||
|
||||
type FieldUniforms = {
|
||||
uTime: { value: number };
|
||||
uType: { value: number };
|
||||
uIntensity: { value: number };
|
||||
uScale: { value: number };
|
||||
uSpeed: { value: number };
|
||||
}>;
|
||||
uAspect: { value: number };
|
||||
uPrimary: { value: THREE.Color };
|
||||
uSecondary: { value: THREE.Color };
|
||||
uAccent: { value: THREE.Color };
|
||||
uInk: { value: THREE.Color };
|
||||
};
|
||||
|
||||
const FIELD_VERTEX_SHADER = `
|
||||
@ -535,17 +753,26 @@ const buildBackdropSystem = (input: SceneActivationInput, palette: ScenicPalette
|
||||
const updateBackdropSystem = (
|
||||
bundle: FieldBundle,
|
||||
context: SceneFrameContext,
|
||||
palette: ScenicPalette,
|
||||
scenicTreatment: SceneParams["scenicTreatment"]
|
||||
) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
bundle.uniforms.forEach((uniforms, index) => {
|
||||
uniforms.uTime.value = time * (0.8 + index * 0.18);
|
||||
uniforms.uType.value = fieldTypeToValue(scenicTreatment.fieldType);
|
||||
uniforms.uIntensity.value = clamp(
|
||||
scenicTreatment.fieldIntensity * (index === 0 ? 1 : index === 1 ? 0.72 : 0.36),
|
||||
0,
|
||||
1
|
||||
);
|
||||
uniforms.uScale.value = scenicTreatment.fieldScale * (index === 0 ? 0.96 : index === 1 ? 1.24 : 1.44);
|
||||
uniforms.uSpeed.value = scenicTreatment.fieldSpeed * (index === 0 ? 0.34 : index === 1 ? 0.52 : 0.76);
|
||||
uniforms.uPrimary.value.set(palette.primary);
|
||||
uniforms.uSecondary.value.set(
|
||||
mixColor(palette.secondary, palette.primary, index === 0 ? 0.24 : index === 1 ? 0.48 : 0.68)
|
||||
);
|
||||
uniforms.uAccent.value.set(palette.accent);
|
||||
uniforms.uInk.value.set(palette.ink);
|
||||
});
|
||||
};
|
||||
|
||||
@ -948,31 +1175,6 @@ type BuildFamilyResult = {
|
||||
extraUpdate?: (context: SceneFrameContext) => void;
|
||||
};
|
||||
|
||||
const buildHeroPlanes = (
|
||||
assets: LoadedPhotoAsset[],
|
||||
photoTreatment: SceneParams["photoTreatment"],
|
||||
config: {
|
||||
heroHeight: number;
|
||||
supportHeight: number;
|
||||
}
|
||||
) => {
|
||||
const hero = createPhotoPlane(assets[0]!, photoTreatment, {
|
||||
height: config.heroHeight,
|
||||
opacity: 1,
|
||||
frameOpacity: 0.04,
|
||||
shadowOpacity: 0.12
|
||||
});
|
||||
const supports = assets.slice(1).map((asset) =>
|
||||
createPhotoPlane(asset, photoTreatment, {
|
||||
height: config.supportHeight,
|
||||
opacity: 0.94,
|
||||
frameOpacity: 0.025,
|
||||
shadowOpacity: 0.08
|
||||
})
|
||||
);
|
||||
return { hero, supports };
|
||||
};
|
||||
|
||||
const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
const { composition, photoTreatment } = input.params;
|
||||
const mode = input.modeKey ?? "near_witness";
|
||||
@ -983,49 +1185,33 @@ const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const { hero, supports } = buildHeroPlanes(assets, photoTreatment, {
|
||||
heroHeight: mode === "twin_witness" ? 3.7 : 4.6,
|
||||
supportHeight: 2
|
||||
});
|
||||
const layout = createHeroLayoutRects(
|
||||
assets.length,
|
||||
mode === "twin_witness" ? "arc" : mode === "sidecar_drift" ? "line" : "stack",
|
||||
composition
|
||||
);
|
||||
|
||||
hero.group.position.set(mode === "sidecar_drift" ? -1.1 : 0, 0.08, -0.7);
|
||||
hero.group.rotation.y = mode === "sidecar_drift" ? 0.08 : 0;
|
||||
root.add(hero.group);
|
||||
motionEntries.push({
|
||||
group: hero.group,
|
||||
basePosition: hero.group.position.clone(),
|
||||
baseRotation: hero.group.rotation.clone(),
|
||||
phase: seededUnit(assets[0]!.asset.id, 1) * Math.PI * 2,
|
||||
travelX: mode === "sidecar_drift" ? 0.22 : 0.16,
|
||||
travelY: 0.1,
|
||||
orbit: 0.12,
|
||||
pitch: 0.02,
|
||||
yaw: 0.04
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: index === 0 ? 0.04 : 0.025,
|
||||
shadowOpacity: index === 0 ? 0.12 : 0.08
|
||||
});
|
||||
|
||||
supports.forEach((plane, index) => {
|
||||
if (mode === "twin_witness" && index === 0) {
|
||||
plane.group.position.set(2.45, -0.12, -1.3);
|
||||
plane.group.scale.setScalar(1.55);
|
||||
plane.group.rotation.y = -0.08;
|
||||
} else if (mode === "sidecar_drift") {
|
||||
plane.group.position.set(3.15 - index * 0.6, 0.95 - index * 1.1, -2.4 - index * 0.5);
|
||||
plane.group.rotation.y = -0.14;
|
||||
} else {
|
||||
plane.group.position.set(-2.5 + index * 4.9, 1.1 - index * 1.6, -2.3 - index * 0.42);
|
||||
plane.group.rotation.y = seededSigned(plane.group.uuid, 3) * 0.12;
|
||||
if (mode === "sidecar_drift" && index === 0) {
|
||||
plane.group.rotation.y += 0.05;
|
||||
}
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(assets[index + 1]?.asset.id ?? plane.group.uuid, 2) * Math.PI * 2,
|
||||
travelX: 0.28,
|
||||
travelY: 0.16,
|
||||
orbit: 0.16,
|
||||
phase: seededUnit(asset.asset.id, 1 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.14 : 0.18,
|
||||
travelY: index === 0 ? 0.08 : 0.12,
|
||||
orbit: index === 0 ? 0.12 : 0.16,
|
||||
pitch: 0.02,
|
||||
yaw: 0.06
|
||||
yaw: index === 0 ? 0.04 : 0.06
|
||||
});
|
||||
});
|
||||
|
||||
@ -1040,7 +1226,7 @@ const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.18, composition.motion, composition.orbitAmount * 0.35, composition.stagger)
|
||||
);
|
||||
@ -1060,22 +1246,30 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const { hero, supports } = buildHeroPlanes(assets, photoTreatment, {
|
||||
heroHeight: mode === "monolith_aperture" ? 5.8 : 5,
|
||||
supportHeight: 1.95
|
||||
const layout = createHeroLayoutRects(assets.length, mode === "fold_gate" ? "arc" : "stack", composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const adjustedRect =
|
||||
mode === "monolith_aperture" && index === 0
|
||||
? { ...rect, width: rect.width * 0.92, height: rect.height * 1.14 }
|
||||
: rect;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, adjustedRect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: index === 0 ? 0.04 : 0.025,
|
||||
shadowOpacity: index === 0 ? 0.12 : 0.08
|
||||
});
|
||||
hero.group.position.set(0, 0, -0.95);
|
||||
root.add(hero.group);
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: hero.group,
|
||||
basePosition: hero.group.position.clone(),
|
||||
baseRotation: hero.group.rotation.clone(),
|
||||
phase: seededUnit(assets[0]!.asset.id, 3) * Math.PI * 2,
|
||||
travelX: 0.14,
|
||||
travelY: 0.08,
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 3 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.1 : 0.14,
|
||||
travelY: index === 0 ? 0.06 : 0.08,
|
||||
orbit: 0.08,
|
||||
pitch: 0.015,
|
||||
yaw: 0.03
|
||||
yaw: index === 0 ? 0.03 : 0.04
|
||||
});
|
||||
});
|
||||
|
||||
const leftFrame = createAccentRail(0.18, 8.6, palette.line, 0.1 + input.params.scenicTreatment.accentIntensity * 0.08, -4.5);
|
||||
@ -1097,23 +1291,6 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
topFrame.position.y = 3.8;
|
||||
}
|
||||
|
||||
supports.forEach((plane, index) => {
|
||||
plane.group.position.set(index === 0 ? -3.35 : 3.35, -1.45 + index * 0.6, -2.7 - index * 0.3);
|
||||
plane.group.rotation.y = index === 0 ? 0.18 : -0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(plane.group.uuid, 1) * Math.PI * 2,
|
||||
travelX: 0.18,
|
||||
travelY: 0.1,
|
||||
orbit: 0.08,
|
||||
pitch: 0.015,
|
||||
yaw: 0.04
|
||||
});
|
||||
});
|
||||
|
||||
input.camera.position.set(0, 0.08, 6.85);
|
||||
input.camera.lookAt(0, 0, -2.8);
|
||||
|
||||
@ -1121,7 +1298,7 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.12, composition.motion, composition.orbitAmount * 0.22, composition.stagger)
|
||||
);
|
||||
@ -1141,37 +1318,26 @@ const buildOrbitGallery = (input: SceneActivationInput): SceneInstance => {
|
||||
const backdrop = buildBackdropSystem(input, palette);
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const planes = assets.map((asset, index) =>
|
||||
createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 4.2 : 2.35,
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const layout = createHeroLayoutRects(assets.length, "arc", composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.03,
|
||||
shadowOpacity: 0.09
|
||||
})
|
||||
);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
planes.forEach((plane, index) => {
|
||||
const assetId = assets[index]?.asset.id ?? plane.group.uuid;
|
||||
const angle = THREE.MathUtils.lerp(-0.85, 0.85, planes.length === 1 ? 0.5 : index / Math.max(1, planes.length - 1));
|
||||
const radius = index === 0 ? 0.6 : 2.9 + index * 0.6;
|
||||
plane.group.position.set(
|
||||
index === 0 ? 0 : Math.cos(angle) * radius,
|
||||
index === 0 ? 0.08 : Math.sin(angle) * 1.4,
|
||||
-1.0 - index * 0.8
|
||||
);
|
||||
});
|
||||
if (mode === "mirror_sweep" && index > 0) {
|
||||
plane.group.position.x *= index % 2 === 0 ? 1 : -1;
|
||||
}
|
||||
plane.group.rotation.y = index === 0 ? 0 : seededSigned(assetId, 7) * 0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(assetId, 6) * Math.PI * 2,
|
||||
travelX: 0.16 + index * 0.08,
|
||||
travelY: 0.1 + index * 0.05,
|
||||
orbit: 0.28 + index * 0.12,
|
||||
phase: seededUnit(asset.asset.id, 6 + index) * Math.PI * 2,
|
||||
travelX: 0.14 + index * 0.06,
|
||||
travelY: 0.08 + index * 0.04,
|
||||
orbit: 0.24 + index * 0.1,
|
||||
pitch: 0.02,
|
||||
yaw: 0.06 + index * 0.02
|
||||
});
|
||||
@ -1193,7 +1359,7 @@ const buildOrbitGallery = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) => {
|
||||
const orbitGain = composition.orbitAmount * (mode === "lantern_orbit" ? 0.75 : 0.52);
|
||||
applyMotionEntry(entry, time + index * 0.24, composition.motion, orbitGain, composition.stagger);
|
||||
@ -1214,29 +1380,34 @@ const buildSuspensionField = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createHeroLayoutRects(
|
||||
assets.length,
|
||||
mode === "diagonal_relay" ? "line" : mode === "depth_table" ? "cluster" : "stack",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 3.25 : 2.45,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const adjustedRect =
|
||||
mode === "depth_table"
|
||||
? {
|
||||
...rect,
|
||||
y: rect.y + seededSigned(asset.asset.id, 10) * 0.28,
|
||||
z: rect.z - index * 0.18
|
||||
}
|
||||
: rect;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, adjustedRect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: 0.025,
|
||||
shadowOpacity: 0.07
|
||||
});
|
||||
if (mode === "diagonal_relay") {
|
||||
plane.group.position.set(-3.4 + index * 2.2, 1.8 - index * 1.12, -1.1 - index * 0.7);
|
||||
} else if (mode === "depth_table") {
|
||||
plane.group.position.set(-2.8 + index * 1.8, seededSigned(asset.asset.id, 10) * 0.9, -1.2 - index * 1.0);
|
||||
} else {
|
||||
plane.group.position.set(-3.2 + index * 2.1, 0.7 - index * 0.2, -1.0 - index * 0.55);
|
||||
}
|
||||
plane.group.rotation.y = seededSigned(asset.asset.id, 4) * 0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 9) * Math.PI * 2,
|
||||
travelX: 0.22 + composition.spread * 0.18,
|
||||
travelY: 0.12 + composition.stagger * 0.12,
|
||||
travelX: 0.18 + composition.spread * 0.14,
|
||||
travelY: 0.1 + composition.stagger * 0.1,
|
||||
orbit: 0.18,
|
||||
pitch: 0.016,
|
||||
yaw: 0.05
|
||||
@ -1255,7 +1426,7 @@ const buildSuspensionField = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.16, composition.motion, composition.orbitAmount * 0.2, composition.stagger)
|
||||
);
|
||||
@ -1275,28 +1446,25 @@ const buildChorusArray = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createEqualLayoutRects(
|
||||
assets.length,
|
||||
mode === "ribbon_quartet" ? "ribbon" : mode === "offset_choir" ? "cluster" : "grid",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: 2.6,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.02,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (mode === "ribbon_quartet") {
|
||||
plane.group.position.set(-3.8 + index * 2.55, Math.sin(index * 0.9) * 1.0, -1.1 - index * 0.45);
|
||||
} else if (mode === "offset_choir") {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.5 : 2.5, 1.55 - Math.floor(index / 2) * 2.7, -1.1 - index * 0.35);
|
||||
} else {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.2 : 2.2, 1.45 - Math.floor(index / 2) * 2.9, -1.1 - index * 0.3);
|
||||
}
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 13) * Math.PI * 2,
|
||||
travelX: 0.16 + composition.spread * 0.16,
|
||||
travelY: 0.12 + composition.stagger * 0.1,
|
||||
travelX: 0.14 + composition.spread * 0.14,
|
||||
travelY: 0.1 + composition.stagger * 0.08,
|
||||
orbit: 0.14,
|
||||
pitch: 0.01,
|
||||
yaw: 0.04
|
||||
@ -1318,7 +1486,7 @@ const buildChorusArray = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.2, composition.motion, composition.orbitAmount * 0.16, composition.stagger)
|
||||
);
|
||||
@ -1339,30 +1507,25 @@ const buildEqualCollage = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createEqualLayoutRects(
|
||||
assets.length,
|
||||
mode === "floating_blocks" ? "cluster" : mode === "arc_cluster" ? "arc" : "grid",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: 2.85,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.022,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (mode === "floating_blocks") {
|
||||
plane.group.position.set(-3.4 + index * 2.1, seededSigned(asset.asset.id, 2) * 1.4, -1.1 - index * 0.5);
|
||||
} else if (mode === "arc_cluster") {
|
||||
const angle = THREE.MathUtils.lerp(-0.8, 0.8, assets.length === 1 ? 0.5 : index / Math.max(1, assets.length - 1));
|
||||
plane.group.position.set(Math.cos(angle) * 3.0, Math.sin(angle) * 1.5, -1.1 - index * 0.4);
|
||||
} else {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.7 : 2.7, 1.75 - Math.floor(index / 2) * 3.1, -1.1 - index * 0.25);
|
||||
}
|
||||
plane.group.rotation.y = seededSigned(asset.asset.id, 5) * 0.12;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 15) * Math.PI * 2,
|
||||
travelX: 0.18 + composition.spread * 0.18,
|
||||
travelY: 0.14,
|
||||
travelX: 0.16 + composition.spread * 0.16,
|
||||
travelY: 0.12,
|
||||
orbit: 0.16 + composition.orbitAmount * 0.14,
|
||||
pitch: 0.01,
|
||||
yaw: 0.04
|
||||
@ -1383,7 +1546,7 @@ const buildEqualCollage = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.22, composition.motion, composition.orbitAmount * 0.24, composition.stagger)
|
||||
);
|
||||
@ -1403,28 +1566,23 @@ const buildArrivalRelay = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createArrivalLayoutRects(assets.length, mode, composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 3.65 : 1.9,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
opacity: index === 0 ? 1 : 0.92,
|
||||
frameOpacity: 0.02,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (index === 0) {
|
||||
plane.group.position.set(mode === "relay_rail" ? 0.95 : 1.2, 0, -0.9);
|
||||
} else {
|
||||
plane.group.position.set(-4.4, 1.8 - index * 1.18, -1.6 - index * 0.34);
|
||||
}
|
||||
plane.group.rotation.y = index === 0 ? -0.08 : 0.16;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 18) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.08 : 0.18 + index * 0.06,
|
||||
travelY: 0.05,
|
||||
orbit: 0.08,
|
||||
phase: seededUnit(asset.asset.id, 18 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.06 : 0.12 + index * 0.04,
|
||||
travelY: 0.04,
|
||||
orbit: 0.06,
|
||||
pitch: 0.01,
|
||||
yaw: 0.03
|
||||
});
|
||||
@ -1444,18 +1602,10 @@ const buildArrivalRelay = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) => {
|
||||
if (index > 0) {
|
||||
entry.group.position.x =
|
||||
entry.basePosition.x + Math.sin(time * (0.12 + composition.motion * 0.08) + index * 0.8) * entry.travelX;
|
||||
entry.group.position.y =
|
||||
entry.basePosition.y + Math.cos(time * 0.14 + index * 0.6) * Math.max(0.03, entry.travelY);
|
||||
entry.group.position.z = entry.basePosition.z + Math.sin(time * 0.08 + index * 0.4) * 0.06;
|
||||
return;
|
||||
}
|
||||
applyMotionEntry(entry, time, composition.motion, composition.orbitAmount * 0.1, composition.stagger);
|
||||
});
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.12, composition.motion * 0.82, composition.orbitAmount * 0.08, composition.stagger)
|
||||
);
|
||||
rail.position.y = Math.sin(time * 0.12) * 0.08;
|
||||
lower.position.x = Math.sin(time * 0.08) * 0.12;
|
||||
configureCamera(input.camera, { x: 0.18, y: 0, z: 7.35 }, new THREE.Vector3(0.2, 0, -3.1), composition.cameraTravel, context.elapsedMs);
|
||||
@ -1470,13 +1620,17 @@ const buildSafeHold = (input: SceneActivationInput): SceneInstance => {
|
||||
root.add(backdrop.group);
|
||||
let plane: PlaneBundle | null = null;
|
||||
if (assets[0]) {
|
||||
plane = createPhotoPlane(assets[0], input.params.photoTreatment, {
|
||||
height: 4.1,
|
||||
plane = createFittedPhotoPlane(assets[0], input.params.photoTreatment, {
|
||||
x: 0,
|
||||
y: -0.06,
|
||||
z: -1.6,
|
||||
width: 4.4,
|
||||
height: 3.9
|
||||
}, {
|
||||
opacity: 0.58,
|
||||
frameOpacity: 0.015,
|
||||
shadowOpacity: 0.04
|
||||
});
|
||||
plane.group.position.set(0, -0.06, -1.6);
|
||||
root.add(plane.group);
|
||||
}
|
||||
|
||||
@ -1487,7 +1641,7 @@ const buildSafeHold = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
if (plane) {
|
||||
plane.group.position.y = -0.06 + Math.cos(time * 0.2) * 0.05;
|
||||
}
|
||||
@ -1646,29 +1800,49 @@ const updateSceneRuntime = (runtime: SceneRuntime, context: SceneFrameContext) =
|
||||
const resolvePresentationParams = (presentation: SurfacePresentation) =>
|
||||
mergeSceneParams(presentation.definition.defaultParams, presentation.cue?.parameterOverrides, presentation.params);
|
||||
|
||||
const canSmoothMotionUpdate = (runtime: SceneRuntime, presentation: SurfacePresentation) => {
|
||||
if (runtime.presentation.definition.id !== presentation.definition.id) {
|
||||
return false;
|
||||
}
|
||||
if ((runtime.presentation.modeKey ?? "") !== (presentation.modeKey ?? "")) {
|
||||
return false;
|
||||
}
|
||||
if ((runtime.presentation.effectPresetId ?? "") !== (presentation.effectPresetId ?? "")) {
|
||||
return false;
|
||||
}
|
||||
if (runtime.presentation.assets.length !== presentation.assets.length) {
|
||||
return false;
|
||||
}
|
||||
if (runtime.presentation.assets.some((asset, index) => asset.id !== presentation.assets[index]?.id)) {
|
||||
return false;
|
||||
const liveMutableParamPaths = new Set([
|
||||
"composition.motion",
|
||||
"composition.cameraTravel",
|
||||
"composition.orbitAmount",
|
||||
"scenicTreatment.fieldType",
|
||||
"scenicTreatment.fieldIntensity",
|
||||
"scenicTreatment.fieldScale",
|
||||
"scenicTreatment.fieldSpeed",
|
||||
"scenicTreatment.hue",
|
||||
"scenicTreatment.saturation",
|
||||
"scenicTreatment.lightness"
|
||||
]);
|
||||
|
||||
const createPresentationStructureSignature = (presentation: SurfacePresentation) => {
|
||||
const params = flattenSceneParams(resolvePresentationParams(presentation));
|
||||
for (const path of liveMutableParamPaths) {
|
||||
delete params[path];
|
||||
}
|
||||
|
||||
const currentParams = flattenSceneParams(resolvePresentationParams(runtime.presentation));
|
||||
const nextParams = flattenSceneParams(resolvePresentationParams(presentation));
|
||||
delete currentParams["composition.motion"];
|
||||
delete nextParams["composition.motion"];
|
||||
return JSON.stringify({
|
||||
definitionId: presentation.definition.id,
|
||||
effectPresetId: presentation.effectPresetId ?? null,
|
||||
modeKey: presentation.modeKey ?? null,
|
||||
assetIds: presentation.assets.map((asset) => asset.id),
|
||||
textFragments: presentation.textFragments ?? [],
|
||||
anchorCaption: presentation.anchorCaption ?? null,
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
return JSON.stringify(currentParams) === JSON.stringify(nextParams);
|
||||
const canPatchRuntimeInPlace = (runtime: SceneRuntime, presentation: SurfacePresentation) =>
|
||||
createPresentationStructureSignature(runtime.presentation) === createPresentationStructureSignature(presentation);
|
||||
|
||||
const applyPresentationToRuntime = (runtime: SceneRuntime, presentation: SurfacePresentation) => {
|
||||
const mergedParams = resolvePresentationParams(presentation);
|
||||
const currentMotion = runtime.params.composition.motion;
|
||||
Object.assign(runtime.params.photoTreatment, mergedParams.photoTreatment);
|
||||
Object.assign(runtime.params.scenicTreatment, mergedParams.scenicTreatment);
|
||||
Object.assign(runtime.params.composition, mergedParams.composition);
|
||||
Object.assign(runtime.params.textTreatment, mergedParams.textTreatment);
|
||||
runtime.params.composition.motion = currentMotion;
|
||||
runtime.presentation = presentation;
|
||||
runtime.targetMotion = mergedParams.composition.motion;
|
||||
};
|
||||
|
||||
const disposeSceneRuntime = (runtime: SceneRuntime | null) => {
|
||||
@ -1751,6 +1925,9 @@ export class RenderSurface {
|
||||
private lastFrameMs = 0;
|
||||
private blackout = false;
|
||||
private activationToken = 0;
|
||||
private activePresentationKey: string | undefined;
|
||||
private qualityProfile: SurfaceQualityProfile = "program";
|
||||
private busy = false;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
@ -1760,7 +1937,6 @@ export class RenderSurface {
|
||||
});
|
||||
this.renderer.toneMapping = THREE.NoToneMapping;
|
||||
this.renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
this.renderer.setPixelRatio(typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2));
|
||||
this.renderer.setClearColor("#040508", 1);
|
||||
this.fromTarget.texture.colorSpace = THREE.NoColorSpace;
|
||||
this.toTarget.texture.colorSpace = THREE.NoColorSpace;
|
||||
@ -1781,7 +1957,14 @@ export class RenderSurface {
|
||||
this.compositeScene.add(bar);
|
||||
});
|
||||
|
||||
this.applyQualitySettings();
|
||||
|
||||
this.renderer.setAnimationLoop((timestamp) => {
|
||||
const minFrameIntervalMs = this.getMinFrameIntervalMs();
|
||||
if (minFrameIntervalMs > 0 && this.lastFrameMs !== 0 && timestamp - this.lastFrameMs < minFrameIntervalMs) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaMs = this.lastFrameMs === 0 ? 16.6 : timestamp - this.lastFrameMs;
|
||||
this.lastFrameMs = timestamp;
|
||||
|
||||
@ -1832,6 +2015,24 @@ export class RenderSurface {
|
||||
plugins.forEach((plugin) => this.register(plugin));
|
||||
}
|
||||
|
||||
setQualityProfile(profile: SurfaceQualityProfile) {
|
||||
if (this.qualityProfile === profile) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.qualityProfile = profile;
|
||||
this.applyQualitySettings();
|
||||
}
|
||||
|
||||
setBusy(busy: boolean) {
|
||||
if (this.busy === busy) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.busy = busy;
|
||||
this.applyQualitySettings();
|
||||
}
|
||||
|
||||
setSize(width: number, height: number) {
|
||||
this.viewport = {
|
||||
width,
|
||||
@ -1864,9 +2065,25 @@ export class RenderSurface {
|
||||
this.blackout = blackout;
|
||||
}
|
||||
|
||||
async activate(presentation: SurfacePresentation | null, transition?: CueTransition | null) {
|
||||
updatePresentation(presentation: SurfacePresentation | null, activationKey?: string) {
|
||||
if (!presentation || activationKey !== this.activePresentationKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.transitionRuntime?.to && canPatchRuntimeInPlace(this.transitionRuntime.to, presentation)) {
|
||||
applyPresentationToRuntime(this.transitionRuntime.to, presentation);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentRuntime && canPatchRuntimeInPlace(this.currentRuntime, presentation)) {
|
||||
applyPresentationToRuntime(this.currentRuntime, presentation);
|
||||
}
|
||||
}
|
||||
|
||||
async activate(presentation: SurfacePresentation | null, transition?: CueTransition | null, activationKey?: string) {
|
||||
const token = this.activationToken + 1;
|
||||
this.activationToken = token;
|
||||
this.activePresentationKey = activationKey;
|
||||
|
||||
if (!presentation) {
|
||||
this.clearAll();
|
||||
@ -1876,10 +2093,9 @@ export class RenderSurface {
|
||||
if (
|
||||
this.currentRuntime &&
|
||||
(!transition || transition.style === "cut" || transition.durationMs <= 0) &&
|
||||
canSmoothMotionUpdate(this.currentRuntime, presentation)
|
||||
canPatchRuntimeInPlace(this.currentRuntime, presentation)
|
||||
) {
|
||||
this.currentRuntime.presentation = presentation;
|
||||
this.currentRuntime.targetMotion = resolvePresentationParams(presentation).composition.motion;
|
||||
applyPresentationToRuntime(this.currentRuntime, presentation);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2087,5 +2303,24 @@ export class RenderSurface {
|
||||
disposeSceneRuntime(this.transitionRuntime.to);
|
||||
this.transitionRuntime = null;
|
||||
}
|
||||
this.activePresentationKey = undefined;
|
||||
}
|
||||
|
||||
private getMinFrameIntervalMs() {
|
||||
if (this.qualityProfile === "program") {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.busy ? 1000 / 24 : 1000 / 30;
|
||||
}
|
||||
|
||||
private applyQualitySettings() {
|
||||
const devicePixelRatio = typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio || 1);
|
||||
const scale = this.qualityProfile === "program" ? 1 : this.busy ? 0.72 : 0.85;
|
||||
const cap = this.qualityProfile === "program" ? 2 : 1.25;
|
||||
const pixelRatio = Math.min(devicePixelRatio * scale, cap);
|
||||
this.renderer.setPixelRatio(pixelRatio);
|
||||
this.lastFrameMs = 0;
|
||||
this.setSize(this.viewport.width, this.viewport.height);
|
||||
}
|
||||
}
|
||||
|
||||
@ -278,6 +278,32 @@ export const buildServer = async () => {
|
||||
service: "api"
|
||||
}));
|
||||
|
||||
app.get("/api/admin/bootstrap", async () => store.read());
|
||||
app.get("/api/admin/live", async () => {
|
||||
const state = await store.read();
|
||||
const pendingCount = state.photoAssets.filter((asset) => {
|
||||
if (asset.moderationStatus !== "pending") {
|
||||
return false;
|
||||
}
|
||||
const submission = state.submissions.find((entry) => entry.id === asset.submissionId);
|
||||
return submission?.source !== "admin_upload";
|
||||
}).length;
|
||||
|
||||
return {
|
||||
cues: state.cues,
|
||||
pendingCount,
|
||||
approvedCount: state.photoAssets.filter((asset) => asset.moderationStatus === "approved").length
|
||||
};
|
||||
});
|
||||
app.get("/api/admin/library", async () => {
|
||||
const state = await store.read();
|
||||
return {
|
||||
photoAssets: state.photoAssets,
|
||||
submissions: state.submissions,
|
||||
collections: state.collections
|
||||
};
|
||||
});
|
||||
|
||||
app.get("/api/state", async () => store.read());
|
||||
app.get("/api/scenes", async () => (await store.read()).scenes);
|
||||
app.get("/api/cues", async () => (await store.read()).cues);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user