nextcloud-app-radio/src/components/Player.vue

<template>
	<div id="app-settings">
		<div
			class="wrap"
			:class="{ buffering: player.isBuffering }">
			<button
				class="player"
				:class="player.isPlaying ? 'pause' : 'play'"
				@click="togglePlay" />
		</div>
		<div
			class="volumeIcon"
			:class="player.volume == 0 ? 'volumeMute' : 'volumeFull'"
			@click="toggleMute" />
		<input
			class="volume"
			type="range"
			name="volume"
			min="0"
			max="1"
			step=".05"
			:value="player.volume"
			@input="changeVolume($event)">
		<span class="playerMetadata">
			{{ player.title }}
		</span>
	</div>
</template>

<script>
export default {
	computed: {
		player() {
			return this.$store.state.player
		},
	},
	methods: {
		changeVolume() {
			this.$store.dispatch('changeVolume', event.target.value)
		},
		toggleMute() {
			this.$store.dispatch('toggleMute')
		},
		togglePlay() {
			this.$store.dispatch('togglePlay')
		},
	},
}
</script>

<style>

	.wrap {
		background: var(--color-main-background);
		border: 3px solid #0082c9;
		float: left;
		border-radius: 50%;
		margin: 10px;
	}

	.player{
		height:50px;
		width: 50px;
		background-color: #0082c9;
		mask-repeat: no-repeat;
		mask-size: 55%;
		mask-position: 70% 50%;
	}

	.play{
		mask-image: var(--icon-play-000);
		transition: mask-image 0.4s ease-in-out;
	}

	.pause{
		mask-image: var(--icon-pause-000);
		mask-position: 58% 50%;
		transition: mask-image 0.4s ease-in-out;
	}

	.buffering {
		border: 3px solid #0082c9;
		animation: buffering 2s infinite linear;
	}

	@keyframes buffering {
		0% {
			border-color: #0082c9;
		}
		50% {
			border-color: var(--color-main-background);
		}
		100% {
			border-color: #0082c9;
		}
	}

	.playerMetadata{
		white-space: nowrap;
		overflow: hidden;
		background: red;
		position: relative;

	}

	.volumeIcon {
		width: 25px;
		height: 25px;
		position: relative;
		left: 85px;
		top: 20px;
		cursor: pointer;
	}

	.volumeFull {
		background-color: #0082c9;
		mask-repeat: no-repeat;
		mask-size: 100%;
		mask-image: var(--icon-sound-000);
	}

	.volumeMute {
		background-color: #0082c9;
		mask-repeat: no-repeat;
		mask-size: 100%;
		mask-image: var(--icon-sound-off-000);
	}

	.volume{
		width: 165px;
		display: inline-block;
		position: relative;
		left: 40px;
		top: -12px;
	}

</style>