Moeeldouma commited on
Commit
c19da7f
·
verified ·
1 Parent(s): c6701e0

Sync export fidelity fixes + more AI providers

Browse files
Files changed (1) hide show
  1. src/components/VideoInspector.tsx +28 -0
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 &amp; 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 &amp; resize it right in the preview.</p>
148
  ) : (