164 lines
4.5 KiB
Markdown
164 lines
4.5 KiB
Markdown
# Subtitle Preview Scale Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Scale subtitle text inside the compact preview screen so it looks proportional, without changing the real subtitle size values used elsewhere in the flow.
|
|
|
|
**Architecture:** Keep `subtitleDefaults.fontSize` as the source of truth and derive a preview-only font size in `src/components/UploadScreen.tsx`. Lock the behavior with upload-screen tests that prove the preview is scaled down while upload/export still use the real font size.
|
|
|
|
**Tech Stack:** React 19, TypeScript, Tailwind CSS v4 utilities, Vitest, React Testing Library
|
|
|
|
---
|
|
|
|
### Task 1: Lock preview-only scaling with a failing test
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
- Reference: `src/components/UploadScreen.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Update the existing preview test so it expects scaled preview rendering rather than raw font size rendering:
|
|
|
|
```tsx
|
|
it('scales the subtitle preview while preserving the real subtitle size value', () => {
|
|
renderUploadScreen();
|
|
|
|
const sizeSlider = screen.getByLabelText(/subtitle initial size/i);
|
|
const positionSlider = screen.getByLabelText(/subtitle initial position/i);
|
|
const preview = screen.getByTestId('upload-subtitle-preview');
|
|
|
|
expect(sizeSlider).toHaveValue('24');
|
|
expect(positionSlider).toHaveValue('10');
|
|
expect(preview).toHaveStyle({ fontSize: '12px', bottom: '10%' });
|
|
|
|
fireEvent.change(sizeSlider, { target: { value: '32' } });
|
|
fireEvent.change(positionSlider, { target: { value: '18' } });
|
|
|
|
expect(preview).toHaveStyle({ fontSize: '16px', bottom: '18%' });
|
|
});
|
|
```
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: FAIL because the preview currently renders the raw font size values.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Add a preview-only derived font size and use it for the preview text.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: PASS for the new preview-scaling expectation.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
|
|
git commit -m "test: lock subtitle preview scaling"
|
|
```
|
|
|
|
### Task 2: Keep export behavior unchanged
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.tsx`
|
|
- Reference: `src/components/UploadScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Use the existing upload-confirmation test as the regression check for preserving the real font size value.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: FAIL only if the implementation accidentally changes uploaded subtitle defaults instead of preview-only rendering.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Ensure only the preview rendering uses the derived font size. Keep:
|
|
|
|
- slider state values unchanged
|
|
- upload callback values unchanged
|
|
- bottom offset behavior unchanged
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: PASS for both the preview mapping test and the upload-confirmation regression test.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
|
|
git commit -m "fix: scale subtitle preview text"
|
|
```
|
|
|
|
### Task 3: Full verification
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.tsx`
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
If any final regression appears, add the smallest targeted test first.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx src/App.test.tsx
|
|
```
|
|
|
|
Expected: FAIL only if a real regression remains.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Apply only the smallest visual or logic adjustment needed to restore parity.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npm.cmd test
|
|
npm.cmd run lint
|
|
npm.cmd run build
|
|
```
|
|
|
|
Expected:
|
|
|
|
- all tests PASS
|
|
- lint PASS
|
|
- build PASS
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx docs/plans/2026-03-21-subtitle-preview-scale-design.md docs/plans/2026-03-21-subtitle-preview-scale.md
|
|
git commit -m "test: verify subtitle preview scaling"
|
|
```
|