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

<template>
	<AppSidebar
		v-show="showSidebar"
		:title="sidebarStation.name"
		:subtitle="stationTags"
		:background="sidebarStation.favicon"
		class="has-preview"
		@close="toggleSidebar">
		<div class="configBox">
			<span class="icon icon-link" />
			<span class="title">
				{{ t('radio', 'Stream URL') }}
			</span>
			<div class="content">
				<input type="text" :value="urlResolved" disabled="disabled">
				<Actions>
					<ActionButton icon="icon-clippy" @click="copyLink">
						{{ t('radio', 'Copy link to clipboard') }}
					</ActionButton>
				</Actions>
			</div>
		</div>
		<div class="configBox">
			<span class="icon icon-external" />
			<span class="title">
				{{ t('radio', '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">
				{{ t('radio', '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">
				{{ t('radio', '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'
import { showError, showSuccess } from '@nextcloud/dialogs'

export default {
	name: 'Sidebar',
	components: {
		AppSidebar,
		Actions,
		ActionButton,
	},
	props: {
		showSidebar: {
			type: Boolean,
			default() { return false },
		},
		sidebarStation: {
			type: Object,
			default() {
				return {}
			},
		},
	},
	computed: {
		urlResolved() {
			if (this.sidebarStation.url_resolved) {
				return this.sidebarStation.url_resolved
			} else {
				return this.sidebarStation.urlresolved
			}
		},
		stationTags() {
			if (this.sidebarStation.tags) {
				return this.sidebarStation.tags.replaceAll(',', ', ')
			}
			return ''
		},
	},
	methods: {
		toggleSidebar(station) {
			this.$emit('toggleSidebar')
		},
		copyLink() {
			this.$copyText(this.urlResolved).then(
				function() {
					showSuccess(t('radio', 'Link copied to clipboard'))
				},
				function() {
					showError(t('radio', 'Error while copying link to clipboard'))
				}
			)
		},
	},
}
</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>