# IPCam Orange Pi Dashboard - Frontend UI Specification

## 1. Overview

This document describes the frontend UI/UX design for IPCam Orange Pi Dashboard.

The dashboard includes:
- Live camera monitoring (WebRTC)
- Playback system (recorded files)
- System configuration (camera + schedule)

---

## 2. Layout Structure

```
┌───────────────────────────────┐
│ Header / Navigation           │
├───────────────┬───────────────┤
│ Live View     │ Playback      │
│ (WebRTC Grid) │ (Files list)  │
├───────────────┴───────────────┤
│ Settings (modal / tab)        │
└───────────────────────────────┘
```

---

## 3. Live View (WebRTC Grid)

### Features
- 4 camera grid (2x2)
- Real-time streaming via WebRTC
- Low latency
- Auto reconnect

### Layout

```
┌────────────┬────────────┐
│ cam1       │ cam2       │
│ [video]    │ [video]    │
├────────────┼────────────┤
│ cam3       │ cam4       │
│ [video]    │ [video]    │
└────────────┴────────────┘
```

### Camera Tile Components
- Video player (WebRTC)
- Camera name
- Status indicator (online/offline)
- Buttons:
  - Fullscreen
  - Reload

### Behavior
- Lazy load streams
- Auto reconnect on failure
- Click to fullscreen

---

## 4. Playback (Recordings)

### Layout

```
┌───────────────┬──────────────────────┐
│ Camera + Date │ File List + Player   │
└───────────────┴──────────────────────┘
```

### Left Panel
- Camera selector (dropdown)
- Date picker

### Right Panel

#### File List
```
13:00:00  ▶️  ⬇️
13:05:00  ▶️  ⬇️
13:10:00  ▶️  ⬇️
```

#### Video Player
- HTML5 video player
- Load selected file

### API Integration
- GET /recordings?camera=cam1&date=YYYY-MM-DD
- /videos/<camera>/<file>

### Behavior
- Click ▶️ → play
- Click ⬇️ → download
- Auto load newest file

---

## 5. Settings

## 5.1 Camera Management

### UI

```
Camera List:

[cam1] rtsp://...
[cam2] rtsp://...

[ + Add Camera ]
```

### Add Camera Form
```
Name: camX
RTSP URL: rtsp://...

[ Save ]
```

---

## 5.2 Recording Schedule

### UI

```
Recording Schedule

[ ] Enable scheduler

Weekdays:
  From: 18:00
  To:   08:00

Weekend:
  [x] Record all day
```

### Logic
- Controlled by backend scheduler
- Uses MediaMTX API

---

## 6. Navigation

```
[ Live ] [ Playback ] [ Settings ]
```

---

## 7. Tech Stack

- HTML / CSS / JS (or React)
- WebRTC player
- REST API integration

---

## 8. Constraints

- Requires H264 cameras (browser support)
- Requires open ports:
  - 8889 (WebRTC HTTP)
  - 8189/UDP (ICE)

---

## 9. Future Enhancements

- Timeline playback
- Multi-camera playback
- Mobile UI
- Authentication

---

## 10. Summary

Frontend responsibilities:
- Render WebRTC streams
- Display recordings
- Control system configuration

This UI completes the full system:
Camera → MediaMTX → Backend → Frontend