repod/src/components/Player/Bar.vue

<template>
	<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>
	</div>
</template>

<script>
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'
import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'

export default {
	name: 'Bar',
	components: {
		NcLoadingIcon,
		NcProgressBar,
		Pause,
		Play,
		VolumeHigh,
		VolumeLow,
		VolumeMedium,
		VolumeMute,
	},
	data() {
		return {
			currentTime: 0,
			loading: true,
			paused: true,
			volume: 0,
		}
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
		episode() {
			return this.$store.state.player.episode
		},
		podcastLink() {
			return atob(this.$route.params.url)
		},
	},
}
</script>

<style scoped>
	.footer {
		background-color: rgba(66, 66, 66, .9);
		bottom: 0;
		height: 6rem;
		right: 0;
		position: absolute;
		width: 100%;
		z-index: 2000;
	}

	.infos {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 44%;
	}

	.player {
		display: flex;
		gap: 1rem;
		height: calc(6rem - 6px);
	}

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