# CUW Stream Overlay Layout

A full 1920 x 1080 OBS browser layout matching the rough sketch:

- Top row: stream title/date on the left and transparent sponsor cycling on the right.
- Lower left: player image cycler.
- Lower right: main media image/video cycler.
- Bottom row: news-style crawl for socials, music, break messages, or quick stream updates.
- Hidden YouTube playlist player for stream music, reusing the Now Playing crawl item.
- Music position is saved in each browser's local site storage, so different machines do not share or conflict over playback state.
- Background: the existing animated CUW wave from `Wave/`.

## Edit Content

Open the overlay admin page to add or remove carousel and player images without editing files by hand:

```text
http://localhost/StreamOverlayNew/OverlayLayout/admin/
```

Choose a game in the left sidebar. Carousel uploads go to that game's `media/` folder and player uploads go to its `players/` folder. Changes appear the next time the overlay is loaded. Player filenames are used as their displayed names and can be renamed directly from each player card.

On the first visit from the XAMPP computer, the admin page asks you to create a username and password. Later visits require that login, sessions expire after two hours of inactivity, and the header includes a logout button. The generated `admin/credentials.local.php` file contains only a password hash and is excluded from Git.

Add player images to `PlayerWidget/images/`. The full overlay scans that folder automatically when loaded through XAMPP.

Open `widget.js` to update stream text, sponsors, media items, and timing:

```javascript
const SPONSORS = [
    { name: "SPONSOR NAME", image: "../SponsorWidget/images/logo.png" }
];

const DEFAULT_MEDIA_ITEMS = [
    { type: "image", src: "../MediaWidget/media/graphic.jpg", label: "MATCHDAY", duration: 10000, fit: "contain" }
];

const DEFAULT_INFO_REEL = [
    { label: "FOLLOW US", primary: "@CUWEsports", secondary: "X / Instagram / YouTube", meta: "CUW ESPORTS" }
];

const MUSIC_PLAYLIST_ID = "PLY--bzj0Ns3E";
```

Image and video paths are relative to this folder.

## Game-Specific Overlay Links

Add a game folder under `OverlayLayout/games/`, then put that game's player and media assets inside it:

```text
OverlayLayout/
  games/
    valorant/
      config.json
      wave-logo.png
      players/
        jane-doe.png
        john_smith.webp
      media/
        matchday.png
        sponsor-video.mp4
```

Use the game folder name in the OBS URL:

```text
http://localhost/StreamOverlayNew/OverlayLayout/?game=valorant
```

Marvel Rivals is already set up:

```text
http://localhost/StreamOverlayNew/OverlayLayout/?game=marvel-rivals
```

Rocket League is also set up:

```text
http://localhost/StreamOverlayNew/OverlayLayout/?game=rocket-league
```

The overlay will pull:

- Stream name from `games/valorant/config.json`.
- Background game logo from `games/valorant/wave-logo.png`.
- Player images from `games/valorant/players/`.
- Large cycling images/videos from `games/valorant/media/`.

Example `config.json`:

```json
{
    "stream": {
        "kicker": "CUW ESPORTS",
        "title": "Valorant Matchday Stream"
    },
    "waveLogo": "wave-logo.png",
    "infoReel": [
        {
            "label": "FOLLOW US",
            "primary": "@CUWEsports",
            "secondary": "X / Instagram / YouTube",
            "meta": "CUW ESPORTS"
        }
    ],
    "media": [
        {
            "file": "matchday.png",
            "label": "MATCHDAY",
            "duration": 10000,
            "fit": "contain"
        },
        {
            "file": "promo.mp4",
            "label": "PROMO",
            "fit": "contain",
            "muted": true
        }
    ]
}
```

If `media` is left out of `config.json`, the overlay scans every supported file in that game's `media/` folder. When a `?game=` URL is used, empty `players/` or `media/` folders stay blank instead of falling back to shared default content.

## OBS Browser Source

- URL: `http://localhost/StreamOverlayNew/OverlayLayout/`
- Width: `1920`
- Height: `1080`
- FPS: `60`
- Keep **Refresh browser when scene becomes active** off. The overlay resets the 10-minute timer when OBS makes the source visible, without reloading the whole page.
- Keep **Shutdown source when not visible** off if you want the overlay, images, and music player to stay warm between scene switches.

The colors are based on the CUW style guide: Midnight Blue, Lake Blue, Sky Blue, Sunrise Gold, Sunset Gold, charcoal, fog, and white.
