72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<template>
|
|
<div class="controls">
|
|
<Rewind10Icon
|
|
class="pointer rewind"
|
|
:size="20"
|
|
:title="t('repod', 'Rewind 10 seconds')"
|
|
@click="seek((currentTime ?? 0) - 10)" />
|
|
<PauseIcon
|
|
v-if="!paused"
|
|
class="pointer"
|
|
:size="50"
|
|
:title="t('repod', 'Pause')"
|
|
@click="pause" />
|
|
<PlayIcon
|
|
v-if="paused"
|
|
class="pointer"
|
|
:size="50"
|
|
:title="t('repod', 'Play')"
|
|
@click="play" />
|
|
<FastForward30Icon
|
|
class="pointer forward"
|
|
:size="20"
|
|
:title="t('repod', 'Fast forward 30 seconds')"
|
|
@click="seek((currentTime ?? 0) + 30)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapActions, mapState } from 'pinia'
|
|
import FastForward30Icon from 'vue-material-design-icons/FastForward30.vue'
|
|
import PauseIcon from 'vue-material-design-icons/Pause.vue'
|
|
import PlayIcon from 'vue-material-design-icons/Play.vue'
|
|
import Rewind10Icon from 'vue-material-design-icons/Rewind10.vue'
|
|
import { t } from '@nextcloud/l10n'
|
|
import { usePlayer } from '../../store/player.ts'
|
|
|
|
export default {
|
|
name: 'Controls',
|
|
components: {
|
|
FastForward30Icon,
|
|
PauseIcon,
|
|
PlayIcon,
|
|
Rewind10Icon,
|
|
},
|
|
computed: {
|
|
...mapState(usePlayer, ['currentTime', 'paused']),
|
|
},
|
|
methods: {
|
|
...mapActions(usePlayer, ['play', 'pause', 'seek']),
|
|
t,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.forward,
|
|
.rewind {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|