repod/src/components/Player/Bar.vue

<template>
	<div v-if="episode" class="footer">
		<audio id="audio-player"
			autoplay
			preload
			:src="episode.episodeUrl"
			@durationchange="duration = audio.duration"
			@loadeddata="loading = false"
			@pause="paused = audio.paused"
			@play="paused = audio.paused"
			@seeked="currentTime = audio.currentTime"
			@timeupdate="currentTime = audio.currentTime"
			@volumechange="volume = audio.volume" />
		<NcLoadingIcon v-if="loading" />
		<div v-if="!loading"
			class="pointer"
			@click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
			<NcProgressBar size="medium" :value="currentTime * 100 / 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>
				<router-link :to="$route.params.url">
					<i>{{ episode.podcastName }}</i>
				</router-link>
			</div>
			<PauseButton v-if="!paused"
				class="pointer"
				:size="50"
				@click="() => audio.pause()" />
			<PlayButton v-if="paused"
				class="pointer"
				:size="50"
				@click="() => audio.play()" />
			<StopButton class="pointer"
				:size="30"
				@click="stop" />
			<div class="time">
				<span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span>
				<span class="divider">/</span>
				<span class="length">{{ formatTimer(new Date(duration*1000)) }}</span>
			</div>
			<div class="volume">
				<VolumeHigh v-if="volume > 0.7"
					class="pointer"
					:size="30"
					@click="mute" />
				<VolumeLow v-if="volume > 0 && volume <= 0.3"
					class="pointer"
					:size="30"
					@click="mute" />
				<VolumeMedium v-if="volume > 0.3 && volume <= 0.7"
					class="pointer"
					:size="30"
					@click="mute" />
				<VolumeMute v-if="volume == 0"
					class="pointer"
					:size="30"
					@click="unmute" />
			</div>
		</div>
	</div>
</template>

<script>
import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue'
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 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'
import { formatTimer } from '../../utils/time.js'

export default {
	name: 'Bar',
	components: {
		NcLoadingIcon,
		NcProgressBar,
		PauseButton,
		PlayButton,
		StopButton,
		VolumeHigh,
		VolumeLow,
		VolumeMedium,
		VolumeMute,
	},
	data() {
		return {
			currentTime: 0,
			duration: 0,
			loading: true,
			paused: true,
			volume: 1,
			volumeMuted: 0,
		}
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
		episode() {
			return this.$store.state.player.episode
		},
	},
	methods: {
		formatTimer,
		mute() {
			this.volumeMuted = this.audio.volume
			this.audio.volume = 0
		},
		stop() {
			this.$store.commit('player/play', null)
		},
		unmute() {
			this.audio.volume = this.volumeMuted
		},
	},
}
</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: 45%;
	}

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

	.pointer {
		cursor: pointer;
	}

	.time, .volume {
		align-items: center;
		display: flex;
		gap: 5px;
		justify-content: center;
	}

	.time {
		width: 25%;
	}

	.volume {
		width: 10%;
	}
</style>