Validate resolution in UI

[leszko]

Note: Currently, the factor is hardcoded to 16 in the frontend, but after the "defaults' changes from @ryanontheinside we should take these values from the backend.

fix #194

[yondonfu]

I agree that with the comment that the pipeline should not automatically adjust the output resolution.

I think the UX can be a bit more intuitive here by immediately auto-adjusting the values instead of waiting until the stream starts:

1. Clicking +/- can move the value to the next valid value for height/width.
2. If the user directly inputs a value that is invalid "snap" it to the closest valid value

This way when the user starts the stream the values they see are the values that are used.

[yondonfu]

Can we also add validation in the pipeline to error out early if an invalid height/width are used? This would be useful to users that call the pipeline directly.

[leszko]

I agree that with the comment that the pipeline should not automatically adjust the output resolution.

I think the UX can be a bit more intuitive here by immediately auto-adjusting the values instead of waiting until the stream starts:

1. Clicking +/- can move the value to the next valid value for height/width.
2. If the user directly inputs a value that is invalid "snap" it to the closest valid value

This way when the user starts the stream the values they see are the values that are used.

We can change it, but I find it less intuitive TBH, because:

• You change the resolution, but you don't know why it has changed
• It's hard to type any number there, because every time you type the UI changes it for you.
  Look at the demo how it would work.

resolution2.mp4

Compare it to the previous demo I shared in which you're hinted what's wrong and what will happen.

resolution.mp4

[leszko]

Can we also add validation in the pipeline to error out early if an invalid height/width are used? This would be useful to users that call the pipeline directly.

Good idea, added.

[yondonfu]

LGTM