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, 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 https://github.com/tiny-pilot/tinypilot/issues/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.
We had introduced these breakpoints in https://github.com/tiny-pilot/tinypilot/pull/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.
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.
Part of https://github.com/tiny-pilot/tinypilot/issues/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, 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 https://github.com/tiny-pilot/tinypilot/issues/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
<div>inindex.htmlwhich we technically don’t need anymore. I’ll clean that up in a later PR, to avoid a noisy whitespace diff here.page-contentCSS 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.