🎥 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 = \"YoutubeSearchApp\";\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`;","deleted","label",[99],"permalink","https://www.val.town/x/aazad/YoutubeSearchApp/code/main.tsx","extension","actionData","errors"]

🎥 YouTube Search & Save

{video.snippet.title}