YouTube Video Search

\n setQuery(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Enter search query\"\n />\n \n {error &&

{error}

}\n {loading &&

}\n

\n \n {item.title}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n if (url.pathname === \"/search\") {\n const query = url.searchParams.get(\"q\");\n if (!query) {\n return new Response(JSON.stringify({ error: \"Search query is required\" }), {\n headers: { \"Content-Type\": \"application/json\" },\n status: 400,\n });\n }\n try {\n const searchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;\n const response = await fetch(searchUrl);\n if (!response.ok) {\n throw new Error(`YouTube search failed: ${response.statusText}`);\n }\n const html = await response.text();\n \n const scriptRegex = /var ytInitialData = ({.*?});/;\n const scriptMatch = html.match(scriptRegex);\n \n if (scriptMatch && scriptMatch[1]) {\n const jsonData = JSON.parse(scriptMatch[1]);\n const videos = jsonData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents[0].itemSectionRenderer.contents;\n \n const results = videos\n .filter(item => item.videoRenderer)\n .slice(0, 10)\n .map(item => ({\n id: item.videoRenderer.videoId,\n title: item.videoRenderer.title.runs[0].text\n }));\n\n if (results.length === 0) {\n return new Response(JSON.stringify({ error: \"No results found\" }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(JSON.stringify(results), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n throw new Error(\"Failed to extract video data from the page\");\n }\n } catch (error) {\n console.error(\"Search error:\", error);\n return new Response(JSON.stringify({ error: \"An error occurred while fetching search results.\" }), {\n headers: { \"Content-Type\": \"application/json\" },\n status: 500,\n });\n }\n }\n\n return new Response(`\n \n \n YouTube Video Search\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\ninput {\n width: 300px;\n padding: 5px;\n margin-right: 10px;\n}\nbutton {\n padding: 5px 10px;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n margin-bottom: 10px;\n}\n.error {\n color: red;\n font-weight: bold;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/trob/youtubeSearchResults/code/main.tsx","extension","actionData","errors"]