From c7025b648c21c479dd89076057e579547381a062 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sat, 9 Sep 2023 12:32:59 -0400
Subject: [PATCH] Search: Add hashtags to results (#3780)

* Add hashtags to search results

* add global count , implement changes from code review

Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>

* use h3 for title of hashtag element

* implement suggestions from code review

* use hashtag.text, move url update logic

* encodeURI for hashtag url

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 .../ft-element-list/ft-element-list.vue       |  2 +-
 .../ft-list-hashtag/ft-list-hashtag.js        | 44 ++++++++++++++++
 .../ft-list-hashtag/ft-list-hashtag.scss      |  6 +++
 .../ft-list-hashtag/ft-list-hashtag.vue       | 51 +++++++++++++++++++
 .../ft-list-lazy-wrapper.js                   |  4 +-
 .../ft-list-lazy-wrapper.vue                  |  5 ++
 src/renderer/helpers/api/local.js             | 13 ++++-
 src/renderer/main.js                          |  2 +
 src/renderer/views/Search/Search.js           |  2 +-
 static/locales/en-US.yaml                     |  3 ++
 10 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
 create mode 100644 src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue

diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 22c4a343fadad..5bdb836059ef1 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -4,7 +4,7 @@
   >
     <ft-list-lazy-wrapper
       v-for="(result, index) in data"
-      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId}-${index}`"
+      :key="`${result.type}-${result.videoId || result.playlistId || result.postId || result.id || result.authorId || result.title}-${index}`"
       appearance="result"
       :data="result"
       :first-screen="index < 16"
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
new file mode 100644
index 0000000000000..a8890f62751d0
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.js
@@ -0,0 +1,44 @@
+import { defineComponent } from 'vue'
+import { formatNumber } from '../../helpers/utils'
+
+export default defineComponent({
+  name: 'FtListHashtag',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    appearance: {
+      type: String,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      title: '',
+      url: '',
+      channelCount: 0,
+      parsedChannelCount: '',
+      videoCount: 0,
+      parsedVideosCount: ''
+    }
+  },
+  computed: {
+    listType: function () {
+      return this.$store.getters.getListType
+    }
+  },
+  created: function () {
+    this.parseData()
+  },
+  methods: {
+    parseData: function () {
+      this.title = this.data.title
+      this.channelCount = this.data.channelCount
+      this.parsedChannelCount = formatNumber(this.channelCount)
+      this.videoCount = this.data.videoCount
+      this.parsedVideosCount = formatNumber(this.videoCount)
+      this.url = `/hashtag/${encodeURIComponent(this.data.title.substring(1))}`
+    }
+  }
+})
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
new file mode 100644
index 0000000000000..c524018e4b808
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
@@ -0,0 +1,6 @@
+@use '../../scss-partials/_ft-list-item';
+
+.hashtagImage {
+  color: var(--primary-text-color);
+  font-size: 150px;
+}
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
new file mode 100644
index 0000000000000..d7a4311e7112e
--- /dev/null
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="ft-list-hashtag ft-list-item"
+    :class="{
+      list: listType === 'list',
+      grid: listType === 'grid',
+      [appearance]: true
+    }"
+  >
+    <div class="channelThumbnail">
+      <router-link
+        tabindex="-1"
+        aria-hidden="true"
+        :to="url"
+      >
+        <font-awesome-icon
+          class="hashtagImage"
+          :icon="['fas', 'hashtag']"
+        />
+      </router-link>
+    </div>
+    <div class="info">
+      <router-link
+        class="title"
+        :to="url"
+      >
+        <h3 class="h3Title">
+          {{ title }}
+        </h3>
+      </router-link>
+      <div class="infoLine">
+        <span
+          v-if="channelCount"
+          class="channelCount"
+        >
+          {{ $tc('Global.Counts.Channel Count', channelCount, {count: parsedChannelCount}) }}
+        </span>
+        <span
+          v-if="videoCount"
+          class="videoCount"
+        >
+          <template v-if="channelCount"> • </template>
+          {{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideosCount}) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./ft-list-hashtag.js" />
+<style scoped lang="scss" src="./ft-list-hashtag.scss" />
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
index 04ffbbc164df3..5d65aa2c8ded0 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
@@ -3,6 +3,7 @@ import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
 import FtCommunityPost from '../ft-community-post/ft-community-post.vue'
+import FtListHashtag from '../ft-list-hashtag/ft-list-hashtag.vue'
 
 export default defineComponent({
   name: 'FtListLazyWrapper',
@@ -10,7 +11,8 @@ export default defineComponent({
     'ft-list-video': FtListVideo,
     'ft-list-channel': FtListChannel,
     'ft-list-playlist': FtListPlaylist,
-    'ft-community-post': FtCommunityPost
+    'ft-community-post': FtCommunityPost,
+    'ft-list-hashtag': FtListHashtag,
   },
   props: {
     data: {
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
index 62c800472c6f9..65fbd2b6be595 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
@@ -34,6 +34,11 @@
         :appearance="appearance"
         :data="data"
       />
+      <ft-list-hashtag
+        v-else-if="data.type === 'hashtag'"
+        :appearance="appearance"
+        :data="data"
+      />
     </template>
   </div>
 </template>
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 12be58023e547..0865bff9f3b1f 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -434,7 +434,7 @@ function handleSearchResponse(response) {
 
   const results = response.results
     .filter((item) => {
-      return item.type === 'Video' || item.type === 'Channel' || item.type === 'Playlist'
+      return item.type === 'Video' || item.type === 'Channel' || item.type === 'Playlist' || item.type === 'HashtagTile'
     })
     .map((item) => parseListItem(item))
 
@@ -580,6 +580,17 @@ function parseListItem(item) {
         descriptionShort: channel.description_snippet.text
       }
     }
+    case 'HashtagTile': {
+      /** @type {import('youtubei.js').YTNodes.HashtagTile} */
+      const hashtag = item
+
+      return {
+        type: 'hashtag',
+        title: hashtag.hashtag.text,
+        videoCount: hashtag.hashtag_video_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_video_count.text),
+        channelCount: hashtag.hashtag_channel_count.isEmpty() ? null : parseLocalSubscriberCount(hashtag.hashtag_channel_count.text)
+      }
+    }
     case 'Playlist': {
       return parseLocalListPlaylist(item)
     }
diff --git a/src/renderer/main.js b/src/renderer/main.js
index b322cd0ad24ce..c8345edf46fec 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -35,6 +35,7 @@ import {
   faFilter,
   faFire,
   faGlobe,
+  faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
@@ -106,6 +107,7 @@ library.add(
   faFilter,
   faFire,
   faGlobe,
+  faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 3f3cd8d6fa291..e888af50bff33 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -211,7 +211,7 @@ export default defineComponent({
         this.apiUsed = 'invidious'
 
         const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
+          return item.type === 'video' || item.type === 'channel' || item.type === 'playlist' || item.type === 'hashtag'
         })
 
         if (this.searchPage !== 1) {
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index ce406a0e6b6a2..1208d79c450be 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -45,6 +45,9 @@ Global:
   Videos: Videos
   Shorts: Shorts
   Live: Live
+  Counts:
+    Video Count: 1 video | {count} videos
+    Channel Count: 1 channel | {count} channels
 
 # Search Bar
 Search / Go to URL: Search / Go to URL