Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make for smooth vertical resizing of remote screen (#1583)
Part of #728. The vertical resizing behaviour of the remote screen is currently so that the screen element’s height appears to “jump” at certain steps due to [CSS breakpoints](https://github.com/tiny-pilot/tinypilot/blob/069cf2d9829a4fe2b8df33cb03b26c141c60593b/app/templates/custom-elements/remote-screen.html#L11-L33), while you resize the window vertically. This PR implements “smooth” and step-less vertical resizing, while maintaining a constant margin between remote screen and status-bar during that process. The breakpoint-less resizing is important for the “dedicated window” (popup) that we are about to implement in #728, where it would probably feel weird if the remote screen height jumped around the way it currently does, or if we wouldn’t be able to fill up the entire vertical space of the popup window due to the breakpoint setup. ## Demo: After https://github.com/tiny-pilot/tinypilot/assets/83721279/66758c7c-ce78-4f0a-8323-4990be47fe49 ## Demo: Before https://github.com/tiny-pilot/tinypilot/assets/83721279/f768b3c0-8b5b-44c3-8cbd-2ee724e46a02 ## Notes - We had introduced these breakpoints in #878 originally, as kind of “heuristic”/pragmatic approach for resizing the remote screen, without having the remote screen visually collide with the status bar. The breakpoints itself are arbitrary, and they don’t serve any other purpose except for facilitating the vertical screen size while resizing the window. - I discovered #1581 while testing this PR; so this behaviour is not a regression, but it’s currently broken on master. - This PR leaves a “naked” `<div>` in `index.html` which we technically don’t need anymore. I’ll clean that up in a later PR, to avoid a noisy whitespace diff here. - The `page-content` CSS class is orphaned, so I’ve removed it. I’ve tested on device with Firefox and Chrome, and I tried to check all imaginable scaling constellations of window sizes and aspect ratios, both with MJPEG and H.264, and both in full screen and regular window mode. The biggest risk of this PR would be that we accidentally mess with the mouse cursor positioning/alignment. It would be cool if you could double-check on device as well, with a real target screen, just so that we are safe. <a data-ca-tag href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1583"><img src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review on CodeApprove" /></a>
- Loading branch information