SkateSpots/LIVE_MUSIC_PROPOSAL.md

Live Music/Streaming Integration Proposal

What Primal Does

Looking at the Primal live music example, they're using NIP-53 (Live Activities) to:

• Stream live music performances
• Show current participants/listeners
• Enable live chat during streams
• Display stream metadata (title, description, thumbnail)
• Track when streams are live/planned/ended

---

How It Could Work for Skate Events

Use Case: Live Skate Contest Stream

🏁 Venice Beach Street Contest 2025

📺 LIVE NOW - 234 watching
🎵 DJ spinning beats
🛹 Finals happening now

[Watch Stream] [Join Chat] [⚡ Zap]

Benefits:

• Remote viewers can watch contests
• DJs can stream music during sessions
• Community stays connected
• Builds hype for events
• Records preserved after event

---

Technical Implementation

Option 1: Full Live Streaming (NIP-53) - COMPLEX

What's needed:

• Video streaming server (expensive, complex)
• HLS/RTMP encoding (technical knowledge required)
• Chat system (kind:1311 live chat messages)
• Real-time participant tracking
• Stream key management

Estimated effort: 2-3 weeks Ongoing costs: $50-200/month for streaming infrastructure Complexity: High (video encoding, CDN, bandwidth)

Verdict: ❌ Too complex for MVP, expensive ongoing costs

---

Option 2: Embedded Music Player (SIMPLE) ✅

What's needed:

• Just embed existing streaming links
• No hosting required
• No encoding needed
• Use existing platforms (YouTube Live, Twitch, Soundcloud, Spotify)

Estimated effort: 4-6 hours Ongoing costs: $0 Complexity: Low (just iframe embeds)

Verdict: ✅ Perfect for getting started!

---

SIMPLE PROPOSAL: Event Music Integration

Instead of building a complex streaming platform, we enhance existing events with music/stream embeds.

What Users See

On Event Detail Page (/event/:pubkey/:id)

┌────────────────────────────────────────────┐
│  🏁 Venice Beach Street Contest            │
│  📅 March 15, 2025 • 2:00 PM              │
│  📍 Venice Beach Skatepark                │
├────────────────────────────────────────────┤
│                                            │
│  🎵 LIVE MUSIC                            │
│  ┌──────────────────────────────────┐     │
│  │                                  │     │
│  │   [Embedded Spotify/YouTube]     │     │
│  │   DJ LowKey - Skate Mix Vol. 3   │     │
│  │                                  │     │
│  │   ▶️  🔊────── 🔁 ♡              │     │
│  │                                  │     │
│  └──────────────────────────────────┘     │
│                                            │
│  💬 Live Chat (42 messages)               │
│  [Show Chat] →                            │
│                                            │
│  📊 234 people interested                 │
│  ⚡ 12,450 sats raised                    │
│                                            │
└────────────────────────────────────────────┘

What It Supports

Music Platforms (Easy Embeds)

• Spotify: Playlists, albums, tracks
• YouTube: Live streams, videos
• SoundCloud: Mixes, tracks, playlists
• Mixcloud: DJ sets, radio shows
• Apple Music: Playlist embeds
• Bandcamp: Album players

Example Event Tags

{
  "kind": 31923,
  "tags": [
    ["d", "venice-contest-2025"],
    ["title", "Venice Beach Street Contest"],
    ["start", "1710518400"],
    ["g", "9q5ctr"],
    ["location", "Venice Beach Skatepark"],
    ["t", "skateboarding"],
    ["t", "contest"],
    
    // NEW: Music integration
    ["music", "spotify:playlist:37i9dQZF1DXcBWIGoYBM5M"],
    ["stream", "https://youtube.com/live/abc123xyz"],
    ["streaming", "https://twitch.tv/veniceskate"]
  ],
  "content": "Annual street skating contest..."
}

---

UI/UX Design Concept

Event Page with Music Player

┌─────────────────────────────────────────────┐
│  ← Back to Events                           │
├─────────────────────────────────────────────┤
│                                             │
│  🎸 VENICE BEACH STREET CONTEST 2025       │
│  📅 Sat, Mar 15 • 2:00 PM - 8:00 PM        │
│  📍 Venice Beach Skatepark, CA             │
│                                             │
│  🔴 LIVE NOW • 234 watching                │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │                                       │ │
│  │     📹 LIVE STREAM                    │ │
│  │                                       │ │
│  │     [YouTube Embed / Twitch]          │ │
│  │                                       │ │
│  │                                       │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │ 🎵 Event Soundtrack                   │ │
│  │                                       │ │
│  │ DJ LowKey - Skate Mix Vol. 3          │ │
│  │ [Spotify Player Embed]                │ │
│  │ ▶️  ⏸️  ⏭️  🔊───────── 2:34 / 45:12 │ │
│  │                                       │ │
│  └───────────────────────────────────────┘ │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  📊 EVENT STATS                            │
│  • 234 people interested                   │
│  • 12,450 sats raised                      │
│  • 42 comments                             │
│                                             │
│  ⚡ Support This Event                     │
│  [Zap 100] [Zap 500] [Zap 1000]           │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  📝 DESCRIPTION                            │
│  Annual street skating contest featuring   │
│  local legends and up-and-coming talent... │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│  💬 LIVE CHAT (42 messages)                │
│  ┌─────────────────────────────────────┐   │
│  │ Sarah: Let's go! 🔥                 │   │
│  │ Mike: That kickflip was insane      │   │
│  │ Alex: ⚡ just zapped 500 sats!      │   │
│  │ ...                                 │   │
│  └─────────────────────────────────────┘   │
│  [Send message...]                         │
│                                             │
└─────────────────────────────────────────────┘

---

Mobile Experience (Responsive)

Mobile Layout

┌─────────────────────────┐
│ ← Venice Contest        │
│ 🔴 LIVE • 234 watching  │
├─────────────────────────┤
│                         │
│  [Video Player]         │
│  [Full screen toggle]   │
│                         │
├─────────────────────────┤
│ Tabs:                   │
│ [Chat] [Info] [Music]   │
├─────────────────────────┤
│                         │
│ (Tab content)           │
│                         │
│                         │
│                         │
└─────────────────────────┘

Mobile Features:

• Swipe between tabs (Chat/Info/Music)
• Picture-in-picture for video
• Floating music player (sticks to bottom)
• Full-screen video mode
• Quick zap buttons

---

Implementation Phases

Phase 1: Basic Music Embeds (4-6 hours) ✅ RECOMMENDED

What to build:

1. Add music/streaming URL fields to event creation form
2. Display embedded players on event detail pages
3. Support Spotify, YouTube, SoundCloud
4. Simple iframe embeds (no API needed)

Benefits:

• ✅ Zero infrastructure costs
• ✅ Works immediately
• ✅ No technical complexity
• ✅ Enhances existing events

User flow:

Event Organizer:
1. Creates event
2. Adds Spotify playlist URL
3. Publishes event

Event Viewer:
1. Opens event page
2. Sees embedded music player
3. Listens while reading event details
4. Gets hyped for the event!

---

Phase 2: Live Chat (NIP-53) (1-2 days)

What to build:

1. Implement kind:1311 live chat messages
2. Add chat UI to event pages
3. Real-time updates via Nostr subscriptions
4. Moderation tools (for event organizers)

Benefits:

• Community interaction during events
• Real-time engagement
• No separate chat platform needed
• All on Nostr protocol

---

Phase 3: Live Streaming (2-3 weeks) - FUTURE

What to build:

1. Full NIP-53 implementation
2. Streaming server integration
3. Participant tracking
4. Status management (planned/live/ended)

Benefits:

• Professional live streaming
• Own the platform
• Full control

Challenges:

• Expensive infrastructure
• Complex setup
• Requires technical expertise
• Ongoing maintenance

---

Recommended Approach: START SIMPLE

Step 1: Music Embeds (This Weekend)

Add to event creation form:

┌────────────────────────────────┐
│ Music / Playlist (optional)    │
│ ┌────────────────────────────┐ │
│ │ Spotify/YouTube/SC URL     │ │
│ └────────────────────────────┘ │
│                                │
│ Examples:                      │
│ • spotify:playlist:abc123      │
│ • youtube.com/watch?v=xyz      │
│ • soundcloud.com/dj/mix        │
└────────────────────────────────┘

Display on event pages:

• Parse URL type (Spotify/YouTube/etc)
• Render appropriate embed
• Fallback to link if embed fails

Time: 4-6 hours Cost: $0 Complexity: Low

---

Step 2: Live Stream Links (Add to Step 1)

Same as music embeds, but for live streams:

Live Stream URL (optional)
┌────────────────────────────┐
│ YouTube/Twitch URL         │
└────────────────────────────┘

Examples:
• youtube.com/live/abc123
• twitch.tv/channel

Show "🔴 LIVE NOW" badge when stream is active

Time: +2 hours Cost: $0 Complexity: Low

---

Step 3: Live Chat (Next Week)

Implement NIP-53 live chat:

• Kind:1311 messages
• Real-time updates
• Chat UI component
• Moderation tools

Time: 1-2 days Cost: $0 (just relay bandwidth) Complexity: Medium

---

UI Component Breakdown

1. Music Player Card (New Component)

<Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border-purple-500/30">
  <CardHeader>
    <CardTitle className="flex items-center gap-2">
      🎵 Event Soundtrack
    </CardTitle>
  </CardHeader>
  <CardContent>
    {/* Spotify/YouTube/SoundCloud embed */}
    <iframe src={embedUrl} />
    
    <div className="text-xs text-muted-foreground mt-2">
      🎧 Curated by {organizerName}
    </div>
  </CardContent>
</Card>

2. Live Stream Player (New Component)

<Card className="bg-gradient-to-br from-red-500/10 to-orange-500/10 border-red-500/30">
  <CardHeader>
    <CardTitle className="flex items-center gap-2">
      🔴 LIVE STREAM {viewerCount > 0 && `• ${viewerCount} watching`}
    </CardTitle>
  </CardHeader>
  <CardContent>
    {/* YouTube Live / Twitch embed */}
    <div className="aspect-video">
      <iframe src={streamUrl} allowFullScreen />
    </div>
    
    <Button className="mt-3 w-full">
      <ExternalLink className="h-4 w-4 mr-2" />
      Open in Full Screen
    </Button>
  </CardContent>
</Card>

3. Live Chat Component (Phase 2)

<Card>
  <CardHeader>
    <CardTitle>💬 Live Chat</CardTitle>
  </CardHeader>
  <CardContent>
    <ScrollArea className="h-64">
      {messages.map(msg => (
        <div key={msg.id}>
          <Avatar /> {msg.author}: {msg.content}
        </div>
      ))}
    </ScrollArea>
    
    <Input placeholder="Send message..." />
  </CardContent>
</Card>

---

Event Creation Form Updates

Add Music/Stream Fields

// New fields in CreateEventPage.tsx

<div className="space-y-2">
  <Label>Music Playlist (Optional)</Label>
  <Input 
    placeholder="Spotify, YouTube, or SoundCloud URL"
    {...register('musicUrl')}
  />
  <p className="text-xs text-muted-foreground">
    Add a playlist or album to set the vibe
  </p>
</div>

<div className="space-y-2">
  <Label>Live Stream URL (Optional)</Label>
  <Input 
    placeholder="YouTube Live or Twitch URL"
    {...register('streamUrl')}
  />
  <p className="text-xs text-muted-foreground">
    Stream your event live to the community
  </p>
</div>

Event Tags Schema

{
  "kind": 31923,
  "tags": [
    ["d", "venice-contest-2025"],
    ["title", "Venice Beach Street Contest"],
    ["start", "1710518400"],
    
    // Music integration (NEW)
    ["music", "https://open.spotify.com/playlist/xyz"],
    ["music-title", "Contest Day Playlist"],
    
    // Live streaming (NEW)
    ["streaming", "https://youtube.com/live/abc123"],
    ["stream-title", "Live Finals Coverage"],
    ["status", "live"], // planned, live, ended
    
    // Existing tags
    ["t", "skateboarding"],
    ["t", "contest"]
  ]
}

---

Platform-Specific Embeds

Spotify

<iframe 
  src="https://open.spotify.com/embed/playlist/{id}"
  width="100%" 
  height="380" 
  frameBorder="0" 
  allow="encrypted-media"
/>

YouTube (Regular Video)

<iframe
  src="https://www.youtube.com/embed/{videoId}"
  width="100%"
  height="315"
  frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media"
  allowFullScreen
/>

YouTube Live

<iframe
  src="https://www.youtube.com/embed/{videoId}?autoplay=1"
  width="100%"
  height="315"
  frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media"
  allowFullScreen
/>

SoundCloud

<iframe
  width="100%"
  height="166"
  scrolling="no"
  frameBorder="no"
  src="https://w.soundcloud.com/player/?url={trackUrl}"
/>

Twitch

<iframe
  src="https://player.twitch.tv/?channel={channelName}&parent={yourDomain}"
  height="315"
  width="100%"
  allowFullScreen
/>

---

Visual Design Concepts

Option A: Sidebar Layout (Desktop)

┌──────────────────┬────────────────┐
│  Event Info      │  🎵 Music      │
│  📝 Description  │  [Player]      │
│  📸 Photos       │                │
│  💬 Comments     │  🔴 Stream     │
│                  │  [Video]       │
│                  │                │
│                  │  💬 Chat       │
│                  │  [Messages]    │
└──────────────────┴────────────────┘

Option B: Tabbed Layout (Mobile)

┌─────────────────────────┐
│ 🏁 Venice Contest       │
│ 🔴 LIVE • 234 watching  │
├─────────────────────────┤
│ Tabs:                   │
│ [Info] [Music] [Stream] │
├─────────────────────────┤
│                         │
│  Tab Content Here       │
│                         │
└─────────────────────────┘

Option C: Accordion Layout (Compact)

┌─────────────────────────────┐
│ Event Info (expanded)       │
│ • Title, date, location     │
│ • Description               │
│ • Photos                    │
└─────────────────────────────┘

┌─────────────────────────────┐
│ 🎵 Music Playlist ▼         │
│ [Spotify Embed]             │
└─────────────────────────────┘

┌─────────────────────────────┐
│ 🔴 Live Stream ▼            │
│ [YouTube Embed]             │
└─────────────────────────────┘

┌─────────────────────────────┐
│ 💬 Live Chat (42) ▼         │
│ [Chat messages]             │
└─────────────────────────────┘

---

Use Cases

1. Skate Contest with Live Music

Organizer: Creates contest event
         ↓
Adds: Spotify playlist (pre-contest hype)
      YouTube Live (live stream of finals)
         ↓
Event Day: People watch from home
           Listen to playlist while skating
           Chat with community
           Zap to support
         ↓
After: Recording stays on event page
       Playlist becomes "contest memories"

2. DIY Spot Session with Music

Organizer: Creates session event at local DIY
         ↓
Adds: SoundCloud DJ mix
         ↓
Skaters: Show up to session
         Someone plays the mix from their phone
         Everyone vibes to the same music
         Post clips tagged with the event

3. Shop Event with Live Stream

Shop: Announces product drop event
      Adds Twitch stream link
         ↓
Community: Watches unboxing live
           Chats in real-time
           Zaps to pre-order
         ↓
Shop: Engages with chat
      Announces winners
      Builds hype

---

Implementation Steps (Phase 1)

Step 1: Add Form Fields (2 hours)

• Update CreateEventPage.tsx
• Add musicUrl and streamUrl inputs
• Add validation (optional URL fields)

Step 2: Update Event Schema (1 hour)

• Add music/streaming tags to event publishing
• Parse URLs to extract embed codes
• Store in Nostr event tags

Step 3: Build Player Components (2-3 hours)

• MusicPlayer.tsx (Spotify/YouTube/SoundCloud)
• LiveStreamPlayer.tsx (YouTube Live/Twitch)
• Auto-detect platform from URL
• Responsive embeds

Step 4: Update Event Detail Page (1 hour)

• Add player components to sidebar
• Show/hide based on availability
• Loading states
• Error handling (invalid URLs)

Step 5: Testing & Polish (1 hour)

• Test all platforms
• Mobile responsiveness
• Loading states
• Error messages

Total Time: 6-8 hours

---

What Makes This Simple

✅ No streaming servers - Use existing platforms ✅ No encoding - Platforms handle it ✅ No bandwidth costs - Platforms cover it ✅ No technical knowledge - Just paste URLs ✅ Works immediately - No setup required ✅ Familiar platforms - Users know Spotify/YouTube ✅ Zero ongoing costs - Completely free

---

Future Enhancements (Don't Build Yet)

Later Features:

• Live chat (NIP-53 kind:1311)
• Participant tracking
• Stream status detection (is it actually live?)
• Playlist collaboration (community adds songs)
• Recording archives
• Stream analytics (views, engagement)

---

Real-World Benefits

For Event Organizers

• Add atmosphere with curated playlists
• Stream to remote viewers
• Build hype pre-event
• Preserve recordings post-event

For Community

• Remote participation (can't attend physically)
• Discover new music (curated by organizers)
• Relive events through recordings
• Feel connected to scene

For Shops

• Product launch streams
• Behind-the-scenes content
• Build audience
• Drive foot traffic

For the App

• Richer event experience
• More time spent in app
• Unique differentiator (vs other skate apps)
• Creates content library (past events with recordings)

---

Key Decisions

Should we use NIP-53 or just simple embeds?

Simple embeds (recommended):

• ✅ 6-8 hours to implement
• ✅ $0 ongoing costs
• ✅ Works today
• ✅ Users understand it
• ❌ Less "native" to Nostr

Full NIP-53 (future):

• ❌ 2-3 weeks to implement
• ❌ $50-200/month costs
• ❌ Complex infrastructure
• ❌ Steep learning curve
• ✅ Fully decentralized
• ✅ Native Nostr protocol

Verdict: Start with simple embeds, migrate to NIP-53 later if needed.

---

Bottom Line

What to Build Now

1. Music playlist embeds (Spotify/YouTube/SoundCloud)
2. Live stream embeds (YouTube Live/Twitch)
3. Simple URL fields on event creation
4. Player components on event detail pages

What NOT to Build Now

• ❌ Custom streaming server
• ❌ Video encoding pipeline
• ❌ Live chat (save for Phase 2)
• ❌ Complex infrastructure

Timeline

• This weekend: Music embeds working
• Next week: Live stream support
• Week 2: Live chat (if desired)
• Future: Full NIP-53 (if justified)

Cost

• Development: 6-8 hours
• Ongoing: $0

Impact

• 🎵 Events feel alive with music
• 📺 Remote community participation
• 🎉 Unique feature vs competitors
• 💰 Zero cost to operate

Simple. Effective. Ships fast.