Migrate FtListChannel and FtListHashtag to the composition API

src/renderer/components/FtListChannel/FtListChannel.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    class="ft-list-channel ft-list-item"
+    :class="{
+      list: listType === 'list',
+      grid: listType === 'grid',
+      [appearance]: true
+    }"
+  >
+    <div class="channelThumbnail">
+      <router-link
+        :to="`/channel/${id}`"
+        class="channelThumbnailLink"
+        tabindex="-1"
+        aria-hidden="true"
+      >
+        <img
+          :src="thumbnail"
+          class="channelImage"
+          alt=""
+        >
+      </router-link>
+    </div>
+    <div class="infoAndSubscribe">
+      <div class="info">
+        <router-link
+          class="title"
+          :to="`/channel/${id}`"
+        >
+          <h3 class="h3Title">
+            {{ name }}
+          </h3>
+        </router-link>
+        <div class="infoLine">
+          <router-link
+            v-if="handle !== null"
+            class="handle"
+            :to="`/channel/${id}`"
+          >
+            {{ handle }}
+          </router-link>
+          <span
+            v-if="subscriberCount !== null && !hideChannelSubscriptions"
+            class="subscriberCount"
+          >
+            <template v-if="handle !== null"> • </template>
+            {{ $tc('Global.Counts.Subscriber Count', subscriberCount, {count: formattedSubscriberCount}) }}
+          </span>
+          <span
+            v-if="handle == null && videoCount != null"
+            class="videoCount"
+          >
+            <template v-if="subscriberCount !== null && !hideChannelSubscriptions"> • </template>
+            {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideoCount}) }}
+          </span>
+        </div>
+        <p
+          v-if="listType !== 'grid'"
+          class="description"
+          v-html="description"
+        />
+      </div>
+      <FtSubscribeButton
+        class="channelSubscribeButton"
+        :channel-id="id"
+        :channel-name="name"
+        :channel-thumbnail="thumbnail"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue'
+
+import store from '../../store/index'
+
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
+import { formatNumber } from '../../helpers/utils'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  appearance: {
+    type: String,
+    required: true
+  }
+})
+
+const currentInvidiousInstanceUrl = computed(() => {
+  return store.getters.getCurrentInvidiousInstanceUrl
+})
+
+const listType = computed(() => {
+  return store.getters.getListType
+})
+
+const hideChannelSubscriptions = computed(() => {
+  return store.getters.getHideChannelSubscriptions
+})
+
+let id = ''
+let thumbnail = ''
+let name = ''
+let subscriberCount = null
+let videoCount = null
+let handle = null
+let description = ''
+
+if (process.env.SUPPORTS_LOCAL_API && props.data.dataSource === 'local') {
+  parseLocalData()
+} else {
+  parseInvidiousData()
+}
+
+const formattedSubscriberCount = computed(() => {
+  if (subscriberCount != null) {
+    return formatNumber(subscriberCount)
+  }
+
+  return ''
+})
+
+const formattedVideoCount = computed(() => {
+  if (videoCount != null) {
+    return formatNumber(videoCount)
+  }
+
+  return ''
+})
+
+function parseLocalData() {
+  thumbnail = props.data.thumbnail
+  name = props.data.name
+  id = props.data.id
+
+  if (props.data.subscribers != null) {
+    subscriberCount = props.data.subscribers
+  }
+
+  if (props.data.videoCount != null) {
+    videoCount = props.data.videos
+  }
+
+  if (props.data.handle) {
+    handle = props.data.handle
+  }
+
+  description = props.data.descriptionShort
+}
+
+function parseInvidiousData() {
+  // Can be prefixed with `https://` or `//` (protocol relative)
+  const thumbnailUrl = props.data.authorThumbnails[2].url
+
+  thumbnail = youtubeImageUrlToInvidious(thumbnailUrl, currentInvidiousInstanceUrl.value)
+
+  name = props.data.author
+  id = props.data.authorId
+  subscriberCount = props.data.subCount
+
+  if (props.data.channelHandle != null) {
+    handle = props.data.channelHandle
+  } else {
+    videoCount = props.data.videoCount
+  }
+
+  description = props.data.description
+}
+</script>
+
+<style scoped lang="scss" src="./FtListChannel.scss" />

src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue → src/renderer/components/FtListHashtag/FtListHashtag.vue

@@ -14,7 +14,7 @@
         aria-hidden="true"
         :to="url"
       >
-        <font-awesome-icon
+        <FontAwesomeIcon
           class="hashtagImage"
           :icon="['fas', 'hashtag']"
         />
@@ -34,19 +34,55 @@
           v-if="channelCount"
           class="channelCount"
         >
-          {{ $tc('Global.Counts.Channel Count', channelCount, {count: parsedChannelCount}) }}
+          {{ $tc('Global.Counts.Channel Count', channelCount, {count: formattedChannelCount}) }}
         </span>
         <span
           v-if="videoCount"
           class="videoCount"
         >
           <template v-if="channelCount"> • </template>
-          {{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideosCount}) }}
+          {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideosCount}) }}
         </span>
       </div>
     </div>
   </div>
 </template>
 
-<script src="./ft-list-hashtag.js" />
-<style scoped lang="scss" src="./ft-list-hashtag.scss" />
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+
+import store from '../../store/index'
+
+import { formatNumber } from '../../helpers/utils'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  appearance: {
+    type: String,
+    required: true
+  }
+})
+
+const listType = computed(() => {
+  return store.getters.getListType
+})
+
+const title = props.data.title
+const channelCount = props.data.channelCount
+const videoCount = props.data.videoCount
+const url = `/hashtag/${encodeURIComponent(title.substring(1))}`
+
+const formattedChannelCount = computed(() => {
+  return formatNumber(channelCount)
+})
+
+const formattedVideosCount = computed(() => {
+  return formatNumber(videoCount)
+})
+</script>
+
+<style scoped lang="scss" src="./FtListHashtag.scss" />

src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue

@@ -60,10 +60,10 @@
 import { computed, ref } from 'vue'
 
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
-import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
+import FtListChannel from '../FtListChannel/FtListChannel.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
 import FtCommunityPost from '../FtCommunityPost/FtCommunityPost.vue'
-import FtListHashtag from '../ft-list-hashtag/ft-list-hashtag.vue'
+import FtListHashtag from '../FtListHashtag/FtListHashtag.vue'
 
 import store from '../../store/index'