okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added visual representation of the room scale

Browse source
This commit is contained in:
booploops 2021-12-30 02:21:27 -08:00
parent 9ce6dc8fd3
commit d5c393c071
2 changed files with 141 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

181
src/renderer/style.less
View file

@ -340,7 +340,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
.app-sidebar-button>.sidebar-user-icon { .app-sidebar-button > .sidebar-user-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 100%; border-radius: 100%;
@ -351,18 +351,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-size: contain; background-size: contain;
} }
.app-sidebar-button>.sidebar-user-text { .app-sidebar-button > .sidebar-user-text {
width: 100%; width: 100%;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
flex-direction: column; flex-direction: column;
} }
.app-sidebar-button>.sidebar-user-text .fullname { .app-sidebar-button > .sidebar-user-text .fullname {
text-align: left; text-align: left;
} }
.app-sidebar-button>.sidebar-user-text .handle-text { .app-sidebar-button > .sidebar-user-text .handle-text {
font-size: 12px; font-size: 12px;
opacity: 0.7; opacity: 0.7;
text-align: left; text-align: left;
@ -650,25 +650,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
transition: all var(--appleTransition); transition: all var(--appleTransition);
} }
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:hover { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px); background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2); transform: scale(1.2);
} }
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:active { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px); background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1); transform: scale(1);
} }
.app-chrome .app-chrome-item.volume>input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
width: 100%; width: 100%;
} }
.app-chrome .app-chrome-item.volume>input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
height: 4px; height: 4px;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
@ -677,7 +677,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
height: 14px; height: 14px;
width: 14px; width: 14px;
@ -687,7 +687,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
} }
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-runnable-track { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
@ -703,7 +703,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item>.app-title { .app-chrome .app-chrome-item > .app-title {
width: 100px; width: 100px;
font-size: 13px; font-size: 13px;
background: url("./logotmp.png"); background: url("./logotmp.png");
@ -717,23 +717,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.app-chrome .app-chrome-item>.window-controls { .app-chrome .app-chrome-item > .window-controls {
width: 138px; width: 138px;
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
display: flex; display: flex;
} }
.app-chrome .app-chrome-item>.window-controls>div { .app-chrome .app-chrome-item > .window-controls > div {
height: 100%; height: 100%;
width: 32px; width: 32px;
} }
.app-chrome .app-chrome-item>.window-controls>div:hover { .app-chrome .app-chrome-item > .window-controls > div:hover {
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
} }
.app-chrome .app-chrome-item>.window-controls>div.close { .app-chrome .app-chrome-item > .window-controls > div.close {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: var(--gfx-closeBtn); background-image: var(--gfx-closeBtn);
@ -746,7 +746,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
.app-chrome .app-chrome-item>.window-controls>div.minmax { .app-chrome .app-chrome-item > .window-controls > div.minmax {
background-image: var(--gfx-maxBtn); background-image: var(--gfx-maxBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -755,11 +755,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item>.window-controls>div.minmax.restore { .app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
background-image: var(--gfx-restoreBtn); background-image: var(--gfx-restoreBtn);
} }
.app-chrome .app-chrome-item>.window-controls>div.minimize { .app-chrome .app-chrome-item > .window-controls > div.minimize {
background-image: var(--gfx-minBtn); background-image: var(--gfx-minBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -777,14 +777,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-right: 1px solid rgb(200 200 200 / 8%); border-right: 1px solid rgb(200 200 200 / 8%);
} }
.app-chrome .app-chrome-item>.app-playback-controls { .app-chrome .app-chrome-item > .app-playback-controls {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
width: 100%; width: 100%;
} }
.app-chrome .app-chrome-item>.app-playback-controls .song-name { .app-chrome .app-chrome-item > .app-playback-controls .song-name {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
@ -793,7 +793,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
overflow: hidden; overflow: hidden;
} }
.app-chrome .app-chrome-item>.app-playback-controls .song-duration p { .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
height: 1.2em; height: 1.2em;
@ -802,7 +802,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin: 0 0 0.5em; margin: 0 0 0.5em;
} }
.app-chrome .app-chrome-item>.app-playback-controls .song-artist { .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
@ -813,7 +813,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
/* animation: marquee 10s linear infinite; */ /* animation: marquee 10s linear infinite; */
} }
.app-chrome .app-chrome-item>.app-playback-controls .song-progress { .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
@bgColor: transparent; @bgColor: transparent;
//height: 16px; //height: 16px;
position: absolute; position: absolute;
@ -822,7 +822,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background: @bgColor; background: @bgColor;
&:hover { &:hover {
>input[type=range] { > input[type=range] {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
@ -831,7 +831,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
>input[type=range] { > input[type=range] {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 4px; height: 4px;
@ -871,7 +871,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
.app-chrome .app-chrome-item>.app-playback-controls .artwork { .app-chrome .app-chrome-item > .app-playback-controls .artwork {
width: 42px; width: 42px;
height: 42px; height: 42px;
background-image: var(--artwork); background-image: var(--artwork);
@ -885,7 +885,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
} }
.app-chrome .app-chrome-item>.app-playback-controls .actions { .app-chrome .app-chrome-item > .app-playback-controls .actions {
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 2px; border-radius: 2px;
@ -897,7 +897,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
filter: contrast(0.8); filter: contrast(0.8);
} }
.app-chrome .app-chrome-item>.app-playback-controls .playback-info { .app-chrome .app-chrome-item > .app-playback-controls .playback-info {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -906,7 +906,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: relative; position: relative;
} }
.app-chrome .app-chrome-item>.app-playback-controls .playback-info>div { .app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
width: 100%; width: 100%;
} }
@ -1476,7 +1476,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.lyric-line.active .lyricWaiting>div { .lyric-line.active .lyricWaiting > div {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: white; background: white;
@ -1585,6 +1585,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 4px; margin: 4px;
font-weight: 500; font-weight: 500;
} }
.handle { .handle {
margin: 4px; margin: 4px;
opacity: 0.7; opacity: 0.7;
@ -1644,7 +1645,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-y: overlay; overflow-y: overlay;
} }
.modal-footer {} .modal-footer {
}
} }
} }
@ -1656,6 +1658,42 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
max-width: 800px; max-width: 800px;
overflow: hidden; 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 { .modal-header {
padding: 16px; padding: 16px;
position: relative; position: relative;
@ -1754,7 +1792,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-right: 6px; margin-right: 6px;
} }
.name {} .name {
}
&:hover { &:hover {
background: var(--selected); background: var(--selected);
@ -1811,7 +1850,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transition: transform 0s var(--appleEase); transition: transform 0s var(--appleEase);
} }
>svg { > svg {
width: 8px; width: 8px;
pointer-events: none; pointer-events: none;
} }
@ -1819,7 +1858,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover { &:hover {
background: var(--selected); background: var(--selected);
>svg { > svg {
color: rgba(200, 200, 200, 1.0); color: rgba(200, 200, 200, 1.0);
} }
} }
@ -1843,7 +1882,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
cursor: pointer; cursor: pointer;
} }
.reload-btn>svg { .reload-btn > svg {
height: 50%; height: 50%;
color: #eee; color: #eee;
} }
@ -1869,7 +1908,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
flex-flow: wrap; flex-flow: wrap;
justify-content: center; justify-content: center;
>.cd-mediaitem-square { > .cd-mediaitem-square {
width: 220px; width: 220px;
height: 260px; height: 260px;
display: inline-flex; display: inline-flex;
@ -2023,7 +2062,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
appearance: none; appearance: none;
box-shadow: var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
>svg { > svg {
height: 50%; height: 50%;
color: #eee; color: #eee;
pointer-events: none; pointer-events: none;
@ -2138,7 +2177,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: var(--selected-click); background: var(--selected-click);
} }
>svg { > svg {
width: 70%; width: 70%;
} }
} }
@ -2278,13 +2317,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.no-shadow { &.no-shadow {
box-shadow: none; box-shadow: none;
&::after { &::after {
display: none; display: none;
} }
} }
&.subtle-shadow { &.subtle-shadow {
box-shadow: var(--mediaItemShadow-ShadowSubtle); box-shadow: var(--mediaItemShadow-ShadowSubtle);
} }
&.shadow { &.shadow {
box-shadow: var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
} }
@ -2613,7 +2655,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 12px; font-size: 12px;
} }
>.cd-mediaitem-square-large-overlay { > .cd-mediaitem-square-large-overlay {
z-index: 3; z-index: 3;
&:hover { &:hover {
@ -2621,11 +2663,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
} }
+.cd-mediaitem-square-large-overlay { + .cd-mediaitem-square-large-overlay {
pointer-events: none; pointer-events: none;
} }
&:hover+.cd-mediaitem-square-large-overlay { &:hover + .cd-mediaitem-square-large-overlay {
opacity: 1; opacity: 1;
} }
@ -2636,7 +2678,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
/* mediaitem-square-large */ /* mediaitem-square-large */
.cd-mediaitem-square-large { .cd-mediaitem-square-large {
width: 190px; width: 190px;
@ -2651,7 +2692,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
>* { > * {
z-index: inherit; z-index: inherit;
} }
} }
@ -2681,25 +2722,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.cd-mediaitem-square-large-overlay>* { .cd-mediaitem-square-large-overlay > * {
pointer-events: auto; pointer-events: auto;
} }
.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay { .cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
z-index: 3; z-index: 3;
} }
.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay:hover { .cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
opacity: 1; opacity: 1;
} }
.cd-mediaitem-square-large+.cd-mediaitem-square-large-overlay { .cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
pointer-events: none; pointer-events: none;
} }
.cd-mediaitem-square-large:hover+.cd-mediaitem-square-large-overlay { .cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
opacity: 1; opacity: 1;
} }
@ -2736,7 +2777,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
>* { > * {
z-index: inherit; z-index: inherit;
} }
} }
@ -2766,25 +2807,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.cd-mediaitem-mvview-overlay>* { .cd-mediaitem-mvview-overlay > * {
pointer-events: auto; pointer-events: auto;
} }
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay { .cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay {
z-index: 3; z-index: 3;
} }
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover { .cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover {
opacity: 1; opacity: 1;
} }
.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay { .cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay {
pointer-events: none; pointer-events: none;
} }
.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay { .cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay {
opacity: 1; opacity: 1;
} }
@ -2837,8 +2878,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
} }
>.play-btn, > .play-btn,
>.menu-btn { > .menu-btn {
opacity: 0; opacity: 0;
appearance: none; appearance: none;
padding: 0px; padding: 0px;
@ -2852,14 +2893,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transition: opacity 0.1s var(--appleEase); transition: opacity 0.1s var(--appleEase);
} }
>.play-btn { > .play-btn {
position: absolute; position: absolute;
bottom: 14px; bottom: 14px;
left: 14px; left: 14px;
z-index: 2; z-index: 2;
} }
>.menu-btn { > .menu-btn {
position: absolute; position: absolute;
bottom: 14px; bottom: 14px;
right: 14px; right: 14px;
@ -2868,8 +2909,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover { &:hover {
>.play-btn, > .play-btn,
>.menu-btn { > .menu-btn {
opacity: 1; opacity: 1;
} }
} }
@ -2919,7 +2960,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
/* mediaitem-square */ /* mediaitem-square */
.albums-square-containeru>*>.cd-mediaitem-square { .albums-square-containeru > * > .cd-mediaitem-square {
--frame: max(220px, 15vw); --frame: max(220px, 15vw);
width: var(--frame); width: var(--frame);
height: calc(var(--frame) * 13 / 11); height: calc(var(--frame) * 13 / 11);
@ -2950,8 +2991,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
} }
>.play-btn, > .play-btn,
>.menu-btn { > .menu-btn {
opacity: 0; opacity: 0;
appearance: none; appearance: none;
padding: 0px; padding: 0px;
@ -2965,14 +3006,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transition: opacity 0.1s var(--appleEase); transition: opacity 0.1s var(--appleEase);
} }
>.play-btn { > .play-btn {
position: absolute; position: absolute;
bottom: calc(var(--frame) / 220 * 14); bottom: calc(var(--frame) / 220 * 14);
left: calc(var(--frame) / 220 * 14); left: calc(var(--frame) / 220 * 14);
z-index: 2; z-index: 2;
} }
>.menu-btn { > .menu-btn {
position: absolute; position: absolute;
bottom: calc(var(--frame) / 220 * 14); bottom: calc(var(--frame) / 220 * 14);
right: calc(var(--frame) / 220 * 14); right: calc(var(--frame) / 220 * 14);
@ -2981,8 +3022,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover { &:hover {
>.play-btn, > .play-btn,
>.menu-btn { > .menu-btn {
opacity: 1; opacity: 1;
} }
} }
@ -3255,7 +3296,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
cursor: pointer; cursor: pointer;
} }
#apple-music-video-player-controls #player-pip>svg { #apple-music-video-player-controls #player-pip > svg {
width: 50%; width: 50%;
} }
@ -3274,7 +3315,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
cursor: pointer; cursor: pointer;
} }
#apple-music-video-player-controls #player-fullscreen>svg { #apple-music-video-player-controls #player-fullscreen > svg {
width: 50%; width: 50%;
} }

43
src/renderer/views/components/spatial-properties.ejs
View file

@ -10,30 +10,31 @@
<div class="col"> <div class="col">
<label> <label>
Width 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"/> v-model="app.cfg.audio.spatial_properties.room_dimensions.width" step="1"/>
</label> </label>
</div>
<div class="col">
<label> <label>
Height 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"/> v-model="app.cfg.audio.spatial_properties.room_dimensions.height" step="1"/>
</label> </label>
</div>
<div class="col">
<label> <label>
Depth 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"/> v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/>
</label> </label>
</div> <label v-if="!app.cfg.audio.normalization">
<div class="col">
<label>
Gain 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> </label>
</div> </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>
<div class="row"> <div class="row">
<div class="col"></div> <div class="col"></div>
@ -132,7 +133,8 @@
'wood-ceiling', 'wood-ceiling',
'wood-panel', 'wood-panel',
'uniform' 'uniform'
] ],
visualMultiplier: 4
} }
}, },
props: {}, props: {},
@ -140,9 +142,24 @@
}, },
methods: { 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() { setRoom() {
window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials); window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials);
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain if(!this.app.cfg.audio.normalization) {
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
}
} }
} }
}); });