# 🎬 DTTube — Video Player UI Specification

Apply the frontend-design skill.

---

## 📖 System Reference

Read `general.md` completely before implementation.

Follow strictly:

- Design system (Tailwind tokens only)
- Redux architecture
- Component structure
- Branding rules

---

## 🎯 Goal

Build a **YouTube-like video player experience** for DTTube.

---

## 🧩 Implementation Scope

- Video Player UI
- Video Details section
- Related videos list
- Player controls
- Responsive layout

---

## 📁 File Structure (MANDATORY)

```text
src/components/video/
  ├── VideoPage.tsx
  ├── VideoPlayer.tsx
  ├── VideoInfo.tsx
  ├── RelatedVideos.tsx
```

---

## 📄 Routing

```text
src/app/video/[id]/page.tsx
```

### Rule:

- ❌ No UI inside page.tsx
- ✅ Only render `<VideoPage />`

---

## 🎥 Video Player

Use:

```bash
npm install react-player
```

### Component:

```tsx
<ReactPlayer />
```

---

## 🎛 Player Requirements

- Play / Pause
- Seek (progress bar)
- Volume control
- Fullscreen
- Auto play (optional)

---

## 🧠 Redux Integration

Use `playerSlice`:

State:

```ts
{
  currentMedia,
  type: 'video',
  isPlaying
}
```

---

### Behavior

- Clicking video → dispatch playMedia
- Switching page → control playback via Redux
- Only one media active at a time

---

## 🎬 Layout Structure

### Desktop:

```text
[ Video Player | Related Videos ]
[ Video Info   |                ]
```

### Mobile:

```text
[ Video Player ]
[ Video Info   ]
[ Related      ]
```

---

## 📺 Video Player UI

- Full width responsive player
- Aspect ratio: 16:9
- Rounded corners (desktop)
- Dark theme

---

## 📌 Video Info

Show:

- Title
- Views
- Upload date
- Channel name
- Like / Share buttons

---

## 🎥 Related Videos

- Vertical list (desktop right side)
- Horizontal scroll (mobile)

Use:

```tsx
<VideoCard />
```

---

## 🌙 Theme Support

- Dark mode first
- Must support light mode

---

## 🌍 Branding Rules

Use:

```ts
import { TEXT, IMAGES } from "@/branding";
```

- No hardcoded strings
- No hardcoded images

---

## 📊 Data Flow

```text
Component → Redux Thunk → Service → API
```

Use:

```ts
useAppDispatch();
useAppSelector();
```

---

## ⚠️ Mandatory States

- Loading → `<Loader />`
- Error → `<ErrorState />`
- Empty → `<EmptyState />`

---

## 🔁 Media Rules (CRITICAL)

- Playing video → stop audio
- Opening shorts → stop video
- Switching video → update player

---

## 📱 Responsive Rules

- Mobile-first
- Use Tailwind breakpoints
- Maintain 16:9 ratio

---

## 🚫 Strict Rules

- No inline styles
- No direct API calls
- No hardcoded values
- No UI in page.tsx

---

## ✅ Expected Output

- Clean modular components
- Reusable UI
- Redux-connected player
- YouTube-like experience

---

🔥 Generate production-ready Video Player UI
