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

Added spatialized audio settings

Browse source
This commit is contained in:
booploops 2021-12-30 01:35:46 -08:00
parent acf66945c3
commit b7c61d0847
5 changed files with 240 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/index.js
View file

@ -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: {

39
src/renderer/style.less
View file

@ -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;

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

@ -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>

8
src/renderer/views/main.ejs
View file

@ -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 -->