Add Tabs to subscriptions page for live streams and shorts (FreeTubeA…

…pp#3725)

* Add Tabs to subscriptions page for live streams and shorts

* Fix naming issue with fetching live streams via Invidious RSS

* Remove console log

* Better error handling and better live stream sorting

* Fix linter issues

* Change videos RSS feed. Make live stream call more efficient.

* Store last used tab in memory. Return to last used tab on mount

* Fix live sorting. Reorganize tabs and check for currentTab via created instead of mounted

* Fix linting issue

* Start Global locales object, add distraction free checks for subscriptions tab

* Start Global locales object for all locales

* Cleanup and reduce duplicate code

* Undo original distraction free settings change

* Fix missing change in previous commit

* Add distraction free settings to hide tabs

* Improve accessibility

* Make app-wide hide live streams setting override hide subscriptions live

* Fix incorrect all tabs disabled message

* Fix arrow key navigation

* Create shared UI component for the subscription tabs

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

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

@@ -80,11 +80,27 @@ export default defineComponent({
     hideChannelCommunity: function() {
       return this.$store.getters.getHideChannelCommunity
     },
+    hideSubscriptionsVideos: function() {
+      return this.$store.getters.getHideSubscriptionsVideos
+    },
+    hideSubscriptionsShorts: function() {
+      return this.$store.getters.getHideSubscriptionsShorts
+    },
+    hideSubscriptionsLive: function() {
+      return this.$store.getters.getHideSubscriptionsLive
+    },
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
+    },
+    hideSubscriptionsLiveTooltip: function () {
+      return this.$t('Tooltips.Distraction Free Settings.Hide Subscriptions Live', {
+        appWideSetting: this.$t('Settings.Distraction Free Settings.Hide Live Streams'),
+        subsection: this.$t('Settings.Distraction Free Settings.Sections.General'),
+        settingsSection: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
+      })
     }
   },
   methods: {
@@ -125,7 +141,10 @@ export default defineComponent({
       'updateHideChannelPlaylists',
       'updateHideChannelCommunity',
       'updateHideChannelPodcasts',
-      'updateHideChannelReleases'
+      'updateHideChannelReleases',
+      'updateHideSubscriptionsVideos',
+      'updateHideSubscriptionsShorts',
+      'updateHideSubscriptionsLive'
     ])
   }
 })

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

@@ -37,6 +37,37 @@
         />
       </div>
     </div>
+    <h4
+      class="groupTitle"
+    >
+      {{ $t('Settings.Distraction Free Settings.Sections.Subscriptions Page') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Subscriptions Videos')"
+          :compact="true"
+          :default-value="hideSubscriptionsVideos"
+          @change="updateHideSubscriptionsVideos"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Subscriptions Shorts')"
+          :compact="true"
+          :default-value="hideSubscriptionsShorts"
+          @change="updateHideSubscriptionsShorts"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Subscriptions Live')"
+          :compact="true"
+          :disabled="hideLiveStreams"
+          :default-value="hideLiveStreams || hideSubscriptionsLive"
+          :tooltip="hideLiveStreams ? hideSubscriptionsLiveTooltip : ''"
+          v-on="!hideLiveStreams ? { change: updateHideSubscriptionsLive } : {}"
+        />
+      </div>
+    </div>
     <h4
       class="groupTitle"
     >