YouTube Search & Save

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Utility function for password hashing async function hashPassword(password: string) { const encoder = new TextEncoder(); const data = encoder.encode(password); const hash = await crypto.subtle.digest('SHA-256', data); return Array.from(new Uint8Array(hash)) .map(b => b.toString(16).padStart(2, '0')) .join(''); } function App() { const [user, setUser] = useState(null); const [query, setQuery] = useState(""); const [videos, setVideos] = useState([]); const [error, setError] = useState(null); const [view, setView] = useState('search'); // 'search', 'login', 'register', 'profile' const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [savedVideos, setSavedVideos] = useState([]); // Check login status on initial load useEffect(() => { checkLoginStatus(); }, []); const checkLoginStatus = async () => { try { const response = await fetch('/check-login'); const data = await response.json(); if (data.loggedIn) { setUser(data.user); fetchSavedVideos(); } } catch (err) { console.error("Login check failed"); } }; const searchVideos = async () => { try { const response = await fetch(`/search?q=${encodeURIComponent(query)}`); const data = await response.json(); setVideos(data.items || []); setError(null); } catch (err) { setError("Failed to fetch videos"); setVideos([]); } }; const login = async (e) => { e.preventDefault(); try { const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }); const data = await response.json(); if (data.success) { setUser(data.user); setView('search'); fetchSavedVideos(); } else { setError(data.message); } } catch (err) { setError("Login failed"); } }; const register = async (e) => { e.preventDefault(); try { const response = await fetch('/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }); const data = await response.json(); if (data.success) { setUser(data.user); setView('search'); } else { setError(data.message); } } catch (err) { setError("Registration failed"); } }; const logout = async () => { try { await fetch('/logout', { method: 'POST' }); setUser(null); setView('login'); } catch (err) { setError("Logout failed"); } }; const saveVideo = async (video) => { try { const response = await fetch('/save-video', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(video) }); const data = await response.json(); if (data.success) { fetchSavedVideos(); } } catch (err) { setError("Failed to save video"); } }; const fetchSavedVideos = async () => { try { const response = await fetch('/saved-videos'); const data = await response.json(); setSavedVideos(data.videos || []); } catch (err) { setError("Failed to fetch saved videos"); } }; const renderContent = () => { if (!user) { return view === 'login' ? (

Login

) : (

Register

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

Profile

Email: {user.email}

Saved Videos

{savedVideos.map((video) => (

{video.title}

Watch Video

))}

); } return (

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

{error &&

{error}

}

{videos.map((video) => (

{video.snippet.title}

Watch Video

))}

); }; return (

{user && ( )} {renderContent()} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create tables if they don't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users ( id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_saved_videos ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, video_id TEXT NOT NULL, title TEXT NOT NULL, thumbnail TEXT NOT NULL, FOREIGN KEY(user_id) REFERENCES ${KEY}_users(id) ) `); const url = new URL(request.url); // User Registration if (url.pathname === '/register' && request.method === 'POST') { const { email, password } = await request.json(); const hashedPassword = await hashPassword(password); try { await sqlite.execute( `INSERT INTO ${KEY}_users (email, password) VALUES (?, ?)`, [email, hashedPassword] ); return new Response(JSON.stringify({ success: true, user: { email } }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ success: false, message: "Email already exists" }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } } // User Login if (url.pathname === '/login' && request.method === 'POST') { const { email, password } = await request.json(); const hashedPassword = await hashPassword(password); const result = await sqlite.execute( `SELECT * FROM ${KEY}_users WHERE email = ? AND password = ?`, [email, hashedPassword] ); if (result.rows.length > 0) { return new Response(JSON.stringify({ success: true, user: { email } }), { headers: { 'Content-Type': 'application/json' } }); } else { return new Response(JSON.stringify({ success: false, message: "Invalid credentials" }), { status: 401, headers: { 'Content-Type': 'application/json' } }); } } // Check Login Status if (url.pathname === '/check-login') { // In a real app, you'd use sessions or tokens return new Response(JSON.stringify({ loggedIn: false }), { headers: { 'Content-Type': 'application/json' } }); } // Logout if (url.pathname === '/logout' && request.method === 'POST') { // In a real app, you'd invalidate the session return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } // Save Video if (url.pathname === '/save-video' && request.method === 'POST') { const video = await request.json(); // Note: This is a mock implementation. In a real app, you'd get the user ID from a session const userId = 1; try { await sqlite.execute( `INSERT INTO ${KEY}_saved_videos (user_id, video_id, title, thumbnail) VALUES (?, ?, ?, ?)`, [userId, video.id, video.title, video.thumbnail] ); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ success: false, message: "Failed to save video" }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Fetch Saved Videos if (url.pathname === '/saved-videos') { // Note: This is a mock implementation. In a real app, you'd get the user ID from a session const userId = 1; const result = await sqlite.execute( `SELECT * FROM ${KEY}_saved_videos WHERE user_id = ?`, [userId] ); return new Response(JSON.stringify({ videos: result.rows }), { headers: { 'Content-Type': 'application/json' } }); } // YouTube Search (unchanged from previous implementation) if (url.pathname === "/search") { const query = url.searchParams.get("q") || ""; if (!query) { return new Response(JSON.stringify({ items: [] }), { headers: { "Content-Type": "application/json" } }); } try { const apiResponse = await fetch( `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=12&q=${encodeURIComponent(query)}&type=video&key=AIzaSyClRzDqDh5MsXwnCWi0kOiiBivP6JsSyBw` ); const data = await apiResponse.json(); return new Response(JSON.stringify(data), { headers: { "Content-Type": "application/json" } }); } catch (error) { return new Response(JSON.stringify({ error: "Search failed" }), { status: 500, headers: { "Content-Type": "application/json" } }); } } // Main HTML response return new Response(` YouTube Search & Save

`, { headers: { "Content-Type": "text/html" } }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .app { max-width: 1200px; margin: 0 auto; } nav { display: flex; justify-content: space-between; align-items: center; background-color: #ff0000; color: white; padding: 10px 20px; } nav button { background: none; border: none; color: white; cursor: pointer; margin-right: 10px; } nav button.active { text-decoration: underline; } .nav-right { display: flex; align-items: center; } .nav-right span { margin-right: 15px; } .container { padding: 20px; } .search-container { display: flex; margin-bottom: 20px; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; } button { padding: 10px 20px; background-color: #ff0000; color: white; border: none; cursor: pointer; } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .video-card { background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; } .video-card img { width: 100%; height: 200px; object-fit: cover; } .video-card h3 { padding: 10px; margin: 0; font-size: 14px; } .video-actions { display: flex; } .video-actions a, .video-actions button { flex: 1; display: block; text-align: center; text-decoration: none; padding: 10px; } .auth-form { max-width: 400px; margin: 50px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .auth-form input { width: 100%; margin-bottom: 10px; padding: 10px; } .auth-form p { text-align: center; color: blue; cursor: pointer; } .error { color: red; text-align: center; margin-bottom: 20px; } .source-link { display: block; text-align: center; margin-top: 20px; color: #666; } .profile { padding: 20px; } `;

YouTubeSearchApp