repod/src/components/Player/ProgressBar.vue

32 lines
535 B
Vue
Raw Normal View History

2023-08-27 20:20:34 +00:00
<template>
2023-08-28 22:47:22 +00:00
<div @click="(event) => $store.dispatch('player/seek', event.x * player.duration / event.target.offsetWidth)">
2024-01-09 21:21:48 +00:00
<NcProgressBar class="bar" :value="player.currentTime * 100 / player.duration" />
2023-08-27 20:20:34 +00:00
</div>
</template>
<script>
import { NcProgressBar } from '@nextcloud/vue'
export default {
name: 'ProgressBar',
components: {
NcProgressBar,
},
computed: {
2023-08-28 22:47:22 +00:00
player() {
return this.$store.state.player
2023-08-27 20:20:34 +00:00
},
},
}
</script>
<style scoped>
div {
cursor: pointer;
}
2024-01-09 21:21:48 +00:00
.bar {
2024-01-10 15:36:50 +00:00
height: 10px !important;
2024-01-09 21:21:48 +00:00
}
2023-08-27 20:20:34 +00:00
</style>