feat: interactive screen share — drag, resize, minimize + camera PiP#23
Open
bettercallzaal wants to merge 1 commit intoSongjamSpace:mainfrom
Open
feat: interactive screen share — drag, resize, minimize + camera PiP#23bettercallzaal wants to merge 1 commit intoSongjamSpace:mainfrom
bettercallzaal wants to merge 1 commit intoSongjamSpace:mainfrom
Conversation
Replace the static screen share display with an interactive overlay that gives viewers full control over how they watch. New component: InteractiveMediaOverlay.tsx (315 lines, zero dependencies) 3 view modes: - MAXIMIZED: inline 16:9 block above controls (default when sharing starts) - FLOATING: draggable + resizable window, repositioned by dragging the header - MINIMIZED: small blue pill at bottom-right, click to restore Camera picture-in-picture: - Host/speakers can toggle camera from the overlay header or MiniSpaceBanner - Camera renders as a small draggable PiP window inside the screen share - Uses hmsActions.setLocalVideoEnabled() + attachVideo() for the local track - Camera PiP can be repositioned independently within the screen share view Controls in the header bar: - Camera toggle (green = on) - Float button (switch to draggable mode) - Maximize button (back to inline mode) - Minimize button (collapse to pill) - LIVE badge Implementation: - Pure mouse/touch event handlers (no external drag library) - Clamps position to viewport boundaries - Resize handle in bottom-right corner (floating mode) - Touch-compatible for mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
@bettercallzaal is attempting to deploy a commit to the adamnusic's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Screen share display is static — viewers can't move it, resize it, or minimize it. No way to show your camera alongside the screen share. For music producers sharing DAWs or artists doing visual demos, viewers need control over how they watch.
Solution
New
InteractiveMediaOverlaycomponent (315 lines, zero new dependencies) replaces the static video block.3 View Modes
Camera Picture-in-Picture
hmsActions.setLocalVideoEnabled()+attachVideo()for the local video trackHeader Controls
Camera toggle | Float/Maximize toggle | Minimize | LIVE badge
Technical
setLocalVideoEnabled(false))Files Changed (3 files, 377 lines)
src/components/InteractiveMediaOverlay.tsxsrc/components/LiveAudioRoom.tsxsrc/components/MiniSpaceBanner.tsxTest plan
🤖 Generated with Claude Code — contributed by @bettercallzaal