invidious: move searching to backend

frontend/src/api/player.tsx

@@ -33,6 +33,19 @@ export interface MetadataUpdateEvent {
     };
 }
 
+export interface SearchResult {
+  type: string;
+  title: string;
+  author: string;
+  mediaUrl: string;
+  thumbnailUrl: string;
+}
+
+export interface SearchResponse {
+  success: boolean;
+  results: SearchResult[];
+}
+
 export const API = {
   async getPlaylist(): Promise<PlaylistItem[]> {
     const response = await fetch('/api/playlist');
@@ -90,6 +103,11 @@ export const API = {
     });
   },
   
+  async search(query: string): Promise<SearchResponse> {
+    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+    return response.json();
+  },
+  
   subscribeToEvents(onMessage: (event: any) => void): WebSocket {
     const ws = new WebSocket(`ws://${window.location.host}/api/events`);
     ws.onmessage = (event) => {

frontend/src/components/InvidiousSearchModal.tsx

@@ -1,21 +1,6 @@
 import React, { useState, KeyboardEvent } from 'react';
 import { FaSearch, FaSpinner, FaTimes } from 'react-icons/fa';
-import { getInvidiousSearchURL, INVIDIOUS_BASE_URL } from '../config';
+import { API, SearchResult } from '../api/player';
-
-interface InvidiousVideoThumbnail {
-  quality: string;
-  url: string;
-  width: number;
-  height: number;
-}
-
-interface InvidiousResult {
-  type: string;
-  title: string;
-  videoId: string;
-  author: string;
-  videoThumbnails?: InvidiousVideoThumbnail[];
-}
 
 interface InvidiousSearchModalProps {
   isOpen: boolean;
@@ -23,17 +8,10 @@ interface InvidiousSearchModalProps {
   onSelectVideo: (url: string) => void;
 }
 
-const ResultCell: React.FC<{ result: InvidiousResult, onClick: () => void }> = ({ result, onClick, ...props }) => {
+const ResultCell: React.FC<{ result: SearchResult, onClick: () => void }> = ({ result, onClick, ...props }) => {
-  const thumbnailUrl = (result: InvidiousResult) => {
-    if (!result.videoThumbnails) return '/assets/placeholder.jpg';
-
-    const thumbnail = result.videoThumbnails.find(t => t.quality === 'medium');
-    return thumbnail ? `${INVIDIOUS_BASE_URL}${thumbnail.url}` : '/assets/placeholder.jpg';
-  };
-
   return (
     <div className="flex gap-4 bg-black/20 p-2 rounded-lg cursor-pointer hover:bg-black/30 transition-colors" onClick={onClick} {...props}>
-      <img src={thumbnailUrl(result)} alt={result.title} className="w-32 h-18 object-cover rounded" />
+      <img src={result.thumbnailUrl} alt={result.title} className="w-32 h-18 object-cover rounded" />
       <div className="flex flex-col justify-center">
         <h3 className="text-white font-semibold">{result.title}</h3>
         <p className="text-white/60">{result.author}</p>
@@ -44,7 +22,7 @@ const ResultCell: React.FC<{ result: InvidiousResult, onClick: () => void }> = (
 
 const InvidiousSearchModal: React.FC<InvidiousSearchModalProps> = ({ isOpen, onClose, onSelectVideo }) => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [results, setResults] = useState<InvidiousResult[]>([]);
+  const [results, setResults] = useState<SearchResult[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = async () => {
@@ -52,14 +30,12 @@ const InvidiousSearchModal: React.FC<InvidiousSearchModalProps> = ({ isOpen, onC
     
     setIsLoading(true);
     try {
-      const response = await fetch(getInvidiousSearchURL(searchQuery));
+      const response = await API.search(searchQuery);
-      const data = await response.json();
+      if (response.success) {
-
+        setResults(response.results);
-      const videoResults = data.filter((item: InvidiousResult) => {
+      } else {
-        return item.type === 'video' || item.type === 'playlist'
+        console.error('Search failed:', response);
-      });
+      }
-
-      setResults(videoResults);
     } catch (error) {
       console.error('Failed to search:', error);
     } finally {
@@ -119,9 +95,9 @@ const InvidiousSearchModal: React.FC<InvidiousSearchModalProps> = ({ isOpen, onC
             <div className="grid gap-4">
               {results.map((result) => (
                 <ResultCell 
-                  key={result.videoId} 
+                  key={result.mediaUrl} 
                   result={result} 
-                  onClick={() => _onSelectVideo(`https://www.youtube.com/watch?v=${result.videoId}`)} 
+                  onClick={() => _onSelectVideo(result.mediaUrl)} 
                 />
               ))}
             </div>

package-lock.json

@@ -9,10 +9,12 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@types/node-fetch": "^2.6.12",
         "classnames": "^2.5.1",
         "express": "^4.21.2",
         "express-ws": "^5.0.2",
         "link-preview-js": "^3.0.14",
+        "node-fetch": "^2.7.0",
         "react-icons": "^5.4.0",
         "ws": "^8.18.0"
       },
@@ -103,12 +105,20 @@
       "version": "22.13.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz",
       "integrity": "sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==",
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.9.18",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
@@ -215,6 +225,11 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -462,6 +477,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -568,6 +594,14 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -720,6 +754,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -858,6 +906,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -994,6 +1056,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -1248,6 +1324,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz",
@@ -1832,6 +1927,11 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -1886,7 +1986,6 @@
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
       "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unpipe": {
@@ -1926,6 +2025,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -20,10 +20,12 @@
     "typescript": "^5.7.3"
   },
   "dependencies": {
+    "@types/node-fetch": "^2.6.12",
     "classnames": "^2.5.1",
     "express": "^4.21.2",
     "express-ws": "^5.0.2",
     "link-preview-js": "^3.0.14",
+    "node-fetch": "^2.7.0",
     "react-icons": "^5.4.0",
     "ws": "^8.18.0"
   }

src/InvidiousAPI.ts

@@ -0,0 +1,78 @@
+import fetch from 'node-fetch';
+
+interface InvidiousVideoThumbnail {
+  quality: string;
+  url: string;
+  width: number;
+  height: number;
+}
+
+interface InvidiousResult {
+  type: string;
+  title: string;
+  videoId: string;
+  playlistId: string;
+  author: string;
+  videoThumbnails?: InvidiousVideoThumbnail[];
+}
+
+export interface SearchResult {
+  type: string;
+  title: string;
+  author: string;
+  mediaUrl: string;
+  thumbnailUrl: string;
+}
+
+const USE_INVIDIOUS = process.env.USE_INVIDIOUS || true;
+const INVIDIOUS_BASE_URL = process.env.INVIDIOUS_BASE_URL || 'http://invidious.nor';
+const INVIDIOUS_API_ENDPOINT = `${INVIDIOUS_BASE_URL}/api/v1`;
+
+export const getInvidiousSearchURL = (query: string): string => 
+  `${INVIDIOUS_API_ENDPOINT}/search?q=${encodeURIComponent(query)}`;
+
+export const getInvidiousThumbnailURL = (url: string): string =>
+  `${INVIDIOUS_BASE_URL}${url}`;
+
+const preferredThumbnailAPIURL = (thumbnails: InvidiousVideoThumbnail[] | undefined): string => {
+  if (!thumbnails || thumbnails.length === 0) {
+    return '/assets/placeholder.jpg';
+  }
+
+  const mediumThumbnail = thumbnails.find(t => t.quality === 'medium');
+  const thumbnail = mediumThumbnail || thumbnails[0];
+  return `/api/thumbnail?url=${encodeURIComponent(thumbnail.url)}`;
+};
+
+const getMediaURL = (result: InvidiousResult): string => {
+  if (result.type === 'video') {
+    return `https://www.youtube.com/watch?v=${result.videoId}`;
+  } else if (result.type === 'playlist') {
+    return `https://www.youtube.com/playlist?list=${result.playlistId}`;
+  }
+
+  throw new Error(`Unknown result type: ${result.type}`);
+};
+
+export const searchInvidious = async (query: string): Promise<SearchResult[]> => {
+  try {
+    const response = await fetch(getInvidiousSearchURL(query));
+    if (!response.ok) {
+      throw new Error(`Invidious HTTP error: ${response.status}`);
+    }
+
+    const data = await response.json() as Array<InvidiousResult>;
+    return data.filter(item => {
+      return item.type === 'video' || item.type === 'playlist';
+    }).map(item => ({
+      type: item.type,
+      title: item.title,
+      author: item.author,
+      mediaUrl: getMediaURL(item),
+      thumbnailUrl: preferredThumbnailAPIURL(item.videoThumbnails)
+    }));
+  } catch (error) {
+    console.error('Failed to search Invidious:', error);
+    throw error;
+  }
+}

src/server.ts

@@ -1,6 +1,8 @@
 import express from "express";
 import expressWs from "express-ws";
 import { MediaPlayer } from "./MediaPlayer";
+import { searchInvidious, getInvidiousThumbnailURL } from "./InvidiousAPI";
+import fetch from "node-fetch";
 
 const app = express();
 app.use(express.json());
@@ -95,6 +97,44 @@ apiRouter.ws("/events", (ws, req) => {
     });
 });
 
+apiRouter.get("/search", withErrorHandling(async (req, res) => {
+    const query = req.query.q as string;
+    if (!query) {
+        res.status(400)
+            .send(JSON.stringify({ success: false, error: "Query parameter 'q' is required" }));
+        return;
+    }
+    
+    const results = await searchInvidious(query);
+    res.send(JSON.stringify({ success: true, results }));
+}));
+
+apiRouter.get("/thumbnail", withErrorHandling(async (req, res) => {
+    const thumbnailUrl = req.query.url as string;
+    if (!thumbnailUrl) {
+        res.status(400)
+            .send(JSON.stringify({ success: false, error: "URL parameter is required" }));
+        return;
+    }
+
+    try {
+        const response = await fetch(getInvidiousThumbnailURL(thumbnailUrl));
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        // Forward the content type header
+        res.set('Content-Type', response.headers.get('content-type') || 'image/jpeg');
+        
+        // Pipe the thumbnail data directly to the response
+        response.body.pipe(res);
+    } catch (error) {
+        console.error('Failed to proxy thumbnail:', error);
+        res.status(500)
+            .send(JSON.stringify({ success: false, error: 'Failed to fetch thumbnail' }));
+    }
+}));
+
 // Serve static files for React app (after building)
 app.use(express.static("dist/frontend"));