beginning to implement player metadata

src/components/Main.vue

@@ -126,6 +126,7 @@ export default {
 			if (audioPlayer !== null) {
 				audioPlayer.fade(vm.player.volume, 0, 500)
 			}
+			vm.$store.dispatch('setTitle', station.name)
 			this.$jquery.get('http://de1.api.radio-browser.info/json/url/' + station.stationuuid,
 				{
 					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version, doesnt seem to work
@@ -165,7 +166,6 @@ export default {
 		 * Fetching radio stations using Radio-Browser.info API
 		 */
 		loadStations() {
-			// FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10
 			const vm = this
 			if (vm.offset === 0) {
 				vm.pageLoading = true

src/components/Player.vue

@@ -21,7 +21,9 @@
 			step=".05"
 			:value="player.volume"
 			@input="changeVolume($event)">
-		<span class="stationMetadata" />
+		<span class="playerMetadata">
+			{{ player.title }}
+		</span>
 	</div>
 </template>
 
@@ -93,11 +95,12 @@ export default {
 		}
 	}
 
-	.station_metadata{
+	.playerMetadata{
-		margin: 2px 20px 5px 20px;
+		white-space: nowrap;
-		padding-left: 5px;
+		overflow: hidden;
-		white-space:nowrap;
+		background: red;
-		overflow:hidden;
+		position: relative;
+
 	}
 
 	.volumeIcon {

src/store.js

@@ -11,6 +11,7 @@ export default new Vuex.Store({
 			isPaused: false,
 			volume: 0,
 			oldVolume: 0,
+			title: 'test',
 		},
 	},
 	mutations: {
@@ -42,6 +43,9 @@ export default new Vuex.Store({
 				state.player.isPaused = false
 			}
 		},
+		setTitle(state, title) {
+			state.player.title = title
+		},
 	},
 	actions: {
 		isPlaying(context, playerState) {
@@ -59,5 +63,8 @@ export default new Vuex.Store({
 		togglePlay(context) {
 			context.commit('togglePlay')
 		},
+		setTitle(context, title) {
+			context.commit('setTitle', title)
+		},
 	},
 })