# NoGood Radio Player - User Guide

## What It Is

A persistent background music player that streams **NoGood Radio** while you browse the app on desktop. Think Spotify's mini-player, but for skate culture.

---

## How to Use

### Desktop (Automatically Appears)

1. **Open the app on desktop** (any page)
2. **See the player** at the bottom of the screen:
   ```
   🎧 NoGood Radio • Curated skate culture music  [▶️ Play]
   ```
3. **Click Play** ▶️ to start streaming
4. **Music plays** while you browse spots, events, coaches, etc.
5. **Adjust volume** with the slider 🔊────
6. **Minimize** to small floating button [–]
7. **Close** completely if you prefer silence [✕]

### Mobile (Hidden)

The radio player **does not appear on mobile** to:
- Respect data usage
- Avoid conflicts with phone music
- Preserve screen space
- Better UX for mobile users

---

## Player States

### 1. Normal Bar (Default)

```
┌──────────────────────────────────────────────────────────┐
│ 🎧 NoGood Radio • Lo-Fi Mix  🔊──── ▶️ ⚡ [–] [✕]        │
└──────────────────────────────────────────────────────────┘
```

**Features:**
- Station name and current track
- Volume slider
- Play/Pause button (yellow)
- Zap button (support NoGood)
- Minimize button
- Close button
- Click anywhere to expand

---

### 2. Expanded Panel (Click Bar)

```
┌──────────────────────────────────────────────────────────┐
│ 🎧 NoGood Radio                               [–] [✕]    │
│ Curated skate culture music                              │
│                                                           │
│ ▶️  🔊──────────                                         │
│                                                           │
│ 📻 About NoGood Radio                                    │
│ Curated skate culture music streaming 24/7.             │
│ Beats, hip-hop, punk, and everything that makes          │
│ you want to push.                                        │
│                                                           │
│ ⚡ Support NoGood Radio                                  │
│ [Zap 100] [Zap 500] [Zap 1000]                          │
│                                                           │
│ 🔗 Visit zap.stream • NoGood's Profile                   │
└──────────────────────────────────────────────────────────┘
```

**Shows:**
- Full description
- Quick zap buttons
- Links to NoGood's platforms
- More context about the station

**To collapse**: Click the bar again or press [–]

---

### 3. Minimized Button (Click [–])

```
                                    ┌──────────┐
                                    │ 🎧 ▶️    │
                                    │ Radio    │
                                    └──────────┘
                                         ↑
                                  Bottom-right corner
```

**Features:**
- Small floating button
- Still shows play/pause
- Animated equalizer when playing
- Click to restore full bar
- Stays out of the way

---

## Visual Indicators

### When Playing
- 🟢 Pulsing green dot on radio icon
- 📊 Animated equalizer bars (3 bars bouncing)
- 🔴 "LIVE" badge (red, pulsing)
- ▶️ Pause button visible

### When Paused
- ⏸️ Play button visible
- No animations
- No LIVE badge

### When Loading
- ⏳ Spinner icon
- "Loading..." state
- Controls disabled

### When Error
- ⚠️ Error message shown
- "Stream unavailable" text
- Retry or close options

---

## Controls Reference

| Button | Icon | Function |
|--------|------|----------|
| Play/Pause | ▶️ / ⏸️ | Start/stop streaming |
| Volume | 🔊──── | Adjust sound (0-100%) |
| Mute | 🔇 | Quick mute toggle |
| Zap | ⚡ | Support NoGood with Bitcoin |
| Minimize | [–] | Collapse to small button |
| Close | [✕] | Hide player completely |
| Expand | ⌃ | Show more info & zap options |

---

## Keyboard Shortcuts (Future Enhancement)

Could add:
- **Space**: Play/Pause
- **M**: Mute/Unmute
- **↑/↓**: Volume up/down
- **Esc**: Minimize player

---

## Preferences (Saved Automatically)

The player remembers:
- ✅ **Volume level** - Your preferred volume
- ✅ **Minimized state** - Bar vs floating button
- ✅ **Closed state** - If you closed it, stays closed
- ✅ **Last played** - When you last used it

**Reset**: Click [✕] to close, refresh page and click Play again to reset

---

## Technical Details

### Stream Source
- **Platform**: zap.stream
- **Artist**: NoGood (@nogood.store)
- **Format**: Live audio stream (HLS or Icecast)
- **Fetching**: Queries Nostr for kind:30311 events
- **Fallback**: Uses default stream URL if no events found

### Browser Support
- ✅ Chrome, Firefox, Safari, Edge (modern versions)
- ✅ HTML5 audio element
- ✅ HLS streaming support
- ❌ Internet Explorer (not supported)

### Data Usage
- **Audio quality**: ~128kbps
- **Per hour**: ~60MB
- **Desktop only**: Mobile users protected

---

## Troubleshooting

### No sound?
1. Check browser volume (not muted)
2. Check player volume slider (not at 0)
3. Check if stream is actually live
4. Try refreshing the page

### Player not showing?
1. Are you on desktop? (hidden on mobile)
2. Did you close it? (click area where it was to reopen)
3. Check browser width (must be > 768px)

### Stream error?
- Stream may be offline temporarily
- Try again later
- Check zap.stream status

### Can't zap NoGood?
- Need to be logged in
- Need Lightning wallet set up
- Check wallet connection on /wallet page

---

## The Experience

### What Users Feel

**Before**: Silent browsing, static content
**After**: Curated beats, skate culture atmosphere

**It's like**:
- Walking into a skate shop (music playing)
- Skating with headphones (personal soundtrack)
- Being at a session (DJ in the background)

### Why It Matters

- 🎵 **Sets the mood** - Skate culture vibe
- 🎧 **Engaging** - More time in app
- 💰 **Supports creator** - NoGood gets exposure + zaps
- 🌍 **Community** - Everyone hears the same beats
- 🚀 **Unique** - No other skate app has this

---

## Future Enhancements (Don't Build Yet)

- Show current track metadata (if available)
- Listener count ("1,234 listening worldwide")
- Share button ("Share what you're listening to")
- Multiple radio stations (NoGood, others)
- Playlist view (if stream provides it)
- Request songs feature
- Schedule display (show program times)
- Full NIP-53 live chat integration
- Radio discovery (find other skate music streams)

---

## Credits

- **Radio**: NoGood Radio on zap.stream
- **Artist**: NoGood (@nogood.store)
- **Platform**: zap.stream
- **Protocol**: NIP-53 (Live Activities)
- **Integration**: GoSkateSpots

---

**Enjoy the vibes! 🎵🛹**