/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const performSearch = async () => { setError(""); setResults([]); setLoading(true); try { const response = await fetch(`/search?q=${encodeURIComponent(query)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { setError(data.error); } else { setResults(data); } } catch (e) { setError(`An error occurred: ${e.message}`); } finally { setLoading(false); } }; const handleSearch = () => { if (query.trim()) { performSearch(); } }; const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearch(); } }; return (

YouTube Video Search

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

{error}

} {loading &&

}

{item.title}

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

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } input { width: 300px; padding: 5px; margin-right: 10px; } button { padding: 5px 10px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } .error { color: red; font-weight: bold; } `;

youtubeSearchResults