Added visual representation of the room scale

src/renderer/style.less

@@ -1585,6 +1585,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       margin: 4px;
       font-weight: 500;
     }
+
     .handle {
       margin: 4px;
       opacity: 0.7;
@@ -1644,7 +1645,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       overflow-y: overlay;
     }
 
-    .modal-footer {}
+    .modal-footer {
+    }
   }
 }
 
@@ -1656,6 +1658,42 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     max-width: 800px;
     overflow: hidden;
 
+    .visual-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .visual {
+      position: relative;
+      height: 250px;
+      width: 300px;
+      display: inline-flex;
+      align-items: flex-end;
+      justify-content: center;
+      filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
+      margin: 0 auto;
+
+      .face {
+        position: absolute;
+        width: calc(12px * 6);
+        height: calc(12px * 6);
+        border-radius: 6px;
+        transform: rotateX(60deg) rotateZ(-45deg);
+        transition: transform 0.2s var(--appleEase);
+      }
+
+      .face:nth-of-type(1) {
+        background: linear-gradient(45deg, #28223a, #1f2038);
+      }
+
+      .face:nth-of-type(2) {
+        background: linear-gradient(45deg, #7d53ad, #5763ff);
+        transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
+        opacity: 0.7;
+      }
+    }
+
     .modal-header {
       padding: 16px;
       position: relative;
@@ -1754,7 +1792,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         margin-right: 6px;
       }
 
-      .name {}
+      .name {
+      }
 
       &:hover {
         background: var(--selected);
@@ -2278,13 +2317,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &.no-shadow {
     box-shadow: none;
+
     &::after {
       display: none;
     }
   }
+
   &.subtle-shadow {
     box-shadow: var(--mediaItemShadow-ShadowSubtle);
   }
+
   &.shadow {
     box-shadow: var(--mediaItemShadow-Shadow);
   }
@@ -2636,7 +2678,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 
-
 /* mediaitem-square-large */
 .cd-mediaitem-square-large {
   width: 190px;

src/renderer/views/components/spatial-properties.ejs

@@ -10,30 +10,31 @@
                     <div class="col">
                         <label>
                             Width
-                            <input type="number" min="0" @change="setRoom()"
+                            <input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
                                    v-model="app.cfg.audio.spatial_properties.room_dimensions.width" step="1"/>
                         </label>
-                    </div>
-                    <div class="col">
                         <label>
                             Height
-                            <input type="number" min="0" @change="setRoom()"
+                            <input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
                                    v-model="app.cfg.audio.spatial_properties.room_dimensions.height" step="1"/>
                         </label>
-                    </div>
-                    <div class="col">
                         <label>
                             Depth
-                            <input type="number" min="0" @change="setRoom()"
+                            <input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
                                    v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/>
                         </label>
-                    </div>
+                        <label v-if="!app.cfg.audio.normalization">
-                    <div class="col">
-                        <label>
                             Gain
-                            <input type="number" min="0" @change="setRoom()" v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
+                            <input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
+                                   v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
                         </label>
                     </div>
+                    <div class="col visual-container">
+                        <div class="visual">
+                            <div class="face" :style="[faceStyle()]"></div>
+                            <div class="face" :style="[faceStyle(), topFaceStyle()]"></div>
+                        </div>
+                    </div>
                 </div>
                 <div class="row">
                     <div class="col"></div>
@@ -132,7 +133,8 @@
                     'wood-ceiling',
                     'wood-panel',
                     'uniform'
-                ]
+                ],
+                visualMultiplier: 4
             }
         },
         props: {},
@@ -140,10 +142,25 @@
 
         },
         methods: {
+            topFaceStyle() {
+                let style = {
+                    transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.app.cfg.audio.spatial_properties.room_dimensions.height * this.visualMultiplier}px)`
+                }
+                return style
+            },
+            faceStyle() {
+                let style = {
+                    width: `${this.app.cfg.audio.spatial_properties.room_dimensions.width * this.visualMultiplier}px`,
+                    height: `${this.app.cfg.audio.spatial_properties.room_dimensions.depth * this.visualMultiplier}px`,
+                }
+                return style
+            },
             setRoom() {
                 window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials);
+                if(!this.app.cfg.audio.normalization) {
                     window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
                 }
             }
+        }
     });
 </script>