How querysmith-sys/groupwatch works
GroupWatch is a browser-based watch-together app: a user creates or joins a room, shares a YouTube video, and watches it synchronized with other participants while chatting. The Next.js home page creates rooms through the Express API or routes users to a room; the watch page checks room existence before mounting the live client. The client and Socket.io server exchange room, chat, video-sharing, and host playback events. Room membership and host identity live in an in-memory map. README capabilities are included; some frontend event wiring is only partially sampled, so uncertain links are omitted.
Main entry points: WatchClient.tsx Watch interface · handlers.ts Socket event handlers · room.service.ts Room operations · page.tsx Room validation
Components 12
Web experience
- Create or join
group-watch/app/page.tsx - Room validation
group-watch/app/watch/[id]/page.tsx - Watch interface
group-watch/app/watch/[id]/WatchClient.tsx - Host state
group-watch/app/context/hostContext.tsx
Rooms and membership
- HTTP and socket server
group-watch-socket/server.ts - Room API
group-watch-socket/api/room.ts - Room operations
group-watch-socket/services/room.service.ts - In-memory rooms
group-watch-socket/services/room.service.ts
Live collaboration
- Socket event handlers
group-watch-socket/socket/handlers.ts
Video playback
- YouTube player
group-watch/app/watch/[id]/WatchClient.tsx
Other components
- Participants
- YouTube Iframe API
Connections 27
- Participants → Create or join: create or join
- Create or join → Room API: POST create
- Room API → Room operations: creates room
- Room operations → In-memory rooms: stores room
- Create or join → Room validation: navigates
- Participants → Room validation: opens room
- Room validation → Room API: checks room
- Room API → Room operations: checks existence
- Room validation → Watch interface: mounts if valid
- Watch interface → Host state: reads host state
- Watch interface → HTTP and socket server: opens socket
- HTTP and socket server → Socket event handlers: dispatches events
- Socket event handlers → Room operations: manages membership
- Room operations → In-memory rooms: reads and updates
- Watch interface → Socket event handlers: sends room events
- Socket event handlers → Watch interface: broadcasts room events
- Watch interface → Socket event handlers: sends chat
- Socket event handlers → Watch interface: broadcasts chat
- Watch interface → Socket event handlers: shares video
- Socket event handlers → Watch interface: broadcasts video
- Watch interface → YouTube Iframe API: loads API
- Watch interface → YouTube player: creates player
- YouTube player → Watch interface: reports playback
- Watch interface → Socket event handlers: sends playback action
- Socket event handlers → Room operations: checks host
- Socket event handlers → Watch interface: relays host action
- Participants → Watch interface: chats and watches