repod/src/components/Player/Controls.vue

<template>
	<div>
		<PauseButton v-if="!paused"
			class="pointer"
			:size="50"
			@click="pause" />
		<PlayButton v-if="paused"
			class="pointer"
			:size="50"
			@click="() => audio.play()" />
		<StopButton class="pointer"
			:size="30"
			@click="stop" />
	</div>
</template>

<script>
import PauseButton from 'vue-material-design-icons/Pause.vue'
import PlayButton from 'vue-material-design-icons/Play.vue'
import StopButton from 'vue-material-design-icons/Stop.vue'
import axios from '@nextcloud/axios'
import { formatEpisodeTimestamp } from '../../utils/time.js'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'Controls',
	components: {
		PauseButton,
		PlayButton,
		StopButton,
	},
	props: {
		paused: {
			type: Boolean,
			required: true,
		},
	},
	data() {
		return {
			podcastUrl: atob(this.$route.params.url),
		}
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
		episode() {
			return this.$store.state.player.episode
		},
	},
	methods: {
		pause() {
			this.audio.pause()
			this.track()
		},
		stop() {
			this.pause()
			this.$store.commit('player/play', null)
		},
		async track() {
			try {
				await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [{
					podcast: this.podcastUrl,
					episode: this.episode.episodeUrl,
					guid: this.episode.episodeGuid,
					action: 'play',
					timestamp: formatEpisodeTimestamp(new Date()),
					started: Math.round(this.episode.episodeAction ? this.episode.episodeAction.started : 0),
					position: Math.round(this.audio.currentTime),
					total: Math.round(this.audio.duration),
				}])
			} catch (e) {
				console.error(e)
				showError(t('Error while saving position on API'))
			}
		},
	},
}
</script>

<style scoped>
	.pointer {
		cursor: pointer;
	}
</style>