Skip to content
Snippets Groups Projects
Commit f72a1f0d authored by Nicolas Pomepuy's avatar Nicolas Pomepuy
Browse files

Implement mute in the remote access mini player

parent 0679e25f
No related branches found
No related tags found
1 merge request!1848Remote access:dark theme
Pipeline #442514 passed with stages
in 38 minutes and 46 seconds
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4.34 2.93L2.93 4.34 7.29 8.7 7 9H3v6h4l5 5v-6.59l4.18 4.18c-.65.49-1.38.88-2.18 1.11v2.06c1.34-.3 2.57-.92 3.61-1.75l2.05 2.05 1.41-1.41L4.34 2.93zM10 15.17L7.83 13H5v-2h2.83l.88-.88L10 11.41v3.76zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zm-7-8l-1.88 1.88L12 7.76zm4.5 8c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z"/></svg>
\ No newline at end of file
......@@ -43,7 +43,8 @@
@click="togglePlayQueue($event)" v-bind:class="(this.playerStore.playqueueShowing) ? 'active' : ''" />
</div>
<div class="player-right-container volume-container">
<ImageButton type="volume" class="medium" id="volume_icon" />
<ImageButton type="volume" class="medium" id="volume_icon" v-show="(this.playerStore.volume != 0)" v-on:click="mute()"/>
<ImageButton type="volume_off" class="medium" id="volume_icon" v-show="(this.playerStore.volume == 0)" v-on:click="mute()"/>
<input type="range" ref="volume" min="0" max="100" step="1" @change="this.volumeChange($event)"
@input="this.volumeChange($event)" @touchstart="this.volumeTouched = true"
@touchend="this.volumeTouched = false" @touchcancel="this.volumeTouched = false">
......@@ -79,7 +80,8 @@ export default {
loadedArtworkUrl: "",
volumeTouched: false,
progressTouched: false,
volumeTimeoutId: 0
volumeTimeoutId: 0,
oldVolume: -1,
}
},
computed: {
......@@ -93,6 +95,23 @@ export default {
if (this.$refs.volume.value != this.nowPlaying.volume) this.$refs.volume.value = this.nowPlaying.volume
this.updateVolumeBackground()
},
//Mute or unmute depending on the current volume
mute() {
if (this.$refs.volume.value == 0) {
if (this.oldVolume == -1) {
this.$root.sendMessage("set-volume", this.$refs.volume.max / 2);
this.$refs.volume.value = this.$refs.volume.max / 2
} else {
this.$root.sendMessage("set-volume", this.oldVolume);
this.$refs.volume.value = this.oldVolume
}
} else {
this.oldVolume = this.$refs.volume.value
this.$root.sendMessage("set-volume", 0);
this.$refs.volume.value = 0
}
this.updateVolumeBackground()
},
changeProgressIfNeeded() {
this.updateProgressBackground()
if (this.$refs.progress.matches(':hover') || this.volumeTouched) return
......@@ -105,6 +124,7 @@ export default {
const max = target.max
const val = target.value
this.playerStore.volume = this.$refs.volume.value
target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
},
updateProgressBackground() {
......@@ -160,6 +180,8 @@ export default {
this.changeVolumeIfNeeded()
}, "50");
this.playerStore.volume = event.target.value
},
progressChange(event) {
this.updateProgressBackground()
......
......@@ -12,6 +12,7 @@ export const usePlayerStore = defineStore('player', {
playqueueShowing: false,
playQueueEdit: false,
responsivePlayerShowing: false,
volume:0
}),
getters: {
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment