feat(v5): 5.5.0 — Kern und Oberfläche aufgeteilt, Übersicht und Einstellungen neu, Erst-Einrichtung mit Poster-Kulisse
Commander-Wünsche vom 02.09.2026 vor der Freigabe von 5.4.0 (die deshalb nie veröffentlicht wurde): Kern: kern/index.ts ist nur noch Bootstrap und Router; Dienste in kern/dienste/ (Einstellungen, Werkzeuge, Laufwerke, Erkennung, Vorgänge, Speicher, Benachrichtigung, Automatik), Kontext in kern/kontext.ts, Protokoll-Datei in gemeinsam/protokoll.ts, Platz-Rechnung in gemeinsam/platz.ts. Oberfläche: fenster/App.tsx ist nur noch der Rahmen; bausteine.tsx, dialoge/, uebersicht/ (LaufwerkKachel, KompressionsKarte, SpeicherKarte, VerlaufKarte), einstellungen/ (Karten je Funktion, SprachAuswahl), einrichtung/ (ErstEinrichtung, PosterHintergrund). Neu: Bibliothek weg, dafür Verlauf; Speicher-und-Bilanz-Karte (statfs); LED-Fußleiste; MakeMKV-Kopf in die Einstellungen; Sprach-Chips mit Dropdown statt Allgemeinem Preset; Karten Automatik/Benachrichtigung/Allgemein/Update; Durchsuchen bei Werkzeugen; Arbeitsordner lokal (Encode dort, dann in die Ablage); Platz-Prüfung vor dem Rip (Dialog und Kern); Automatik mit Countdown; Serien-Merker über Discs; Rettungs-Abbild mit Nullen nur nach gesehenen Lesefehlern (kern/rip/rettung.ts, Phase rettet, iso:-Quelle); Warteschlange pausieren; Discord/Telegram-Benachrichtigung; Protokoll-Datei je Tag; Fensterlage 80 % mittig, gemerkt; Erst-Einrichtung in acht Schritten vor dem Poster-Grid. Beweise: 413 Tests (neu: speicher, benachrichtigung, automatik, rettung, fensterlage, protokoll, kleinkram-550), drei Typprüfungen, Klick-Beweis mit 29 Schritten inklusive Erst-Einrichtung (zweiter Start mit RIPPY_START_BEREICH=einrichtung), Bilder beweise/klick/01…09. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
6678c81592
commit
3dc6798c79
+176
-2686
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,462 @@
|
||||
// Die Bausteine der Oberfläche (5.5.0, Separation of Concerns): alles,
|
||||
// was mehr als ein Bereich braucht — Formatierer, Symbole, Badge, Kacheln,
|
||||
// Segment-Anzeige, Schalter, Felder, Karten. Der Kino-Mix (Design-Entscheid
|
||||
// des Commanders, 31.08.2026) lebt in den Tokens von stil.css; hier sind
|
||||
// nur die Klassen, die ihn tragen.
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import type { DiscInfoStand, GeraeteInfo, RipStatus, SprachEintrag } from '../gemeinsam/nachrichten'
|
||||
|
||||
// ── Formatierer ─────────────────────────────────────────────────────────
|
||||
export function gb(bytes: number): string {
|
||||
return `${(bytes / 1e9).toFixed(2).replace('.', ',')} GB`
|
||||
}
|
||||
|
||||
/** Größen mit passender Einheit: 412 GB, 2,2 TB. */
|
||||
export function gbKurz(bytes: number): string {
|
||||
if (bytes >= 1e12) return `${(bytes / 1e12).toFixed(1).replace('.', ',')} TB`
|
||||
if (bytes >= 1e9) return `${Math.round(bytes / 1e9)} GB`
|
||||
return `${(bytes / 1e6).toFixed(0)} MB`
|
||||
}
|
||||
|
||||
export function dauerText(s: number): string {
|
||||
const m = Math.floor(s / 60)
|
||||
return m >= 60
|
||||
? `${Math.floor(m / 60)}:${String(m % 60).padStart(2, '0')} h`
|
||||
: `${m}:${String(Math.round(s % 60)).padStart(2, '0')} min`
|
||||
}
|
||||
|
||||
/** „1 h 42 min" für Statistik und Verlauf. */
|
||||
export function dauerGrob(s: number): string {
|
||||
const m = Math.round(s / 60)
|
||||
if (m < 60) return `${m} min`
|
||||
return `${Math.floor(m / 60)} h ${String(m % 60).padStart(2, '0')} min`
|
||||
}
|
||||
|
||||
export function datumKurz(iso: string | null): string {
|
||||
if (iso === null || iso.length < 16) return '—'
|
||||
return iso.slice(0, 16).replace('T', ' ')
|
||||
}
|
||||
|
||||
export function restzeitText(prozent: number, startMs: number | undefined): string {
|
||||
if (startMs === undefined || prozent <= 2 || prozent >= 100) return ''
|
||||
const verstrichen = (Date.now() - startMs) / 1000
|
||||
const restS = Math.round((verstrichen * (100 - prozent)) / prozent)
|
||||
if (restS < 90) return `REST ~${restS} S`
|
||||
return `REST ~${Math.round(restS / 60)} MIN`
|
||||
}
|
||||
|
||||
// ── TMDb-Bilder: Größen aus /configuration gemessen (01.09.2026) ────────
|
||||
export function posterUrlKlein(pfad: string): string {
|
||||
return bildUrl(pfad, 'w154')
|
||||
}
|
||||
export function posterUrlGross(pfad: string): string {
|
||||
return bildUrl(pfad, 'w342')
|
||||
}
|
||||
export function backdropUrl(pfad: string): string {
|
||||
return bildUrl(pfad, 'w780')
|
||||
}
|
||||
/** Freigestellter Schriftzug — SVG-Logos zeigt Chromium direkt. */
|
||||
export function logoUrl(pfad: string): string {
|
||||
return bildUrl(pfad, 'w300')
|
||||
}
|
||||
export function profilUrl(pfad: string): string {
|
||||
return bildUrl(pfad, 'w185')
|
||||
}
|
||||
function bildUrl(pfad: string, groesse: string): string {
|
||||
if (pfad.length === 0) return ''
|
||||
if (pfad.startsWith('http')) return pfad
|
||||
return `https://image.tmdb.org/t/p/${groesse}${pfad}`
|
||||
}
|
||||
|
||||
/** „1988 · FSK 16 · 124 Min · Animation · ★ 7,9" — nur, was da ist. */
|
||||
export function metaZeile(info: DiscInfoStand): string {
|
||||
const teile: string[] = []
|
||||
if (info.jahr !== null) teile.push(String(info.jahr))
|
||||
if (info.fsk.length > 0) teile.push(`FSK ${info.fsk}`)
|
||||
if (info.laufzeitMinuten > 0) teile.push(`${info.laufzeitMinuten} Min`)
|
||||
if (info.genres.length > 0) teile.push(info.genres.slice(0, 3).join(' · '))
|
||||
if (info.bewertung > 0) teile.push(`★ ${info.bewertung.toFixed(1).replace('.', ',')}`)
|
||||
return teile.join(' · ')
|
||||
}
|
||||
|
||||
export function sicherheitsWort(confidence: number): string {
|
||||
if (confidence >= 0.9) return 'sehr wahrscheinlich'
|
||||
if (confidence >= 0.8) return 'wahrscheinlich'
|
||||
if (confidence >= 0.6) return 'Vorschlag'
|
||||
return 'unsicher'
|
||||
}
|
||||
|
||||
/** 'Staffel 1 · Disc 2 · 2 Folgen' — was die Disc über ihre Lage in der
|
||||
* Ausgabe sagt. Die Folgenzahl stammt aus ihrem eigenen
|
||||
* Inhaltsverzeichnis, ist also gemessen und nicht geraten. '' wenn die
|
||||
* Disc nichts davon verrät. */
|
||||
export function discHerkunft(info: DiscInfoStand): string {
|
||||
const teile: string[] = []
|
||||
if (info.staffel !== null) teile.push(`Staffel ${info.staffel}`)
|
||||
if (info.discNr !== null) teile.push(`Disc ${info.discNr}`)
|
||||
if (info.folgen > 0) teile.push(info.folgen === 1 ? '1 Folge' : `${info.folgen} Folgen`)
|
||||
return teile.join(' · ')
|
||||
}
|
||||
|
||||
/** Vorbelegung der Sprachen je Titel: die Einstellung, soweit der Titel
|
||||
* sie hat — sonst alles, was er hat (japanischer Ton statt gar keiner). */
|
||||
export function sprachenVorbelegt(vorhanden: readonly SprachEintrag[], einstellung: string): string[] {
|
||||
const da = vorhanden.map((s) => s.lang)
|
||||
const wunsch = einstellung
|
||||
.split(',')
|
||||
.map((s) => s.trim().toLowerCase())
|
||||
.filter((s) => s.length > 0)
|
||||
const treffer = wunsch.filter((w) => da.includes(w))
|
||||
return treffer.length > 0 ? treffer : da
|
||||
}
|
||||
|
||||
export const TYP_NAMEN: Record<GeraeteInfo['typ'], string> = {
|
||||
cd: 'Audio-CD',
|
||||
dvd: 'DVD',
|
||||
bluray: 'Blu-ray',
|
||||
uhd: '4K-UHD',
|
||||
unknown: 'unbekannt',
|
||||
}
|
||||
|
||||
export const PHASEN_MONO: Record<RipStatus['phase'], string> = {
|
||||
'liest-info': 'PHASE 1/4 — LIEST TITEL-INFO',
|
||||
rettet: 'RETTUNGS-ABBILD — LIEST SEKTOR FÜR SEKTOR',
|
||||
rippt: 'PHASE 2/4 — RIPPT (VERLUSTFREI)',
|
||||
komprimiert: 'PHASE 3/4 — KOMPRIMIERT',
|
||||
'legt-ab': 'PHASE 4/4 — LEGT AB',
|
||||
fertig: 'FERTIG',
|
||||
fehler: 'FEHLER',
|
||||
abgebrochen: 'ABGEBROCHEN',
|
||||
}
|
||||
|
||||
export const LAUFENDE_PHASEN: readonly string[] = ['liest-info', 'rettet', 'rippt', 'komprimiert', 'legt-ab']
|
||||
|
||||
export const FELD_KLASSE =
|
||||
'mt-1 w-full rounded-lg border border-white/12 bg-samt px-3 py-2 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none'
|
||||
|
||||
export const KNOPF_LEISE = 'rounded-lg border border-white/15 bg-samt/60 px-3 py-1.5 text-xs text-dunst hover:text-schnee disabled:opacity-35'
|
||||
export const KNOPF_GOLD =
|
||||
'rounded-xl bg-gradient-to-b from-gold-hell to-gold-tief px-5 py-1.5 text-xs font-bold text-buehne shadow-[inset_0_1px_0_oklch(1_0_0/0.4)] hover:brightness-105 disabled:opacity-35'
|
||||
|
||||
// ── Ikonografie: eine Handvoll Strich-Symbole, alle aus demselben Guss ──
|
||||
export function IconDisc({ groesse, farbe }: { groesse: number; farbe: string }) {
|
||||
return (
|
||||
<svg width={groesse} height={groesse} viewBox="0 0 24 24" fill="none" stroke={farbe} strokeWidth="1.6">
|
||||
<circle cx="12" cy="12" r="9"></circle>
|
||||
<circle cx="12" cy="12" r="2.6"></circle>
|
||||
<path d="M12 3v3.4M12 17.6V21"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconPlay() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M7 4.5v15l13-7.5z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconStop() {
|
||||
return (
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="6" y="6" width="12" height="12" rx="1.5"></rect>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconEject() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 17h14M12 4l6 9H6z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconStift() {
|
||||
return (
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M4 20l4.5-1L20 7.5 16.5 4 5 15.5 4 20z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Eigene Fensterknöpfe (§ 4.2, seit 5.1.3) ────────────────────────────
|
||||
// Bewusst schlicht und in Windows-Maßen (46 × 32) — wer sie sucht, findet
|
||||
// sie dort, wo er sie erwartet. Sie sitzen in der Ziehfläche und müssen
|
||||
// deshalb `nicht-ziehbar` sein, sonst verschluckt der Fenstergriff den Klick.
|
||||
export const IconMinimieren = (): React.JSX.Element => (
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
|
||||
<path d="M0 5h10" stroke="currentColor" strokeWidth="1.1" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const IconMaximieren = (): React.JSX.Element => (
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
|
||||
<rect x="0.6" y="0.6" width="8.8" height="8.8" stroke="currentColor" strokeWidth="1.1" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const IconWiederherstellen = (): React.JSX.Element => (
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
|
||||
<rect x="0.6" y="2.6" width="6.8" height="6.8" stroke="currentColor" strokeWidth="1.1" />
|
||||
<path d="M2.7 2.6V0.6h6.7v6.7h-2" stroke="currentColor" strokeWidth="1.1" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const IconSchliessen = (): React.JSX.Element => (
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
|
||||
<path d="M0.6 0.6l8.8 8.8M9.4 0.6l-8.8 8.8" stroke="currentColor" strokeWidth="1.1" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export function FensterKnopf({
|
||||
titel,
|
||||
aufKlick,
|
||||
rot = false,
|
||||
children,
|
||||
}: {
|
||||
titel: string
|
||||
aufKlick: () => void
|
||||
rot?: boolean
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={aufKlick}
|
||||
title={titel}
|
||||
aria-label={titel}
|
||||
className={`flex h-8 w-[46px] items-center justify-center text-dunst transition-colors ${
|
||||
rot ? 'hover:bg-rot hover:text-white' : 'hover:bg-white/10 hover:text-schnee'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Kleine Bausteine des Schaltpults ────────────────────────────────────
|
||||
export function Badge({ text, ton }: { text: string; ton: 'gruen' | 'gelb' | 'blau' | 'grau' }) {
|
||||
const farben = {
|
||||
gruen: 'border-gruen/40 bg-gruen/10 text-gruen',
|
||||
gelb: 'border-warn/40 bg-warn/10 text-warn',
|
||||
blau: 'border-gold/40 bg-gold/10 text-gold-hell',
|
||||
grau: 'border-white/15 bg-white/5 text-dunst',
|
||||
}
|
||||
return (
|
||||
<span className={`inline-block rounded-full border px-2.5 py-0.5 text-[11px] leading-4 ${farben[ton]}`}>
|
||||
{text}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/** Die kleinen Mess-Kacheln aus dem Schaltpult (MEDIUM / GRÖSSE / …). */
|
||||
export function InfoKachel({ label, wert, farbe }: { label: string; wert: string; farbe?: string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-white/10 bg-samt/70 px-3 py-2 min-w-0">
|
||||
<div className="font-mono text-[9px] tracking-[0.14em] text-nebel">{label}</div>
|
||||
<div className={`mt-0.5 truncate text-[13px] font-semibold ${farbe ?? 'text-schnee'}`} title={wert}>
|
||||
{wert}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Die goldene Aussteuerungsanzeige — 20 Segmente, gefüllt nach Prozent. */
|
||||
export function SegmentBalken({ prozent }: { prozent: number }) {
|
||||
const segmente = 20
|
||||
const anteil = Math.max(0, Math.min(100, prozent)) / 100
|
||||
const voll = Math.floor(anteil * segmente)
|
||||
const halb = anteil * segmente - voll >= 0.3
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: segmente }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-3.5 flex-1 rounded-[3px] ${
|
||||
i < voll ? 'segment-gluehen' : i === voll && halb ? 'bg-gold/45' : 'bg-white/8'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Ein schmaler Füllbalken (Speicher): Anteil belegt, Farbe nach Lage. */
|
||||
export function FuellBalken({ anteil, ton }: { anteil: number; ton: 'gold' | 'warn' | 'rot' }) {
|
||||
const farbe = ton === 'gold' ? 'from-gold-tief to-gold-hell' : ton === 'warn' ? 'from-warn to-warn' : 'from-rot to-rot'
|
||||
return (
|
||||
<div className="h-1.5 w-full overflow-hidden rounded-full bg-white/8">
|
||||
<div className={`h-full rounded-full bg-gradient-to-r ${farbe} transition-all`} style={{ width: `${Math.max(0, Math.min(100, anteil * 100))}%` }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Kicker({ text }: { text: string }) {
|
||||
return <h2 className="font-mono text-[10px] font-semibold tracking-[0.22em] text-gold/80">{text}</h2>
|
||||
}
|
||||
|
||||
/** Ein richtiger Schalter statt einer nackten Checkbox. */
|
||||
export function Schalter({ an, aufWechsel, label }: { an: boolean; aufWechsel: (an: boolean) => void; label: string }) {
|
||||
return (
|
||||
<button onClick={() => aufWechsel(!an)} className="flex items-center gap-3 text-left" role="switch" aria-checked={an}>
|
||||
<span
|
||||
className={`relative inline-block h-5 w-9 flex-none rounded-full transition-colors ${
|
||||
an ? 'bg-gradient-to-b from-gold-hell to-gold-tief' : 'bg-white/12'
|
||||
}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 h-4 w-4 rounded-full bg-schnee shadow transition-all ${an ? 'left-[18px]' : 'left-0.5'}`} />
|
||||
</span>
|
||||
<span className="text-xs leading-5 text-dunst">{label}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
/** Eine Einstellungs-Karte: Kicker, ein Satz Einordnung, dann die Felder. */
|
||||
export function SektionsKarte({
|
||||
id,
|
||||
titel,
|
||||
intro,
|
||||
children,
|
||||
}: {
|
||||
id: string
|
||||
titel: string
|
||||
intro: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="scroll-mt-4 rounded-2xl border border-white/10 bg-karte/50 p-5">
|
||||
<Kicker text={titel} />
|
||||
<p className="mt-1.5 max-w-xl text-xs leading-5 text-nebel">{intro}</p>
|
||||
<div className="mt-4 space-y-3">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
/** Kleiner Status-Punkt für Schlüssel-Felder: hinterlegt oder leer. */
|
||||
export function HinterlegtPunkt({ wert }: { wert: string }) {
|
||||
return (
|
||||
<span className={`ml-2 font-mono text-[10px] ${wert.length > 0 ? 'text-gruen' : 'text-nebel'}`}>
|
||||
{wert.length > 0 ? '● hinterlegt' : '○ fehlt'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export function Feld({
|
||||
name,
|
||||
wert,
|
||||
hinweis,
|
||||
geheim,
|
||||
platzhalter,
|
||||
aufAendern,
|
||||
}: {
|
||||
name: string
|
||||
wert: string
|
||||
hinweis?: string
|
||||
geheim?: boolean
|
||||
platzhalter?: string
|
||||
aufAendern: (wert: string) => void
|
||||
}) {
|
||||
const [entwurf, setEntwurf] = useState(wert)
|
||||
useEffect(() => setEntwurf(wert), [wert])
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="text-xs font-semibold text-dunst">{name}</span>
|
||||
{hinweis !== undefined && <span className="ml-2 text-xs text-nebel">{hinweis}</span>}
|
||||
<input
|
||||
type={geheim === true ? 'password' : 'text'}
|
||||
value={entwurf}
|
||||
placeholder={platzhalter}
|
||||
onChange={(e) => setEntwurf(e.target.value)}
|
||||
onBlur={() => {
|
||||
if (entwurf !== wert) aufAendern(entwurf)
|
||||
}}
|
||||
className={FELD_KLASSE}
|
||||
/>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
/** Ein Pfad-Feld mit Durchsuchen (Ordner oder Programm) — die echten
|
||||
* Windows-Dialoge, keine nachgebauten (§ 7). */
|
||||
export function PfadFeld({
|
||||
name,
|
||||
wert,
|
||||
hinweis,
|
||||
art,
|
||||
dialogTitel,
|
||||
aufAendern,
|
||||
}: {
|
||||
name: string
|
||||
wert: string
|
||||
hinweis?: string
|
||||
art: 'ordner' | 'programm'
|
||||
dialogTitel: string
|
||||
aufAendern: (wert: string) => void
|
||||
}) {
|
||||
const waehlen = async (): Promise<void> => {
|
||||
const gewaehlt = art === 'ordner' ? await window.rippy.ordnerWaehlen(dialogTitel) : await window.rippy.dateiWaehlen(dialogTitel)
|
||||
if (gewaehlt !== null) aufAendern(gewaehlt)
|
||||
}
|
||||
return (
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Feld name={name} wert={wert} hinweis={hinweis} aufAendern={aufAendern} />
|
||||
</div>
|
||||
<button onClick={() => void waehlen()} className={`${KNOPF_LEISE} py-2`}>
|
||||
Durchsuchen …
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Nur ein Klick, der WIRKLICH auf der Hintergrundfläche begann, schließt
|
||||
* einen Dialog.
|
||||
*
|
||||
* Commander-Fund (01.09.2026): „es gibt einen kleinen bug im UI wenn man
|
||||
* selbst den titel sucht das suchfenster schließt sich dann einfach."
|
||||
* Der Grund ist eine bekannte Falle: Wer im Eingabefeld Text markiert und
|
||||
* dabei über den Dialogrand hinauszieht, drückt INNEN und lässt AUSSEN
|
||||
* los. Der Browser meldet als Ziel des Klicks dann den gemeinsamen
|
||||
* Vorfahren — die Hintergrundfläche. Ein reiner onClick-Horcher darauf
|
||||
* schließt den Dialog also mitten im Tippen.
|
||||
*
|
||||
* Deshalb wird der Anfang gemerkt: Nur wenn Drücken UND Loslassen auf der
|
||||
* Fläche selbst passierten, ist es ein Klick daneben. */
|
||||
export function useHintergrundKlick(schliessen: () => void): {
|
||||
onMouseDown: (e: React.MouseEvent) => void
|
||||
onClick: (e: React.MouseEvent) => void
|
||||
} {
|
||||
const begannDraussen = useRef(false)
|
||||
return {
|
||||
onMouseDown: (e) => {
|
||||
begannDraussen.current = e.target === e.currentTarget
|
||||
},
|
||||
onClick: (e) => {
|
||||
if (begannDraussen.current && e.target === e.currentTarget) schliessen()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/** Der Rahmen jedes Dialogs: abgedunkelte Bühne, Karte in der Mitte. */
|
||||
export function DialogRahmen({
|
||||
schliessen,
|
||||
breite,
|
||||
children,
|
||||
}: {
|
||||
schliessen: () => void
|
||||
breite: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const hintergrund = useHintergrundKlick(schliessen)
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm" {...hintergrund}>
|
||||
<div
|
||||
className={`max-h-[85vh] w-full ${breite} overflow-y-auto rounded-2xl border border-white/12 bg-buehne p-5 shadow-2xl shadow-black/60`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
// § 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-white/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-white/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-white/15 px-4 py-1.5 text-xs text-dunst hover:bg-white/5">
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
</DialogRahmen>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,331 @@
|
||||
// ── Auswahl: WAS soll gerippt werden? (§ 6.2) ───────────────────────────
|
||||
// Bis zum 01.09.2026 rippte Rippy IMMER alles — Trailer, Werbung und
|
||||
// Alterskennzeichen inklusive. Der Info-Lauf dauert 20–120 s, deshalb
|
||||
// beginnt er erst hier und nicht schon beim Einlegen.
|
||||
// 5.4.0: Sprachen je Titel, Staffel/Folge von Hand, Zielpfad-Vorschau.
|
||||
// 5.5.0: Platz-Prüfung vor dem Rip und der Serien-Merker (Folge von Disc 1
|
||||
// zählt auf Disc 2 weiter).
|
||||
import { useState } from 'react'
|
||||
import { zielVorschau } from '../../gemeinsam/ablagepfad'
|
||||
import { platzUrteil } from '../../gemeinsam/platz'
|
||||
import type {
|
||||
DiscInfoStand,
|
||||
DiscTitelVorschlag,
|
||||
GeraeteInfo,
|
||||
SpeicherStand,
|
||||
SprachEintrag,
|
||||
TitelRolle,
|
||||
TitelStand,
|
||||
} from '../../gemeinsam/nachrichten'
|
||||
import { DialogRahmen, KNOPF_GOLD, dauerText, gb, gbKurz, sprachenVorbelegt } from '../bausteine'
|
||||
import { ripStarten } from '../kernverbindung'
|
||||
|
||||
/** Sprach-Chips eines Titels — anklickbar, außerhalb des Auswahl-Labels
|
||||
* (ein Knopf IM Label würde die Checkbox mit umschalten). */
|
||||
function SprachChips({
|
||||
name,
|
||||
vorhanden,
|
||||
gewaehlt,
|
||||
aufWechsel,
|
||||
}: {
|
||||
name: string
|
||||
vorhanden: readonly SprachEintrag[]
|
||||
gewaehlt: readonly string[]
|
||||
aufWechsel: (lang: string) => void
|
||||
}) {
|
||||
if (vorhanden.length === 0) return null
|
||||
return (
|
||||
<span className="inline-flex flex-wrap items-center gap-1">
|
||||
<span className="mr-0.5 font-mono text-[10px] tracking-wider text-nebel">{name}</span>
|
||||
{vorhanden.map((s) => {
|
||||
const an = gewaehlt.includes(s.lang)
|
||||
return (
|
||||
<button
|
||||
key={s.lang}
|
||||
type="button"
|
||||
onClick={() => aufWechsel(s.lang)}
|
||||
className={`rounded-md border px-1.5 py-0.5 font-mono text-[10.5px] ${
|
||||
an ? 'border-gold/50 bg-gold/15 text-gold-hell' : 'border-white/12 text-nebel hover:text-dunst'
|
||||
}`}
|
||||
title={`${s.sprache}${s.spuren > 1 ? ` (${s.spuren} Spuren)` : ''}`}
|
||||
>
|
||||
{an ? '✓ ' : ''}
|
||||
{s.lang}
|
||||
{s.spuren > 1 ? `×${s.spuren}` : ''}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export function TitelWahlDialog({
|
||||
id,
|
||||
typ,
|
||||
stand,
|
||||
info,
|
||||
einstellungen,
|
||||
regel,
|
||||
speicher,
|
||||
schliessen,
|
||||
}: {
|
||||
id: string
|
||||
typ: GeraeteInfo['typ']
|
||||
stand: TitelStand | undefined
|
||||
info: DiscInfoStand | undefined
|
||||
einstellungen: Record<string, string>
|
||||
/** Klartext der Aufbewahrungs-Regel — damit klar ist, was mit dem
|
||||
* Roh-Material passiert. */
|
||||
regel: string
|
||||
speicher: SpeicherStand | null
|
||||
schliessen: () => void
|
||||
}) {
|
||||
const [gewaehlt, setGewaehlt] = useState<Set<number> | null>(null)
|
||||
// Eigene Rollen-Wahl je Titel; was hier nicht drinsteht, behaelt Rippys
|
||||
// Vorschlag ('hauptfilm' beim Film, 'folge' bei der Serie, sonst 'extra').
|
||||
const [rollen, setRollen] = useState<Record<number, TitelRolle>>({})
|
||||
// Sprachen je Titel (5.4.0): Was hier nicht drinsteht, ist vorbelegt
|
||||
// (Einstellung, soweit der Titel sie hat — sonst alles, was er hat).
|
||||
const [sprachen, setSprachen] = useState<Record<number, { audio: string[]; untertitel: string[] }>>({})
|
||||
// Staffel und erste Folge von Hand (5.4.0) — die Staffel kommt von der
|
||||
// Disc, die erste Folge vom Serien-Merker (5.5.0: die vorige Disc dieser
|
||||
// Serie) oder vom Nutzer („auf Disc 2 sind 3–4").
|
||||
const merker = info?.serienMerker ?? null
|
||||
const merkerGilt = merker !== null && (info?.discNr === null || info === undefined || (info.discNr ?? 1) > 1)
|
||||
const [staffel, setStaffel] = useState<string>(
|
||||
info !== undefined && info.staffel !== null ? String(info.staffel) : merker !== null ? String(merker.staffel) : '',
|
||||
)
|
||||
const [ersteFolge, setErsteFolge] = useState(merkerGilt && merker !== null ? String(merker.naechsteFolge) : '')
|
||||
// Rippys Vorauswahl gilt, bis der Nutzer sie anfasst.
|
||||
const aktiv = gewaehlt ?? new Set((stand?.titel ?? []).filter((t) => t.gewaehlt).map((t) => t.nr))
|
||||
const rolleVon = (t: DiscTitelVorschlag): TitelRolle => rollen[t.nr] ?? t.rolle
|
||||
const sprachenVon = (t: DiscTitelVorschlag): { audio: string[]; untertitel: string[] } =>
|
||||
sprachen[t.nr] ?? {
|
||||
audio: sprachenVorbelegt(t.sprachen.audio, einstellungen['audioSprachen'] ?? ''),
|
||||
untertitel: sprachenVorbelegt(t.sprachen.untertitel, einstellungen['untertitelSprachen'] ?? ''),
|
||||
}
|
||||
const sprachWechsel = (t: DiscTitelVorschlag, art: 'audio' | 'untertitel', lang: string): void => {
|
||||
const jetzt = sprachenVon(t)
|
||||
const liste = jetzt[art].includes(lang) ? jetzt[art].filter((l) => l !== lang) : [...jetzt[art], lang]
|
||||
setSprachen({ ...sprachen, [t.nr]: { ...jetzt, [art]: liste } })
|
||||
}
|
||||
const umschalten = (nr: number): void => {
|
||||
const neu = new Set(aktiv)
|
||||
if (neu.has(nr)) neu.delete(nr)
|
||||
else neu.add(nr)
|
||||
setGewaehlt(neu)
|
||||
}
|
||||
const alle = stand?.titel ?? []
|
||||
const gewaehlteTitel = alle.filter((t) => aktiv.has(t.nr))
|
||||
const gesamtBytes = gewaehlteTitel.reduce((s, t) => s + t.groesseBytes, 0)
|
||||
const alsSerie = gewaehlteTitel.some((t) => rolleVon(t) === 'folge')
|
||||
const hauptTitel = gewaehlteTitel.filter((t) => rolleVon(t) !== 'extra').length
|
||||
const extras = gewaehlteTitel.filter((t) => rolleVon(t) === 'extra').length
|
||||
const zahlOderNull = (text: string, mindestens: number): number | null => {
|
||||
const n = Number(text.trim())
|
||||
return text.trim().length > 0 && Number.isInteger(n) && n >= mindestens ? n : null
|
||||
}
|
||||
const staffelZahl = zahlOderNull(staffel, 0)
|
||||
const folgeZahl = zahlOderNull(ersteFolge, 1)
|
||||
const vorschau = zielVorschau({
|
||||
ablage: einstellungen['ablage'] ?? 'Videos\\Rippy',
|
||||
alsSerie,
|
||||
titel: info?.titel ?? '',
|
||||
jahr: info?.jahr ?? null,
|
||||
staffel: staffelZahl,
|
||||
ersteFolge: folgeZahl,
|
||||
hauptTitel,
|
||||
extras,
|
||||
vorgangsName: `${typ}-<Zeitstempel>`,
|
||||
})
|
||||
// Platz-Prüfung (5.5.0): gegen den Arbeitsordner — dort landen Roh und Encode.
|
||||
const komprimiert = einstellungen['transcodeEnabled'] !== 'false'
|
||||
const platz = speicher !== null && speicher.arbeit.ok ? platzUrteil(speicher.arbeit.freiBytes, gesamtBytes, komprimiert) : { text: '', hart: false }
|
||||
|
||||
return (
|
||||
<DialogRahmen schliessen={schliessen} breite="max-w-3xl">
|
||||
<h3 className="font-display text-xl font-bold text-schnee">Was soll gerippt werden?</h3>
|
||||
|
||||
{stand === undefined || stand.laeuft ? (
|
||||
<p className="mt-4 font-mono text-xs text-nebel">
|
||||
Rippy liest die Titel der Disc … das dauert bis zu zwei Minuten. Solange dreht das Laufwerk.
|
||||
</p>
|
||||
) : stand.fehler.length > 0 ? (
|
||||
<p className="mt-4 font-mono text-xs text-rot">✗ {stand.fehler}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className={`mt-1 text-xs ${stand.unsicher ? 'text-warn' : 'text-dunst'}`}>
|
||||
{stand.unsicher ? '⚠ ' : ''}
|
||||
{stand.einordnung}
|
||||
</p>
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<button
|
||||
onClick={() => setGewaehlt(new Set(alle.filter((t) => t.gewaehlt).map((t) => t.nr)))}
|
||||
className="rounded-lg border border-gold/40 bg-gold/12 px-2.5 py-1 text-[11px] text-gold-hell"
|
||||
>
|
||||
Rippys Vorschlag
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setGewaehlt(
|
||||
// Alles Sehenswerte: Hauptinhalt und Zugaben, aber weder
|
||||
// Sammeltitel noch Logos/Warnungen.
|
||||
new Set(alle.filter((t) => !t.grund.startsWith('Sammeltitel') && !t.grund.startsWith('zu kurz')).map((t) => t.nr)),
|
||||
)
|
||||
}
|
||||
className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee"
|
||||
>
|
||||
Hauptinhalt + Extras
|
||||
</button>
|
||||
<button onClick={() => setGewaehlt(new Set(alle.map((t) => t.nr)))} className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Alles
|
||||
</button>
|
||||
<button onClick={() => setGewaehlt(new Set())} className="rounded-lg border border-white/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Nichts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-1">
|
||||
{alle.map((t) => {
|
||||
const an = aktiv.has(t.nr)
|
||||
const wahl = sprachenVon(t)
|
||||
return (
|
||||
<div key={t.nr} className={`rounded-lg border ${an ? 'border-gold/40 bg-gold/8' : 'border-white/8 bg-samt/40'}`}>
|
||||
<label className="flex cursor-pointer items-center gap-3 p-2">
|
||||
<input type="checkbox" checked={an} onChange={() => umschalten(t.nr)} className="accent-[oklch(0.83_0.11_75)]" />
|
||||
<span className="w-16 flex-none font-mono text-[11px] text-nebel">Titel {t.nr}</span>
|
||||
<span className="w-24 flex-none font-mono text-xs text-schnee">{dauerText(t.dauerS)}</span>
|
||||
<span className="w-20 flex-none font-mono text-[11px] text-dunst">{gb(t.groesseBytes)}</span>
|
||||
<span className="hidden w-20 flex-none font-mono text-[11px] text-nebel sm:inline">{t.kapitel} Kap.</span>
|
||||
{an ? (
|
||||
<select
|
||||
value={rolleVon(t)}
|
||||
onChange={(e) => setRollen({ ...rollen, [t.nr]: e.target.value as TitelRolle })}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex-none rounded-lg border border-white/15 bg-samt/70 px-2 py-0.5 text-[11px] text-dunst"
|
||||
title="Bestimmt, WOHIN der Titel abgelegt wird"
|
||||
>
|
||||
<option value="hauptfilm">Hauptfilm</option>
|
||||
<option value="extra">Extra</option>
|
||||
<option value="folge">Folge</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="min-w-0 flex-1 truncate text-[11px] text-nebel">{t.grund}</span>
|
||||
)}
|
||||
</label>
|
||||
{/* Sprachen je Titel (5.4.0): Was der Info-Lauf an DIESEM
|
||||
Titel gemessen hat — anhaken, was in die Datei soll.
|
||||
Der Commander-Fall: japanischer Ton, deutsche Untertitel. */}
|
||||
{an && (t.sprachen.audio.length > 0 || t.sprachen.untertitel.length > 0) && (
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-white/8 px-2 py-1.5 pl-9">
|
||||
<SprachChips name="TON" vorhanden={t.sprachen.audio} gewaehlt={wahl.audio} aufWechsel={(lang) => sprachWechsel(t, 'audio', lang)} />
|
||||
<SprachChips name="UNTERTITEL" vorhanden={t.sprachen.untertitel} gewaehlt={wahl.untertitel} aufWechsel={(lang) => sprachWechsel(t, 'untertitel', lang)} />
|
||||
{wahl.audio.length === 0 && t.sprachen.audio.length > 0 && (
|
||||
<span className="font-mono text-[10.5px] text-warn">kein Ton gewählt — HandBrake nimmt die erste Spur</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{alle.length === 0 && <p className="font-mono text-xs text-warn">Die Disc gab keine Titel her.</p>}
|
||||
</div>
|
||||
|
||||
{alsSerie && (
|
||||
<div className="mt-3 flex flex-wrap items-end gap-3 rounded-xl border border-white/8 bg-samt/40 p-3">
|
||||
<label className="block">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">STAFFEL</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={staffel}
|
||||
onChange={(e) => setStaffel(e.target.value)}
|
||||
placeholder={info !== undefined && info.staffel !== null ? String(info.staffel) : '1'}
|
||||
className="mt-1 block w-20 rounded-lg border border-white/12 bg-buehne px-2 py-1 font-mono text-xs text-schnee"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">AB FOLGE</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={ersteFolge}
|
||||
onChange={(e) => setErsteFolge(e.target.value)}
|
||||
placeholder="automatisch"
|
||||
className="mt-1 block w-28 rounded-lg border border-white/12 bg-buehne px-2 py-1 font-mono text-xs text-schnee"
|
||||
/>
|
||||
</label>
|
||||
<p className="min-w-[200px] flex-1 text-[11px] leading-4 text-nebel">
|
||||
{merkerGilt && merker !== null
|
||||
? `Serien-Merker: Die vorige Disc dieser Serie endete mit Folge ${merker.naechsteFolge - 1} (${merker.wann.slice(0, 10)}) — Rippy zählt ab ${merker.naechsteFolge} weiter. Stimmt das nicht, ändere die Zahl.`
|
||||
: 'Leer heißt: Rippy ordnet die Folgen über die TMDb-Laufzeiten zu, und nur, wenn es eindeutig ist. Weißt du es besser („auf Disc 2 sind die Folgen 3 und 4"), trag es hier ein — dann zählt Rippy fortlaufend in Disc-Reihenfolge.'}
|
||||
{info !== undefined && info.discNr !== null && ` Die Disc nennt sich selbst Disc ${info.discNr}.`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vorschau (5.4.0): Rolle, Serie, Staffel und Extras entscheiden
|
||||
einiges — zwei Zeilen Zielpfad ersparen Überraschungen. */}
|
||||
<div className="mt-3 rounded-xl border border-white/8 bg-buehne/70 p-3 font-mono text-[11px] leading-5">
|
||||
<p className="text-[10px] tracking-wider text-nebel">LANDET IN</p>
|
||||
<p className="break-all text-gold-hell">{vorschau[0]}</p>
|
||||
<p className="text-dunst">{vorschau[1]}</p>
|
||||
</div>
|
||||
|
||||
{/* Platz-Prüfung (5.5.0): 40 Minuten Lesen sollen nicht an einem
|
||||
vollen Laufwerk scheitern. */}
|
||||
{speicher !== null && speicher.arbeit.ok && (
|
||||
<p className={`mt-2 font-mono text-[11px] ${platz.hart ? 'text-rot' : platz.text.length > 0 ? 'text-warn' : 'text-nebel'}`}>
|
||||
{platz.text.length > 0
|
||||
? `${platz.hart ? '✗' : '⚠'} ${platz.text}`
|
||||
: `Platz: ${gbKurz(speicher.arbeit.freiBytes)} frei im Arbeitsordner — reicht für ${gb(gesamtBytes)} verlustfrei${komprimiert ? ' plus Kompression' : ''}.`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="mt-3 font-mono text-[11px] text-nebel">
|
||||
{aktiv.size} von {alle.length} gewählt · zusammen {gb(gesamtBytes)} verlustfrei
|
||||
{regel.length > 0 ? ` · ${regel}` : ''}
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] text-nebel">
|
||||
{alsSerie
|
||||
? 'Folgen landen unter Serien/… /Season NN. Ohne Vorgabe setzt Rippy die Episoden-Nummern nur, wenn die Laufzeiten eindeutig passen — sonst behalten die Dateien ihre Namen.'
|
||||
: 'Der Hauptfilm landet in seinem eigenen Ordner, Extras daneben im Unterordner „extras" — so lesen Jellyfin, Emby und Kodi sie als Zugaben.'}{' '}
|
||||
Das Laufwerk ist frei, sobald die Roh-Dateien liegen — die Kompression läuft danach im Hintergrund.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mt-5 flex justify-between gap-2">
|
||||
<button onClick={schliessen} className="rounded-lg border border-white/15 px-4 py-1.5 text-xs text-dunst hover:text-schnee">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
ripStarten(
|
||||
id,
|
||||
gewaehlteTitel.map((t) => {
|
||||
const wahl = sprachenVon(t)
|
||||
return {
|
||||
nr: t.nr,
|
||||
rolle: rolleVon(t),
|
||||
dauerS: t.dauerS,
|
||||
groesseBytes: t.groesseBytes,
|
||||
audioSprachen: wahl.audio,
|
||||
untertitelSprachen: wahl.untertitel,
|
||||
}
|
||||
}),
|
||||
{ staffel: alsSerie ? staffelZahl : null, ersteFolge: alsSerie ? folgeZahl : null },
|
||||
)
|
||||
schliessen()
|
||||
}}
|
||||
disabled={aktiv.size === 0 || stand === undefined || stand.laeuft || platz.hart}
|
||||
className={KNOPF_GOLD}
|
||||
title={platz.hart ? platz.text : ''}
|
||||
>
|
||||
{aktiv.size === 1 ? 'Diesen Titel rippen' : `${aktiv.size} Titel rippen`}
|
||||
</button>
|
||||
</div>
|
||||
</DialogRahmen>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
// ── Erst-Einrichtung (§ 6.9): nach der Installation, im Programm ────────
|
||||
// Zwei Regeln aus dem alten Setup: NUR ein Fehler blockiert (kein
|
||||
// Laufwerk ist eine WARNUNG — eine reine Komprimier-Maschine ist ein
|
||||
// vorgesehener Betriebsfall), und Erfolg wird am BESTAND gemessen.
|
||||
// 5.5.0: dieselben Bausteine wie die Einstellungen (Commander: „All diese
|
||||
// Dinge müssen auch in den FirstRun mit rein") — Ablage und Arbeitsordner,
|
||||
// Werkzeuge mit Durchsuchen, Kompression mit Sprach-Auswahl, TMDb,
|
||||
// Benachrichtigung, Automatik und Roh-Regel. Dazu der Poster-Hintergrund.
|
||||
import { useEffect, useState } from 'react'
|
||||
import { DEFAULT_HB_PRESET, presetEmpfehlung } from '../../gemeinsam/preset-empfehlung'
|
||||
import { Badge, FELD_KLASSE, Feld, KNOPF_GOLD, KNOPF_LEISE, PfadFeld, Schalter, gbKurz } from '../bausteine'
|
||||
import { SprachAuswahl } from '../einstellungen/SprachAuswahl'
|
||||
import { benachrichtigungTesten, einstellungSetzen, posterLaden, speicherLaden, type Verbindung } from '../kernverbindung'
|
||||
import { PosterHintergrund } from './PosterHintergrund'
|
||||
|
||||
const SCHRITTE = ['Willkommen', 'Prüfung', 'Ordner', 'Qualität', 'Titel', 'Meldungen', 'Automatik', 'Fertig']
|
||||
|
||||
export function ErstEinrichtung({ verbindung }: { verbindung: Verbindung }) {
|
||||
const [schritt, setSchritt] = useState(0)
|
||||
const werte = verbindung.einstellungen
|
||||
const werkzeuge = verbindung.werkzeuge
|
||||
const speicher = verbindung.speicher
|
||||
const setzen = einstellungSetzen
|
||||
const makemkvFehlt = werkzeuge !== null && werkzeuge.makemkvcon.length === 0
|
||||
const tmdbDa = (werte['tmdbApiKey'] ?? '').length > 0
|
||||
|
||||
// Poster, sobald ein TMDb-Schlüssel da ist — auch, wenn er gerade erst
|
||||
// eingetragen wurde.
|
||||
useEffect(() => {
|
||||
if (tmdbDa) posterLaden()
|
||||
}, [tmdbDa])
|
||||
useEffect(() => {
|
||||
speicherLaden()
|
||||
}, [schritt])
|
||||
|
||||
const pruefzeilen: Array<{ ok: boolean | null; pflicht: boolean; text: string }> = [
|
||||
{
|
||||
ok: werkzeuge === null ? null : werkzeuge.makemkvcon.length > 0,
|
||||
pflicht: true,
|
||||
text:
|
||||
werkzeuge === null
|
||||
? 'MakeMKV wird gesucht …'
|
||||
: werkzeuge.makemkvcon.length > 0
|
||||
? `MakeMKV gefunden: ${werkzeuge.makemkvcon}`
|
||||
: 'MakeMKV FEHLT — ohne makemkvcon kann Rippy keine Video-Disc lesen. Von makemkv.com/download installieren, dann findet Rippy es von selbst — oder unten den Pfad wählen.',
|
||||
},
|
||||
{
|
||||
ok: werkzeuge === null ? null : werkzeuge.handbrake.length > 0,
|
||||
pflicht: false,
|
||||
text: werkzeuge === null ? 'HandBrakeCLI wird gesucht …' : werkzeuge.handbrake.length > 0 ? `HandBrakeCLI dabei: ${werkzeuge.handbrake}` : 'HandBrakeCLI fehlt — Rippen geht, Komprimieren nicht.',
|
||||
},
|
||||
{
|
||||
ok: werkzeuge === null ? null : werkzeuge.flac.length > 0,
|
||||
pflicht: false,
|
||||
text: werkzeuge === null ? 'FLAC wird gesucht …' : werkzeuge.flac.length > 0 ? `FLAC dabei: ${werkzeuge.flac}` : 'FLAC fehlt — nur für Audio-CDs nötig.',
|
||||
},
|
||||
{
|
||||
ok: verbindung.laufwerke.length > 0 ? true : null,
|
||||
pflicht: false,
|
||||
text:
|
||||
verbindung.laufwerke.length > 0
|
||||
? `${verbindung.laufwerke.length} optisches Laufwerk gefunden (${verbindung.laufwerke.map((l) => l.id + ':').join(', ')})`
|
||||
: 'Kein optisches Laufwerk — nur eine Warnung: Eine reine Komprimier-Maschine ist ein vorgesehener Betriebsfall.',
|
||||
},
|
||||
]
|
||||
|
||||
// Was Rippy an DIESER Maschine gemessen hat — die Grundlage der
|
||||
// Preset-Empfehlung (Commander-Fund 01.09.2026: sie war unsichtbar).
|
||||
const backends = werkzeuge?.backends ?? []
|
||||
const presets = werkzeuge?.presets ?? []
|
||||
const nurCpu = backends.length > 0 && backends.every((b) => b.startsWith('cpu'))
|
||||
const EMPFEHLUNGEN: ReadonlyArray<readonly [string, string]> = [
|
||||
['DVD', 'dvd'],
|
||||
['Blu-ray', 'bluray'],
|
||||
['4K-UHD', 'uhd'],
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<PosterHintergrund pfade={verbindung.poster} />
|
||||
<div className="relative mx-auto max-w-2xl space-y-7 rounded-2xl border border-white/10 bg-buehne/80 p-6 pt-5 shadow-2xl shadow-black/60 backdrop-blur">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SCHRITTE.map((name, i) => (
|
||||
<span
|
||||
key={name}
|
||||
className={`rounded-full px-3 py-1 text-xs ${i === schritt ? 'border border-gold/40 bg-gold/15 text-gold-hell' : i < schritt ? 'text-gruen' : 'text-nebel'}`}
|
||||
>
|
||||
{i + 1} {name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{schritt === 0 && (
|
||||
<div className="space-y-3 text-sm text-dunst">
|
||||
<h2 className="font-display text-3xl font-bold text-schnee">Willkommen bei Rippy</h2>
|
||||
<p>Rippy sichert deine DVDs, Blu-rays und Audio-CDs — erst verlustfrei, dann komprimiert.</p>
|
||||
<p>Disc rein genügt: Rippy erkennt, was drauf ist, und startet bei sicherer Erkennung von selbst.</p>
|
||||
<p>Fertige Filme landen so abgelegt, dass Jellyfin, Emby, Kodi und Plex sie sofort erkennen.</p>
|
||||
<p>Rippy prüft gleich seine Werkzeuge und fragt dich danach ein paar Dinge: wohin, wie schnell, woher die Titel kommen, wie es sich meldet. Dauert zwei Minuten — ändern kannst du alles später.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 1 && (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
{pruefzeilen.map((zeile, i) => (
|
||||
<p key={i} className={`font-mono text-xs ${zeile.ok === true ? 'text-gruen' : zeile.ok === null ? 'text-nebel' : zeile.pflicht ? 'text-rot' : 'text-warn'}`}>
|
||||
{zeile.ok === true ? '✓' : zeile.ok === null ? '…' : zeile.pflicht ? '✗' : '⚠'} {zeile.text}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
{makemkvFehlt && (
|
||||
<PfadFeld
|
||||
name="makemkvcon.exe von Hand wählen"
|
||||
hinweis="falls MakeMKV an einem ungewöhnlichen Ort liegt"
|
||||
wert={werte['werkzeug.makemkv'] ?? ''}
|
||||
art="programm"
|
||||
dialogTitel="makemkvcon.exe wählen"
|
||||
aufAendern={(w) => setzen('werkzeug.makemkv', w)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 2 && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-dunst">Wohin sollen fertige Filme, Musik und Abbilder? Ein Netzlaufwerk geht — Rippy baut darin selbst die Struktur.</p>
|
||||
<PfadFeld name="Ablage-Ordner" wert={werte['ablage'] ?? ''} art="ordner" dialogTitel="Ablage-Ordner wählen" aufAendern={(w) => setzen('ablage', w)} />
|
||||
{speicher !== null && speicher.ablage.ok && <p className="font-mono text-[10.5px] text-nebel">{gbKurz(speicher.ablage.freiBytes)} frei von {gbKurz(speicher.ablage.gesamtBytes)}</p>}
|
||||
<p className="text-sm text-dunst">
|
||||
Liegt die Ablage auf einem Server, wähle einen <span className="text-schnee">Arbeitsordner auf einer lokalen Platte</span>: Dort liegen die Roh-Dateien
|
||||
(30 GB und mehr je Blu-ray) und dort rechnet HandBrake. Nur das fertige Ergebnis wandert übers Netz.
|
||||
</p>
|
||||
<PfadFeld
|
||||
name="Arbeitsordner (lokal, optional)"
|
||||
hinweis="leer = unter der Ablage"
|
||||
wert={werte['arbeitsordner'] ?? ''}
|
||||
art="ordner"
|
||||
dialogTitel="Arbeitsordner wählen (lokale Platte)"
|
||||
aufAendern={(w) => setzen('arbeitsordner', w)}
|
||||
/>
|
||||
{speicher !== null && speicher.getrennt && speicher.arbeit.ok && (
|
||||
<p className="font-mono text-[10.5px] text-nebel">{gbKurz(speicher.arbeit.freiBytes)} frei von {gbKurz(speicher.arbeit.gesamtBytes)} — eine Blu-ray braucht rund 50 GB.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 3 && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-dunst">Rippy sichert eine Disc immer erst verlustfrei. Danach kann es eine kleinere Fassung berechnen — die kostet Zeit, spart aber viel Platz.</p>
|
||||
<Schalter an={werte['transcodeEnabled'] !== 'false'} aufWechsel={(an) => setzen('transcodeEnabled', an ? 'true' : 'false')} label="Nach dem Rip automatisch komprimieren" />
|
||||
<div className="rounded-xl border border-white/8 bg-samt/50 p-3">
|
||||
{werkzeuge === null ? (
|
||||
<p className="font-mono text-xs text-nebel">Encoder werden gemessen …</p>
|
||||
) : backends.length === 0 ? (
|
||||
<p className="font-mono text-xs text-warn">Keine Encoder gemessen — ohne HandBrakeCLI bleibt es beim verlustfreien Rip.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">AUF DIESER MASCHINE GEMESSEN:</span>
|
||||
{backends.map((backend) => (
|
||||
<Badge key={backend} text={backend} ton={backend.startsWith('cpu') ? 'grau' : 'blau'} />
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-dunst">Danach wählt Rippy von selbst — Grafikkarte vor CPU, wo es eine gibt:</p>
|
||||
<div className="mt-2 grid gap-2 sm:grid-cols-3">
|
||||
{EMPFEHLUNGEN.map(([name, typ]) => (
|
||||
<div key={typ} className="rounded-lg border border-white/8 bg-buehne/60 p-2">
|
||||
<p className="font-mono text-[10px] tracking-wider text-nebel">{name}</p>
|
||||
<p className="mt-0.5 font-mono text-xs text-gold-hell">{presetEmpfehlung(typ, backends, presets) || DEFAULT_HB_PRESET}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{nurCpu && <p className="mt-2 text-xs text-warn">Nur CPU-Encoder gefunden — das Komprimieren dauert dann deutlich länger. Der verlustfreie Rip ist davon nicht betroffen.</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<SprachAuswahl name="Tonspuren" hinweis="die erste ist deine Sprache" wert={werte['audioSprachen'] ?? ''} aufAendern={(w) => setzen('audioSprachen', w)} />
|
||||
<SprachAuswahl name="Untertitel" hinweis="vorgewählt bei fremdem Ton" wert={werte['untertitelSprachen'] ?? ''} aufAendern={(w) => setzen('untertitelSprachen', w)} />
|
||||
</div>
|
||||
<p className="text-xs text-nebel">Je Disc-Typ ein eigenes Preset geht später unter „Einstellungen → Kompression" — deine Wahl schlägt die Empfehlung immer.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 4 && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-dunst">Woher sollen Titel, Jahr, Poster und Beschreibung kommen? Dafür braucht Rippy einen kostenlosen TMDb-Schlüssel.</p>
|
||||
<Feld name="TMDb-API-Key" hinweis="kostenlos auf themoviedb.org → Einstellungen → API; in zwei Minuten geholt" wert={werte['tmdbApiKey'] ?? ''} aufAendern={(w) => setzen('tmdbApiKey', w)} />
|
||||
{tmdbDa && verbindung.poster.length > 0 && <p className="font-mono text-xs text-gruen">✓ Der Schlüssel funktioniert — die Poster im Hintergrund kommen von TMDb.</p>}
|
||||
<p className="text-xs text-nebel">Ohne Schlüssel rippt Rippy trotzdem — die Filme heißen dann so, wie die Disc sich selbst nennt, und es gibt keine Poster. Nachtragen geht jederzeit unter „Einstellungen → Metadaten".</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 5 && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-dunst">Soll Rippy sich aufs Handy melden, wenn ein Rip fertig ist oder etwas schiefgeht? Windows-Meldungen kommen immer — das hier ist freiwillig.</p>
|
||||
<Feld name="Discord-Webhook" hinweis="Servereinstellungen → Integrationen → Webhooks" geheim wert={werte['discordWebhook'] ?? ''} aufAendern={(w) => setzen('discordWebhook', w)} />
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Feld name="Telegram-Bot-Token" hinweis="von @BotFather" geheim wert={werte['telegramToken'] ?? ''} aufAendern={(w) => setzen('telegramToken', w)} />
|
||||
<Feld name="Telegram-Chat-ID" wert={werte['telegramChatId'] ?? ''} aufAendern={(w) => setzen('telegramChatId', w)} />
|
||||
</div>
|
||||
<button onClick={() => benachrichtigungTesten()} className={KNOPF_LEISE}>
|
||||
Testnachricht schicken
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 6 && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-dunst">Wie selbstständig soll Rippy sein?</p>
|
||||
<Schalter an={werte['automatik'] !== 'aus'} aufWechsel={(an) => setzen('automatik', an ? 'an' : 'aus')} label="Automatik: bei sicherer Erkennung (ab 90 %) nach einem Countdown von selbst rippen — mit Stopp-Knopf" />
|
||||
<label className="block max-w-xs">
|
||||
<span className="text-xs font-semibold text-dunst">Countdown</span>
|
||||
<select value={werte['automatikSekunden'] ?? '30'} onChange={(e) => setzen('automatikSekunden', e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="10">10 Sekunden</option>
|
||||
<option value="30">30 Sekunden (Vorgabe)</option>
|
||||
<option value="60">1 Minute</option>
|
||||
<option value="120">2 Minuten</option>
|
||||
</select>
|
||||
</label>
|
||||
<Schalter an={werte['autoAuswurf'] !== 'false'} aufWechsel={(an) => setzen('autoAuswurf', an ? 'true' : 'false')} label="Disc nach dem Rip auswerfen — die nächste kann rein, während die Kompression läuft" />
|
||||
<label className="block max-w-sm">
|
||||
<span className="text-xs font-semibold text-dunst">Roh-Dateien nach gelungener Kompression</span>
|
||||
<select value={werte['rohAufbewahrung'] ?? '7'} onChange={(e) => setzen('rohAufbewahrung', e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="sofort">sofort löschen</option>
|
||||
<option value="7">nach 7 Tagen löschen (Vorgabe)</option>
|
||||
<option value="14">nach 14 Tagen löschen</option>
|
||||
<option value="30">nach 30 Tagen löschen</option>
|
||||
<option value="behalten">behalten — nur von Hand löschen</option>
|
||||
</select>
|
||||
</label>
|
||||
<p className="text-xs text-nebel">Die Roh-Dateien sind der Grund, warum ein Preset-Wechsel kein Neulesen kostet — und gelöscht wird nur, wenn das fertige Ergebnis nachweislich da ist.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{schritt === 7 && (
|
||||
<div className="space-y-3 text-sm text-dunst">
|
||||
<p>Das war's. Disc einlegen — Rippy meldet sich.</p>
|
||||
<p className="text-xs text-nebel">Rippy lebt im Infobereich neben der Uhr: Fenster zu heißt weiterlaufen, beendet wird über das Tray-Menü.</p>
|
||||
{makemkvFehlt && <p className="text-xs text-rot">Denk an MakeMKV: Ohne makemkvcon bleibt der Video-Weg zu (Einstellungen → Werkzeuge zeigt den Stand, sobald es installiert ist).</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button onClick={() => setSchritt((s) => Math.max(0, s - 1))} disabled={schritt === 0} className="rounded-lg border border-white/15 px-4 py-1.5 text-xs text-dunst hover:text-schnee disabled:opacity-35">
|
||||
Zurück
|
||||
</button>
|
||||
{schritt < SCHRITTE.length - 1 ? (
|
||||
<button onClick={() => setSchritt((s) => s + 1)} className={KNOPF_GOLD}>
|
||||
Weiter
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => setzen('setup.done', 'true')} className={KNOPF_GOLD}>
|
||||
Los geht's
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// Der Poster-Hintergrund der Erst-Einrichtung (5.5.0, Commander: „diverse
|
||||
// Movie Cover die … im Hintergrund in nem Grid langsam von oben nach unten
|
||||
// laufen"). Vor dem TMDb-Schlüssel ein ruhiges Raster leerer Film-Karten,
|
||||
// danach echte Poster beliebter Filme (kern: erkennung.posterLaden). Die
|
||||
// Spalten laufen langsam, jede in eigenem Tempo, die Liste ist verdoppelt,
|
||||
// damit der Lauf nahtlos ist (Keyframes in stil.css: poster-lauf).
|
||||
import { IconDisc, posterUrlGross } from '../bausteine'
|
||||
|
||||
const SPALTEN = 7
|
||||
const JE_SPALTE = 6
|
||||
|
||||
export function PosterHintergrund({ pfade }: { pfade: string[] }) {
|
||||
const spalten: string[][] = Array.from({ length: SPALTEN }, () => [])
|
||||
pfade.forEach((p, i) => spalten[i % SPALTEN].push(p))
|
||||
return (
|
||||
<div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
|
||||
<div className="absolute inset-0 flex gap-4 px-4 opacity-[0.5]">
|
||||
{spalten.map((spalte, i) => {
|
||||
// Auffüllen mit leeren Karten, damit jede Spalte voll ist.
|
||||
const karten: Array<string | null> = [...spalte]
|
||||
while (karten.length < JE_SPALTE) karten.push(null)
|
||||
const doppelt = [...karten, ...karten]
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="poster-spalte flex flex-1 flex-col gap-4"
|
||||
style={{
|
||||
animationDuration: `${70 + (i % 3) * 25}s`,
|
||||
animationDelay: `${-i * 9}s`,
|
||||
marginTop: `${(i % 2) * -120}px`,
|
||||
}}
|
||||
>
|
||||
{doppelt.map((p, j) =>
|
||||
p !== null ? (
|
||||
<img key={j} src={posterUrlGross(p)} alt="" className="aspect-[2/3] w-full rounded-xl object-cover ring-1 ring-gold/25" loading="lazy" />
|
||||
) : (
|
||||
<div key={j} className="flex aspect-[2/3] w-full items-center justify-center rounded-xl bg-gradient-to-br from-[oklch(0.27_0.03_75)] to-[oklch(0.19_0.02_75)] ring-1 ring-gold/30">
|
||||
<IconDisc groesse={28} farbe="oklch(0.6 0.08 75)" />
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{/* Der Verlauf ins Bühnen-Schwarz — die Poster bleiben Kulisse, der
|
||||
Assistent bleibt lesbar. */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-buehne/35 via-buehne/55 to-buehne/90" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
// Die Einstellungen — Sektionswahl links (oder oben im schmalen Fenster),
|
||||
// die Karten rechts. Jede Karte ist eine Datei in Karten.tsx (5.5.0).
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { HauptStatus } from '../../gemeinsam/nachrichten'
|
||||
import type { Verbindung } from '../kernverbindung'
|
||||
import {
|
||||
AblageKarte,
|
||||
AllgemeinKarte,
|
||||
AutomatikKarte,
|
||||
BenachrichtigungKarte,
|
||||
KompressionKarte,
|
||||
MakemkvKarte,
|
||||
MedienserverKarte,
|
||||
MetadatenKarte,
|
||||
RohDateienKarte,
|
||||
UpdateKarte,
|
||||
WerkzeugeKarte,
|
||||
} from './Karten'
|
||||
|
||||
const SEKTIONEN: Array<[string, string]> = [
|
||||
['ablage', 'Ablage'],
|
||||
['kompression', 'Kompression'],
|
||||
['roh', 'Roh-Dateien'],
|
||||
['automatik', 'Automatik'],
|
||||
['metadaten', 'Metadaten'],
|
||||
['makemkv', 'MakeMKV'],
|
||||
['medienserver', 'Medienserver'],
|
||||
['benachrichtigung', 'Benachrichtigung'],
|
||||
['allgemein', 'Allgemein'],
|
||||
['update', 'Update'],
|
||||
['werkzeuge', 'Werkzeuge'],
|
||||
]
|
||||
|
||||
export function Einstellungen({ verbindung, haupt, start }: { verbindung: Verbindung; haupt: HauptStatus | null; start?: string }) {
|
||||
const [aktiv, setAktiv] = useState(start ?? 'ablage')
|
||||
|
||||
const springe = (id: string): void => {
|
||||
setAktiv(id)
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
// „alle unter Roh-Dateien →" aus der Übersicht springt direkt zur Karte.
|
||||
useEffect(() => {
|
||||
if (start !== undefined) setTimeout(() => springe(start), 50)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [start])
|
||||
|
||||
// Schmales Fenster: die Sektionswahl legt sich als Zeile über die Karten.
|
||||
// Ab lg steht sie wieder als mitlaufende Spalte daneben (Commander-Fund
|
||||
// 01.09.2026: „alles gequetscht").
|
||||
return (
|
||||
<div className="flex flex-col gap-5 lg:flex-row lg:gap-8">
|
||||
<nav className="flex flex-row flex-wrap gap-1 lg:sticky lg:top-4 lg:h-fit lg:w-44 lg:flex-none lg:flex-col">
|
||||
{SEKTIONEN.map(([id, name]) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => springe(id)}
|
||||
className={`rounded-lg px-3 py-1.5 text-left text-[13px] ${
|
||||
aktiv === id ? 'border border-gold/40 bg-gold/12 font-semibold text-gold-hell' : 'border border-transparent text-dunst hover:bg-white/5 hover:text-schnee'
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Kein max-w mehr: Der 672-px-Deckel war der Grund, warum in einem
|
||||
breiten Fenster alles links klebte und rechts nichts stand. */}
|
||||
<div className="min-w-0 flex-1 space-y-5">
|
||||
<AblageKarte verbindung={verbindung} />
|
||||
<KompressionKarte verbindung={verbindung} />
|
||||
<RohDateienKarte verbindung={verbindung} aktivFuer={start === 'roh'} />
|
||||
<AutomatikKarte verbindung={verbindung} />
|
||||
<MetadatenKarte verbindung={verbindung} />
|
||||
<MakemkvKarte verbindung={verbindung} />
|
||||
<MedienserverKarte verbindung={verbindung} />
|
||||
<BenachrichtigungKarte verbindung={verbindung} />
|
||||
<AllgemeinKarte verbindung={verbindung} haupt={haupt} />
|
||||
<UpdateKarte verbindung={verbindung} haupt={haupt} />
|
||||
<WerkzeugeKarte verbindung={verbindung} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,656 @@
|
||||
// Die Einstellungs-Karten (5.5.0, je Karte eine Funktion): Ablage,
|
||||
// Kompression, Roh-Dateien, Automatik, Metadaten, MakeMKV, Medienserver,
|
||||
// Benachrichtigung, Allgemein, Update, Werkzeuge. Alle schreiben über
|
||||
// einstellungSetzen in die EINE Quelle (§ 6.7).
|
||||
import { useState } from 'react'
|
||||
import type { GeraeteInfo, HauptStatus, VorgangEintrag } from '../../gemeinsam/nachrichten'
|
||||
import { presetEmpfehlung } from '../../gemeinsam/preset-empfehlung'
|
||||
import {
|
||||
Badge,
|
||||
FELD_KLASSE,
|
||||
Feld,
|
||||
HinterlegtPunkt,
|
||||
KNOPF_LEISE,
|
||||
LAUFENDE_PHASEN,
|
||||
PfadFeld,
|
||||
Schalter,
|
||||
SektionsKarte,
|
||||
TYP_NAMEN,
|
||||
datumKurz,
|
||||
gb,
|
||||
gbKurz,
|
||||
} from '../bausteine'
|
||||
import {
|
||||
benachrichtigungTesten,
|
||||
einstellungSetzen,
|
||||
fremdenOrdnerLoeschen,
|
||||
kompressionAbbrechen,
|
||||
makemkvUpdate,
|
||||
rohAufraeumen,
|
||||
schluesselPruefen,
|
||||
vorgaengeLaden,
|
||||
vorgangNeuKomprimieren,
|
||||
vorgangRohLoeschen,
|
||||
type Verbindung,
|
||||
} from '../kernverbindung'
|
||||
import { phasenTon } from '../uebersicht/VerlaufKarte'
|
||||
import { SprachAuswahl } from './SprachAuswahl'
|
||||
|
||||
const setzen = einstellungSetzen
|
||||
|
||||
export function AblageKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const speicher = verbindung.speicher
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="ablage"
|
||||
titel="ABLAGE"
|
||||
intro="Die Ablage ist, wo Fertiges landet — auch ein Netzlaufwerk. Der Arbeitsordner ist, wo Rippy rechnet: Roh-Dateien und Kompression. Liegt die Ablage auf dem Server, gehört der Arbeitsordner auf eine lokale Platte."
|
||||
>
|
||||
<PfadFeld name="Ablage-Ordner" wert={werte['ablage'] ?? ''} art="ordner" dialogTitel="Ablage-Ordner wählen" aufAendern={(w) => setzen('ablage', w)} />
|
||||
{speicher !== null && speicher.ablage.ok && (
|
||||
<p className="font-mono text-[10.5px] text-nebel">
|
||||
{gbKurz(speicher.ablage.freiBytes)} frei von {gbKurz(speicher.ablage.gesamtBytes)}
|
||||
</p>
|
||||
)}
|
||||
<PfadFeld
|
||||
name="Arbeitsordner (lokal, optional)"
|
||||
hinweis="leer = unter der Ablage; Roh-Dateien und Kompression liegen dann dort"
|
||||
wert={werte['arbeitsordner'] ?? ''}
|
||||
art="ordner"
|
||||
dialogTitel="Arbeitsordner wählen (lokale Platte)"
|
||||
aufAendern={(w) => setzen('arbeitsordner', w)}
|
||||
/>
|
||||
{speicher !== null && speicher.getrennt && speicher.arbeit.ok && (
|
||||
<p className="font-mono text-[10.5px] text-nebel">
|
||||
{gbKurz(speicher.arbeit.freiBytes)} frei von {gbKurz(speicher.arbeit.gesamtBytes)} — eine Blu-ray braucht rund 50 GB.
|
||||
</p>
|
||||
)}
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
<p className="text-dunst">So legt Rippy ab:</p>
|
||||
<p>
|
||||
├─ Filme\Akira (1988)\ <span className="text-nebel/70">— Film, Poster und Infodatei beieinander</span>
|
||||
</p>
|
||||
<p>
|
||||
├─ Serien\Spartacus\Season 01\ <span className="text-nebel/70">— Folgen, wie Jellyfin sie erwartet</span>
|
||||
</p>
|
||||
<p>
|
||||
├─ Musik\ <span className="text-nebel/70">— Audio-CDs als FLAC, benannt nach MusicBrainz</span>
|
||||
</p>
|
||||
<p>
|
||||
├─ ISO\ <span className="text-nebel/70">— unerkannte Discs als 1:1-Abbild</span>
|
||||
</p>
|
||||
<p>
|
||||
└─ roh\ <span className="text-nebel/70">— im Arbeitsordner: verlustfreies Roh-Material, aufgeräumt nach der Regel unter „Roh-Dateien"</span>
|
||||
</p>
|
||||
</div>
|
||||
<Schalter
|
||||
an={werte['autoAuswurf'] !== 'false'}
|
||||
aufWechsel={(an) => setzen('autoAuswurf', an ? 'true' : 'false')}
|
||||
label="Disc nach dem Rip auswerfen — die nächste kann rein, während die Kompression läuft"
|
||||
/>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
function PresetWahl({
|
||||
name,
|
||||
schluessel,
|
||||
wert,
|
||||
presets,
|
||||
empfehlung,
|
||||
}: {
|
||||
name: string
|
||||
schluessel: string
|
||||
wert: string
|
||||
presets: string[]
|
||||
empfehlung: string
|
||||
}) {
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="text-xs font-semibold text-dunst">{name}</span>
|
||||
<select value={wert} onChange={(e) => setzen(schluessel, e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="">{empfehlung.length > 0 ? `automatisch: ${empfehlung}` : 'automatisch'}</option>
|
||||
<option value="keine">NICHT komprimieren (verlustfrei lassen)</option>
|
||||
{presets.map((preset) => (
|
||||
<option key={preset} value={preset}>
|
||||
{preset}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
export function KompressionKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const presets = verbindung.werkzeuge?.presets ?? []
|
||||
const backends = verbindung.werkzeuge?.backends ?? []
|
||||
const empfehlungFuer = (typ: string): string => presetEmpfehlung(typ, backends, presets)
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="kompression"
|
||||
titel="KOMPRESSION"
|
||||
intro="Nach dem verlustfreien Rip rechnet HandBrake die Filme auf Arbeitsgröße — der Rohling bleibt bis zum Erfolg liegen, es geht nie etwas verloren."
|
||||
>
|
||||
{verbindung.werkzeuge !== null && verbindung.werkzeuge.handbrake.length === 0 && (
|
||||
<p className="font-mono text-xs text-warn">⚠ HandBrakeCLI fehlt — Rippen geht, Komprimieren nicht (siehe Werkzeuge).</p>
|
||||
)}
|
||||
<Schalter an={werte['transcodeEnabled'] !== 'false'} aufWechsel={(an) => setzen('transcodeEnabled', an ? 'true' : 'false')} label="Nach dem Rip automatisch komprimieren" />
|
||||
{backends.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">GEMESSENE ENCODER:</span>
|
||||
{backends.map((backend) => (
|
||||
<Badge key={backend} text={backend} ton={backend.startsWith('cpu') ? 'grau' : 'blau'} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<PresetWahl name="DVD" schluessel="transcodePresetDvd" wert={werte['transcodePresetDvd'] ?? ''} presets={presets} empfehlung={empfehlungFuer('dvd')} />
|
||||
<PresetWahl name="Blu-ray" schluessel="transcodePresetBluray" wert={werte['transcodePresetBluray'] ?? ''} presets={presets} empfehlung={empfehlungFuer('bluray')} />
|
||||
<PresetWahl name="4K-UHD" schluessel="transcodePresetUhd" wert={werte['transcodePresetUhd'] ?? ''} presets={presets} empfehlung={empfehlungFuer('uhd')} />
|
||||
</div>
|
||||
<p className="text-[11px] leading-4 text-nebel">
|
||||
„automatisch" nimmt die Empfehlung aus der gemessenen Liste deines HandBrake — auf dieser Maschine die Grafikkarte, wo es sie gibt. Eine eigene Wahl
|
||||
schlägt die Empfehlung immer.
|
||||
</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<SprachAuswahl
|
||||
name="Tonspuren"
|
||||
hinweis="Reihenfolge = Wunschreihenfolge; die erste ist deine Sprache"
|
||||
wert={werte['audioSprachen'] ?? ''}
|
||||
aufAendern={(w) => setzen('audioSprachen', w)}
|
||||
/>
|
||||
<SprachAuswahl name="Untertitel" hinweis="werden vorgewählt, wenn der Ton nicht deine Sprache ist" wert={werte['untertitelSprachen'] ?? ''} aufAendern={(w) => setzen('untertitelSprachen', w)} />
|
||||
</div>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function AutomatikKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const an = werte['automatik'] !== 'aus'
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="automatik"
|
||||
titel="AUTOMATIK"
|
||||
intro="Disc rein genügt: Ist Rippy sicher, was das ist, liest es die Titel und startet nach einem Countdown von selbst — mit seinem Vorschlag. Wo es unsicher ist, wartet es auf dich."
|
||||
>
|
||||
<Schalter an={an} aufWechsel={(a) => setzen('automatik', a ? 'an' : 'aus')} label="Automatik: bei sicherer Erkennung (ab 90 %) von selbst rippen" />
|
||||
<label className="block max-w-xs">
|
||||
<span className="text-xs font-semibold text-dunst">Countdown</span>
|
||||
<select value={werte['automatikSekunden'] ?? '30'} onChange={(e) => setzen('automatikSekunden', e.target.value)} disabled={!an} className={FELD_KLASSE}>
|
||||
<option value="10">10 Sekunden</option>
|
||||
<option value="30">30 Sekunden (Vorgabe)</option>
|
||||
<option value="60">1 Minute</option>
|
||||
<option value="120">2 Minuten</option>
|
||||
</select>
|
||||
</label>
|
||||
<p className="text-[11px] leading-4 text-nebel">
|
||||
Der Countdown steht in der Laufwerks-Kachel, mit „Stopp" und „Jetzt". Eine Disc, die schon einmal gerippt wurde, startet nie von selbst.
|
||||
</p>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function RohDateienKarte({ verbindung, aktivFuer }: { verbindung: Verbindung; aktivFuer?: boolean }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const v = verbindung.vorgaenge
|
||||
const [presetWahl, setPresetWahl] = useState<Record<string, string>>({})
|
||||
const [alleZeigen, setAlleZeigen] = useState(aktivFuer === true)
|
||||
const presets = verbindung.werkzeuge?.presets ?? []
|
||||
const regelWert = werte['rohAufbewahrung'] ?? '7'
|
||||
const phasenText: Record<VorgangEintrag['phase'], string> = {
|
||||
rippt: 'rippt',
|
||||
wartet: 'wartet auf Kompression',
|
||||
komprimiert: 'komprimiert',
|
||||
'legt-ab': 'legt ab',
|
||||
fertig: 'fertig',
|
||||
fehler: 'Fehler',
|
||||
abgebrochen: 'abgebrochen',
|
||||
}
|
||||
const liste = v?.vorgaenge ?? []
|
||||
const sichtbar = alleZeigen ? liste : liste.slice(0, 12)
|
||||
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="roh"
|
||||
titel="ROH-DATEIEN"
|
||||
intro="Jede Blu-ray lässt 30 GB und mehr verlustfreies Roh-Material liegen — genau dafür, dass ein Preset-Wechsel kein Neulesen kostet. Aufgeräumt wird nach Regel, und nur, wenn das fertige Ergebnis nachweislich da ist."
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
|
||||
<label className="block">
|
||||
<span className="text-xs font-semibold text-dunst">Nach gelungener Kompression</span>
|
||||
<select value={regelWert} onChange={(e) => setzen('rohAufbewahrung', e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="sofort">sofort löschen</option>
|
||||
<option value="7">nach 7 Tagen löschen (Vorgabe)</option>
|
||||
<option value="14">nach 14 Tagen löschen</option>
|
||||
<option value="30">nach 30 Tagen löschen</option>
|
||||
<option value="behalten">behalten — nur von Hand löschen</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => rohAufraeumen()} className={`${KNOPF_LEISE} py-2`} title="Die Regel jetzt anwenden, statt auf den täglichen Takt zu warten">
|
||||
Jetzt aufräumen
|
||||
</button>
|
||||
<button onClick={() => vorgaengeLaden()} className={`${KNOPF_LEISE} py-2`} title="Belegung neu messen">
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
{v === null ? (
|
||||
<p>Belegung wird gemessen …</p>
|
||||
) : (
|
||||
<>
|
||||
<p>
|
||||
<span className="text-dunst">Belegung jetzt:</span> <span className="text-gold-hell">{gb(v.rohGesamtBytes)}</span> in{' '}
|
||||
{liste.filter((e) => !e.rohGeloescht).length + v.fremde.length} Roh-Ordnern
|
||||
</p>
|
||||
<p>{v.regel}</p>
|
||||
<p className="text-nebel/70">Unkomprimierte Rips (z. B. 4K verlustfrei) liegen im Zielordner, nicht hier — sie sind nie betroffen.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{liste.length === 0 && v !== null && <p className="font-mono text-xs text-nebel">Noch kein Vorgang — der erste Rip legt hier einen Eintrag an.</p>}
|
||||
<div className="space-y-2">
|
||||
{sichtbar.map((e) => {
|
||||
const ruhig = e.phase === 'fertig' || e.phase === 'fehler' || e.phase === 'abgebrochen'
|
||||
return (
|
||||
<div key={e.id} className="rounded-xl border border-white/8 bg-buehne/60 p-3">
|
||||
<div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
|
||||
<span className="font-display text-[14px] font-bold text-schnee">
|
||||
{e.titel}
|
||||
{e.jahr !== null && <span className="ml-1 font-medium text-dunst">({e.jahr})</span>}
|
||||
</span>
|
||||
<Badge text={phasenText[e.phase]} ton={phasenTon(e.phase)} />
|
||||
<span className="font-mono text-[10.5px] text-nebel">
|
||||
{(TYP_NAMEN[e.typ as GeraeteInfo['typ']] ?? e.typ).toUpperCase()} · {datumKurz(e.begonnen)}
|
||||
{e.titelZahl > 0 && ` · ${e.titelZahl} Titel`}
|
||||
{e.preset.length > 0 && ` · ${e.preset}`}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 font-mono text-[11px] leading-5 text-nebel">
|
||||
<span className="text-dunst">Roh:</span> {e.rohGeloescht ? 'gelöscht' : gb(e.rohBytes)}
|
||||
{e.faelligAm.length > 0 && ` · fällig ${datumKurz(e.faelligAm)}`}
|
||||
{' · '}
|
||||
<span className="text-dunst">Fertig:</span>{' '}
|
||||
{e.phase === 'fertig' ? (
|
||||
<span className="break-all">
|
||||
{e.fertigBytes > 0 ? `${gb(e.fertigBytes)} · ` : ''}
|
||||
{e.zielOrdner}
|
||||
{!e.komprimiert && ' (verlustfrei, ohne Kompression)'}
|
||||
</span>
|
||||
) : (
|
||||
'—'
|
||||
)}
|
||||
</p>
|
||||
{e.fehler.length > 0 && <p className="mt-1 break-all font-mono text-[11px] text-warn">⚠ {e.fehler}</p>}
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
{e.neuKomprimierbar && (
|
||||
<>
|
||||
<select
|
||||
value={presetWahl[e.id] ?? ''}
|
||||
onChange={(ev) => setPresetWahl({ ...presetWahl, [e.id]: ev.target.value })}
|
||||
className="rounded-lg border border-white/15 bg-samt/70 px-2 py-1 text-[11px] text-dunst"
|
||||
title="Preset für die Wiederholung — leer: wie eingestellt"
|
||||
>
|
||||
<option value="">Preset wie eingestellt</option>
|
||||
{presets.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => vorgangNeuKomprimieren(e.id, presetWahl[e.id] ?? '')}
|
||||
className="rounded-lg border border-gold/40 bg-gold/12 px-3 py-1 text-[11px] font-semibold text-gold-hell hover:bg-gold/20"
|
||||
title="Die Roh-Dateien liegen genau dafür da — kein Neulesen der Disc"
|
||||
>
|
||||
Neu komprimieren
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{!e.rohGeloescht && ruhig && (
|
||||
<button onClick={() => vorgangRohLoeschen(e.id)} className="rounded-lg border border-rot/40 bg-rot/10 px-3 py-1 text-[11px] text-rot hover:bg-rot/20" title="Den Roh-Ordner dieses Vorgangs jetzt löschen">
|
||||
Roh-Dateien löschen
|
||||
</button>
|
||||
)}
|
||||
{e.phase === 'fertig' && e.zielOrdner.length > 0 && (
|
||||
<button onClick={() => void window.rippy.ordnerOeffnen(e.zielOrdner)} className="rounded-lg border border-white/15 px-3 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Ordner öffnen
|
||||
</button>
|
||||
)}
|
||||
{(e.phase === 'wartet' || e.phase === 'komprimiert' || e.phase === 'legt-ab') && (
|
||||
<button onClick={() => kompressionAbbrechen(e.id)} className="rounded-lg border border-white/15 px-3 py-1 text-[11px] text-dunst hover:text-rot">
|
||||
Kompression abbrechen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{liste.length > sichtbar.length && (
|
||||
<button onClick={() => setAlleZeigen(true)} className="font-mono text-[10.5px] text-nebel hover:text-dunst">
|
||||
▸ alle {liste.length} Vorgänge zeigen
|
||||
</button>
|
||||
)}
|
||||
|
||||
{v !== null && v.fremde.length > 0 && (
|
||||
<div className="rounded-xl border border-warn/30 bg-warn/5 p-3">
|
||||
<p className="font-mono text-[10.5px] tracking-wider text-warn">ORDNER OHNE VORGANG</p>
|
||||
<p className="mt-1 text-[11px] leading-4 text-nebel">Aus der Zeit vor 5.4.0 oder von Hand hineingelegt — Rippy kennt sie nicht und löscht sie deshalb NIE von selbst.</p>
|
||||
<div className="mt-2 space-y-1">
|
||||
{v.fremde.map((f) => (
|
||||
<div key={f.ordner} className="flex items-center justify-between gap-3">
|
||||
<span className="min-w-0 break-all font-mono text-[11px] text-dunst">
|
||||
{f.ordner} · {gb(f.bytes)}
|
||||
</span>
|
||||
<button onClick={() => fremdenOrdnerLoeschen(f.ordner)} className="flex-none rounded-lg border border-rot/40 bg-rot/10 px-2.5 py-0.5 text-[10.5px] text-rot hover:bg-rot/20">
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function MetadatenKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="metadaten"
|
||||
titel="METADATEN"
|
||||
intro="TMDb erkennt Titel, Jahr, Poster, Logo und Beschreibung; OMDb hilft bei Ausreißern nach. Beide Schlüssel sind kostenlos und in zwei Minuten geholt."
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<Feld name="TMDb-API-Key" geheim wert={werte['tmdbApiKey'] ?? ''} aufAendern={(w) => setzen('tmdbApiKey', w)} />
|
||||
<p className="mt-1 font-mono text-[10px] text-nebel">
|
||||
www.themoviedb.org → Einstellungen → API
|
||||
<HinterlegtPunkt wert={werte['tmdbApiKey'] ?? ''} />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Feld name="OMDb-API-Key" geheim wert={werte['omdbApiKey'] ?? ''} aufAendern={(w) => setzen('omdbApiKey', w)} />
|
||||
<p className="mt-1 font-mono text-[10px] text-nebel">
|
||||
www.omdbapi.com/apikey.aspx
|
||||
<HinterlegtPunkt wert={werte['omdbApiKey'] ?? ''} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[11px] leading-4 text-nebel">
|
||||
Ohne Schlüssel rippt Rippy trotzdem — die Filme heißen dann wie das Disc-Label, und „Ändern …" an der Laufwerks-Kachel bleibt ohne Suche.
|
||||
</p>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function MakemkvKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const s = verbindung.schluessel
|
||||
const b = verbindung.beschaffung
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="makemkv"
|
||||
titel="MAKEMKV"
|
||||
intro="MakeMKV liest die Discs. Rippy holt den frei veröffentlichten Beta-Key automatisch aus dem Hersteller-Forum, hinterlegt ihn und fragt MakeMKV selbst, ob er angenommen wird — täglich."
|
||||
>
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3">
|
||||
{s === null ? (
|
||||
<p className="font-mono text-xs text-nebel">Schlüssel wird geprüft …</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="flex items-center gap-2 font-mono text-[10.5px] tracking-wider">
|
||||
<span className={`inline-block h-2 w-2 rounded-full ${s.angenommen === true ? 'bg-gruen' : s.weiterBetrieb ? 'bg-warn' : 'bg-rot'}`} />
|
||||
<span className={s.angenommen === true ? 'text-gruen' : s.weiterBetrieb ? 'text-warn' : 'text-rot'}>
|
||||
{s.angenommen === true ? 'SCHLÜSSEL ANGENOMMEN' : s.weiterBetrieb ? 'BETA-MODUS — RIPS LAUFEN' : 'AUSFALL'}
|
||||
</span>
|
||||
{s.version.length > 0 && <span className="ml-auto text-nebel">MakeMKV {s.version}</span>}
|
||||
</p>
|
||||
<p className="mt-1.5 text-xs leading-5 text-dunst">{s.text}</p>
|
||||
<p className="mt-1 font-mono text-[10px] text-nebel">
|
||||
zuletzt geprüft: {s.geholtAm.slice(0, 16).replace('T', ' ')}
|
||||
{s.gueltigBis.length > 0 && ` · Key gültig bis ${s.gueltigBis}`}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{s !== null && s.angenommen === false && (
|
||||
<button
|
||||
onClick={() => makemkvUpdate()}
|
||||
disabled={b !== null && b.laeuft}
|
||||
className="rounded-lg bg-gradient-to-b from-warn to-[oklch(0.72_0.12_78)] px-3 py-1.5 text-xs font-bold text-buehne shadow-[inset_0_1px_0_oklch(1_0_0/0.35)] hover:brightness-105 disabled:opacity-40"
|
||||
title="Holt den offiziellen Installer über die Quellenkette, prüft ihn und startet ihn — Windows fragt einmal nach Adminrechten."
|
||||
>
|
||||
MakeMKV aktualisieren …
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => schluesselPruefen()} disabled={b !== null && b.laeuft} className={KNOPF_LEISE} title="Forum-Key holen, hinterlegen und MakeMKV selbst fragen, ob er angenommen wird">
|
||||
Schlüssel neu prüfen
|
||||
</button>
|
||||
</div>
|
||||
{b !== null && (
|
||||
<div className="rounded-lg border border-white/10 bg-buehne/70 p-2.5">
|
||||
<p className={`font-mono text-[11px] leading-5 ${b.fehler ? 'text-rot' : b.laeuft ? 'text-gold-hell' : 'text-gruen'}`}>{b.text}</p>
|
||||
{b.laeuft && b.anteil !== null && (
|
||||
<div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-white/8">
|
||||
<div className="h-full rounded-full bg-gradient-to-r from-gold-tief to-gold-hell transition-all" style={{ width: `${Math.round(b.anteil * 100)}%` }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Feld
|
||||
name="Eigener Schlüssel (Dauerlizenz)"
|
||||
hinweis="schlägt den automatischen Beta-Key — leer lassen, wenn keiner gekauft ist"
|
||||
geheim
|
||||
wert={werte['makemkvAppKey'] ?? ''}
|
||||
aufAendern={(w) => setzen('makemkvAppKey', w)}
|
||||
/>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function MedienserverKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="medienserver"
|
||||
titel="MEDIENSERVER"
|
||||
intro="Nach jedem fertigen Rip sagt Rippy deinem Server Bescheid, damit der Film sofort auftaucht — ohne Warten auf den nächsten Bibliotheks-Scan."
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<label className="block">
|
||||
<span className="text-xs font-semibold text-dunst">System</span>
|
||||
<select value={werte['mediaServer'] ?? 'none'} onChange={(e) => setzen('mediaServer', e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="none">keiner</option>
|
||||
<option value="jellyfin">Jellyfin</option>
|
||||
<option value="emby">Emby</option>
|
||||
<option value="kodi">Kodi</option>
|
||||
<option value="plex">Plex (nur Benennung)</option>
|
||||
</select>
|
||||
</label>
|
||||
<Feld name="Adresse" hinweis="http(s)://…" wert={werte['mediaServerUrl'] ?? ''} aufAendern={(w) => setzen('mediaServerUrl', w)} />
|
||||
<Feld name="API-Key" geheim hinweis="Kodi: benutzer:passwort" wert={werte['mediaServerApiKey'] ?? ''} aufAendern={(w) => setzen('mediaServerApiKey', w)} />
|
||||
</div>
|
||||
<p className="text-[11px] leading-4 text-nebel">Bei Plex benennt Rippy nur nach dessen Regeln — angestoßen wird dort nichts. Die Ordnerstruktur aus „Ablage" passt für alle vier.</p>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function BenachrichtigungKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="benachrichtigung"
|
||||
titel="BENACHRICHTIGUNG"
|
||||
intro="Rippy meldet sich aufs Handy, wenn ein Rip oder eine Kompression fertig ist oder etwas schiefgeht — über einen Discord-Webhook oder einen Telegram-Bot. Windows-Meldungen kommen immer."
|
||||
>
|
||||
<Schalter an={werte['benachrichtigungen'] !== 'aus'} aufWechsel={(an) => setzen('benachrichtigungen', an ? 'an' : 'aus')} label="Benachrichtigungen verschicken" />
|
||||
<Feld
|
||||
name="Discord-Webhook"
|
||||
hinweis="Discord → Servereinstellungen → Integrationen → Webhooks → URL kopieren"
|
||||
geheim
|
||||
wert={werte['discordWebhook'] ?? ''}
|
||||
aufAendern={(w) => setzen('discordWebhook', w)}
|
||||
/>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Feld name="Telegram-Bot-Token" hinweis="von @BotFather" geheim wert={werte['telegramToken'] ?? ''} aufAendern={(w) => setzen('telegramToken', w)} />
|
||||
<Feld name="Telegram-Chat-ID" hinweis="deine ID, z. B. von @userinfobot" wert={werte['telegramChatId'] ?? ''} aufAendern={(w) => setzen('telegramChatId', w)} />
|
||||
</div>
|
||||
<button onClick={() => benachrichtigungTesten()} className={KNOPF_LEISE}>
|
||||
Testnachricht schicken
|
||||
</button>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function AllgemeinKarte({ verbindung, haupt }: { verbindung: Verbindung; haupt: HauptStatus | null }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const kern = verbindung.kern
|
||||
const db = kern?.datenbank ?? null
|
||||
const dbText = db === null ? '—' : db.ok ? db.pfad : `FEHLER — ${db.fehler}`
|
||||
return (
|
||||
<SektionsKarte id="allgemein" titel="ALLGEMEIN" intro="Rippy lebt im Infobereich neben der Uhr: Fenster zu heißt weiterlaufen, beendet wird über das Tray-Menü.">
|
||||
<Schalter an={haupt?.autostart === true} aufWechsel={(an) => void window.rippy.autostartSetzen(an)} label="Rippy mit Windows starten (Autostart im Benutzerkonto — kein Dienst, keine Adminrechte)" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button onClick={() => void window.rippy.protokollOeffnen()} className={KNOPF_LEISE} title="Eine Datei je Tag, 14 Tage aufgehoben — Haupt und Kern schreiben hinein">
|
||||
Protokoll öffnen
|
||||
</button>
|
||||
<button onClick={() => void window.rippy.ordnerOeffnen(werte['ablage'] ?? '')} className={KNOPF_LEISE}>
|
||||
Ablage im Explorer
|
||||
</button>
|
||||
{(werte['arbeitsordner'] ?? '').length > 0 && (
|
||||
<button onClick={() => void window.rippy.ordnerOeffnen(werte['arbeitsordner'] ?? '')} className={KNOPF_LEISE}>
|
||||
Arbeitsordner im Explorer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
<p>
|
||||
Rippy v{haupt?.version ?? '…'}
|
||||
{kern !== null && ` · Kern: Node ${kern.nodeVersion} (PID ${kern.pid})`}
|
||||
{haupt !== null && ` · Leine ${haupt.leine.ok ? 'gesetzt' : 'NICHT gesetzt'}`}
|
||||
{verbindung.pongLatenzMs !== null && ` · Antwortzeit ${verbindung.pongLatenzMs} ms`}
|
||||
</p>
|
||||
<p className="break-all">Datenbank: {dbText}</p>
|
||||
<p className="break-all">Protokoll: {haupt?.protokollOrdner ?? '—'}</p>
|
||||
</div>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
export function UpdateKarte({ verbindung, haupt }: { verbindung: Verbindung; haupt: HauptStatus | null }) {
|
||||
// § 6.8: Der Prüf-Knopf ist während eines Rips aus — nicht, weil er
|
||||
// nicht könnte, sondern weil Rippy dann bewusst nicht sucht.
|
||||
const ripLaeuftGerade = Object.values(verbindung.rips).some((r) => LAUFENDE_PHASEN.includes(r.phase))
|
||||
return (
|
||||
<SektionsKarte id="update" titel="UPDATE" intro="Rippy holt neue Fassungen selbst aus dem Gitea — geprüft, geladen, beim nächsten Beenden installiert. Nie mitten in einem Rip oder einer Kompression.">
|
||||
{/* Das Feld „Update-Adresse" ist am 01.09.2026 auf Zuruf des
|
||||
Commanders verschwunden: Updates kommen immer vom Gitea, ein
|
||||
Eingabefeld dafür war nur Ballast. Der Einstellungs-Schlüssel
|
||||
`updateUrl` gilt weiterhin — wer ihn wirklich braucht, setzt
|
||||
ihn in der Datenbank, und § 6.8 prüft ihn wie zuvor (nur
|
||||
https://). */}
|
||||
{haupt !== null && (
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
<p>
|
||||
<span className="text-dunst">Stand:</span> {haupt.update.text}
|
||||
</p>
|
||||
{haupt.update.letzteErfolgreichePruefung.length > 0 && <p>letzte erfolgreiche Prüfung: {haupt.update.letzteErfolgreichePruefung.slice(0, 16).replace('T', ' ')}</p>}
|
||||
{haupt.update.neueVersion.length > 0 && <p className="text-gold-hell">Version {haupt.update.neueVersion} gefunden — die Karte in der Übersicht zeigt, was neu ist.</p>}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={() => void window.rippy.updatePruefen()}
|
||||
disabled={ripLaeuftGerade || haupt?.update.laeuft === true}
|
||||
className={KNOPF_LEISE}
|
||||
title={ripLaeuftGerade ? 'Während eines Rips wird nicht gesucht — das ist Absicht (§ 6.8).' : 'Fragt sofort beim Update-Server nach.'}
|
||||
>
|
||||
{haupt?.update.laeuft === true ? 'sucht …' : 'Jetzt auf Updates prüfen'}
|
||||
</button>
|
||||
</div>
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
|
||||
function WerkzeugZeile({
|
||||
name,
|
||||
pfad,
|
||||
fehlt,
|
||||
pflicht,
|
||||
schluessel,
|
||||
wert,
|
||||
}: {
|
||||
name: string
|
||||
pfad: string | null
|
||||
fehlt: string
|
||||
pflicht: boolean
|
||||
schluessel: string
|
||||
wert: string
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/8 bg-samt/50 p-3">
|
||||
<p className={`break-all font-mono text-xs ${pfad === null ? 'text-nebel' : pfad.length > 0 ? 'text-gruen' : pflicht ? 'text-rot' : 'text-warn'}`}>
|
||||
{name}: {pfad === null ? 'wird gesucht …' : pfad.length > 0 ? pfad : fehlt}
|
||||
</p>
|
||||
<PfadFeld
|
||||
name="Eigener Pfad"
|
||||
hinweis="leer = automatische Suche; ein eingetragener Pfad gilt exakt"
|
||||
wert={wert}
|
||||
art="programm"
|
||||
dialogTitel={`${name} wählen`}
|
||||
aufAendern={(w) => setzen(schluessel, w)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function WerkzeugeKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
const werte = verbindung.einstellungen
|
||||
const backends = verbindung.werkzeuge?.backends ?? []
|
||||
return (
|
||||
<SektionsKarte
|
||||
id="werkzeuge"
|
||||
titel="WERKZEUGE"
|
||||
intro="Rippy findet seine Werkzeuge von allein: mitgeliefert, selbst geholt, installiert oder im PATH — in dieser Reihenfolge. Wer einen eigenen Pfad einträgt, bekommt genau den."
|
||||
>
|
||||
<WerkzeugZeile
|
||||
name="makemkvcon"
|
||||
pfad={verbindung.werkzeuge === null ? null : verbindung.werkzeuge.makemkvcon}
|
||||
fehlt="NICHT GEFUNDEN — MakeMKV von makemkv.com installieren, Rippy findet es danach von allein"
|
||||
pflicht={true}
|
||||
schluessel="werkzeug.makemkv"
|
||||
wert={werte['werkzeug.makemkv'] ?? ''}
|
||||
/>
|
||||
<WerkzeugZeile
|
||||
name="HandBrakeCLI"
|
||||
pfad={verbindung.werkzeuge === null ? null : verbindung.werkzeuge.handbrake}
|
||||
fehlt="nicht gefunden — Rippen geht, Kompression nicht"
|
||||
pflicht={false}
|
||||
schluessel="werkzeug.handbrake"
|
||||
wert={werte['werkzeug.handbrake'] ?? ''}
|
||||
/>
|
||||
<WerkzeugZeile
|
||||
name="flac"
|
||||
pfad={verbindung.werkzeuge === null ? null : verbindung.werkzeuge.flac}
|
||||
fehlt="nicht gefunden — nur für Audio-CDs nötig"
|
||||
pflicht={false}
|
||||
schluessel="werkzeug.flac"
|
||||
wert={werte['werkzeug.flac'] ?? ''}
|
||||
/>
|
||||
{verbindung.werkzeuge !== null && (
|
||||
<p className="font-mono text-[10.5px] text-nebel">
|
||||
HandBrake gemessen: {verbindung.werkzeuge.presets.length} Presets · Encoder: {backends.length > 0 ? backends.join(', ') : '—'}
|
||||
</p>
|
||||
)}
|
||||
</SektionsKarte>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// Die Sprach-Auswahl (5.5.0, Commander: „bei Tonspuren und Untertiteln
|
||||
// können Dropdowns hin") — gewählte Sprachen als Chips in Wunschreihenfolge,
|
||||
// dazu ein Dropdown zum Hinzufügen. Die erste Tonsprache ist die
|
||||
// Wunschsprache (auftrag.ts sprachwahl). Leer heißt „alle".
|
||||
import { SPRACHEN, sprachName, sprachlisteAus, sprachlisteText } from '../../gemeinsam/sprachen'
|
||||
|
||||
export function SprachAuswahl({
|
||||
name,
|
||||
hinweis,
|
||||
wert,
|
||||
aufAendern,
|
||||
}: {
|
||||
name: string
|
||||
hinweis: string
|
||||
wert: string
|
||||
aufAendern: (wert: string) => void
|
||||
}) {
|
||||
const gewaehlt = sprachlisteAus(wert)
|
||||
const frei = SPRACHEN.filter((s) => !gewaehlt.includes(s.code))
|
||||
const setzen = (codes: string[]): void => aufAendern(sprachlisteText(codes))
|
||||
const verschieben = (code: string, richtung: -1 | 1): void => {
|
||||
const i = gewaehlt.indexOf(code)
|
||||
const j = i + richtung
|
||||
if (i < 0 || j < 0 || j >= gewaehlt.length) return
|
||||
const neu = [...gewaehlt]
|
||||
;[neu[i], neu[j]] = [neu[j], neu[i]]
|
||||
setzen(neu)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-dunst">{name}</span>
|
||||
<span className="ml-2 text-xs text-nebel">{hinweis}</span>
|
||||
<div className="mt-1 flex min-h-[38px] flex-wrap items-center gap-1.5 rounded-lg border border-white/12 bg-samt px-2 py-1.5">
|
||||
{gewaehlt.length === 0 && <span className="font-mono text-[11px] text-nebel">alle Sprachen der Disc</span>}
|
||||
{gewaehlt.map((code, i) => (
|
||||
<span key={code} className="inline-flex items-center gap-1 rounded-md border border-gold/40 bg-gold/12 px-2 py-0.5 text-[11px] text-gold-hell">
|
||||
<span className="font-mono text-[10px] text-gold/70">{i + 1}.</span>
|
||||
<span>{sprachName(code)}</span>
|
||||
<span className="font-mono text-[10px] text-nebel">{code}</span>
|
||||
<button type="button" onClick={() => verschieben(code, -1)} disabled={i === 0} className="ml-1 text-nebel hover:text-schnee disabled:opacity-30" title="nach vorn">
|
||||
‹
|
||||
</button>
|
||||
<button type="button" onClick={() => verschieben(code, 1)} disabled={i === gewaehlt.length - 1} className="text-nebel hover:text-schnee disabled:opacity-30" title="nach hinten">
|
||||
›
|
||||
</button>
|
||||
<button type="button" onClick={() => setzen(gewaehlt.filter((c) => c !== code))} className="ml-0.5 text-nebel hover:text-rot" title="entfernen">
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<select
|
||||
value=""
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length > 0) setzen([...gewaehlt, e.target.value])
|
||||
}}
|
||||
className="ml-auto rounded-md border border-white/12 bg-buehne px-2 py-1 font-mono text-[11px] text-dunst"
|
||||
>
|
||||
<option value="">+ Sprache …</option>
|
||||
{frei.map((s) => (
|
||||
<option key={s.code} value={s.code}>
|
||||
{s.name} ({s.code})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+3
@@ -8,6 +8,9 @@ declare global {
|
||||
aufStatus(horcher: (status: unknown) => void): void
|
||||
melden(art: string): void
|
||||
ordnerWaehlen(titel: string): Promise<string | null>
|
||||
dateiWaehlen(titel: string): Promise<string | null>
|
||||
ordnerOeffnen(pfad: string): Promise<string>
|
||||
protokollOeffnen(): Promise<string>
|
||||
autostartSetzen(an: boolean): Promise<boolean>
|
||||
updatePruefen(): Promise<unknown>
|
||||
updateInstallieren(): Promise<{ ok: boolean; grund: string }>
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
// Laufwerksliste: Sie ändert sich NUR durch eine neue Liste vom Kern.
|
||||
import {
|
||||
istKernNachricht,
|
||||
type AutomatikStand,
|
||||
type BeschaffungStand,
|
||||
type BibliothekEintrag,
|
||||
type DiscInfoStand,
|
||||
type FensterNachricht,
|
||||
type GeraeteInfo,
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
type RipAuftragOptionen,
|
||||
type RipAuftragTitel,
|
||||
type RipStatus,
|
||||
type SpeicherStand,
|
||||
type TitelStand,
|
||||
type VorgaengeStand,
|
||||
type WerkzeugAuskunft,
|
||||
@@ -46,7 +47,6 @@ export interface Verbindung {
|
||||
ripProtokoll: Record<string, string[]>
|
||||
einstellungen: Record<string, string>
|
||||
werkzeuge: WerkzeugAuskunft | null
|
||||
bibliothek: BibliothekEintrag[]
|
||||
schluessel: {
|
||||
quelle: string
|
||||
angenommen: boolean | null
|
||||
@@ -63,6 +63,12 @@ export interface Verbindung {
|
||||
vorgaenge: VorgaengeStand | null
|
||||
/** Was das Windows-Protokoll je Laufwerk sagt (5.4.0) — bleibt stehen. */
|
||||
gesundheit: Record<string, LaufwerkBericht>
|
||||
/** Freier Platz an Arbeitsordner und Ablage (5.5.0). */
|
||||
speicher: SpeicherStand | null
|
||||
/** Automatik-Countdown je Laufwerk (5.5.0). */
|
||||
automatik: Record<string, AutomatikStand>
|
||||
/** Poster für den Hintergrund der Erst-Einrichtung (5.5.0). */
|
||||
poster: string[]
|
||||
/** Kurze Ereigniszeilen (neueste zuerst): Disc rein/raus, Auswurf, Fehler. */
|
||||
meldungen: string[]
|
||||
}
|
||||
@@ -71,7 +77,7 @@ type Horcher = (stand: Verbindung) => void
|
||||
|
||||
const MAX_MELDUNGEN = 30
|
||||
|
||||
const stand: Verbindung = {
|
||||
export const LEERE_VERBINDUNG: Verbindung = {
|
||||
verbunden: false,
|
||||
kern: null,
|
||||
pongLatenzMs: null,
|
||||
@@ -84,13 +90,17 @@ const stand: Verbindung = {
|
||||
ripProtokoll: {},
|
||||
einstellungen: {},
|
||||
werkzeuge: null,
|
||||
bibliothek: [],
|
||||
schluessel: null,
|
||||
beschaffung: null,
|
||||
vorgaenge: null,
|
||||
gesundheit: {},
|
||||
speicher: null,
|
||||
automatik: {},
|
||||
poster: [],
|
||||
meldungen: [],
|
||||
}
|
||||
|
||||
const stand: Verbindung = { ...LEERE_VERBINDUNG }
|
||||
const horcher = new Set<Horcher>()
|
||||
let gestartet = false
|
||||
let port: MessagePort | null = null
|
||||
@@ -103,8 +113,9 @@ function kopie(): Verbindung {
|
||||
discInfos: { ...stand.discInfos },
|
||||
vorschlaege: { ...stand.vorschlaege },
|
||||
einstellungen: { ...stand.einstellungen },
|
||||
bibliothek: [...stand.bibliothek],
|
||||
gesundheit: { ...stand.gesundheit },
|
||||
automatik: { ...stand.automatik },
|
||||
poster: [...stand.poster],
|
||||
meldungen: [...stand.meldungen],
|
||||
}
|
||||
}
|
||||
@@ -140,6 +151,8 @@ function kernNachricht(nachricht: KernNachricht): void {
|
||||
meldung(`Disc erkannt in ${ereignis.geraet.name} — ${ereignis.geraet.typ}`)
|
||||
} else if (ereignis.art === 'disc-entnommen') {
|
||||
meldung(`Disc entnommen aus ${ereignis.geraet.name}`)
|
||||
const { [ereignis.geraet.id]: _weg, ...rest } = stand.automatik
|
||||
stand.automatik = rest
|
||||
} else if (ereignis.art === 'laufwerk-weg') {
|
||||
meldung(`Laufwerk ${ereignis.id}: nicht mehr da`)
|
||||
}
|
||||
@@ -184,9 +197,6 @@ function kernNachricht(nachricht: KernNachricht): void {
|
||||
case 'werkzeuge':
|
||||
stand.werkzeuge = nachricht.auskunft
|
||||
break
|
||||
case 'bibliothek':
|
||||
stand.bibliothek = nachricht.eintraege
|
||||
break
|
||||
case 'schluessel-status':
|
||||
stand.schluessel = nachricht.stand
|
||||
if (nachricht.stand.angenommen === false) meldung(`⚠ MakeMKV-Schlüssel: ${nachricht.stand.text}`)
|
||||
@@ -207,9 +217,18 @@ function kernNachricht(nachricht: KernNachricht): void {
|
||||
meldung(`Laufwerk ${nachricht.id}: ${nachricht.bericht.text}`)
|
||||
}
|
||||
break
|
||||
case 'speicher':
|
||||
stand.speicher = nachricht.stand
|
||||
break
|
||||
case 'automatik':
|
||||
stand.automatik = { ...stand.automatik, [nachricht.stand.id]: nachricht.stand }
|
||||
break
|
||||
case 'poster-vorschau':
|
||||
stand.poster = nachricht.pfade
|
||||
break
|
||||
case 'rip-status': {
|
||||
stand.rips = { ...stand.rips, [nachricht.status.id]: nachricht.status }
|
||||
const laeuft = ['liest-info', 'rippt', 'komprimiert', 'legt-ab'].includes(nachricht.status.phase)
|
||||
const laeuft = ['liest-info', 'rettet', 'rippt', 'komprimiert', 'legt-ab'].includes(nachricht.status.phase)
|
||||
if (laeuft && stand.ripStart[nachricht.status.id] === undefined) {
|
||||
stand.ripStart = { ...stand.ripStart, [nachricht.status.id]: Date.now() }
|
||||
// Ein NEUER Vorgang beginnt — das Protokoll des alten weicht.
|
||||
@@ -257,8 +276,8 @@ function portAnnehmen(neuerPort: MessagePort): void {
|
||||
senden({ art: 'ping', zeit: Date.now() })
|
||||
senden({ art: 'einstellungen-laden' })
|
||||
senden({ art: 'werkzeuge-laden' })
|
||||
senden({ art: 'bibliothek-laden' })
|
||||
senden({ art: 'vorgaenge-laden' })
|
||||
senden({ art: 'speicher-laden' })
|
||||
melden()
|
||||
}
|
||||
|
||||
@@ -324,6 +343,10 @@ export function ripAbbrechen(id: string): void {
|
||||
anKern({ art: 'rip-abbruch', id }, `Rip-Abbruch ${id}`)
|
||||
}
|
||||
|
||||
export function rettungStarten(id: string): void {
|
||||
anKern({ art: 'rettung-start', id }, `Rettungs-Abbild ${id}`)
|
||||
}
|
||||
|
||||
export function metadatenSuchen(id: string, text: string): void {
|
||||
senden({ art: 'metadaten-suchen', id, text })
|
||||
}
|
||||
@@ -372,3 +395,28 @@ export function fremdenOrdnerLoeschen(ordner: string): void {
|
||||
export function laufwerkPruefen(id: string): void {
|
||||
anKern({ art: 'laufwerk-pruefen', id }, `Laufwerk ${id} prüfen`)
|
||||
}
|
||||
|
||||
// ── 5.5.0 ───────────────────────────────────────────────────────────────
|
||||
export function kompressionPause(an: boolean): void {
|
||||
anKern({ art: 'kompression-pause', an }, an ? 'Kompression anhalten' : 'Kompression weiter')
|
||||
}
|
||||
|
||||
export function automatikStopp(id: string): void {
|
||||
senden({ art: 'automatik-stopp', id })
|
||||
}
|
||||
|
||||
export function automatikJetzt(id: string): void {
|
||||
anKern({ art: 'automatik-jetzt', id }, 'Automatik jetzt')
|
||||
}
|
||||
|
||||
export function benachrichtigungTesten(): void {
|
||||
anKern({ art: 'benachrichtigung-testen' }, 'Testnachricht')
|
||||
}
|
||||
|
||||
export function posterLaden(): void {
|
||||
senden({ art: 'poster-laden' })
|
||||
}
|
||||
|
||||
export function speicherLaden(): void {
|
||||
senden({ art: 'speicher-laden' })
|
||||
}
|
||||
|
||||
@@ -76,3 +76,17 @@
|
||||
::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.12); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background-color: oklch(1 0 0 / 0.2); }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* Der Poster-Lauf der Erst-Einrichtung (5.5.0): Jede Spalte wandert langsam
|
||||
nach oben; die Liste ist verdoppelt, bei -50 % beginnt sie nahtlos von
|
||||
vorn. Dauer und Versatz setzt die Komponente je Spalte. */
|
||||
@keyframes poster-lauf {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-50%); }
|
||||
}
|
||||
.poster-spalte {
|
||||
animation-name: poster-lauf;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
// Die Kompressions-Warteschlange in der Übersicht (5.4.0): Rip und
|
||||
// Kompression sind entkoppelt — hier steht, was gerade rechnet und was
|
||||
// noch wartet, mit Abbruch je Auftrag. 5.5.0: Pause — der laufende Film
|
||||
// wird fertig, der nächste wartet.
|
||||
import type { VorgaengeStand } from '../../gemeinsam/nachrichten'
|
||||
import { SegmentBalken } from '../bausteine'
|
||||
import { kompressionAbbrechen, kompressionPause } from '../kernverbindung'
|
||||
|
||||
export function KompressionsKarte({ stand }: { stand: VorgaengeStand['kompression'] }) {
|
||||
if (stand.laeuft === null && stand.wartend.length === 0 && !stand.pausiert) return null
|
||||
const l = stand.laeuft
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/10 bg-karte/50 p-5">
|
||||
<div className="flex flex-wrap items-center gap-2.5 font-mono text-[10.5px] tracking-[0.12em] text-nebel">
|
||||
<span className={`inline-block h-2 w-2 rounded-full ${l !== null ? 'animate-pulse bg-gold' : stand.pausiert ? 'bg-warn' : 'bg-white/25'}`} />
|
||||
<span className="text-dunst">KOMPRESSION</span>
|
||||
<span>·</span>
|
||||
<span>
|
||||
{l !== null ? 'läuft' : stand.pausiert ? 'angehalten' : 'wartet'}
|
||||
{stand.wartend.length > 0 && ` · ${stand.wartend.length} in der Warteschlange`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => kompressionPause(!stand.pausiert)}
|
||||
className={`ml-auto rounded-lg border px-3 py-1 text-[11px] ${
|
||||
stand.pausiert ? 'border-gold/40 bg-gold/12 font-semibold text-gold-hell hover:bg-gold/20' : 'border-white/15 text-dunst hover:text-schnee'
|
||||
}`}
|
||||
title={stand.pausiert ? 'Die Warteschlange läuft weiter' : 'Der laufende Film wird fertig gerechnet, der nächste wartet — zum Beispiel beim Spielen'}
|
||||
>
|
||||
{stand.pausiert ? '▶ Weiter' : '⏸ Pausieren'}
|
||||
</button>
|
||||
</div>
|
||||
{l !== null && (
|
||||
<div className="mt-3 rounded-xl border border-white/10 bg-samt/80 p-4">
|
||||
<div className="flex items-end justify-between gap-5">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-display text-[17px] font-bold text-schnee">{l.titel}</p>
|
||||
<div className="mt-2">
|
||||
<SegmentBalken prozent={l.prozent} />
|
||||
</div>
|
||||
<p className="mt-2 truncate font-mono text-[11px] text-nebel" title={l.text}>
|
||||
> {l.text}
|
||||
</p>
|
||||
{stand.pausiert && <p className="mt-1 font-mono text-[10.5px] text-warn">Pause: Dieser Film wird fertig, danach wartet die Schlange.</p>}
|
||||
</div>
|
||||
{l.prozent >= 0 && (
|
||||
<div className="flex-none font-mono text-[42px] font-bold leading-none text-gold-hell">
|
||||
{l.prozent}
|
||||
<span className="text-lg text-gold/70">%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => kompressionAbbrechen(l.vorgangId)}
|
||||
className="mt-3 rounded-lg border border-rot/50 bg-rot/10 px-3 py-1 text-[11px] font-semibold text-rot hover:bg-rot/20"
|
||||
title="Die Roh-Dateien bleiben liegen — unter Einstellungen → Roh-Dateien geht es später weiter"
|
||||
>
|
||||
Kompression abbrechen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{stand.wartend.length > 0 && (
|
||||
<div className="mt-3 space-y-1">
|
||||
{stand.wartend.map((w, i) => (
|
||||
<div key={w.vorgangId} className="flex items-center justify-between gap-3 rounded-lg border border-white/8 bg-samt/40 px-3 py-1.5">
|
||||
<span className="min-w-0 truncate font-mono text-[11px] text-dunst">
|
||||
Platz {i + 1} · {w.titel}
|
||||
{stand.pausiert ? ' · wartet auf Weiter' : ''}
|
||||
</span>
|
||||
<button onClick={() => kompressionAbbrechen(w.vorgangId)} className="flex-none font-mono text-[10.5px] text-nebel hover:text-rot">
|
||||
aus der Schlange nehmen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,485 @@
|
||||
// Die Bühne: Backdrop als Panorama, Poster mit Goldkante, Plakat-Titel —
|
||||
// und beim Arbeiten die Aussteuerungsanzeige samt Mono-Protokoll.
|
||||
// 5.4.0: Kino-Banner v2 (Logo, Tagline, Meta-Zeile, Darsteller), Laufwerks-
|
||||
// Gesundheit, Stand der Kompression nach dem Rip. 5.5.0: Automatik-Countdown
|
||||
// und das Rettungs-Abbild — nur, wenn Rippy Lesefehler gesehen hat.
|
||||
import { useState } from 'react'
|
||||
import type {
|
||||
AutomatikStand,
|
||||
DiscInfoStand,
|
||||
GeraeteInfo,
|
||||
KompressionStand,
|
||||
LaufwerkBericht,
|
||||
RipStatus,
|
||||
VorgangEintrag,
|
||||
} from '../../gemeinsam/nachrichten'
|
||||
import { DEFAULT_HB_PRESET, presetEmpfehlung } from '../../gemeinsam/preset-empfehlung'
|
||||
import {
|
||||
Badge,
|
||||
IconDisc,
|
||||
IconEject,
|
||||
IconPlay,
|
||||
IconStift,
|
||||
IconStop,
|
||||
InfoKachel,
|
||||
LAUFENDE_PHASEN,
|
||||
PHASEN_MONO,
|
||||
SegmentBalken,
|
||||
TYP_NAMEN,
|
||||
backdropUrl,
|
||||
discHerkunft,
|
||||
gb,
|
||||
logoUrl,
|
||||
metaZeile,
|
||||
posterUrlGross,
|
||||
profilUrl,
|
||||
restzeitText,
|
||||
sicherheitsWort,
|
||||
} from '../bausteine'
|
||||
import {
|
||||
automatikJetzt,
|
||||
automatikStopp,
|
||||
auswerfen,
|
||||
laufwerkPruefen,
|
||||
rettungStarten,
|
||||
ripAbbrechen,
|
||||
ripUeberspringen,
|
||||
type Verbindung,
|
||||
} from '../kernverbindung'
|
||||
|
||||
/** Welches Preset diese Disc bekäme — dieselbe Kette wie im Kern
|
||||
* (eigene Wahl → Empfehlung → Default). */
|
||||
export function presetAnzeige(typ: GeraeteInfo['typ'], verbindung: Verbindung): string {
|
||||
if (typ === 'cd') return 'FLAC (verlustfrei)'
|
||||
if (typ === 'unknown') return 'ISO-Abbild'
|
||||
const werte = verbindung.einstellungen
|
||||
if (werte['transcodeEnabled'] === 'false') return 'ohne Kompression'
|
||||
const schluessel = typ === 'dvd' ? 'transcodePresetDvd' : typ === 'uhd' ? 'transcodePresetUhd' : 'transcodePresetBluray'
|
||||
const eigene = werte[schluessel] ?? ''
|
||||
const empfehlung = presetEmpfehlung(typ, verbindung.werkzeuge?.backends ?? [], verbindung.werkzeuge?.presets ?? [])
|
||||
const gewaehlt = eigene.length > 0 ? eigene : empfehlung.length > 0 ? empfehlung : DEFAULT_HB_PRESET
|
||||
return gewaehlt === 'keine' ? 'ohne Kompression' : gewaehlt
|
||||
}
|
||||
|
||||
export function LaufwerkKachel({
|
||||
geraet,
|
||||
rip,
|
||||
info,
|
||||
ripStartMs,
|
||||
protokoll,
|
||||
verbindung,
|
||||
bericht,
|
||||
vorgang,
|
||||
kompression,
|
||||
wartePlatz,
|
||||
automatik,
|
||||
aufRippen,
|
||||
aufAendern,
|
||||
}: {
|
||||
geraet: GeraeteInfo
|
||||
rip: RipStatus | undefined
|
||||
info: DiscInfoStand | undefined
|
||||
ripStartMs: number | undefined
|
||||
protokoll: string[]
|
||||
verbindung: Verbindung
|
||||
/** Was das Windows-Protokoll zu diesem Laufwerk sagt (5.4.0). */
|
||||
bericht: LaufwerkBericht | undefined
|
||||
/** Der Vorgang des letzten Rips — für den Stand der Kompression (5.4.0). */
|
||||
vorgang: VorgangEintrag | undefined
|
||||
kompression: KompressionStand | null
|
||||
wartePlatz: number
|
||||
/** Der Automatik-Countdown (5.5.0). */
|
||||
automatik: AutomatikStand | undefined
|
||||
/** Die Dialoge leben im App-Zustand (5.4.0): Ein leerer Takt der Wache
|
||||
* räumte sonst Kachel UND Dialog ab. */
|
||||
aufRippen: () => void
|
||||
aufAendern: () => void
|
||||
}) {
|
||||
const [protokollOffen, setProtokollOffen] = useState(false)
|
||||
const [berichtOffen, setBerichtOffen] = useState(false)
|
||||
const ripLaeuft = rip !== undefined && LAUFENDE_PHASEN.includes(rip.phase)
|
||||
const discDa = geraet.status === 'ready'
|
||||
const backdrop = discDa && info !== undefined ? backdropUrl(info.backdropPfad) : ''
|
||||
const poster = discDa && info !== undefined ? posterUrlGross(info.posterPfad) : ''
|
||||
const erkannt = discDa && info !== undefined && info.titel.length > 0
|
||||
const logo = erkannt ? logoUrl(info.logoPfad) : ''
|
||||
const rettungMoeglich = discDa && !ripLaeuft && rip !== undefined && rip.rettungMoeglich === true
|
||||
const berichtTon =
|
||||
bericht === undefined
|
||||
? ''
|
||||
: bericht.urteil === 'ruhig'
|
||||
? 'text-gruen border-gruen/40 bg-gruen/10'
|
||||
: bericht.urteil === 'disc'
|
||||
? 'text-warn border-warn/45 bg-warn/10'
|
||||
: bericht.urteil === 'hardware'
|
||||
? 'text-rot border-rot/45 bg-rot/10'
|
||||
: 'text-dunst border-white/12 bg-samt/60'
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-karte/50">
|
||||
{backdrop.length > 0 && (
|
||||
<>
|
||||
<img src={backdrop} alt="" className="absolute inset-0 h-full w-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-buehne via-buehne/85 to-buehne/45" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-buehne via-transparent to-transparent" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="relative p-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2.5 font-mono text-[10.5px] tracking-[0.12em] text-nebel">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${
|
||||
ripLaeuft
|
||||
? 'animate-pulse bg-rec shadow-[0_0_9px_oklch(0.72_0.17_45/0.9)]'
|
||||
: discDa
|
||||
? 'bg-gruen'
|
||||
: geraet.status === 'empty'
|
||||
? 'bg-white/25'
|
||||
: 'bg-rot'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-dunst">LAUFWERK {geraet.id}:</span>
|
||||
<span>·</span>
|
||||
<span className="truncate">{geraet.modell.length > 0 ? geraet.modell : 'MODELL UNBEKANNT'}</span>
|
||||
</div>
|
||||
<div className="flex flex-none gap-2">
|
||||
{ripLaeuft ? (
|
||||
<button
|
||||
onClick={() => ripAbbrechen(geraet.id)}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-rot/60 bg-rot/10 px-4 py-1.5 text-xs font-semibold text-rot hover:bg-rot/20"
|
||||
>
|
||||
<IconStop />
|
||||
Abbrechen
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={aufRippen}
|
||||
disabled={!discDa}
|
||||
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-b from-gold-hell to-gold-tief px-5 py-1.5 text-xs font-bold text-buehne shadow-[inset_0_1px_0_oklch(1_0_0/0.4),0_8px_24px_oklch(0.75_0.13_60/0.3)] hover:from-gold-hell hover:to-gold disabled:cursor-not-allowed disabled:opacity-35 disabled:shadow-none"
|
||||
title="Titel der Disc lesen und auswaehlen — danach verlustfrei rippen"
|
||||
>
|
||||
<IconPlay />
|
||||
Rippen
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => auswerfen(geraet.id)}
|
||||
disabled={!discDa || ripLaeuft}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-gradient-to-b from-karte/80 to-samt/80 px-4 py-1.5 text-xs text-dunst shadow-[inset_0_1px_0_oklch(1_0_0/0.07)] hover:text-schnee disabled:cursor-not-allowed disabled:opacity-35"
|
||||
title="Entriegeln, auswerfen, nachsehen — in dieser Reihenfolge"
|
||||
>
|
||||
<IconEject />
|
||||
Auswerfen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!discDa && (
|
||||
<div className="mt-5 flex items-center gap-5 py-5">
|
||||
<IconDisc groesse={52} farbe={geraet.status === 'empty' ? 'oklch(0.4 0.02 75)' : 'oklch(0.68 0.19 25)'} />
|
||||
<p className={`max-w-2xl font-mono text-xs leading-5 ${geraet.status === 'empty' ? 'text-nebel' : 'text-rot'}`}>
|
||||
{geraet.status === 'empty' ? 'Keine Disc eingelegt — Disc rein genügt, Rippy meldet sich.' : geraet.grund}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{discDa && (
|
||||
<div className="mt-4 flex gap-5">
|
||||
{poster.length > 0 ? (
|
||||
<img src={poster} alt="" className="h-44 w-[118px] flex-none rounded-xl object-cover shadow-2xl shadow-black/60 ring-1 ring-gold/35" />
|
||||
) : (
|
||||
<div className="flex h-44 w-[118px] flex-none items-center justify-center rounded-xl bg-gradient-to-br from-karte to-samt ring-1 ring-white/10">
|
||||
<IconDisc groesse={40} farbe="oklch(0.5 0.05 75)" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Kino-Banner v2 (5.4.0): Logo statt Text, wo TMDb eines hat —
|
||||
der größte optische Sprung. Titel und Jahr bleiben lesbar. */}
|
||||
{erkannt ? (
|
||||
logo.length > 0 ? (
|
||||
<div className="flex flex-wrap items-end gap-x-3 gap-y-1">
|
||||
<img src={logo} alt={info.titel} className="max-h-16 max-w-[380px] object-contain object-left drop-shadow-[0_2px_12px_rgba(0,0,0,0.75)]" />
|
||||
<span className="pb-0.5 text-sm text-dunst">
|
||||
{info.titel}
|
||||
{info.jahr !== null && ` (${info.jahr})`}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="truncate font-display text-[26px] font-bold leading-tight text-schnee drop-shadow">
|
||||
{info.titel}
|
||||
{info.jahr !== null && <span className="ml-2 font-medium text-dunst">({info.jahr})</span>}
|
||||
</h3>
|
||||
)
|
||||
) : (
|
||||
<h3 className="font-display text-[26px] font-bold leading-tight text-schnee">{TYP_NAMEN[geraet.typ]}</h3>
|
||||
)}
|
||||
{erkannt && info.tagline.length > 0 && <p className="mt-1 font-display text-[15px] italic text-gold-hell/90">{info.tagline}</p>}
|
||||
{erkannt && metaZeile(info).length > 0 && <p className="mt-1 font-mono text-[11px] tracking-wide text-dunst">{metaZeile(info)}</p>}
|
||||
{erkannt && info.beschreibung.length > 0 && <p className="mt-1.5 line-clamp-2 max-w-2xl text-xs leading-5 text-dunst">{info.beschreibung}</p>}
|
||||
{!erkannt && (
|
||||
<p className="mt-1.5 font-mono text-xs text-nebel">
|
||||
{geraet.typ === 'cd' ? 'Titel kommen beim Rippen von MusicBrainz.' : 'Noch keine Zuordnung — „Ändern …" hilft nach.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Zwei Kacheln nebeneinander im schmalen Fenster, vier im
|
||||
breiten — vorher immer vier, also im schmalen gequetscht. */}
|
||||
<div className="mt-3 grid max-w-3xl grid-cols-2 gap-2.5 sm:grid-cols-4">
|
||||
<InfoKachel label="MEDIUM" wert={TYP_NAMEN[geraet.typ]} />
|
||||
<InfoKachel label="GRÖSSE" wert={geraet.groesseBytes > 0 ? gb(geraet.groesseBytes) : '—'} />
|
||||
<InfoKachel
|
||||
label="ERKENNUNG"
|
||||
wert={erkannt ? `${Math.round(info.confidence * 100)} %${info.quelle.length > 0 ? ` · ${info.quelle}` : ''}` : '—'}
|
||||
farbe={erkannt ? (info.confidence >= 0.8 ? 'text-gruen' : 'text-warn') : undefined}
|
||||
/>
|
||||
<InfoKachel label="PRESET" wert={presetAnzeige(geraet.typ, verbindung)} />
|
||||
</div>
|
||||
|
||||
{/* Darsteller-Streifen (5.4.0) */}
|
||||
{erkannt && info.besetzung.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-2">
|
||||
{info.besetzung.map((d) => (
|
||||
<div key={`${d.name}-${d.rolle}`} className="flex items-center gap-2" title={d.rolle}>
|
||||
{d.bildPfad.length > 0 ? (
|
||||
<img src={profilUrl(d.bildPfad)} alt="" className="h-9 w-9 rounded-full object-cover ring-1 ring-gold/30" />
|
||||
) : (
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-samt font-mono text-[11px] text-nebel ring-1 ring-white/10">
|
||||
{d.name
|
||||
.split(' ')
|
||||
.map((w) => w[0] ?? '')
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
<span className="leading-tight">
|
||||
<span className="block text-[11px] text-schnee">{d.name}</span>
|
||||
{d.rolle.length > 0 && <span className="block text-[10px] text-nebel">{d.rolle}</span>}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={aufAendern}
|
||||
disabled={ripLaeuft}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-samt/60 px-3 py-1 text-xs text-dunst hover:text-schnee disabled:opacity-35"
|
||||
title="Falsch erkannt? Selbst suchen und wählen — die Ablage folgt deiner Wahl."
|
||||
>
|
||||
<IconStift />
|
||||
Ändern …
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setBerichtOffen(true)
|
||||
laufwerkPruefen(geraet.id)
|
||||
}}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-samt/60 px-3 py-1 text-xs text-dunst hover:text-schnee"
|
||||
title="Liest die cdrom-Ereignisse aus dem Windows-Protokoll: Disc oder Hardware?"
|
||||
>
|
||||
Laufwerk prüfen
|
||||
</button>
|
||||
{rettungMoeglich && (
|
||||
<button
|
||||
onClick={() => rettungStarten(geraet.id)}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-warn/50 bg-warn/12 px-3 py-1 text-xs font-semibold text-warn hover:bg-warn/20"
|
||||
title="Rippy hat an dieser Disc Lesefehler gesehen: erst ein Abbild Sektor für Sektor (Unlesbares mit Nullen), dann derselbe Rip aus dem Abbild — es kann nicht mehr hängen. Braucht doppelten Platz."
|
||||
>
|
||||
Rettungs-Abbild …
|
||||
</button>
|
||||
)}
|
||||
{erkannt && <Badge text={`${sicherheitsWort(info.confidence)}`} ton={info.confidence >= 0.8 ? 'gruen' : 'gelb'} />}
|
||||
{info !== undefined && discHerkunft(info).length > 0 && <Badge text={discHerkunft(info)} ton="blau" />}
|
||||
{info !== undefined && info.schonGerippt !== null && <Badge text={`schon gerippt am ${info.schonGerippt.slice(0, 10)}`} ton="gelb" />}
|
||||
</div>
|
||||
{/* Was Rippy NACH dem Info-Lauf dazugelernt hat (Erkennung v2). */}
|
||||
{erkannt && info.hinweise.length > 0 && (
|
||||
<div className="mt-2 space-y-0.5">
|
||||
{info.hinweise.map((h) => (
|
||||
<p
|
||||
key={h}
|
||||
className={`font-mono text-[11px] ${h.includes('NICHT') ? 'text-warn' : h.includes('bestätigt') || h.includes('passt') ? 'text-gruen' : 'text-nebel'}`}
|
||||
>
|
||||
{h.includes('NICHT') ? '⚠ ' : h.includes('bestätigt') ? '✓ ' : '· '}
|
||||
{h}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{geraet.grund.length > 0 && <p className="mt-2 font-mono text-xs text-warn">{geraet.grund}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Automatik (5.5.0): Countdown mit Stopp und Jetzt — oder der
|
||||
Grund, warum Rippy wartet. */}
|
||||
{discDa && !ripLaeuft && automatik !== undefined && automatik.text.length > 0 && (
|
||||
<div className={`mt-4 flex flex-wrap items-center gap-3 rounded-xl border p-3 ${automatik.aktiv ? 'border-gold/45 bg-gold/10' : 'border-white/10 bg-samt/60'}`}>
|
||||
{automatik.aktiv && (
|
||||
<span className="font-mono text-[28px] font-bold leading-none text-gold-hell">
|
||||
{automatik.sekunden}
|
||||
<span className="text-sm text-gold/70"> s</span>
|
||||
</span>
|
||||
)}
|
||||
<p className={`min-w-0 flex-1 font-mono text-[11px] leading-5 ${automatik.aktiv ? 'text-gold-hell' : 'text-nebel'}`}>{automatik.text}</p>
|
||||
{automatik.aktiv && (
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => automatikJetzt(geraet.id)} className="rounded-lg border border-gold/40 bg-gold/15 px-3 py-1 text-[11px] font-semibold text-gold-hell hover:bg-gold/25">
|
||||
Jetzt
|
||||
</button>
|
||||
<button onClick={() => automatikStopp(geraet.id)} className="rounded-lg border border-white/15 px-3 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Stopp
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Laufwerks-Gesundheit (5.4.0, Punkt 8): Disc oder Hardware? Kommt
|
||||
von selbst nach einem gescheiterten Rip — oder auf Knopfdruck. */}
|
||||
{bericht !== undefined && (berichtOffen || bericht.urteil !== 'ruhig') && (
|
||||
<div className={`mt-4 rounded-xl border p-3 ${berichtTon}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="font-mono text-[11px] leading-5">
|
||||
<span className="font-semibold">
|
||||
{bericht.urteil === 'ruhig' ? 'LAUFWERK RUHIG' : bericht.urteil === 'disc' ? 'VERDACHT: DIE DISC' : bericht.urteil === 'hardware' ? 'VERDACHT: DIE HARDWARE' : 'PROTOKOLL'}
|
||||
</span>{' '}
|
||||
— {bericht.text}
|
||||
</p>
|
||||
<button onClick={() => setBerichtOffen(false)} className="flex-none font-mono text-[10.5px] text-nebel hover:text-dunst">
|
||||
ausblenden
|
||||
</button>
|
||||
</div>
|
||||
{bericht.letzte.length > 0 && (
|
||||
<div className="mt-1.5 space-y-0.5">
|
||||
{bericht.letzte.map((z, i) => (
|
||||
<p key={i} className="font-mono text-[10.5px] text-nebel">
|
||||
{z}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rip !== undefined && (
|
||||
<div className="mt-4 rounded-xl border border-white/10 bg-samt/80 p-4 backdrop-blur">
|
||||
<div className="flex items-end justify-between gap-5">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-2 flex items-baseline justify-between gap-3">
|
||||
<span
|
||||
className={`font-mono text-[10.5px] tracking-[0.12em] ${
|
||||
rip.phase === 'fehler' ? 'text-rot' : rip.phase === 'fertig' ? (rip.lesefehler ? 'text-warn' : 'text-gruen') : 'text-gold-hell'
|
||||
}`}
|
||||
>
|
||||
{PHASEN_MONO[rip.phase]}
|
||||
{rip.lesefehler && rip.phase === 'fertig' ? ' — MIT LESEFEHLERN' : ''}
|
||||
</span>
|
||||
{ripLaeuft && <span className="font-mono text-[10.5px] text-nebel">{restzeitText(rip.prozent, ripStartMs)}</span>}
|
||||
</div>
|
||||
{ripLaeuft && <SegmentBalken prozent={rip.prozent} />}
|
||||
{ripLaeuft && (rip.titelGesamt ?? 0) > 1 && (
|
||||
<p className="mt-1.5 font-mono text-[10.5px] text-nebel">
|
||||
Titel {rip.titelNr} von {rip.titelGesamt}
|
||||
</p>
|
||||
)}
|
||||
{rip.rettung !== undefined && (
|
||||
<p className="mt-1.5 font-mono text-[10.5px] text-warn">
|
||||
Rettungs-Abbild: {rip.rettung.unlesbareSektoren} unlesbare Sektoren an {rip.rettung.stellen} Stellen mit Nullen gefüllt
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Der Defekt-Waechter (§ 6.2): Dieselbe Stelle wieder und
|
||||
wieder ist kein Fortschritt, sondern ein physischer
|
||||
Defekt. Vorher lief MakeMKV dort stundenlang weiter,
|
||||
waehrend identische Zeilen durchs Protokoll rauschten. */}
|
||||
{rip.haengt != null && (
|
||||
<div className="mt-3 rounded-xl border border-warn/45 bg-warn/10 p-3">
|
||||
<p className="font-mono text-[11px] font-semibold text-warn">Die Disc hat an einer Stelle einen Defekt.</p>
|
||||
<p className="mt-1 font-mono text-[11px] leading-5 text-dunst">
|
||||
MakeMKV versucht es seit {rip.haengt.wiederholungen} Meldungen immer wieder an derselben Stelle (Byte {rip.haengt.offset}). Das wird nicht
|
||||
besser — der Rest der Disc ist davon nicht betroffen. Nach dem Abbruch bietet Rippy das Rettungs-Abbild an.
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={() => ripUeberspringen(geraet.id)}
|
||||
className="rounded-lg border border-warn/50 bg-warn/15 px-3 py-1 text-[11px] font-semibold text-warn hover:bg-warn/25"
|
||||
title="Diesen Titel aufgeben und mit dem naechsten weitermachen"
|
||||
>
|
||||
Titel ueberspringen
|
||||
</button>
|
||||
<span className="font-mono text-[10.5px] text-nebel">oder weiter versuchen — abbrechen geht oben.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-2 truncate font-mono text-[11px] text-nebel" title={rip.text}>
|
||||
> {rip.text}
|
||||
</p>
|
||||
{rip.dateien.map((datei) => (
|
||||
<p key={datei} className="break-all font-mono text-[11px] text-nebel/80">
|
||||
{datei}
|
||||
</p>
|
||||
))}
|
||||
|
||||
{/* Nach dem Rip (5.4.0): Wo steht die Kompression? Das
|
||||
Laufwerk ist schon frei — die Arbeit läuft im Hintergrund. */}
|
||||
{rip.phase === 'fertig' && vorgang !== undefined && (
|
||||
<div className="mt-3 rounded-lg border border-white/8 bg-buehne/60 p-2.5">
|
||||
{kompression !== null ? (
|
||||
<>
|
||||
<p className="font-mono text-[10.5px] tracking-[0.12em] text-gold-hell">
|
||||
KOMPRESSION LÄUFT{kompression.prozent >= 0 ? ` — ${kompression.prozent} %` : ''}
|
||||
</p>
|
||||
<div className="mt-1.5">
|
||||
<SegmentBalken prozent={kompression.prozent} />
|
||||
</div>
|
||||
<p className="mt-1.5 truncate font-mono text-[11px] text-nebel" title={kompression.text}>
|
||||
> {kompression.text}
|
||||
</p>
|
||||
</>
|
||||
) : wartePlatz > 0 ? (
|
||||
<p className="font-mono text-[11px] text-dunst">Kompression wartet — Platz {wartePlatz} in der Warteschlange.</p>
|
||||
) : vorgang.phase === 'fertig' ? (
|
||||
<p className="break-all font-mono text-[11px] text-gruen">
|
||||
✓ {vorgang.komprimiert ? 'Komprimiert und abgelegt' : 'Verlustfrei abgelegt'}: {vorgang.zielOrdner}
|
||||
{vorgang.fertigBytes > 0 && ` (${gb(vorgang.fertigBytes)})`}
|
||||
</p>
|
||||
) : vorgang.phase === 'fehler' || vorgang.phase === 'abgebrochen' ? (
|
||||
<p className="break-all font-mono text-[11px] text-warn">⚠ {vorgang.fehler.length > 0 ? vorgang.fehler : `Kompression ${vorgang.phase}`}</p>
|
||||
) : (
|
||||
<p className="font-mono text-[11px] text-dunst">Kompression: {vorgang.phase}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{ripLaeuft && rip.prozent >= 0 && (
|
||||
<div className="flex-none font-mono text-[42px] font-bold leading-none text-gold-hell">
|
||||
{rip.prozent}
|
||||
<span className="text-lg text-gold/70">%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{protokoll.length > 1 && (
|
||||
<button onClick={() => setProtokollOffen((o) => !o)} className="mt-2 font-mono text-[10.5px] text-nebel hover:text-dunst">
|
||||
{protokollOffen ? '▾ PROTOKOLL AUSBLENDEN' : `▸ PROTOKOLL (${protokoll.length} ZEILEN)`}
|
||||
</button>
|
||||
)}
|
||||
{protokollOffen && (
|
||||
<div className="mt-1 max-h-40 space-y-0.5 overflow-y-auto rounded-lg bg-buehne p-2">
|
||||
{protokoll.map((zeile, i) => (
|
||||
<p key={i} className="break-all font-mono text-[10.5px] leading-4 text-nebel">
|
||||
> {zeile}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
// Speicher und Statistik in der Übersicht (5.5.0, Commander: „Ist mir zu
|
||||
// leer … wie viel Speicher noch auf dem Server oder auf dem Arbeitsordner
|
||||
// frei ist"). Gemessen im Kern mit fs.statfs — lokal wie auf der Freigabe.
|
||||
import type { SpeicherPlatz, SpeicherStand, Statistik } from '../../gemeinsam/nachrichten'
|
||||
import { FuellBalken, dauerGrob, gbKurz } from '../bausteine'
|
||||
import { speicherLaden } from '../kernverbindung'
|
||||
|
||||
/** Ab hier wird gewarnt: eine Blu-ray braucht rund 50 GB (Roh + Kompression). */
|
||||
export const WENIG_FREI_BYTES = 60e9
|
||||
export const SEHR_WENIG_FREI_BYTES = 20e9
|
||||
|
||||
function Platz({ name, platz, hinweis }: { name: string; platz: SpeicherPlatz; hinweis: string }) {
|
||||
const ton = !platz.ok ? 'rot' : platz.freiBytes < SEHR_WENIG_FREI_BYTES ? 'rot' : platz.freiBytes < WENIG_FREI_BYTES ? 'warn' : 'gold'
|
||||
const belegt = platz.ok && platz.gesamtBytes > 0 ? 1 - platz.freiBytes / platz.gesamtBytes : 0
|
||||
return (
|
||||
<div className="rounded-xl border border-white/8 bg-samt/50 p-3">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<span className="font-mono text-[10px] tracking-[0.14em] text-nebel">{name}</span>
|
||||
<span className={`font-mono text-[13px] font-semibold ${ton === 'rot' ? 'text-rot' : ton === 'warn' ? 'text-warn' : 'text-schnee'}`}>
|
||||
{platz.ok ? `${gbKurz(platz.freiBytes)} frei` : 'nicht messbar'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<FuellBalken anteil={belegt} ton={ton} />
|
||||
</div>
|
||||
<p className="mt-1.5 break-all font-mono text-[10.5px] text-nebel" title={platz.pfad}>
|
||||
{platz.pfad}
|
||||
{platz.ok && ` · ${gbKurz(platz.gesamtBytes)} gesamt`}
|
||||
{!platz.ok && platz.fehler.length > 0 && ` · ${platz.fehler}`}
|
||||
</p>
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-2">
|
||||
<span className="text-[10.5px] text-nebel/80">{hinweis}</span>
|
||||
{platz.ok && (
|
||||
<button onClick={() => void window.rippy.ordnerOeffnen(platz.pfad)} className="ml-auto font-mono text-[10.5px] text-nebel hover:text-dunst" title="Im Explorer zeigen">
|
||||
Ordner öffnen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SpeicherKarte({ speicher, statistik }: { speicher: SpeicherStand | null; statistik: Statistik | null }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/10 bg-karte/50 p-5">
|
||||
<div className="flex items-center gap-2.5 font-mono text-[10.5px] tracking-[0.12em] text-nebel">
|
||||
<span className="text-dunst">SPEICHER UND BILANZ</span>
|
||||
<button onClick={() => speicherLaden()} className="ml-auto font-mono text-[10.5px] text-nebel hover:text-dunst" title="Jetzt neu messen">
|
||||
neu messen
|
||||
</button>
|
||||
</div>
|
||||
{speicher === null ? (
|
||||
<p className="mt-3 font-mono text-xs text-nebel">wird gemessen …</p>
|
||||
) : (
|
||||
<div className={`mt-3 grid gap-3 ${speicher.getrennt ? 'sm:grid-cols-2' : ''}`}>
|
||||
{speicher.getrennt ? (
|
||||
<>
|
||||
<Platz name="ARBEITSORDNER (LOKAL)" platz={speicher.arbeit} hinweis="Roh-Dateien und Kompression — eine Blu-ray braucht rund 50 GB." />
|
||||
<Platz name="ABLAGE (SERVER)" platz={speicher.ablage} hinweis="Fertige Filme, Serien und Musik." />
|
||||
</>
|
||||
) : (
|
||||
<Platz name="ABLAGE UND ARBEIT" platz={speicher.ablage} hinweis="Roh-Dateien, Kompression und Fertiges am selben Ort — ein eigener Arbeitsordner geht unter Einstellungen → Ablage." />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{statistik !== null && statistik.discs > 0 && (
|
||||
<div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-4">
|
||||
<Zahl label="DISCS" wert={String(statistik.discs)} zusatz={`${statistik.fertige} fertig`} />
|
||||
<Zahl label="VERLUSTFREI GESICHERT" wert={gbKurz(statistik.rohBytes)} zusatz="Summe aller Rips" />
|
||||
<Zahl label="FERTIG ABGELEGT" wert={gbKurz(statistik.fertigBytes)} zusatz="komprimiert oder verschoben" />
|
||||
<Zahl label="JE DISC" wert={statistik.fertige > 0 ? dauerGrob(statistik.dauerS / statistik.fertige) : '—'} zusatz="Rip bis Ablage, im Schnitt" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Zahl({ label, wert, zusatz }: { label: string; wert: string; zusatz: string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-white/10 bg-samt/70 px-3 py-2">
|
||||
<div className="font-mono text-[9px] tracking-[0.14em] text-nebel">{label}</div>
|
||||
<div className="mt-0.5 font-display text-[19px] font-bold leading-tight text-gold-hell">{wert}</div>
|
||||
<div className="font-mono text-[10px] text-nebel/80">{zusatz}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
// Die Übersicht — Laufwerke, Warteschlange, Speicher und Bilanz, Verlauf,
|
||||
// Ereignisse. Und die Dialoge: Sie leben im Zustand DIESES Bereichs, nicht
|
||||
// in der Kachel (5.4.0: ein leerer Takt der Wache räumte sonst Kachel UND
|
||||
// Dialog ab).
|
||||
import { useState } from 'react'
|
||||
import type { HauptStatus } from '../../gemeinsam/nachrichten'
|
||||
import { IconDisc, LAUFENDE_PHASEN } from '../bausteine'
|
||||
import { AendernDialog } from '../dialoge/AendernDialog'
|
||||
import { TitelWahlDialog } from '../dialoge/TitelWahlDialog'
|
||||
import { automatikStopp, titelLesen, type Verbindung } from '../kernverbindung'
|
||||
import { KompressionsKarte } from './KompressionsKarte'
|
||||
import { LaufwerkKachel } from './LaufwerkKachel'
|
||||
import { SpeicherKarte } from './SpeicherKarte'
|
||||
import { VerlaufKarte } from './VerlaufKarte'
|
||||
|
||||
export function Uebersicht({
|
||||
verbindung,
|
||||
haupt,
|
||||
systemFehler,
|
||||
aufRohDateien,
|
||||
}: {
|
||||
verbindung: Verbindung
|
||||
haupt: HauptStatus | null
|
||||
systemFehler: string[]
|
||||
aufRohDateien: () => void
|
||||
}) {
|
||||
// Sagt ein Update-Knopf NEIN, steht der Grund daneben (R4) — ein Knopf,
|
||||
// der nichts tut und nichts sagt, ist schlimmer als kein Knopf.
|
||||
const [updateHinweis, setUpdateHinweis] = useState('')
|
||||
const [dialog, setDialog] = useState<{ art: 'titel' | 'aendern'; id: string } | null>(null)
|
||||
const einRipLaeuft = Object.values(verbindung.rips).some((r) => LAUFENDE_PHASEN.includes(r.phase))
|
||||
|
||||
return (
|
||||
<>
|
||||
{systemFehler.length > 0 && (
|
||||
<div className="rounded-2xl border border-rot/40 bg-rot/10 p-4">
|
||||
{systemFehler.map((zeile, i) => (
|
||||
<p key={i} className="break-all font-mono text-xs text-rot">
|
||||
✗ {zeile}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* § 6.8: Ein verfügbares Update ist eine SICHTBARE Karte, kein
|
||||
Satz in den Einstellungen. Der Commander musste es am
|
||||
01.09.2026 suchen — gefunden hat er es nicht. */}
|
||||
{haupt !== null && haupt.update.neueVersion.length > 0 && (
|
||||
<div className="rounded-2xl border border-gold/40 bg-gold/10 p-4">
|
||||
<div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
|
||||
<span className="font-display text-lg text-gold-hell">Update verfügbar — Version {haupt.update.neueVersion}</span>
|
||||
<span className="font-mono text-xs text-nebel">du hast {haupt.version}</span>
|
||||
</div>
|
||||
<p className="mt-1 font-mono text-xs text-dunst">{haupt.update.text}</p>
|
||||
{haupt.update.fortschritt >= 0 && !haupt.update.bereit && (
|
||||
<div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-white/10">
|
||||
<div className="h-full rounded-full bg-gold transition-all" style={{ width: `${Math.max(0, Math.min(100, haupt.update.fortschritt))}%` }} />
|
||||
</div>
|
||||
)}
|
||||
{haupt.update.neuerungen.length > 0 && (
|
||||
<div className="mt-3 rounded-xl border border-white/8 bg-buehne/60 p-3">
|
||||
<p className="text-[11px] uppercase tracking-wider text-nebel">Was neu ist</p>
|
||||
<p className="mt-1 whitespace-pre-wrap font-mono text-xs leading-5 text-dunst">{haupt.update.neuerungen}</p>
|
||||
</div>
|
||||
)}
|
||||
{haupt.update.bereit && (
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setUpdateHinweis('')
|
||||
void window.rippy.updateInstallieren().then((urteil) => {
|
||||
if (!urteil.ok) setUpdateHinweis(urteil.grund)
|
||||
})
|
||||
}}
|
||||
disabled={einRipLaeuft}
|
||||
className="rounded-lg border border-gold/40 bg-gold/15 px-3 py-1.5 text-xs font-semibold text-gold-hell hover:bg-gold/25 disabled:opacity-35"
|
||||
title={einRipLaeuft ? 'Erst wenn der Rip fertig ist — Rippy startet dafür neu.' : 'Rippy beendet sich, installiert und startet wieder.'}
|
||||
>
|
||||
Jetzt neu starten und installieren
|
||||
</button>
|
||||
<span className="font-mono text-[11px] text-nebel">… oder einfach nichts tun: Beim nächsten Beenden passiert es von selbst.</span>
|
||||
</div>
|
||||
)}
|
||||
{updateHinweis.length > 0 && <p className="mt-2 font-mono text-xs text-warn">{updateHinweis}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section>
|
||||
{verbindung.laufwerke.length === 0 ? (
|
||||
<div className="flex items-center gap-5 rounded-2xl border border-white/10 bg-karte/50 p-6">
|
||||
<IconDisc groesse={44} farbe="oklch(0.4 0.02 75)" />
|
||||
<p className="font-mono text-xs text-nebel">{verbindung.verbunden ? 'Kein optisches Laufwerk gefunden.' : 'Warte auf den Kern …'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{verbindung.laufwerke.map((geraet) => {
|
||||
const ripVorgangId = verbindung.rips[geraet.id]?.vorgangId ?? ''
|
||||
const laeuft = verbindung.vorgaenge?.kompression.laeuft ?? null
|
||||
const wartend = verbindung.vorgaenge?.kompression.wartend ?? []
|
||||
return (
|
||||
<LaufwerkKachel
|
||||
key={geraet.id}
|
||||
geraet={geraet}
|
||||
rip={verbindung.rips[geraet.id]}
|
||||
info={verbindung.discInfos[geraet.id]}
|
||||
ripStartMs={verbindung.ripStart[geraet.id]}
|
||||
protokoll={verbindung.ripProtokoll[geraet.id] ?? []}
|
||||
verbindung={verbindung}
|
||||
bericht={verbindung.gesundheit[geraet.id]}
|
||||
vorgang={verbindung.vorgaenge?.vorgaenge.find((v) => v.id === ripVorgangId)}
|
||||
kompression={laeuft !== null && laeuft.vorgangId === ripVorgangId ? laeuft : null}
|
||||
wartePlatz={wartend.findIndex((w) => w.vorgangId === ripVorgangId) + 1}
|
||||
automatik={verbindung.automatik[geraet.id]}
|
||||
aufRippen={() => {
|
||||
// Der Nutzer entscheidet selbst — ein Countdown endet.
|
||||
automatikStopp(geraet.id)
|
||||
// Erst die Titel lesen (20-120 s), dann waehlen lassen.
|
||||
setDialog({ art: 'titel', id: geraet.id })
|
||||
titelLesen(geraet.id)
|
||||
}}
|
||||
aufAendern={() => {
|
||||
automatikStopp(geraet.id)
|
||||
setDialog({ art: 'aendern', id: geraet.id })
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{verbindung.vorgaenge !== null && (
|
||||
<section>
|
||||
<KompressionsKarte stand={verbindung.vorgaenge.kompression} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<SpeicherKarte speicher={verbindung.speicher} statistik={verbindung.vorgaenge?.statistik ?? null} />
|
||||
</section>
|
||||
|
||||
{verbindung.vorgaenge !== null && (
|
||||
<section>
|
||||
<VerlaufKarte vorgaenge={verbindung.vorgaenge.vorgaenge} aufAlle={aufRohDateien} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{dialog !== null && dialog.art === 'titel' && (
|
||||
<TitelWahlDialog
|
||||
id={dialog.id}
|
||||
typ={verbindung.laufwerke.find((l) => l.id === dialog.id)?.typ ?? 'bluray'}
|
||||
stand={verbindung.discTitel[dialog.id]}
|
||||
info={verbindung.discInfos[dialog.id]}
|
||||
einstellungen={verbindung.einstellungen}
|
||||
regel={verbindung.vorgaenge?.regel ?? ''}
|
||||
speicher={verbindung.speicher}
|
||||
schliessen={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
{dialog !== null && dialog.art === 'aendern' && (
|
||||
<AendernDialog
|
||||
id={dialog.id}
|
||||
startText={verbindung.discInfos[dialog.id]?.titel ?? ''}
|
||||
vorschlaege={verbindung.vorschlaege[dialog.id] ?? []}
|
||||
schliessen={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{verbindung.meldungen.length > 0 && (
|
||||
<section>
|
||||
<div className="mb-2.5 font-mono text-[10px] tracking-[0.22em] text-nebel">EREIGNISSE</div>
|
||||
<div className="max-h-56 space-y-1 overflow-y-auto rounded-2xl border border-white/10 bg-karte/50 p-4">
|
||||
{verbindung.meldungen.map((zeile, i) => (
|
||||
<p key={i} className="break-all font-mono text-[11px] text-dunst">
|
||||
{zeile}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// Der Verlauf (5.5.0) — die letzten Vorgänge auf einen Blick, statt der
|
||||
// Bibliothek (Commander: „Brauchen wir die wirklich?" — nein: Jellyfin IST
|
||||
// die Bibliothek; die Wiedererkennung braucht keine Ansicht).
|
||||
import type { GeraeteInfo, VorgangEintrag } from '../../gemeinsam/nachrichten'
|
||||
import { Badge, TYP_NAMEN, datumKurz, gb } from '../bausteine'
|
||||
|
||||
const PHASEN_TEXT: Record<VorgangEintrag['phase'], string> = {
|
||||
rippt: 'rippt',
|
||||
wartet: 'wartet',
|
||||
komprimiert: 'komprimiert',
|
||||
'legt-ab': 'legt ab',
|
||||
fertig: 'fertig',
|
||||
fehler: 'Fehler',
|
||||
abgebrochen: 'abgebrochen',
|
||||
}
|
||||
|
||||
export function phasenTon(p: VorgangEintrag['phase']): 'gruen' | 'gelb' | 'blau' | 'grau' {
|
||||
return p === 'fertig' ? 'gruen' : p === 'fehler' || p === 'abgebrochen' ? 'gelb' : p === 'wartet' ? 'grau' : 'blau'
|
||||
}
|
||||
|
||||
export function VerlaufKarte({ vorgaenge, aufAlle }: { vorgaenge: VorgangEintrag[]; aufAlle: () => void }) {
|
||||
if (vorgaenge.length === 0) return null
|
||||
const letzte = vorgaenge.slice(0, 6)
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/10 bg-karte/50 p-5">
|
||||
<div className="flex items-center gap-2.5 font-mono text-[10.5px] tracking-[0.12em] text-nebel">
|
||||
<span className="text-dunst">VERLAUF</span>
|
||||
<span>·</span>
|
||||
<span>die letzten {letzte.length} Vorgänge</span>
|
||||
<button onClick={aufAlle} className="ml-auto font-mono text-[10.5px] text-nebel hover:text-dunst">
|
||||
alle unter Roh-Dateien →
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 space-y-1">
|
||||
{letzte.map((v) => (
|
||||
<div key={v.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-white/8 bg-samt/40 px-3 py-2">
|
||||
<span className="min-w-0 flex-1 truncate font-display text-[14px] font-bold text-schnee" title={v.titel}>
|
||||
{v.titel}
|
||||
{v.jahr !== null && <span className="ml-1 font-medium text-dunst">({v.jahr})</span>}
|
||||
</span>
|
||||
<Badge text={PHASEN_TEXT[v.phase]} ton={phasenTon(v.phase)} />
|
||||
<span className="font-mono text-[10.5px] text-nebel">
|
||||
{(TYP_NAMEN[v.typ as GeraeteInfo['typ']] ?? v.typ).toUpperCase()} · {datumKurz(v.begonnen)}
|
||||
{v.phase === 'fertig' && v.fertigBytes > 0 && ` · ${gb(v.fertigBytes)}`}
|
||||
{!v.rohGeloescht && v.rohBytes > 0 && ` · Roh ${gb(v.rohBytes)}`}
|
||||
</span>
|
||||
{v.phase === 'fertig' && v.zielOrdner.length > 0 && (
|
||||
<button
|
||||
onClick={() => void window.rippy.ordnerOeffnen(v.zielOrdner)}
|
||||
className="font-mono text-[10.5px] text-nebel hover:text-dunst"
|
||||
title={v.zielOrdner}
|
||||
>
|
||||
Ordner öffnen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user