Add tooltips and context to the settings page

src/renderer/components/ft-input/ft-input.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
+import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 
 export default Vue.extend({
   name: 'FtInput',
+  components: {
+    'ft-tooltip': FtTooltip
+  },
   props: {
     placeholder: {
       type: String,
@@ -30,6 +34,10 @@ export default Vue.extend({
     dataList: {
       type: Array,
       default: () => { return [] }
+    },
+    tooltip: {
+      type: String,
+      default: ''
     }
   },
   data: function () {

src/renderer/components/ft-input/ft-input.vue

@@ -11,6 +11,12 @@
       :for="id"
     >
       {{ placeholder }}
+      <ft-tooltip
+        v-if="tooltip !== ''"
+        class="selectTooltip"
+        position="right"
+        :tooltip="tooltip"
+      />
     </label>
     <input
       :id="id"

src/renderer/components/ft-select/ft-select.css

@@ -68,6 +68,12 @@
   color: var(--tertiary-text-color);
 }
 
+.selectTooltip {
+  position: absolute;
+  top: -20px;
+  right: 17px;
+}
+
 
 /* LABEL ======================================= */
 .select-label {

src/renderer/components/ft-select/ft-select.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
+import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 
 export default Vue.extend({
   name: 'FtSelect',
+  components: {
+    'ft-tooltip': FtTooltip
+  },
   props: {
     placeholder: {
       type: String,
@@ -18,6 +22,10 @@ export default Vue.extend({
     selectValues: {
       type: Array,
       required: true
+    },
+    tooltip: {
+      type: String,
+      default: ''
     }
   }
 })

src/renderer/components/ft-select/ft-select.vue

@@ -22,6 +22,11 @@
     <label class="select-label">
       {{ placeholder }}
     </label>
+    <ft-tooltip
+      v-if="tooltip !== ''"
+      class="selectTooltip"
+      :tooltip="tooltip"
+    />
   </div>
 </template>
 

src/renderer/components/ft-toggle-switch/ft-toggle-switch.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
+import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 
 export default Vue.extend({
   name: 'FtToggleSwitch',
+  components: {
+    'ft-tooltip': FtTooltip
+  },
   props: {
     label: {
       type: String,
@@ -18,6 +22,10 @@ export default Vue.extend({
     disabled: {
       type: Boolean,
       default: false
+    },
+    tooltip: {
+      type: String,
+      default: ''
     }
   },
   data: function () {

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -18,6 +18,11 @@
       class="switch-label"
     >
       {{ label }}
+      <ft-tooltip
+        v-if="tooltip !== ''"
+        class="selectTooltip"
+        :tooltip="tooltip"
+      />
     </label>
   </div>
 </template>

src/renderer/components/ft-tooltip/ft-tooltip.css

@@ -36,8 +36,8 @@
   font-size: 1rem;
   line-height: 120%;
   margin: 0;
-  max-width: 10em;
+  max-width: max-content;
-  min-width: max-content;
+  min-width: 15em;
   opacity: 0;
   padding: 10px 8px;
   pointer-events: none;
@@ -84,4 +84,4 @@
 .tooltip {
   display: inline-block;
   position: relative;
-}
+}

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

@@ -651,6 +651,15 @@ export default Vue.extend({
       this.updateInvidiousInstanceBounce(invidiousInstance)
     },
 
+    handlePreferredApiBackend: function (backend) {
+      this.updateBackendPreference(backend)
+      console.log(backend)
+
+      if (backend === 'local') {
+        this.updateForceLocalBackendForLegacy(false)
+      }
+    },
+
     updateLocale: function (locale) {
       this.$i18n.locale = locale
       this.currentLocale = locale
@@ -668,7 +677,8 @@ export default Vue.extend({
       'updateRegion',
       'updateListType',
       'updateThumbnailPreference',
-      'updateInvidiousInstance'
+      'updateInvidiousInstance',
+      'updateForceLocalBackendForLegacy'
     ])
   }
 })

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

@@ -19,6 +19,7 @@
           :label="$t('Settings.General Settings.Fallback to Non-Preferred Backend on Failure')"
           :default-value="backendFallback"
           :compact="true"
+          :tooltip="$t('Tooltips.General Settings.Fallback to Non-Preferred Backend on Failure')"
           @change="updateBackendFallback"
         />
       </div>
@@ -43,7 +44,8 @@
         :value="backendPreference"
         :select-names="backendNames"
         :select-values="backendValues"
-        @change="updateBackendPreference"
+        :tooltip="$t('Tooltips.General Settings.Preferred API Backend')"
+        @change="handlePreferredApiBackend"
       />
       <ft-select
         v-if="false"
@@ -73,6 +75,7 @@
         :value="thumbnailPreference"
         :select-names="thumbnailTypeNames"
         :select-values="thumbnailTypeValues"
+        :tooltip="$t('Tooltips.General Settings.Thumbnail Preference')"
         @change="updateThumbnailPreference"
       />
       <ft-select
@@ -90,6 +93,7 @@
         :show-label="true"
         :value="invidiousInstance"
         :data-list="instanceValues"
+        :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
         @input="handleInvidiousInstanceInput"
       />
     </ft-flex-box>

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

@@ -34,6 +34,10 @@ export default Vue.extend({
     }
   },
   computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+
     autoplayVideos: function () {
       return this.$store.getters.getAutoplayVideos
     },

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

@@ -19,13 +19,16 @@
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Force Local Backend for Legacy Formats')"
           :compact="true"
+          :disabled="backendPreference === 'local'"
           :default-value="forceLocalBackendForLegacy"
+          :tooltip="$t('Tooltips.Player Settings.Force Local Backend for Legacy Formats')"
           @change="updateForceLocalBackendForLegacy"
         />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Proxy Videos Through Invidious')"
           :compact="true"
           :default-value="proxyVideos"
+          :tooltip="$t('Tooltips.Player Settings.Proxy Videos Through Invidious')"
           @change="updateProxyVideos"
         />
         <ft-toggle-switch
@@ -84,6 +87,7 @@
         :value="defaultVideoFormat"
         :select-names="formatNames"
         :select-values="formatValues"
+        :tooltip="$t('Tooltips.Player Settings.Default Video Format')"
         @change="updateDefaultVideoFormat"
       />
       <ft-select

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

@@ -16,6 +16,7 @@
       <ft-toggle-switch
         :label="$t('Settings.Subscription Settings.Fetch Feeds from RSS')"
         :default-value="useRssFeeds"
+        :tooltip="$t('Tooltips.Subscription Settings.Fetch Feeds from RSS')"
         @change="updateUseRssFeeds"
       />
     </ft-flex-box>

static/locales/en-US.yaml

@@ -530,6 +530,20 @@ Comments:
   No more comments available: No more comments available
 Up Next: Up Next
 
+#Tooltips
+Tooltips:
+  General Settings:
+    Preferred API Backend: Choose the backend that FreeTube uses to obtain data. The local API is a built in extractor. The Invidious API requires an Invidious server to connect to
+    Fallback to Non-Preferred Backend on Failure: When your preferred API has a problem, FreeTube will automatically attempt to use your non-preferred API as a fallback method when enabled
+    Thumbnail Preference: All thumbnails throughout FreeTube will be replaced with a frame of the video instead of the default thumbnail
+    Invidious Instance: The Invidious instance that FreeTube will connect to for API calls. Clear the current instance to see a list of public instances to choose from
+  Player Settings:
+    Force Local Backend for Legacy Formats: Only works when the Invidious API is your default. When enabled, the local API will run and use the legacy formats returned by that instead of the ones returned by Invidious. Helps when the videos returned by Invidious don't play due to country restrictions
+    Proxy Videos Through Invidious: Will connect to Invidious to serve videos instead of making a direct connection to YouTube. Overrides API preference
+    Default Video Format: Set the formats used when a video plays. Dash formats can play higher qualities. Legacy formats are limited to a max of 720p but use less bandwidth. Audio formats are audio only streams
+  Subscription Settings:
+    Fetch Feeds from RSS: When enabled, FreeTube will use RSS instead of it's 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
+
 # Toast Messages
 Local API Error (Click to copy): Local API Error (Click to copy)
 Invidious API Error (Click to copy): Invidious API Error (Click to copy)