tommygaessler
commented
12 months ago Hey @berkeozdemir2016400246 , first off, thank you for sharing your feedback!
If I understand correctly, you are wanting to be able to control the height of the UI Toolkits, and or ensure responsiveness.
To speak to your concerns, a lot of consideration went in to how the UI Toolkit is sized. Based on feedback from our other Web SDKs, we wanted the UI Toolkit to be responsive out of the box, so we made the UI Toolkit width be 100% of the container you place it in. This allows you to place the UI Toolkit on your webpage, in a container area, and it will resize to fit nicely. The height will then be calculated based on a 16:9 ratio since we always render the videos in a 16:9 ratio on the canvas.
We do not plan to adjust the aspect ratio of the UI Toolkit, but you can set the width and height on your container element to size it how you would like. Just know the width takes priority since it's designed to fill 100% of the container.
We do not recommend injecting styles into the UI Toolkit as it may have unintended affects. We do plan on opening up some of the styling to developers in the future, but in terms of sizing, we want it to be easy to use, hence the 100% width of the container approach.
Here is an example of how I have rendered it in a container that looks nice on desktop and mobile browsers: https://videosdk.dev/uitoolkit/
That being said, if you find bugs around the responsiveness, we are happy to fix those.
Issue Title: UIToolkit extending its container
Description: Currently, UIToolkit occupies the entire available width of its parent container, and its height is determined by a predefined aspect ratio in UIToolkit's styles. This behavior leads to UIToolkit extending its parent container to unresponsive results. While a workaround exists by injecting styles into app-previewkit and app-videokit elements or their children, a more native solution is sought. It would be beneficial to either enable the changing of aspect ratios, set a maximum height or width, or ensure that UIToolkit functions responsively within its parent container. This issue is present in both app-previewkit and app-videokit.
Here are some images outlining my issue: https://imgur.com/a/69k4qIf
Steps to Reproduce: Adding some padding/other UI elements on the same page as the container so that containers aspect ratio is smaller than defined 16/9.
Operating System: MacOs v12.5.1 Browser/Environment (if applicable): - Screenshots or error messages (if applicable):