repod/src/components/Player/Bar.vue

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

<script>
import { 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: {
		NcProgressBar,
		Pause,
		Play,
		VolumeHigh,
		VolumeLow,
		VolumeMedium,
		VolumeMute,
	},
	computed: {
		audio() {
			return new Audio(this.episode.episodeUrl)
		},
		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);
	}
</style>