kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
Fix volume controls
rodzic
de3d112434
commit
3bf7dd98a2
|
@ -1,20 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { volume, mute } from '~/composables/audio/player'
|
||||||
import { useStore } from '~/store'
|
|
||||||
import { useGettext } from 'vue3-gettext'
|
|
||||||
import { useTimeoutFn } from '@vueuse/core'
|
import { useTimeoutFn } from '@vueuse/core'
|
||||||
import usePlayer from '~/composables/audio/usePlayer'
|
import { useGettext } from 'vue3-gettext'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
const store = useStore()
|
|
||||||
const { volume, mute, unmute } = usePlayer()
|
|
||||||
|
|
||||||
const expanded = ref(false)
|
const expanded = ref(false)
|
||||||
const volumeSteps = 100
|
|
||||||
|
|
||||||
const sliderVolume = computed({
|
|
||||||
get: () => volume.value * volumeSteps,
|
|
||||||
set: (value) => store.commit('player/volume', value / volumeSteps)
|
|
||||||
})
|
|
||||||
|
|
||||||
const { $pgettext } = useGettext()
|
const { $pgettext } = useGettext()
|
||||||
const labels = computed(() => ({
|
const labels = computed(() => ({
|
||||||
|
@ -45,16 +35,16 @@ const handleLeave = () => {
|
||||||
@mouseleave="handleLeave"
|
@mouseleave="handleLeave"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="sliderVolume === 0"
|
v-if="volume === 0"
|
||||||
role="button"
|
role="button"
|
||||||
:title="labels.unmute"
|
:title="labels.unmute"
|
||||||
:aria-label="labels.unmute"
|
:aria-label="labels.unmute"
|
||||||
@click.prevent.stop="unmute"
|
@click.prevent.stop="mute"
|
||||||
>
|
>
|
||||||
<i class="volume off icon" />
|
<i class="volume off icon" />
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-else-if="sliderVolume < 0.5"
|
v-else-if="volume < 0.5"
|
||||||
role="button"
|
role="button"
|
||||||
:title="labels.mute"
|
:title="labels.mute"
|
||||||
:aria-label="labels.mute"
|
:aria-label="labels.mute"
|
||||||
|
@ -78,11 +68,11 @@ const handleLeave = () => {
|
||||||
>{{ labels.slider }}</label>
|
>{{ labels.slider }}</label>
|
||||||
<input
|
<input
|
||||||
id="volume-slider"
|
id="volume-slider"
|
||||||
v-model="sliderVolume"
|
v-model="volume"
|
||||||
type="range"
|
type="range"
|
||||||
step="any"
|
step="any"
|
||||||
min="0"
|
min="0"
|
||||||
:max="volumeSteps"
|
max="1"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
Ładowanie…
Reference in New Issue