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

fix: scale subtitle preview text

Browse Source
This commit is contained in:
Song367 2026-03-21 14:52:27 +08:00
parent 3324012338
commit 369d6f6886
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,7 @@ describe('UploadScreen', () => {
cleanup();
});
it('starts from the editor default subtitle size and position and updates the preview', () => {
it('scales the subtitle preview while preserving the real subtitle size value', () => {
renderUploadScreen();
const sizeSlider = screen.getByLabelText(/subtitle initial size/i);
@ -48,12 +48,12 @@ describe('UploadScreen', () => {
expect(sizeSlider).toHaveValue('24');
expect(positionSlider).toHaveValue('10');
expect(preview).toHaveStyle({ fontSize: '24px', bottom: '10%' });
expect(preview).toHaveStyle({ fontSize: '12px', bottom: '10%' });
fireEvent.change(sizeSlider, { target: { value: '32' } });
fireEvent.change(positionSlider, { target: { value: '18' } });
expect(preview).toHaveStyle({ fontSize: '32px', bottom: '18%' });
expect(preview).toHaveStyle({ fontSize: '16px', bottom: '18%' });
});
it('renders upload, mode, subtitle defaults, and language cards inside the responsive workbench', () => {

6
src/components/UploadScreen.tsx
View File

@ -34,6 +34,8 @@ export default function UploadScreen({
const [subtitleDefaults, setSubtitleDefaults] = useState<SubtitleDefaults>(DEFAULT_SUBTITLE_DEFAULTS);
const fileInputRef = useRef<HTMLInputElement | null>(null);
const activeModeLabel = mode === 'editing' ? m.upload.editingMode : m.upload.simpleMode;
const previewFontSize = Math.max(10, Math.round(subtitleDefaults.fontSize * 0.5));
const previewTextShadowSize = previewFontSize >= 18 ? 2 : 1;
const settingsCardClass =
'app-surface rounded-[24px] border border-white/70 px-4 py-4 shadow-[0_18px_60px_-34px_rgba(15,23,42,0.3)] sm:px-5';
@ -104,8 +106,8 @@ export default function UploadScreen({
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',
fontSize: `${previewFontSize}px`,
textShadow: `${previewTextShadowSize}px 0 #000, -${previewTextShadowSize}px 0 #000, 0 ${previewTextShadowSize}px #000, 0 -${previewTextShadowSize}px #000`,
}}
>
{m.upload.subtitlePreview}