add blurhash image preview

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

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

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()

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)

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;
 		}
 

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,

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,
 })