Gift Animation Fix – Next.js Livestream App

Stack: Next.js (App Router) + TypeScript, Supabase Realtime, LiveKit, Vercel. Mobile-first PWA. We have a livestreaming battle/cohost platform. Viewers can send gifts to streamers during cohost/battle sessions (split-screen, two streamers side by side). Gift animations are canvas-based video overlays (chroma key / green key) that play over the stream. **The problem:** Mobile browsers block video autoplay with audio unless the user has recently interacted with the page. Passive viewers miss gift animations entirely. In cohost/battle mode, gifts can be sent to either streamer independently. The animation needs to play on the correct half of the screen (left or right) depending on which streamer received the gift — not just fullscreen. **What we need:** 1. Gift video animations play reliably for all viewers on mobile browsers regardless of interaction state 2. In cohost/battle split-screen, animations render on the correct side of the screen (the side of the streamer who received the gift) 3. Audio plays correctly for all viewers The existing animation components are ChromaKeyVideo, GreenKeyVideo, and GreenKeyVideoWide — all canvas-based. Private GitHub repo access will be provided. Please share relevant experience with mobile browser media autoplay and LiveKit.