From a586eddaf5e13c3d7cb53279cf0f30b3123aaa8f Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 8 Mar 2021 13:30:00 +0100
Subject: [PATCH] beginning to implement add custom radio stations, export
 favorites

---
 src/views/Categories.vue | 219 ++++++++++++++++++++++++++++++++++++++
 src/views/Favorites.vue  | 223 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 442 insertions(+)
 create mode 100644 src/views/Categories.vue
 create mode 100644 src/views/Favorites.vue

diff --git a/src/views/Categories.vue b/src/views/Categories.vue
new file mode 100644
index 0000000..a48496a
--- /dev/null
+++ b/src/views/Categories.vue
@@ -0,0 +1,219 @@
+<!--
+  - @copyright Copyright (c) 2021 Jonas Heinrich
+  -
+  - @author Jonas Heinrich <onny@project-insanity.org>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Content app-name="radio">
+		<Navigation
+			:station-data="stations" />
+		<AppContent>
+			<Table
+				v-show="!pageLoading && stations.length > 0"
+				:station-data="stations"
+				:favorites="favorites"
+				@doPlay="doPlay"
+				@doFavor="doFavor"
+				@toggleSidebar="toggleSidebar" />
+			<EmptyContent
+				v-if="pageLoading"
+				icon="icon-loading" />
+			<EmptyContent
+				v-if="stations.length === 0 && !pageLoading"
+				:icon="emptyContentIcon">
+				{{ emptyContentMessage }}
+				<template #desc>
+					{{ emptyContentDesc }}
+				</template>
+			</EmptyContent>
+		</AppContent>
+		<Sidebar
+			:show-sidebar="showSidebar"
+			:sidebar-station="sidebarStation"
+			@toggleSidebar="toggleSidebar" />
+	</Content>
+</template>
+
+<script>
+import Content from '@nextcloud/vue/dist/Components/Content'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Navigation from './../components/Navigation'
+import Table from './../components/Table'
+import Sidebar from './../components/Sidebar'
+import { mapGetters, mapActions } from 'vuex'
+
+import { RadioBrowserApi } from './../services/RadioBrowserApi'
+const apiClient = new RadioBrowserApi()
+
+export default {
+	name: 'Categories',
+	components: {
+		Navigation,
+		Content,
+		AppContent,
+		EmptyContent,
+		Table,
+		Sidebar,
+	},
+	data: () => ({
+		pageLoading: false,
+		blurHashes: require('../assets/blurHashes.json'),
+		showSidebar: false,
+		sidebarStation: {},
+		tableData: [],
+	}),
+	computed: {
+		...mapGetters([
+			'favorites',
+			'isFavorite',
+		]),
+		stations() {
+			return this.tableData
+		},
+		emptyContentMessage() {
+			return t('radio', 'No stations here')
+		},
+		emptyContentIcon() {
+			return 'icon-radio'
+		},
+		emptyContentDesc() {
+			return t('radio', 'No stations here')
+		},
+	},
+	watch: {
+		$route: 'onRoute',
+	},
+	mounted() {
+		this.onRoute()
+		this.scroll()
+	},
+	methods: {
+		...mapActions([
+			'addFavorite',
+			'removeFavorite',
+			'addRecent',
+			'playStation',
+		]),
+
+		async onRoute() {
+			this.tableData = []
+			this.pageLoading = true
+			this.loadStations()
+		},
+
+		/**
+			 * Favor a new station by sending the information to the server
+			 * @param {Object} station Station object
+			 */
+		async doFavor(station) {
+			if (this.isFavorite(station)) {
+				this.removeFavorite(station)
+			} else {
+				this.addFavorite(station)
+			}
+		},
+
+		/**
+			 * Start playing a radio station and counting the playback
+			 * @param {Object} station Station object
+			 */
+		doPlay(station) {
+
+			/* Start streaming station */
+			this.playStation(station)
+
+			/* Count click */
+			apiClient.countClick(station)
+
+			/* Put into recent stations */
+			this.addRecent(station)
+
+		},
+
+		async loadStations() {
+
+			// Skip loading more stations on certain sites
+			if (this.tableData.length > 0) {
+				return true
+			}
+
+			if (this.$route.path === '/categories') {
+				this.tableData = [
+					{
+						name: t('radio', 'Countries'),
+						type: 'folder',
+						path: '/categories/countries',
+					},
+					{
+						name: t('radio', 'States'),
+						type: 'folder',
+						path: '/categories/states',
+					},
+					{
+						name: t('radio', 'Languages'),
+						type: 'folder',
+						path: '/categories/languages',
+					},
+					{
+						name: t('radio', 'Tags'),
+						type: 'folder',
+						path: '/categories/tags',
+					},
+				]
+				this.pageLoading = false
+				return true
+			} else if (this.$route.params.category && !this.$route.params.query) {
+				const stations
+					= await apiClient.queryCategory(this.$route.params.category)
+				this.tableData = this.tableData.concat(stations)
+				this.pageLoading = false
+			} else if (this.$route.params.category && this.$route.params.query) {
+				const stations
+					= await apiClient.queryByCategory(this.$route.params.category,
+						this.$route.params.query)
+				this.tableData = this.tableData.concat(stations)
+				this.pageLoading = false
+			}
+
+		},
+
+		toggleSidebar(station = null) {
+			if (station) {
+				this.showSidebar = true
+				this.sidebarStation = station
+			} else {
+				this.showSidebar = false
+			}
+		},
+
+	},
+}
+</script>
+
+<style>
+
+@media only screen and (min-width: 1024px) {
+	.app-navigation-toggle {
+		display: none;
+	}
+}
+
+</style>
diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue
new file mode 100644
index 0000000..0a804bc
--- /dev/null
+++ b/src/views/Favorites.vue
@@ -0,0 +1,223 @@
+<!--
+  - @copyright Copyright (c) 2021 Jonas Heinrich
+  -
+  - @author Jonas Heinrich <onny@project-insanity.org>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Content app-name="radio">
+		<Navigation
+			:station-data="stations" />
+		<AppContent>
+			<div class="controls">
+				<Breadcrumbs @dropped="dropped">
+					<Breadcrumb title="Home" href="#/" @dropped="droppedOnCrumb" />
+					<Breadcrumb title="Favorites" href="#/favorites" />
+				</Breadcrumbs>
+				<Actions>
+					<ActionButton icon="icon-add" @click="alert('Add')">
+						Add station
+					</ActionButton>
+					<ActionButton icon="icon-download" @click="alert('Export')">
+						Export favorites
+					</ActionButton>
+				</Actions>
+			</div>
+			<Table
+				v-show="!pageLoading && stations.length > 0"
+				:station-data="stations"
+				:favorites="favorites"
+				@doPlay="doPlay"
+				@doFavor="doFavor"
+				@toggleSidebar="toggleSidebar" />
+			<EmptyContent
+				v-if="pageLoading"
+				icon="icon-loading" />
+			<EmptyContent
+				v-if="stations.length === 0 && !pageLoading"
+				:icon="emptyContentIcon">
+				{{ emptyContentMessage }}
+				<template #desc>
+					{{ emptyContentDesc }}
+				</template>
+			</EmptyContent>
+		</AppContent>
+		<Sidebar
+			:show-sidebar="showSidebar"
+			:sidebar-station="sidebarStation"
+			@toggleSidebar="toggleSidebar" />
+	</Content>
+</template>
+
+<script>
+import Content from '@nextcloud/vue/dist/Components/Content'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
+import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Navigation from './../components/Navigation'
+import Table from './../components/Table'
+import Sidebar from './../components/Sidebar'
+import { mapGetters, mapActions } from 'vuex'
+
+import { RadioBrowserApi } from './../services/RadioBrowserApi'
+const apiClient = new RadioBrowserApi()
+
+export default {
+	name: 'Favorites',
+	components: {
+		Navigation,
+		Content,
+		AppContent,
+		Table,
+		EmptyContent,
+		Breadcrumbs,
+		Breadcrumb,
+		Actions,
+		ActionButton,
+		Sidebar,
+	},
+	data: () => ({
+		pageLoading: false,
+		blurHashes: require('../assets/blurHashes.json'),
+		showSidebar: false,
+		sidebarStation: {},
+		tableData: [],
+	}),
+	computed: {
+		...mapGetters([
+			'favorites',
+			'isFavorite',
+		]),
+		stations() {
+			return this.favorites
+		},
+		emptyContentMessage() {
+			return t('radio', 'No favorites yet')
+		},
+		emptyContentIcon() {
+			return 'icon-star'
+		},
+		emptyContentDesc() {
+			return t('radio', 'Stations you mark as favorite will show up here')
+		},
+	},
+	watch: {
+		$route: 'onRoute',
+	},
+	mounted() {
+		this.onRoute()
+		this.scroll()
+	},
+	methods: {
+		...mapActions([
+			'addFavorite',
+			'removeFavorite',
+			'addRecent',
+			'playStation',
+		]),
+
+		async onRoute() {
+			this.tableData = []
+			this.pageLoading = true
+			this.loadStations()
+		},
+
+		/**
+			 * Favor a new station by sending the information to the server
+			 * @param {Object} station Station object
+			 */
+		async doFavor(station) {
+			if (this.isFavorite(station)) {
+				this.removeFavorite(station)
+			} else {
+				this.addFavorite(station)
+			}
+		},
+
+		/**
+			 * Start playing a radio station and counting the playback
+			 * @param {Object} station Station object
+			 */
+		doPlay(station) {
+
+			/* Start streaming station */
+			this.playStation(station)
+
+			/* Count click */
+			apiClient.countClick(station)
+
+			/* Put into recent stations */
+			this.addRecent(station)
+
+		},
+
+		async loadStations() {
+
+			// Skip loading more stations on certain sites
+			if (this.tableData.length > 0) {
+				return true
+			}
+
+			this.pageLoading = false
+
+		},
+
+		toggleSidebar(station = null) {
+			if (station) {
+				this.showSidebar = true
+				this.sidebarStation = station
+			} else {
+				this.showSidebar = false
+			}
+		},
+
+	},
+}
+</script>
+
+<style>
+
+.controls {
+	position: sticky;
+	display: flex;
+	justify-content: flex-start;
+}
+
+.breadcrumb {
+	flex-grow: 0 !important;
+	width: auto !important;
+}
+
+.app-navigation-toggle {
+	display: none;
+}
+
+@media only screen and (max-width: 1024px) {
+	.app-navigation-toggle {
+		display: block;
+	}
+	.controls {
+		margin-left: 35px;
+	}
+}
+
+</style>