2023-08-27 22:20:34 +02:00
|
|
|
<template>
|
2023-08-28 21:25:12 +02:00
|
|
|
<div class="controls">
|
2024-11-09 00:28:19 +01:00
|
|
|
<Rewind10Icon
|
|
|
|
class="pointer rewind"
|
|
|
|
:size="20"
|
|
|
|
:title="t('repod', 'Rewind 10 seconds')"
|
|
|
|
@click="seek((currentTime ?? 0) - 10)" />
|
2024-10-25 16:51:26 +02:00
|
|
|
<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" />
|
2024-11-09 00:28:19 +01:00
|
|
|
<FastForward30Icon
|
|
|
|
class="pointer forward"
|
|
|
|
:size="20"
|
|
|
|
:title="t('repod', 'Fast forward 30 seconds')"
|
|
|
|
@click="seek((currentTime ?? 0) + 30)" />
|
2023-08-28 21:18:14 +02:00
|
|
|
</div>
|
2023-08-27 22:20:34 +02:00
|
|
|
</template>
|
|
|
|
|
2024-09-13 12:35:08 +02:00
|
|
|
<script lang="ts">
|
2024-08-09 09:38:00 +00:00
|
|
|
import { mapActions, mapState } from 'pinia'
|
2024-11-09 00:28:19 +01:00
|
|
|
import FastForward30Icon from 'vue-material-design-icons/FastForward30.vue'
|
2024-03-16 18:35:31 +01:00
|
|
|
import PauseIcon from 'vue-material-design-icons/Pause.vue'
|
|
|
|
import PlayIcon from 'vue-material-design-icons/Play.vue'
|
2024-11-09 00:28:19 +01:00
|
|
|
import Rewind10Icon from 'vue-material-design-icons/Rewind10.vue'
|
2024-10-25 16:51:26 +02:00
|
|
|
import { t } from '@nextcloud/l10n'
|
2024-09-13 08:56:04 +02:00
|
|
|
import { usePlayer } from '../../store/player.ts'
|
2023-08-27 22:20:34 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Controls',
|
|
|
|
components: {
|
2024-11-09 00:28:19 +01:00
|
|
|
FastForward30Icon,
|
2024-03-16 18:35:31 +01:00
|
|
|
PauseIcon,
|
|
|
|
PlayIcon,
|
2024-11-09 00:28:19 +01:00
|
|
|
Rewind10Icon,
|
2023-08-27 22:20:34 +02:00
|
|
|
},
|
|
|
|
computed: {
|
2024-11-09 00:28:19 +01:00
|
|
|
...mapState(usePlayer, ['currentTime', 'paused']),
|
2024-08-09 09:38:00 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2024-11-09 00:28:19 +01:00
|
|
|
...mapActions(usePlayer, ['play', 'pause', 'seek']),
|
2024-10-25 16:51:26 +02:00
|
|
|
t,
|
2023-08-28 17:44:17 +02:00
|
|
|
},
|
2023-08-27 22:20:34 +02:00
|
|
|
}
|
|
|
|
</script>
|
2023-08-28 00:02:07 +02:00
|
|
|
|
|
|
|
<style scoped>
|
2024-04-30 00:48:47 +02:00
|
|
|
.controls {
|
|
|
|
display: flex;
|
2024-11-10 22:53:50 +01:00
|
|
|
gap: 0.5rem;
|
2024-04-30 00:48:47 +02:00
|
|
|
}
|
2023-08-28 21:25:12 +02:00
|
|
|
|
2024-04-30 00:48:47 +02:00
|
|
|
.pointer {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2024-11-09 00:28:19 +01:00
|
|
|
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
.forward,
|
|
|
|
.rewind {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2023-08-28 00:02:07 +02:00
|
|
|
</style>
|