seek to good position

src/components/Player/Bar.vue

@@ -5,7 +5,7 @@
 			preload
 			:src="episode.episodeUrl"
 			@durationchange="duration = audio.duration"
-			@loadeddata="loading = false"
+			@loadeddata="loadeddata"
 			@pause="pause"
 			@play="paused = false"
 			@seeked="currentTime = audio.currentTime"
@@ -17,7 +17,7 @@
 			:duration="duration" />
 		<div v-if="!loading" class="player">
 			<img :src="episode.episodeImage">
-			<Infos />
+			<Infos :podcast-url="podcastUrl" />
 			<Controls :paused="paused" />
 			<Timer class="timer"
 				:current-time="currentTime"
@@ -49,18 +49,13 @@ export default {
 		Timer,
 		Volume,
 	},
-	props: {
-		podcastUrl: {
-			type: String,
-			required: true,
-		},
-	},
 	data() {
 		return {
 			currentTime: 0,
 			duration: 0,
 			loading: true,
 			paused: false,
+			podcastUrl: atob(this.$route.params.url),
 			volume: 1,
 		}
 	},
@@ -73,6 +68,13 @@ export default {
 		},
 	},
 	methods: {
+		loadeddata() {
+			this.loading = false
+
+			if (this.episode.episodeAction) {
+				this.audio.currentTime = this.episode.episodeAction.position
+			}
+		},
 		pause() {
 			this.paused = true
 			this.track()
@@ -85,9 +87,9 @@ export default {
 					guid: this.episode.episodeGuid,
 					action: 'play',
 					timestamp: formatEpisodeTimestamp(new Date()),
-					started: this.episode.episodeAction ? this.episode.episodeAction.started : 0,
-					position: this.currentTime,
-					total: this.duration,
+					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)
@@ -117,7 +119,7 @@ export default {
 	}
 
 	.timer {
-		width: 25%;
+		width: 30%;
 	}
 
 	.volume {

src/components/Player/Infos.vue

@@ -3,7 +3,7 @@
 		<a :href="episode.episodeLink" target="_blank">
 			<strong>{{ episode.episodeName }}</strong>
 		</a>
-		<router-link v-if="$route.params.url" :to="$route.params.url">
+		<router-link :to="podcastUrl">
 			<i>{{ episode.podcastName }}</i>
 		</router-link>
 	</div>
@@ -12,6 +12,12 @@
 <script>
 export default {
 	name: 'Infos',
+	props: {
+		podcastUrl: {
+			type: String,
+			required: true,
+		},
+	},
 	computed: {
 		episode() {
 			return this.$store.state.player.episode
@@ -25,6 +31,6 @@ export default {
         display: flex;
 		flex-direction: column;
 		justify-content: center;
-		width: 45%;
+		width: 40%;
     }
 </style>

src/components/Player/ProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div @click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
+	<div @click="(event) => audio.currentTime = event.x * duration / event.target.offsetWidth">
 		<NcProgressBar size="medium" :value="currentTime * 100 / duration" />
 	</div>
 </template>

src/components/Player/Volume.vue

@@ -77,7 +77,7 @@ export default {
 
 	input {
 		transform: rotate(270deg);
-		width: 60%;
+		width: 4rem;
 	}
 
 	.pointer {

src/utils/time.js

@@ -40,11 +40,11 @@ export const formatTimer = (date) => {
 
 export const formatEpisodeTimestamp = (date) => {
 	const year = date.getFullYear()
-	const month = date.getMonth().padStart(2, '0')
-	const day = date.getDate().padStart(2, '0')
-	const hours = date.getHours().padStart(2, '0')
-	const mins = date.getMinutes().padStart(2, '0')
-	const secs = date.getSeconds().padStart(2, '0')
+	const month = date.getMonth().toString().padStart(2, '0')
+	const day = date.getDate().toString().padStart(2, '0')
+	const hours = date.getHours().toString().padStart(2, '0')
+	const mins = date.getMinutes().toString().padStart(2, '0')
+	const secs = date.getSeconds().toString().padStart(2, '0')
 
 	return `${year}-${month}-${day}T${hours}:${mins}:${secs}`
 }