Allow using piped api for comments, playlists, search suggestions and trending

_scripts/getInstances.js

@@ -14,3 +14,10 @@ fetch(invidiousApiUrl).then(e => e.json()).then(res => {
   })
   fs.writeFile('././static/invidious-instances.json', JSON.stringify(data, null, 2))
 })
+
+const pipedApiUrl = 'https://piped-instances.kavin.rocks/'
+
+fetch(pipedApiUrl).then(e => e.json()).then(res => {
+  const data = res.map(e => e.api_url)
+  fs.writeFile('././static/piped-instances.json', JSON.stringify(data, null, 2))
+})

src/renderer/App.js

@@ -97,6 +97,9 @@ export default defineComponent({
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
+    defaultPipedInstance: function () {
+      return this.$store.getters.getDefaultPipedInstance
+    },
 
     baseTheme: function () {
       return this.$store.getters.getBaseTheme
@@ -159,9 +162,17 @@ export default defineComponent({
     this.grabUserSettings().then(async () => {
       this.checkThemeSettings()
 
-      await this.fetchInvidiousInstances()
+      await Promise.allSettled([
+        this.fetchInvidiousInstances(),
+        this.fetchPipedInstances()
+      ])
+
       if (this.defaultInvidiousInstance === '') {
-        await this.setRandomCurrentInvidiousInstance()
+        this.setRandomCurrentInvidiousInstance()
+      }
+
+      if (this.defaultPipedInstance === '') {
+        this.setRandomCurrentPipedInstance()
       }
 
       this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => {
@@ -542,6 +553,8 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'setRandomCurrentInvidiousInstance',
+      'fetchPipedInstances',
+      'setRandomCurrentPipedInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',
       'updateMainColor',

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

@@ -47,10 +47,14 @@ export default defineComponent({
   },
   computed: {
     backendPreference: function () {
-      return this.$store.getters.getBackendPreference
+      let preference = this.$store.getters.getBackendPreference
+      if (preference === 'piped') {
+        preference = this.$store.getters.getFallbackPreference
+      }
+      return preference
     },
     backendFallback: function () {
-      return this.$store.getters.getBackendFallback
+      return this.$store.getters.getBackendFallback && this.$store.getters.getBackendPreference !== 'piped'
     },
     profileList: function () {
       return this.$store.getters.getProfileList

src/renderer/components/ft-instance-selector/ft-instance-selector.js

@@ -0,0 +1,50 @@
+import { defineComponent } from 'vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default defineComponent({
+  name: 'FtInstanceSelector',
+  components: {
+    'ft-button': FtButton,
+    'ft-flex-box': FtFlexBox,
+    'ft-input': FtInput
+  },
+  props: {
+    placeholder: {
+      type: String,
+      required: true
+    },
+    tooltip: {
+      type: String,
+      required: true
+    },
+    backendType: {
+      type: String,
+      required: true
+    },
+    currentInstance: {
+      type: String,
+      required: true
+    },
+    instanceList: {
+      type: Array,
+      required: true
+    },
+    defaultInstance: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    handleInstanceInput: function (inputData) {
+      this.$emit('input', inputData)
+    },
+    setDefaultInstance: function () {
+      this.$emit('setDefaultInstance')
+    },
+    clearDefaultInstance: function () {
+      this.$emit('clearDefaultInstance')
+    }
+  }
+})

src/renderer/components/ft-instance-selector/ft-instance-selector.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <ft-flex-box
+      class="settingsFlexStart460px"
+    >
+      <ft-input
+        :placeholder="placeholder"
+        :show-action-button="false"
+        :show-label="true"
+        :value="currentInstance"
+        :data-list="instanceList"
+        :tooltip="tooltip"
+        @input="handleInstanceInput"
+      />
+    </ft-flex-box>
+    <ft-flex-box>
+      <div v-if="backendType === 'piped'">
+        <a href="https://github.com/TeamPiped/Piped/wiki/Instances">
+          {{ $t('Settings.General Settings.View all Piped instance information') }}
+        </a>
+      </div>
+      <div
+        v-else
+      >
+        <a
+          href="https://api.invidious.io"
+        >
+          {{ $t('Settings.General Settings.View all Invidious instance information') }}
+        </a>
+      </div>
+    </ft-flex-box>
+    <p
+      v-if="defaultInstance !== ''"
+      class="center"
+    >
+      {{ $t('Settings.General Settings.The currently set default instance is {instance}', {
+        instance: defaultInstance
+      }) }}
+    </p>
+    <template v-else>
+      <p
+        class="center"
+      >
+        {{ $t('Settings.General Settings.No default instance has been set') }}
+      </p>
+      <p
+        class="center"
+      >
+        {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
+      </p>
+    </template>
+    <ft-flex-box>
+      <ft-button
+        :label="$t('Settings.General Settings.Set Current Instance as Default')"
+        @click="setDefaultInstance"
+      />
+      <ft-button
+        :label="$t('Settings.General Settings.Clear Default Instance')"
+        @click="clearDefaultInstance"
+      />
+    </ft-flex-box>
+  </div>
+</template>
+
+<script src="./ft-instance-selector"></script>

src/renderer/components/ft-list-video/ft-list-video.js

@@ -135,6 +135,10 @@ export default defineComponent({
       return this.$store.getters.getBackendPreference
     },
 
+    fallbackPreference: function () {
+      return this.$store.getters.getFallbackPreference
+    },
+
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },
@@ -313,27 +317,40 @@ export default defineComponent({
         return require('../../assets/img/thumbnail_placeholder.svg')
       }
 
-      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail != null) {
-        return this.deArrowCache.thumbnail
+      let baseUrl = ''
+      let backendPreference = this.backendPreference
+      if (backendPreference === 'piped') {
+        if (this.data.thumbnail) {
+          return this.data.thumbnail
+        } else {
+          // this should be removed once piped supports more endpoints
+          backendPreference = this.fallbackPreference
+        }
       }
 
-      let baseUrl
-      if (this.backendPreference === 'invidious') {
+      if (!process.env.IS_ELECTRON || backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
       } else {
         baseUrl = 'https://i.ytimg.com'
       }
 
+      let imageUrl = ''
+
       switch (this.thumbnailPreference) {
         case 'start':
-          return `${baseUrl}/vi/${this.id}/mq1.jpg`
+          imageUrl = `${baseUrl}/vi/${this.id}/mq1.jpg`
+          break
         case 'middle':
-          return `${baseUrl}/vi/${this.id}/mq2.jpg`
+          imageUrl = `${baseUrl}/vi/${this.id}/mq2.jpg`
+          break
         case 'end':
-          return `${baseUrl}/vi/${this.id}/mq3.jpg`
+          imageUrl = `${baseUrl}/vi/${this.id}/mq3.jpg`
+          break
         default:
-          return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
+          imageUrl = `${baseUrl}/vi/${this.id}/mqdefault.jpg`
       }
+
+      return imageUrl
     },
 
     hideVideoViews: function () {

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js

@@ -41,7 +41,11 @@ export default defineComponent({
   },
   computed: {
     backendPreference: function () {
-      return this.$store.getters.getBackendPreference
+      let preference = this.$store.getters.getBackendPreference
+      if (preference === 'piped') {
+        preference = this.$store.getters.getFallbackPreference
+      }
+      return preference
     },
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js

@@ -34,7 +34,11 @@ export default defineComponent({
   },
   computed: {
     backendPreference: function () {
-      return this.$store.getters.getBackendPreference
+      let preference = this.$store.getters.getBackendPreference
+      if (preference === 'piped') {
+        preference = this.$store.getters.getFallbackPreference
+      }
+      return preference
     },
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance