7.2 KiB
7.2 KiB
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)
- Open the app on desktop (any page)
- See the player at the bottom of the screen:
🎧 NoGood Radio • Curated skate culture music [▶️ Play] - Click Play ▶️ to start streaming
- Music plays while you browse spots, events, coaches, etc.
- Adjust volume with the slider 🔊────
- Minimize to small floating button [–]
- 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?
- Check browser volume (not muted)
- Check player volume slider (not at 0)
- Check if stream is actually live
- Try refreshing the page
Player not showing?
- Are you on desktop? (hidden on mobile)
- Did you close it? (click area where it was to reopen)
- 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! 🎵🛹