🎥 YouTube Search & Save

\n {error &&

{error}

}\n {saveError &&

{saveError}

}\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 { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_saved_videos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n video_id TEXT NOT NULL,\n title TEXT NOT NULL,\n thumbnail TEXT NOT NULL,\n FOREIGN KEY(user_id) REFERENCES ${KEY}_users(id)\n )\n `);\n\n const url = new URL(request.url);\n\n // Save Video Route\n if (url.pathname === \"/save-video\" && request.method === \"POST\") {\n try {\n const videoData = await request.json();\n \n // Validate input\n if (!videoData.videoId || !videoData.title) {\n return new Response(JSON.stringify({ \n error: \"Invalid video data. Video ID and title are required.\" \n }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // In a real app, you'd associate this with a logged-in user\n const result = await sqlite.execute(\n `\n INSERT INTO ${KEY}_saved_videos \n (user_id, video_id, title, thumbnail) \n VALUES (1, ?, ?, ?)\n `,\n [\n videoData.videoId,\n videoData.title,\n videoData.thumbnail || '',\n ],\n );\n\n return new Response(JSON.stringify({ \n success: true, \n id: result.lastInsertRowId \n }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Save video error:\", error);\n return new Response(JSON.stringify({ \n error: \"Failed to save video. \" + error.message \n }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Rest of the code remains the same...\n // (YouTube Search Route and Main HTML response)\n // ... (previous implementation)\n\n return new Response(\n `\n \n \n YouTube Search & Save\n \n \n \n \n

\n \n \n \n View Source\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// Styles and CSS remain unchanged from previous version\nconst styles = {\n container: {\n fontFamily: \"Arial, sans-serif\",\n maxWidth: \"800px\",\n margin: \"0 auto\",\n padding: \"20px\",\n },\n searchForm: {\n display: \"flex\",\n marginBottom: \"20px\",\n },\n searchInput: {\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n },\n searchButton: {\n padding: \"10px 20px\",\n backgroundColor: \"#ff0000\",\n color: \"white\",\n border: \"none\",\n cursor: \"pointer\",\n },\n videoGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fill, minmax(200px, 1fr))\",\n gap: \"20px\",\n },\n videoCard: {\n border: \"1px solid #ddd\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n },\n videoThumbnail: {\n width: \"100%\",\n height: \"200px\",\n objectFit: \"cover\",\n },\n videoInfo: {\n padding: \"10px\",\n },\n saveButton: {\n width: \"100%\",\n padding: \"10px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n cursor: \"pointer\",\n marginTop: \"10px\",\n },\n error: {\n backgroundColor: \"#ffdddd\",\n color: \"red\",\n padding: \"10px\",\n marginBottom: \"20px\",\n borderRadius: \"5px\",\n },\n};\n\nconst css = `\nbody { \n margin: 0; \n font-family: Arial, sans-serif; \n background-color: #f4f4f4;\n}\n`;","createdAt",["D",1738769705538],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","aazad","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yc2NxTUhRekV6Sm5KZ1RrRnRCVzJmYW9DbEgifQ","forkedVal","interval","slug","aazad/YoutubeSearchApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,147],{"_118":91,"_142":-5,"_116":143,"_113":111},"prId",["D",1738769705538],{"_118":124,"_142":-5,"_116":145,"_113":146},["D",1738768317705],"8ac058ae-e3d3-11ef-ae7b-e6cdfca9ef9f",{"_118":32,"_142":-5,"_116":148,"_113":149},["D",1738768307664],"84c4810a-e3d3-11ef-a8a5-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_94":157,"_158":159,"_95":160},"single","redirect","/v/aazad/YoutubeSearchApp/versions",{"_113":149,"_114":161,"_118":32,"_116":162,"_163":100,"_101":102,"_108":109,"_129":130,"_11":97,"_164":-5,"_165":-5,"_166":-5,"_154":26,"_135":136},"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",["D",1738768307664],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

🎥 YouTube Search & Save

{video.snippet.title}

YoutubeSearchApp

Version 0