Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 15:00:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Turn volume into a component

Browse source
This commit is contained in:
An Phan 2016-11-24 16:50:22 +08:00
parent 645bf9e3c7
commit 0448214abd
No known key found for this signature in database
GPG key ID: 05536BB4BCDC02A2
2 changed files with 65 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
resources/assets/js/components/site-footer/index.vue
View file

@ -42,20 +42,13 @@
v-if="useEqualizer" v-if="useEqualizer"
@click="showEqualizer = !showEqualizer" @click="showEqualizer = !showEqualizer"
:class="{ active: showEqualizer }"/> :class="{ active: showEqualizer }"/>
<a v-else <a v-else class="queue control" :class="{ active: viewingQueue }" href="/#!/queue">
class="queue control"
:class="{ active: viewingQueue }"
href="/#!/queue">
<i class="fa fa-list-ol"></i> <i class="fa fa-list-ol"></i>
</a> </a>
<span class="repeat control" :class="prefs.repeatMode" @click.prevent="changeRepeatMode"> <span class="repeat control" :class="prefs.repeatMode" @click.prevent="changeRepeatMode">
<i class="fa fa-repeat"></i> <i class="fa fa-repeat"></i>
</span> </span>
<span class="volume control" id="volume"> <volume/>
<i class="fa fa-volume-up" @click.prevent="mute" v-show="!muted"/>
<i class="fa fa-volume-off" @click.prevent="unmute" v-show="muted"/>
<input type="range" id="volumeRange" max="10" step="0.1" @change="muted = false" class="plyr__volume">
</span>
</div> </div>
</div> </div>
</div> </div>
@ -70,12 +63,12 @@ import { songStore, favoriteStore, preferenceStore } from '../../stores';
import soundBar from '../shared/sound-bar.vue'; import soundBar from '../shared/sound-bar.vue';
import equalizer from './equalizer.vue'; import equalizer from './equalizer.vue';
import volume from './volume.vue';
export default { export default {
data() { data() {
return { return {
song: songStore.stub, song: songStore.stub,
muted: false,
viewingQueue: false, viewingQueue: false,
prefs: preferenceStore.state, prefs: preferenceStore.state,
@ -91,7 +84,7 @@ export default {
}; };
}, },
components: { soundBar, equalizer }, components: { soundBar, equalizer, volume },
computed: { computed: {
/** /**
@ -114,24 +107,6 @@ export default {
}, },
methods: { methods: {
/**
* Mute the volume.
*/
mute() {
this.muted = true;
return playback.mute();
},
/**
* Unmute the volume.
*/
unmute() {
this.muted = false;
return playback.unmute();
},
/** /**
* Play the previous song in queue. * Play the previous song in queue.
*/ */
@ -494,21 +469,4 @@ export default {
} }
} }
} }
#volume {
@include vertical-center();
// More tweaks
input[type=range] {
margin-top: -3px;
}
i {
width: 16px;
}
@media only screen and (max-width: 768px) {
display: none !important;
}
}
</style> </style>

61
resources/assets/js/components/site-footer/volume.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<span class="volume control" id="volume">
<i class="fa fa-volume-up" @click.prevent="mute" v-show="!muted"/>
<i class="fa fa-volume-off" @click.prevent="unmute" v-show="muted"/>
<input type="range" id="volumeRange" max="10" step="0.1" @change="muted = false" class="plyr__volume">
</span>
</template>
<script>
import { playback } from '../../services';
export default {
data() {
return {
muted: false,
};
},
methods: {
/**
* Mute the volume.
*/
mute() {
this.muted = true;
return playback.mute();
},
/**
* Unmute the volume.
*/
unmute() {
this.muted = false;
return playback.unmute();
},
},
};
</script>
<style lang="sass">
@import "../../../sass/partials/_vars.scss";
@import "../../../sass/partials/_mixins.scss";
#volume {
@include vertical-center();
// More tweaks
input[type=range] {
margin-top: -3px;
}
i {
width: 16px;
}
@media only screen and (max-width: 768px) {
display: none !important;
}
}
</style>