<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>