feat(v5): 5.6.0 — Vorgangs-Leiste, mehrere Filme je Disc, Filmnamen für Ordner und Dateien, Untertitel-Vorwahl je Extra, Restzeit, Hell-Modus
Die sechs Punkte des Commanders vom 02.09.2026 abends und seine Entscheide:
* Restzeit der Kompression aus HandBrakes eigener ETA-Klammer (Formatstring
aus dem Binary 1.11.2 gelesen), KompressionStand.restS.
* Kachel zeigt nach dem Rip nur noch eine Zeile — Balken, Prozent, Ziel in
der Kompressions-Karte und im Verlauf ("nur in der Kompressions-Karte").
* Kopfzeile bleibt beim Scrollen stehen (sticky), Sektionswahl darunter.
* Untertitel-Vorwahl je Extra ("NUR für Extras, IMMER OPTIONAL"): welche
Untertitel-Spur beim Abspielen an ist — weiche Spur, nie eingebrannt;
RipAuftragTitel/RohDatei.untertitelVorwahl, sprachwahl.
* Mehrere Filme je Disc: "anderer Film …" je Titel mit TMDb-Suche;
filme.ts filmGruppen trennt am Rip-Ende in eigene Roh-Ordner, Vorgänge
und Kompressions-Aufträge mit voller Zuordnung (erkennung.zuordnungAus).
* Roh-Ordner und Dateien tragen den Filmnamen (filme.ts rohOrdnerName,
ablage/dateinamen.ts: Akira (1988).mkv, - Fassung n, - Extra nn).
* Hell-Modus: Einstellung design (dunkel/hell/system), data-design auf
<html>, Token --color-tinte statt white/-Alpha-Klassen.
* Vorgangs-Leiste (Commander: "Phase 1–4 plus Komprimierung — zu einem
machen"): gemeinsam/vorgangsleiste.ts + uebersicht/VorgangsLeiste.tsx,
vier Stationen (Rettung als Zwischenstation), Segment-Balken in der
aktiven Station; Kachel, Kompressions-Karte, Verlauf. PHASE-x/4-Texte weg.
* Automatik-Kasten leert sich, sobald ein Rip startet.
Beweise: 446 Tests (neu: filme, dateinamen, vorgangsleiste; erweitert:
auftrag, handbrake, automatik, ablegen), drei Typprüfungen, Klick-Beweis
33 Schritte inkl. Vorwahl, anderer Film, Vorgangs-Leiste, Restzeit,
Hell-Modus (Bilder beweise/klick/01…11).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
76ed3b337a
commit
f5dab5d1c1
@@ -37,7 +37,7 @@ function istHauptStatus(wert: unknown): wert is HauptStatus {
|
||||
/** Eine LED der Fußleiste (5.5.0): grün/gelb/rot/grau plus Klartext —
|
||||
* statt PID und Ping-Millisekunden aus dem Gerüst-Beweis. */
|
||||
function Led({ ton, text, titel }: { ton: 'gruen' | 'warn' | 'rot' | 'grau'; text: string; titel?: string }) {
|
||||
const farbe = ton === 'gruen' ? 'bg-gruen' : ton === 'warn' ? 'bg-warn' : ton === 'rot' ? 'bg-rot' : 'bg-white/25'
|
||||
const farbe = ton === 'gruen' ? 'bg-gruen' : ton === 'warn' ? 'bg-warn' : ton === 'rot' ? 'bg-rot' : 'bg-tinte/25'
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5" title={titel}>
|
||||
<span className={`inline-block h-1.5 w-1.5 rounded-full ${farbe}`} />
|
||||
@@ -65,6 +65,22 @@ export default function App() {
|
||||
return aufVerbindung(setVerbindung)
|
||||
}, [])
|
||||
|
||||
// 5.6.0 Hell-Modus: die Einstellung „design" schaltet data-design auf
|
||||
// <html> (stil.css überschreibt dann die Farb-Tokens); „system" folgt
|
||||
// Windows.
|
||||
const design = verbindung.einstellungen['design'] ?? 'dunkel'
|
||||
useEffect(() => {
|
||||
const anwenden = (): void => {
|
||||
const hell = design === 'hell' || (design === 'system' && window.matchMedia('(prefers-color-scheme: light)').matches)
|
||||
document.documentElement.dataset['design'] = hell ? 'hell' : 'dunkel'
|
||||
}
|
||||
anwenden()
|
||||
if (design !== 'system') return
|
||||
const mq = window.matchMedia('(prefers-color-scheme: light)')
|
||||
mq.addEventListener('change', anwenden)
|
||||
return () => mq.removeEventListener('change', anwenden)
|
||||
}, [design])
|
||||
|
||||
const db = verbindung.kern?.datenbank ?? null
|
||||
const einRipLaeuft = Object.values(verbindung.rips).some((r) => LAUFENDE_PHASEN.includes(r.phase))
|
||||
|
||||
@@ -85,7 +101,7 @@ export default function App() {
|
||||
<button
|
||||
onClick={() => setBereich({ name: ziel })}
|
||||
className={`rounded-full px-4 py-1.5 text-[13px] ${
|
||||
bereich.name === ziel ? 'border border-gold/40 bg-gold/15 font-semibold text-gold-hell' : 'border border-transparent text-dunst hover:bg-white/5 hover:text-schnee'
|
||||
bereich.name === ziel ? 'border border-gold/40 bg-gold/15 font-semibold text-gold-hell' : 'border border-transparent text-dunst hover:bg-tinte/5 hover:text-schnee'
|
||||
}`}
|
||||
>
|
||||
{text}
|
||||
@@ -109,12 +125,14 @@ export default function App() {
|
||||
{/* Die Kopfzeile IST die Titelleiste: Sie ist die Ziehfläche des
|
||||
rahmenlosen Fensters (§ 4.2). Alles Bedienbare darin trägt
|
||||
`nicht-ziehbar`, sonst schluckt der Griff den Klick. */}
|
||||
<header className="ziehbar relative flex-none border-b border-white/8">
|
||||
{/* 5.6.0: Die Kopfzeile bleibt beim Scrollen stehen (Commander) —
|
||||
sticky statt relative, mit Bühnen-Hintergrund und Weichzeichner. */}
|
||||
<header className="ziehbar sticky top-0 z-40 flex-none border-b border-tinte/8 bg-buehne/85 backdrop-blur-md">
|
||||
<div className="mx-auto flex w-full max-w-[1600px] items-center gap-3 py-2 pl-5 pr-0 sm:pl-7">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<IconDisc groesse={28} farbe="oklch(0.83 0.11 75)" />
|
||||
<h1 className="font-display text-[22px] font-bold tracking-tight sm:text-[25px]">Rippy</h1>
|
||||
<span className="hidden rounded-md border border-white/12 px-2 py-0.5 font-mono text-[10px] text-nebel md:inline">v{haupt?.version ?? '…'}</span>
|
||||
<span className="hidden rounded-md border border-tinte/12 px-2 py-0.5 font-mono text-[10px] text-nebel md:inline">v{haupt?.version ?? '…'}</span>
|
||||
{einRipLaeuft && (
|
||||
<span className="inline-flex flex-none items-center gap-2 rounded-md border border-rec/45 bg-rec/12 px-2.5 py-0.5 font-mono text-[10px] tracking-[0.15em] text-[oklch(0.83_0.12_50)]">
|
||||
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-rec shadow-[0_0_9px_oklch(0.72_0.17_45/0.9)]" />
|
||||
@@ -150,7 +168,7 @@ export default function App() {
|
||||
{!setupOffen && bereich.name === 'einstellungen' && <Einstellungen verbindung={verbindung} haupt={haupt} start={bereich.start} />}
|
||||
</main>
|
||||
|
||||
<footer className="relative flex flex-wrap items-center gap-x-6 gap-y-1 border-t border-white/8 px-7 py-3 font-mono text-[10px] tracking-[0.08em] text-nebel">
|
||||
<footer className="relative flex flex-wrap items-center gap-x-6 gap-y-1 border-t border-tinte/8 px-7 py-3 font-mono text-[10px] tracking-[0.08em] text-nebel">
|
||||
<Led ton={verbindung.kern !== null ? 'gruen' : haupt?.kern.laeuft === true ? 'warn' : 'rot'} text="KERN" titel={verbindung.kern !== null ? `läuft (PID ${verbindung.kern.pid})` : 'wartet'} />
|
||||
<Led ton={db === null ? 'grau' : db.ok ? 'gruen' : 'rot'} text="DATENBANK" titel={db !== null && db.ok ? db.pfad : db?.fehler} />
|
||||
<Led
|
||||
|
||||
@@ -37,6 +37,17 @@ export function datumKurz(iso: string | null): string {
|
||||
return iso.slice(0, 16).replace('T', ' ')
|
||||
}
|
||||
|
||||
/** Restzeit in Sekunden als Klartext (5.6.0, HandBrakes ETA): -1/fehlend =
|
||||
* noch keine Angabe. */
|
||||
export function restText(restS: number | undefined): string {
|
||||
if (restS === undefined || restS < 0) return 'Restzeit wird berechnet …'
|
||||
if (restS < 60) return `noch ${Math.max(1, Math.round(restS))} s`
|
||||
if (restS < 3600) return `noch ~${Math.ceil(restS / 60)} min`
|
||||
const h = Math.floor(restS / 3600)
|
||||
const m = Math.round((restS - h * 3600) / 60)
|
||||
return `noch ~${h} h ${String(m).padStart(2, '0')} min`
|
||||
}
|
||||
|
||||
export function restzeitText(prozent: number, startMs: number | undefined): string {
|
||||
if (startMs === undefined || prozent <= 2 || prozent >= 100) return ''
|
||||
const verstrichen = (Date.now() - startMs) / 1000
|
||||
@@ -119,11 +130,11 @@ export const TYP_NAMEN: Record<GeraeteInfo['typ'], string> = {
|
||||
}
|
||||
|
||||
export const PHASEN_MONO: Record<RipStatus['phase'], string> = {
|
||||
'liest-info': 'PHASE 1/4 — LIEST TITEL-INFO',
|
||||
'liest-info': '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',
|
||||
rippt: 'RIPPT (VERLUSTFREI)',
|
||||
komprimiert: 'KOMPRIMIERT',
|
||||
'legt-ab': 'LEGT AB',
|
||||
fertig: 'FERTIG',
|
||||
fehler: 'FEHLER',
|
||||
abgebrochen: 'ABGEBROCHEN',
|
||||
@@ -132,9 +143,9 @@ export const PHASEN_MONO: Record<RipStatus['phase'], string> = {
|
||||
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'
|
||||
'mt-1 w-full rounded-lg border border-tinte/12 bg-samt px-3 py-2 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none'
|
||||
|
||||
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_LEISE = 'rounded-lg border border-tinte/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'
|
||||
|
||||
@@ -227,7 +238,7 @@ export function FensterKnopf({
|
||||
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'
|
||||
rot ? 'hover:bg-rot hover:text-[#fff]' : 'hover:bg-tinte/10 hover:text-schnee'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
@@ -241,7 +252,7 @@ export function Badge({ text, ton }: { text: string; ton: 'gruen' | 'gelb' | 'bl
|
||||
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',
|
||||
grau: 'border-tinte/15 bg-tinte/5 text-dunst',
|
||||
}
|
||||
return (
|
||||
<span className={`inline-block rounded-full border px-2.5 py-0.5 text-[11px] leading-4 ${farben[ton]}`}>
|
||||
@@ -253,7 +264,7 @@ export function Badge({ text, ton }: { text: string; ton: 'gruen' | 'gelb' | 'bl
|
||||
/** 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="rounded-lg border border-tinte/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}
|
||||
@@ -274,7 +285,7 @@ export function SegmentBalken({ prozent }: { prozent: number }) {
|
||||
<div
|
||||
key={i}
|
||||
className={`h-3.5 flex-1 rounded-[3px] ${
|
||||
i < voll ? 'segment-gluehen' : i === voll && halb ? 'bg-gold/45' : 'bg-white/8'
|
||||
i < voll ? 'segment-gluehen' : i === voll && halb ? 'bg-gold/45' : 'bg-tinte/8'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
@@ -286,7 +297,7 @@ export function SegmentBalken({ prozent }: { prozent: number }) {
|
||||
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-1.5 w-full overflow-hidden rounded-full bg-tinte/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>
|
||||
)
|
||||
@@ -302,7 +313,7 @@ export function Schalter({ an, aufWechsel, label }: { an: boolean; aufWechsel: (
|
||||
<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'
|
||||
an ? 'bg-gradient-to-b from-gold-hell to-gold-tief' : 'bg-tinte/12'
|
||||
}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 h-4 w-4 rounded-full bg-schnee shadow transition-all ${an ? 'left-[18px]' : 'left-0.5'}`} />
|
||||
@@ -325,7 +336,7 @@ export function SektionsKarte({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="scroll-mt-4 rounded-2xl border border-white/10 bg-karte/50 p-5">
|
||||
<section id={id} className="scroll-mt-4 rounded-2xl border border-tinte/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>
|
||||
@@ -452,7 +463,7 @@ export function DialogRahmen({
|
||||
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`}
|
||||
className={`max-h-[85vh] w-full ${breite} overflow-y-auto rounded-2xl border border-tinte/12 bg-buehne p-5 shadow-2xl shadow-black/60`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -32,7 +32,7 @@ export function AendernDialog({
|
||||
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"
|
||||
className="flex-1 rounded-lg border border-tinte/12 bg-samt px-3 py-2 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => metadatenSuchen(id, text)}
|
||||
@@ -52,7 +52,7 @@ export function AendernDialog({
|
||||
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"
|
||||
className="flex w-full items-center gap-3 rounded-xl border border-tinte/10 bg-karte/60 p-2 text-left hover:border-gold/50 hover:bg-karte"
|
||||
>
|
||||
{v.posterPfad.length > 0 ? (
|
||||
<img src={posterUrlKlein(v.posterPfad)} alt="" className="h-16 w-11 rounded-md object-cover" />
|
||||
@@ -73,7 +73,7 @@ export function AendernDialog({
|
||||
</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">
|
||||
<button onClick={schliessen} className="rounded-lg border border-tinte/15 px-4 py-1.5 text-xs text-dunst hover:bg-tinte/5">
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -5,20 +5,25 @@
|
||||
// 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).
|
||||
// 5.6.0 (Commander): Je Extra WELCHE Untertitel-Spur beim Abspielen
|
||||
// vorgewählt ist (weiche Spur, nie eingebrannt, immer optional) — und je
|
||||
// Titel „anderer Film …": Double Feature, Trilogie-Disc, Bonus-Film bekommen
|
||||
// eigenen Roh-Ordner, Vorgang und Zielordner.
|
||||
import { useState } from 'react'
|
||||
import { zielVorschau } from '../../gemeinsam/ablagepfad'
|
||||
import { sichererName, zielVorschau } from '../../gemeinsam/ablagepfad'
|
||||
import { platzUrteil } from '../../gemeinsam/platz'
|
||||
import type {
|
||||
DiscInfoStand,
|
||||
DiscTitelVorschlag,
|
||||
GeraeteInfo,
|
||||
MetaVorschlag,
|
||||
SpeicherStand,
|
||||
SprachEintrag,
|
||||
TitelRolle,
|
||||
TitelStand,
|
||||
} from '../../gemeinsam/nachrichten'
|
||||
import { DialogRahmen, KNOPF_GOLD, dauerText, gb, gbKurz, sprachenVorbelegt } from '../bausteine'
|
||||
import { ripStarten } from '../kernverbindung'
|
||||
import { DialogRahmen, IconDisc, KNOPF_GOLD, dauerText, gb, gbKurz, posterUrlKlein, sprachenVorbelegt } from '../bausteine'
|
||||
import { metadatenSuchen, ripStarten } from '../kernverbindung'
|
||||
|
||||
/** Sprach-Chips eines Titels — anklickbar, außerhalb des Auswahl-Labels
|
||||
* (ein Knopf IM Label würde die Checkbox mit umschalten). */
|
||||
@@ -45,7 +50,7 @@ function SprachChips({
|
||||
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'
|
||||
an ? 'border-gold/50 bg-gold/15 text-gold-hell' : 'border-tinte/12 text-nebel hover:text-dunst'
|
||||
}`}
|
||||
title={`${s.sprache}${s.spuren > 1 ? ` (${s.spuren} Spuren)` : ''}`}
|
||||
>
|
||||
@@ -59,6 +64,13 @@ function SprachChips({
|
||||
)
|
||||
}
|
||||
|
||||
/** Was Rippys Regel für diesen Titel vorwählen würde (dieselbe Regel wie
|
||||
* kern/ablauf/auftrag.ts sprachwahl) — '' wenn nichts. */
|
||||
function regelVorwahl(audio: readonly string[], untertitel: readonly string[], wunsch: string): string {
|
||||
if (wunsch.length === 0 || audio.length === 0 || audio[0] === wunsch) return ''
|
||||
return untertitel.includes(wunsch) ? wunsch : ''
|
||||
}
|
||||
|
||||
export function TitelWahlDialog({
|
||||
id,
|
||||
typ,
|
||||
@@ -67,6 +79,7 @@ export function TitelWahlDialog({
|
||||
einstellungen,
|
||||
regel,
|
||||
speicher,
|
||||
vorschlaege,
|
||||
schliessen,
|
||||
}: {
|
||||
id: string
|
||||
@@ -78,6 +91,8 @@ export function TitelWahlDialog({
|
||||
* Roh-Material passiert. */
|
||||
regel: string
|
||||
speicher: SpeicherStand | null
|
||||
/** Treffer der Metadaten-Suche (für „anderer Film …"). */
|
||||
vorschlaege: MetaVorschlag[]
|
||||
schliessen: () => void
|
||||
}) {
|
||||
const [gewaehlt, setGewaehlt] = useState<Set<number> | null>(null)
|
||||
@@ -87,6 +102,12 @@ export function TitelWahlDialog({
|
||||
// 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[] }>>({})
|
||||
// 5.6.0: Untertitel-Vorwahl je Extra — fehlt: Rippys Regel; null: keine;
|
||||
// sonst die Sprache. Immer optional, nie eingebrannt.
|
||||
const [vorwahl, setVorwahl] = useState<Record<number, string | null>>({})
|
||||
// 5.6.0: Titel, die zu einem anderen Film gehören.
|
||||
const [filme, setFilme] = useState<Record<number, MetaVorschlag>>({})
|
||||
const [filmSuche, setFilmSuche] = useState<{ nr: number; text: string } | null>(null)
|
||||
// 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").
|
||||
@@ -115,20 +136,32 @@ export function TitelWahlDialog({
|
||||
else neu.add(nr)
|
||||
setGewaehlt(neu)
|
||||
}
|
||||
const wunschSprache = (einstellungen['audioSprachen'] ?? '').split(',')[0]?.trim().toLowerCase() ?? ''
|
||||
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 eigeneTitel = gewaehlteTitel.filter((t) => filme[t.nr] === undefined)
|
||||
const hauptTitel = eigeneTitel.filter((t) => rolleVon(t) !== 'extra').length
|
||||
const extras = eigeneTitel.filter((t) => rolleVon(t) === 'extra').length
|
||||
// Andere Filme (5.6.0): je Film die Zahl der Titel, für die Vorschau.
|
||||
const andereFilme = new Map<number, { film: MetaVorschlag; titel: number }>()
|
||||
for (const t of gewaehlteTitel) {
|
||||
const f = filme[t.nr]
|
||||
if (f === undefined) continue
|
||||
const e = andereFilme.get(f.tmdbId)
|
||||
if (e !== undefined) e.titel += 1
|
||||
else andereFilme.set(f.tmdbId, { film: f, titel: 1 })
|
||||
}
|
||||
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 ablage = einstellungen['ablage'] ?? 'Videos\\Rippy'
|
||||
const vorschau = zielVorschau({
|
||||
ablage: einstellungen['ablage'] ?? 'Videos\\Rippy',
|
||||
ablage,
|
||||
alsSerie,
|
||||
titel: info?.titel ?? '',
|
||||
jahr: info?.jahr ?? null,
|
||||
@@ -141,6 +174,7 @@ export function TitelWahlDialog({
|
||||
// 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 }
|
||||
const filmTreffer = vorschlaege.filter((v) => v.typ === 'movie')
|
||||
|
||||
return (
|
||||
<DialogRahmen schliessen={schliessen} breite="max-w-3xl">
|
||||
@@ -174,14 +208,14 @@ export function TitelWahlDialog({
|
||||
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"
|
||||
className="rounded-lg border border-tinte/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">
|
||||
<button onClick={() => setGewaehlt(new Set(alle.map((t) => t.nr)))} className="rounded-lg border border-tinte/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">
|
||||
<button onClick={() => setGewaehlt(new Set())} className="rounded-lg border border-tinte/15 px-2.5 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Nichts
|
||||
</button>
|
||||
</div>
|
||||
@@ -190,8 +224,12 @@ export function TitelWahlDialog({
|
||||
{alle.map((t) => {
|
||||
const an = aktiv.has(t.nr)
|
||||
const wahl = sprachenVon(t)
|
||||
const rolle = rolleVon(t)
|
||||
const film = filme[t.nr]
|
||||
const regelWahl = regelVorwahl(wahl.audio.length > 0 ? wahl.audio : t.sprachen.audio.map((s) => s.lang), wahl.untertitel, wunschSprache)
|
||||
const vorwahlWert = t.nr in vorwahl ? (vorwahl[t.nr] === null ? 'keine' : vorwahl[t.nr]!) : 'regel'
|
||||
return (
|
||||
<div key={t.nr} className={`rounded-lg border ${an ? 'border-gold/40 bg-gold/8' : 'border-white/8 bg-samt/40'}`}>
|
||||
<div key={t.nr} className={`rounded-lg border ${an ? 'border-gold/40 bg-gold/8' : 'border-tinte/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>
|
||||
@@ -200,10 +238,10 @@ export function TitelWahlDialog({
|
||||
<span className="hidden w-20 flex-none font-mono text-[11px] text-nebel sm:inline">{t.kapitel} Kap.</span>
|
||||
{an ? (
|
||||
<select
|
||||
value={rolleVon(t)}
|
||||
value={rolle}
|
||||
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"
|
||||
className="flex-none rounded-lg border border-tinte/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>
|
||||
@@ -218,12 +256,126 @@ export function TitelWahlDialog({
|
||||
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">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-tinte/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>
|
||||
)}
|
||||
{/* 5.6.0: Vorwahl NUR bei Extras, IMMER optional — eine
|
||||
weiche Spur, die der Spieler von selbst einblendet;
|
||||
eingebrannt wird nie. */}
|
||||
{rolle === 'extra' && wahl.untertitel.length > 0 && (
|
||||
<label className="inline-flex items-center gap-1.5" title="Weiche Untertitel-Spur, die beim Abspielen schon an ist — nichts wird eingebrannt. Leer lassen ist immer erlaubt.">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">BEIM ABSPIELEN AN</span>
|
||||
<select
|
||||
value={vorwahlWert}
|
||||
onChange={(e) => {
|
||||
const w = e.target.value
|
||||
const neu = { ...vorwahl }
|
||||
if (w === 'regel') delete neu[t.nr]
|
||||
else neu[t.nr] = w === 'keine' ? null : w
|
||||
setVorwahl(neu)
|
||||
}}
|
||||
className="rounded-md border border-tinte/15 bg-samt/70 px-1.5 py-0.5 font-mono text-[10.5px] text-dunst"
|
||||
>
|
||||
<option value="regel">{regelWahl.length > 0 ? `Rippys Regel (${regelWahl})` : 'Rippys Regel (keine)'}</option>
|
||||
<option value="keine">keine</option>
|
||||
{wahl.untertitel.map((u) => (
|
||||
<option key={u} value={u}>
|
||||
{u}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* 5.6.0: „anderer Film …" — Double Feature, Trilogie-Disc,
|
||||
Bonus-Film: eigener Roh-Ordner, Vorgang und Zielordner. */}
|
||||
{an && rolle !== 'folge' && (
|
||||
<div className="flex flex-wrap items-center gap-2 border-t border-tinte/8 px-2 py-1.5 pl-9">
|
||||
{film !== undefined ? (
|
||||
<>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-md border border-gold/40 bg-gold/12 px-2 py-0.5 text-[11px] text-gold-hell">
|
||||
→ eigener Film: {film.titel}
|
||||
{film.jahr !== null ? ` (${film.jahr})` : ''}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const neu = { ...filme }
|
||||
delete neu[t.nr]
|
||||
setFilme(neu)
|
||||
}}
|
||||
className="ml-1 text-nebel hover:text-rot"
|
||||
title="wieder zur Disc-Zuordnung"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFilmSuche(filmSuche?.nr === t.nr ? null : { nr: t.nr, text: '' })}
|
||||
className="rounded-md border border-tinte/15 px-2 py-0.5 text-[11px] text-nebel hover:text-schnee"
|
||||
title="Dieser Titel ist ein anderer Film (Double Feature, Bonus-Film): eigener Ordner mit Poster und Infodatei"
|
||||
>
|
||||
anderer Film …
|
||||
</button>
|
||||
)}
|
||||
{filmSuche?.nr === t.nr && (
|
||||
<div className="w-full rounded-lg border border-tinte/10 bg-buehne/70 p-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={filmSuche.text}
|
||||
autoFocus
|
||||
onChange={(e) => setFilmSuche({ nr: t.nr, text: e.target.value })}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') metadatenSuchen(id, filmSuche.text)
|
||||
}}
|
||||
placeholder="Filmtitel suchen …"
|
||||
className="flex-1 rounded-lg border border-tinte/12 bg-samt px-3 py-1.5 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => metadatenSuchen(id, filmSuche.text)}
|
||||
className="rounded-lg border border-gold/50 bg-gold/10 px-3 py-1.5 text-xs font-semibold text-gold-hell hover:bg-gold/20"
|
||||
>
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
{filmTreffer.length === 0 ? (
|
||||
<p className="mt-2 font-mono text-[10.5px] text-nebel">Noch keine Treffer — Titel eingeben und suchen (braucht den TMDb-Schlüssel).</p>
|
||||
) : (
|
||||
<div className="mt-2 max-h-48 space-y-1 overflow-y-auto">
|
||||
{filmTreffer.map((v) => (
|
||||
<button
|
||||
key={v.tmdbId}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFilme({ ...filme, [t.nr]: v })
|
||||
setFilmSuche(null)
|
||||
}}
|
||||
className="flex w-full items-center gap-2 rounded-lg border border-tinte/10 bg-karte/60 p-1.5 text-left hover:border-gold/50"
|
||||
>
|
||||
{v.posterPfad.length > 0 ? (
|
||||
<img src={posterUrlKlein(v.posterPfad)} alt="" className="h-10 w-7 rounded object-cover" />
|
||||
) : (
|
||||
<span className="flex h-10 w-7 items-center justify-center rounded bg-samt">
|
||||
<IconDisc groesse={14} farbe="oklch(0.55 0.015 80)" />
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-schnee">
|
||||
{v.titel}
|
||||
{v.jahr !== null ? ` (${v.jahr})` : ''}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -233,7 +385,7 @@ export function TitelWahlDialog({
|
||||
</div>
|
||||
|
||||
{alsSerie && (
|
||||
<div className="mt-3 flex flex-wrap items-end gap-3 rounded-xl border border-white/8 bg-samt/40 p-3">
|
||||
<div className="mt-3 flex flex-wrap items-end gap-3 rounded-xl border border-tinte/8 bg-samt/40 p-3">
|
||||
<label className="block">
|
||||
<span className="font-mono text-[10px] tracking-wider text-nebel">STAFFEL</span>
|
||||
<input
|
||||
@@ -242,7 +394,7 @@ export function TitelWahlDialog({
|
||||
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"
|
||||
className="mt-1 block w-20 rounded-lg border border-tinte/12 bg-buehne px-2 py-1 font-mono text-xs text-schnee"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
@@ -253,7 +405,7 @@ export function TitelWahlDialog({
|
||||
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"
|
||||
className="mt-1 block w-28 rounded-lg border border-tinte/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">
|
||||
@@ -266,11 +418,25 @@ export function TitelWahlDialog({
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
einiges — zwei Zeilen Zielpfad ersparen Überraschungen. 5.6.0:
|
||||
jeder weitere Film bekommt seine Zeile. */}
|
||||
<div className="mt-3 rounded-xl border border-tinte/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>
|
||||
{eigeneTitel.length > 0 && (
|
||||
<>
|
||||
<p className="break-all text-gold-hell">{vorschau[0]}</p>
|
||||
<p className="text-dunst">{vorschau[1]}</p>
|
||||
</>
|
||||
)}
|
||||
{[...andereFilme.values()].map(({ film, titel }) => (
|
||||
<p key={film.tmdbId} className="break-all text-gold-hell">
|
||||
{`${ablage.replace(/[\\/]+$/, '')}\\Filme\\${sichererName(film.titel, film.jahr) || film.titel}\\`}
|
||||
<span className="text-dunst">
|
||||
{' '}
|
||||
— {titel} {titel === 1 ? 'Titel' : 'Titel'}, eigener Vorgang mit Poster und Infodatei
|
||||
</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Platz-Prüfung (5.5.0): 40 Minuten Lesen sollen nicht an einem
|
||||
@@ -297,7 +463,7 @@ export function TitelWahlDialog({
|
||||
)}
|
||||
|
||||
<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">
|
||||
<button onClick={schliessen} className="rounded-lg border border-tinte/15 px-4 py-1.5 text-xs text-dunst hover:text-schnee">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
@@ -306,13 +472,16 @@ export function TitelWahlDialog({
|
||||
id,
|
||||
gewaehlteTitel.map((t) => {
|
||||
const wahl = sprachenVon(t)
|
||||
const rolle = rolleVon(t)
|
||||
return {
|
||||
nr: t.nr,
|
||||
rolle: rolleVon(t),
|
||||
rolle,
|
||||
dauerS: t.dauerS,
|
||||
groesseBytes: t.groesseBytes,
|
||||
audioSprachen: wahl.audio,
|
||||
untertitelSprachen: wahl.untertitel,
|
||||
...(rolle === 'extra' && t.nr in vorwahl ? { untertitelVorwahl: vorwahl[t.nr] } : {}),
|
||||
...(filme[t.nr] !== undefined ? { film: filme[t.nr] } : {}),
|
||||
}
|
||||
}),
|
||||
{ staffel: alsSerie ? staffelZahl : null, ersteFolge: alsSerie ? folgeZahl : null },
|
||||
|
||||
@@ -78,7 +78,7 @@ export function ErstEinrichtung({ verbindung }: { verbindung: Verbindung }) {
|
||||
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="relative mx-auto max-w-2xl space-y-7 rounded-2xl border border-tinte/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
|
||||
@@ -149,7 +149,7 @@ export function ErstEinrichtung({ verbindung }: { verbindung: Verbindung }) {
|
||||
<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">
|
||||
<div className="rounded-xl border border-tinte/8 bg-samt/50 p-3">
|
||||
{werkzeuge === null ? (
|
||||
<p className="font-mono text-xs text-nebel">Encoder werden gemessen …</p>
|
||||
) : backends.length === 0 ? (
|
||||
@@ -165,7 +165,7 @@ export function ErstEinrichtung({ verbindung }: { verbindung: Verbindung }) {
|
||||
<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">
|
||||
<div key={typ} className="rounded-lg border border-tinte/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>
|
||||
@@ -243,7 +243,7 @@ export function ErstEinrichtung({ verbindung }: { verbindung: Verbindung }) {
|
||||
)}
|
||||
|
||||
<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">
|
||||
<button onClick={() => setSchritt((s) => Math.max(0, s - 1))} disabled={schritt === 0} className="rounded-lg border border-tinte/15 px-4 py-1.5 text-xs text-dunst hover:text-schnee disabled:opacity-35">
|
||||
Zurück
|
||||
</button>
|
||||
{schritt < SCHRITTE.length - 1 ? (
|
||||
|
||||
@@ -49,13 +49,13 @@ export function Einstellungen({ verbindung, haupt, start }: { verbindung: Verbin
|
||||
// 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">
|
||||
<nav className="flex flex-row flex-wrap gap-1 lg:sticky lg:top-[76px] 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'
|
||||
aktiv === id ? 'border border-gold/40 bg-gold/12 font-semibold text-gold-hell' : 'border border-transparent text-dunst hover:bg-tinte/5 hover:text-schnee'
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
|
||||
@@ -66,7 +66,7 @@ export function AblageKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
{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">
|
||||
<div className="rounded-xl border border-tinte/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>
|
||||
@@ -238,7 +238,7 @@ export function RohDateienKarte({ verbindung, aktivFuer }: { verbindung: Verbind
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
<div className="rounded-xl border border-tinte/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
{v === null ? (
|
||||
<p>Belegung wird gemessen …</p>
|
||||
) : (
|
||||
@@ -258,7 +258,7 @@ export function RohDateienKarte({ verbindung, aktivFuer }: { verbindung: Verbind
|
||||
{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 key={e.id} className="rounded-xl border border-tinte/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}
|
||||
@@ -293,7 +293,7 @@ export function RohDateienKarte({ verbindung, aktivFuer }: { verbindung: Verbind
|
||||
<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"
|
||||
className="rounded-lg border border-tinte/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>
|
||||
@@ -318,12 +318,12 @@ export function RohDateienKarte({ verbindung, aktivFuer }: { verbindung: Verbind
|
||||
</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">
|
||||
<button onClick={() => void window.rippy.ordnerOeffnen(e.zielOrdner)} className="rounded-lg border border-tinte/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">
|
||||
<button onClick={() => kompressionAbbrechen(e.id)} className="rounded-lg border border-tinte/15 px-3 py-1 text-[11px] text-dunst hover:text-rot">
|
||||
Kompression abbrechen
|
||||
</button>
|
||||
)}
|
||||
@@ -401,7 +401,7 @@ export function MakemkvKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
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">
|
||||
<div className="rounded-xl border border-tinte/8 bg-buehne/60 p-3">
|
||||
{s === null ? (
|
||||
<p className="font-mono text-xs text-nebel">Schlüssel wird geprüft …</p>
|
||||
) : (
|
||||
@@ -437,10 +437,10 @@ export function MakemkvKarte({ verbindung }: { verbindung: Verbindung }) {
|
||||
</button>
|
||||
</div>
|
||||
{b !== null && (
|
||||
<div className="rounded-lg border border-white/10 bg-buehne/70 p-2.5">
|
||||
<div className="rounded-lg border border-tinte/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="mt-1.5 h-1.5 overflow-hidden rounded-full bg-tinte/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>
|
||||
)}
|
||||
@@ -519,6 +519,14 @@ export function AllgemeinKarte({ verbindung, haupt }: { verbindung: Verbindung;
|
||||
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)" />
|
||||
<label className="block max-w-sm">
|
||||
<span className="text-xs font-semibold text-dunst">Erscheinungsbild</span>
|
||||
<select value={werte['design'] ?? 'dunkel'} onChange={(e) => setzen('design', e.target.value)} className={FELD_KLASSE}>
|
||||
<option value="dunkel">Dunkel — der Kinosaal (Vorgabe)</option>
|
||||
<option value="hell">Hell — Papier und Gold</option>
|
||||
<option value="system">Wie Windows eingestellt</option>
|
||||
</select>
|
||||
</label>
|
||||
<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
|
||||
@@ -532,7 +540,7 @@ export function AllgemeinKarte({ verbindung, haupt }: { verbindung: Verbindung;
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/8 bg-buehne/60 p-3 font-mono text-[11px] leading-5 text-nebel">
|
||||
<div className="rounded-xl border border-tinte/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})`}
|
||||
@@ -559,7 +567,7 @@ export function UpdateKarte({ verbindung, haupt }: { verbindung: Verbindung; hau
|
||||
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">
|
||||
<div className="rounded-xl border border-tinte/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>
|
||||
@@ -597,7 +605,7 @@ function WerkzeugZeile({
|
||||
wert: string
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/8 bg-samt/50 p-3">
|
||||
<div className="rounded-xl border border-tinte/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>
|
||||
|
||||
@@ -30,7 +30,7 @@ export function SprachAuswahl({
|
||||
<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">
|
||||
<div className="mt-1 flex min-h-[38px] flex-wrap items-center gap-1.5 rounded-lg border border-tinte/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">
|
||||
@@ -53,7 +53,7 @@ export function SprachAuswahl({
|
||||
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"
|
||||
className="ml-auto rounded-md border border-tinte/12 bg-buehne px-2 py-1 font-mono text-[11px] text-dunst"
|
||||
>
|
||||
<option value="">+ Sprache …</option>
|
||||
{frei.map((s) => (
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
--color-gruen: oklch(0.78 0.13 150);
|
||||
--color-warn: oklch(0.8 0.12 85);
|
||||
--color-rot: oklch(0.68 0.19 25);
|
||||
|
||||
/* Linien und Flächen mit Alpha: im Dunkeln Weiß, im Hellen Tinte (5.6.0). */
|
||||
--color-tinte: oklch(1 0 0);
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -73,8 +76,8 @@
|
||||
|
||||
/* Dezente Scrollbalken — helle Standardbalken zerschneiden die Bühne. */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-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-thumb { background: color-mix(in oklch, var(--color-tinte) 14%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--color-tinte) 24%, transparent); }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* Der Poster-Lauf der Erst-Einrichtung (5.5.0): Jede Spalte wandert langsam
|
||||
@@ -90,3 +93,34 @@
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* ── Hell-Modus (5.6.0, Commander: „White Mode") ─────────────────────────
|
||||
Dieselben Tokens, andere Werte: warmes Papier statt Kinosaal, Gold als
|
||||
dunklerer Akzent, Tinte statt Weiß für Linien und Flächen. Geschaltet
|
||||
über data-design auf <html> (App.tsx, Einstellung „design": dunkel /
|
||||
hell / system). */
|
||||
:root[data-design="hell"] {
|
||||
color-scheme: light;
|
||||
--color-buehne: oklch(0.965 0.008 80);
|
||||
--color-karte: oklch(0.99 0.004 80);
|
||||
--color-samt: oklch(0.94 0.01 80);
|
||||
--color-gold-hell: oklch(0.6 0.12 72);
|
||||
--color-gold: oklch(0.66 0.13 70);
|
||||
--color-gold-tief: oklch(0.56 0.13 58);
|
||||
--color-rec: oklch(0.6 0.19 40);
|
||||
--color-schnee: oklch(0.2 0.012 60);
|
||||
--color-dunst: oklch(0.4 0.015 60);
|
||||
--color-nebel: oklch(0.55 0.015 60);
|
||||
--color-gruen: oklch(0.52 0.15 150);
|
||||
--color-warn: oklch(0.58 0.13 80);
|
||||
--color-rot: oklch(0.55 0.2 25);
|
||||
--color-tinte: oklch(0.15 0.01 60);
|
||||
}
|
||||
:root[data-design="hell"] .buehnenlicht {
|
||||
background:
|
||||
radial-gradient(900px 520px at 78% 0%, oklch(0.9 0.06 80 / 0.6), transparent 70%),
|
||||
radial-gradient(1100px 700px at 0% 100%, oklch(0.9 0.05 40 / 0.5), transparent 65%);
|
||||
}
|
||||
:root[data-design="hell"] .filmkorn {
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
@@ -3,16 +3,18 @@
|
||||
// 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 { leisteAusKompression } from '../../gemeinsam/vorgangsleiste'
|
||||
import { restText } from '../bausteine'
|
||||
import { VorgangsLeiste } from './VorgangsLeiste'
|
||||
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="rounded-2xl border border-tinte/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={`inline-block h-2 w-2 rounded-full ${l !== null ? 'animate-pulse bg-gold' : stand.pausiert ? 'bg-warn' : 'bg-tinte/25'}`} />
|
||||
<span className="text-dunst">KOMPRESSION</span>
|
||||
<span>·</span>
|
||||
<span>
|
||||
@@ -22,7 +24,7 @@ export function KompressionsKarte({ stand }: { stand: VorgaengeStand['kompressio
|
||||
<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'
|
||||
stand.pausiert ? 'border-gold/40 bg-gold/12 font-semibold text-gold-hell hover:bg-gold/20' : 'border-tinte/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'}
|
||||
>
|
||||
@@ -30,12 +32,12 @@ export function KompressionsKarte({ stand }: { stand: VorgaengeStand['kompressio
|
||||
</button>
|
||||
</div>
|
||||
{l !== null && (
|
||||
<div className="mt-3 rounded-xl border border-white/10 bg-samt/80 p-4">
|
||||
<div className="mt-3 rounded-xl border border-tinte/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} />
|
||||
<VorgangsLeiste stand={leisteAusKompression(l)} restText={restText(l.restS)} />
|
||||
</div>
|
||||
<p className="mt-2 truncate font-mono text-[11px] text-nebel" title={l.text}>
|
||||
> {l.text}
|
||||
@@ -61,8 +63,9 @@ export function KompressionsKarte({ stand }: { stand: VorgaengeStand['kompressio
|
||||
{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">
|
||||
<div key={w.vorgangId} className="flex items-center justify-between gap-3 rounded-lg border border-tinte/8 bg-samt/40 px-3 py-1.5">
|
||||
<VorgangsLeiste stand={leisteAusKompression(w)} kompakt />
|
||||
<span className="min-w-0 flex-1 truncate font-mono text-[11px] text-dunst">
|
||||
Platz {i + 1} · {w.titel}
|
||||
{stand.pausiert ? ' · wartet auf Weiter' : ''}
|
||||
</span>
|
||||
|
||||
@@ -24,7 +24,6 @@ import {
|
||||
InfoKachel,
|
||||
LAUFENDE_PHASEN,
|
||||
PHASEN_MONO,
|
||||
SegmentBalken,
|
||||
TYP_NAMEN,
|
||||
backdropUrl,
|
||||
discHerkunft,
|
||||
@@ -46,6 +45,8 @@ import {
|
||||
ripUeberspringen,
|
||||
type Verbindung,
|
||||
} from '../kernverbindung'
|
||||
import { leisteAusRip } from '../../gemeinsam/vorgangsleiste'
|
||||
import { VorgangsLeiste } from './VorgangsLeiste'
|
||||
|
||||
/** Welches Preset diese Disc bekäme — dieselbe Kette wie im Kern
|
||||
* (eigene Wahl → Empfehlung → Default). */
|
||||
@@ -113,10 +114,10 @@ export function LaufwerkKachel({
|
||||
? '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'
|
||||
: 'text-dunst border-tinte/12 bg-samt/60'
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-karte/50">
|
||||
<div className="relative overflow-hidden rounded-2xl border border-tinte/10 bg-karte/50">
|
||||
{backdrop.length > 0 && (
|
||||
<>
|
||||
<img src={backdrop} alt="" className="absolute inset-0 h-full w-full object-cover" />
|
||||
@@ -135,7 +136,7 @@ export function LaufwerkKachel({
|
||||
: discDa
|
||||
? 'bg-gruen'
|
||||
: geraet.status === 'empty'
|
||||
? 'bg-white/25'
|
||||
? 'bg-tinte/25'
|
||||
: 'bg-rot'
|
||||
}`}
|
||||
/>
|
||||
@@ -166,7 +167,7 @@ export function LaufwerkKachel({
|
||||
<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"
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-tinte/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 />
|
||||
@@ -189,7 +190,7 @@ export function LaufwerkKachel({
|
||||
{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">
|
||||
<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-tinte/10">
|
||||
<IconDisc groesse={40} farbe="oklch(0.5 0.05 75)" />
|
||||
</div>
|
||||
)}
|
||||
@@ -244,7 +245,7 @@ export function LaufwerkKachel({
|
||||
{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">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-samt font-mono text-[11px] text-nebel ring-1 ring-tinte/10">
|
||||
{d.name
|
||||
.split(' ')
|
||||
.map((w) => w[0] ?? '')
|
||||
@@ -266,7 +267,7 @@ export function LaufwerkKachel({
|
||||
<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"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-tinte/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 />
|
||||
@@ -277,7 +278,7 @@ export function LaufwerkKachel({
|
||||
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"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-tinte/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
|
||||
@@ -317,7 +318,7 @@ export function LaufwerkKachel({
|
||||
{/* 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'}`}>
|
||||
<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-tinte/10 bg-samt/60'}`}>
|
||||
{automatik.aktiv && (
|
||||
<span className="font-mono text-[28px] font-bold leading-none text-gold-hell">
|
||||
{automatik.sekunden}
|
||||
@@ -330,7 +331,7 @@ export function LaufwerkKachel({
|
||||
<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">
|
||||
<button onClick={() => automatikStopp(geraet.id)} className="rounded-lg border border-tinte/15 px-3 py-1 text-[11px] text-dunst hover:text-schnee">
|
||||
Stopp
|
||||
</button>
|
||||
</div>
|
||||
@@ -366,7 +367,7 @@ export function LaufwerkKachel({
|
||||
)}
|
||||
|
||||
{rip !== undefined && (
|
||||
<div className="mt-4 rounded-xl border border-white/10 bg-samt/80 p-4 backdrop-blur">
|
||||
<div className="mt-4 rounded-xl border border-tinte/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">
|
||||
@@ -380,7 +381,9 @@ export function LaufwerkKachel({
|
||||
</span>
|
||||
{ripLaeuft && <span className="font-mono text-[10.5px] text-nebel">{restzeitText(rip.prozent, ripStartMs)}</span>}
|
||||
</div>
|
||||
{ripLaeuft && <SegmentBalken prozent={rip.prozent} />}
|
||||
{/* 5.6.0: die Vorgangs-Leiste — der ganze Weg, hier mit den
|
||||
Details der Laufwerks-Stationen; nach dem Rip nur der Stand. */}
|
||||
<VorgangsLeiste stand={leisteAusRip(rip, vorgang, wartePlatz)} />
|
||||
{ripLaeuft && (rip.titelGesamt ?? 0) > 1 && (
|
||||
<p className="mt-1.5 font-mono text-[10.5px] text-nebel">
|
||||
Titel {rip.titelNr} von {rip.titelGesamt}
|
||||
@@ -425,35 +428,22 @@ export function LaufwerkKachel({
|
||||
</p>
|
||||
))}
|
||||
|
||||
{/* Nach dem Rip (5.4.0): Wo steht die Kompression? Das
|
||||
Laufwerk ist schon frei — die Arbeit läuft im Hintergrund. */}
|
||||
{/* Nach dem Rip (5.6.0, Commander: „Nur in der Kompressions-Karte"):
|
||||
hier nur noch EINE Zeile, wo es weitergeht — Balken, Prozent,
|
||||
Restzeit und Ziel stehen in der Kompressions-Karte, danach im
|
||||
Verlauf. Fehler bleiben sichtbar (R4). */}
|
||||
{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>
|
||||
<p className={`mt-2 font-mono text-[11px] ${vorgang.phase === 'fehler' || vorgang.phase === 'abgebrochen' ? 'text-warn' : 'text-nebel'}`}>
|
||||
{kompression !== null
|
||||
? 'Kompression läuft — Stand in der Kompressions-Karte unten.'
|
||||
: wartePlatz > 0
|
||||
? `Kompression wartet — Platz ${wartePlatz} in der Warteschlange (Karte unten).`
|
||||
: vorgang.phase === 'fertig'
|
||||
? 'Kompression fertig — das Ergebnis steht im Verlauf.'
|
||||
: vorgang.phase === 'fehler' || vorgang.phase === 'abgebrochen'
|
||||
? `⚠ ${vorgang.fehler.length > 0 ? vorgang.fehler : `Kompression ${vorgang.phase}`}`
|
||||
: `Kompression: ${vorgang.phase}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{ripLaeuft && rip.prozent >= 0 && (
|
||||
|
||||
@@ -13,7 +13,7 @@ function Platz({ name, platz, hinweis }: { name: string; platz: SpeicherPlatz; h
|
||||
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="rounded-xl border border-tinte/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'}`}>
|
||||
@@ -42,7 +42,7 @@ function Platz({ name, platz, hinweis }: { name: string; platz: SpeicherPlatz; h
|
||||
|
||||
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="rounded-2xl border border-tinte/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">
|
||||
@@ -77,7 +77,7 @@ export function SpeicherKarte({ speicher, statistik }: { speicher: SpeicherStand
|
||||
|
||||
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="rounded-lg border border-tinte/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>
|
||||
|
||||
@@ -53,12 +53,12 @@ export function Uebersicht({
|
||||
</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="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-tinte/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">
|
||||
<div className="mt-3 rounded-xl border border-tinte/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>
|
||||
@@ -87,7 +87,7 @@ export function Uebersicht({
|
||||
|
||||
<section>
|
||||
{verbindung.laufwerke.length === 0 ? (
|
||||
<div className="flex items-center gap-5 rounded-2xl border border-white/10 bg-karte/50 p-6">
|
||||
<div className="flex items-center gap-5 rounded-2xl border border-tinte/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>
|
||||
@@ -154,6 +154,7 @@ export function Uebersicht({
|
||||
einstellungen={verbindung.einstellungen}
|
||||
regel={verbindung.vorgaenge?.regel ?? ''}
|
||||
speicher={verbindung.speicher}
|
||||
vorschlaege={verbindung.vorschlaege[dialog.id] ?? []}
|
||||
schliessen={() => setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
@@ -169,7 +170,7 @@ export function Uebersicht({
|
||||
{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">
|
||||
<div className="max-h-56 space-y-1 overflow-y-auto rounded-2xl border border-tinte/10 bg-karte/50 p-4">
|
||||
{verbindung.meldungen.map((zeile, i) => (
|
||||
<p key={i} className="break-all font-mono text-[11px] text-dunst">
|
||||
{zeile}
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
// Bibliothek (Commander: „Brauchen wir die wirklich?" — nein: Jellyfin IST
|
||||
// die Bibliothek; die Wiedererkennung braucht keine Ansicht).
|
||||
import type { GeraeteInfo, VorgangEintrag } from '../../gemeinsam/nachrichten'
|
||||
import { leisteAusVorgang } from '../../gemeinsam/vorgangsleiste'
|
||||
import { Badge, TYP_NAMEN, datumKurz, gb } from '../bausteine'
|
||||
import { VorgangsLeiste } from './VorgangsLeiste'
|
||||
|
||||
const PHASEN_TEXT: Record<VorgangEintrag['phase'], string> = {
|
||||
rippt: 'rippt',
|
||||
@@ -22,7 +24,7 @@ export function VerlaufKarte({ vorgaenge, aufAlle }: { vorgaenge: VorgangEintrag
|
||||
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="rounded-2xl border border-tinte/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>
|
||||
@@ -33,11 +35,12 @@ export function VerlaufKarte({ vorgaenge, aufAlle }: { vorgaenge: VorgangEintrag
|
||||
</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">
|
||||
<div key={v.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-tinte/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>
|
||||
<VorgangsLeiste stand={leisteAusVorgang(v)} kompakt />
|
||||
<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)}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
// Die Vorgangs-Leiste (5.6.0) — der ganze Weg einer Disc in Stationen, mit
|
||||
// dem Segment-Balken in der aktiven Station. Logik in
|
||||
// gemeinsam/vorgangsleiste.ts; hier nur das Zeichnen. `kompakt` = Punkte
|
||||
// (Verlauf, Warteschlange).
|
||||
import { Fragment } from 'react'
|
||||
import { STATIONS_NAMEN, stationen, stationsZustand, type LeisteStand } from '../../gemeinsam/vorgangsleiste'
|
||||
import { SegmentBalken } from '../bausteine'
|
||||
|
||||
export function VorgangsLeiste({ stand, restText, kompakt }: { stand: LeisteStand; restText?: string; kompakt?: boolean }) {
|
||||
const liste = stationen(stand.rettung)
|
||||
const zustaende = stationsZustand(liste, stand.station, stand.zustand)
|
||||
const titel = `${STATIONS_NAMEN[stand.station]}: ${
|
||||
stand.zustand === 'laeuft' ? 'läuft' : stand.zustand === 'wartet' ? 'wartet' : stand.zustand === 'fertig' ? 'fertig' : stand.zustand === 'fehler' ? 'Fehler' : 'abgebrochen'
|
||||
}`
|
||||
|
||||
if (kompakt) {
|
||||
return (
|
||||
<span className="inline-flex flex-none items-center gap-1" title={titel} aria-label={titel}>
|
||||
{liste.map((s, i) => (
|
||||
<span
|
||||
key={s}
|
||||
className={`inline-block h-1.5 w-1.5 rounded-full ${
|
||||
zustaende[i] === 'fertig'
|
||||
? 'bg-gold'
|
||||
: zustaende[i] === 'aktiv'
|
||||
? stand.zustand === 'wartet'
|
||||
? 'bg-gold/50'
|
||||
: 'animate-pulse bg-gold-hell'
|
||||
: zustaende[i] === 'fehler'
|
||||
? 'bg-rot'
|
||||
: 'bg-tinte/20'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-1.5" title={titel}>
|
||||
{liste.map((s, i) => {
|
||||
const z = zustaende[i]
|
||||
const aktiv = z === 'aktiv'
|
||||
const rahmen =
|
||||
z === 'fehler'
|
||||
? 'border-rot/50 bg-rot/10'
|
||||
: aktiv
|
||||
? 'min-w-[200px] flex-1 border-gold/50 bg-gold/10'
|
||||
: z === 'fertig'
|
||||
? 'border-gold/30 bg-gold/5'
|
||||
: 'border-tinte/10'
|
||||
return (
|
||||
<Fragment key={s}>
|
||||
{i > 0 && <span className={`h-px w-3 flex-none ${zustaende[i - 1] === 'fertig' ? 'bg-gold/60' : 'bg-tinte/15'}`} />}
|
||||
<div className={`flex items-center gap-2 rounded-lg border px-2 py-1 ${rahmen}`}>
|
||||
<span
|
||||
className={`flex h-4 w-4 flex-none items-center justify-center rounded-full font-mono text-[9px] ${
|
||||
z === 'fertig'
|
||||
? 'bg-gold text-buehne'
|
||||
: aktiv
|
||||
? 'bg-gold-hell text-buehne'
|
||||
: z === 'fehler'
|
||||
? 'bg-rot text-buehne'
|
||||
: 'border border-tinte/20 text-nebel'
|
||||
}`}
|
||||
>
|
||||
{z === 'fertig' ? '✓' : z === 'fehler' ? '!' : String(i + 1)}
|
||||
</span>
|
||||
<span className={`font-mono text-[10px] tracking-[0.12em] ${aktiv ? 'text-gold-hell' : z === 'fertig' ? 'text-gold/80' : z === 'fehler' ? 'text-rot' : 'text-nebel'}`}>
|
||||
{STATIONS_NAMEN[s].toUpperCase()}
|
||||
</span>
|
||||
{aktiv && stand.zustand === 'laeuft' && stand.prozent >= 0 && (
|
||||
<div className="min-w-[80px] flex-1">
|
||||
<SegmentBalken prozent={stand.prozent} />
|
||||
</div>
|
||||
)}
|
||||
{aktiv && stand.zustand === 'laeuft' && stand.prozent >= 0 && <span className="font-mono text-[10.5px] text-gold-hell">{stand.prozent} %</span>}
|
||||
{aktiv && stand.zustand === 'laeuft' && stand.prozent < 0 && stand.hinweis.length === 0 && (
|
||||
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-gold-hell" />
|
||||
)}
|
||||
{aktiv && restText !== undefined && restText.length > 0 && <span className="font-mono text-[10px] text-nebel">{restText}</span>}
|
||||
{aktiv && stand.hinweis.length > 0 && <span className="font-mono text-[10px] text-nebel">{stand.hinweis}</span>}
|
||||
{z === 'fehler' && <span className="font-mono text-[10px] text-rot">{stand.zustand === 'abgebrochen' ? 'abgebrochen' : 'Fehler'}</span>}
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user