beginning to implement add custom radio stations, export favorites
This commit is contained in:
Jonas Heinrich
parent
c04e167bc2
commit
a586eddaf5
219
src/views/Categories.vue
Normal file
219
src/views/Categories.vue
Normal file
@ -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>
|
||||
223
src/views/Favorites.vue
Normal file
223
src/views/Favorites.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user