feat: embed subtitle defaults in upload card
This commit is contained in:
Song367
parent
bb19dafc19
commit
0b50b0b432
@ -73,7 +73,15 @@ describe('UploadScreen', () => {
|
||||
expect(screen.getByTestId('upload-dropzone-card')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('mode-card')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('language-card')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('subtitle-defaults-card')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders subtitle defaults inside the upload card footer area', () => {
|
||||
renderUploadScreen();
|
||||
|
||||
expect(screen.getByTestId('upload-dropzone-card')).toContainElement(
|
||||
screen.getByTestId('upload-subtitle-defaults-panel'),
|
||||
);
|
||||
expect(screen.queryByTestId('subtitle-defaults-card')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows all supported tts languages in a compact always-visible grid', () => {
|
||||
@ -100,6 +108,14 @@ describe('UploadScreen', () => {
|
||||
expect(screen.getByRole('button', { name: 'Generate Translated Video' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps subtitle preview controls active after moving them into the upload card', () => {
|
||||
renderUploadScreen();
|
||||
|
||||
expect(screen.getByTestId('upload-subtitle-defaults-panel')).toContainElement(
|
||||
screen.getByTestId('upload-subtitle-preview'),
|
||||
);
|
||||
});
|
||||
|
||||
it('shows a fixed English subtitle language and the supported TTS languages', () => {
|
||||
renderUploadScreen();
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ export default function UploadScreen({
|
||||
>
|
||||
<section
|
||||
data-testid="upload-dropzone-card"
|
||||
className="app-surface min-w-0 rounded-[28px] border border-white/70 px-4 py-4 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.35)] sm:px-5 sm:py-5 lg:px-6 lg:py-5 xl:row-span-2"
|
||||
className="app-surface min-w-0 rounded-[28px] border border-white/70 px-4 py-4 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.35)] sm:px-5 sm:py-5 lg:px-6 lg:py-5"
|
||||
>
|
||||
<div className="mb-4 flex flex-col gap-3">
|
||||
<div className="min-w-0 space-y-2">
|
||||
@ -105,10 +105,104 @@ export default function UploadScreen({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-2 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
|
||||
<p>{m.upload.supportedFormats}</p>
|
||||
<div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 px-3 py-1.5 font-medium text-slate-700">
|
||||
{activeModeLabel}
|
||||
<div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px] xl:items-end">
|
||||
<section
|
||||
data-testid="upload-subtitle-defaults-panel"
|
||||
className="rounded-[22px] border border-slate-200 bg-white/82 p-3 shadow-sm shadow-slate-200/70"
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-950">{m.upload.subtitleDefaults}</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-600">{m.upload.subtitleDefaultsDesc}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs font-medium text-sky-700 transition-colors hover:text-sky-800"
|
||||
onClick={() => setSubtitleDefaults(DEFAULT_SUBTITLE_DEFAULTS)}
|
||||
>
|
||||
{m.upload.reset}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 rounded-[18px] border border-slate-200 bg-slate-950/95 p-2.5">
|
||||
<div className="relative h-24 overflow-hidden rounded-[14px] bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.35),_transparent_40%),linear-gradient(180deg,_#1e293b_0%,_#0f172a_100%)]">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]" />
|
||||
<p
|
||||
data-testid="upload-subtitle-preview"
|
||||
className="absolute left-1/2 max-w-[88%] -translate-x-1/2 whitespace-pre-wrap px-3 py-1 text-center font-semibold text-white"
|
||||
style={{
|
||||
bottom: `${subtitleDefaults.bottomOffsetPercent}%`,
|
||||
fontSize: `${subtitleDefaults.fontSize}px`,
|
||||
textShadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000',
|
||||
}}
|
||||
>
|
||||
{m.upload.subtitlePreview}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<label htmlFor="subtitle-position" className="text-sm font-medium text-slate-700">
|
||||
{m.upload.subtitleInitialPosition}
|
||||
</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{format(m.upload.fromBottom, { value: subtitleDefaults.bottomOffsetPercent })}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="subtitle-position"
|
||||
aria-label="Subtitle initial position"
|
||||
type="range"
|
||||
min="4"
|
||||
max="30"
|
||||
step="1"
|
||||
value={subtitleDefaults.bottomOffsetPercent}
|
||||
onChange={(e) =>
|
||||
setSubtitleDefaults((previous) => ({
|
||||
...previous,
|
||||
bottomOffsetPercent: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full accent-sky-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<label htmlFor="subtitle-size" className="text-sm font-medium text-slate-700">
|
||||
{m.upload.subtitleInitialSize}
|
||||
</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{format(m.upload.pxValue, { value: subtitleDefaults.fontSize })}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="subtitle-size"
|
||||
aria-label="Subtitle initial size"
|
||||
type="range"
|
||||
min="16"
|
||||
max="40"
|
||||
step="1"
|
||||
value={subtitleDefaults.fontSize}
|
||||
onChange={(e) =>
|
||||
setSubtitleDefaults((previous) => ({
|
||||
...previous,
|
||||
fontSize: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full accent-sky-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-col gap-2 text-sm text-slate-500 xl:items-end xl:text-right">
|
||||
<p>{m.upload.supportedFormats}</p>
|
||||
<div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 px-3 py-1.5 font-medium text-slate-700">
|
||||
{activeModeLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -230,97 +324,6 @@ export default function UploadScreen({
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-testid="subtitle-defaults-card"
|
||||
className={`${settingsCardClass} xl:col-start-2 xl:col-span-2 xl:row-start-2`}
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-slate-950">{m.upload.subtitleDefaults}</h2>
|
||||
<p className="mt-1 text-sm leading-5 text-slate-600">{m.upload.subtitleDefaultsDesc}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-medium text-sky-700 transition-colors hover:text-sky-800"
|
||||
onClick={() => setSubtitleDefaults(DEFAULT_SUBTITLE_DEFAULTS)}
|
||||
>
|
||||
{m.upload.reset}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 rounded-[22px] border border-slate-200 bg-slate-950/95 p-2.5">
|
||||
<div className="relative h-28 overflow-hidden rounded-[16px] bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.35),_transparent_40%),linear-gradient(180deg,_#1e293b_0%,_#0f172a_100%)] sm:h-30">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]" />
|
||||
<p
|
||||
data-testid="upload-subtitle-preview"
|
||||
className="absolute left-1/2 max-w-[88%] -translate-x-1/2 whitespace-pre-wrap px-3 py-1 text-center font-semibold text-white"
|
||||
style={{
|
||||
bottom: `${subtitleDefaults.bottomOffsetPercent}%`,
|
||||
fontSize: `${subtitleDefaults.fontSize}px`,
|
||||
textShadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000',
|
||||
}}
|
||||
>
|
||||
{m.upload.subtitlePreview}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<label htmlFor="subtitle-position" className="text-sm font-medium text-slate-700">
|
||||
{m.upload.subtitleInitialPosition}
|
||||
</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{format(m.upload.fromBottom, { value: subtitleDefaults.bottomOffsetPercent })}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="subtitle-position"
|
||||
aria-label="Subtitle initial position"
|
||||
type="range"
|
||||
min="4"
|
||||
max="30"
|
||||
step="1"
|
||||
value={subtitleDefaults.bottomOffsetPercent}
|
||||
onChange={(e) =>
|
||||
setSubtitleDefaults((previous) => ({
|
||||
...previous,
|
||||
bottomOffsetPercent: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full accent-sky-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<label htmlFor="subtitle-size" className="text-sm font-medium text-slate-700">
|
||||
{m.upload.subtitleInitialSize}
|
||||
</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{format(m.upload.pxValue, { value: subtitleDefaults.fontSize })}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="subtitle-size"
|
||||
aria-label="Subtitle initial size"
|
||||
type="range"
|
||||
min="16"
|
||||
max="40"
|
||||
step="1"
|
||||
value={subtitleDefaults.fontSize}
|
||||
onChange={(e) =>
|
||||
setSubtitleDefaults((previous) => ({
|
||||
...previous,
|
||||
fontSize: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full accent-sky-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{showTrimModal && tempFile && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user