[Question/Feature] - Getting the V10 A/V windows smaller and/or 4:3 mode.

[tehguitarist]

This is probably more of a core thing but figured it couldn't hurt (I opened a feature request, but I saw the feedback thread and looks like they may have already considered and then disregarded, it got bumped off the last two patches already).
I was curious, given you've done so much work with it, is there any easy way to change the minimum window size for webcams? They're a good chunk larger than in v9, and I actually really love the left dock for space, but not so much on the having to scroll up and down to see everyone on a 1080p monitor.

I suppose next to that, is it possible to implement a 4:3 mode (as opposed to 16:9 aspect ratio) to centre cut the webcams, as usually, you don't need the extra width provided.

[bekriebel]

I may look into this, but it may not work well based on the new layout. I'll try some quick fixes, but if it is going to require significant rework of the UI, I will instead continue focusing on building a whole new UI that can be enabled and should be more flexible. I've already started work on this, but it will take some time.

As for 4:3, the cameras are already set to that. 16:9 would be even wider than they are already.

[tehguitarist]

Appreciate the response. All good either which way, and thanks for continuing to work on the module, definitely a great enhancement.

[tehguitarist]

Just in case this is useful for anyone else, I'm using the Custom CSS module (though you could edit the style.css file) to add/change these two variables:

div#camera-views {
--av-width: 180px;
}

div#camera-views .user-controls {
padding: 2px;
}

This reduces the minimum width by 60px and to avoid the control bar down the bottom stacking, it reduces the padding on that by 2px. I haven't found any negative side effects so far. This should let 7-8 videos all fit. You could probably also raise the av-width up to 185 or so, and leave the padding where it is, and still get a lot more space (for less!).

[bekriebel]

div#camera-views {\n--av-width: 180px;\n}\n\ndiv#camera-views .user-controls {\npadding: 2px;

Fwiw, I tried something like this as a quick fix for the module. It works great for the cams on the left or right, but for me it caused a lot of control placement issues with the cams on the top or bottom.

[tehguitarist]

Ahhh good point, I'll keep experimenting and see if I can come up with something using some conditional logic. My JS knowledge is pretty limited, but as before, it's hardly a critical thing, just an interesting experiment.

[bekriebel]

Ahhh good point, I'll keep experimenting and see if I can come up with something using some conditional logic. My JS knowledge is pretty limited, but as before, it's hardly a critical thing, just an interesting experiment.

If you're able to find a set of CSS formatting that works well, I can pretty easily incorporate it into my code. I sunk a couple of hours into trying various things and could never get the top/bottom positions to work correctly with the controls. I'm not great with CSS, though :-)

For now, I decided to scrap it since I want to build my own UI for A/V eventually anyway.

[tehguitarist]

Ha, I won't hold my breath then. See this is why I wanted to avoid web programming and stay in the back end and desktop world. Gotta learn what you need though eh? I'll let you know, but the Custom CSS module does the trick in a pinch at least.
I'm a novice as it is anyway.

[tehguitarist]

OK! Progress! So the below code works really nicely for bottom/top views, but there needs to be some conditional logic to detect if the bar is on the sides or bottom (should be able to probe user settings I think, though there are a couple of places that var shows up). Something like a

if (camera-view.app camera-position-top OR camera-view.app camera-position-bottom) { div#camera-views .user-controls { width: 3.5vw; }

in rough pseudo code. Time permitting I'll see if I can work out a PR, but web is NOT something I've worked with much ha.

/* Custom CSS */
// Set new minimum width
div#camera-views {
  --av-width: 180px;
}

// Reduce padding for the icons so it still looks ok, but means you can squeeze a bit more space out
div#camera-views .user-controls {
  padding: 2px;
  /* un-comment out the below if using the top/bottom location globally, or add to user 
      specific section of the Custom CSS module  using the above div */
  // this pushes the user-control div to the left when docked to the bottom
  // width: 3.5vw;
}

// the original 240px was hardcoded in the minmax function, so just moved it to the variable instead.
div#camera-views.camera-position-right .camera-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--av-width), 1fr));
}

As before, hardly important, just thought I'd pass it along. There's probably a better solution, maybe I should hop in the League of Foundry Developers discord, it's just finding a way to edit the CSS so that the left side of the control bar pushes out to the left when more icons need to get added rather than pushing out to the right (and off the window). Will update if I get some more answers!