feat: add modal to episode bar

src/components/Atoms/Modal.vue

@@ -44,19 +44,11 @@ export default {
 		OpenInNew,
 	},
 	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		image: {
-			type: String,
-			required: true,
-		},
 		description: {
 			type: String,
 			default: '',
 		},
-		url: {
+		image: {
 			type: String,
 			required: true,
 		},
@@ -64,7 +56,7 @@ export default {
 			type: String,
 			default: null,
 		},
-		title: {
+		name: {
 			type: String,
 			required: true,
 		},
@@ -72,6 +64,14 @@ export default {
 			type: Number,
 			default: null,
 		},
+		title: {
+			type: String,
+			required: true,
+		},
+		url: {
+			type: String,
+			required: true,
+		},
 	},
 	computed: {
 		episodeFileSize() {

src/components/Feed/Episodes.vue

@@ -33,28 +33,30 @@
 						{{ t('repod', 'Stop') }}
 					</NcActionButton>
 				</template>
+				<template #extra>
+					<NcModal :show="modalEpisode && modalEpisode.guid === episode.guid" @close="modalEpisode = null">
+						<Modal :description="episode.description"
+							:image="episode.image"
+							:link="episode.link"
+							:name="episode.name"
+							:size="episode.size"
+							:title="episode.title"
+							:url="episode.url" />
+					</NcModal>
+				</template>
 			</NcListItem>
 		</ul>
-		<NcModal v-if="modalEpisode" @close="closeModal">
-			<Modal :description="modalEpisode.description"
-				:image="modalEpisode.image"
-				:link="modalEpisode.link"
-				:name="modalEpisode.name"
-				:size="modalEpisode.size"
-				:title="modalEpisode.title"
-				:url="modalEpisode.url" />
-		</NcModal>
 	</div>
 </template>
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcModal } from '@nextcloud/vue'
-import { decodeUrl, encodeUrl } from '../../utils/url.js'
 import Loading from '../Atoms/Loading.vue'
-import Modal from './Modal.vue'
+import Modal from '../Atoms/Modal.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
+import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
 import moment from '@nextcloud/moment'
 import { showError } from '@nextcloud/dialogs'
@@ -112,10 +114,6 @@ export default {
 		load(episode) {
 			this.$store.dispatch('player/load', episode)
 		},
-		closeModal() {
-			this.modalEpisode = null
-			this.$router.push(encodeUrl(this.url))
-		},
 	},
 }
 </script>

src/components/Player/Infos.vue

@@ -1,19 +1,37 @@
 <template>
-	<div>
+	<div class="root">
-		<a :href="player.episode.link" target="_blank">
+		<strong class="name" @click="modal = true">{{ player.episode.name }}</strong>
-			<strong>{{ player.episode.name }}</strong>
-		</a>
 		<router-link :to="hash">
 			<i>{{ player.episode.title }}</i>
 		</router-link>
+		<NcModal :show="modal" @close="modal = false">
+			<Modal :description="player.episode.description"
+				:image="player.episode.image"
+				:link="player.episode.link"
+				:name="player.episode.name"
+				:size="player.episode.size"
+				:title="player.episode.title"
+				:url="player.episode.url" />
+		</NcModal>
 	</div>
 </template>
 
 <script>
+import Modal from '../Atoms/Modal.vue'
+import { NcModal } from '@nextcloud/vue'
 import { toUrl } from '../../utils/url.js'
 
 export default {
 	name: 'Infos',
+	components: {
+		Modal,
+		NcModal,
+	},
+	data() {
+		return {
+			modal: false,
+		}
+	},
 	computed: {
 		player() {
 			return this.$store.state.player
@@ -26,7 +44,11 @@ export default {
 </script>
 
 <style scoped>
-    div {
+    .name {
+		cursor: pointer;
+	}
+
+	.root {
         display: flex;
 		flex-direction: column;
 		justify-content: center;