Fix Video Scaling Responsiveness #69
Merged
Conversation
This file contains 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
Raidakarim
approved these changes
Jun 30, 2023
amalnanavati
added a commit
that referenced
this pull request
Jul 12, 2023
* add to PR template * add new .md * add md link * undo * Update ResponsivenessTesting.md * update md file * initial code for responsiveness * landscape views * landscape changes * add arrow code * rearrange buttons * biteSelect * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * custom hook and landscape for video * review response * button width and height * add footer width * width * remove copied code in footer * add comments * variables of font size and wisth * change dependency * comma check done * biteSelection position fix * fix variables * add margin variable * footer width adjust * variable in-line * comments add * add format * add video in helper * callback add * useEffect for video and plateLocator lock * food image button fixes * acqusition button fix * bite done and seletion * skip button resize * skip fix * skip button space remove * mask * mask update * add * use percentage of size * mask updates * mask working now * some PR cooments responded * progress bar and text auto-sizing * make footer responsiveness and tested in all device * adjust header sizes in vw vh * add responsiveness changes * some PR response * PR responses * Implemented vertical centering (#66) * Implemented vertical centering * overlap fix * header fix * merged amals pr --------- Co-authored-by: Raida Karim <[email protected]> * add circle bar size * matching top bottom * small fix * footer fix * header fix * add phantom view * footer fix * Fixed circle bar size on RobotMotion page (#68) fixed circle bar size on RobotMotion page * responsiveness * add more * small changes * Fix Video Scaling Responsiveness (#69) fixed video scaling responsiveness * remove phantom view from footer and robotmotion * helper add * PR response * resizing * fix after test * add vw * lock fix * add comments * add height fix * height fix * use windoe size * useWindowSize and header fix * Fix iOS 100vh Bug & Other Responsiveness Bugs (#71) * Fixed header/footer height - Increased header/footer height in landscape - Made all header elements Nav.Link for consistent height * Fix RobotMotion - Remove all overrides of text font size from h1/h2/h3... These are already responsive. - Remove nested h1's, which is invalid DOM nesting * Fix RobotMotion Bug - Changing the screen height on resize introduced a bug where RobotMotion re-calls the action. The changes to Home.jsx address that. - Implements Raida's idea for a simple solution to the iOS '100vh' bug that uses existing helpers * Fix VideoFeed resizing bug * Fixed CircleProgressBar size in landscape * Address iOS orientation change bug * Remove unused package Div100vh * Lengthened the delay for window size due to iOS orientation change issue * Platelocator button height and live video font size increase and robotmotion fontsize modify * Fix footer font size --------- Co-authored-by: Raida Karim <[email protected]> --------- Co-authored-by: Amal Nanavati <[email protected]>
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.
This PR is a fix to an issue that was unable to be resolved in #60 . Specifically, #60 ended up with a bunch of hardcoded scale factors on pages with the robot's video stream, to attempt to make it consistently render properly. However, hardcoded scale factors is not a good code-writing style and is ripe for bugs. This PR addresses that by consistently adding views that take up the full specified width, and then computing the video stream size from those parent components.
Key insights:
widthandheightprops for the parent element must be set. Furthermore, a reference to the parent must be passed in to the component that is rendering the video.width: 100%,height: 100%to have the views themselves fill up the space.This PR was tested on the browser's version of the iPhone 12/13 Pro Max and the iPad iOs 14.7.1, in both portrait and landscape mode.