# Project Prompt: Video Streaming Website (Laravel + React)

Build a complete, production-ready **video streaming website** with a **Laravel backend (REST API)** and a **React frontend**, with a **modern, clean, responsive design** (mobile-first, dark/light theme support).

---

## 1. Tech Stack

- **Backend:** Laravel (latest stable), Sanctum for auth, MySQL database, REST API.
- **Frontend:** React (latest stable) with React Router, Axios/Fetch for API calls, Tailwind CSS for styling.
- **Video playback:** A modern, advanced HTML5 player module (e.g. Plyr / Video.js) with quality selection, speed control, fullscreen, and keyboard shortcuts.
- **Admin panel:** Separate admin area (can be Laravel Blade or React) protected by admin authentication.

---

## 2. Global Layout (all pages)

### 2.1 Top Bar with Side Menu
A fixed top navigation bar on every page:

```
[ Logo | Site Name          (Search button) (Menu button) ]
```

- **Logo + Site Name** on the left (both configurable from admin settings).
- **Search button** on the right — opens a search input / search overlay to search videos by title, category, or tag.
- **Menu button** (hamburger) on the far right — opens a **slide-in side menu** containing: Home, Categories, Live, Trending, and (if logged in) Profile / Logout, or Login / Register.

### 2.2 Marquee Notice System
- A horizontally scrolling marquee notice bar directly under the top bar.
- Text, link, speed, background color, and text color are set from the **admin panel**.
- **Completely hidden if no notice is set** (no empty bar, no reserved space).

### 2.3 Category Bar
- A horizontally scrollable chip/pill row of categories:

```
{ Category 1 } { Category 2 } { Category 3 } ... (scrolls / continues)
```

- Categories are managed (create/edit/delete/reorder) from the admin panel.
- Clicking a category filters the video grid to that category.

---

## 3. Home Page

Order of sections from top to bottom:

1. **Top bar** (section 2.1)
2. **Marquee notice** (section 2.2 — hidden if not set)
3. **Category bar** (section 2.3)
4. **Exclusive Live section** — a highlighted banner/row for exclusive or live content. **Hidden entirely if no live/exclusive item is set** by the admin.
5. **Video grid** — responsive grid, 2 videos per row on mobile (more on desktop):

```
{ video1 } { video2 }
{ video3 } { video4 }
{ video5 } { video6 }
...
```

6. **Randomized ad injection in the grid** — as the user scrolls (infinite scroll / load more), ad slots are randomly mixed into the grid in place of a video card, e.g.:

```
{ video7 } { video8 }
{ video9 } { AD (by ad code) }
{ video10 } { video11 }
```

- Ads are rendered from **ad codes (HTML/JS snippets)** managed in the admin panel.
- Injection frequency (e.g. 1 ad per N videos) and randomness are configurable in admin settings.

### 3.1 Video Card (used everywhere a video is listed)
Each video card shows:

- **Thumbnail** (with duration badge and a lock icon 🔒 if the video is locked).
- **Title** (max 2 lines, ellipsis).
- **Stats row:** total views, total likes, total comments, total shares.
  - ⚠️ **Fake stats support:** the admin can set fake/base values per video for views, likes, comments, and shares. Displayed value = fake base value + real value. If no fake value is set, show real counts only.
- **Uploader row:** uploader avatar + name (shows the admin/channel name) with a **Subscribe button** next to it.

---

## 4. Video View Page

When a user clicks a video, the backend is checked first: **is this video locked or not?**

### 4.1 If the video is LOCKED → Ad-Unlock Lock Screen

Show a **lock screen** instead of the player:

> 🔒 **This video is locked.** To continue watching, please visit the sponsor ad **3 times** (count configurable per video).

**How the unlock flow works (must be implemented securely, verified on the backend):**

1. Admin sets **per video**: number of required ad visits (e.g. 3) and the **ad link(s)**.
2. Lock screen shows progress, e.g. `0 / 3 completed`, and an **"Open Ad Link"** button.
3. User clicks the button → the ad link opens in a **new tab** → backend records a **click timestamp** for this user/session and this video.
4. A **timer check** runs (e.g. minimum **20 seconds**, configurable): the system tracks when the user clicked and **when they return** to our tab (using page visibility/focus events reported to the backend).
5. **Validation rule:** the visit only counts if `(return time − click time) ≥ required seconds`. If the user comes back too early, or never left the page, **do not count it** and show a message like "You returned too early — please stay on the ad page."
6. Each valid visit increments the counter (`1 / 3`, `2 / 3`, `3 / 3`), stored **server-side** (per user/session per video), never trusted from the client alone.
7. When all required visits pass → backend marks the video **unlocked for this user/session** (with a configurable expiry, e.g. 24 hours) → the page reloads into the normal video view.

**Security requirements for this system (most secure):**
- All click/return timestamps and unlock state are stored and validated **on the backend**.
- Signed/tokenized requests so the unlock endpoints cannot be called directly to skip the ads.
- Rate limiting and duplicate-click protection.
- Admin can reset unlock state per user/video.

### 4.2 If the video is UNLOCKED (or was never locked) → Video Page

Layout from top to bottom:

1. **Top bar** (section 2.1)
2. **Marquee notice** (hidden if not set)
3. **Category bar**
4. **Video player** — advanced player module (quality, speed, fullscreen, seek preview if possible).
   - **In-video ad break popups:** every **1–5 minutes** (interval configurable in admin), pause playback and show a **"Watch Ad Break"** popup rendered from an admin ad code. User closes/completes it to resume playback. Can be disabled globally or per video from admin.
5. **Video info:**
   - Title
   - Uploader (shows **admin/channel name**) + Subscribe button
   - Stats: views, likes, comments, shares (with fake-stats support as in 3.1)
   - **Like** and **Share** buttons (share: copy link + social share options)
6. **Comment section:** logged-in users can comment; comments list with newest first; admin can moderate/delete.
7. **Ad code slot** — a dedicated ad placement under the video info (admin-managed ad code).
8. **Related videos section:** grid/list of related videos (same category/tags), each shown as a video card (thumbnail, title, views, likes, comments, shares).

---

## 5. Admin Panel

Full admin dashboard to control everything above:

- **Site settings:** logo, site name, theme colors.
- **Marquee notice:** text, link, styling, on/off.
- **Categories:** CRUD + ordering.
- **Videos:** upload/embed, title, description, thumbnail, category, tags, publish/draft.
  - Per-video: **lock on/off**, required ad visits count, ad link(s), return-time seconds, unlock expiry.
  - Per-video: **fake stats** (views, likes, comments, shares base values).
- **Exclusive/Live section:** set or clear the featured live/exclusive item.
- **Ads manager:** ad codes (HTML/JS), grid-injection frequency, in-player ad break interval (1–5 min), enable/disable per placement.
- **Users & subscriptions:** user list, ban, reset video unlocks.
- **Comments moderation.**
- **Analytics dashboard:** real views, likes, shares, ad-click counts, unlock completion rates.

---

## 6. General Requirements

- Fully **responsive**, modern UI with smooth transitions and skeleton loaders.
- SEO-friendly (meta tags, Open Graph for video sharing).
- All lists paginated / infinite scroll.
- Clean code structure: Laravel API resources, form requests, policies; React components organized by feature.
- Seeders with demo data (categories, videos, one locked video) so the project runs and is testable immediately after setup.