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

<template>
	<div id="app-settings">
		<div
			class="wrap"
			:class="{ buffering: isBuffering }">
			<button
				class="player"
				:class="isPlaying ? 'pause' : 'play'" />
		</div>
		<div id="volumeicon" class="full" />
		<input
			v-model="sliderVal"
			class="volume"
			type="range"
			name="volume"
			min="0"
			max="1"
			step=".05"
			@input="changeVolume">
		<span class="stationMetadata" />
	</div>
</template>

<script>
export default {
	data: () => ({
		isPlaying: true,
		isBuffering: true,
	}),
	methods: {
		changeVolume() {
			this.$emit('changeVolume', this.sliderVal)
		},
	},
}
</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;
		}
	}

	.station_metadata{
		margin: 2px 20px 5px 20px;
		padding-left: 5px;
		white-space:nowrap;
		overflow:hidden;
	}

	#volumeicon {
		width: 20px;
		height: 20px;
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
		left: 75px;
		top: 14px;
	}

	#volumeicon.full {
		background: red;
		/* background-image: url('../img/sound_full.png'); */
	}

	#volumeicon.mid {
		background: yellow;
		/* background-image: url('../img/sound_mid.png'); */
	}

	#volumeicon.silent {
		background: green;
		/* background-image: url('../img/sound_silent.png'); */
	}

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

</style>