From d5c393c071f6c462cbafba3437362a0573d26a80 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Thu, 30 Dec 2021 02:21:27 -0800 Subject: [PATCH] Added visual representation of the room scale --- src/renderer/style.less | 181 +++++++++++------- .../views/components/spatial-properties.ejs | 43 +++-- 2 files changed, 141 insertions(+), 83 deletions(-) diff --git a/src/renderer/style.less b/src/renderer/style.less index 53e476d8..c34e901f 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -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; height: 32px; border-radius: 100%; @@ -351,18 +351,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track { background-size: contain; } -.app-sidebar-button>.sidebar-user-text { +.app-sidebar-button > .sidebar-user-text { width: 100%; display: flex; font-size: 14px; flex-direction: column; } -.app-sidebar-button>.sidebar-user-text .fullname { +.app-sidebar-button > .sidebar-user-text .fullname { text-align: left; } -.app-sidebar-button>.sidebar-user-text .handle-text { +.app-sidebar-button > .sidebar-user-text .handle-text { font-size: 12px; opacity: 0.7; text-align: left; @@ -650,25 +650,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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); } -.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); 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); transform: scale(1); } -.app-chrome .app-chrome-item.volume>input[type=range] { +.app-chrome .app-chrome-item.volume > input[type=range] { width: 100%; } -.app-chrome .app-chrome-item.volume>input[type=range] { +.app-chrome .app-chrome-item.volume > input[type=range] { -webkit-appearance: none; height: 4px; background: rgba(255, 255, 255, 0.4); @@ -677,7 +677,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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; height: 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); } -.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; box-shadow: none; border: none; @@ -703,7 +703,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { height: 100%; } -.app-chrome .app-chrome-item>.app-title { +.app-chrome .app-chrome-item > .app-title { width: 100px; font-size: 13px; background: url("./logotmp.png"); @@ -717,23 +717,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track { -webkit-app-region: drag; } -.app-chrome .app-chrome-item>.window-controls { +.app-chrome .app-chrome-item > .window-controls { width: 138px; font-size: 13px; height: 100%; display: flex; } -.app-chrome .app-chrome-item>.window-controls>div { +.app-chrome .app-chrome-item > .window-controls > div { height: 100%; 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%); } -.app-chrome .app-chrome-item>.window-controls>div.close { +.app-chrome .app-chrome-item > .window-controls > div.close { width: 100%; height: 100%; 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-position: center; background-repeat: no-repeat; @@ -755,11 +755,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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); } -.app-chrome .app-chrome-item>.window-controls>div.minimize { +.app-chrome .app-chrome-item > .window-controls > div.minimize { background-image: var(--gfx-minBtn); background-position: center; 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%); } -.app-chrome .app-chrome-item>.app-playback-controls { +.app-chrome .app-chrome-item > .app-playback-controls { display: flex; justify-content: center; align-content: center; 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; text-align: center; font-size: 13px; @@ -793,7 +793,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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-size: 10px; height: 1.2em; @@ -802,7 +802,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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-size: 12px; text-align: center; @@ -813,7 +813,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { /* 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; //height: 16px; position: absolute; @@ -822,7 +822,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { background: @bgColor; &:hover { - >input[type=range] { + > input[type=range] { &::-webkit-slider-thumb { opacity: 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; width: 100%; 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; height: 42px; background-image: var(--artwork); @@ -885,7 +885,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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; height: 42px; border-radius: 2px; @@ -897,7 +897,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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%; display: flex; justify-content: center; @@ -906,7 +906,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { 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%; } @@ -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; height: 10px; background: white; @@ -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); @@ -1811,7 +1850,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { transition: transform 0s var(--appleEase); } - >svg { + > svg { width: 8px; pointer-events: none; } @@ -1819,7 +1858,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { &:hover { background: var(--selected); - >svg { + > svg { color: rgba(200, 200, 200, 1.0); } } @@ -1843,7 +1882,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { cursor: pointer; } -.reload-btn>svg { +.reload-btn > svg { height: 50%; color: #eee; } @@ -1869,7 +1908,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { flex-flow: wrap; justify-content: center; - >.cd-mediaitem-square { + > .cd-mediaitem-square { width: 220px; height: 260px; display: inline-flex; @@ -2023,7 +2062,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { appearance: none; box-shadow: var(--ciderShadow-Generic); - >svg { + > svg { height: 50%; color: #eee; pointer-events: none; @@ -2138,7 +2177,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { background: var(--selected-click); } - >svg { + > svg { width: 70%; } } @@ -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); } @@ -2613,7 +2655,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { font-size: 12px; } - >.cd-mediaitem-square-large-overlay { + > .cd-mediaitem-square-large-overlay { z-index: 3; &: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; } - &:hover+.cd-mediaitem-square-large-overlay { + &:hover + .cd-mediaitem-square-large-overlay { opacity: 1; } @@ -2636,7 +2678,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } - /* mediaitem-square-large */ .cd-mediaitem-square-large { width: 190px; @@ -2651,7 +2692,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { margin-left: 10px; cursor: pointer; - >* { + > * { 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; } -.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay { +.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay { 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; } -.cd-mediaitem-square-large+.cd-mediaitem-square-large-overlay { +.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay { 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; } @@ -2736,7 +2777,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { margin-left: 10px; cursor: pointer; - >* { + > * { 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; } -.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay { +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay { z-index: 3; } -.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover { +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover { opacity: 1; } -.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay { +.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay { pointer-events: none; } -.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay { +.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay { opacity: 1; } @@ -2837,8 +2878,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } - >.play-btn, - >.menu-btn { + > .play-btn, + > .menu-btn { opacity: 0; appearance: none; padding: 0px; @@ -2852,14 +2893,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { transition: opacity 0.1s var(--appleEase); } - >.play-btn { + > .play-btn { position: absolute; bottom: 14px; left: 14px; z-index: 2; } - >.menu-btn { + > .menu-btn { position: absolute; bottom: 14px; right: 14px; @@ -2868,8 +2909,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { &:hover { - >.play-btn, - >.menu-btn { + > .play-btn, + > .menu-btn { opacity: 1; } } @@ -2919,7 +2960,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } /* mediaitem-square */ -.albums-square-containeru>*>.cd-mediaitem-square { +.albums-square-containeru > * > .cd-mediaitem-square { --frame: max(220px, 15vw); width: var(--frame); height: calc(var(--frame) * 13 / 11); @@ -2950,8 +2991,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } } - >.play-btn, - >.menu-btn { + > .play-btn, + > .menu-btn { opacity: 0; appearance: none; padding: 0px; @@ -2965,14 +3006,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { transition: opacity 0.1s var(--appleEase); } - >.play-btn { + > .play-btn { position: absolute; bottom: calc(var(--frame) / 220 * 14); left: calc(var(--frame) / 220 * 14); z-index: 2; } - >.menu-btn { + > .menu-btn { position: absolute; bottom: 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 { - >.play-btn, - >.menu-btn { + > .play-btn, + > .menu-btn { opacity: 1; } } @@ -3255,7 +3296,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { cursor: pointer; } -#apple-music-video-player-controls #player-pip>svg { +#apple-music-video-player-controls #player-pip > svg { width: 50%; } @@ -3274,7 +3315,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { cursor: pointer; } -#apple-music-video-player-controls #player-fullscreen>svg { +#apple-music-video-player-controls #player-fullscreen > svg { width: 50%; } diff --git a/src/renderer/views/components/spatial-properties.ejs b/src/renderer/views/components/spatial-properties.ejs index 5b71bf41..848c6b47 100644 --- a/src/renderer/views/components/spatial-properties.ejs +++ b/src/renderer/views/components/spatial-properties.ejs @@ -10,30 +10,31 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
@@ -132,7 +133,8 @@ 'wood-ceiling', 'wood-panel', 'uniform' - ] + ], + visualMultiplier: 4 } }, props: {}, @@ -140,9 +142,24 @@ }, 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); - 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 + } } } });