Search through youtube api if logged in

Signed-off-by: Sahil Gupte <[email protected]>

Author: Ovenoboyo

src/mainWindow/pages/search/index.vue

@@ -34,8 +34,9 @@
           />
         </RecycleScroller>
         <b-container v-else class="mt-5 mb-3">
-          <b-row align-v="center">
-            <b-col class="nothing-found"> Nothing found... </b-col>
+          <b-row align-v="center" align-h="center">
+            <b-col cols="auto" v-if="i.loading"><b-spinner class="spinner" label="Loading..."></b-spinner></b-col>
+            <b-col v-else class="nothing-found"> Nothing found... </b-col>
           </b-row>
         </b-container>
         <b-button class="load-more" v-if="getLoadMore(tab)" @click="handleLoadMore(tab)"
@@ -70,8 +71,8 @@ export default class SearchPage extends mixins(RouterPushes, ContextMenuMixin, I
     { tab: 'Artists', count: 0, key: 'Artists-0' },
     { tab: 'Genres', count: 0, key: 'Genres-0' },
     { tab: 'Playlists', count: 0, key: 'Playlists-0' },
-    { tab: 'Youtube', count: 0, key: 'Youtube-0' },
-    { tab: 'Spotify', count: 0, key: 'Spotify-0' }
+    { tab: 'Youtube', count: 0, key: 'Youtube-0', loading: false },
+    { tab: 'Spotify', count: 0, key: 'Spotify-0', loading: false }
   ]
 
   private loadedMore: { [key: string]: boolean } = { artists: false }
@@ -81,15 +82,43 @@ export default class SearchPage extends mixins(RouterPushes, ContextMenuMixin, I
   }
 
   private async fetchData() {
-    this.result = await window.SearchUtils.searchAll(`%${this.term}%`)
-    this.refreshLocal()
+    window.SearchUtils.searchAll(`%${this.term}%`).then((data) => {
+      this.result = {
+        ...this.result,
+        ...data
+      }
+      this.refreshLocal()
+    })
+
+    const youtubeItem = this.items.find((val) => val.tab === 'Youtube')
+    if (youtubeItem) {
+      youtubeItem.loading = true
 
-    this.result.youtube = await window.SearchUtils.searchYT(this.term, undefined, false, false, true)
-    this.refreshYoutube()
+      if (vxm.providers.loggedInYoutube) {
+        vxm.providers.youtubeProvider.searchSongs(this.term).then((data) => {
+          this.result.youtube = data
+          this.refreshYoutube()
+          youtubeItem.loading = false
+        })
+      } else {
+        window.SearchUtils.searchYT(this.term, undefined, false, false, true).then((data) => {
+          this.result.youtube = data
+          this.refreshYoutube()
+          youtubeItem.loading = false
+        })
+      }
+    }
 
-    if (vxm.providers.loggedInSpotify) {
-      this.result.spotify = await vxm.providers.spotifyProvider.searchSongs(this.term)
-      this.refreshSpotify()
+    const spotifyItem = this.items.find((val) => val.tab === 'Spotify')
+    if (spotifyItem) {
+      if (vxm.providers.loggedInSpotify) {
+        spotifyItem.loading = true
+        vxm.providers.spotifyProvider.searchSongs(this.term).then((data) => {
+          this.result.spotify = data
+          this.refreshSpotify()
+          spotifyItem.loading = false
+        })
+      }
     }
   }
 
@@ -367,4 +396,6 @@ export default class SearchPage extends mixins(RouterPushes, ContextMenuMixin, I
 .load-more
   background-color: var(--accent)
   color: var(--textInverse)
+
+.spinner
 </style>

src/types/declarations/youtubeResponses.d.ts

@@ -19,13 +19,15 @@ declare namespace YoutubeResponses {
 
   type SearchRequest = {
     params: {
+      part: ['id', 'snippet'?]
       relatedToVideoId?: string
-      videoCategoryId: 10
-      type: 'video'
-      videoDuration: 'short'
+      videoCategoryId?: 10
+      type?: 'video'
+      videoDuration?: 'short'
       maxResults?: number
-      videoEmbeddable: true
-      order: 'date'
+      videoEmbeddable?: true
+      order?: 'date' | 'relevance'
+      q?: string
     }
   }
 
@@ -277,6 +279,7 @@ declare namespace YoutubeResponses {
       }
       kind: string
       etag: string
+      snippet: VideoDetails.Snippet
     }
     interface SearchDetails {
       items: Item[]

src/utils/ui/providers/generics/genericProvider.ts

@@ -83,4 +83,6 @@ export abstract class GenericProvider {
    * @param artist_id ID of artists whose tracks are to be fetched
    */
   public abstract getArtistSongs(artist_id: string): AsyncGenerator<Song[]>
+
+  public abstract searchSongs(term: string): Promise<Song[]>
 }

src/utils/ui/providers/invidious.ts

@@ -217,4 +217,17 @@ export class InvidiousProvider extends GenericAuth implements GenericProvider, G
   public async *getArtistSongs(): AsyncGenerator<Song[]> {
     yield []
   }
+
+  public async searchSongs(term: string): Promise<Song[]> {
+    const resp = await this.populateRequest(InvidiousApiResources.SEARCH, {
+      params: {
+        q: term,
+        type: 'video',
+        sort_by: 'relevance'
+      }
+    })
+
+    if (resp) return this.parsePlaylistItems([resp])
+    return []
+  }
 }

src/utils/ui/providers/youtube.ts

@@ -331,6 +331,28 @@ export class YoutubeProvider extends GenericAuth implements GenericProvider, Gen
     }
   }
 
+  public async searchSongs(term: string): Promise<Song[]> {
+    const songList: Song[] = []
+    const resp = await this.populateRequest(ApiResources.SEARCH, {
+      params: {
+        part: ['id', 'snippet'],
+        q: term,
+        type: 'video',
+        maxResults: 30,
+        order: 'relevance',
+        videoEmbeddable: true
+      }
+    })
+
+    const finalIDs: string[] = []
+    if (resp.items) {
+      resp.items.forEach((val) => finalIDs.push(val.id.videoId))
+      songList.push(...(await this.getSongDetailsFromID(false, ...finalIDs)))
+    }
+
+    return songList
+  }
+
   public async getSongDetails(url: string, invalidateCache = false): Promise<Song | undefined> {
     if (
       url.match(
@@ -379,6 +401,7 @@ export class YoutubeProvider extends GenericAuth implements GenericProvider, Gen
         ;(
           await this.populateRequest(ApiResources.SEARCH, {
             params: {
+              part: ['id', 'snippet'],
               type: 'video',
               videoCategoryId: 10,
               videoDuration: 'short',