songjvcheng/video_translate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: swap upload card panel order

Browse Source
This commit is contained in:
Song367 2026-03-21 14:46:55 +08:00
parent 4d664abb26
commit eac9f65925
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/UploadScreen.test.tsx
View File

@ -84,6 +84,20 @@ describe('UploadScreen', () => {
expect(screen.queryByTestId('subtitle-defaults-card')).not.toBeInTheDocument();
});
it('renders subtitle defaults before the upload surface inside the upload card', () => {
renderUploadScreen();
const uploadCard = screen.getByTestId('upload-dropzone-card');
const subtitlePanel = screen.getByTestId('upload-subtitle-defaults-panel');
const uploadSurface = screen.getByTestId('upload-dropzone-surface');
expect(uploadCard).toContainElement(subtitlePanel);
expect(uploadCard).toContainElement(uploadSurface);
expect(
subtitlePanel.compareDocumentPosition(uploadSurface) & Node.DOCUMENT_POSITION_FOLLOWING,
).toBeTruthy();
});
it('shows all supported tts languages in a compact always-visible grid', () => {
renderUploadScreen();

59
src/components/UploadScreen.tsx
View File

@ -77,34 +77,6 @@ export default function UploadScreen({
</div>
</div>
<div className="relative overflow-hidden rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.88)_100%)] p-2.5 sm:p-3">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_38%)]" />
<div className="relative flex min-h-[250px] flex-col items-center justify-center rounded-[20px] border-2 border-dashed border-slate-300 bg-white/70 px-5 py-8 text-center sm:min-h-[280px] lg:min-h-[320px]">
<input
ref={fileInputRef}
type="file"
aria-label="Upload video file"
className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
accept="video/mp4,video/quicktime,video/webm"
onChange={handleFileChange}
/>
<div className="pointer-events-none relative z-0 flex max-w-xl flex-col items-center">
<div className="mb-4 rounded-full bg-slate-900 p-4 text-white shadow-lg shadow-slate-300/70">
<Upload className="h-8 w-8 sm:h-10 sm:w-10" />
</div>
<h3 className="text-lg font-semibold text-slate-900 sm:text-xl">{m.upload.uploadVideo}</h3>
<p className="mt-2 max-w-md text-sm leading-5 text-slate-600">
{m.upload.clickToUpload}
</p>
<button className="mt-5 flex w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-[#16a34a] px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-200 transition-colors pointer-events-none">
<Upload className="h-5 w-5" />
{m.upload.uploadVideo}
</button>
</div>
</div>
</div>
<div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px] xl:items-end">
<section
data-testid="upload-subtitle-defaults-panel"
@ -205,6 +177,37 @@ export default function UploadScreen({
</div>
</div>
</div>
<div
data-testid="upload-dropzone-surface"
className="relative mt-4 overflow-hidden rounded-[24px] border border-slate-200/80 bg-[linear-gradient(180deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.88)_100%)] p-2.5 sm:p-3"
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_38%)]" />
<div className="relative flex min-h-[230px] flex-col items-center justify-center rounded-[20px] border-2 border-dashed border-slate-300 bg-white/70 px-5 py-8 text-center sm:min-h-[250px] lg:min-h-[280px]">
<input
ref={fileInputRef}
type="file"
aria-label="Upload video file"
className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
accept="video/mp4,video/quicktime,video/webm"
onChange={handleFileChange}
/>
<div className="pointer-events-none relative z-0 flex max-w-xl flex-col items-center">
<div className="mb-4 rounded-full bg-slate-900 p-4 text-white shadow-lg shadow-slate-300/70">
<Upload className="h-8 w-8 sm:h-10 sm:w-10" />
</div>
<h3 className="text-lg font-semibold text-slate-900 sm:text-xl">{m.upload.uploadVideo}</h3>
<p className="mt-2 max-w-md text-sm leading-5 text-slate-600">
{m.upload.clickToUpload}
</p>
<button className="mt-5 flex w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-[#16a34a] px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-200 transition-colors pointer-events-none">
<Upload className="h-5 w-5" />
{m.upload.uploadVideo}
</button>
</div>
</div>
</div>
</section>
<div