98 lines
3.8 KiB
Text
98 lines
3.8 KiB
Text
<script type="text/x-template" id="audio-controls">
|
|
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
|
|
@contextmenu.self="app.modals.audioControls = false">
|
|
<div class="modal-window">
|
|
<div class="modal-header">
|
|
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
|
|
<button class="close-btn" @click="app.modals.audioControls = false"
|
|
:aria-label="app.getLz('action.close')"></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="2" 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 class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.advanced')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.audio.advanced" switch />
|
|
</label>
|
|
</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>
|