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`;","deleted","label",[98],"permalink","https://www.val.town/x/AshishChaudhary10/YouTubeSearchApp/code/main.tsx","extension","actionData","errors"]