move search processing to backend

api/lib/config.ts

@@ -6,5 +6,6 @@ if (!invidiousURL) {
 
 export default {
   autocompleteUrl: 'https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=',
-  detailUrlTemplate: `${invidiousURL}/api/v1/videos/{id}`
+  detailUrlTemplate: `${invidiousURL}/api/v1/videos/{id}`,
+  searchUrl: `${invidiousURL}/api/v1/search`
 }

api/routes/search.ts

@@ -0,0 +1,22 @@
+import axios from 'axios'
+import { Request, Response } from 'express'
+import config from '../lib/config'
+
+export default async function search(req: Request, res: Response) {
+  try {
+    const url = `${config.searchUrl}?q=${req.query.q}`
+    const { data } = await axios.get(url)
+    const json = data.map((d: any) => {
+      return {
+        id: d.videoId,
+        title: d.title,
+        lengthSeconds: d.lengthSeconds,
+        image: `https://i.ytimg.com/vi/${d.videoId}/mqdefault.jpg`
+      }
+    })
+    return res.json(json)
+  } catch (err) {
+    console.error(err)
+    return res.status(500).json(err)
+  }
+}

src/routes/Search.tsx

@@ -1,4 +1,4 @@
-import { API_URL, INVIDIOUS_URL } from '@/config'
+import { API_URL } from '@/config'
 import { DotsThree, DownloadSimple, ListPlus, Play, X } from 'phosphor-react'
 import { json, LoaderFunction, useLoaderData, useOutletContext } from 'react-router-dom'
 import { buttonCN } from '@/styles'
@@ -19,18 +19,9 @@ export const loader: LoaderFunction = async ({ request }) => {
     return { results: [] }
   }
 
-  const res = await fetch(`${INVIDIOUS_URL}/api/v1/search?q=${query}`)
+  const res = await fetch(`${API_URL}/search?q=${query}`)
   const data = await res.json()
-  const parsed = data.map((d: any) => {
-    return {
-      id: d.videoId,
-      title: d.title,
-      lengthSeconds: d.lengthSeconds,
-      image: `https://i.ytimg.com/vi/${d.videoId}/mqdefault.jpg`
-    }
-  })
-
-  return json<SearchResult[]>(parsed)
+  return json<SearchResult[]>(data)
 }
 
 export default function Search() {