Player nearly ready

src/components/Discover/TopItem.vue

@@ -7,7 +7,6 @@
 <script>
 export default {
 	name: 'TopItem',
-	components: {},
 	props: {
 		author: {
 			type: String,

src/components/Player/Bar.vue

@@ -1,37 +1,49 @@
 <template>
-	<fragment>
-		<div v-if="episode" class="footer">
-			<NcProgressBar size="medium" :value="60" />
-			<div class="player">
-				<img :src="episode.episodeImage">
-				<div class="infos">
-					<a :href="episode.episodeLink" target="_blank">
-						<strong>{{ episode.episodeName }}</strong>
-					</a>
-					<a :href="podcastLink" target="_blank">
-						<i>{{ episode.podcastName }}</i>
-					</a>
-				</div>
-				<Pause v-if="!audio.paused" :size="50" @click="() => audio.play()" />
-				<Play v-if="audio.paused" :size="50" @click="() => audio.pause()" />
-				<div class="time">
-					<span class="current">0:00</span>
-					<span class="divider">/</span>
-					<span class="length">{{ audio.duration }}</span>
-				</div>
-				<div class="volume">
-					<VolumeHigh v-if="audio.volume > 0.7" :size="30" />
-					<VolumeLow v-if="audio.volume > 0 && audio.volume <= 0.3" :size="30" />
-					<VolumeMedium v-if="audio.volume > 0.3 && audio.volume <= 0.7" :size="30" />
-					<VolumeMute v-if="audio.volume == 0" :size="30" />
-				</div>
+	<div v-if="episode" class="footer">
+		<audio id="audio-player"
+			autoplay
+			preload
+			:src="episode.episodeUrl"
+			@loadeddata="loading = false"
+			@pause="paused = audio.paused"
+			@play="paused = audio.paused"
+			@seeked="currentTime = audio.currentTime"
+			@volumechange="volume = audio.volume" />
+		<NcLoadingIcon v-if="loading" />
+		<div v-if="!loading"
+			class="progress"
+			@click="(event) => audio.fastSeek(event.x * audio.duration / event.target.offsetWidth)">
+			<NcProgressBar size="medium" :value="currentTime * 100 / audio.duration" />
+		</div>
+		<div v-if="!loading" class="player">
+			<img :src="episode.episodeImage">
+			<div class="infos">
+				<a :href="episode.episodeLink" target="_blank">
+					<strong>{{ episode.episodeName }}</strong>
+				</a>
+				<a :href="podcastLink" target="_blank">
+					<i>{{ episode.podcastName }}</i>
+				</a>
+			</div>
+			<Pause v-if="!paused" :size="50" @click="() => audio.pause()" />
+			<Play v-if="paused" :size="50" @click="() => audio.play()" />
+			<div class="time">
+				<span class="current">{{ currentTime }}</span>
+				<span class="divider">/</span>
+				<span class="length">{{ audio.duration }}</span>
+			</div>
+			<div class="volume">
+				<VolumeHigh v-if="audio.volume > 0.7" :size="30" />
+				<VolumeLow v-if="audio.volume > 0 && audio.volume <= 0.3" :size="30" />
+				<VolumeMedium v-if="audio.volume > 0.3 && audio.volume <= 0.7" :size="30" />
+				<VolumeMute v-if="audio.volume == 0" :size="30" />
 			</div>
 		</div>
-	</fragment>
+	</div>
 </template>
 
 <script>
-import { NcProgressBar } from '@nextcloud/vue'
+import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue'
 import Pause from 'vue-material-design-icons/Pause.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
@@ -42,6 +54,7 @@ import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'
 export default {
 	name: 'Bar',
 	components: {
+		NcLoadingIcon,
 		NcProgressBar,
 		Pause,
 		Play,
@@ -50,9 +63,17 @@ export default {
 		VolumeMedium,
 		VolumeMute,
 	},
+	data() {
+		return {
+			currentTime: 0,
+			loading: true,
+			paused: true,
+			volume: 0,
+		}
+	},
 	computed: {
 		audio() {
-			return new Audio(this.episode.episodeUrl)
+			return document.getElementById('audio-player')
 		},
 		episode() {
 			return this.$store.state.player.episode
@@ -87,4 +108,8 @@ export default {
 		gap: 1rem;
 		height: calc(6rem - 6px);
 	}
+
+	.progress {
+		cursor: pointer;
+	}
 </style>