Commit 84b6003f authored by onny's avatar onny

prefill stations if window size too big

parent 05d6634d
Pipeline #215 failed with stages
in 11 minutes and 7 seconds
......@@ -11321,6 +11321,11 @@
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
},
"vue-resize-observer": {
"version": "1.0.32",
"resolved": "https://registry.npmjs.org/vue-resize-observer/-/vue-resize-observer-1.0.32.tgz",
"integrity": "sha512-Hz1xigu7RmEf4/7eO6Z7OhbYhaTJo87rEZu5XbzbvHn3+MUTMJe/FCtSowe+rwBc7WaPsKcxDp3izMIDUXe5Eg=="
},
"vue-router": {
"version": "3.4.9",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
......
......@@ -4,7 +4,8 @@
:station-data="tableData" />
<AppContent>
<Table
v-if="!pageLoading && tableData.length > 0"
v-show="!pageLoading && tableData.length > 0"
v-resize="onResize"
:station-data="tableData"
:favorites="favorites"
@doPlay="doPlay"
......@@ -69,11 +70,11 @@ export default {
},
emptyContentMessage() {
if (this.$route.name === 'FAVORITES') {
return 'No favorites yet'
return t('radio', 'No favorites yet')
} else if (this.$route.name === 'RECENT') {
return 'No recent stations yet'
return t('radio', 'No recent stations yet')
} else if (this.$route.name === 'SEARCH') {
return 'No search results'
return t('radio', 'No search results')
}
return 'No stations here'
},
......@@ -89,13 +90,13 @@ export default {
},
emptyContentDesc() {
if (this.$route.name === 'FAVORITES') {
return 'Stations you mark as favorite will show up here'
return t('radio', 'Stations you mark as favorite will show up here')
} else if (this.$route.name === 'RECENT') {
return 'Stations you recently played will show up here'
return t('radio', 'Stations you recently played will show up here')
} else if (this.$route.name === 'SEARCH') {
return 'No stations were found matching your search term'
return t('radio', 'No stations were found matching your search term')
}
return 'No stations here'
return t('radio', 'No stations here')
},
},
watch: {
......@@ -123,6 +124,19 @@ export default {
},
methods: {
onResize({ width, height }) {
const contentHeight = document.getElementById('app-content-vue').scrollHeight
const tableHeight = height
if (tableHeight < contentHeight) {
this.preFill()
}
},
preFill() {
const route = this.$route
this.loadStations(route.name)
},
async onRoute() {
this.tableData = []
this.pageLoading = true
......@@ -281,22 +295,22 @@ export default {
if (vm.$route.name === 'CATEGORIES') {
vm.tableData = [
{
name: 'Countries',
name: t('radio', 'Countries'),
type: 'folder',
path: '#/categories/countries',
},
{
name: 'States',
name: t('radio', 'States'),
type: 'folder',
path: '#/categories/states',
},
{
name: 'Languages',
name: t('radio', 'Languages'),
type: 'folder',
path: '#/categories/languages',
},
{
name: 'Tags',
name: t('radio', 'Tags'),
type: 'folder',
path: '#/categories/tags',
},
......@@ -305,7 +319,8 @@ export default {
return true
}
// FIXME: Skip loading more stations on certain sites
// FIXME: Implement pagination for fav & recent
// Skip loading more stations on certain sites
if (vm.tableData.length > 0
&& (vm.$route.name === 'FAVORITES'
|| vm.$route.name === 'RECENT')) {
......@@ -362,7 +377,6 @@ export default {
}
}
},
loadSettings() {
axios.defaults.headers.common = {
......
......@@ -9,7 +9,7 @@
<div class="configBox">
<span class="icon icon-link" />
<span class="title">
Stream URL
{{ t('radio', 'Stream URL') }}
</span>
<div class="content">
<input type="text" :value="urlResolved" disabled="disabled">
......@@ -23,7 +23,7 @@
<div class="configBox">
<span class="icon icon-external" />
<span class="title">
Homepage
{{ t('radio', 'Homepage') }}
</span>
<div class="content">
<span>
......@@ -38,7 +38,7 @@
<div class="configBox">
<span class="icon icon-details" />
<span class="title">
Country & Language
{{ t('radio', 'Country & Language') }}
</span>
<div class="content">
<span>
......@@ -49,7 +49,7 @@
<div class="configBox">
<span class="icon icon-details" />
<span class="title">
Codec & Bitrate
{{ t('radio', 'Codec & Bitrate') }}
</span>
<div class="content">
<span>
......
<template>
<table v-if="stationData" id="table">
<table>
<thead>
<tr>
<th class="iconColumn" />
......
......@@ -29,6 +29,7 @@ import App from './App'
import VueBlurHash from 'vue-blurhash'
import VueClipboard from 'vue-clipboard2'
import VueResizeObserver from 'vue-resize-observer'
import 'vue-blurhash/dist/vue-blurhash.css'
......@@ -40,6 +41,7 @@ Vue.prototype.$apiUrl = 'https://de1.api.radio-browser.info'
Vue.use(VueClipboard)
Vue.use(VueBlurHash)
Vue.use(VueResizeObserver)
export default new Vue({
el: '#content',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment