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

Created audio controls menu

Browse source
This commit is contained in:
Core 2022-02-17 00:19:14 +00:00
parent edf5e43416
commit 09825e93d3
No known key found for this signature in database
GPG key ID: FE9BF1B547F8F3C6
10 changed files with 141 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/i18n/README.md
View file

@ -116,3 +116,9 @@ Update 12/02/2022 12:00 UTC
* `settings.notyf.visual.theme.install.error`: Added for `en_US`.
* `term.defaultPresets`: Added for `en_US`.
* `term.userPresets`: Added for `en_US`.
Update 16/02/2022 21:45 UTC
* `term.audioControls`: Added for `en_US`.
* `settings.option.audio.volumeStep`: Added for `en_US`.
* `settings.option.audio.maxVolume`: Added for `en_US`.`

3
src/i18n/en_US.jsonc
View file

@ -109,6 +109,7 @@
"term.fullscreenView": "Fullscreen View",
"term.defaultView": "Default View",
"term.audioSettings": "Audio Settings",
"term.audioControls": "Audio Controls",
"term.clearAll": "Clear All",
"term.recentStations": "Recent Stations",
"term.language": "Language",
@ -251,6 +252,8 @@
// Settings - Audio
"settings.header.audio": "Audio",
"settings.header.audio.description": "Adjust the audio settings for Cider.",
"settings.option.audio.volumeStep": "Volume Step",
"settings.option.audio.maxVolume": "Max Volume",
"settings.option.audio.quality": "Audio Quality", // Dropdown
"settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
"settings.header.audio.quality.hireslossless.description": "up to 24-bit/192 kHz",

1
src/main/base/browserwindow.ts
View file

@ -53,6 +53,7 @@ export class BrowserWindow {
"components/sidebar-playlist",
"components/spatial-properties",
"components/audio-settings",
"components/audio-controls",
"components/qrcode-modal",
"components/equalizer",
"components/add-to-playlist",

20
src/renderer/style.less
View file

@ -3134,5 +3134,25 @@ body[platform='darwin'] {
}
}
.percent {
display: inline-block;
position: relative;
}
.percent::after {
position: relative;
right: 2em;
transition: all .05s ease-in-out;
}
.percent:hover::after,
.percent:focus-within::after {
right: 3.5em;
}
.percent::after {
content: '%';
}
@import url("less/compact.less");

3
src/renderer/views/app/panels.ejs
View file

@ -16,6 +16,9 @@
<transition name="modal">
<spatial-properties v-if="modals.spatialProperties"></spatial-properties>
</transition>
<transition name="modal">
<audio-controls v-if="modals.audioControls"></audio-controls>
</transition>
<transition name="modal">
<audio-settings v-if="modals.audioSettings"></audio-settings>
</transition>

2
src/renderer/views/app/sidebar.ejs
View file

@ -152,7 +152,7 @@
<div class="input-container">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
<input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
:max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()">

87
src/renderer/views/components/audio-controls.ejs Normal file
View file

@ -0,0 +1,87 @@
<script type="text/x-template" id="audio-controls">
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
@contextmenu.self="app.resetState()">
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
</div>
<div class="modal-content">
<div class="md-option-line">
<div class="md-option-segment">
{{app.getLz('term.volume')}}
</div>
<div class="md-option-segment md-option-segment_auto percent">
<input type="number"
style="width: 100%; text-align: center; margin-right: 5px;" min="0"
step="5" v-model="volume"/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{app.getLz('settings.option.audio.volumeStep')}}
</div>
<div class="md-option-segment md-option-segment_auto percent">
<input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
v-model="volumeStep"/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{app.getLz('settings.option.audio.maxVolume')}}
</div>
<div class="md-option-segment md-option-segment_auto percent">
<input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
v-model="maxVolume"/>
</div>
</div>
</div>
</div>
</div>
</script>
<script>
Vue.component('audio-controls', {
template: '#audio-controls',
data: function () {
return {
app: this.$root,
maxVolume: this.$root.cfg.audio.maxVolume * 100,
volumeStep: this.$root.cfg.audio.volumeStep * 100,
volume: this.$root.cfg.audio.volume * 100
}
},
watch: {
maxVolume: function (newValue, _oldValue) {
if (newValue > 100) {
newValue = 100
} else {
newValue = Math.round(newValue)
}
this.$root.cfg.audio.maxVolume = newValue / 100
this.maxVolume = newValue
console.log(newValue, _oldValue)
},
volume: function (newValue, _oldValue) {
if (newValue > this.maxVolume) {
newValue = 100
} else {
newValue = Math.round(newValue)
}
this.$root.mk.volume = newValue / 100
this.volume = newValue
console.log(newValue, _oldValue)
},
volumeStep: function (newValue, _oldValue) {
if (newValue > this.maxVolume) {
newValue = 100
} else {
newValue = Math.round(newValue)
}
this.$root.cfg.audio.volumeStep = newValue / 100
this.volumeStep = newValue
console.log(newValue, _oldValue)
}
}
});
</script>

9
src/renderer/views/components/audio-settings.ejs
View file

@ -17,6 +17,11 @@
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
</button>
<button class="playlist-item"
@click="openAudioControls" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('term.audioControls')}}</div>
</button>
</div>
</div>
</div>
@ -46,6 +51,10 @@
notyf.error(app.getLz('spatial.notTurnedOn'))
}
},
openAudioControls() {
app.modals.audioControls = true
app.modals.audioSettings = false
}
}
});
</script>

2
src/renderer/views/components/fullscreen.ejs
View file

@ -80,7 +80,7 @@
<div class="app-chrome-item volume display--large">
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="$root.cfg.audio.maxVolume" v-model="app.mk.volume"
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
</div>
</div>

10
src/renderer/views/pages/settings.ejs
View file

@ -42,6 +42,16 @@
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('term.audioControls')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn" onclick="app.modals.audioControls = true">
{{$root.getLz('term.audioControls')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.seamlessTransition')}}