feat: show episode description

pbek · Mar 3, 2023 · 1a8559d · 1a8559d
1 parent 7a40410
commit 1a8559d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## 0.2.0
+- You can now click an episode to show the description of the episode
 - The episode image detection was now made more fault-tolerant to always be able to show an episode image
 
 ## 0.1.1

diff --git a/src/components/ActionListItem.vue b/src/components/ActionListItem.vue
@@ -1,5 +1,6 @@
 <template>
 	<NcListItem :title="isLoading ? action.episodeUrl : getEpisodeName()"
+              @click="showModalEpisodeDescription"
             :details="getDetails()">
     <template #icon>
       <!--
@@ -19,7 +20,7 @@
       <NcModal
           v-if="modalPlayer"
           @close="closeModalPlayer"
-          size="small"
+          size="normal"
           title="Play media"
           :outTransition="true">
         <div class="modal__content">
@@ -31,6 +32,18 @@
           </audio>
         </div>
       </NcModal>
+      <NcModal
+          v-if="modalEpisodeDescription"
+          @close="closeModalEpisodeDescription"
+          size="large"
+          title="Episode description"
+          :outTransition="true">
+        <div class="modal__content">
+          <h2 v-if="isLoading">Loading episode description"</h2>
+          <h2 v-else>Episode description</h2>
+          <div v-html="getEpisodeDescription()"></div>
+        </div>
+      </NcModal>
     </template>
     <template #actions>
       <NcActionLink :href="action.podcastUrl"
@@ -91,6 +104,7 @@ export default {
 			actionExtraData: null,
 			isLoading: true,
       modalPlayer: false,
+      modalEpisodeDescription: false,
 		}
 	},
 	async mounted() {
@@ -147,11 +161,20 @@ export default {
     getEpisodeLink() {
       return this.actionExtraData?.episodeLink ?? ''
     },
+    getEpisodeDescription() {
+      return this.actionExtraData?.episodeDescription ?? '';
+    },
     showModalPlayer() {
       this.modalPlayer = true
     },
     closeModalPlayer() {
       this.modalPlayer = false
+    },
+    showModalEpisodeDescription() {
+      this.modalEpisodeDescription = true
+    },
+    closeModalEpisodeDescription() {
+      this.modalEpisodeDescription = false
     }
   },
   watch: {