/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; // 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 [searchQuery, setSearchQuery] = useState(""); const [videos, setVideos] = useState([]); const [error, setError] = useState(""); const [savedVideos, setSavedVideos] = useState([]); const [saveError, setSaveError] = useState(""); const handleSearch = async (e) => { e.preventDefault(); try { const response = await fetch(`/search?q=${encodeURIComponent(searchQuery)}`); const data = await response.json(); if (data.error) { setError(data.error); return; } setVideos(data.items || []); setError(""); } catch (err) { setError("Search failed. Please try again."); } }; const saveVideo = async (video) => { // Clear previous save errors setSaveError(""); try { const response = await fetch("/save-video", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ videoId: video.id.videoId, title: video.snippet.title, thumbnail: video.snippet.thumbnails.default.url, }), }); // Check if the response is not OK if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to save video"); } const result = await response.json(); if (result.success) { setSavedVideos(prev => [...prev, video]); } } catch (err) { console.error("Video save error:", err); setSaveError(err.message || "Failed to save video. Please try again."); } }; return (

🎥 YouTube Search & Save

{error &&

{error}

} {saveError &&

{saveError}

}

{videos.map((video) => (

{video.snippet.title}

))}

); } 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); // Save Video Route if (url.pathname === "/save-video" && request.method === "POST") { try { const videoData = await request.json(); // Validate input if (!videoData.videoId || !videoData.title) { return new Response(JSON.stringify({ error: "Invalid video data. Video ID and title are required." }), { status: 400, headers: { "Content-Type": "application/json" }, }); } // In a real app, you'd associate this with a logged-in user const result = await sqlite.execute( ` INSERT INTO ${KEY}_saved_videos (user_id, video_id, title, thumbnail) VALUES (1, ?, ?, ?) `, [ videoData.videoId, videoData.title, videoData.thumbnail || '', ], ); return new Response(JSON.stringify({ success: true, id: result.lastInsertRowId }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Save video error:", error); return new Response(JSON.stringify({ error: "Failed to save video. " + error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } // Rest of the code remains the same... // (YouTube Search Route and Main HTML response) // ... (previous implementation) return new Response( ` YouTube Search & Save

View Source `, { headers: { "Content-Type": "text/html" }, }, ); } // Styles and CSS remain unchanged from previous version const styles = { container: { fontFamily: "Arial, sans-serif", maxWidth: "800px", margin: "0 auto", padding: "20px", }, searchForm: { display: "flex", marginBottom: "20px", }, searchInput: { flex: 1, padding: "10px", fontSize: "16px", }, searchButton: { padding: "10px 20px", backgroundColor: "#ff0000", color: "white", border: "none", cursor: "pointer", }, videoGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "20px", }, videoCard: { border: "1px solid #ddd", borderRadius: "8px", overflow: "hidden", }, videoThumbnail: { width: "100%", height: "200px", objectFit: "cover", }, videoInfo: { padding: "10px", }, saveButton: { width: "100%", padding: "10px", backgroundColor: "#4CAF50", color: "white", border: "none", cursor: "pointer", marginTop: "10px", }, error: { backgroundColor: "#ffdddd", color: "red", padding: "10px", marginBottom: "20px", borderRadius: "5px", }, }; const css = ` body { margin: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; } `;

YoutubeSearchApp