/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [youtubeUrl, setYoutubeUrl] = useState("https://www.youtube.com/embed/QskiaNqaqlc?si=MvD_ydotKgovS9pC"); const [postVideoImages, setPostVideoImages] = useState([]); const [newImageUrl, setNewImageUrl] = useState(""); const [imageErrors, setImageErrors] = useState<{[key: number]: boolean}>({}); const [imageProxyUrls, setImageProxyUrls] = useState<{[key: number]: string}>({}); useEffect(() => { // Load saved data on initial render loadSavedData(); }, []); useEffect(() => { // Proxy images that might have CORS issues postVideoImages.forEach((imageUrl, index) => { proxyImage(imageUrl, index); }); }, [postVideoImages]); const proxyImage = async (imageUrl: string, index: number) => { try { const response = await fetch(`/proxy-image?url=${encodeURIComponent(imageUrl)}`); if (response.ok) { const proxyUrl = await response.text(); setImageProxyUrls(prev => ({...prev, [index]: proxyUrl})); } else { handleImageError(index); } } catch (error) { console.error("Image proxy error:", error); handleImageError(index); } }; const loadSavedData = async () => { try { const { blob } = await import("https://esm.town/v/std/blob"); const savedYoutubeUrl = await blob.get(`${import.meta.url}_youtubeUrl`); const savedImages = await blob.get(`${import.meta.url}_postVideoImages`); if (savedYoutubeUrl) setYoutubeUrl(savedYoutubeUrl); if (savedImages) { const parsedImages = JSON.parse(savedImages); setPostVideoImages(parsedImages); } } catch (error) { console.error("Error loading saved data:", error); } }; const saveData = async (type: 'url' | 'images') => { try { const { blob } = await import("https://esm.town/v/std/blob"); if (type === 'url') { await blob.set(`${import.meta.url}_youtubeUrl`, youtubeUrl); } else { await blob.set(`${import.meta.url}_postVideoImages`, JSON.stringify(postVideoImages)); } } catch (error) { console.error("Error saving data:", error); } }; const isValidImageUrl = (url: string) => { try { new URL(url); return true; } catch { return false; } }; const handleAddImage = () => { if (newImageUrl.trim() && isValidImageUrl(newImageUrl.trim())) { const updatedImages = [...postVideoImages, newImageUrl.trim()]; setPostVideoImages(updatedImages); setNewImageUrl(""); saveData('images'); } else { alert("Please enter a valid image URL"); } }; const handleRemoveImage = (indexToRemove: number) => { const updatedImages = postVideoImages.filter((_, index) => index !== indexToRemove); setPostVideoImages(updatedImages); // Remove any associated error and proxy states const newImageErrors = {...imageErrors}; const newImageProxyUrls = {...imageProxyUrls}; delete newImageErrors[indexToRemove]; delete newImageProxyUrls[indexToRemove]; setImageErrors(newImageErrors); setImageProxyUrls(newImageProxyUrls); saveData('images'); }; const handleImageError = (index: number) => { setImageErrors(prev => ({...prev, [index]: true})); }; return (

Interactive Video Presentation

Welcome to our dynamic video presentation. You can customize the video and add post-video images.

{/* Video Container */}

embedVideoWebPage

Version 3