From 26d494a6966ceaf089e04b874260d780b9b453ec Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Fri, 23 Oct 2020 22:18:05 +0200
Subject: [PATCH] add blurhash image preview

---
 package-lock.json         |  5 +++++
 package.json              |  1 +
 src/components/Main.vue   | 15 +++++++--------
 src/components/Player.vue |  7 +++++--
 src/components/Table.vue  | 15 +++++++--------
 src/main.js               |  5 +++++
 src/store.js              | 31 +++++++++++++++++++++----------
 7 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5128c2b..7d12192 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11267,6 +11267,11 @@
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
 			"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
 		},
+		"vue-blurhash": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.2.tgz",
+			"integrity": "sha512-VfIiQW2+F1HsJktumGsEwCsp0CYLdnmTcCA3nMvZ8Bze8bkpp9tonIygzBnjUKN0WZyOxb22i9QQ+lqgngjedA=="
+		},
 		"vue-color": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.7.1.tgz",
diff --git a/package.json b/package.json
index ace6eaf..9975850 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"jquery": "^3.5.1",
 		"music-metadata": "^7.4.1",
 		"vue": "^2.6.12",
+		"vue-blurhash": "^0.1.2",
 		"vue-router": "^3.4.7",
 		"vuex": "^3.5.1"
 	},
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 7b78193..9c10e15 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -33,7 +33,6 @@ import { Howl } from 'howler'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
-import store from '../store'
 
 let audioPlayer = null
 
@@ -109,8 +108,6 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		doPlay(station) {
-			this.player.isPlaying = true
-
 			if (audioPlayer !== null) {
 				audioPlayer.fade(1, 0, 500) // FIXME persistent volume state
 				// FIXME fade out
@@ -119,6 +116,7 @@ export default {
 				{
 					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version, doesnt seem to work
 				})
+			const vm = this
 			audioPlayer = new Howl({
 				src: [station.url_resolved],
 				volume: 0,
@@ -128,15 +126,16 @@ export default {
 					}
 				},
 				onplay() {
-					store.player.isPlaying = true
-					store.player.isBuffering = false
+					vm.$store.dispatch('isPlaying', true)
+					vm.$store.dispatch('isBuffering', false)
 				},
 				onpause() {
-					store.player.isPlaying = false
-					store.player.isBuffering = false
+					vm.$store.dispatch('isPlaying', false)
+					vm.$store.dispatch('isBuffering', false)
 				},
 				onload() {
-					store.player.isBuffering = true
+					vm.$store.dispatch('isPlaying', true)
+					vm.$store.dispatch('isBuffering', true)
 				},
 			})
 			audioPlayer.play()
diff --git a/src/components/Player.vue b/src/components/Player.vue
index a9fb9a8..af402f0 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -19,7 +19,6 @@
 			value="this.volume"
 			@input="changeVolume">
 		<span class="stationMetadata" />
-		{{ player.isPlaying }}
 	</div>
 </template>
 
@@ -28,7 +27,11 @@ export default {
 	data: () => ({
 		sliderVal: 0,
 	}),
-	inject: ['player'],
+	computed: {
+		player() {
+			return this.$store.state.player
+		},
+	},
 	methods: {
 		changeVolume() {
 			this.$emit('changeVolume', this.sliderVal)
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 3bcd17f..47ae330 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -15,10 +15,14 @@
 				:key="idx"
 				:class="{ selected: idx === activeItem}">
 				<td @click="doPlay(idx, station)">
-					<div class="stationIcon"
-						:style="{ backgroundImage: `url('${ station.favicon }')` }">
+					<blur-hash-image
+						class="stationIcon"
+						width="32"
+						height="32"
+						hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
+						:src="station.favicon">
 						<span :class="{ 'icon-starred': stationsFavored.includes(idx) }" />
-					</div>
+					</blur-hash-image>
 				</td>
 				<td class="nameColumn" @click="doPlay(idx, station)">
 					<span class="innernametext">
@@ -153,11 +157,6 @@ table {
 		}
 
 		.stationIcon {
-			width: 32px;
-			height: 32px;
-			background-repeat: no-repeat;
-			background-size: contain;
-			background-position: center;
 			cursor: pointer;
 		}
 
diff --git a/src/main.js b/src/main.js
index 089187a..125428d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,11 +28,16 @@ import { translate, translatePlural } from '@nextcloud/l10n'
 import App from './App'
 
 import jquery from 'jquery'
+import VueBlurHash from 'vue-blurhash'
+
+import 'vue-blurhash/dist/vue-blurhash.css'
 
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 Vue.prototype.$jquery = jquery
 
+Vue.use(VueBlurHash)
+
 export default new Vue({
 	el: '#content',
 	store,
diff --git a/src/store.js b/src/store.js
index 9571b2a..a100976 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,16 +3,27 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	player: {
-		isPlaying: false,
-		isBuffering: false,
-		volume: 0,
-		count: 0,
-	},
-	mutations: {
-		increment(player) {
-			player.count++
+	state: {
+		player: {
+			isPlaying: false,
+			isBuffering: false,
+			volume: 0,
+		},
+	},
+	mutations: {
+		isPlaying(state, playerState) {
+			state.player.isPlaying = playerState
+		},
+		isBuffering(state, bufferingState) {
+			state.player.isBuffering = bufferingState
+		},
+	},
+	actions: {
+		isPlaying(context, playerState) {
+			context.commit('isPlaying', playerState)
+		},
+		isBuffering(context, bufferingState) {
+			context.commit('isBuffering', bufferingState)
 		},
 	},
-	strict: true,
 })