feat: Vorschau fuer Video und Ton, Ordner anlegen dort, wo man es sucht
Mit den ersten echten Clips fiel auf, was bei 3600 Bildern nie auffiel: alles,
was kein Bild ist, bekam ein FRAGEZEICHEN auf die Kachel -- ausgerechnet das
Zeichen fuer "unbekannt" auf einer voellig gesunden MP4.
Jetzt: ein Standbild aus dem Clip (ein Zehntel hinein, weil viele mit Schwarz
oder einem Einblender beginnen und eine schwarze Kachel so aussagekraeftig ist
wie gar keine), bei Ton das eingebettete Titelbild, dazu ein Abspielzeichen und
die LAUFZEIT in der Ecke. Fehlt eine Vorschau, kommt ein Zeichen, das die ART
benennt, statt eines Fragezeichens.
DER PREIS IST FFMPEG IM ABBILD, und der wurde zweimal gemessen und zweimal
gedrueckt:
vorher 460 MB
apt-get install ffmpeg 1,11 GB
statisches ffmpeg + ffprobe 835 MB
statisches ffmpeg allein 648 MB
Debians Paket schaltet jeden Filter frei und zieht die Abhaengigkeiten mit:
libllvm15 (114 MB), Mesa samt libgl1-mesa-dri, libz3 und libflite1 -- ein
SPRACHSYNTHESIZER. Alles fuer Filter, die ein Dienst ohne Bildschirm nie
anfasst; --no-install-recommends half nicht, es sind harte Abhaengigkeiten.
ffprobe flog danach auch noch raus: 135 MB fuer eine einzige Aufgabe, die
Laenge zu nennen -- die steht auch im Kopf, den ffmpeg beim Oeffnen druckt.
Gegengeprueft an beiden Dateien, auf zwei Nachkommastellen identisch:
ffprobe 29.767967 | ffmpeg Duration: 00:00:29.77
ffprobe 645.642449 | ffmpeg Duration: 00:10:45.64
Der Preis dafuer ist ebenfalls zu benennen: die Fassung haengt jetzt an einer
Zeile im Dockerfile und nicht mehr an apt. Vertretbar, weil ffmpeg hier nur
eigene, bereits abgelegte Dateien anfasst und nicht am Netz haengt.
EIN FEHLER, DER ZWEIMAL DERSELBE WAR. "Keine Bildspur" ist bei Ton der
Normalfall -- die meisten MP3 tragen kein Titelbild. Der erste Anlauf erkannte
das am WORTLAUT der Fehlermeldung, und der ist zwischen den Fassungen anders:
ffmpeg 5.1 "Stream map '0:v:0' matches no streams."
ffmpeg 7.1 "Failed to set value '0:v:0' for option 'map'"
Ergebnis: eine gesunde MP3 wurde als "1 fehlgeschlagen" gezaehlt, und dann
sucht jemand einen Fehler, den es nicht gibt. Gelesen wird jetzt die
SPURENLISTE ("Stream #0:1: Video:"), die seit jeher so dasteht -- und die kommt
aus demselben Aufruf wie die Laenge, also ein Blick in die Datei statt drei.
Gemessen: fehler 0, ohneBild 1.
Beide Wege durchgeprueft. Video: 320x180, Durchschnittsfarbe RGB(97,140,155) --
echtes Bild und kein schwarzer Vorspann. Ton mit angehaengtem Titelbild:
Vorschau erzeugt, dauer 8.05, Kachel zeigt 0:08.
UND ZWEI ORDNER-LUECKEN, beide beim Benutzen gefunden.
"Wie lege ich neue Ordner an?" -- gar nicht, ausser man wusste es: der Knopf
sass NUR im Verschieben-Dialog. Wer einen leeren Ordner wollte, musste erst
Dateien auswaehlen und "Verschieben" druecken. Eine Funktion, die man nur ueber
eine andere Funktion erreicht, ist fuer den, der sie sucht, nicht vorhanden.
Jetzt steht sie unter dem Ordnerbaum, mit der Angabe, IN welchem Ordner sie
entsteht -- sonst tippt jemand "waffen", landet in "items/waffen" und sucht
danach an der Wurzel.
Zielordner beim Hochladen: vorher galt stillschweigend der in der Galerie
angeklickte. Richtig, solange man es weiss, und ein Fallstrick, sobald man es
nicht weiss -- wer nach einer Suche hochlaedt, steht in "Alle" und legt an der
Wurzel ab. Der angeklickte bleibt die Voreinstellung, ist jetzt aber sichtbar
und aenderbar, samt "neuer Ordner" direkt daneben.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -113,6 +113,8 @@ export type MediaItem = {
|
||||
/** Wie oft die Datei oeffentlich geholt wurde. */
|
||||
abrufe: number
|
||||
zuletzt_abgerufen: number | null
|
||||
/** Laenge in Sekunden — nur bei Video und Ton, sonst null. */
|
||||
dauer: number | null
|
||||
}
|
||||
|
||||
export type MediaPage = {
|
||||
@@ -343,6 +345,8 @@ export type ThumbLauf = {
|
||||
/** Wieviele noch fehlen. Siehe WebpLauf — derselbe Grund. */
|
||||
offen: number
|
||||
fertig: boolean
|
||||
/** Ton ohne eingebettetes Titelbild. KEIN Fehler — der Normalfall. */
|
||||
ohneBild: number
|
||||
}
|
||||
|
||||
/** Die Adresse der Vorschau zu einem Pfad.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import { CheckCircle2, Upload, X, XCircle } from 'lucide-react'
|
||||
import type { UploadErgebnis } from '../api'
|
||||
import { useStore } from '../store'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { CheckCircle2, FolderPlus, Upload, X, XCircle } from 'lucide-react'
|
||||
import { api, type Folders, type UploadErgebnis } from '../api'
|
||||
import { run, useStore } from '../store'
|
||||
import { bytes } from '../format'
|
||||
import { Knopf } from './Bausteine'
|
||||
|
||||
@@ -14,15 +14,50 @@ import { Knopf } from './Bausteine'
|
||||
*
|
||||
* JEDE Datei bekommt ihre eigene Zeile mit Ergebnis. "3 von 5 hochgeladen"
|
||||
* ohne die Namen der zwei anderen ist genau die Sorte Rückmeldung, wegen der
|
||||
* wir hier neu bauen. */
|
||||
export function Hochladen({ ordner, fertig }: { ordner: string; fertig: () => void }) {
|
||||
* wir hier neu bauen.
|
||||
*
|
||||
* DER ZIELORDNER WIRD HIER GEWÄHLT und nicht nur nebenan angezeigt. Vorher
|
||||
* galt stillschweigend der in der Galerie angeklickte Ordner — das ist
|
||||
* richtig, solange man es weiß, und ein Fallstrick, sobald man es nicht weiß:
|
||||
* wer nach einer Suche hochlädt, steht in „Alle" und legt an der Wurzel ab.
|
||||
* Der angeklickte Ordner ist deshalb weiterhin die VOREINSTELLUNG, aber eben
|
||||
* eine sichtbare und änderbare. */
|
||||
export function Hochladen({
|
||||
ordner,
|
||||
ordnerDaten,
|
||||
fertig,
|
||||
}: {
|
||||
ordner: string
|
||||
ordnerDaten: Folders | null
|
||||
fertig: () => void
|
||||
}) {
|
||||
const note = useStore((s) => s.note)
|
||||
const [ziel, setZiel] = useState(ordner)
|
||||
const [neu, setNeu] = useState<string | null>(null)
|
||||
const [ueber, setUeber] = useState(false)
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [fortschritt, setFortschritt] = useState(0)
|
||||
const [ergebnisse, setErgebnisse] = useState<UploadErgebnis[] | null>(null)
|
||||
const feld = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Wechselt der Ordner in der Galerie, wechselt das Ziel mit. Sonst lädt
|
||||
// jemand nach einem Ordnerwechsel weiter in den vorherigen.
|
||||
useEffect(() => setZiel(ordner), [ordner])
|
||||
|
||||
async function ordnerAnlegen() {
|
||||
const name = (neu ?? '').trim()
|
||||
if (!name) return
|
||||
const pfad = ziel ? `${ziel}/${name}` : name
|
||||
const r = await run(() => api.ordnerAnlegen(pfad), (x) => `Ordner ${x.pfad} angelegt.`)
|
||||
if (r) {
|
||||
setNeu(null)
|
||||
setZiel(r.pfad)
|
||||
// Damit der neue Ordner auch in der Liste steht -- sonst zeigt die
|
||||
// Auswahl gleich darauf einen Namen, den sie nicht kennt.
|
||||
fertig()
|
||||
}
|
||||
}
|
||||
|
||||
async function schicken(dateien: FileList | File[]) {
|
||||
const liste = [...dateien]
|
||||
if (liste.length === 0) return
|
||||
@@ -33,7 +68,7 @@ export function Hochladen({ ordner, fertig }: { ordner: string; fertig: () => vo
|
||||
|
||||
const form = new FormData()
|
||||
for (const d of liste) form.append('file', d)
|
||||
if (ordner) form.append('folder', ordner)
|
||||
if (ziel) form.append('folder', ziel)
|
||||
|
||||
try {
|
||||
// XMLHttpRequest und nicht fetch: nur der kennt upload.onprogress.
|
||||
@@ -78,6 +113,66 @@ export function Hochladen({ ordner, fertig }: { ordner: string; fertig: () => vo
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Die Ordnerwahl STEHT ÜBER dem Ablegefeld und nicht darunter:
|
||||
sie ist die Entscheidung, die man VOR dem Ziehen trifft. */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="shrink-0 text-xs text-schrift-leise">Ziel</label>
|
||||
<select
|
||||
value={ziel}
|
||||
onChange={(e) => setZiel(e.target.value)}
|
||||
disabled={laeuft}
|
||||
className="min-w-0 flex-1 rounded-md border border-rand bg-grund px-2 py-1.5
|
||||
font-mono text-xs text-schrift outline-none focus:border-akzent
|
||||
disabled:opacity-50"
|
||||
>
|
||||
<option value="">(Wurzel)</option>
|
||||
{(ordnerDaten?.items ?? []).map((o) => (
|
||||
<option key={o.folder} value={o.folder}>
|
||||
{/* Die Einrückung mit festen Leerzeichen: ein
|
||||
<option> nimmt kein Layout an, aber es nimmt
|
||||
Zeichen. */}
|
||||
{'\u00a0'.repeat(o.tiefe * 2)}
|
||||
{o.folder.split('/').pop()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => setNeu(neu === null ? '' : null)}
|
||||
disabled={laeuft}
|
||||
title="Neuen Ordner darin anlegen"
|
||||
className="shrink-0 rounded-md border border-rand p-1.5 text-schrift-leise
|
||||
hover:bg-flaeche-hoch hover:text-schrift disabled:opacity-50"
|
||||
aria-label="Neuen Ordner anlegen"
|
||||
>
|
||||
<FolderPlus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{neu !== null && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="shrink-0 font-mono text-xs text-schrift-leise">
|
||||
{ziel ? `${ziel}/` : ''}
|
||||
</span>
|
||||
<input
|
||||
autoFocus
|
||||
value={neu}
|
||||
onChange={(e) => setNeu(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') void ordnerAnlegen()
|
||||
else if (e.key === 'Escape') setNeu(null)
|
||||
}}
|
||||
placeholder="name"
|
||||
className="min-w-0 flex-1 rounded-md border border-rand bg-grund px-2 py-1.5
|
||||
font-mono text-xs text-schrift outline-none focus:border-akzent"
|
||||
/>
|
||||
<Knopf
|
||||
art="haupt"
|
||||
onClick={() => void ordnerAnlegen()}
|
||||
kind="Anlegen"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault()
|
||||
@@ -102,9 +197,8 @@ export function Hochladen({ ordner, fertig }: { ordner: string; fertig: () => vo
|
||||
Dateien hierher ziehen oder <span className="text-akzent">auswählen</span>
|
||||
</span>
|
||||
<span className="text-xs">
|
||||
Ziel:{' '}
|
||||
<code className="font-mono">{ordner ? `${ordner}/` : '(Wurzel)'}</code> ·
|
||||
Bilder, Videos, Ton, PDF
|
||||
nach <code className="font-mono">{ziel ? `${ziel}/` : '(Wurzel)'}</code> ·
|
||||
Bilder, Videos, Ton, PDF, Text — ein ZIP wird ausgepackt
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,24 +1,54 @@
|
||||
import { Folder, FolderOpen, Layers } from 'lucide-react'
|
||||
import type { Folders } from '../api'
|
||||
import { useState } from 'react'
|
||||
import { Check, Folder, FolderOpen, FolderPlus, Layers, X } from 'lucide-react'
|
||||
import { api, type Folders } from '../api'
|
||||
import { bytes } from '../format'
|
||||
import { run } from '../store'
|
||||
|
||||
/** Die Ordnerübersicht neben der Galerie.
|
||||
*
|
||||
* Kein aufklappbarer Baum, sondern eine flache Liste mit Einrückung. Bei
|
||||
* einer Handvoll Ordner ist ein Aufklappmechanismus mehr Bedienung als
|
||||
* Nutzen — und was man nicht aufklappen muss, kann man auch nicht zugeklappt
|
||||
* übersehen. */
|
||||
* übersehen.
|
||||
*
|
||||
* HIER STEHT AUCH "NEUER ORDNER", und das ist eine Korrektur: anlegen ging
|
||||
* bisher NUR im Verschieben-Dialog. Wer einen leeren Ordner wollte, musste
|
||||
* also erst Dateien auswählen, „Verschieben" drücken und dort das Feld
|
||||
* finden — eine Funktion, die man nur über eine andere Funktion erreicht, ist
|
||||
* für den, der sie sucht, nicht vorhanden. */
|
||||
export function Ordner({
|
||||
daten,
|
||||
gewaehlt,
|
||||
onWahl,
|
||||
onAngelegt,
|
||||
}: {
|
||||
daten: Folders | null
|
||||
gewaehlt: string
|
||||
onWahl: (ordner: string) => void
|
||||
/** Damit die Liste den neuen Ordner auch zeigt. */
|
||||
onAngelegt: () => void
|
||||
}) {
|
||||
const [neu, setNeu] = useState<string | null>(null)
|
||||
const [legtAn, setLegtAn] = useState(false)
|
||||
|
||||
if (!daten) return null
|
||||
|
||||
async function anlegen() {
|
||||
const name = (neu ?? '').trim()
|
||||
if (!name) return
|
||||
setLegtAn(true)
|
||||
// Relativ zum GEWÄHLTEN Ordner. Wer in "items" steht und "waffen"
|
||||
// tippt, meint items/waffen -- alles andere wäre eine Überraschung.
|
||||
const pfad = gewaehlt ? `${gewaehlt}/${name}` : name
|
||||
const r = await run(() => api.ordnerAnlegen(pfad), (x) => `Ordner ${x.pfad} angelegt.`)
|
||||
setLegtAn(false)
|
||||
if (r) {
|
||||
setNeu(null)
|
||||
onAngelegt()
|
||||
onWahl(r.pfad)
|
||||
}
|
||||
}
|
||||
|
||||
const zeile = (
|
||||
aktiv: boolean,
|
||||
kind: React.ReactNode,
|
||||
@@ -86,6 +116,64 @@ export function Ordner({
|
||||
sehen unter „Alle".
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-2 border-t border-rand pt-2">
|
||||
{neu === null ? (
|
||||
<button
|
||||
onClick={() => setNeu('')}
|
||||
className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left
|
||||
text-xs text-schrift-leise hover:bg-flaeche-hoch/50 hover:text-schrift"
|
||||
>
|
||||
<FolderPlus size={14} />
|
||||
Neuer Ordner
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1.5 px-1">
|
||||
{/* WO er entsteht, steht dabei. Ohne diese Zeile tippt
|
||||
jemand "waffen", landet in "items/waffen" und sucht
|
||||
danach an der Wurzel. */}
|
||||
<p className="px-1 text-[11px] text-schrift-leise">
|
||||
in{' '}
|
||||
<code className="font-mono">{gewaehlt || '(Wurzel)'}</code>
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
autoFocus
|
||||
value={neu}
|
||||
onChange={(e) => setNeu(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') void anlegen()
|
||||
else if (e.key === 'Escape') setNeu(null)
|
||||
}}
|
||||
placeholder="name"
|
||||
className="min-w-0 flex-1 rounded border border-rand bg-grund px-2 py-1
|
||||
font-mono text-xs text-schrift outline-none
|
||||
focus:border-akzent"
|
||||
/>
|
||||
<button
|
||||
onClick={() => void anlegen()}
|
||||
disabled={legtAn || !neu.trim()}
|
||||
className="rounded border border-rand p-1 text-schrift-leise
|
||||
hover:bg-flaeche-hoch hover:text-gut disabled:opacity-40"
|
||||
aria-label="Anlegen"
|
||||
>
|
||||
<Check size={13} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setNeu(null)}
|
||||
className="rounded border border-rand p-1 text-schrift-leise
|
||||
hover:bg-flaeche-hoch hover:text-schrift"
|
||||
aria-label="Abbrechen"
|
||||
>
|
||||
<X size={13} />
|
||||
</button>
|
||||
</div>
|
||||
<p className="px-1 text-[11px] text-schrift-leise">
|
||||
Buchstabe oder Ziffer zuerst, danach auch Punkt, Strich, Unterstrich.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -25,3 +25,16 @@ export function zeit(ms: number | null): string {
|
||||
}
|
||||
|
||||
export const istBild = (mime: string) => mime.startsWith('image/')
|
||||
|
||||
/** Sekunden als 1:07 oder 1:02:03.
|
||||
*
|
||||
* Stunden nur, wenn es welche gibt: "0:01:07" auf einer Kachel ist drei
|
||||
* Zeichen Laerm fuer eine Auskunft, die niemand gestellt hat. */
|
||||
export function dauerText(sekunden: number): string {
|
||||
const ganz = Math.round(sekunden)
|
||||
const s = ganz % 60
|
||||
const m = Math.floor(ganz / 60) % 60
|
||||
const h = Math.floor(ganz / 3600)
|
||||
const zwei = (n: number) => String(n).padStart(2, '0')
|
||||
return h > 0 ? `${h}:${zwei(m)}:${zwei(s)}` : `${m}:${zwei(s)}`
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
Music,
|
||||
ImageOff,
|
||||
Loader2,
|
||||
Play,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Trash2,
|
||||
@@ -31,7 +32,7 @@ import {
|
||||
type Sortierung,
|
||||
} from '../api'
|
||||
import { run, useStore } from '../store'
|
||||
import { bytes, istBild, zeit } from '../format'
|
||||
import { bytes, dauerText, istBild, zeit } from '../format'
|
||||
import { Knopf, Leer, Nachfrage, useKopieren } from '../components/Bausteine'
|
||||
import { Ordner } from '../components/Ordner'
|
||||
import { Hochladen } from '../components/Hochladen'
|
||||
@@ -238,6 +239,7 @@ export function Galerie() {
|
||||
<Ordner
|
||||
daten={ordnerDaten}
|
||||
gewaehlt={ordner}
|
||||
onAngelegt={() => void ordnerLaden()}
|
||||
onWahl={(o) => {
|
||||
setOrdner(o)
|
||||
setSeite(0)
|
||||
@@ -442,6 +444,7 @@ export function Galerie() {
|
||||
|
||||
<Hochladen
|
||||
ordner={ordner}
|
||||
ordnerDaten={ordnerDaten}
|
||||
fertig={() => {
|
||||
void laden()
|
||||
void ordnerLaden()
|
||||
@@ -486,32 +489,37 @@ export function Galerie() {
|
||||
className="block w-full"
|
||||
aria-label={`${item.path} ansehen`}
|
||||
>
|
||||
<div className="flex aspect-square items-center justify-center bg-grund">
|
||||
{istBild(item.mime) ? (
|
||||
<img
|
||||
// Erst die Vorschau: 60 Vollbilder
|
||||
// sind 7,2 MB, nur damit jemand
|
||||
// sieht, WELCHE Bilder da sind.
|
||||
// Fehlt sie (404), nimmt der
|
||||
// Browser das Vollbild — deshalb
|
||||
// braucht es dafuer weder eine
|
||||
// Spalte noch eine Nachfrage.
|
||||
src={vorschauUrl(item.path)}
|
||||
onError={(e) => {
|
||||
const bild = e.currentTarget
|
||||
if (bild.dataset.gefallen) return
|
||||
bild.dataset.gefallen = 'ja'
|
||||
bild.src = item.url
|
||||
}}
|
||||
alt={item.path}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<FileQuestion
|
||||
size={28}
|
||||
className="text-schrift-leise/50"
|
||||
/>
|
||||
<div className="relative flex aspect-square items-center justify-center bg-grund">
|
||||
<Vorschau item={item} />
|
||||
|
||||
{/* Das Abspielzeichen liegt ÜBER dem
|
||||
Standbild. Ohne es sieht ein Video
|
||||
aus wie ein Bild, und man klickt es
|
||||
in der Erwartung an, ein Bild zu
|
||||
sehen. */}
|
||||
{(item.mime.startsWith('video') ||
|
||||
item.mime.startsWith('audio')) && (
|
||||
<span
|
||||
className="pointer-events-none absolute inset-0 flex
|
||||
items-center justify-center"
|
||||
>
|
||||
<span className="rounded-full bg-black/55 p-2">
|
||||
<Play
|
||||
size={16}
|
||||
className="translate-x-[1px] fill-white text-white"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{item.dauer !== null && item.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(item.dauer)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
@@ -680,3 +688,65 @@ export function Galerie() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Was auf der Kachel steht.
|
||||
*
|
||||
* ERST DIE VORSCHAU, immer: 60 Vollbilder sind 7,2 MB, nur damit jemand sieht,
|
||||
* WELCHE Dateien da sind. Video und Ton haben seit ffmpeg ebenfalls eine —
|
||||
* ein Standbild aus dem Clip, bei einer MP3 das eingebettete Titelbild.
|
||||
*
|
||||
* FEHLT SIE, wird nicht geraten. Bei einem Bild nimmt der Browser über
|
||||
* `onError` das Vollbild; bei allem anderen kommt ein Zeichen, das die ART
|
||||
* benennt. Vorher stand dort für jede Nicht-Bild-Datei ein Fragezeichen —
|
||||
* also ausgerechnet das Zeichen für „unbekannt" auf einer völlig gesunden
|
||||
* MP4. */
|
||||
function Vorschau({ item }: { item: MediaItem }) {
|
||||
const [gescheitert, setGescheitert] = useState(false)
|
||||
const bewegt = item.mime.startsWith('video') || item.mime.startsWith('audio')
|
||||
|
||||
// Sobald die Datei wechselt, ist ein früherer Fehlschlag hinfällig.
|
||||
useEffect(() => setGescheitert(false), [item.id])
|
||||
|
||||
if (!gescheitert) {
|
||||
return (
|
||||
<img
|
||||
src={vorschauUrl(item.path)}
|
||||
onError={(e) => {
|
||||
// Bei einem Bild lohnt der zweite Versuch mit dem Vollbild:
|
||||
// die Vorschau ist abgeleitet und kann fehlen, das Bild
|
||||
// selbst liegt da. Bei Video und Ton wäre derselbe Griff
|
||||
// grober Unfug — er lüde den ganzen Clip in ein <img>.
|
||||
const bild = e.currentTarget
|
||||
if (istBild(item.mime) && !bild.dataset.gefallen) {
|
||||
bild.dataset.gefallen = 'ja'
|
||||
bild.src = item.url
|
||||
return
|
||||
}
|
||||
setGescheitert(true)
|
||||
}}
|
||||
alt={item.path}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const Zeichen = item.mime.startsWith('video')
|
||||
? Film
|
||||
: item.mime.startsWith('audio')
|
||||
? Music
|
||||
: item.mime === 'application/pdf' ||
|
||||
item.mime.startsWith('text/') ||
|
||||
item.mime.startsWith('application/json')
|
||||
? FileText
|
||||
: istBild(item.mime)
|
||||
? ImageOff
|
||||
: FileQuestion
|
||||
|
||||
return (
|
||||
<Zeichen
|
||||
size={28}
|
||||
className={bewegt ? 'text-schrift-leise/30' : 'text-schrift-leise/50'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -163,8 +163,9 @@ export function Speicher() {
|
||||
<span className="text-sm tabular-nums">{fortschritt.thumbs}</span>
|
||||
) : (
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Die Galerie lädt Vorschauen statt Vollbilder. Was vor dieser Funktion
|
||||
hochgeladen wurde, hat noch keine.
|
||||
Die Galerie lädt Vorschauen statt Vollbilder. Bei Video ist es ein
|
||||
Standbild aus dem Clip, bei Ton das eingebettete Titelbild — und
|
||||
dass die meisten MP3 keines haben, ist kein Fehler.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user