You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.0 KiB
40 lines
1.0 KiB
<template> |
|
<Tooltip :infos="[t('music.0')]" width="10rem"> |
|
<img v-if="!music" class="menu-img" :src="menu_icons.musicPause" @click="playMusic(true)"> |
|
<img v-if="music" class="menu-img" :src="menu_icons.musicPlay" @click="playMusic(false)"> |
|
</Tooltip> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { useStore } from "vuex"; |
|
import { onBeforeUnmount, onMounted, ref } from "vue"; |
|
import { useI18n } from "vue3-i18n"; |
|
import { Tooltip } from "@/components" |
|
import { menu_icons } from "@/config"; |
|
|
|
const { t } = useI18n(); |
|
const { state, commit, dispatch } = useStore(); |
|
const music = ref(false); |
|
|
|
const playMusic = (play) => { |
|
music.value = play; |
|
dispatch('set_music_volume', play ? 0.2 : 0.01); |
|
} |
|
|
|
const keydown = (e) => { |
|
if (e.keyCode == 77 && !e.ctrlKey) { |
|
playMusic(!music.value) |
|
} |
|
} |
|
|
|
onMounted(() => { |
|
document.addEventListener('keydown', keydown) |
|
playMusic(false); |
|
}); |
|
onBeforeUnmount(() => { |
|
document.removeEventListener('keydown', keydown) |
|
}) |
|
|
|
</script> |
|
<style lang="scss" scoped></style> |