crowbartools
[Enhancement] Improve UX of "Force 16:9 Ratio" toggle
ebiggz: We need to improve the UX of the Force 16:9 Ratio toggle to reduce confusion around its functionality.
Proposed changes:
- Change copy of toggle to: "Lock width/height to 16:9"
- Add tooltip to toggle with text: "When checked, editing one of the width/height fields below will cause the other to automatically update to maintain a 16:9 ratio."
- When opening an existing effect, precheck this toggle if the currently saved width/height values are in a 16:9 ratio.
Original Bug Report:
Is there an existing issue for this?
- [X] I have searched the existing issues
Current Behavior
Related to #1788
When attempting to remove the "Enforce 16:9 Ratio" setting on a video effect, the setting does not get correctly saved. Re-opening the video effect shows the checkbox as checked despite it being saved previously as unchecked.
Videos will play at a stretched 16:9 ratio regardless of the setting being changed.
Expected Behavior
The checkbox should correctly save its state and video height / width should be correctly respected.
Steps To Reproduce
- Create a video effect
- Add a local video file to play
- Set "Force 16:9 Ratio" to false
- Save the edit
- Edit the effect
The Force 16:9 checkbox will be set to true
Version
5.60.1
What operating system are you using Firebot on?
Windows 10
Relevant log output
No response
Contact Details (Optional)
ryann#9405
Hi @ryanrixxh - thanks for the bug report!
The force 16:9 toggle is a UI-only option that ensures the values inputted into the width / height field of the video effect are aways the correct ratio as a guide. For example, when it's checked, if you type in "1920" into the width field, the height field will get automatically updated to "1080". The effect itself only looks at the width and height values.
Seeing as this has come up a couple times now, it's clear the UX for the toggle is sub-optimal and needs clarification. We'll definitely look into this!
@ebiggz Thanks for the reply. I understand the intention of the setting more clearly. However I do still believe there is an issue with the videos always playing at the same aspect ratio regardless of whatever the width and height are being set to. The videos always play stretched even if set to square. Similar to the issue I referenced before #1788
I'll look into this more, try and replicate and provide an update on the issue with further detail.
@ebiggz
I took a look into this in further detail.
It seems that the values for width and height do change, but the effect will preserve the 16:9 aspect ratio regardless of whether or not the width and height values obey this value. The input that is respected appears to be width, but im unsure considering the strange results.
To test I set the video height and width to both 500 and the video appeared to maintain the pixel height of 500 but stretched beyond 500 width to preserve aspect ratio.
In another test, I was able to replicate the issue again by attempting to set the same video to width 500 (as before) and setting the height to 2000. The result should be a warped, portrait looking video but instead the video remained the exact same size as it was before.
Finally, I kept width the same and changed height to 20 (500, 20) and the video was now a lot smaller (since im assuming width had adjusted to preserve the ratio).
Took a brief look at the code (very brief so if I'm way off on this I apologize). Would it have anything to do with the fact that $scope.effect.height and $scope.effect.width are set to being empty if forceRatio is false? Unsure of the behaviour after the fact if both are passed through as empty strings.
https://github.com/crowbartools/Firebot/blob/5e3f906993a53c358058703029d33465b6996374/src/backend/effects/builtin/play-video.js#L279
Hopefully this is somewhat helpful. Thanks for the support :)