[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","7f785a86-2826-11f0-af78-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport JSZip from \"https://esm.sh/jszip@3.10.0\";\n\ninterface CompressedFile {\n original: File;\n compressed: File | null;\n progress: number;\n originalPreview?: string;\n compressedPreview?: string;\n error?: string;\n}\n\nfunction ErrorFallback({ error }: { error: Error }) {\n return (\n

🚨 Something Went Wrong

An unexpected error occurred. Please try again.

Error: {error.message}

\n );\n}\n\nfunction App() {\n const [files, setFiles] = React.useState([]);\n const [isDragging, setIsDragging] = React.useState(false);\n const [isDownloadingAll, setIsDownloadingAll] = React.useState(false);\n const [totalCompressedPhotos, setTotalCompressedPhotos] = React.useState(0);\n const [error, setError] = React.useState(null);\n const canvasRef = React.useRef(null);\n\n React.useEffect(() => {\n const handleGlobalError = (event: ErrorEvent) => {\n console.error('Global error:', event.error);\n setError(event.error);\n };\n\n window.addEventListener('error', handleGlobalError);\n return () => window.removeEventListener('error', handleGlobalError);\n }, []);\n\n React.useEffect(() => {\n const fetchTotalCompressedPhotos = () => {\n try {\n const storedCount = localStorage.getItem('total_compressed_photos') || '0';\n setTotalCompressedPhotos(parseInt(storedCount, 10));\n } catch (err) {\n console.error('Failed to fetch total compressed photos', err);\n }\n };\n\n fetchTotalCompressedPhotos();\n }, []);\n\n const createPreview = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const preview = event.target?.result as string;\n resolve(preview);\n };\n reader.onerror = () => reject(new Error('Preview generation failed'));\n reader.readAsDataURL(file);\n });\n };\n\n const compressImage = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const MAX_SIZE = 300 * 1024; // 300 kB\n const RESIZE_STEPS = [\n { maxWidth: 1920, maxHeight: 1920, quality: 0.9 },\n { maxWidth: 1280, maxHeight: 1280, quality: 0.7 },\n { maxWidth: 800, maxHeight: 800, quality: 0.5 },\n { maxWidth: 640, maxHeight: 640, quality: 0.3 },\n { maxWidth: 480, maxHeight: 480, quality: 0.1 }\n ];\n\n const tryCompression = (stepIndex: number) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.onload = () => {\n const canvas = canvasRef.current;\n if (!canvas) {\n reject(new Error('Canvas not available'));\n return;\n }\n\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n reject(new Error('Canvas context not available'));\n return;\n }\n\n const step = RESIZE_STEPS[stepIndex];\n\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > step.maxWidth) {\n height *= step.maxWidth / width;\n width = step.maxWidth;\n }\n } else {\n if (height > step.maxHeight) {\n width *= step.maxHeight / height;\n height = step.maxHeight;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob((blob) => {\n if (!blob) {\n reject(new Error('Failed to create blob'));\n return;\n }\n\n if (blob.size <= MAX_SIZE) {\n const compressedFile = new File([blob], file.name, {\n type: file.type,\n lastModified: Date.now()\n });\n resolve(compressedFile);\n } else if (stepIndex < RESIZE_STEPS.length - 1) {\n tryCompression(stepIndex + 1);\n } else {\n canvas.toBlob((extremeBlob) => {\n if (!extremeBlob) {\n reject(new Error('Failed to create extreme compression blob'));\n return;\n }\n\n const extremeCompressedFile = new File([extremeBlob], file.name, {\n type: file.type,\n lastModified: Date.now()\n });\n\n if (extremeCompressedFile.size <= MAX_SIZE) {\n resolve(extremeCompressedFile);\n } else {\n reject(new Error(`Unable to compress image under ${MAX_SIZE / 1024} kB`));\n }\n }, file.type, 0.05);\n }\n }, file.type, step.quality);\n };\n img.onerror = () => reject(new Error('Failed to load image'));\n img.src = event.target?.result as string;\n };\n reader.onerror = () => reject(new Error('File reading failed'));\n reader.readAsDataURL(file);\n };\n\n tryCompression(0);\n });\n };\n\n const handleFileUpload = async (uploadedFiles: FileList | File[]) => {\n try {\n const newFiles: CompressedFile[] = await Promise.all(\n Array.from(uploadedFiles)\n .filter(file => file.type.startsWith('image/'))\n .map(async (file) => {\n const originalPreview = await createPreview(file);\n return {\n original: file,\n originalPreview,\n compressed: null,\n compressedPreview: undefined,\n progress: 0\n };\n })\n );\n\n setFiles(prevFiles => [...prevFiles, ...newFiles]);\n compressFiles(newFiles);\n } catch (err) {\n console.error('File upload failed', err);\n setError(err instanceof Error ? err : new Error('File upload failed'));\n }\n };\n\n const compressFiles = async (filesToCompress: CompressedFile[]) => {\n try {\n const compressionPromises = filesToCompress.map(async (fileEntry) => {\n try {\n const updateProgress = (progress: number) => {\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {...f, progress} \n : f\n ));\n };\n\n updateProgress(10);\n await new Promise(resolve => setTimeout(resolve, 500));\n updateProgress(30);\n await new Promise(resolve => setTimeout(resolve, 500));\n updateProgress(50);\n\n const compressed = await compressImage(fileEntry.original);\n const compressedPreview = await createPreview(compressed);\n\n if (compressed.size > 300 * 1024) {\n throw new Error(`Compression failed: File size exceeds 300 kB (${(compressed.size / 1024).toFixed(2)} kB)`);\n }\n\n const currentCount = parseInt(localStorage.getItem('total_compressed_photos') || '0', 10);\n const newCount = currentCount + 1;\n localStorage.setItem('total_compressed_photos', newCount.toString());\n setTotalCompressedPhotos(newCount);\n\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {...f, compressed, compressedPreview, progress: 100} \n : f\n ));\n } catch (err) {\n console.error(\"Compression failed\", err);\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {\n ...f, \n error: `Compression failed: ${\n err instanceof Error \n ? err.message \n : 'Unknown compression error'\n }`\n } \n : f\n ));\n }\n });\n\n await Promise.all(compressionPromises);\n } catch (err) {\n console.error('Compression process failed', err);\n setError(err instanceof Error ? err : new Error('Compression process failed'));\n }\n };\n\n if (error) {\n return ;\n }\n\n return (\n

\n );\n}\n\nfunction ErrorBoundary({ children }: { children: React.ReactNode }) {\n return children;\n}\n\nfunction renderApp() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n ReactDOM.createRoot(rootElement).render(\n \n \n \n \n \n );\n } else {\n console.error('Root element not found');\n }\n}\n\n// Ensure client is only called in browser environment\nif (typeof window !== 'undefined' && typeof document !== 'undefined') {\n try {\n renderApp();\n } catch (error) {\n console.error('Failed to render app:', error);\n }\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Multi-Image Compressor\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport JSZip from \"https://esm.sh/jszip@3.10.0\";\n\ninterface CompressedFile {\n original: File;\n compressed: File | null;\n progress: number;\n originalPreview?: string;\n compressedPreview?: string;\n error?: string;\n}\n\nfunction ErrorFallback({ error }: { error: Error }) {\n return (\n

🚨 Something Went Wrong

An unexpected error occurred. Please try again.

Error: {error.message}

\n );\n}\n\nfunction App() {\n const [files, setFiles] = React.useState([]);\n const [isDragging, setIsDragging] = React.useState(false);\n const [isDownloadingAll, setIsDownloadingAll] = React.useState(false);\n const [totalCompressedPhotos, setTotalCompressedPhotos] = React.useState(0);\n const [error, setError] = React.useState(null);\n const canvasRef = React.useRef(null);\n\n React.useEffect(() => {\n // Ensure we're in a browser environment\n if (typeof window !== 'undefined') {\n const handleGlobalError = (event: ErrorEvent) => {\n console.error('Global error:', event.error);\n setError(event.error instanceof Error ? event.error : new Error(String(event.error)));\n };\n\n window.addEventListener('error', handleGlobalError);\n return () => window.removeEventListener('error', handleGlobalError);\n }\n }, []);\n\n React.useEffect(() => {\n const fetchTotalCompressedPhotos = () => {\n try {\n const storedCount = localStorage.getItem('total_compressed_photos') || '0';\n setTotalCompressedPhotos(parseInt(storedCount, 10));\n } catch (err) {\n console.error('Failed to fetch total compressed photos', err);\n }\n };\n\n fetchTotalCompressedPhotos();\n }, []);\n\n const createPreview = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const preview = event.target?.result as string;\n resolve(preview);\n };\n reader.onerror = () => reject(new Error('Preview generation failed'));\n reader.readAsDataURL(file);\n });\n };\n\n const compressImage = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const MAX_SIZE = 300 * 1024; // 300 kB\n const RESIZE_STEPS = [\n { maxWidth: 1920, maxHeight: 1920, quality: 0.9 },\n { maxWidth: 1280, maxHeight: 1280, quality: 0.7 },\n { maxWidth: 800, maxHeight: 800, quality: 0.5 },\n { maxWidth: 640, maxHeight: 640, quality: 0.3 },\n { maxWidth: 480, maxHeight: 480, quality: 0.1 }\n ];\n\n const tryCompression = (stepIndex: number) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n reject(new Error('Canvas context not available'));\n return;\n }\n\n const step = RESIZE_STEPS[stepIndex];\n\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > step.maxWidth) {\n height *= step.maxWidth / width;\n width = step.maxWidth;\n }\n } else {\n if (height > step.maxHeight) {\n width *= step.maxHeight / height;\n height = step.maxHeight;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob((blob) => {\n if (!blob) {\n reject(new Error('Failed to create blob'));\n return;\n }\n\n if (blob.size <= MAX_SIZE) {\n const compressedFile = new File([blob], file.name, {\n type: file.type,\n lastModified: Date.now()\n });\n resolve(compressedFile);\n } else if (stepIndex < RESIZE_STEPS.length - 1) {\n tryCompression(stepIndex + 1);\n } else {\n canvas.toBlob((extremeBlob) => {\n if (!extremeBlob) {\n reject(new Error('Failed to create extreme compression blob'));\n return;\n }\n\n const extremeCompressedFile = new File([extremeBlob], file.name, {\n type: file.type,\n lastModified: Date.now()\n });\n\n if (extremeCompressedFile.size <= MAX_SIZE) {\n resolve(extremeCompressedFile);\n } else {\n reject(new Error(`Unable to compress image under ${MAX_SIZE / 1024} kB`));\n }\n }, file.type, 0.05);\n }\n }, file.type, step.quality);\n };\n img.onerror = () => reject(new Error('Failed to load image'));\n img.src = event.target?.result as string;\n };\n reader.onerror = () => reject(new Error('File reading failed'));\n reader.readAsDataURL(file);\n };\n\n tryCompression(0);\n });\n };\n\n const handleFileUpload = async (uploadedFiles: FileList | File[]) => {\n try {\n const newFiles: CompressedFile[] = await Promise.all(\n Array.from(uploadedFiles)\n .filter(file => file.type.startsWith('image/'))\n .map(async (file) => {\n const originalPreview = await createPreview(file);\n return {\n original: file,\n originalPreview,\n compressed: null,\n compressedPreview: undefined,\n progress: 0\n };\n })\n );\n\n setFiles(prevFiles => [...prevFiles, ...newFiles]);\n compressFiles(newFiles);\n } catch (err) {\n console.error('File upload failed', err);\n setError(err instanceof Error ? err : new Error('File upload failed'));\n }\n };\n\n const compressFiles = async (filesToCompress: CompressedFile[]) => {\n try {\n const compressionPromises = filesToCompress.map(async (fileEntry) => {\n try {\n const updateProgress = (progress: number) => {\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {...f, progress} \n : f\n ));\n };\n\n updateProgress(10);\n await new Promise(resolve => setTimeout(resolve, 500));\n updateProgress(30);\n await new Promise(resolve => setTimeout(resolve, 500));\n updateProgress(50);\n\n const compressed = await compressImage(fileEntry.original);\n const compressedPreview = await createPreview(compressed);\n\n if (compressed.size > 300 * 1024) {\n throw new Error(`Compression failed: File size exceeds 300 kB (${(compressed.size / 1024).toFixed(2)} kB)`);\n }\n\n const currentCount = parseInt(localStorage.getItem('total_compressed_photos') || '0', 10);\n const newCount = currentCount + 1;\n localStorage.setItem('total_compressed_photos', newCount.toString());\n setTotalCompressedPhotos(newCount);\n\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {...f, compressed, compressedPreview, progress: 100} \n : f\n ));\n } catch (err) {\n console.error(\"Compression failed\", err);\n setFiles(prevFiles => prevFiles.map(f => \n f.original === fileEntry.original \n ? {\n ...f, \n error: `Compression failed: ${\n err instanceof Error \n ? err.message \n : 'Unknown compression error'\n }`\n } \n : f\n ));\n }\n });\n\n await Promise.all(compressionPromises);\n } catch (err) {\n console.error('Compression process failed', err);\n setError(err instanceof Error ? err : new Error('Compression process failed'));\n }\n };\n\n if (error) {\n return ;\n }\n\n return (\n

🖼️ Multi-Image Compressor

\n Simple to Use Tool to Reduce the File Size of Photos\n

\n Total Compressed: {totalCompressedPhotos}\n

\n Photos Compressed\n

\n \n

\n handleFileUpload(e.target.files || [])}\n style={{ \n margin: '20px 0',\n backgroundColor: '#0f3460',\n color: '#e0e0e0',\n padding: '10px',\n borderRadius: '5px'\n }}\n />\n

Drag and drop images here or click to select

\n\n

\n {files.map((file, index) => (\n

\n {file.originalPreview && (\n $\"Original\"$ \n )}\n

Original: {file.original.name}

Original Size: {(file.original.size / 1024).toFixed(2)} kB

\n \n {file.progress > 0 && file.progress < 100 && (\n

Compressing... {file.progress}%

\n )}\n \n {file.compressed && (\n <>\n {file.compressedPreview && (\n $\"Compressed\"$ \n )}\n

Compressed Size: {(file.compressed.size / 1024).toFixed(2)} kB

\n \n \n )}\n \n {file.error && (\n

{file.error}

\n )}\n

\n ))}\n

\n );\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Multi-Image Compressor\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","createdAt",["D",1736945439150],"branchVersion","branchId","7f75b470-2826-11f0-af78-569c3dd06744","id","7f756e70-2826-11f0-af78-569c3dd06744","MultiImageCompressor",["D",1746280626073],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","fe1c4b33-cdb1-457f-b5da-7d0e377f6049","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","f82f03fa-3b43-4812-9583-a78911a69cae","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",23,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","robbert_h","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwcUJDOEs2VXE3YUZmbmsyTTh5SjJxQ2lkZSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":150,"_79":151,"_81":152,"_83":25},"tree",[144],"files",[144],"counts",{"_133":61,"_134":135,"_136":61,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"7fe508b6-2826-11f0-af78-569c3dd06744","parentId","latest",["D",1736945439150],18,"label",[28],"pulls","branches",1,"forks","envVars",{"_141":61,"_143":61},"connections",{"_141":61,"_142":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":145,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1736945439150],"children",[],[28],["D",1746280626073],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":57,"_195":-5,"_196":-7,"_197":-7,"_198":61,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":85,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5a709144666c9e69e88140f015c586412f0fd8d3","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"]

Diff · v19