Smart layout (et al) presumes screen sharing will always use 100%
width of the media area. That causes cameras to always be positioned on
top, which is not always the optimal position depending on the viewport
and stream aspect ratio/resolution - so space is wasted.
This commit uses the actual screen sharing video size as provided by
HTMLVideo's videoWidth/videoHeight properties. The calculation uses the
same logic as the one used for presentation/slides, which should make it
a bit familiar.
There's also a handler for HTMLVideo's `resize` event for those browsers
that support it - which enables handling of variable-sized screen
sharing streams. That handler is debounced at 500 ms to prevent
excessive CPU use.
Extra testing is needed with the widest range possible of
browsers/environments and feature combinations.
Only smart layout takes screen sharing/external video states in account
when populating its initial state. The others don't, and that causes
some weird issues when switching back-and-forth between layout types due
to their input states becoming inconsistent - ie having an active screen
sharing and transitioning from Smart -> Custom would mark it as false
(due to its absence from the initial state) and pollute its state for
subsequent layouts.
This commit guarantees those features are taken into account when
populating initial input states for Focus On*/Custom layouts.
removing border and implementing box-shadow
adding transparent border
passing styles to common buttons
adding secundary color to component
updating color components
Adds isResizing property to LayoutMeetings collection.
Moves the point where the last camera dock size is stored from webcam
component to custom layout component, since it is the only one with
this feature.
Fixes camera dock sudden increase when moving its position in custom layout.
Uses the last camera dock size stored for that dock position, if not,
make it default size.
Add custom layout svgs
If a custom style is set via bbb_custom_style_url or settings.yml,
the svgs applied will be the ones inside the /images/layouts/customStyle/ folder
Fixes an issue when the selected layout would not stay "active" when
another object was focused.
Now the selected layout always appears with a border, even if it is
the first time the modal is opened.
