68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<NcAppNavigationItem :name="t('repod', 'Playback speed')">
|
|
<template #extra>
|
|
<div class="extra">
|
|
<Minus class="pointer" :size="20" @click="changeRate(-.1)" />
|
|
<NcCounterBubble class="counter">
|
|
x{{ player.rate }}
|
|
</NcCounterBubble>
|
|
<Plus class="pointer" :size="20" @click="changeRate(.1)" />
|
|
</div>
|
|
</template>
|
|
<template #icon>
|
|
<SpeedometerSlow v-if="player.rate < 1" :size="20" />
|
|
<SpeedometerMedium v-if="player.rate === 1" :size="20" />
|
|
<Speedometer v-if="player.rate > 1" :size="20" />
|
|
</template>
|
|
</NcAppNavigationItem>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
|
|
import Minus from 'vue-material-design-icons/Minus.vue'
|
|
import Plus from 'vue-material-design-icons/Plus.vue'
|
|
import Speedometer from 'vue-material-design-icons/Speedometer.vue'
|
|
import SpeedometerMedium from 'vue-material-design-icons/SpeedometerMedium.vue'
|
|
import SpeedometerSlow from 'vue-material-design-icons/SpeedometerSlow.vue'
|
|
|
|
export default {
|
|
name: 'Speed',
|
|
components: {
|
|
NcAppNavigationItem,
|
|
NcCounterBubble,
|
|
Minus,
|
|
Plus,
|
|
Speedometer,
|
|
SpeedometerMedium,
|
|
SpeedometerSlow,
|
|
},
|
|
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>
|