Add setting to disable automatic fetching of subscription feed (#2632)

* Add setting to disable automatic fetching of subscriptions

* rename from load to fetch. fix profile switch auto fetching

* add message for when auto fetch is disabled

* add strings to locale file

* Use a switch column grid for the subscription settings

This matches the layout other settings components

* remove import of now unused ft-flex-box component

* add variable to track if an attempt to fetch has been made.

used so the disable automatic fetch message doesn't block the
empty channels message.

* reduce distance between switches by adding compact=true

* edit tooltip wording

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

@@ -2,14 +2,12 @@ import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
   name: 'SubscriptionSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
-    'ft-toggle-switch': FtToggleSwitch,
+    'ft-toggle-switch': FtToggleSwitch
-    'ft-flex-box': FtFlexBox
   },
   data: function () {
     return {
@@ -22,12 +20,16 @@ export default Vue.extend({
     },
     useRssFeeds: function () {
       return this.$store.getters.getUseRssFeeds
+    },
+    fetchSubscriptionsAutomatically: function () {
+      return this.$store.getters.getFetchSubscriptionsAutomatically
     }
   },
   methods: {
     ...mapActions([
       'updateHideWatchedSubs',
-      'updateUseRssFeeds'
+      'updateUseRssFeeds',
+      'updateFetchSubscriptionsAutomatically'
     ])
   }
 })

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

@@ -2,19 +2,32 @@
   <ft-settings-section
     :title="$t('Settings.Subscription Settings.Subscription Settings')"
   >
-    <ft-flex-box class="settingsFlexStart500px">
+    <div class="switchColumnGrid">
-      <ft-toggle-switch
+      <div class="switchColumn">
-        :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
+        <ft-toggle-switch
-        :default-value="hideWatchedSubs"
+          :label="$t('Settings.Subscription Settings.Fetch Automatically')"
-        @change="updateHideWatchedSubs"
+          :default-value="fetchSubscriptionsAutomatically"
-      />
+          :tooltip="$t('Tooltips.Subscription Settings.Fetch Automatically')"
-      <ft-toggle-switch
+          :compact="true"
-        :label="$t('Settings.Subscription Settings.Fetch Feeds from RSS')"
+          @change="updateFetchSubscriptionsAutomatically"
-        :default-value="useRssFeeds"
+        />
-        :tooltip="$t('Tooltips.Subscription Settings.Fetch Feeds from RSS')"
+        <ft-toggle-switch
-        @change="updateUseRssFeeds"
+          :label="$t('Settings.Subscription Settings.Fetch Feeds from RSS')"
-      />
+          :default-value="useRssFeeds"
-    </ft-flex-box>
+          :tooltip="$t('Tooltips.Subscription Settings.Fetch Feeds from RSS')"
+          :compact="true"
+          @change="updateUseRssFeeds"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
+          :default-value="hideWatchedSubs"
+          :compact="true"
+          @change="updateHideWatchedSubs"
+        />
+      </div>
+    </div>
   </ft-settings-section>
 </template>
 

src/renderer/store/modules/settings.js

@@ -269,7 +269,8 @@ const state = {
   screenshotQuality: 95,
   screenshotAskPath: false,
   screenshotFolderPath: '',
-  screenshotFilenamePattern: '%Y%M%D-%H%N%S'
+  screenshotFilenamePattern: '%Y%M%D-%H%N%S',
+  fetchSubscriptionsAutomatically: true
 }
 
 const stateWithSideEffects = {

src/renderer/views/Subscriptions/Subscriptions.js

@@ -28,7 +28,8 @@ export default Vue.extend({
       isLoading: false,
       dataLimit: 100,
       videoList: [],
-      errorChannels: []
+      errorChannels: [],
+      attemptedFetch: false
     }
   },
   computed: {
@@ -86,6 +87,9 @@ export default Vue.extend({
 
     hideLiveStreams: function() {
       return this.$store.getters.getHideLiveStreams
+    },
+    fetchSubscriptionsAutomatically: function() {
+      return this.$store.getters.getFetchSubscriptionsAutomatically
     }
   },
   watch: {
@@ -120,10 +124,12 @@ export default Vue.extend({
       }
 
       this.isLoading = false
-    } else {
+    } else if (this.fetchSubscriptionsAutomatically) {
       setTimeout(async () => {
         this.getSubscriptions()
       }, 300)
+    } else {
+      this.isLoading = false
     }
   },
   methods: {
@@ -149,6 +155,7 @@ export default Vue.extend({
       this.isLoading = true
       this.updateShowProgressBar(true)
       this.setProgressBarPercentage(0)
+      this.attemptedFetch = true
 
       let videoList = []
       let channelCount = 0
@@ -230,8 +237,13 @@ export default Vue.extend({
           }
         }))
         this.isLoading = false
-      } else {
+      } else if (this.fetchSubscriptionsAutomatically) {
         this.getSubscriptions()
+      } else if (this.activeProfile._id === this.profileSubscriptions.activeProfile) {
+        this.videoList = this.profileSubscriptions.videoList
+      } else {
+        this.videoList = []
+        this.attemptedFetch = false
       }
     },
 

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -28,9 +28,24 @@
       <ft-flex-box
         v-if="activeVideoList.length === 0"
       >
-        <p class="message">
+        <p
+          v-if="activeSubscriptionList.length === 0"
+          class="message"
+        >
           {{ $t("Subscriptions['Your Subscription list is currently empty. Start adding subscriptions to see them here.']") }}
         </p>
+        <p
+          v-else-if="!fetchSubscriptionsAutomatically && !attemptedFetch"
+          class="message"
+        >
+          {{ $t("Subscriptions.Disabled Automatic Fetching") }}
+        </p>
+        <p
+          v-else
+          class="message"
+        >
+          {{ $t("Subscriptions.Empty Channels") }}
+        </p>
       </ft-flex-box>
       <ft-element-list
         v-else

static/locales/en-US.yaml

@@ -84,8 +84,9 @@ Subscriptions:
   Latest Subscriptions: Latest Subscriptions
   This profile has a large number of subscriptions.  Forcing RSS to avoid rate limiting: This
     profile has a large number of subscriptions.  Forcing RSS to avoid rate limiting
-  'Your Subscription list is currently empty. Start adding subscriptions to see them here.': Your
+  'Your Subscription list is currently empty. Start adding subscriptions to see them here.': Your Subscription list is currently empty. Start adding subscriptions to see them here.
-    Subscription list is currently empty. Start adding subscriptions to see them here.
+  Disabled Automatic Fetching: You have disabled automatic subscription fetching. Refresh subscriptions to see them here.
+  Empty Channels: Your subscribed channels currently does not have any videos.
   'Getting Subscriptions. Please wait.': Getting Subscriptions. Please wait.
   Refresh Subscriptions: Refresh Subscriptions
   Load More Videos: Load More Videos
@@ -304,6 +305,7 @@ Settings:
     Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Manage Subscriptions: Manage Subscriptions
+    Fetch Automatically: Fetch Feed Automatically
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free Settings
     Hide Video Views: Hide Video Views
@@ -774,6 +776,8 @@ Tooltips:
     Fetch Feeds from RSS: When enabled, FreeTube will use RSS instead of its default
       method for grabbing your subscription feed. RSS is faster and prevents IP blocking,
       but doesn't provide certain information like video duration or live status
+    Fetch Automatically: When enabled, FreeTube will automatically fetch
+      your subscription feed when a new window is opened and when switching profile.
   Privacy Settings:
     Remove Video Meta Files: When enabled, FreeTube automatically deletes meta files created during video playback,
       when the watch page is closed.