Fix before refacto player

src/components/Discover/TopItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<router-link :to="toUrl(link)">
+	<router-link :to="toUrl">
 		<img :alt="`${title} - ${author}`"
 			:src="imageUrl"
 			:title="author">
@@ -28,9 +28,9 @@ export default {
 			required: true,
 		},
 	},
-	methods: {
+	computed: {
-		toUrl(url) {
+		toUrl() {
-			return `/${btoa(url)}`
+			return `/${btoa(this.link)}`
 		},
 	},
 }

src/components/Feed/List.vue

@@ -17,7 +17,7 @@
 					{{ format(new Date(episode.episodeDuration*1000), 'H:mm:ss') }}
 				</template>
 				<template #actions>
-					<NcActionButton>
+					<NcActionButton @click="play(episode)">
 						<template #icon>
 							<Play :size="20" />
 						</template>
@@ -73,6 +73,9 @@ export default {
 	methods: {
 		format,
 		formatTimeAgo,
+		play(episode) {
+			this.$store.commit('player/play', episode)
+		},
 	},
 }
 </script>

src/components/Player/Bar.vue

@@ -1,7 +1,12 @@
 <template>
-	<div v-if="currentPlayingUrl" class="oui">
+	<fragment>
-		{{ 'oui' }}
+		<div v-if="episode" class="footer">
-	</div>
+			<img class="background" :src="episode.episodeImage">
+			<div class="content">
+				{{ 'oui' }}
+			</div>
+		</div>
+	</fragment>
 </template>
 
 <script>
@@ -9,20 +14,29 @@ export default {
 	name: 'Bar',
 	components: {},
 	computed: {
-		currentPlayingUrl() {
+		episode() {
-			return this.$store.state.currentPlayingUrl
+			return this.$store.state.player.episode
 		},
 	},
 }
 </script>
 
 <style scoped>
-	.oui {
+	.footer {
+		position: relative;
+	}
+
+	.background {
+		filter: blur(5rem) brightness(50%);
+		height: auto;
+		left: 0;
+		opacity: .4;
 		position: absolute;
-		bottom: 0;
+		top: 0;
 		width: 100%;
-		height: 4rem;
+	}
-		background-color: red;
+
-		z-index: 1001;
+	.content {
+		position: relative;
 	}
 </style>

src/modules/player.js

@@ -1,11 +1,11 @@
 export const player = {
 	namespaced: true,
 	state: {
-		currentPlayingUrl: null,
+		episode: null,
 	},
 	mutations: {
-		set: (state, currentPlayingUrl) => {
+		play: (state, episode) => {
-			state.currentPlayingUrl = currentPlayingUrl
+			state.episode = episode
 		},
 	},
 }

src/views/Index.vue

@@ -17,7 +17,7 @@
 				</ul>
 			</NcAppContentList>
 		</NcAppNavigation>
-		<router-view />
+		<router-view :key="$route.path" />
 		<Bar />
 	</fragment>
 </template>