Spaces:
Sleeping
Sleeping
Sync export fidelity fixes + more AI providers
Browse files
src/components/VideoInspector.tsx
CHANGED
|
@@ -115,6 +115,34 @@ export function VideoInspector({ id }: { id: string }) {
|
|
| 115 |
);
|
| 116 |
})()}
|
| 117 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 118 |
{!L ? (
|
| 119 |
<p className="px-0.5 text-[12px] leading-relaxed text-fg-subtle">Make it a <b className="text-fg-muted">floating overlay</b> to place a resizable webcam-style window on top of your motion graphics — then drag & resize it right in the preview.</p>
|
| 120 |
) : (
|
|
|
|
| 115 |
);
|
| 116 |
})()}
|
| 117 |
|
| 118 |
+
{/* auto-zoom intensity — for screen recordings with a baked explainer camera. Lets the user dial
|
| 119 |
+
back (or turn off) an over-zoomed camera so the recording isn't cropped. Full-frame clips only. */}
|
| 120 |
+
{!L && !!v.screencast?.cam?.length && (() => {
|
| 121 |
+
const cur = v.screencast?.camScale ?? 0;
|
| 122 |
+
const levels: { k: string; v: number; label: string }[] = [
|
| 123 |
+
{ k: "off", v: 0, label: "Off" },
|
| 124 |
+
{ k: "subtle", v: 0.4, label: "Subtle" },
|
| 125 |
+
{ k: "medium", v: 0.7, label: "Medium" },
|
| 126 |
+
{ k: "full", v: 1, label: "Full" },
|
| 127 |
+
];
|
| 128 |
+
const active = levels.reduce((best, l) => Math.abs(l.v - cur) < Math.abs(best.v - cur) ? l : best, levels[3]);
|
| 129 |
+
const setScale = (val: number) => { arm(); set({ screencast: { ...v.screencast, camScale: val } }); };
|
| 130 |
+
return (
|
| 131 |
+
<div>
|
| 132 |
+
<div className="eyebrow mb-1.5">Auto-zoom</div>
|
| 133 |
+
<p className="mb-1.5 px-0.5 text-[11px] leading-snug text-fg-subtle">How hard the explainer camera punches into clicks. Lower it (or turn it <b className="text-fg-muted">Off</b>) if the recording feels too zoomed / cropped in the export.</p>
|
| 134 |
+
<div className="flex gap-1 rounded-lg border border-border p-0.5">
|
| 135 |
+
{levels.map((l) => (
|
| 136 |
+
<button key={l.k} onClick={() => setScale(l.v)}
|
| 137 |
+
className={"flex-1 rounded-md py-1 text-[11.5px] font-medium transition " + (active.k === l.k ? "bg-primary text-white" : "text-fg-muted hover:text-fg")}>
|
| 138 |
+
{l.label}
|
| 139 |
+
</button>
|
| 140 |
+
))}
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
);
|
| 144 |
+
})()}
|
| 145 |
+
|
| 146 |
{!L ? (
|
| 147 |
<p className="px-0.5 text-[12px] leading-relaxed text-fg-subtle">Make it a <b className="text-fg-muted">floating overlay</b> to place a resizable webcam-style window on top of your motion graphics — then drag & resize it right in the preview.</p>
|
| 148 |
) : (
|