✨ classicwebcam: Support configured aspect ratio on video

Also make sure we don't go beyond a 1:1 aspect ration on rotation.

Finally get rid of some CSS issues caused by a loss of flexbox mode
in deeper divs.

Implements #4837

src/octoprint/plugins/classicwebcam/static/js/classicwebcam.js

@@ -25,6 +25,14 @@ $(function () {
             }
         });
 
+        self.webcamClass = ko.pureComputed(function () {
+            if (self.settings.rotate90()) {
+                return "webcam_rotated " + self.webcamRatioClass();
+            } else {
+                return "webcam_unrotated " + self.webcamRatioClass();
+            }
+        });
+
         self.onBeforeBinding = function () {
             // Subscribe to rotation event to ensure we update calculations.
             // We need to wait for the CSS to be updated by KO, thus we use a timeout to
@@ -289,11 +297,10 @@ $(function () {
             // accommodate the rotation). The target is centered in the container and
             // rotated around its center, so after we manually resized the container
             // everything will layout nicely.
-            if (rotationContainer && player.videoWidth && player.videoHeight) {
-                // Calculate the height the video will have in the UI, based on the
-                // video width and the aspect ratio.
-                var aspectRatio = player.videoWidth / player.videoHeight;
-                var height = aspectRatio * rotationContainer.offsetWidth;
+            if (rotationContainer) {
+                // we'll go with an aspect ration of 1:1 for rotated videos, same as
+                // for mjpg streams
+                var height = rotationContainer.offsetWidth;
 
                 // Enforce the height on the rotation container and the rotation target.
                 // Width of the container will be 100%, height will be calculated

src/octoprint/plugins/classicwebcam/static/less/classicwebcam.less

@@ -1,3 +1,26 @@
+.classicwebcam_aspect_ratio_mixin {
+  aspect-ratio: 1;
+
+  &.ratio43 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.ratio169 {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.ratio1610 {
+    aspect-ratio: 16 / 10;
+  }
+}
+
+.classicwebcam_flexbox_mixin {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 #webcam_video_container {
   width: 100%;
   position: relative;
@@ -23,31 +46,30 @@
     height: 100%;
   }
 
-  .webcam_rotated {
+  .webcam_rotated,
+  .webcam_unrotated {
     position: relative;
-    width: 100%;
-    padding-bottom: 56.25%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
+    .classicwebcam_flexbox_mixin();
+    .classicwebcam_aspect_ratio_mixin();
 
+    .rotation_target {
+      .classicwebcam_flexbox_mixin();
+      div {
+        .classicwebcam_flexbox_mixin();
+      }
+    }
+  }
+
+  .webcam_rotated {
+    aspect-ratio: 1;
     .rotation_target {
       position: absolute;
       transform: rotate(-90deg);
-      width: 100%;
-
       div {
-        width: 100%;
         height: 100%;
       }
     }
   }
-
-  .webcam_unrotated {
-    position: relative;
-    width: 100%;
-  }
 }
 
 #webcam_img_container {
@@ -141,19 +163,7 @@
       width: 100%;
       pointer-events: none;
 
-      padding-bottom: 100%;
-
-      &.ratio43 {
-        padding-bottom: 75%;
-      }
-
-      &.ratio169 {
-        padding-bottom: 56.25%;
-      }
-
-      &.ratio1610 {
-        padding-bottom: 62.5%;
-      }
+      .classicwebcam_aspect_ratio_mixin();
 
       position: relative;
 

src/octoprint/plugins/classicwebcam/templates/classicwebcam_webcam.jinja2

@@ -13,7 +13,7 @@
                 <!-- /ko -->
             </div>
         </div>
-        <div data-bind="css: { webcam_rotated: settings.rotate90(), webcam_unrotated: !settings.rotate90() }">
+        <div data-bind="css: webcamClass">
             <div class="rotation_target">
                 <div data-bind="css: { flipH: settings.flipH(), flipV: settings.flipV() }">
                     <video id="webcam_webrtc" muted autoplay playsinline style="width: 100%" data-bind="visible: webcamWebRTCEnabled()"></video>