repod/src/components/Player/ProgressBar.vue
Michel Roux 75da02e05b
Some checks failed
repod / xml (push) Successful in 1m38s
repod / php (push) Successful in 1m2s
repod / nodejs (push) Failing after 57s
repod / release (push) Has been skipped
refactor: 🏗️ rework to use pinia
2024-08-09 09:38:00 +00:00

35 lines
567 B
Vue

<template>
<input
class="progress"
:max="duration"
min="0"
type="range"
:value="currentTime"
@change="(event) => seek(event.target.value)" />
</template>
<script>
import { mapActions, mapState } from 'pinia'
import { usePlayer } from '../../store/player.js'
export default {
name: 'ProgressBar',
computed: {
...mapState(usePlayer, ['duration', 'currentTime']),
},
methods: {
...mapActions(usePlayer, ['seek']),
},
}
</script>
<style scoped>
.progress {
height: 4px;
min-height: 4px;
position: absolute;
top: -2px;
width: 99%;
}
</style>