feat: youtube preview

2026-01-29 21:05:41 -03:00
parent 5125bbf4d4
commit bdb1759c81
40 changed files with 5056 additions and 411 deletions
--- a/specs/002-youtube-design-preview/quickstart.md
+++ b/specs/002-youtube-design-preview/quickstart.md
@@ -0,0 +1,145 @@
+# 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