From e1e93771ff8c30c801b221e393940717f29c463b Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Thu, 24 Aug 2023 23:19:54 +0200
Subject: [PATCH] Fix before refacto player

---
 src/components/Discover/TopItem.vue |  8 +++----
 src/components/Feed/List.vue        |  5 ++++-
 src/components/Player/Bar.vue       | 34 ++++++++++++++++++++---------
 src/modules/player.js               |  6 ++---
 src/views/Index.vue                 |  2 +-
 5 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/components/Discover/TopItem.vue b/src/components/Discover/TopItem.vue
index 0a6bb5f..fda2047 100644
--- a/src/components/Discover/TopItem.vue
+++ b/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: {
-		toUrl(url) {
-			return `/${btoa(url)}`
+	computed: {
+		toUrl() {
+			return `/${btoa(this.link)}`
 		},
 	},
 }
diff --git a/src/components/Feed/List.vue b/src/components/Feed/List.vue
index 3060d54..c212586 100644
--- a/src/components/Feed/List.vue
+++ b/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>
diff --git a/src/components/Player/Bar.vue b/src/components/Player/Bar.vue
index b712120..e275c87 100644
--- a/src/components/Player/Bar.vue
+++ b/src/components/Player/Bar.vue
@@ -1,7 +1,12 @@
 <template>
-	<div v-if="currentPlayingUrl" class="oui">
-		{{ 'oui' }}
-	</div>
+	<fragment>
+		<div v-if="episode" class="footer">
+			<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() {
-			return this.$store.state.currentPlayingUrl
+		episode() {
+			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>
diff --git a/src/modules/player.js b/src/modules/player.js
index ba0a621..10a67ec 100644
--- a/src/modules/player.js
+++ b/src/modules/player.js
@@ -1,11 +1,11 @@
 export const player = {
 	namespaced: true,
 	state: {
-		currentPlayingUrl: null,
+		episode: null,
 	},
 	mutations: {
-		set: (state, currentPlayingUrl) => {
-			state.currentPlayingUrl = currentPlayingUrl
+		play: (state, episode) => {
+			state.episode = episode
 		},
 	},
 }
diff --git a/src/views/Index.vue b/src/views/Index.vue
index f7b6b33..c67bfa9 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -17,7 +17,7 @@
 				</ul>
 			</NcAppContentList>
 		</NcAppNavigation>
-		<router-view />
+		<router-view :key="$route.path" />
 		<Bar />
 	</fragment>
 </template>