lint: fix linting

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2552>

front/src/components/audio/ChannelEntries.vue

@@ -62,17 +62,46 @@ watch(page, fetchData, { immediate: true })
   <div>
     <slot />
     <div class="ui hidden divider" />
-    <div v-if="isLoading" class="ui inverted active dimmer">
+    <div
+      v-if="isLoading"
+      class="ui inverted active dimmer"
+    >
       <div class="ui loader" />
     </div>
-    <podcast-table v-if="isPodcast" v-model:page="page" :paginate-by="limit" :default-cover="defaultCover"
+    <podcast-table
-      :is-podcast="isPodcast" :show-art="true" :show-position="false" :tracks="channels" :show-artist="false"
+      v-if="isPodcast"
-      :show-album="false" :paginate-results="true" :total="count" />
+      v-model:page="page"
-    <track-table v-else v-model:page="page" :default-cover="defaultCover" :is-podcast="isPodcast" :show-art="true"
+      :paginate-by="limit"
-      :show-position="false" :tracks="channels" :show-artist="false" :show-album="false" :paginate-results="true"
+      :default-cover="defaultCover"
-      :total="count" :paginate-by="limit" :filters="filters" />
+      :is-podcast="isPodcast"
+      :show-art="true"
+      :show-position="false"
+      :tracks="channels"
+      :show-artist="false"
+      :show-album="false"
+      :paginate-results="true"
+      :total="count"
+    />
+    <track-table
+      v-else
+      v-model:page="page"
+      :default-cover="defaultCover"
+      :is-podcast="isPodcast"
+      :show-art="true"
+      :show-position="false"
+      :tracks="channels"
+      :show-artist="false"
+      :show-album="false"
+      :paginate-results="true"
+      :total="count"
+      :paginate-by="limit"
+      :filters="filters"
+    />
     <template v-if="!isLoading && channels.length === 0">
-      <empty-state :refresh="true" @refresh="fetchData()">
+      <empty-state
+        :refresh="true"
+        @refresh="fetchData()"
+      >
         <p>
           {{ $t('components.audio.ChannelEntries.help.subscribe') }}
         </p>

front/src/components/audio/podcast/Row.vue

@@ -68,32 +68,69 @@ await fetchData()
 </script>
 
 <template>
-  <div :class="[
+  <div
-    { active: currentTrack && track.id === currentTrack.id },
+    :class="[
-    'track-row podcast row',
+      { active: currentTrack && track.id === currentTrack.id },
-  ]" @dblclick="activateTrack(track, index)">
+      'track-row podcast row',
-    <div v-if="showArt" class="image left floated column" role="button"
+    ]"
-      @click.prevent.exact="activateTrack(track, index)">
+    @dblclick="activateTrack(track, index)"
-      <img v-if="track.cover?.urls.original"
+  >
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)" alt=""
+    <div
-        class="ui artist-track mini image">
+      v-if="showArt"
-      <img v-else-if="defaultCover" v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+      class="image left floated column"
-        alt="" class="ui artist-track mini image">
+      role="button"
-      <img v-else alt="" class="ui artist-track mini image" src="../../../assets/audio/default-cover.png">
+      @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">
+    <div
-      <a class="podcast-episode-title ellipsis" @click.prevent.exact="activateTrack(track, index)">{{ track.title }}</a>
+      tabindex="0"
-      <p v-if="renderedDescription" class="podcast-episode-meta">
+      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">
+    <div
-      <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable"
+      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>

front/src/components/audio/podcast/Table.vue

@@ -46,22 +46,57 @@ const { page } = defineModels<{ page: number, }>()
     <div>
       <div :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']">
         <!-- For each item, build a row -->
-        <podcast-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :tracks="tracks"
+        <podcast-row
-          :display-actions="displayActions" :show-duration="showDuration" :is-podcast="isPodcast" />
+          v-for="(track, index) in tracks"
+          :key="track.id"
+          :track="track"
+          :index="index"
+          :tracks="tracks"
+          :display-actions="displayActions"
+          :show-duration="showDuration"
+          :is-podcast="isPodcast"
+        />
       </div>
-      <div v-if="paginateResults" class="ui center aligned basic segment desktop-and-up">
+      <div
-        <pagination v-bind="$attrs" :total="total" v-model:current="page" :paginate-by="paginateBy" />
+        v-if="paginateResults"
+        class="ui center aligned basic segment desktop-and-up"
+      >
+        <pagination
+          v-bind="$attrs"
+          v-model:current="page"
+          :total="total"
+          :paginate-by="paginateBy"
+        />
       </div>
     </div>
 
     <div :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-below']">
       <!-- For each item, build a row -->
 
-      <track-mobile-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :tracks="tracks"
+      <track-mobile-row
-        :show-position="showPosition" :show-art="showArt" :show-duration="showDuration" :is-artist="isArtist"
+        v-for="(track, index) in tracks"
-        :is-album="isAlbum" :is-podcast="isPodcast" />
+        :key="track.id"
-      <div v-if="paginateResults" class="ui center aligned basic segment tablet-and-below">
+        :track="track"
-        <pagination v-if="paginateResults" v-bind="$attrs" :total="total" v-model:current="page" :compact="true" />
+        :index="index"
+        :tracks="tracks"
+        :show-position="showPosition"
+        :show-art="showArt"
+        :show-duration="showDuration"
+        :is-artist="isArtist"
+        :is-album="isAlbum"
+        :is-podcast="isPodcast"
+      />
+      <div
+        v-if="paginateResults"
+        class="ui center aligned basic segment tablet-and-below"
+      >
+        <pagination
+          v-if="paginateResults"
+          v-bind="$attrs"
+          v-model:current="page"
+          :total="total"
+          :compact="true"
+        />
       </div>
     </div>
   </div>

front/src/composables/useLogger.ts

@@ -53,6 +53,7 @@ const getFile = () => {
 // NOTE: We're pushing all logs to the end of the event loop
 const createLoggerFn = (level: LogLevel) => {
   // NOTE: We don't want to handle logs ourselves in tests
+  // eslint-disable-next-line no-console
   if (import.meta.env.VITEST) return console[level]
 
   return (...args: any[]) => {

front/src/composables/useMarkdown.ts

@@ -7,7 +7,7 @@ import showdown from 'showdown'
 showdown.extension('openExternalInNewTab', {
   type: 'output',
   regex: /<a.+?href.+?">/g,
-  replace(text: string) {
+  replace (text: string) {
     const matches = text.match(/href="(.+)">/) ?? []
 
     const url = matches[1] ?? './'
@@ -26,7 +26,7 @@ showdown.extension('openExternalInNewTab', {
 showdown.extension('linkifyTags', {
   type: 'language',
   regex: /#[^\W]+/g,
-  replace(text: string) {
+  replace (text: string) {
     return `<a href="/library/tags/${text.slice(1)}">${text}</a>`
   }
 })

front/test/specs/composables/useMarkdown.test.ts

@@ -1,25 +1,25 @@
 import { useMarkdownRaw } from '~/composables/useMarkdown'
 
 describe('useMarkdownRaw', () => {
-	describe('anchors', () => {
+  describe('anchors', () => {
-		it('should add target="_blank" to external links', () => {
+    it('should add target="_blank" to external links', () => {
-			const html = useMarkdownRaw('https://open.audio')
+      const html = useMarkdownRaw('https://open.audio')
-			expect(html).toBe('<p><a href="https://open.audio" target="_blank" rel="noopener noreferrer">https://open.audio</a></p>')
+      expect(html).toBe('<p><a href="https://open.audio" target="_blank" rel="noopener noreferrer">https://open.audio</a></p>')
-		})
+    })
 
-		it('should not link raw path', () => {
+    it('should not link raw path', () => {
-			const html = useMarkdownRaw('/library/tags')
+      const html = useMarkdownRaw('/library/tags')
-			expect(html).toBe('<p>/library/tags</p>')
+      expect(html).toBe('<p>/library/tags</p>')
-		})
+    })
 
-		it('should not add target="_blank" to internal links', () => {
+    it('should not add target="_blank" to internal links', () => {
-			const html = useMarkdownRaw('[/library/tags](/library/tags)')
+      const html = useMarkdownRaw('[/library/tags](/library/tags)')
-			expect(html).toBe('<p><a href="/library/tags">/library/tags</a></p>')
+      expect(html).toBe('<p><a href="/library/tags">/library/tags</a></p>')
-		})
+    })
 
-		it('should handle multiple links', () => {
+    it('should handle multiple links', () => {
-			const html = useMarkdownRaw('https://open.audio https://funkwhale.audio')
+      const html = useMarkdownRaw('https://open.audio https://funkwhale.audio')
-			expect(html).toBe('<p><a href="https://open.audio" target="_blank" rel="noopener noreferrer">https://open.audio</a> <a href="https://funkwhale.audio" target="_blank" rel="noopener noreferrer">https://funkwhale.audio</a></p>')
+      expect(html).toBe('<p><a href="https://open.audio" target="_blank" rel="noopener noreferrer">https://open.audio</a> <a href="https://funkwhale.audio" target="_blank" rel="noopener noreferrer">https://funkwhale.audio</a></p>')
-		})
+    })
-	})
+  })
 })