media_player_client/src/components/EditVolumeDialog.vue

73 lines
1.7 KiB
Vue

<template>
<q-dialog v-model="show_dialog">
<q-card
class="overflow-hidden"
style="overflow-y: scroll; max-width: 60vw; max-height: 40vh"
>
<q-card-section style="width: 30vw; height: 10vh">
<q-item>
<q-item-section avatar>{{ $t("volume") }} :</q-item-section>
<q-item-section>
<q-slider
v-model="volume"
:min="0"
:max="100"
label
label-always
@change="volume_changed"
/>
</q-item-section>
</q-item>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>
<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar, date, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
export default defineComponent({
name: "ComponentEditVolumeDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let loading = ref(false);
let volume = ref(0);
let window_id = 0;
return {
loading,
show_dialog,
volume,
showDialog(_window_id: number, _volume: number) {
if (_volume < 0) {
_volume = 0;
}
if (_volume > 100) {
_volume = 100;
}
window_id = _window_id;
volume.value = _volume;
show_dialog.value = true;
},
volume_changed(val: number) {
GlobalData.getInstance()
.getCurrentClient()
?.setWindowVolume(window_id, volume.value);
},
};
},
});
</script>