Subscriptions: Add community tab

src/renderer/components/distraction-settings/distraction-settings.js

@@ -92,6 +92,9 @@ export default defineComponent({
     hideSubscriptionsLive: function () {
       return this.$store.getters.getHideSubscriptionsLive
     },
+    hideSubscriptionsCommunity: function() {
+      return this.$store.getters.getHideSubscriptionsCommunity
+    },
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
@@ -155,6 +158,7 @@ export default defineComponent({
       'updateHideSubscriptionsVideos',
       'updateHideSubscriptionsShorts',
       'updateHideSubscriptionsLive',
+      'updateHideSubscriptionsCommunity',
       'updateBlurThumbnails'
     ])
   }

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -66,6 +66,12 @@
           :tooltip="hideLiveStreams ? hideSubscriptionsLiveTooltip : ''"
           v-on="!hideLiveStreams ? { change: updateHideSubscriptionsLive } : {}"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Subscriptions Community')"
+          :compact="true"
+          :default-value="hideSubscriptionsCommunity"
+          @change="updateHideSubscriptionsCommunity"
+        />
       </div>
     </div>
     <h4

src/renderer/components/ft-community-post/ft-community-post.js

@@ -40,6 +40,7 @@ export default defineComponent({
       commentCount: '',
       isLoading: true,
       author: '',
+      authorId: '',
     }
   },
   computed: {
@@ -104,6 +105,7 @@ export default defineComponent({
       this.commentCount = this.data.commentCount
       this.type = (this.data.postContent !== null && this.data.postContent !== undefined) ? this.data.postContent.type : 'text'
       this.author = this.data.author
+      this.authorId = this.data.authorId
       this.isLoading = false
     },
 

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -4,6 +4,7 @@
 .outside {
   margin: auto;
   width: 40%;
+
   @media screen and (max-width: 768px) {
     width: 100%;
   }
@@ -33,6 +34,11 @@
     font-size: 15px;
     font-weight: bold;
     margin: 5px 6px 0 5px;
+
+    .authorNameLink {
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   .publishedText {

src/renderer/components/ft-community-post/ft-community-post.vue

@@ -8,16 +8,43 @@
     <div
       class="author-div"
     >
-      <img
+      <template
         v-if="authorThumbnails.length > 0"
-        :src="getBestQualityImage(authorThumbnails)"
-        class="communityThumbnail"
-        alt=""
       >
+        <router-link
+          v-if="authorId"
+          :to="`/channel/${authorId}`"
+          tabindex="-1"
+          aria-hidden="true"
+        >
+          <img
+            :src="getBestQualityImage(authorThumbnails)"
+            class="communityThumbnail"
+            alt=""
+          >
+        </router-link>
+        <img
+          v-else
+          :src="getBestQualityImage(authorThumbnails)"
+          class="communityThumbnail"
+          alt=""
+        >
+      </template>
       <p
         class="authorName"
       >
-        {{ author }}
+        <router-link
+          v-if="authorId"
+          :to="`/channel/${authorId}`"
+          class="authorNameLink"
+        >
+          {{ author }}
+        </router-link>
+        <template
+          v-else
+        >
+          {{ author }}
+        </template>
       </p>
       <p
         class="publishedText"

src/renderer/components/subscriptions-community/subscriptions-community.js

@@ -0,0 +1,221 @@
+import { defineComponent } from 'vue'
+import { mapActions, mapMutations } from 'vuex'
+import SubscriptionsTabUI from '../subscriptions-tab-ui/subscriptions-tab-ui.vue'
+
+import { calculatePublishedDate, copyToClipboard, showToast } from '../../helpers/utils'
+import { getLocalChannelCommunity } from '../../helpers/api/local'
+import { invidiousGetCommunityPosts } from '../../helpers/api/invidious'
+
+export default defineComponent({
+  name: 'SubscriptionsCommunity',
+  components: {
+    'subscriptions-tab-ui': SubscriptionsTabUI
+  },
+  data: function () {
+    return {
+      isLoading: false,
+      postList: [],
+      errorChannels: [],
+      attemptedFetch: false,
+    }
+  },
+  computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+
+    backendFallback: function () {
+      return this.$store.getters.getBackendFallback
+    },
+
+    currentInvidiousInstance: function () {
+      return this.$store.getters.getCurrentInvidiousInstance
+    },
+
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+    activeProfileId: function () {
+      return this.activeProfile._id
+    },
+
+    cacheEntriesForAllActiveProfileChannels() {
+      const entries = []
+      this.activeSubscriptionList.forEach((channel) => {
+        const cacheEntry = this.$store.getters.getPostsCacheByChannel(channel.id)
+        if (cacheEntry == null) { return }
+
+        entries.push(cacheEntry)
+      })
+      return entries
+    },
+    postCacheForAllActiveProfileChannelsPresent() {
+      if (this.cacheEntriesForAllActiveProfileChannels.length === 0) { return false }
+      if (this.cacheEntriesForAllActiveProfileChannels.length < this.activeSubscriptionList.length) { return false }
+
+      return this.cacheEntriesForAllActiveProfileChannels.every((cacheEntry) => {
+        return cacheEntry.posts != null
+      })
+    },
+
+    activeSubscriptionList: function () {
+      return this.activeProfile.subscriptions
+    },
+
+    fetchSubscriptionsAutomatically: function() {
+      return this.$store.getters.getFetchSubscriptionsAutomatically
+    },
+  },
+  watch: {
+    activeProfile: async function (_) {
+      this.isLoading = true
+      this.loadpostsFromCacheSometimes()
+    },
+  },
+  mounted: async function () {
+    this.isLoading = true
+
+    this.loadpostsFromCacheSometimes()
+  },
+  methods: {
+    loadpostsFromCacheSometimes() {
+      // This method is called on view visible
+      if (this.postCacheForAllActiveProfileChannelsPresent) {
+        this.loadPostsFromCacheForAllActiveProfileChannels()
+        return
+      }
+
+      this.maybeLoadPostsForSubscriptionsFromRemote()
+    },
+
+    async loadPostsFromCacheForAllActiveProfileChannels() {
+      const postList = []
+      this.activeSubscriptionList.forEach((channel) => {
+        const channelCacheEntry = this.$store.getters.getPostsCacheByChannel(channel.id)
+
+        postList.push(...channelCacheEntry.posts)
+      })
+
+      postList.sort((a, b) => {
+        return calculatePublishedDate(b.publishedText) - calculatePublishedDate(a.publishedText)
+      })
+
+      this.postList = postList
+      this.isLoading = false
+    },
+
+    loadPostsForSubscriptionsFromRemote: async function () {
+      if (this.activeSubscriptionList.length === 0) {
+        this.isLoading = false
+        this.postList = []
+        return
+      }
+
+      const channelsToLoadFromRemote = this.activeSubscriptionList
+      const postList = []
+      let channelCount = 0
+      this.isLoading = true
+
+      this.updateShowProgressBar(true)
+      this.setProgressBarPercentage(0)
+      this.attemptedFetch = true
+
+      this.errorChannels = []
+      const postListFromRemote = (await Promise.all(channelsToLoadFromRemote.map(async (channel) => {
+        let posts = []
+        if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
+          posts = await this.getChannelPostsInvidious(channel)
+        } else {
+          posts = await this.getChannelPostsLocal(channel)
+        }
+
+        channelCount++
+        const percentageComplete = (channelCount / channelsToLoadFromRemote.length) * 100
+        this.setProgressBarPercentage(percentageComplete)
+
+        this.updateSubscriptionPostsCacheByChannel({
+          channelId: channel.id,
+          posts: posts,
+        })
+        return posts
+      }))).flatMap((o) => o)
+      postList.push(...postListFromRemote)
+      postList.sort((a, b) => {
+        return calculatePublishedDate(b.publishedText) - calculatePublishedDate(a.publishedText)
+      })
+
+      this.postList = postList
+      this.isLoading = false
+      this.updateShowProgressBar(false)
+    },
+
+    maybeLoadPostsForSubscriptionsFromRemote: async function () {
+      if (this.fetchSubscriptionsAutomatically) {
+        // `this.isLoading = false` is called inside `loadPostsForSubscriptionsFromRemote` when needed
+        await this.loadPostsForSubscriptionsFromRemote()
+      } else {
+        this.postList = []
+        this.attemptedFetch = false
+        this.isLoading = false
+      }
+    },
+
+    getChannelPostsLocal: async function (channel) {
+      try {
+        const entries = await getLocalChannelCommunity(channel.id)
+
+        if (entries === null) {
+          this.errorChannels.push(channel)
+          return []
+        }
+        entries.forEach(post => {
+          post.authorId = channel.id
+        })
+        return entries
+      } catch (err) {
+        console.error(err)
+        const errorMessage = this.$t('Local API Error (Click to copy)')
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
+          copyToClipboard(err)
+        })
+        if (this.backendPreference === 'local' && this.backendFallback) {
+          showToast(this.$t('Falling back to Invidious API'))
+          return await this.getChannelPostsInvidious(channel)
+        }
+        return []
+      }
+    },
+
+    getChannelPostsInvidious: function (channel) {
+      return new Promise((resolve, reject) => {
+        invidiousGetCommunityPosts(channel.id).then(result => {
+          result.posts.forEach(post => {
+            post.authorId = channel.id
+          })
+          resolve(result.posts)
+        }).catch((err) => {
+          console.error(err)
+          const errorMessage = this.$t('Invidious API Error (Click to copy)')
+          showToast(`${errorMessage}: ${err.responseText}`, 10000, () => {
+            copyToClipboard(err.responseText)
+          })
+          if (process.env.IS_ELECTRON && this.backendPreference === 'invidious' && this.backendFallback) {
+            showToast(this.$t('Falling back to the local API'))
+            resolve(this.getChannelPostsLocal(channel))
+          } else {
+            resolve([])
+          }
+        })
+      })
+    },
+
+    ...mapActions([
+      'updateShowProgressBar',
+      'updateSubscriptionPostsCacheByChannel',
+    ]),
+
+    ...mapMutations([
+      'setProgressBarPercentage'
+    ])
+  }
+})

src/renderer/components/subscriptions-community/subscriptions-community.vue

@@ -0,0 +1,12 @@
+<template>
+  <subscriptions-tab-ui
+    :is-loading="isLoading"
+    :video-list="postList"
+    :error-channels="errorChannels"
+    :attempted-fetch="attemptedFetch"
+    :display-list="true"
+    @refresh="loadPostsForSubscriptionsFromRemote"
+  />
+</template>
+
+<script src="./subscriptions-community.js" />

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js

@@ -28,6 +28,10 @@ export default defineComponent({
       type: Array,
       default: () => ([])
     },
+    displayList: {
+      type: Boolean,
+      default: false
+    },
     errorChannels: {
       type: Array,
       default: () => ([])

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue

@@ -44,6 +44,7 @@
       v-if="!isLoading && activeVideoList.length > 0"
       :data="activeVideoList"
       :use-channels-hidden-preference="false"
+      :display="displayList ? 'list' : ''"
     />
     <ft-flex-box
       v-if="!isLoading && videoList.length > dataLimit"