diff --git a/src/components/Player/Bar.vue b/src/components/Player/Bar.vue
index f8eb59d..4d59ad2 100644
--- a/src/components/Player/Bar.vue
+++ b/src/components/Player/Bar.vue
@@ -6,7 +6,7 @@
 			:src="episode.episodeUrl"
 			@durationchange="duration = audio.duration"
 			@loadeddata="loadeddata"
-			@pause="pause"
+			@pause="paused = true"
 			@play="paused = false"
 			@seeked="currentTime = audio.currentTime"
 			@timeupdate="currentTime = audio.currentTime"
@@ -34,10 +34,6 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.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: 'Bar',
@@ -55,7 +51,6 @@ export default {
 			duration: 0,
 			loading: true,
 			paused: false,
-			podcastUrl: atob(this.$route.params.url),
 			volume: 1,
 		}
 	},
@@ -75,27 +70,6 @@ export default {
 				this.audio.currentTime = this.episode.episodeAction.position
 			}
 		},
-		pause() {
-			this.paused = true
-			this.track()
-		},
-		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.currentTime),
-					total: Math.round(this.duration),
-				}])
-			} catch (e) {
-				console.error(e)
-				showError(t('Error while saving position on API'))
-			}
-		},
 	},
 }
 </script>
diff --git a/src/components/Player/Controls.vue b/src/components/Player/Controls.vue
index fdfebed..a135050 100644
--- a/src/components/Player/Controls.vue
+++ b/src/components/Player/Controls.vue
@@ -3,7 +3,7 @@
 		<PauseButton v-if="!paused"
 			class="pointer"
 			:size="50"
-			@click="() => audio.pause()" />
+			@click="pause" />
 		<PlayButton v-if="paused"
 			class="pointer"
 			:size="50"
@@ -18,6 +18,10 @@
 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',
@@ -32,16 +36,45 @@ export default {
 			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: {
-		stop() {
+		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>