prefill stations if window size too big

package-lock.json

@@ -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",

package.json

@@ -43,6 +43,7 @@
 		"vue": "^2.6.12",
 		"vue-blurhash": "^0.1.2",
 		"vue-clipboard2": "^0.3.1",
+		"vue-resize-observer": "^1.0.32",
 		"vue-router": "^3.4.9",
 		"vuex": "^3.5.1"
 	},

src/components/Main.vue

@@ -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 = {

src/components/Sidebar.vue

@@ -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>

src/components/Table.vue

@@ -1,5 +1,5 @@
 <template>
-	<table v-if="stationData" id="table">
+	<table>
 		<thead>
 			<tr>
 				<th class="iconColumn" />

src/main.js

@@ -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',