fix and style sidebar

src/components/Main.vue

@@ -34,6 +34,9 @@
 				</EmptyContent>
 			</template>
 		</AppContent>
+		<Sidebar
+			:show-sidebar="showSidebar"
+			:sidebar-station="sidebarStation" />
 	</Content>
 </template>
 
@@ -47,6 +50,7 @@ import axios from '@nextcloud/axios'
 
 import Navigation from './Navigation'
 import Table from './Table'
+import Sidebar from './Sidebar'
 
 import { Howl, Howler } from 'howler'
 
@@ -60,6 +64,7 @@ export default {
 		AppContent,
 		Table,
 		EmptyContent,
+		Sidebar,
 	},
 	data: () => ({
 		tableData: [],
@@ -73,12 +78,6 @@ export default {
 		player() {
 			return this.$store.state.player
 		},
-		stationTags() {
-			if (this.sidebarStation.tags) {
-				return this.sidebarStation.tags.replaceAll(',', ', ')
-			}
-			return ''
-		},
 	},
 	watch: {
 		$route: 'onRoute',

src/components/Sidebar.vue

@@ -1,14 +1,62 @@
 <template>
-	<AppSidebar v-show="showSidebar"
+	<AppSidebar
+		v-show="showSidebar"
 		:title="sidebarStation.name"
 		:subtitle="stationTags"
+		:background="sidebarStation.favicon"
+		class="has-preview"
 		@close="showSidebar=false">
-		<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 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>
 
@@ -24,5 +72,65 @@ export default {
 		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>