repod/src/components/Player/Controls.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>