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

<template>
	<AppSidebar
		v-show="showSidebar"
		:title="sidebarStation.name"
		:subtitle="stationTags"
		:background="sidebarStation.favicon"
		class="has-preview"
		@close="showSidebar=false">
		<div class="configBox">
			<span class="icon icon-link" />
			<span class="title">
				Stream URL
			</span>
			<div class="content">
				<input type="text" :value="sidebarStation.url_resolved" disabled="disabled">
				<Actions>
					<ActionButton icon="icon-clippy" @click="copyLink( { url: shareUrl(share) })">
						{{ t('radio', 'Copy link to clipboard') }}
					</ActionButton>
				</Actions>
			</div>
		</div>
		<div class="configBox">
			<span class="icon icon-external" />
			<span class="title">
				Homepage
			</span>
			<div class="content">
				<span>
					<a
						:href="sidebarStation.homepage"
						target="new">
						{{ sidebarStation.homepage }}
					</a>
				</span>
			</div>
		</div>
		<div class="configBox">
			<span class="icon icon-details" />
			<span class="title">
				Country & Language
			</span>
			<div class="content">
				<span>
					{{ sidebarStation.country }}, {{ sidebarStation.language }}
				</span>
			</div>
		</div>
		<div class="configBox">
			<span class="icon icon-details" />
			<span class="title">
				Codec & Bitrate
			</span>
			<div class="content">
				<span>
					{{ sidebarStation.codec }}, {{ sidebarStation.bitrate }}
				</span>
			</div>
		</div>
	</AppSidebar>
</template>

<script>
import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'

export default {
	name: 'Sidebar',
	components: {
		AppSidebar,
		Actions,
		ActionButton,
	},
	props: {
		showSidebar: {
			type: Boolean,
			default() { return false },
		},
		sidebarStation: {
			type: Array,
			default() { return [] },
		},
	},
	computed: {
		stationTags() {
			if (this.sidebarStation.tags) {
				return this.sidebarStation.tags.replaceAll(',', ', ')
			}
			return ''
		},
	},
}
</script>

<style lang="scss" scoped>

.app-sidebar {
	&.has-preview::v-deep {
		.app-sidebar-header__figure {
			background-size: cover;
			height: 200px;
		}
	}
}

.configBox {
	padding: 0 15px;
	margin-bottom: 20px;
}

.configBox .title {
	font-size: 1.2em;
	display: block;
	margin-bottom: 15px;
}

.configBox .icon {
	float: left;
	margin: 4px 7px 0px 0px;
}

.configBox .content {
	display: flex;
	margin-left: 25px;
}

.configBox .content input {
	flex-grow: 1;
}

.configBox .content button {
	margin-top: -3px;
}

</style>