UI Redesign (#22)

* Rework UI into a new, responsive layout

* Send two streams (only one is currently downscaled)

photon-client/src/components/common/cv-image.vue

@@ -3,7 +3,6 @@
     id="CameraStream"
     :style="styleObject"
     :src="address"
-    crossorigin="Anonymous"
     alt=""
     @click="e => $emit('click', e)"
   >
@@ -13,19 +12,27 @@
     export default {
         name: "CvImage",
       // eslint-disable-next-line vue/require-prop-types
-        props: ['address', 'scale'],
+        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl'],
         data: () => {
             return {}
         },
         computed: {
             styleObject: {
                 get() {
-                    return {
-                        width: `${this.scale}%`,
-                        height: `${this.scale}%`,
-                        display: 'block',
-                        margin: 'auto'
+                    let ret = {
+                      "object-fit": "contain",
+                      "max-height": this.maxHeight,
+                      width: `${this.scale}%`,
+                      height: `${this.scale}%`,
+                    };
+
+                    if (this.$vuetify.breakpoint.xl) {
+                      ret["max-height"] = this.maxHeightXl;
+                    } else if (this.$vuetify.breakpoint.mdAndUp) {
+                      ret["max-height"] = this.maxHeightMd;
                     }
+
+                    return ret;
                 }
 
             }