feat: Umbenennen, Fivemanage-Sprache, Freigabe-Links, sichtbare Zahlen
UMBENENNEN gab es gar nicht -- verschieben ja, umbenennen nirgends. Jetzt fuer
Datei und Ordner. Die WARNUNG ist dabei der eigentliche Teil: beim Verschieben
wandert eine Datei, beim Umbenennen aendert sich IHRE ADRESSE, und die steht
womoeglich in einem Skript, das niemand mehr im Kopf hat. Der Dialog zeigt
deshalb die Abrufzahl und beim Ordner die Zahl der betroffenen Dateien, BEVOR
gedrueckt wird -- eine Datei mit viertausend Abrufen umzubenennen ist etwas
anderes als eine mit null, und der Dienst ist die einzige Stelle, die den
Unterschied kennt.
Am echten Fall geprueft, dem Kollisionsfund: items/coiloverss.png (hielt die
+-Fassung) -> items/coiloverss-plus.png, alte Adresse 404, neue 200 mit 4375 B,
Vorschau mitgewandert. Ordner: probe -> beispiele, 5 Dateien, alle Pfade in
einer Transaktion umgeschrieben.
Ein Fallstrick dabei: thumbPath haengt ".webp" an. Fuer eine Datei richtig, fuer
einen ORDNER Unsinn -- der Vorschauordner heisst thumbs/vehicles und nicht
thumbs/vehicles.webp. Dafuer gibt es jetzt moveFolder.
DIE 93 KOLLISIONEN SIND ERLEDIGT. tools/kollisionen.ps1 rechnet dieselbe
Zaehmung auf der Quelle nach und zeigt, was zusammenfaellt -- es aendert nichts,
damit die Entscheidung auf Zahlen steht. Ergebnis: 91 von 93 sind dieselbe Datei
zweimal (WEAPON_SMG.png und weapon_smg.png, byteweise gleich gross), da fehlte
nichts. Echt verloren waren ZWEI, beide mit + im Namen. Beide nachgeholt.
FIVEMANAGE-SPRACHE. POST /api/image|video|audio (v1) und POST /api/v3/file (v3),
Schluessel nackt im Authorization-Kopf. Auf einem laufenden Server stecken die
Fivemanage-Aufrufe in einem Dutzend fremder Ressourcen; sie alle umzuschreiben
tut niemand, und deshalb bliebe dieser Dienst ungenutzt daneben stehen. So ist
der Umzug eine Zeile je Skript: die Adresse.
Beide Formen sind AUS ECHTEM CODE abgelesen und nicht geraten -- fivemanage/sdk
fuer v3, Awleks/Devm-Camera fuer den aelteren Weg ueber screenshot-basic.
Gemessen: v1 -> {url,id,path}, v3 -> {status:"ok",data:{id,url}}, ohne
Schluessel 401, ein Video an /api/image -> 415 mit Grund.
Dabei bin ich in eine Falle gelaufen, vor der im eigenen Repo ein Kommentar
warnt: die Token-Wache hing an use('*'), und der Einhaengepunkt ist /api -- also
galt sie auch fuer /api/dash daneben. Das Dashboard bekam 401 auf die ANMELDUNG.
Wortwoertlich derselbe Fehler steht in upload.ts als Kommentar, weil er dort
schon einmal passiert ist. Gemerkt hat es der Gegentest, nicht der Kopf.
FREIGABE-LINKS. /s/<schluessel> zeigt einen Ordner ohne Anmeldung. Was dabei
ausdruecklich dabeisteht, in der Karte und in der Rueckfrage vor dem
Zurueckziehen: FREIGEGEBEN WIRD DIE LISTE, NICHT DER INHALT. Die Dateien sind
ohnehin oeffentlich; ein zurueckgezogener Link macht sie nicht wieder privat, er
nimmt nur die Uebersicht weg. Ohne diesen Satz zieht jemand einen Link zurueck
und glaubt, etwas sei verschwunden.
Die Antwort ist abgemessen: Name, Groesse, Art, Adresse, Laenge. NICHT Hash,
Token, Zeitpunkte, Abrufzahlen, IDs -- nichts davon braucht, wer einen Katalog
ansieht, und jedes davon waere eine Auskunft ueber den Betrieb. Ein unbekannter
Schluessel und ein zurueckgezogener geben dieselbe Antwort.
ZAHLEN, DIE SCHON DA WAREN. Sortieren nach Abrufen und nach "zuletzt geholt";
die Kachel zeigt dann auch diese Zahl statt Groesse und Datum, denn nach etwas
zu ordnen, das man nirgends sieht, ist eine Reihenfolge ohne Begruendung. Und je
Token, was damit abgelegt wurde: media.token_id wird seit dem ersten Tag
geschrieben und war NIRGENDS zu sehen. Gemessen: d4rk_photostudio haelt 810
Dateien / 99,5 MB, 3640 liegen ohne Token da.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -6,6 +6,7 @@ import { bytes, zeit } from '../format'
|
||||
import { Feld, Karte, Knopf } from '../components/Bausteine'
|
||||
import { DiscordKarte } from '../components/DiscordKarte'
|
||||
import { VorlagenKarte } from '../components/VorlagenKarte'
|
||||
import { FreigabenKarte } from '../components/FreigabenKarte'
|
||||
import { MeldungenKarte } from '../components/MeldungenKarte'
|
||||
|
||||
/** Alles, was sich einstellen lässt, an einer Stelle.
|
||||
@@ -28,6 +29,8 @@ export function Einstellungen() {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<VorlagenKarte publicUrl={urls.publicUrl} filePrefix={urls.filePrefix} />
|
||||
|
||||
<FreigabenKarte />
|
||||
<SicherungKarte />
|
||||
<MeldungenKarte />
|
||||
<DiscordKarte />
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { FileQuestion, Film, Image, Loader2, Music, Play } from 'lucide-react'
|
||||
import { bytes, dauerText, istBild } from '../format'
|
||||
|
||||
/** Ein freigegebener Ordner — ohne Anmeldung.
|
||||
*
|
||||
* DIESE SEITE STEHT AUSSERHALB der angemeldeten Oberfläche und weiß nichts von
|
||||
* ihr: kein Store, keine Reiter, kein Kontomenü. Wer hierherkommt, hat einen
|
||||
* Link bekommen und will Bilder sehen.
|
||||
*
|
||||
* Sie zeigt ABSICHTLICH weniger als die Galerie: keine Pfade, keine Zeitpunkte,
|
||||
* keine Abrufzahlen, keine Knöpfe. Was ein Katalog braucht, ist das Bild, der
|
||||
* Name und die Adresse zum Kopieren. */
|
||||
|
||||
type Eintrag = {
|
||||
name: string
|
||||
size: number
|
||||
mime: string
|
||||
dauer: number | null
|
||||
url: string
|
||||
thumb: string
|
||||
}
|
||||
|
||||
type Seite = { titel: string; ordner: string; anzahl: number; items: Eintrag[] }
|
||||
|
||||
export function Freigabe({ schluessel }: { schluessel: string }) {
|
||||
const [daten, setDaten] = useState<Seite | null>(null)
|
||||
const [fehler, setFehler] = useState('')
|
||||
const [gross, setGross] = useState<Eintrag | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let lebt = true
|
||||
fetch(`/api/s/${encodeURIComponent(schluessel)}`)
|
||||
.then(async (r) => {
|
||||
if (!r.ok) throw new Error(r.status === 404 ? 'nicht gefunden' : `HTTP ${r.status}`)
|
||||
return r.json()
|
||||
})
|
||||
.then((d) => lebt && setDaten(d))
|
||||
.catch((e) => lebt && setFehler(e instanceof Error ? e.message : 'unbekannt'))
|
||||
return () => {
|
||||
lebt = false
|
||||
}
|
||||
}, [schluessel])
|
||||
|
||||
if (fehler) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-grund p-6">
|
||||
<div className="max-w-sm text-center">
|
||||
<FileQuestion size={34} className="mx-auto text-schrift-leise/50" />
|
||||
<p className="mt-3 text-sm text-schrift">Diesen Link gibt es nicht.</p>
|
||||
<p className="mt-1 text-xs text-schrift-leise">
|
||||
Er wurde zurückgezogen, oder er war nie einer. Beides sieht von hier
|
||||
gleich aus — und das ist Absicht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!daten) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-grund">
|
||||
<Loader2 className="animate-spin text-schrift-leise" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-grund">
|
||||
<header className="border-b border-rand bg-flaeche">
|
||||
<div className="mx-auto w-full max-w-7xl px-4 py-4">
|
||||
<h1 className="text-lg font-semibold text-schrift">{daten.titel}</h1>
|
||||
<p className="mt-0.5 text-xs text-schrift-leise">
|
||||
{daten.anzahl} {daten.anzahl === 1 ? 'Datei' : 'Dateien'} ·{' '}
|
||||
{bytes(daten.items.reduce((s, i) => s + i.size, 0))}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-7xl px-4 py-5">
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3">
|
||||
{daten.items.map((i) => (
|
||||
<figure
|
||||
key={i.url}
|
||||
className="overflow-hidden rounded-lg border border-rand bg-flaeche"
|
||||
>
|
||||
<button
|
||||
onClick={() => setGross(i)}
|
||||
className="block w-full"
|
||||
aria-label={`${i.name} groß ansehen`}
|
||||
>
|
||||
<div className="relative flex aspect-square items-center justify-center bg-grund">
|
||||
<Kachel eintrag={i} />
|
||||
</div>
|
||||
</button>
|
||||
<figcaption className="border-t border-rand p-2">
|
||||
<p
|
||||
className="truncate font-mono text-[11px] text-schrift"
|
||||
title={i.name}
|
||||
>
|
||||
{i.name}
|
||||
</p>
|
||||
<p className="text-[11px] text-schrift-leise">{bytes(i.size)}</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-center text-[11px] text-schrift-leise">
|
||||
Bereitgestellt mit d4rk_media
|
||||
</p>
|
||||
</main>
|
||||
|
||||
{gross && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-3 bg-black/85 p-4"
|
||||
onClick={() => setGross(null)}
|
||||
>
|
||||
<div onClick={(e) => e.stopPropagation()} className="max-h-full">
|
||||
{gross.mime.startsWith('video') ? (
|
||||
<video
|
||||
src={gross.url}
|
||||
controls
|
||||
autoPlay
|
||||
className="max-h-[80vh] max-w-full rounded"
|
||||
/>
|
||||
) : gross.mime.startsWith('audio') ? (
|
||||
<audio src={gross.url} controls autoPlay className="w-80" />
|
||||
) : (
|
||||
<img
|
||||
src={gross.url}
|
||||
alt={gross.name}
|
||||
className="max-h-[80vh] max-w-full object-contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="font-mono text-xs text-schrift-leise">{gross.name}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Dieselbe Regel wie in der Galerie: erst die Vorschau, dann ein Zeichen, das
|
||||
* die Art benennt. Ein Fragezeichen auf einer gesunden MP4 sieht aus wie ein
|
||||
* Fehler — und hier sieht es ein Gast. */
|
||||
function Kachel({ eintrag }: { eintrag: Eintrag }) {
|
||||
const [weg, setWeg] = useState(false)
|
||||
const bewegt = eintrag.mime.startsWith('video') || eintrag.mime.startsWith('audio')
|
||||
|
||||
if (!weg) {
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src={eintrag.thumb}
|
||||
onError={(e) => {
|
||||
const bild = e.currentTarget
|
||||
if (istBild(eintrag.mime) && !bild.dataset.gefallen) {
|
||||
bild.dataset.gefallen = 'ja'
|
||||
bild.src = eintrag.url
|
||||
return
|
||||
}
|
||||
setWeg(true)
|
||||
}}
|
||||
alt={eintrag.name}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
{bewegt && (
|
||||
<span className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<span className="rounded-full bg-black/55 p-2">
|
||||
<Play size={14} className="translate-x-[1px] fill-white text-white" />
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
{eintrag.dauer !== null && eintrag.dauer > 0 && (
|
||||
<span className="pointer-events-none absolute right-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-0.5 text-[11px] tabular-nums text-white">
|
||||
{dauerText(eintrag.dauer)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Zeichen = eintrag.mime.startsWith('video')
|
||||
? Film
|
||||
: eintrag.mime.startsWith('audio')
|
||||
? Music
|
||||
: istBild(eintrag.mime)
|
||||
? Image
|
||||
: FileQuestion
|
||||
return <Zeichen size={26} className="text-schrift-leise/40" />
|
||||
}
|
||||
@@ -38,6 +38,7 @@ import { Ordner } from '../components/Ordner'
|
||||
import { Hochladen } from '../components/Hochladen'
|
||||
import { Ansehen } from '../components/Ansehen'
|
||||
import { Verschieben } from '../components/Verschieben'
|
||||
import { OrdnerUmbenennen, Umbenennen } from '../components/Umbenennen'
|
||||
import { useAuffrischen } from '../auffrischen'
|
||||
import { useMerker } from '../merker'
|
||||
|
||||
@@ -65,6 +66,8 @@ export function Galerie() {
|
||||
// nach einem Neuladen der Liste zeigt sie sonst auf einen alten Datensatz.
|
||||
const [ansehen, setAnsehen] = useState<number | null>(null)
|
||||
const [verschieben, setVerschieben] = useState<MediaItem[] | null>(null)
|
||||
const [umbenennen, setUmbenennen] = useState<MediaItem | null>(null)
|
||||
const [ordnerUmbenennen, setOrdnerUmbenennen] = useState<string | null>(null)
|
||||
const { kopiert, kopieren } = useKopieren()
|
||||
|
||||
// Die Suche wartet einen Moment ab. Ohne das schickt jeder Tastendruck
|
||||
@@ -240,6 +243,7 @@ export function Galerie() {
|
||||
daten={ordnerDaten}
|
||||
gewaehlt={ordner}
|
||||
onAngelegt={() => void ordnerLaden()}
|
||||
onUmbenennen={setOrdnerUmbenennen}
|
||||
onWahl={(o) => {
|
||||
setOrdner(o)
|
||||
setSeite(0)
|
||||
@@ -370,6 +374,12 @@ export function Galerie() {
|
||||
<option value="angelegt">zuerst hochgeladen</option>
|
||||
<option value="pfad">Pfad</option>
|
||||
<option value="groesse">Größe</option>
|
||||
{/* Gezählt wurde längst — ordnen konnte man danach
|
||||
nicht, und damit beantwortete die Zahl die Frage
|
||||
„was wird eigentlich gebraucht" nur für die zehn
|
||||
im Speicherbericht. */}
|
||||
<option value="abrufe">Abrufe</option>
|
||||
<option value="geholt">zuletzt geholt</option>
|
||||
</select>
|
||||
<select
|
||||
value={proSeite}
|
||||
@@ -552,7 +562,23 @@ export function Galerie() {
|
||||
{item.path}
|
||||
</p>
|
||||
<p className="mt-0.5 text-[11px] text-schrift-leise">
|
||||
{bytes(item.size)} · {zeit(item.updated_at)}
|
||||
{/* Wonach sortiert wird, STEHT AUCH DA.
|
||||
Nach einer Zahl zu ordnen, die man
|
||||
nirgends sieht, ist eine Reihenfolge
|
||||
ohne Begründung — man sieht nur, dass
|
||||
sich etwas geändert hat. */}
|
||||
{sortierung === 'abrufe' || sortierung === 'geholt' ? (
|
||||
<>
|
||||
{item.abrufe}× geholt ·{' '}
|
||||
{item.zuletzt_abgerufen
|
||||
? zeit(item.zuletzt_abgerufen)
|
||||
: 'nie'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{bytes(item.size)} · {zeit(item.updated_at)}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mt-2 flex gap-1">
|
||||
@@ -642,10 +668,45 @@ export function Galerie() {
|
||||
setAnsehen(null)
|
||||
setLoeschen([item])
|
||||
}}
|
||||
onUmbenennen={() => {
|
||||
setAnsehen(null)
|
||||
setUmbenennen(item)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
|
||||
{umbenennen && (
|
||||
<Umbenennen
|
||||
datei={umbenennen}
|
||||
onAbbruch={() => setUmbenennen(null)}
|
||||
onFertig={() => {
|
||||
setUmbenennen(null)
|
||||
allesLaden()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{ordnerUmbenennen !== null && (
|
||||
<OrdnerUmbenennen
|
||||
pfad={ordnerUmbenennen}
|
||||
dateien={
|
||||
ordnerDaten?.items.find((o) => o.folder === ordnerUmbenennen)?.files ?? 0
|
||||
}
|
||||
onAbbruch={() => setOrdnerUmbenennen(null)}
|
||||
onFertig={(neu) => {
|
||||
setOrdnerUmbenennen(null)
|
||||
// Steht die Ansicht IM umbenannten Ordner, muss sie
|
||||
// mitwandern -- sonst zeigt sie auf einen Pfad, den es
|
||||
// nicht mehr gibt, und der Inhalt ist leer.
|
||||
if (ordner === ordnerUmbenennen || ordner.startsWith(ordnerUmbenennen + '/')) {
|
||||
setOrdner(neu + ordner.slice(ordnerUmbenennen.length))
|
||||
}
|
||||
allesLaden()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{verschieben && (
|
||||
<Verschieben
|
||||
dateien={verschieben}
|
||||
|
||||
@@ -21,13 +21,15 @@ export function Tokens() {
|
||||
const [frisch, setFrisch] = useState<NewToken | null>(null)
|
||||
const [weg, setWeg] = useState<TokenRow | null>(null)
|
||||
const [loescht, setLoescht] = useState(false)
|
||||
const [ohneToken, setOhneToken] = useState<{ dateien: number; bytes: number } | null>(null)
|
||||
const { kopiert, kopieren } = useKopieren()
|
||||
|
||||
async function laden() {
|
||||
setLaedt(true)
|
||||
try {
|
||||
const { items } = await api.tokens()
|
||||
setRows(items)
|
||||
const antwort = await api.tokens()
|
||||
setRows(antwort.items)
|
||||
setOhneToken(antwort.ohneToken)
|
||||
} catch (err) {
|
||||
note('fehler', err instanceof Error ? err.message : 'Unbekannt')
|
||||
} finally {
|
||||
@@ -212,6 +214,12 @@ export function Tokens() {
|
||||
<th className="pb-2 font-medium">Präfix</th>
|
||||
<th className="pb-2 font-medium">Rechte</th>
|
||||
<th className="pb-2 font-medium">Grenzen</th>
|
||||
{/* Was mit dem Token wirklich abgelegt wurde.
|
||||
`token_id` steht seit dem ersten Tag in jeder
|
||||
Zeile und war bis hierhin NIRGENDS zu sehen —
|
||||
dabei ist es die Auskunft, die vor dem
|
||||
Löschen zählt. */}
|
||||
<th className="pb-2 text-right font-medium">Abgelegt</th>
|
||||
<th className="pb-2 font-medium">Angelegt</th>
|
||||
<th className="pb-2 font-medium">Zuletzt benutzt</th>
|
||||
<th className="pb-2" />
|
||||
@@ -256,6 +264,23 @@ export function Tokens() {
|
||||
.filter(Boolean)
|
||||
.join(' · ') || '—'}
|
||||
</td>
|
||||
<td className="py-2 text-right whitespace-nowrap">
|
||||
{t.dateien === 0 ? (
|
||||
<span className="text-xs text-schrift-leise">—</span>
|
||||
) : (
|
||||
<span title={
|
||||
t.zuletztAbgelegt
|
||||
? `zuletzt ${zeit(t.zuletztAbgelegt)}`
|
||||
: undefined
|
||||
}>
|
||||
<span className="tabular-nums">{t.dateien}</span>
|
||||
<span className="text-xs text-schrift-leise">
|
||||
{' '}
|
||||
· {bytes(t.bytes)}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 text-schrift-leise">
|
||||
{zeit(t.created_at)}
|
||||
</td>
|
||||
@@ -277,6 +302,15 @@ export function Tokens() {
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{ohneToken && ohneToken.dateien > 0 && (
|
||||
<p className="mt-3 border-t border-rand pt-3 text-xs text-schrift-leise">
|
||||
Dazu kommen <strong className="text-schrift">{ohneToken.dateien}</strong>{' '}
|
||||
Dateien ({bytes(ohneToken.bytes)}) <strong>ohne</strong> Token — aus dem
|
||||
Dashboard hochgeladen. Dort gibt es eine Sitzung und keinen Token;
|
||||
ohne diese Zeile ginge die Summe nicht auf.
|
||||
</p>
|
||||
)}
|
||||
</Karte>
|
||||
|
||||
{/* Der Klartext — genau einmal.
|
||||
|
||||
Reference in New Issue
Block a user