YouTube Search & Save

Login

\n \n

\n ) : (\n

Register

\n \n

\n );\n }\n\n if (view === 'profile') {\n return (\n

Profile

Email: {user.email}

Saved Videos

\n {savedVideos.map((video) => (\n

{video.title}

\n \n Watch Video\n \n

\n ))}\n

\n );\n }\n\n return (\n

\n setQuery(e.target.value)}\n placeholder=\"Search YouTube videos...\"\n />\n \n

\n {error &&

{error}

}\n

\n {videos.map((video) => (\n

{video.snippet.title}

\n \n Watch Video\n \n \n

\n ))}\n

\n );\n };\n\n return (\n

\n {user && (\n \n )}\n {renderContent()}\n \n View Source\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 { 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 // User Registration\n if (url.pathname === '/register' && request.method === 'POST') {\n const { email, password } = await request.json();\n const hashedPassword = await hashPassword(password);\n\n try {\n await sqlite.execute(\n `INSERT INTO ${KEY}_users (email, password) VALUES (?, ?)`, \n [email, hashedPassword]\n );\n return new Response(JSON.stringify({ \n success: true, \n user: { email } \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Email already exists\" \n }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // User Login\n if (url.pathname === '/login' && request.method === 'POST') {\n const { email, password } = await request.json();\n const hashedPassword = await hashPassword(password);\n\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE email = ? AND password = ?`, \n [email, hashedPassword]\n );\n\n if (result.rows.length > 0) {\n return new Response(JSON.stringify({ \n success: true, \n user: { email } \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } else {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Invalid credentials\" \n }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Check Login Status\n if (url.pathname === '/check-login') {\n // In a real app, you'd use sessions or tokens\n return new Response(JSON.stringify({ \n loggedIn: false \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Logout\n if (url.pathname === '/logout' && request.method === 'POST') {\n // In a real app, you'd invalidate the session\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Save Video\n if (url.pathname === '/save-video' && request.method === 'POST') {\n const video = await request.json();\n // Note: This is a mock implementation. In a real app, you'd get the user ID from a session\n const userId = 1;\n\n try {\n await sqlite.execute(\n `INSERT INTO ${KEY}_saved_videos (user_id, video_id, title, thumbnail) VALUES (?, ?, ?, ?)`, \n [userId, video.id, video.title, video.thumbnail]\n );\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n message: \"Failed to save video\" \n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Fetch Saved Videos\n if (url.pathname === '/saved-videos') {\n // Note: This is a mock implementation. In a real app, you'd get the user ID from a session\n const userId = 1;\n\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_saved_videos WHERE user_id = ?`, \n [userId]\n );\n\n return new Response(JSON.stringify({ \n videos: result.rows \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // YouTube Search (unchanged from previous implementation)\n if (url.pathname === \"/search\") {\n const query = url.searchParams.get(\"q\") || \"\";\n \n if (!query) {\n return new Response(JSON.stringify({ items: [] }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n try {\n const apiResponse = await fetch(\n `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=12&q=${encodeURIComponent(query)}&type=video&key=AIzaSyClRzDqDh5MsXwnCWi0kOiiBivP6JsSyBw`\n );\n const data = await apiResponse.json();\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Search failed\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Main HTML response\n return new Response(`\n \n \n YouTube Search & Save\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n}\n.app {\n max-width: 1200px;\n margin: 0 auto;\n}\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: #ff0000;\n color: white;\n padding: 10px 20px;\n}\nnav button {\n background: none;\n border: none;\n color: white;\n cursor: pointer;\n margin-right: 10px;\n}\nnav button.active {\n text-decoration: underline;\n}\n.nav-right {\n display: flex;\n align-items: center;\n}\n.nav-right span {\n margin-right: 15px;\n}\n.container {\n padding: 20px;\n}\n.search-container {\n display: flex;\n margin-bottom: 20px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ddd;\n}\nbutton {\n padding: 10px 20px;\n background-color: #ff0000;\n color: white;\n border: none;\n cursor: pointer;\n}\n.video-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n.video-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n.video-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n.video-card h3 {\n padding: 10px;\n margin: 0;\n font-size: 14px;\n}\n.video-actions {\n display: flex;\n}\n.video-actions a, .video-actions button {\n flex: 1;\n display: block;\n text-align: center;\n text-decoration: none;\n padding: 10px;\n}\n.auth-form {\n max-width: 400px;\n margin: 50px auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n.auth-form input {\n width: 100%;\n margin-bottom: 10px;\n padding: 10px;\n}\n.auth-form p {\n text-align: center;\n color: blue;\n cursor: pointer;\n}\n.error {\n color: red;\n text-align: center;\n margin-bottom: 20px;\n}\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #666;\n}\n.profile {\n padding: 20px;\n}\n`;","label",[64],"1dd369c6-2775-11f0-b46e-569c3dd06744",["D",1737707679271],"YouTube all features \n",[75],"pulls","branches","forks","envVars",{"_71":20,"_173":20},"connections",{"_71":20,"_172":20},"unfilledCount","emptyCount",{"_28":161,"_13":75,"_62":74,"_38":-5,"_30":31,"_154":35,"_155":93,"_32":180,"_34":20,"_65":48,"_157":163,"_67":24,"_159":-5,"_177":181,"_129":182},{"_28":153,"_13":64,"_62":63,"_38":-5,"_30":31,"_154":72,"_155":93,"_32":176,"_34":35,"_65":66,"_157":158,"_67":24,"_159":-5,"_177":178,"_129":179},["D",1737707883638],"children",[],[64],["D",1737707679271],[],[75],["D",1746204441333],{"_11":12,"_128":70},{"_11":12,"_124":-5,"_69":70,"_25":68,"_125":126,"_127":24},{"_34":72,"_13":16,"_28":31,"_116":82,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_46":-5,"_148":220,"_221":222,"_223":224,"_225":24,"_226":24,"_227":24,"_228":93,"_229":-5,"_230":-7,"_231":-7,"_232":20,"_233":24,"_234":24,"_235":-5,"_236":24,"_237":24,"_238":24,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":16,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History