// PHYSIO SAMOS — admin console: images. The library page, the picker the editor opens, and the // in-browser processing every upload goes through. (() => { const { useState, useRef, useCallback } = React; const PSA = window.PSA; const { Icon, api, toast, confirm, fmtDate, fmtBytes, errorText, Field } = PSA; const MAX_INPUT = 30 * 1024 * 1024; const toBlob = (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, type, quality)); // Resize and re-encode before anything leaves the device. Re-encoding through a canvas is also // what removes EXIF and GPS: phone photos of the premises carry coordinates (AGENTS.md, `-strip`). // Sizes: at most 1600px wide, plus an 800px copy when wider — the rounding must match mediaInfo() // in assets/js/blog-text.js and the check in worker/admin/api-media.js, or the upload is refused. // Quality follows the site's own photography (WebP 86, JPEG 88). Safari cannot encode WebP from a // canvas and silently hands back PNG, so the result's type is checked and JPEG used instead. PSA.processImage = async (file) => { if (file.size > MAX_INPUT) throw new Error("Η εικόνα είναι μεγαλύτερη από 30 MB."); let bitmap; try { bitmap = await createImageBitmap(file, { imageOrientation: "from-image" }); } catch (e) { throw new Error(/heic|heif/i.test(`${file.type} ${file.name}`) ? "Ο φυλλομετρητής δεν ανοίγει φωτογραφίες HEIC. Αποθηκεύστε την ως JPEG και δοκιμάστε ξανά." : "Το αρχείο δεν διαβάζεται ως εικόνα."); } const width = Math.min(bitmap.width, 1600); const height = Math.round((bitmap.height * width) / bitmap.width); if (height > 6000) throw new Error("Η εικόνα είναι υπερβολικά ψηλή."); const render = (w, h, type) => { const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; const ctx = canvas.getContext("2d"); ctx.imageSmoothingQuality = "high"; if (type === "image/jpeg") { ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, w, h); } ctx.drawImage(bitmap, 0, 0, w, h); return toBlob(canvas, type, type === "image/webp" ? 0.86 : 0.88); }; let type = "image/webp"; let large = await render(width, height, type); if (!large || large.type !== "image/webp") { type = "image/jpeg"; large = await render(width, height, type); } const small = width > 800 ? await render(800, Math.round((height * 800) / width), type) : null; if (bitmap.close) bitmap.close(); return { large, small, width, height, type }; }; PSA.uploadImage = async (file, alt = "") => { const p = await PSA.processImage(file); const ext = p.type === "image/webp" ? "webp" : "jpg"; const base = file.name.replace(/\.[^.]+$/, "").slice(0, 120) || "image"; const form = new FormData(); form.append("large", p.large, `${base}.${ext}`); if (p.small) form.append("small", p.small, `${base}-800.${ext}`); form.append("filename", file.name.slice(0, 200)); form.append("alt", alt); return (await api("/api/media", { method: "POST", form })).media; }; // One upload at a time, each row showing its own progress or its own error. PSA.useUploads = (onDone) => { const [queue, setQueue] = useState([]); const done = useRef(onDone); done.current = onDone; const add = useCallback(async (files) => { const rows = [...files].map((file) => ({ id: Math.random().toString(36).slice(2), name: file.name, file, status: "working" })); setQueue((q) => [...q, ...rows.map(({ file, ...r }) => r)]); for (const row of rows) { try { const media = await PSA.uploadImage(row.file); setQueue((q) => q.filter((x) => x.id !== row.id)); if (done.current) done.current(media); } catch (err) { setQueue((q) => q.map((x) => (x.id === row.id ? { ...x, status: "error", message: errorText(err) } : x))); } } }, []); const dismiss = (id) => setQueue((q) => q.filter((x) => x.id !== id)); return { queue, add, dismiss }; }; PSA.Dropzone = ({ onFiles }) => { const [over, setOver] = useState(false); const input = useRef(null); const accept = (list) => [...list].filter((f) => /^image\//.test(f.type) || /\.(heic|heif)$/i.test(f.name)); return (
{ e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={(e) => { e.preventDefault(); setOver(false); const files = accept(e.dataTransfer.files); if (files.length) onFiles(files); }}>

Σύρετε φωτογραφίες εδώ ή

JPEG, PNG ή WebP. Μικραίνουν αυτόματα και αφαιρούνται τα στοιχεία τοποθεσίας πριν ανέβουν.

{ const files = accept(e.target.files); e.target.value = ""; if (files.length) onFiles(files); }} />
); }; PSA.UploadQueue = ({ queue, dismiss }) => (queue.length ? ( ) : null); const usedLabel = (m) => (m.usedBy && m.usedBy.length ? ` · σε ${PSA.plural(m.usedBy.length, "άρθρο", "άρθρα")}` : ""); const MediaTile = ({ m, selected, onClick }) => ( ); const MediaGridState = ({ lib, items, emptyTitle, emptyText, children }) => { if (lib.loading && !lib.data) { return
{Array.from({ length: 6 }, (_, i) =>
)}
; } if (lib.error && !lib.data) return ; if (!items.length) return

{emptyTitle}

{emptyText}

; return children; }; const MediaDetail = ({ m, onClose, onChanged, onDeleted }) => { const [alt, setAlt] = useState(m.alt || ""); const [busy, setBusy] = useState(false); const used = m.usedBy || []; const saveAlt = async () => { setBusy(true); try { onChanged((await api(`/api/media/${m.id}`, { method: "PATCH", body: { alt } })).media); toast("Η περιγραφή αποθηκεύτηκε."); } catch (err) { toast(errorText(err), { kind: "error" }); } finally { setBusy(false); } }; const remove = async () => { const ok = await confirm({ title: "Οριστική διαγραφή εικόνας;", body: "Η εικόνα θα σβηστεί από τη βιβλιοθήκη και από τον ιστότοπο. Δεν αναιρείται.", confirmLabel: "Διαγραφή", danger: true }); if (!ok) return; setBusy(true); try { await api(`/api/media/${m.id}`, { method: "DELETE" }); onDeleted(m.id); onClose(); toast("Η εικόνα διαγράφηκε."); } catch (err) { toast(errorText(err), { kind: "error" }); setBusy(false); } }; // Images go into a post through the editor's "Εικόνα" button; nothing here hands out Markdown. return ( }>
{alt}
Διαστάσεις
{m.width} × {m.height}{m.smallUrl ? " και 800 πλάτος" : ""}
Μέγεθος
{fmtBytes(m.size)} · {m.contentType.replace("image/", "").toUpperCase()}
Ανέβηκε
{fmtDate(m.createdAt)}