diff --git a/src/components/Main.vue b/src/components/Main.vue index 1b1ac16..20e773b 100644 --- a/src/components/Main.vue +++ b/src/components/Main.vue @@ -16,29 +16,52 @@ :station-data="tableData" :favorites="favorites" @doPlay="doPlay" - @doFavor="doFavor" /> + @doFavor="doFavor" + @toggleSidebar="toggleSidebar" /> - - No favorites yet - - - - No search results - - + + +
+

{{ t('radio', 'Stream URL') }}

+ +
+
@@ -48,6 +71,8 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent' import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs' import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb' import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' +import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar' +import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab' import Navigation from './Navigation' import Table from './Table' import { Howl } from 'howler' @@ -68,17 +93,27 @@ export default { Breadcrumb, Table, EmptyContent, + AppSidebar, + AppSidebarTab, }, data: () => ({ tableData: [], pageLoading: false, blurHashes: require('../assets/blurHashes.json'), favorites: null, + showSidebar: false, + sidebarStation: [], }), computed: { player() { return this.$store.state.player }, + stationTags() { + if (this.sidebarStation.tags) { + return this.sidebarStation.tags.replaceAll(',', ', ') + } + return '' + }, }, watch: { $route: 'onRoute', @@ -331,6 +366,11 @@ export default { vm.favorites = favorites }) }, + + toggleSidebar(station) { + this.showSidebar = true + this.sidebarStation = station + }, }, } diff --git a/src/components/Table.vue b/src/components/Table.vue index 9772889..fe25695 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -44,7 +44,10 @@ @click="doFavor(idx, station)"> {{ t('radio', 'Remove from favorites') }} - + {{ t('radio', 'Details') }} @@ -85,6 +88,9 @@ export default { doFavor(idx, station) { this.$emit('doFavor', station) }, + toggleSidebar(station) { + this.$emit('toggleSidebar', station) + }, }, }