Added spatialized audio settings

index.js

@@ -1,18 +1,18 @@
 require('v8-compile-cache');
-const { app, components } = require('electron'),
+const {app, components} = require('electron'),
     {resolve} = require("path"),
-      CiderBase = require ('./src/main/cider-base');
+    CiderBase = require('./src/main/cider-base');
 
 // Analytics for debugging.
 const ElectronSentry = require("@sentry/electron");
-ElectronSentry.init({ dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214" });
+ElectronSentry.init({dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214"});
 
-const configSchema = {
+const configDefaults = {
     "general": {
         "close_behavior": 0, // 0 = close, 1 = minimize, 2 = minimize to tray
         "startup_behavior": 0, // 0 = nothing, 1 = open on startup
         "discord_rpc": 1, // 0 = disabled, 1 = enabled as Cider, 2 = enabled as Apple Music
-        "discordClearActivityOnPause" : 0, // 0 = disabled, 1 = enabled
+        "discordClearActivityOnPause": 0, // 0 = disabled, 1 = enabled
         "volume": 1
     },
     "home": {
@@ -23,20 +23,37 @@ const configSchema = {
         "quality": "990",
         "seamless_audio": true,
         "normalization": false,
-        "spatial" : false,
+        "spatial": false,
+        "test": false,
+        "spatial_properties": {
+            "gain": 0.8,
+            "room_dimensions": {
+                "width": 5,
+                "height": 6,
+                "depth": 4
+            },
+            "room_materials": {
+                "left": 'acoustic-ceiling-tiles',
+                "right": 'acoustic-ceiling-tiles',
+                "front": 'glass-thin',
+                "back": 'glass-thin',
+                "down": 'grass',
+                "up": 'acoustic-ceiling-tiles'
+            }
+        }
     },
     "visual": {
         "theme": "",
         "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
         "refresh_rate": 0,
-        "animated_artwork": "always", // 0 = always, 1 = limited, 2 = never
+        "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
         "animated_artwork_qualityLevel": 1,
         "hw_acceleration": "default", // default, webgpu, disabled
         "window_transparency": "default"
     },
     "lyrics": {
         "enable_mxm": false,
-        "mxm_karaoke" : false,
+        "mxm_karaoke": false,
         "mxm_language": "en",
         "enable_yt": false,
     },
@@ -44,21 +61,25 @@ const configSchema = {
         "enabled": false,
         "scrobble_after": 30,
         "auth_token": "",
-        "enabledRemoveFeaturingArtists" : true,
+        "enabledRemoveFeaturingArtists": true,
         "NowPlaying": "true"
     },
     "advanced": {
-        "AudioContext" : false,
+        "AudioContext": false,
     }
 }
 
+
 // Enable WebGPU and list adapters (EXPERIMENTAL.)
 // Note: THIS HAS TO BE BEFORE ANYTHING GETS INITIALIZED.
 
 const Store = require("electron-store");
 app.cfg = new Store({
-    defaults: configSchema,
+    defaults: configDefaults
 });
+let currentCfg = app.cfg.get()
+app.cfg.set(Object.assign(configDefaults, currentCfg))
+
 
 switch (app.cfg.get("visual.hw_acceleration")) {
     default:
@@ -77,7 +98,10 @@ switch (app.cfg.get("visual.hw_acceleration")) {
 
 // Creating the Application Window and Calling all the Functions
 function CreateWindow() {
-    if (app.isQuiting) { app.quit(); return; }
+    if (app.isQuiting) {
+        app.quit();
+        return;
+    }
 
     /** CIDER **/
     const ciderwin = require("./src/main/cider-base")
@@ -101,7 +125,10 @@ app.on('ready', () => {
     app.whenReady().then(async () => {
         await components.whenReady().catch(e => console.log(`component ready fail:`, e));
         console.log('components ready:', components.status());
-        if (app.isQuiting) { app.quit(); return; }
+        if (app.isQuiting) {
+            app.quit();
+            return;
+        }
         app.commandLine.appendSwitch('high-dpi-support', 1)
         app.commandLine.appendSwitch('force-device-scale-factor', 1)
         app.commandLine.appendSwitch('disable-pinch');

src/renderer/index.js

@@ -256,7 +256,8 @@ const app = new Vue({
         routes: ["browse", "listen_now", "radio"],
         musicBaseUrl: "https://api.music.apple.com/",
         modals: {
-            addToPlaylist: false
+            addToPlaylist: false,
+            spatialProperties: false
         },
     },
     watch: {

src/renderer/style.less

@@ -1648,6 +1648,45 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.spatialproperties-panel {
+  .modal-window {
+    height: 600px;
+    max-height: 600px;
+    width: 800px;
+    max-width: 800px;
+    overflow: hidden;
+
+    .modal-header {
+      padding: 16px;
+      position: relative;
+      overflow: hidden;
+
+      .modal-title {
+        text-align: center;
+      }
+
+      .close-btn {
+        width: 50px;
+        height: 100%;
+        background-image: var(--gfx-closeBtn);
+        background-position: center;
+        background-repeat: no-repeat;
+        -webkit-app-region: no-drag;
+        appearance: none;
+        border: 0;
+        background-color: transparent;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        &:hover {
+          background-color: rgb(196, 43, 28)
+        }
+      }
+    }
+  }
+}
+
 .addtoplaylist-panel {
   .modal-window {
     max-height: 600px;

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

@@ -0,0 +1,149 @@
+<script type="text/x-template" id="spatial-properties">
+    <div class="modal-fullscreen spatialproperties-panel">
+        <div class="modal-window">
+            <div class="modal-header">
+                <div class="modal-title">Spatial Properties</div>
+                <button class="close-btn" @click="app.resetState()"></button>
+            </div>
+            <div class="modal-content">
+                <div class="row">
+                    <div class="col">
+                        <label>
+                            Width
+                            <input type="number" min="0" @change="setRoom()"
+                                   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()"
+                                   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()"
+                                   v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/>
+                        </label>
+                    </div>
+                    <div class="col">
+                        <label>
+                            Gain
+                            <input type="number" min="0" v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
+                        </label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col"></div>
+                    <div class="col">
+                        <label>
+                            Up
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.up">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                    </div>
+                    <div class="col"></div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <label>
+                            Left
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.left">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                    </div>
+                    <div class="col">
+                        <label>
+                            Front
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.front">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                        <label>
+                            Back
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.back">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                    </div>
+                    <div class="col">
+                        <label>
+                            Right
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.right">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col"></div>
+                    <div class="col">
+                        <label>
+                            Down
+                            <select class="md-select" @change="setRoom()"
+                                    v-model="app.cfg.audio.spatial_properties.room_materials.down">
+                                <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
+                            </select>
+                        </label>
+                    </div>
+                    <div class="col"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('spatial-properties', {
+        template: '#spatial-properties',
+        data: function () {
+            return {
+                app: this.$root,
+                roomProps: [
+                    'transparent',
+                    'acoustic-ceiling-tiles',
+                    'brick-bare',
+                    'brick-painted',
+                    'concrete-block-coarse',
+                    'concrete-block-painted',
+                    'curtain-heavy',
+                    'fiber-glass-insulation',
+                    'glass-thin',
+                    'glass-thick',
+                    'grass',
+                    'linoleum-on-concrete',
+                    'marble',
+                    'metal',
+                    'parquet-on-concrete',
+                    'plaster-smooth',
+                    'plywood-panel',
+                    'polished-concrete-or-tile',
+                    'sheetrock',
+                    'water-or-ice-surface',
+                    'wood-ceiling',
+                    'wood-panel',
+                    'uniform'
+                ]
+            }
+        },
+        props: {},
+        mounted() {
+
+        },
+        methods: {
+            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
+            }
+        }
+    });
+</script>

src/renderer/views/main.ejs

@@ -215,6 +215,9 @@
                                         </div>
                                     </div>
                                 </button>
+                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial" @click="modals.spatialProperties = true">
+                                    Spatialized Audio Settings
+                                </button>
                                 <button class="usermenu-item">
                                     About
                                 </button>
@@ -472,6 +475,9 @@
     <transition name="modal">
         <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
     </transition>
+    <transition name="modal">
+        <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
+    </transition>
     <div id="apple-music-video-container">
         <div id="apple-music-video-player-controls">
             <div id="player-exit" title="Close" @click="app.exitMV()">
@@ -551,6 +557,8 @@
     </button>
 </script>
 
+<!-- Spatial Properties -->
+<%- include('components/spatial-properties') %>
 <!-- Add to playlist -->
 <%- include('components/add-to-playlist') %>
 <!-- Queue -->