From b047c50284281e49872883a02a1fd110a99c4e2a Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Mon, 14 Aug 2023 16:06:18 +0200
Subject: [PATCH] fix(podcasts): fix short description (#2206)

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2552>
---
 front/src/components/audio/podcast/Row.vue | 76 ++++++----------------
 1 file changed, 20 insertions(+), 56 deletions(-)

diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index 27def91bd..5dc4d39e5 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/front/src/components/audio/podcast/Row.vue
@@ -13,6 +13,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import useMarkdown from '~/composables/useMarkdown'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useErrorHandler from '~/composables/useErrorHandler'
+import SanitizedHtml from '~/components/SanitizedHtml.vue'
 
 interface Props extends PlayOptionsProps {
   tracks: Track[]
@@ -67,69 +68,32 @@ await fetchData()
 </script>
 
 <template>
-  <div
-    :class="[
-      { active: currentTrack && track.id === currentTrack.id },
-      'track-row podcast row',
-    ]"
-    @dblclick="activateTrack(track, index)"
-  >
-    <div
-      v-if="showArt"
-      class="image left floated column"
-      role="button"
-      @click.prevent.exact="activateTrack(track, index)"
-    >
-      <img
-        v-if="track.cover?.urls.original "
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
-        alt=""
-        class="ui artist-track mini image"
-      >
-      <img
-        v-else-if="defaultCover"
-        v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
-        alt=""
-        class="ui artist-track mini image"
-      >
-      <img
-        v-else
-        alt=""
-        class="ui artist-track mini image"
-        src="../../../assets/audio/default-cover.png"
-      >
+  <div :class="[
+    { active: currentTrack && track.id === currentTrack.id },
+    'track-row podcast row',
+  ]" @dblclick="activateTrack(track, index)">
+    <div v-if="showArt" class="image left floated column" role="button"
+      @click.prevent.exact="activateTrack(track, index)">
+      <img v-if="track.cover?.urls.original"
+        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)" alt=""
+        class="ui artist-track mini image">
+      <img v-else-if="defaultCover" v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+        alt="" class="ui artist-track mini image">
+      <img v-else alt="" class="ui artist-track mini image" src="../../../assets/audio/default-cover.png">
     </div>
-    <div
-      tabindex="0"
-      class="content left floated column"
-    >
-      <a
-        class="podcast-episode-title ellipsis"
-        @click.prevent.exact="activateTrack(track, index)"
-      >{{ track.title }}</a>
-      <p
-        v-if="renderedDescription"
-        class="podcast-episode-meta"
-      >
-        {{ renderedDescription }}
+    <div tabindex="0" class="content left floated column">
+      <a class="podcast-episode-title ellipsis" @click.prevent.exact="activateTrack(track, index)">{{ track.title }}</a>
+      <p v-if="renderedDescription" class="podcast-episode-meta">
+        <SanitizedHtml :html="renderedDescription" />
       </p>
     </div>
-    <div
-      v-if="displayActions"
-      class="meta right floated column"
-    >
-      <play-button
-        id="playmenu"
-        class="play-button basic icon"
-        :dropdown-only="true"
-        :is-playable="track.is_playable"
+    <div v-if="displayActions" class="meta right floated column">
+      <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable"
         :dropdown-icon-classes="[
           'ellipsis',
           'vertical',
           'large really discrete',
-        ]"
-        :track="track"
-      />
+        ]" :track="track" />
     </div>
   </div>
 </template>