260 lines
7.2 KiB
Markdown
260 lines
7.2 KiB
Markdown
# 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! 🎵🛹**
|