From 84b6003fe1f6bff76b907bdf6908d8643ebee7d1 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sat, 21 Nov 2020 10:50:26 +0100
Subject: [PATCH] prefill stations if window size too big

---
 package-lock.json          |  5 +++++
 package.json               |  1 +
 src/components/Main.vue    | 42 +++++++++++++++++++++++++-------------
 src/components/Sidebar.vue |  8 ++++----
 src/components/Table.vue   |  2 +-
 src/main.js                |  2 ++
 6 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8151682..b6b765c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ef91c26..05957ed 100644
--- a/package.json
+++ b/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"
 	},
diff --git a/src/components/Main.vue b/src/components/Main.vue
index da9dedf..8afe3e8 100644
--- a/src/components/Main.vue
+++ b/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 = {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ff5df09..d99c2f8 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index cbba36c..9f48816 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,5 +1,5 @@
 <template>
-	<table v-if="stationData" id="table">
+	<table>
 		<thead>
 			<tr>
 				<th class="iconColumn" />
diff --git a/src/main.js b/src/main.js
index d688f64..5d81ee7 100644
--- a/src/main.js
+++ b/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',