feat: youtube preview
This commit is contained in:
249
specs/002-youtube-design-preview/tasks.md
Normal file
249
specs/002-youtube-design-preview/tasks.md
Normal file
@@ -0,0 +1,249 @@
|
||||
# Tasks: YouTube Design Preview Replica
|
||||
|
||||
**Input**: Design documents from `/specs/002-youtube-design-preview/`
|
||||
**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/
|
||||
|
||||
**Tests**: Visual regression tests included as User Story 4 (P2) per specification requirements.
|
||||
|
||||
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
||||
|
||||
## Format: `[ID] [P?] [Story] Description`
|
||||
|
||||
- **[P]**: Can run in parallel (different files, no dependencies)
|
||||
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3, US4)
|
||||
- Include exact file paths in descriptions
|
||||
|
||||
## Path Conventions
|
||||
|
||||
- **Frontend**: `frontend/src/`
|
||||
- **Tests**: `frontend/tests/visual/`
|
||||
- **Scripts**: `scripts/`
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Setup (Shared Infrastructure)
|
||||
|
||||
**Purpose**: Project initialization, type definitions, and shared utilities
|
||||
|
||||
- [x] T001 [P] Add new type definitions (PreviewMode, ThemeMode, VideoMetadata, UploadedThumbnail) in `frontend/src/types/index.ts`
|
||||
- [x] T002 [P] Create YouTube style constants module with extracted CSS tokens in `frontend/src/lib/youtube-styles.ts`
|
||||
- [x] T003 [P] Update CSS variables with precise YouTube values from research in `frontend/src/index.css`
|
||||
- [x] T004 [P] Create useLocalStorage hook for state persistence in `frontend/src/hooks/useLocalStorage.ts`
|
||||
- [x] T005 Install Playwright as dev dependency: `cd frontend && npm install -D @playwright/test`
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Foundational (Blocking Prerequisites)
|
||||
|
||||
**Purpose**: Core infrastructure that MUST be complete before ANY user story can be implemented
|
||||
|
||||
**⚠️ CRITICAL**: No user story work can begin until this phase is complete
|
||||
|
||||
- [x] T006 Update previewStore with new state shape (themeMode, persistence) in `frontend/src/store/previewStore.ts`
|
||||
- [x] T007 Add localStorage persistence integration to previewStore in `frontend/src/store/previewStore.ts`
|
||||
- [x] T008 [P] Create ThemeToggle component with light/dark switch in `frontend/src/components/ThemeToggle.tsx`
|
||||
- [x] T009 [P] Create PreviewModeSelector component (desktop/mobile/sidebar) in `frontend/src/components/PreviewModeSelector.tsx`
|
||||
- [x] T010 Update ThumbnailUploader with 5MB limit and format validation (JPG/PNG/WebP) in `frontend/src/components/ThumbnailUploader.tsx`
|
||||
- [x] T011 Add error messages for file validation failures in `frontend/src/components/ThumbnailUploader.tsx`
|
||||
|
||||
**Checkpoint**: Foundation ready - user story implementation can now begin in parallel
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: User Story 1 - Desktop Video Preview (Priority: P1) 🎯 MVP
|
||||
|
||||
**Goal**: Pixel-perfect YouTube desktop grid layout preview with all metadata elements
|
||||
|
||||
**Independent Test**: Upload a thumbnail, select desktop mode, verify visual match with YouTube homepage grid card
|
||||
|
||||
### Implementation for User Story 1
|
||||
|
||||
- [x] T012 [US1] Refactor YouTubeVideoCard desktop variant with exact YouTube dimensions (360x202px, 12px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T013 [US1] Update desktop title typography (Roboto 16px/500, line-height 22px, 2-line clamp) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T014 [US1] Update channel name and metadata typography (12px, #606060/#aaaaaa) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T015 [US1] Update avatar display (36x36px circle) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T016 [US1] Update duration badge styling (rgba(0,0,0,0.8), 12px/500, 4px radius, 3px 4px padding) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T017 [US1] Add hover states (watch later, add to queue icons on hover) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T018 [US1] Add metadata spacing (12px thumbnail-to-meta gap, 12px avatar-to-text gap) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T019 [US1] Integrate desktop preview with ThemeToggle for light/dark mode switching in `frontend/src/pages/ToolPage.tsx`
|
||||
- [x] T020 [US1] Add metadata editor UI for customizing title, channel, views, duration in `frontend/src/components/UserInfoInputs.tsx`
|
||||
|
||||
**Checkpoint**: Desktop preview should match YouTube homepage grid exactly - test with side-by-side comparison
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: User Story 2 - Mobile Video Preview (Priority: P1)
|
||||
|
||||
**Goal**: Pixel-perfect YouTube mobile app layout preview with full-width thumbnails
|
||||
|
||||
**Independent Test**: Switch to mobile mode, verify full-width layout matches YouTube mobile app
|
||||
|
||||
### Implementation for User Story 2
|
||||
|
||||
- [x] T021 [US2] Update YouTubeVideoCard mobile variant with full-width thumbnail (100%, 16:9 ratio, 0px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T022 [US2] Update mobile metadata layout (avatar 36x36, title below thumbnail) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T023 [US2] Update mobile typography (match YouTube mobile app sizes) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T024 [US2] Update mobile spacing (gap between metadata elements) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T025 [US2] Add mobile container wrapper with max-width constraint in `frontend/src/pages/ToolPage.tsx`
|
||||
- [x] T026 [US2] Add responsive viewport simulation for mobile preview in `frontend/src/pages/ToolPage.tsx`
|
||||
|
||||
**Checkpoint**: Mobile preview should match YouTube mobile app - test on mobile device or devtools
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: User Story 3 - Sidebar/Related Videos Preview (Priority: P2)
|
||||
|
||||
**Goal**: Pixel-perfect YouTube sidebar (related videos) preview with compact horizontal layout
|
||||
|
||||
**Independent Test**: Switch to sidebar mode, verify compact card layout matches YouTube watch page sidebar
|
||||
|
||||
### Implementation for User Story 3
|
||||
|
||||
- [x] T027 [US3] Update YouTubeVideoCard sidebar variant with exact dimensions (168x94px thumbnail, 8px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T028 [US3] Update sidebar horizontal layout (thumbnail left, metadata right) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T029 [US3] Update sidebar title typography (14px/500, 2-line clamp) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T030 [US3] Update sidebar metadata (channel name, views, time below title) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T031 [US3] Update sidebar spacing (8px thumbnail-to-text gap, 8px between cards) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T032 [US3] Remove avatar from sidebar variant (YouTube sidebar has no avatar) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T033 [US3] Add sidebar list container with vertical stacking in `frontend/src/pages/ToolPage.tsx`
|
||||
|
||||
**Checkpoint**: Sidebar preview should match YouTube watch page related videos section
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: User Story 4 - Visual Accuracy Validation with Playwright (Priority: P2)
|
||||
|
||||
**Goal**: Automated visual regression testing to ensure 98% match with YouTube reference screenshots
|
||||
|
||||
**Independent Test**: Run `npx playwright test` and verify all visual tests pass with 98% threshold
|
||||
|
||||
### Implementation for User Story 4
|
||||
|
||||
- [x] T034 [P] [US4] Create Playwright configuration file in `frontend/playwright.config.ts`
|
||||
- [x] T035 [P] [US4] Create visual test utilities (screenshot comparison, diff generation) in `frontend/tests/visual/utils.ts`
|
||||
- [x] T036 [P] [US4] Copy reference screenshots to test directory in `frontend/tests/visual/reference/`
|
||||
- [x] T037 [US4] Create desktop visual test (light mode) in `frontend/tests/visual/desktop.spec.ts`
|
||||
- [x] T038 [US4] Add desktop visual test (dark mode) in `frontend/tests/visual/desktop.spec.ts`
|
||||
- [x] T039 [US4] Create mobile visual test (light/dark modes) in `frontend/tests/visual/mobile.spec.ts`
|
||||
- [x] T040 [US4] Create sidebar visual test (light/dark modes) in `frontend/tests/visual/sidebar.spec.ts`
|
||||
- [x] T041 [US4] Create reference screenshot capture script in `scripts/capture-youtube-reference.ts`
|
||||
- [x] T042 [US4] Add npm script for visual tests: `"test:visual": "playwright test"` in `frontend/package.json`
|
||||
|
||||
**Checkpoint**: All visual tests should pass with 98%+ match against YouTube references
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Polish & Cross-Cutting Concerns
|
||||
|
||||
**Purpose**: Improvements that affect multiple user stories
|
||||
|
||||
- [x] T043 [P] Add responsive breakpoints matching YouTube (6→5→4→3→2→1 column) in `frontend/src/components/PreviewGrid.tsx`
|
||||
- [x] T044 [P] Add edge case handling: non-standard aspect ratio thumbnails (crop to 16:9) in `frontend/src/components/ThumbnailUploader.tsx`
|
||||
- [x] T045 [P] Add edge case handling: long titles (ellipsis truncation per mode) in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T046 [P] Add edge case handling: missing metadata ("No views", "Just now") in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T047 [P] Add localStorage cleanup (limit 10 recent thumbnails) in `frontend/src/store/previewStore.ts`
|
||||
- [x] T048 Performance optimization: lazy load thumbnails, optimize re-renders in `frontend/src/components/YouTubeVideoCard.tsx`
|
||||
- [x] T049 Run ESLint and fix any errors: `cd frontend && npm run lint`
|
||||
- [ ] T050 Manual validation against quickstart.md test scenarios
|
||||
|
||||
---
|
||||
|
||||
## Dependencies & Execution Order
|
||||
|
||||
### Phase Dependencies
|
||||
|
||||
- **Setup (Phase 1)**: No dependencies - can start immediately
|
||||
- **Foundational (Phase 2)**: Depends on Setup completion - BLOCKS all user stories
|
||||
- **User Stories (Phase 3-6)**: All depend on Foundational phase completion
|
||||
- User stories can then proceed in parallel (if staffed)
|
||||
- Or sequentially in priority order (US1 → US2 → US3 → US4)
|
||||
- **Polish (Phase 7)**: Depends on all user stories being complete
|
||||
|
||||
### User Story Dependencies
|
||||
|
||||
- **User Story 1 (P1)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
||||
- **User Story 2 (P1)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
||||
- **User Story 3 (P2)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
||||
- **User Story 4 (P2)**: Can start after US1/US2/US3 have implementations to test
|
||||
|
||||
### Within Each User Story
|
||||
|
||||
- Core styling before hover states
|
||||
- Layout before typography fine-tuning
|
||||
- Component implementation before page integration
|
||||
- Story complete before moving to next priority
|
||||
|
||||
### Parallel Opportunities
|
||||
|
||||
- All Setup tasks T001-T004 can run in parallel
|
||||
- Foundational tasks T008, T009 can run in parallel
|
||||
- User Stories 1, 2, 3 can be worked on in parallel after Foundational
|
||||
- Visual test setup (T034-T036) can run in parallel
|
||||
- All Polish tasks marked [P] can run in parallel
|
||||
|
||||
---
|
||||
|
||||
## Parallel Example: Setup Phase
|
||||
|
||||
```bash
|
||||
# Launch all setup tasks in parallel:
|
||||
Task: "Add new type definitions in frontend/src/types/index.ts"
|
||||
Task: "Create YouTube style constants in frontend/src/lib/youtube-styles.ts"
|
||||
Task: "Update CSS variables in frontend/src/index.css"
|
||||
Task: "Create useLocalStorage hook in frontend/src/hooks/useLocalStorage.ts"
|
||||
```
|
||||
|
||||
## Parallel Example: User Stories After Foundational
|
||||
|
||||
```bash
|
||||
# With multiple developers after Phase 2:
|
||||
Developer A: User Story 1 (Desktop) - T012-T020
|
||||
Developer B: User Story 2 (Mobile) - T021-T026
|
||||
Developer C: User Story 3 (Sidebar) - T027-T033
|
||||
# Then User Story 4 (Visual Tests) once implementations exist
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Strategy
|
||||
|
||||
### MVP First (User Story 1 Only)
|
||||
|
||||
1. Complete Phase 1: Setup (T001-T005)
|
||||
2. Complete Phase 2: Foundational (T006-T011)
|
||||
3. Complete Phase 3: User Story 1 - Desktop (T012-T020)
|
||||
4. **STOP and VALIDATE**: Side-by-side comparison with YouTube
|
||||
5. Deploy/demo if ready
|
||||
|
||||
### Incremental Delivery
|
||||
|
||||
1. Setup + Foundational → Foundation ready
|
||||
2. Add User Story 1 (Desktop) → Test independently → Demo (MVP!)
|
||||
3. Add User Story 2 (Mobile) → Test independently → Demo
|
||||
4. Add User Story 3 (Sidebar) → Test independently → Demo
|
||||
5. Add User Story 4 (Visual Tests) → Automated validation
|
||||
6. Polish phase → Production ready
|
||||
|
||||
### Parallel Team Strategy
|
||||
|
||||
With multiple developers:
|
||||
|
||||
1. Team completes Setup + Foundational together
|
||||
2. Once Foundational is done:
|
||||
- Developer A: User Story 1 (Desktop)
|
||||
- Developer B: User Story 2 (Mobile)
|
||||
- Developer C: User Story 3 (Sidebar)
|
||||
3. All developers: User Story 4 (Visual Tests)
|
||||
4. Team: Polish phase
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- [P] tasks = different files, no dependencies
|
||||
- [Story] label maps task to specific user story for traceability
|
||||
- Each user story should be independently completable and testable
|
||||
- Commit after each task or logical group
|
||||
- Stop at any checkpoint to validate story independently
|
||||
- YouTube CSS values from research.md are the source of truth
|
||||
- Reference screenshots in specs/002-youtube-design-preview/reference/
|
||||
Reference in New Issue
Block a user