146 lines
3.2 KiB
Markdown
146 lines
3.2 KiB
Markdown
# Quickstart: YouTube Design Preview Replica
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 20+
|
|
- pnpm or npm
|
|
- Playwright (for visual testing)
|
|
|
|
## Setup
|
|
|
|
1. **Install dependencies** (if not already done):
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
2. **Install Playwright browsers** (for visual testing):
|
|
```bash
|
|
npx playwright install chromium firefox webkit
|
|
```
|
|
|
|
3. **Start development server**:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. **Access the app**:
|
|
Open http://localhost:5173 in your browser
|
|
|
|
## Development Workflow
|
|
|
|
### Working on Preview Components
|
|
|
|
The main component to modify is:
|
|
- `frontend/src/components/YouTubeVideoCard.tsx`
|
|
|
|
YouTube CSS variables are defined in:
|
|
- `frontend/src/index.css` (search for "YOUTUBE THEME VARIABLES")
|
|
|
|
### Adding New Preview Modes
|
|
|
|
1. Update `ViewMode` type in `frontend/src/types/index.ts`
|
|
2. Add new variant case in `YouTubeVideoCard.tsx`
|
|
3. Update `ViewSwitcher.tsx` to include new option
|
|
4. Add visual test in `frontend/tests/visual/`
|
|
|
|
### Testing Visual Accuracy
|
|
|
|
**Manual Testing:**
|
|
1. Open YouTube in a browser tab
|
|
2. Open the preview tool in another tab
|
|
3. Compare side-by-side at same zoom level
|
|
|
|
**Automated Testing (Playwright):**
|
|
```bash
|
|
cd frontend
|
|
npx playwright test tests/visual/
|
|
```
|
|
|
|
### Updating Reference Screenshots
|
|
|
|
Reference screenshots are stored in:
|
|
`specs/002-youtube-design-preview/reference/`
|
|
|
|
To capture new references:
|
|
```bash
|
|
# Using Playwright MCP or manual script
|
|
npx ts-node scripts/capture-youtube-reference.ts
|
|
```
|
|
|
|
## Key Files
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `src/components/YouTubeVideoCard.tsx` | Main preview component |
|
|
| `src/components/PreviewModeSelector.tsx` | Desktop/Mobile/Sidebar switcher |
|
|
| `src/components/ThemeToggle.tsx` | Light/Dark mode toggle |
|
|
| `src/store/previewStore.ts` | Zustand state management |
|
|
| `src/hooks/useLocalStorage.ts` | Persistence hook |
|
|
| `src/lib/youtube-styles.ts` | YouTube CSS constants |
|
|
| `src/index.css` | YouTube CSS variables |
|
|
|
|
## CSS Variables Reference
|
|
|
|
### Light Mode Colors
|
|
```css
|
|
--yt-bg: #ffffff;
|
|
--yt-title: #0f0f0f;
|
|
--yt-meta: #606060;
|
|
```
|
|
|
|
### Dark Mode Colors
|
|
```css
|
|
--yt-bg: #0f0f0f;
|
|
--yt-title: #f1f1f1;
|
|
--yt-meta: #aaaaaa;
|
|
```
|
|
|
|
### Dimensions
|
|
```css
|
|
/* Desktop thumbnail */
|
|
width: 360px;
|
|
height: 202px;
|
|
border-radius: 12px;
|
|
|
|
/* Sidebar thumbnail */
|
|
width: 168px;
|
|
height: 94px;
|
|
border-radius: 8px;
|
|
|
|
/* Avatar */
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
|
|
/* Duration badge */
|
|
padding: 3px 4px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
```
|
|
|
|
## Common Tasks
|
|
|
|
### Add support for new YouTube element
|
|
|
|
1. Capture reference from YouTube using Playwright
|
|
2. Extract computed styles using browser DevTools
|
|
3. Add CSS variables to `index.css` if new colors needed
|
|
4. Update component JSX and Tailwind classes
|
|
5. Run visual tests to verify accuracy
|
|
|
|
### Debug visual differences
|
|
|
|
1. Run Playwright test to generate diff image
|
|
2. Check `specs/002-youtube-design-preview/reference/` for comparison
|
|
3. Use browser DevTools to compare computed styles
|
|
4. Adjust Tailwind classes or CSS variables
|
|
|
|
### Update for YouTube design changes
|
|
|
|
1. Capture new reference screenshots from YouTube
|
|
2. Run visual tests - they should fail showing differences
|
|
3. Update CSS values in component/styles
|
|
4. Re-run tests until passing
|
|
5. Commit new reference screenshots
|