72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<template>
|
|
<NcAppNavigationItem :name="t('repod', 'Playback speed')">
|
|
<template #extra>
|
|
<div class="extra">
|
|
<MinusIcon class="pointer"
|
|
:size="20"
|
|
@click="changeRate(-.1)" />
|
|
<NcCounterBubble class="counter">
|
|
x{{ player.rate }}
|
|
</NcCounterBubble>
|
|
<PlusIcon class="pointer"
|
|
:size="20"
|
|
@click="changeRate(.1)" />
|
|
</div>
|
|
</template>
|
|
<template #icon>
|
|
<SpeedometerSlowIcon v-if="player.rate < 1" :size="20" />
|
|
<SpeedometerMediumIcon v-if="player.rate === 1" :size="20" />
|
|
<SpeedometerIcon v-if="player.rate > 1" :size="20" />
|
|
</template>
|
|
</NcAppNavigationItem>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
|
|
import MinusIcon from 'vue-material-design-icons/Minus.vue'
|
|
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
|
import SpeedometerIcon from 'vue-material-design-icons/Speedometer.vue'
|
|
import SpeedometerMediumIcon from 'vue-material-design-icons/SpeedometerMedium.vue'
|
|
import SpeedometerSlowIcon from 'vue-material-design-icons/SpeedometerSlow.vue'
|
|
|
|
export default {
|
|
name: 'Speed',
|
|
components: {
|
|
NcAppNavigationItem,
|
|
NcCounterBubble,
|
|
MinusIcon,
|
|
PlusIcon,
|
|
SpeedometerIcon,
|
|
SpeedometerMediumIcon,
|
|
SpeedometerSlowIcon,
|
|
},
|
|
computed: {
|
|
player() {
|
|
return this.$store.state.player
|
|
},
|
|
},
|
|
methods: {
|
|
changeRate(diff) {
|
|
const newRate = (this.player.rate + diff).toPrecision(2)
|
|
this.$store.dispatch('player/rate', newRate > 0 ? newRate : this.player.rate)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.counter {
|
|
height: 20px;
|
|
}
|
|
|
|
.extra {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|