From af5ccc22c2054afb913eb5662a5cdf90b6664102 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 20:26:49 +0300
Subject: [PATCH 1/9] recommendations

---
 .../recommended-tab-ui/recommended-tab-ui.css |  15 ++
 .../recommended-tab-ui/recommended-tab-ui.js  | 131 ++++++++++++++
 .../recommended-tab-ui/recommended-tab-ui.vue |  72 ++++++++
 .../recommended-videos/recommended-videos.js  | 164 ++++++++++++++++++
 .../recommended-videos/recommended-videos.vue |  12 ++
 src/renderer/components/side-nav/side-nav.vue |  23 +++
 src/renderer/components/top-nav/top-nav.js    |   6 +
 src/renderer/router/index.js                  |   9 +
 .../views/Recommended/Recommended.css         |  41 +++++
 src/renderer/views/Recommended/Recommended.js | 118 +++++++++++++
 .../views/Recommended/Recommended.vue         |  42 +++++
 11 files changed, 633 insertions(+)
 create mode 100644 src/renderer/components/recommended-tab-ui/recommended-tab-ui.css
 create mode 100644 src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
 create mode 100644 src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
 create mode 100644 src/renderer/components/recommended-videos/recommended-videos.js
 create mode 100644 src/renderer/components/recommended-videos/recommended-videos.vue
 create mode 100644 src/renderer/views/Recommended/Recommended.css
 create mode 100644 src/renderer/views/Recommended/Recommended.js
 create mode 100644 src/renderer/views/Recommended/Recommended.vue

diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.css b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.css
new file mode 100644
index 000000000000..a902565bb94b
--- /dev/null
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.css
@@ -0,0 +1,15 @@
+.card {
+  inline-size: 85%;
+  margin-block: 0 60px;
+  margin-inline: auto;
+}
+
+.message {
+  color: var(--tertiary-text-color);
+}
+
+@media only screen and (width <= 680px) {
+  .card {
+    inline-size: 90%;
+  }
+}
diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
new file mode 100644
index 000000000000..55f4bc29fb5d
--- /dev/null
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
@@ -0,0 +1,131 @@
+import { defineComponent } from 'vue'
+
+import FtLoader from '../ft-loader/ft-loader.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtRefreshWidget from '../ft-refresh-widget/ft-refresh-widget.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtElementList from '../FtElementList/FtElementList.vue'
+import FtChannelBubble from '../ft-channel-bubble/ft-channel-bubble.vue'
+import FtAutoLoadNextPageWrapper from '../ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
+
+export default defineComponent({
+  name: 'RecommededTabUI',
+  components: {
+    'ft-loader': FtLoader,
+    'ft-button': FtButton,
+    'ft-refresh-widget': FtRefreshWidget,
+    'ft-flex-box': FtFlexBox,
+    'ft-element-list': FtElementList,
+    'ft-channel-bubble': FtChannelBubble,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
+  },
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    videoList: {
+      type: Array,
+      default: () => ([])
+    },
+    isCommunity: {
+      type: Boolean,
+      default: false
+    },
+    errorChannels: {
+      type: Array,
+      default: () => ([])
+    },
+    attemptedFetch: {
+      type: Boolean,
+      default: false
+    },
+    initialDataLimit: {
+      type: Number,
+      default: 100
+    },
+    lastRefreshTimestamp: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['refresh'],
+  data: function () {
+    return {
+      dataLimit: 100,
+    }
+  },
+  computed: {
+    activeVideoList: function () {
+      if (this.videoList.length < this.dataLimit) {
+        return this.videoList
+      } else {
+        return this.videoList.slice(0, this.dataLimit)
+      }
+    },
+
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+
+    recommendedList: function () {
+      return this.activeProfile.subscriptions
+    },
+
+    fetchSubscriptionsAutomatically: function() {
+      return this.$store.getters.getFetchSubscriptionsAutomatically
+    }
+  },
+  created: function () {
+    const dataLimit = sessionStorage.getItem('subscriptionLimit')
+
+    if (dataLimit !== null) {
+      this.dataLimit = dataLimit
+    } else {
+      this.dataLimit = this.initialDataLimit
+    }
+  },
+  mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+  },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
+  methods: {
+    increaseLimit: function () {
+      this.dataLimit += this.initialDataLimit
+      sessionStorage.setItem('subscriptionLimit', this.dataLimit)
+    },
+
+    /**
+     * This function `keyboardShortcutHandler` should always be at the bottom of this file
+     * @param {KeyboardEvent} event the keyboard event
+     */
+    keyboardShortcutHandler: function (event) {
+      if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
+        return
+      }
+      // Avoid handling events due to user holding a key (not released)
+      // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
+      if (event.repeat) { return }
+
+      switch (event.key) {
+        case 'r':
+        case 'R':
+        case 'F5':
+          if (!this.isLoading && this.activeSubscriptionList.length > 0) {
+            this.$emit('refresh')
+          }
+          break
+      }
+    },
+
+    refresh: function() {
+      this.$emit('refresh')
+    }
+  }
+})
diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
new file mode 100644
index 000000000000..7120b59de439
--- /dev/null
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <ft-loader
+      v-if="isLoading"
+    />
+    <div
+      v-if="!isLoading && errorChannels.length !== 0"
+    >
+      <h3> {{ $t("Subscriptions.Error Channels") }}</h3>
+      <ft-flex-box>
+        <ft-channel-bubble
+          v-for="(channel, index) in errorChannels"
+          :key="index"
+          :channel-name="channel.name"
+          :channel-id="channel.id"
+          :channel-thumbnail="channel.thumbnail"
+        />
+      </ft-flex-box>
+    </div>
+    <ft-flex-box
+      v-if="!isLoading && activeVideoList.length === 0"
+    >
+      <p
+        v-if="recommendedList.length === 0"
+        class="message"
+      >
+        {{ 'Your search history is currently empty. Start with some search to see recommendations.' }}
+      </p>
+      <p
+        v-else-if="!fetchSubscriptionsAutomatically && !attemptedFetch"
+        class="message"
+      >
+        {{ $t("Subscriptions.Disabled Automatic Fetching") }}
+      </p>
+      <p
+        v-else
+        class="message"
+      >
+        {{ isCommunity ? $t("Subscriptions.Empty Posts") : $t("Subscriptions.Empty Channels") }}
+      </p>
+    </ft-flex-box>
+    <ft-element-list
+      v-if="!isLoading && activeVideoList.length > 0"
+      :data="activeVideoList"
+      :use-channels-hidden-preference="false"
+      :display="isCommunity ? 'list' : ''"
+    />
+    <ft-auto-load-next-page-wrapper
+      v-if="!isLoading && videoList.length > dataLimit"
+      @load-next-page="increaseLimit"
+    >
+      <ft-flex-box>
+        <ft-button
+          :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
+          @click="increaseLimit"
+        />
+      </ft-flex-box>
+    </ft-auto-load-next-page-wrapper>
+
+    <ft-refresh-widget
+      :disable-refresh="isLoading || activeVideoList.length === 0"
+      :last-refresh-timestamp="lastRefreshTimestamp"
+      :title="title"
+      @click="refresh"
+    />
+  </div>
+</template>
+
+<script src="./recommended-tab-ui.js" />
+<style scoped src="./recommended-tab-ui.css" />
diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
new file mode 100644
index 000000000000..83f25c86c6b8
--- /dev/null
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -0,0 +1,164 @@
+import { defineComponent } from 'vue'
+import { mapActions, mapMutations } from 'vuex'
+import RecommendedTabUI from '../recommended-tab-ui/recommended-tab-ui.vue'
+
+import { setPublishedTimestampsInvidious, copyToClipboard, getRelativeTimeFromDate, showToast } from '../../helpers/utils'
+import { invidiousAPICall, invidiousFetch } from '../../helpers/api/invidious'
+import { getLocalChannelVideos } from '../../helpers/api/local'
+import { parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
+
+export default defineComponent({
+  name: 'RecommendedVideos',
+  components: {
+    'recommended-tab-ui': RecommendedTabUI
+  },
+  data: function () {
+    return {
+      isLoading: false,
+      videoList: [],
+      attemptedFetch: false,
+    }
+  },
+  computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+
+    backendFallback: function () {
+      return this.$store.getters.getBackendFallback
+    },
+
+    currentInvidiousInstanceUrl: function () {
+      return this.$store.getters.getCurrentInvidiousInstanceUrl
+    },
+
+    currentLocale: function () {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
+    lastVideoRefreshTimestamp: function () {
+      return getRelativeTimeFromDate(this.$store.getters.getLastVideoRefreshTimestampByProfile(this.activeProfileId), true)
+    },
+
+    useRssFeeds: function () {
+      return this.$store.getters.getUseRssFeeds
+    },
+
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+    activeProfileId: function () {
+      return this.activeProfile._id
+    },
+    
+    activeSubscriptionList: function () {
+      return this.activeProfile.subscriptions
+    },
+
+    fetchSubscriptionsAutomatically: function() {
+      return this.$store.getters.getFetchSubscriptionsAutomatically
+    },
+  },
+  watch: {
+    activeProfile: async function (_) {
+      this.isLoading = true
+      this.loadVideosFromCacheSometimes()
+    },
+  },
+  mounted: async function () {
+    this.isLoading = true
+
+    this.loadVideosFromCacheSometimes()
+  },
+  methods: {
+    loadVideosFromCacheSometimes() {
+      // clear timestamp if not all entries are present in the cache
+      this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: '' })
+      this.maybeLoadVideosForSubscriptionsFromRemote()
+    },
+
+    loadVideosForSubscriptionsFromRemote: async function () {
+      console.log("loadVideosForSubscriptionsFromRemote")
+      if (localStorage.getItem("search-history") === null) {
+        this.isLoading = false
+        this.videoList = []
+        console.log("search-history is empty")
+        return
+      }
+
+      const videoList = []
+      this.isLoading = true
+
+      this.updateShowProgressBar(true)
+      this.setProgressBarPercentage(0)
+      this.attemptedFetch = true
+
+      let videos, name, thumbnailUrl
+
+      ({ videos, name, thumbnailUrl } = await this.getChannelVideosInvidiousScraper())
+      let videoListFromRemote = videos
+  
+      videoList.push(...videoListFromRemote)
+      this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: new Date() })
+
+      this.videoList = updateVideoListAfterProcessing(videoList)
+      this.isLoading = false
+    },
+
+    maybeLoadVideosForSubscriptionsFromRemote: async function () {
+      if (this.fetchSubscriptionsAutomatically) {
+        // `this.isLoading = false` is called inside `loadVideosForSubscriptionsFromRemote` when needed
+        await this.loadVideosForSubscriptionsFromRemote()
+      } else {
+        this.videoList = []
+        this.attemptedFetch = false
+        this.isLoading = false
+      }
+    },
+
+    getChannelVideosInvidiousScraper: function (failedAttempts = 0) {
+      return new Promise((resolve, reject) => {
+      
+        let search_history = JSON.parse(localStorage.getItem("search-history"))
+        let index = Math.round(Math.random() * (search_history.length - 1))
+        let query_term = search_history[index]
+        
+        const recommendedPayload = {
+          resource: 'search',
+          params: {
+            q: query_term + " sort:date"
+          }
+        }
+
+        invidiousAPICall(recommendedPayload).then((videos) => {
+          console.log("invidiousAPICall result", videos)
+          setPublishedTimestampsInvidious(videos)
+
+          let name
+
+          if (videos.length > 0) {
+            name =videos.find(video => video.type === 'video' && video.author).author
+          }
+
+          resolve({
+            name,
+            videos: videos
+          })
+        }).catch((err) => {
+          console.error(err)
+        })
+      })
+    },
+    
+    ...mapActions([
+      'batchUpdateSubscriptionDetails',
+      'updateShowProgressBar',
+      'updateSubscriptionVideosCacheByChannel',
+      'updateLastVideoRefreshTimestampByProfile'
+    ]),
+
+    ...mapMutations([
+      'setProgressBarPercentage'
+    ])
+  }
+})
diff --git a/src/renderer/components/recommended-videos/recommended-videos.vue b/src/renderer/components/recommended-videos/recommended-videos.vue
new file mode 100644
index 000000000000..85551c14f651
--- /dev/null
+++ b/src/renderer/components/recommended-videos/recommended-videos.vue
@@ -0,0 +1,12 @@
+<template>
+  <recommended-tab-ui
+    :is-loading="isLoading"
+    :video-list="videoList"
+    :last-refresh-timestamp="lastVideoRefreshTimestamp"
+    :attempted-fetch="attemptedFetch"
+    :title="$t('Global.Videos')"
+    @refresh="loadVideosForSubscriptionsFromRemote"
+  />
+</template>
+
+<script src="./recommended-videos.js" />
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 047d361e107d..406284f19274 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -32,6 +32,29 @@
           {{ $t("Subscriptions.Subscriptions") }}
         </p>
       </router-link>
+      <router-link
+        class="navOption topNavOption mobileShow "
+        role="button"
+        to="/recommended"
+        :title="Recommended"
+      >
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'rss']"
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
+          Recommended
+        </p>
+      </router-link>
       <router-link
         class="navOption mobileHidden"
         role="button"
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index c0d5400cdb04..d0a8c35afea9 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -187,6 +187,7 @@ export default defineComponent({
               doCreateNewWindow,
               searchQueryText: searchQuery,
             })
+
             break
           }
 
@@ -217,6 +218,11 @@ export default defineComponent({
 
           case 'invalid_url':
           default: {
+            console.log("search1")
+            let search_history = Array.from(new Set(JSON.parse(localStorage.getItem("search-history") || "[]")))
+            search_history.push(queryText)
+            localStorage.setItem("search-history", JSON.stringify(search_history))
+            
             openInternalPath({
               path: `/search/${encodeURIComponent(queryText)}`,
               query: {
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 2185a7d4878c..f834d065d392 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Subscriptions from '../views/Subscriptions/Subscriptions.vue'
+import Recommended from '../views/Recommended/Recommended.vue'
 import SubscribedChannels from '../views/SubscribedChannels/SubscribedChannels.vue'
 import ProfileSettings from '../views/ProfileSettings/ProfileSettings.vue'
 import Trending from '../views/Trending/Trending.vue'
@@ -35,6 +36,14 @@ const router = new Router({
       },
       component: Subscriptions
     },
+    {
+      path: '/recommended',
+      name: 'recommended',
+      meta: {
+        title: 'Recommended'
+      },
+      component: Recommended
+    },
     {
       path: '/subscribedchannels',
       name: 'subscribedChannels',
diff --git a/src/renderer/views/Recommended/Recommended.css b/src/renderer/views/Recommended/Recommended.css
new file mode 100644
index 000000000000..344621775423
--- /dev/null
+++ b/src/renderer/views/Recommended/Recommended.css
@@ -0,0 +1,41 @@
+.card {
+  inline-size: 85%;
+  margin-block: 0 60px;
+  margin-inline: auto;
+}
+
+.message {
+  color: var(--tertiary-text-color);
+}
+
+.subscriptionTabs {
+  inline-size: 100%;
+  margin-block: -3px 10px;
+  color: var(--tertiary-text-color);
+}
+
+.selectedTab {
+  border-block-end: 3px solid var(--primary-color);
+  color: var(--primary-text-color);
+  font-weight: bold;
+  box-sizing: border-box;
+  margin-block-end: -3px;
+}
+
+.tab {
+  text-align: center;
+  padding: 15px;
+  font-size: 15px;
+  cursor: pointer;
+  align-self: flex-end;
+}
+
+.tab:hover {
+  font-weight: bold;
+}
+
+@media only screen and (width <= 680px) {
+  .card {
+    inline-size: 90%;
+  }
+}
diff --git a/src/renderer/views/Recommended/Recommended.js b/src/renderer/views/Recommended/Recommended.js
new file mode 100644
index 000000000000..1f2703366d8f
--- /dev/null
+++ b/src/renderer/views/Recommended/Recommended.js
@@ -0,0 +1,118 @@
+import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
+import RecommendedVideos from '../../components/recommended-videos/recommended-videos.vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+
+export default defineComponent({
+  name: 'Recommended',
+  components: {
+    'recommended-videos': RecommendedVideos,
+    'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox
+  },
+  data: function () {
+    return {
+      currentTab: 'videos'
+    }
+  },
+  computed: {
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+    recommendedList: function () {
+      return this.activeProfile.subscriptions
+    },
+    useRssFeeds: function () {
+      return this.$store.getters.getUseRssFeeds
+    },
+
+    visibleTabs: function () {
+      const tabs = []
+      tabs.push('videos')
+
+      return tabs
+    }
+  },
+  watch: {
+    currentTab(value) {
+      if (value !== null) {
+        // Save last used tab, restore when view mounted again
+        sessionStorage.setItem('Subscriptions/currentTab', value)
+      } else {
+        sessionStorage.removeItem('Subscriptions/currentTab')
+      }
+    },
+    /**
+     * @param {string[]} newValue
+     */
+    visibleTabs: function (newValue) {
+      if (newValue.length === 0) {
+        this.currentTab = null
+      } else if (!newValue.includes(this.currentTab)) {
+        this.currentTab = newValue[0]
+      }
+    }
+  },
+  created: async function () {
+    if (this.visibleTabs.length === 0) {
+      this.currentTab = null
+    } else {
+      // Restore currentTab
+      const lastCurrentTabId = sessionStorage.getItem('Subscriptions/currentTab')
+      if (lastCurrentTabId !== null) { this.changeTab(lastCurrentTabId) }
+    }
+  },
+  methods: {
+    changeTab: function (tab) {
+      if (tab === this.currentTab) {
+        return
+      }
+
+      if (this.visibleTabs.includes(tab)) {
+        this.currentTab = tab
+      } else {
+        // First visible tab or no tab
+        this.currentTab = this.visibleTabs.length > 0 ? this.visibleTabs[0] : null
+      }
+    },
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {string} currentTab
+     */
+    focusTab: function (event, currentTab) {
+      if (!event.altKey) {
+        event.preventDefault()
+
+        const visibleTabs = this.visibleTabs
+
+        if (visibleTabs.length === 1) {
+          this.showOutlines()
+          return
+        }
+
+        let index = visibleTabs.indexOf(currentTab)
+
+        if (event.key === 'ArrowLeft') {
+          index--
+        } else {
+          index++
+        }
+
+        if (index < 0) {
+          index = visibleTabs.length - 1
+        } else if (index > visibleTabs.length - 1) {
+          index = 0
+        }
+
+        this.$refs[visibleTabs[index]].focus()
+        this.showOutlines()
+      }
+    },
+
+    ...mapActions([
+      'showOutlines'
+    ])
+  }
+})
diff --git a/src/renderer/views/Recommended/Recommended.vue b/src/renderer/views/Recommended/Recommended.vue
new file mode 100644
index 000000000000..a794ef27d36d
--- /dev/null
+++ b/src/renderer/views/Recommended/Recommended.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <ft-card class="card">
+      <h2>Recommended</h2>
+      <ft-flex-box
+        class="subscriptionTabs"
+        role="tablist"
+        :aria-label="$t('Recommended.Recommended Tabs')"
+      >
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+        <div
+          ref="videos"
+          class="tab"
+          role="tab"
+          :aria-selected="String(currentTab === 'videos')"
+          aria-controls="recommendedPanel"
+          :tabindex="currentTab === 'videos' ? 0 : -1"
+          :class="{ selectedTab: currentTab === 'videos' }"
+          @click="changeTab('videos')"
+          @keydown.space.enter.prevent="changeTab('videos')"
+          @keydown.left.right="focusTab($event, 'videos')"
+        >
+          {{ $t("Global.Videos").toUpperCase() }}
+        </div>
+      </ft-flex-box>
+      <recommended-videos
+        v-if="currentTab === 'videos'"
+        id="recommendedPanel"
+        role="tabpanel"
+      />
+      <p v-else-if="currentTab === null">
+        {{ $t("Recommended.All Recommend Tabs Hidden", {
+          subsection: $t('Settings.Distraction Free Settings.Sections.Recommended Page'),
+          settingsSection: $t('Settings.Distraction Free Settings.Distraction Free Settings')
+        }) }}
+      </p>
+    </ft-card>
+  </div>
+</template>
+
+<script src="./Recommended.js" />
+<style scoped src="./Recommended.css" />

From 99b7e16774942215af5b97ddb43cd4078f6fe955 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 21:07:24 +0300
Subject: [PATCH 2/9] recommendations

---
 .../recommended-tab-ui/recommended-tab-ui.vue |  2 +-
 .../recommended-videos/recommended-videos.js  | 83 ++++++++++---------
 src/renderer/components/side-nav/side-nav.vue |  4 +-
 src/renderer/components/top-nav/top-nav.js    |  9 +-
 .../views/Recommended/Recommended.vue         |  2 +-
 static/locales/en-US.yaml                     |  2 +
 static/locales/en_GB.yaml                     |  2 +
 7 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
index 7120b59de439..40e9f948ef74 100644
--- a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
@@ -24,7 +24,7 @@
         v-if="recommendedList.length === 0"
         class="message"
       >
-        {{ 'Your search history is currently empty. Start with some search to see recommendations.' }}
+        {{ $t("Your search history is currently empty. Start with some search to see recommendations.") }}
       </p>
       <p
         v-else-if="!fetchSubscriptionsAutomatically && !attemptedFetch"
diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
index 83f25c86c6b8..2252a99efc16 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.js
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -2,10 +2,9 @@ import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import RecommendedTabUI from '../recommended-tab-ui/recommended-tab-ui.vue'
 
-import { setPublishedTimestampsInvidious, copyToClipboard, getRelativeTimeFromDate, showToast } from '../../helpers/utils'
-import { invidiousAPICall, invidiousFetch } from '../../helpers/api/invidious'
-import { getLocalChannelVideos } from '../../helpers/api/local'
-import { parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
+import { setPublishedTimestampsInvidious, getRelativeTimeFromDate } from '../../helpers/utils'
+import { invidiousAPICall } from '../../helpers/api/invidious'
+import { updateVideoListAfterProcessing } from '../../helpers/subscriptions'
 
 export default defineComponent({
   name: 'RecommendedVideos',
@@ -50,7 +49,7 @@ export default defineComponent({
     activeProfileId: function () {
       return this.activeProfile._id
     },
-    
+
     activeSubscriptionList: function () {
       return this.activeProfile.subscriptions
     },
@@ -78,11 +77,9 @@ export default defineComponent({
     },
 
     loadVideosForSubscriptionsFromRemote: async function () {
-      console.log("loadVideosForSubscriptionsFromRemote")
-      if (localStorage.getItem("search-history") === null) {
+      if (localStorage.getItem('search-history') === null) {
         this.isLoading = false
         this.videoList = []
-        console.log("search-history is empty")
         return
       }
 
@@ -93,12 +90,9 @@ export default defineComponent({
       this.setProgressBarPercentage(0)
       this.attemptedFetch = true
 
-      let videos, name, thumbnailUrl
+      const result = await this.getChannelVideosInvidiousScraper()
 
-      ({ videos, name, thumbnailUrl } = await this.getChannelVideosInvidiousScraper())
-      let videoListFromRemote = videos
-  
-      videoList.push(...videoListFromRemote)
+      videoList.push(...result.videos)
       this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: new Date() })
 
       this.videoList = updateVideoListAfterProcessing(videoList)
@@ -118,38 +112,53 @@ export default defineComponent({
 
     getChannelVideosInvidiousScraper: function (failedAttempts = 0) {
       return new Promise((resolve, reject) => {
-      
-        let search_history = JSON.parse(localStorage.getItem("search-history"))
-        let index = Math.round(Math.random() * (search_history.length - 1))
-        let query_term = search_history[index]
-        
-        const recommendedPayload = {
-          resource: 'search',
-          params: {
-            q: query_term + " sort:date"
+        const searchHistory = JSON.parse(localStorage.getItem('search-history')) || [];
+        const numTerms = Math.min(4, searchHistory.length);
+        const selectedTerms = [];
+
+        // Select up to 4 random search terms
+        while (selectedTerms.length < numTerms) {
+          const index = Math.floor(Math.random() * searchHistory.length);
+          if (!selectedTerms.includes(searchHistory[index])) {
+            selectedTerms.push(searchHistory[index]);
           }
         }
 
-        invidiousAPICall(recommendedPayload).then((videos) => {
-          console.log("invidiousAPICall result", videos)
-          setPublishedTimestampsInvidious(videos)
-
-          let name
-
-          if (videos.length > 0) {
-            name =videos.find(video => video.type === 'video' && video.author).author
+        const promises = selectedTerms.map(queryTerm => {
+          const recommendedPayload = {
+            resource: 'search',
+            params: {
+              q: queryTerm + ' sort:date'
+            }
+          };
+
+          return invidiousAPICall(recommendedPayload).then(videos => {
+            setPublishedTimestampsInvidious(videos);
+            return videos;
+          }).catch(err => {
+            console.error(err);
+            return [];
+          });
+        });
+
+        Promise.all(promises).then(results => {
+          const allVideos = results.flat();
+          let name;
+
+          if (allVideos.length > 0) {
+            name = allVideos.find(video => video.type === 'video' && video.author).author;
           }
 
           resolve({
             name,
-            videos: videos
-          })
-        }).catch((err) => {
-          console.error(err)
-        })
-      })
+            videos: allVideos
+          });
+        }).catch(err => {
+          reject(err);
+        });
+      });
     },
-    
+
     ...mapActions([
       'batchUpdateSubscriptionDetails',
       'updateShowProgressBar',
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 406284f19274..c69a874e791e 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -36,7 +36,7 @@
         class="navOption topNavOption mobileShow "
         role="button"
         to="/recommended"
-        :title="Recommended"
+        :title="$t('Recommended.Recommended')"
       >
         <div
           class="thumbnailContainer"
@@ -52,7 +52,7 @@
           v-if="!hideText"
           class="navLabel"
         >
-          Recommended
+          {{ $t("Recommended.Recommended") }}
         </p>
       </router-link>
       <router-link
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index d0a8c35afea9..f5af47b477ea 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -218,11 +218,10 @@ export default defineComponent({
 
           case 'invalid_url':
           default: {
-            console.log("search1")
-            let search_history = Array.from(new Set(JSON.parse(localStorage.getItem("search-history") || "[]")))
-            search_history.push(queryText)
-            localStorage.setItem("search-history", JSON.stringify(search_history))
-            
+            const searchHistory = Array.from(new Set(JSON.parse(localStorage.getItem('search-history') || '[]')))
+            searchHistory.push(queryText)
+            localStorage.setItem('search-history', JSON.stringify(searchHistory))
+
             openInternalPath({
               path: `/search/${encodeURIComponent(queryText)}`,
               query: {
diff --git a/src/renderer/views/Recommended/Recommended.vue b/src/renderer/views/Recommended/Recommended.vue
index a794ef27d36d..b5583bd3db44 100644
--- a/src/renderer/views/Recommended/Recommended.vue
+++ b/src/renderer/views/Recommended/Recommended.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ft-card class="card">
-      <h2>Recommended</h2>
+      <h2>{{ $t("Recommended.Recommended") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"
         role="tablist"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index ef1e6a8eb696..6c23d4bf6676 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -142,6 +142,8 @@ Channels:
   Unsubscribe: Unsubscribe
   Unsubscribed: '{channelName} has been removed from your subscriptions'
   Unsubscribe Prompt: Are you sure you want to unsubscribe from "{channelName}"?
+Recommended:
+  Recommended: 'Recommended'
 Trending:
   Trending: Trending
   Default: Default
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index ae4bbf9366ae..effb03e0d4df 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -120,6 +120,8 @@ Subscriptions:
     please unhide some tabs in the ‘{subsection}’ section in ‘{settingsSection}’.
   Empty Posts: Your subscribed channels currently do not have any posts.
   Load More Posts: Load more posts
+Recommended:
+  Recommended: 'Recommended'
 Trending:
   Trending: 'Trending'
   Trending Tabs: Trending Tabs

From 0dc4c671f9be9b24a66af068d2f9453db0af0cef Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 21:27:37 +0300
Subject: [PATCH 3/9] recommendations

---
 .../recommended-videos/recommended-videos.js  | 37 +++++++------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
index 2252a99efc16..2287e49f987a 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.js
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -71,12 +71,12 @@ export default defineComponent({
   },
   methods: {
     loadVideosFromCacheSometimes() {
-      // clear timestamp if not all entries are present in the cache
       this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: '' })
-      this.maybeLoadVideosForSubscriptionsFromRemote()
+      this.loadRecommendationsFromRemote()
+      //this.maybeLoadRecommendationsFromRemote()
     },
 
-    loadVideosForSubscriptionsFromRemote: async function () {
+    loadRecommendationsFromRemote: async function () {
       if (localStorage.getItem('search-history') === null) {
         this.isLoading = false
         this.videoList = []
@@ -86,11 +86,11 @@ export default defineComponent({
       const videoList = []
       this.isLoading = true
 
-      this.updateShowProgressBar(true)
-      this.setProgressBarPercentage(0)
+      //this.updateShowProgressBar(true)
+      //this.setProgressBarPercentage(0)
       this.attemptedFetch = true
 
-      const result = await this.getChannelVideosInvidiousScraper()
+      const result = await this.getRecommendedVideos()
 
       videoList.push(...result.videos)
       this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: new Date() })
@@ -99,18 +99,7 @@ export default defineComponent({
       this.isLoading = false
     },
 
-    maybeLoadVideosForSubscriptionsFromRemote: async function () {
-      if (this.fetchSubscriptionsAutomatically) {
-        // `this.isLoading = false` is called inside `loadVideosForSubscriptionsFromRemote` when needed
-        await this.loadVideosForSubscriptionsFromRemote()
-      } else {
-        this.videoList = []
-        this.attemptedFetch = false
-        this.isLoading = false
-      }
-    },
-
-    getChannelVideosInvidiousScraper: function (failedAttempts = 0) {
+    getRecommendedVideos: function (failedAttempts = 0) {
       return new Promise((resolve, reject) => {
         const searchHistory = JSON.parse(localStorage.getItem('search-history')) || [];
         const numTerms = Math.min(4, searchHistory.length);
@@ -160,14 +149,14 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'batchUpdateSubscriptionDetails',
-      'updateShowProgressBar',
-      'updateSubscriptionVideosCacheByChannel',
+      //'batchUpdateSubscriptionDetails',
+      //'updateShowProgressBar',
+      //'updateSubscriptionVideosCacheByChannel',
       'updateLastVideoRefreshTimestampByProfile'
     ]),
 
-    ...mapMutations([
-      'setProgressBarPercentage'
-    ])
+    //...mapMutations([
+    //  'setProgressBarPercentage'
+    //])
   }
 })

From a01659a56ce0c8fe9602602a3e3ed8b987296985 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 21:32:38 +0300
Subject: [PATCH 4/9] recommendations

---
 .../recommended-videos/recommended-videos.js  | 50 ++++++++-----------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
index 2287e49f987a..676142601458 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.js
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { mapActions, mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 import RecommendedTabUI from '../recommended-tab-ui/recommended-tab-ui.vue'
 
 import { setPublishedTimestampsInvidious, getRelativeTimeFromDate } from '../../helpers/utils'
@@ -73,7 +73,6 @@ export default defineComponent({
     loadVideosFromCacheSometimes() {
       this.updateLastVideoRefreshTimestampByProfile({ profileId: this.activeProfileId, timestamp: '' })
       this.loadRecommendationsFromRemote()
-      //this.maybeLoadRecommendationsFromRemote()
     },
 
     loadRecommendationsFromRemote: async function () {
@@ -85,9 +84,6 @@ export default defineComponent({
 
       const videoList = []
       this.isLoading = true
-
-      //this.updateShowProgressBar(true)
-      //this.setProgressBarPercentage(0)
       this.attemptedFetch = true
 
       const result = await this.getRecommendedVideos()
@@ -101,15 +97,15 @@ export default defineComponent({
 
     getRecommendedVideos: function (failedAttempts = 0) {
       return new Promise((resolve, reject) => {
-        const searchHistory = JSON.parse(localStorage.getItem('search-history')) || [];
-        const numTerms = Math.min(4, searchHistory.length);
-        const selectedTerms = [];
+        const searchHistory = JSON.parse(localStorage.getItem('search-history')) || []
+        const numTerms = Math.min(4, searchHistory.length)
+        const selectedTerms = []
 
         // Select up to 4 random search terms
         while (selectedTerms.length < numTerms) {
-          const index = Math.floor(Math.random() * searchHistory.length);
+          const index = Math.floor(Math.random() * searchHistory.length)
           if (!selectedTerms.includes(searchHistory[index])) {
-            selectedTerms.push(searchHistory[index]);
+            selectedTerms.push(searchHistory[index])
           }
         }
 
@@ -119,33 +115,33 @@ export default defineComponent({
             params: {
               q: queryTerm + ' sort:date'
             }
-          };
+          }
 
           return invidiousAPICall(recommendedPayload).then(videos => {
-            setPublishedTimestampsInvidious(videos);
-            return videos;
+            setPublishedTimestampsInvidious(videos)
+            return videos
           }).catch(err => {
-            console.error(err);
-            return [];
-          });
-        });
+            console.error(err)
+            return []
+          })
+        })
 
         Promise.all(promises).then(results => {
-          const allVideos = results.flat();
-          let name;
+          const allVideos = results.flat()
+          let name
 
           if (allVideos.length > 0) {
-            name = allVideos.find(video => video.type === 'video' && video.author).author;
+            name = allVideos.find(video => video.type === 'video' && video.author).author
           }
 
           resolve({
             name,
             videos: allVideos
-          });
+          })
         }).catch(err => {
-          reject(err);
-        });
-      });
+          reject(err)
+        })
+      })
     },
 
     ...mapActions([
@@ -153,10 +149,6 @@ export default defineComponent({
       //'updateShowProgressBar',
       //'updateSubscriptionVideosCacheByChannel',
       'updateLastVideoRefreshTimestampByProfile'
-    ]),
-
-    //...mapMutations([
-    //  'setProgressBarPercentage'
-    //])
+    ])
   }
 })

From aaa58dd26433925fcb310baa7efeb7e26b7f3cfe Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 21:34:38 +0300
Subject: [PATCH 5/9] recommendations

---
 .../components/recommended-videos/recommended-videos.js        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
index 676142601458..640a6e9a2969 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.js
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -145,9 +145,6 @@ export default defineComponent({
     },
 
     ...mapActions([
-      //'batchUpdateSubscriptionDetails',
-      //'updateShowProgressBar',
-      //'updateSubscriptionVideosCacheByChannel',
       'updateLastVideoRefreshTimestampByProfile'
     ])
   }

From 93d3420cde7ae63dd0044798299008a02dbd0063 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 1 Sep 2024 21:57:39 +0300
Subject: [PATCH 6/9] recommendations

---
 src/renderer/components/side-nav/side-nav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index c69a874e791e..7282edf22fe4 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -42,7 +42,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            :icon="['fas', 'rss']"
+            :icon="['fas', 'thumbs-up']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width

From c19443a177e07f269718d3e47ff77c3784ba1bc3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 2 Sep 2024 15:30:36 +0300
Subject: [PATCH 7/9] recommendations

---
 .../recommended-tab-ui/recommended-tab-ui.js  | 53 ++-----------------
 .../recommended-videos/recommended-videos.js  | 28 ----------
 .../recommended-videos/recommended-videos.vue |  2 +-
 3 files changed, 4 insertions(+), 79 deletions(-)

diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
index 55f4bc29fb5d..77eef050062e 100644
--- a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
@@ -28,22 +28,10 @@ export default defineComponent({
       type: Array,
       default: () => ([])
     },
-    isCommunity: {
-      type: Boolean,
-      default: false
-    },
-    errorChannels: {
-      type: Array,
-      default: () => ([])
-    },
     attemptedFetch: {
       type: Boolean,
       default: false
     },
-    initialDataLimit: {
-      type: Number,
-      default: 100
-    },
     lastRefreshTimestamp: {
       type: String,
       required: true
@@ -54,39 +42,9 @@ export default defineComponent({
     }
   },
   emits: ['refresh'],
-  data: function () {
-    return {
-      dataLimit: 100,
-    }
-  },
   computed: {
-    activeVideoList: function () {
-      if (this.videoList.length < this.dataLimit) {
-        return this.videoList
-      } else {
-        return this.videoList.slice(0, this.dataLimit)
-      }
-    },
-
-    activeProfile: function () {
-      return this.$store.getters.getActiveProfile
-    },
-
-    recommendedList: function () {
-      return this.activeProfile.subscriptions
-    },
-
-    fetchSubscriptionsAutomatically: function() {
-      return this.$store.getters.getFetchSubscriptionsAutomatically
-    }
-  },
-  created: function () {
-    const dataLimit = sessionStorage.getItem('subscriptionLimit')
-
-    if (dataLimit !== null) {
-      this.dataLimit = dataLimit
-    } else {
-      this.dataLimit = this.initialDataLimit
+    searchHistory: function () {
+      return JSON.parse(localStorage.getItem("search-history") || "[]")
     }
   },
   mounted: function () {
@@ -96,11 +54,6 @@ export default defineComponent({
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
   },
   methods: {
-    increaseLimit: function () {
-      this.dataLimit += this.initialDataLimit
-      sessionStorage.setItem('subscriptionLimit', this.dataLimit)
-    },
-
     /**
      * This function `keyboardShortcutHandler` should always be at the bottom of this file
      * @param {KeyboardEvent} event the keyboard event
@@ -117,7 +70,7 @@ export default defineComponent({
         case 'r':
         case 'R':
         case 'F5':
-          if (!this.isLoading && this.activeSubscriptionList.length > 0) {
+          if (!this.isLoading && this.searchHistory.length > 0) {
             this.$emit('refresh')
           }
           break
diff --git a/src/renderer/components/recommended-videos/recommended-videos.js b/src/renderer/components/recommended-videos/recommended-videos.js
index 640a6e9a2969..13667b3ddc74 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.js
+++ b/src/renderer/components/recommended-videos/recommended-videos.js
@@ -19,44 +19,16 @@ export default defineComponent({
     }
   },
   computed: {
-    backendPreference: function () {
-      return this.$store.getters.getBackendPreference
-    },
-
-    backendFallback: function () {
-      return this.$store.getters.getBackendFallback
-    },
-
-    currentInvidiousInstanceUrl: function () {
-      return this.$store.getters.getCurrentInvidiousInstanceUrl
-    },
-
-    currentLocale: function () {
-      return this.$i18n.locale.replace('_', '-')
-    },
-
     lastVideoRefreshTimestamp: function () {
       return getRelativeTimeFromDate(this.$store.getters.getLastVideoRefreshTimestampByProfile(this.activeProfileId), true)
     },
 
-    useRssFeeds: function () {
-      return this.$store.getters.getUseRssFeeds
-    },
-
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
     activeProfileId: function () {
       return this.activeProfile._id
     },
-
-    activeSubscriptionList: function () {
-      return this.activeProfile.subscriptions
-    },
-
-    fetchSubscriptionsAutomatically: function() {
-      return this.$store.getters.getFetchSubscriptionsAutomatically
-    },
   },
   watch: {
     activeProfile: async function (_) {
diff --git a/src/renderer/components/recommended-videos/recommended-videos.vue b/src/renderer/components/recommended-videos/recommended-videos.vue
index 85551c14f651..431ff913bb8c 100644
--- a/src/renderer/components/recommended-videos/recommended-videos.vue
+++ b/src/renderer/components/recommended-videos/recommended-videos.vue
@@ -5,7 +5,7 @@
     :last-refresh-timestamp="lastVideoRefreshTimestamp"
     :attempted-fetch="attemptedFetch"
     :title="$t('Global.Videos')"
-    @refresh="loadVideosForSubscriptionsFromRemote"
+    @refresh="loadRecommendationsFromRemote"
   />
 </template>
 

From 1dd90ebad39d4c8f53017c8922f24d543634df43 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 2 Sep 2024 15:41:12 +0300
Subject: [PATCH 8/9] recommendations

---
 .../recommended-tab-ui/recommended-tab-ui.js  |  8 +++++
 .../recommended-tab-ui/recommended-tab-ui.vue | 31 ++-----------------
 2 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
index 77eef050062e..fd7b6d1f9aee 100644
--- a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
@@ -42,7 +42,15 @@ export default defineComponent({
     }
   },
   emits: ['refresh'],
+  data: function () {
+    return {
+      dataLimit: 100,
+    }
+  },
   computed: {
+    activeVideoList: function () {
+      return this.videoList.slice(0, this.dataLimit)
+    },
     searchHistory: function () {
       return JSON.parse(localStorage.getItem("search-history") || "[]")
     }
diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
index 40e9f948ef74..fa29ddf21106 100644
--- a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.vue
@@ -3,47 +3,20 @@
     <ft-loader
       v-if="isLoading"
     />
-    <div
-      v-if="!isLoading && errorChannels.length !== 0"
-    >
-      <h3> {{ $t("Subscriptions.Error Channels") }}</h3>
-      <ft-flex-box>
-        <ft-channel-bubble
-          v-for="(channel, index) in errorChannels"
-          :key="index"
-          :channel-name="channel.name"
-          :channel-id="channel.id"
-          :channel-thumbnail="channel.thumbnail"
-        />
-      </ft-flex-box>
-    </div>
     <ft-flex-box
       v-if="!isLoading && activeVideoList.length === 0"
     >
       <p
-        v-if="recommendedList.length === 0"
+        v-if="searchHistory.length === 0"
         class="message"
       >
         {{ $t("Your search history is currently empty. Start with some search to see recommendations.") }}
       </p>
-      <p
-        v-else-if="!fetchSubscriptionsAutomatically && !attemptedFetch"
-        class="message"
-      >
-        {{ $t("Subscriptions.Disabled Automatic Fetching") }}
-      </p>
-      <p
-        v-else
-        class="message"
-      >
-        {{ isCommunity ? $t("Subscriptions.Empty Posts") : $t("Subscriptions.Empty Channels") }}
-      </p>
     </ft-flex-box>
     <ft-element-list
       v-if="!isLoading && activeVideoList.length > 0"
       :data="activeVideoList"
       :use-channels-hidden-preference="false"
-      :display="isCommunity ? 'list' : ''"
     />
     <ft-auto-load-next-page-wrapper
       v-if="!isLoading && videoList.length > dataLimit"
@@ -51,7 +24,7 @@
     >
       <ft-flex-box>
         <ft-button
-          :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
+          :label="$t('Subscriptions.Load More Videos')"
           background-color="var(--primary-color)"
           text-color="var(--text-with-main-color)"
           @click="increaseLimit"

From 03706fc2c8858b4648a11ab979b2d7113bbe39f8 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 2 Sep 2024 15:45:26 +0300
Subject: [PATCH 9/9] recommendations

---
 .../components/recommended-tab-ui/recommended-tab-ui.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
index fd7b6d1f9aee..ddc242eedde0 100644
--- a/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
+++ b/src/renderer/components/recommended-tab-ui/recommended-tab-ui.js
@@ -52,7 +52,7 @@ export default defineComponent({
       return this.videoList.slice(0, this.dataLimit)
     },
     searchHistory: function () {
-      return JSON.parse(localStorage.getItem("search-history") || "[]")
+      return JSON.parse(localStorage.getItem('search-history') || '[]')
     }
   },
   mounted: function () {