75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<div class="volume-slider-container">
|
|
<div class="col-1">
|
|
<button
|
|
:disabled="status.mute == null"
|
|
:title="status.mute ? 'Muted' : 'Unmuted'"
|
|
@click="$emit(status.mute ? 'unmute' : 'mute')">
|
|
<i class="icon fa fa-volume-xmark" v-if="status.mute" />
|
|
<i class="icon fa fa-volume-up" v-else />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-11 volume-slider">
|
|
<Slider :value="status.volume" :range="volumeRange" :disabled="status.volume == null"
|
|
@change="$emit('set-volume', $event.target.value)" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Slider from "@/components/elements/Slider";
|
|
|
|
export default {
|
|
components: {Slider},
|
|
emits: ['set-volume', 'mute', 'unmute'],
|
|
|
|
props: {
|
|
// Volume range
|
|
volumeRange: {
|
|
type: Array,
|
|
default: () => [0, 100],
|
|
},
|
|
|
|
// Current player status
|
|
status: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'vars.scss';
|
|
|
|
.volume-slider-container {
|
|
min-width: 15em;
|
|
max-width: 25em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.volume-slider {
|
|
margin: 0;
|
|
padding: 0 .5em 0 1em;
|
|
flex: 1;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
&:not(:disabled):hover {
|
|
color: $default-hover-fg;
|
|
}
|
|
}
|
|
}
|
|
</style>
|