feat: adaptive floating video dimensions #1969
Merged
Conversation
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
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements adaptive floating video dimensions based on the Android AOSP PiP mode algorithm, replacing the previous hardcoded dimensions. The new implementation calculates dimensions dynamically based on video aspect ratio and container width (23% of container width), making the floating video appear appropriately sized across different devices including iPads.
Key Changes:
- Removed hardcoded floating video dimensions in favor of aspect-ratio-based calculations
- Made
useTrackDimensionshook accept optional participant parameter - Created new
useFloatingVideoDimensionshook implementing AOSP PiP algorithm
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| sample-apps/react-native/dogfood/src/theme.ts | Removed custom hardcoded floating video dimensions from dogfood app theme |
| packages/react-native-sdk/src/hooks/useTrackDimensions.ts | Made participant parameter optional to support undefined participants |
| packages/react-native-sdk/src/constants/index.ts | Removed hardcoded FLOATING_VIDEO_VIEW_STYLE constant |
| packages/react-native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx | Added new hook implementing adaptive dimensions based on video aspect ratio |
| packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx | Integrated adaptive dimensions and conditional rendering based on calculated dimensions |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
...native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx
Outdated
Show resolved
Hide resolved
oliverlaz
approved these changes
Oct 24, 2025
santhoshvai
added a commit
that referenced
this pull request
Nov 10, 2025
### 💡 Overview Follow up to #1969 The current algorithm only handles portrait local video on floating view. Which is default on mobile. But we can change it to landscape video from web for example. Landscape video needs more width. And this PR fixes it. Again, based on Android AOSP algorithm here. Additionally, we use screen dimensions to compute the base dimensions now. Because, say if integrator wants to constrain the CallContent to small view, the floating dimensions can become extremely small. Using screen dimensions make it independent of that. This is consistent with Android PiP mode also. | Portrait video | Landscape video | | ------------- | ------------- | | <img width="1080" height="2400" alt="Screenshot_20251106-114806" src="https://github.com/user-attachments/assets/fbe5845d-d962-4f95-9609-a9da3856413e" /> | <img width="1080" height="2400" alt="Screenshot_20251106-114758" src="https://github.com/user-attachments/assets/5ee4143f-f29d-4031-9ae5-b5ae4559fbf2" /> | Ticket: https://linear.app/stream/issue/RN-302
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
💡 Overview
Currently our floating video dimensions are hardcoded. This looks fine in a iPhone Xs phone. Anything taller or wider, it looks small.
Our dogfood app had a custom implementation based on window dimensions so we didnt use it. But this is also flawed, as this didnt adapt to portrait to landscape change.
📝 Implementation notes
I implemented the Android AOSP PiP mode algorithm. Which is based on the video dimensions.
Now it works well on larger devices like iPad too. Looks similar to Facetime behaviour now. If the video changes to landscape, will adapt to that as well now.