2023-08-27 20:20:34 +00:00
|
|
|
<template>
|
2024-04-29 22:48:47 +00:00
|
|
|
<input
|
|
|
|
class="progress"
|
2024-08-09 09:38:00 +00:00
|
|
|
:max="duration"
|
2024-01-30 16:34:20 +00:00
|
|
|
min="0"
|
|
|
|
type="range"
|
2024-08-09 09:38:00 +00:00
|
|
|
:value="currentTime"
|
|
|
|
@change="(event) => seek(event.target.value)" />
|
2023-08-27 20:20:34 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2024-08-09 09:38:00 +00:00
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
|
|
import { usePlayer } from '../../store/player.js'
|
|
|
|
|
2023-08-27 20:20:34 +00:00
|
|
|
export default {
|
|
|
|
name: 'ProgressBar',
|
|
|
|
computed: {
|
2024-08-09 09:38:00 +00:00
|
|
|
...mapState(usePlayer, ['duration', 'currentTime']),
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(usePlayer, ['seek']),
|
2023-08-27 20:20:34 +00:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
2024-04-29 22:48:47 +00:00
|
|
|
.progress {
|
|
|
|
height: 4px;
|
|
|
|
min-height: 4px;
|
|
|
|
position: absolute;
|
|
|
|
top: -2px;
|
|
|
|
width: 99%;
|
|
|
|
}
|
2023-08-27 20:20:34 +00:00
|
|
|
</style>
|