# YouTube Now Playing Widget

A basic OBS Browser Source widget that:

- Loads a public or unlisted YouTube playlist
- Plays the playlist in a visible embedded player
- Enables shuffle
- Loops the playlist
- Shows the current title and uploader/channel
- Displays current time, duration, and a progress bar
- Skips unavailable or non-embeddable videos

## 1. Add your playlist

Open `widget.js` and replace:

```javascript
const PLAYLIST_ID = "REPLACE_WITH_YOUR_PLAYLIST_ID";
```

with the ID from your playlist URL.

For example:

```text
https://www.youtube.com/playlist?list=PL1234567890ABCDEFG
```

becomes:

```javascript
const PLAYLIST_ID = "PL1234567890ABCDEFG";
```

The playlist should be Public or Unlisted. Every included video must permit
embedded playback.

## 2. Run it locally

Do not double-click `index.html`; run a small local web server.

### Option A: Python

Open a terminal inside this folder and run:

```bash
python -m http.server 8080
```

Then open:

```text
http://localhost:8080
```

### Option B: Node.js

Install `http-server` once:

```bash
npm install -g http-server
```

Run:

```bash
http-server -p 8080
```

## 3. Add it to OBS

1. Add a **Browser Source**.
2. Use this URL:

```text
http://localhost:8080
```

3. Suggested source size:

```text
Width: 1000
Height: 300
FPS: 60
```

4. Enable **Control audio via OBS** if that option is available.
5. Keep the browser source active while it is needed.

## Customization

In `styles.css`, change:

```css
--accent: #7c5cff;
--panel: rgba(10, 13, 22, 0.94);
--widget-width: 860px;
--widget-height: 190px;
```

In `widget.js`, change:

```javascript
startingVolume: 35
```

to set the initial volume from 0 to 100.

## Troubleshooting

### It says to replace the playlist ID

The placeholder is still present in `widget.js`.

### No audio

- Check the Browser Source volume in the OBS Audio Mixer.
- Open OBS's Advanced Audio Properties and confirm it is not muted.
- Interact with the Browser Source once if autoplay was blocked.
- Confirm Windows Volume Mixer is not muting OBS.

### A video is skipped

The video may be private, removed, age restricted, region restricted, or have
embedding disabled.

### Playback starts in playlist order

Shuffle is applied when the player becomes ready. Refreshing the Browser Source
creates a new shuffled order.

## Broadcast rights

Only include music that your team has permission to rebroadcast. A public
YouTube upload or playlist does not itself grant livestreaming rights.
