feat: add Live Listen support to iPod (Remote Control)

[ryokun6]

Summary

Adds Live Listen (listen-together) support to the iPod app, enabling real-time playback sync across different clients/instances. Previously this feature was only available in the Karaoke app.

Changes

Types

• Added listenSessionId to IpodInitialData in both src/apps/base/types.ts and src/types/appInitialData.ts

Route Registry

• Updated /listen/:sessionId route to respect ?app=ipod query param, allowing listen session links to open in iPod instead of always defaulting to Karaoke

iPod Logic (useIpodLogic.ts)

• Integrated useListenSync hook for real-time playback synchronization (track, play/pause, position drift correction)
• Added useListenSessionStore subscription for session state (DJ status, listener count, etc.)
• Added session management handlers: create, join, leave, pass DJ, send reactions
• Added listenSessionId handling in initial data and app update events

iPod Menu Bar (IpodMenuBar.tsx)

• Added Live Listen menu items to File menu: Start/Join (when not in session), Invite/End (when in session)

iPod App Component (IpodAppComponent.tsx)

• Added ListenSessionBadge for non-fullscreen session indicator
• Added ListenSessionToolbar with DJ controls, reactions, and share button in fullscreen
• Added ReactionOverlay for animated emoji reactions in fullscreen
• Added ListenSessionInvite dialog with QR code and share link
• Added JoinSessionDialog for browsing/joining active sessions

How It Works

1. Start a session: File > Start Live Listen (requires login via Chats)
2. Invite others: Share the generated link (includes ?app=ipod to open in iPod)
3. DJ controls: The DJ's playback state syncs to all listeners via Pusher
4. Listeners: Automatically sync track, play/pause, and position with soft/hard drift correction
5. Pass DJ: Transfer DJ control to another listener
6. Reactions: Send emoji reactions visible to all participants

Testing

• Build passes (bun run build)
• All unit tests pass (bun run test:unit - 89/89)

  

[ryos-deploy]

The preview deployment for ryos-dev is ready. 🟢

Open Preview | Open Build Logs | Open Application Logs

Last updated at: 2026-03-15 01:37:25 CET