38 lines
634 B
Vue
38 lines
634 B
Vue
<template>
|
|
<input
|
|
v-if="duration"
|
|
class="progress"
|
|
:max="duration"
|
|
min="0"
|
|
type="range"
|
|
:value="currentTime"
|
|
@change="
|
|
(event) => seek(parseInt((event.target as HTMLInputElement).value))
|
|
" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { usePlayer } from '../../store/player.ts'
|
|
|
|
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>
|