Die sechs Punkte des Commanders vom 02.09.2026 abends und seine Entscheide:
* Restzeit der Kompression aus HandBrakes eigener ETA-Klammer (Formatstring
aus dem Binary 1.11.2 gelesen), KompressionStand.restS.
* Kachel zeigt nach dem Rip nur noch eine Zeile — Balken, Prozent, Ziel in
der Kompressions-Karte und im Verlauf ("nur in der Kompressions-Karte").
* Kopfzeile bleibt beim Scrollen stehen (sticky), Sektionswahl darunter.
* Untertitel-Vorwahl je Extra ("NUR für Extras, IMMER OPTIONAL"): welche
Untertitel-Spur beim Abspielen an ist — weiche Spur, nie eingebrannt;
RipAuftragTitel/RohDatei.untertitelVorwahl, sprachwahl.
* Mehrere Filme je Disc: "anderer Film …" je Titel mit TMDb-Suche;
filme.ts filmGruppen trennt am Rip-Ende in eigene Roh-Ordner, Vorgänge
und Kompressions-Aufträge mit voller Zuordnung (erkennung.zuordnungAus).
* Roh-Ordner und Dateien tragen den Filmnamen (filme.ts rohOrdnerName,
ablage/dateinamen.ts: Akira (1988).mkv, - Fassung n, - Extra nn).
* Hell-Modus: Einstellung design (dunkel/hell/system), data-design auf
<html>, Token --color-tinte statt white/-Alpha-Klassen.
* Vorgangs-Leiste (Commander: "Phase 1–4 plus Komprimierung — zu einem
machen"): gemeinsam/vorgangsleiste.ts + uebersicht/VorgangsLeiste.tsx,
vier Stationen (Rettung als Zwischenstation), Segment-Balken in der
aktiven Station; Kachel, Kompressions-Karte, Verlauf. PHASE-x/4-Texte weg.
* Automatik-Kasten leert sich, sobald ein Rip startet.
Beweise: 446 Tests (neu: filme, dateinamen, vorgangsleiste; erweitert:
auftrag, handbrake, automatik, ablegen), drei Typprüfungen, Klick-Beweis
33 Schritte inkl. Vorwahl, anderer Film, Vorgangs-Leiste, Restzeit,
Hell-Modus (Bilder beweise/klick/01…11).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
// § 5 Schritt 4: „nein → fragen" — Suche + Auswahl der richtigen Metadaten.
|
|
import { useEffect, useState } from 'react'
|
|
import type { MetaVorschlag } from '../../gemeinsam/nachrichten'
|
|
import { DialogRahmen, IconDisc, posterUrlKlein } from '../bausteine'
|
|
import { metadatenSuchen, zuordnungSetzen } from '../kernverbindung'
|
|
|
|
export function AendernDialog({
|
|
id,
|
|
startText,
|
|
vorschlaege,
|
|
schliessen,
|
|
}: {
|
|
id: string
|
|
startText: string
|
|
vorschlaege: MetaVorschlag[]
|
|
schliessen: () => void
|
|
}) {
|
|
const [text, setText] = useState(startText)
|
|
useEffect(() => {
|
|
metadatenSuchen(id, startText)
|
|
// Nur beim Öffnen — weitere Suchen löst der Knopf aus.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
return (
|
|
<DialogRahmen schliessen={schliessen} breite="max-w-lg">
|
|
<h3 className="mb-3 font-display text-lg font-bold text-schnee">Was ist das wirklich?</h3>
|
|
<div className="mb-3 flex gap-2">
|
|
<input
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') metadatenSuchen(id, text)
|
|
}}
|
|
placeholder="Titel suchen …"
|
|
className="flex-1 rounded-lg border border-tinte/12 bg-samt px-3 py-2 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none"
|
|
/>
|
|
<button
|
|
onClick={() => metadatenSuchen(id, text)}
|
|
className="rounded-lg border border-gold/50 bg-gold/10 px-4 py-2 text-xs font-semibold text-gold-hell hover:bg-gold/20"
|
|
>
|
|
Suchen
|
|
</button>
|
|
</div>
|
|
{vorschlaege.length === 0 ? (
|
|
<p className="font-mono text-xs text-nebel">Keine Treffer — anderen Suchtext probieren.</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{vorschlaege.map((v) => (
|
|
<button
|
|
key={`${v.typ}-${v.tmdbId}`}
|
|
onClick={() => {
|
|
zuordnungSetzen(id, v)
|
|
schliessen()
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-xl border border-tinte/10 bg-karte/60 p-2 text-left hover:border-gold/50 hover:bg-karte"
|
|
>
|
|
{v.posterPfad.length > 0 ? (
|
|
<img src={posterUrlKlein(v.posterPfad)} alt="" className="h-16 w-11 rounded-md object-cover" />
|
|
) : (
|
|
<span className="flex h-16 w-11 items-center justify-center rounded-md bg-samt">
|
|
<IconDisc groesse={20} farbe="oklch(0.55 0.015 80)" />
|
|
</span>
|
|
)}
|
|
<div>
|
|
<p className="text-sm font-medium text-schnee">
|
|
{v.titel}
|
|
{v.jahr !== null ? ` (${v.jahr})` : ''}
|
|
</p>
|
|
<p className="font-mono text-[10px] tracking-wider text-nebel">{v.typ === 'tv' ? 'SERIE' : 'FILM'}</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="mt-4 text-right">
|
|
<button onClick={schliessen} className="rounded-lg border border-tinte/15 px-4 py-1.5 text-xs text-dunst hover:bg-tinte/5">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</DialogRahmen>
|
|
)
|
|
}
|