Die Weboberfläche — im Zuschnitt von Plex, vom Server selbst ausgeliefert

Einrichtung, Anmeldung, Mediathek, Detailseite mit Abspielen und
Herunterladen, Zuordnung korrigieren, Verwaltung. Die Oberfläche aus der
Jellyfin-Zeit ist dabei vollständig ersetzt: `types.ts`, `prefs.ts`,
`contrast.ts`, `views/cards.ts`, `views/player.ts` und `views/settings.ts`
sprachen Jellyfins Schnittstelle und hatten hier nichts mehr zu suchen.

Seitenleiste links, waagerechte Reihen auf der Startseite, Plakate im
Verhältnis 2:3, unscharfer Hintergrund hinter dem Kopf der Detailseite —
das ist der Zuschnitt von Plex, weil er gefällt. **Die Farbe bleibt Flaros
Orchidee**, nicht Plex' Orange; der Aufbau ist das Vorbild, nicht das
Aussehen.

Welche Bibliothek gezeigt wird, entscheidet die Seitenleiste. Eine zweite
Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.

---

**Der Zugang liegt jetzt auch in einem Cookie.** Ein `<img>`, ein `<video>`
und ein Download-Link senden keine eigenen Kopfzeilen — eine App kann ihr
Token in jede Anfrage legen, ein Browser nicht. Das Token stattdessen in
die Adresse zu schreiben wäre der naheliegende Ausweg und stünde danach in
jedem Zugriffsprotokoll, in jedem Verlauf und in jedem weitergegebenen
Link.

`HttpOnly`, damit kein eingeschlichenes Skript herankommt. `SameSite=Strict`
gegen Anfragen von fremden Seiten. `Secure` nur über https — sonst liesse
sich die Oberfläche im Heimnetz über http gar nicht benutzen. Die Apps
benutzen weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein
zweites Verfahren.

---

**Der Fehler, den erst der echte Container zeigte:** eine weisse Seite,
ohne Hinweis worauf.

Die Rückfallregel verlangt für jede Anfrage ohne eigenen Endpunkt einen
angemeldeten Benutzer, und `/assets/index.js` hat keinen. Die statischen
Dateien standen unter `UseAuthorization` — ein neuer Besucher bekam 401 auf
genau das Skript, das ihm die Anmeldemaske zeichnen sollte. `/` kam durch,
weil der SPA-Rückfall `AllowAnonymous` trägt; alles mit Dateiendung nicht.
Jetzt liegen sie davor. Mit Prüfung.

Beim Bau desselben Images der zweite: seit der Kontext die Projektwurzel
ist, überschrieb `COPY server/` die `obj/`-Verzeichnisse aus dem Container
mit denen vom Arbeitsrechner — die zeigen auf osx-arm64, gebaut wird
linux-arm64, `dotnet publish` brach mit NETSDK1047 ab. Dafür gibt es jetzt
eine `.dockerignore` in der Wurzel; die unter `server/` sucht Docker seit
dem Umzug nicht mehr.

---

Vier Prüfungen schlugen danach fehl, und zwar zu Recht: sie hiessen „ohne
Anmeldung gibt es nichts", benutzten aber den Client, der nach dem Anmelden
ein Cookie hält. Sie prüften also den Angemeldeten. Jetzt sagen sie
ausdrücklich, dass sie ohne Zugang fragen.

313 Tests grün. Im Container nachgewiesen: Anmelden, Plakate, Abspielen,
Staffeln und Folgen, Verwaltung — und ein Neuladen auf `/verwaltung`, das
nicht in einem 404 endet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,26 @@
+# Der Bau-Kontext ist die Wurzel des Projekts, seit die Oberfläche
+# mitgebaut wird. Diese Datei gehört deshalb hierher und nicht nach server/ —
+# Docker sucht sie neben dem Kontext, nicht neben dem Dockerfile.
+
+# **Der Grund für diese Datei.** Ohne sie überschreibt `COPY server/ ./server/`
+# die obj/-Verzeichnisse, die `dotnet restore` im Container gerade angelegt
+# hat, mit denen vom Arbeitsrechner. Die zeigen auf osx-arm64, der Bau will
+# linux-arm64, und `dotnet publish` bricht mit NETSDK1047 ab.
+**/bin/
+**/obj/
+**/*.user
+
+# Gebaute Oberfläche und ihre Abhängigkeiten: der web-Abschnitt baut beides neu.
+**/node_modules/
+web/app/dist/
+
+# Laufzeitdaten eines lokalen Starts.
+server/data/
+server/cache/
+server/transcode/
+
+# Was im Server-Image nichts verloren hat.
+.git/
+.build/
+DerivedData/
+*.xcodeproj/

server/.dockerignore

@@ -1,6 +0,0 @@
-**/bin/
-**/obj/
-**/*.user
-data/
-cache/
-transcode/

server/Dockerfile

@@ -1,5 +1,15 @@
 # syntax=docker/dockerfile:1
 
+# Die Oberfläche zuerst, in einem eigenen Abschnitt: sie braucht Node, der
+# Server nicht. So landet Node nie im fertigen Image.
+FROM --platform=$BUILDPLATFORM node:22-alpine AS web
+WORKDIR /web
+COPY web/app/package.json web/app/package-lock.json ./
+RUN npm ci
+COPY web/app/ ./
+RUN npm run build
+
+
 # Gebaut wird auf der Architektur des Bauwirts, übersetzt wird für die des
 # Ziels — `dotnet publish -a` kann das. Ohne diese Trennung liefe der Bau für
 # arm64 unter Emulation und dauerte ein Vielfaches.
@@ -13,11 +23,11 @@ WORKDIR /src
 # `--parents` behält die Verzeichnisse bei. **Ein Muster statt einer Liste**,
 # weil eine Liste bei jedem neuen Projekt vergessen wird — und dann scheitert
 # erst der Bau im Container, nicht der auf dem Arbeitsrechner.
-COPY --parents src/*/*.csproj ./
+COPY --parents server/src/*/*.csproj ./
-RUN dotnet restore src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH
+RUN dotnet restore server/src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH
 
-COPY . .
+COPY server/ ./server/
-RUN dotnet publish src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH -c Release -o /app --no-restore
+RUN dotnet publish server/src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH -c Release -o /app --no-restore
 
 
 FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime
@@ -65,6 +75,7 @@ ENV FLARO_DATA=/config \
 
 WORKDIR /app
 COPY --from=build /app .
+COPY --from=web /web/dist ./wwwroot
 
 EXPOSE 8080
 VOLUME ["/config", "/cache", "/transcode"]

server/README.md

@@ -65,10 +65,34 @@ in Software; das ist langsamer, aber es läuft. **Zum blossen Umpacken wird gar
 keine Hardware gebraucht**, und das ist der Weg, der den meisten Beständen
 hilft.
 
+## Weboberfläche
+
+Der Server liefert sie selbst aus, unter derselben Adresse wie die
+Schnittstelle. Kein Proxy davor, kein CORS, kein Mischmasch aus http und
+https. Gebaut wird sie im Image mit; wer nur an ihr arbeitet, nimmt Vite:
+
+```bash
+cd ../web/app
+npm install
+FLARO_SERVER=http://localhost:18080 npm run dev   # auf http://localhost:5173
+```
+
+Vite reicht `/api` an den Server weiter, damit die Herkunft dieselbe bleibt
+wie im Betrieb.
+
+**Der Zugang liegt in einem Cookie, nicht nur in der Kopfzeile.** Ein
+`<img>`, ein `<video>` und ein Download-Link senden keine eigenen
+Kopfzeilen; das Token stattdessen in die Adresse zu schreiben hiesse, es in
+jedes Zugriffsprotokoll und jeden weitergegebenen Link zu setzen. Das Cookie
+ist `HttpOnly` und `SameSite=Strict`, `Secure` nur über https — sonst liesse
+sich die Oberfläche im Heimnetz gar nicht benutzen. Die Apps benutzen
+weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein zweites
+Verfahren.
+
 ## Entwickeln
 
 ```bash
-dotnet test                       # 293 Tests
+dotnet test                       # 313 Tests
 dotnet run --project src/Flaro.Api # auf http://localhost:5000
 ```
 
@@ -76,8 +100,14 @@ Ohne gesetzte Variablen legt der Server `data/`, `cache/` und `transcode/`
 neben dem Programm an.
 
 ```bash
-# Image bauen, beide Architekturen
+# Image bauen, beide Architekturen.
-docker buildx build --platform linux/amd64,linux/arm64 -t flaro:dev .
+# **Aus der Wurzel des Projekts**, nicht aus server/: der Bau braucht
+# web/app für die Oberfläche.
+cd .. && docker buildx build --platform linux/amd64,linux/arm64 \
+    -f server/Dockerfile -t flaro:dev .
+
+# Ein lokaler Server mit Beispielmedien zum Ausprobieren
+Tools/demo-medien.sh && docker compose -f server/docker-compose.local.yml up -d --build
 
 # Eine Migration nach einer Modelländerung
 dotnet ef migrations add <Name> --project src/Flaro.Data --startup-project src/Flaro.Api --output-dir Migrations

server/src/Flaro.Api/Auth/TokenAuthentication.cs

@@ -32,16 +32,41 @@ public sealed class TokenAuthenticationHandler(
     public const string SchemeName = "FlaroToken";
     public const string DeviceTokenIdClaim = "flaro:device";
 
-    protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
+    /// <summary>Derselbe Zugang, nur für den Browser.</summary>
+    ///
+    /// <remarks>
+    /// <para>
+    /// <b>Weil <c>&lt;img&gt;</c>, <c>&lt;video&gt;</c> und ein Download-Link
+    /// keine Kopfzeile setzen können.</b> Ohne Cookie müsste die Oberfläche
+    /// jedes Plakat und jeden Film über <c>fetch</c> holen und im
+    /// Arbeitsspeicher halten — bei einem Film ist das keine Lösung, und ein
+    /// Token in der Adresse stünde in jedem Zugriffsprotokoll.
+    /// </para>
+    /// <para>
+    /// <c>HttpOnly</c>, damit kein Skript herankommt, und
+    /// <c>SameSite=Strict</c> gegen Anfragen von fremden Seiten. Apps benutzen
+    /// weiterhin die Kopfzeile; das Cookie ist ein zweiter Weg zum selben
+    /// Token, kein zweites Verfahren.
+    /// </para>
+    /// </remarks>
+    public const string CookieName = "flaro_session";
+
+    private string? AusKopfzeile()
     {
-        if (!Request.Headers.TryGetValue("Authorization", out var kopfzeile)) return AuthenticateResult.NoResult();
+        if (!Request.Headers.TryGetValue("Authorization", out var kopfzeile)) return null;
 
         var roh = kopfzeile.ToString();
         const string vorsatz = "Bearer ";
-        if (!roh.StartsWith(vorsatz, StringComparison.OrdinalIgnoreCase)) return AuthenticateResult.NoResult();
+        if (!roh.StartsWith(vorsatz, StringComparison.OrdinalIgnoreCase)) return null;
 
         var token = roh[vorsatz.Length..].Trim();
-        if (token.Length == 0) return AuthenticateResult.NoResult();
+        return token.Length == 0 ? null : token;
+    }
+
+    protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
+    {
+        var token = AusKopfzeile() ?? Request.Cookies[CookieName];
+        if (string.IsNullOrEmpty(token)) return AuthenticateResult.NoResult();
 
         var fingerabdruck = Secrets.Fingerprint(token);
         var eintrag = await db.DeviceTokens.FirstOrDefaultAsync(t => t.TokenFingerprint == fingerabdruck);

server/src/Flaro.Api/Endpoints/AuthEndpoints.cs

@@ -23,7 +23,7 @@ public static class AuthEndpoints
     public static void MapAuth(this IEndpointRouteBuilder app)
     {
         app.MapPost("/api/v1/auth/login", async (
-            LoginRequest anfrage, FlaroContext db, TimeProvider clock) =>
+            LoginRequest anfrage, FlaroContext db, TimeProvider clock, HttpContext zusammenhang) =>
         {
             var name = anfrage.UserName.Trim();
             var benutzer = await db.Users.FirstOrDefaultAsync(u => u.UserName == name);
@@ -45,11 +45,14 @@ public static class AuthEndpoints
 
             var antwort = await TokenAusstellen(db, clock, benutzer, anfrage.DeviceName, anfrage.DeviceId);
             await db.SaveChangesAsync();
+            CookieSetzen(zusammenhang, antwort.Token);
             return Results.Ok(antwort);
         }).AllowAnonymous().RequireRateLimiting(FlaroRateLimits.SignIn);
 
-        app.MapPost("/api/v1/auth/logout", async (ClaimsPrincipal wer, FlaroContext db, TimeProvider clock) =>
+        app.MapPost("/api/v1/auth/logout", async (
+            ClaimsPrincipal wer, FlaroContext db, TimeProvider clock, HttpContext zusammenhang) =>
         {
+            zusammenhang.Response.Cookies.Delete(FlaroTokenCookie);
             if (!Guid.TryParse(wer.FindFirstValue(TokenAuthenticationHandler.DeviceTokenIdClaim), out var id))
                 return Results.Unauthorized();
 
@@ -178,6 +181,27 @@ public static class AuthEndpoints
         return new LoginResponse(token, new AuthenticatedUser(benutzer.Id, benutzer.UserName, benutzer.IsAdministrator));
     }
 
+    private const string FlaroTokenCookie = TokenAuthenticationHandler.CookieName;
+
+    /// <summary>Legt dasselbe Token als Cookie ab — für den Browser.</summary>
+    ///
+    /// <remarks>
+    /// <c>HttpOnly</c>: kein Skript kommt heran, also auch keines, das sich
+    /// über eine Lücke in der Oberfläche eingeschlichen hat. <c>Strict</c>:
+    /// eine fremde Seite kann damit nichts auslösen. <c>Secure</c> nur bei
+    /// HTTPS, sonst liesse sich die Oberfläche im Heimnetz über http gar
+    /// nicht benutzen.
+    /// </remarks>
+    private static void CookieSetzen(HttpContext zusammenhang, string token) =>
+        zusammenhang.Response.Cookies.Append(FlaroTokenCookie, token, new CookieOptions
+        {
+            HttpOnly = true,
+            SameSite = SameSiteMode.Strict,
+            Secure = zusammenhang.Request.IsHttps,
+            Path = "/",
+            MaxAge = TimeSpan.FromDays(365),
+        });
+
     /// <summary>Eine Antwort, die nicht verrät, welche Hälfte falsch war.</summary>
     private static IResult Abgelehnt() =>
         Results.Problem("Benutzername oder Passwort stimmt nicht.", statusCode: StatusCodes.Status401Unauthorized);

server/src/Flaro.Api/Program.cs

@@ -106,6 +106,27 @@ using (var bereich = app.Services.CreateScope())
 app.UseExceptionHandler();
 app.UseStatusCodePages();
 app.UseRateLimiter();
+
+// --- Die Oberfläche -------------------------------------------------------
+//
+// **Vom Server selbst ausgeliefert, nicht von einem Proxy davor.** Damit
+// liegen Seite und Schnittstelle unter derselben Adresse: kein CORS, kein
+// Mischmasch aus http und https, und der Zugang bleibt beim Server statt im
+// Browser. Der Node-Proxy aus der Jellyfin-Zeit wird dadurch überflüssig.
+//
+// **Vor der Anmeldung, und das ist kein Versehen.** Die Rückfallregel weiter
+// oben verlangt für jede Anfrage ohne eigenen Endpunkt einen angemeldeten
+// Benutzer — und `/assets/index.js` hat keinen. Stünde das hier unter der
+// Anmeldung, bekäme ein neuer Besucher 401 auf genau das Skript, das ihm die
+// Anmeldemaske zeichnen soll. Die Seite selbst ist kein Geheimnis; sie zeigt
+// ohne gültigen Zugang nichts als ein Anmeldefeld.
+var oberfläche = Path.Combine(app.Environment.ContentRootPath, "wwwroot");
+if (Directory.Exists(oberfläche))
+{
+    app.UseDefaultFiles();
+    app.UseStaticFiles();
+}
+
 app.UseAuthentication();
 app.UseAuthorization();
 
@@ -118,6 +139,14 @@ app.MapImages();
 app.MapDelivery();
 app.MapMatching();
 
+// Alles, was keine Schnittstelle ist, bekommt die Seite — der Router läuft
+// im Browser. Ohne das endet ein Neuladen auf /admin in einem 404.
+if (Directory.Exists(oberfläche))
+{
+    app.MapFallback(() => Results.File(Path.Combine(oberfläche, "index.html"), "text/html"))
+        .AllowAnonymous();
+}
+
 app.Run();
 
 /// <summary>Damit die Tests den Server hochfahren können.</summary>

server/tests/Flaro.Api.Tests/CodeSignInTests.cs

@@ -104,7 +104,10 @@ public class CodeSignInTests
         await server.SetUpAndSignIn();
         var angefordert = await (await CodeAnfordern(server)).Content.ReadFromJsonAsync<CodeResponse>();
 
-        var versuch = await server.Client.PostAsync($"/api/v1/auth/code/{angefordert!.Code}", null);
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var versuch = await server.OhneGedaechtnis().PostAsync($"/api/v1/auth/code/{angefordert!.Code}", null);
         Assert.That(versuch.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
 
         var danach = await server.Client.GetFromJsonAsync<CodeState>($"/api/v1/auth/code/{angefordert.Handle}");

server/tests/Flaro.Api.Tests/DeliveryTests.cs

@@ -186,7 +186,10 @@ public class DeliveryTests
         Film("Geschuetzt (2020)", "mp4");
         var (_, datei) = await Eingelesen();
 
-        var antwort = await _server!.Client.GetAsync($"/api/v1/files/{datei.Id}/download");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await _server!.OhneGedaechtnis().GetAsync($"/api/v1/files/{datei.Id}/download");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 }

server/tests/Flaro.Api.Tests/FlaroServer.cs

@@ -1,6 +1,7 @@
 using System.Net.Http.Headers;
 using System.Net.Http.Json;
 using Flaro.Api.Endpoints;
+using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc.Testing;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
@@ -24,7 +25,12 @@ public sealed class FlaroServer : IDisposable
 
     public HttpClient Client { get; }
 
-    public FlaroServer(Action<IServiceCollection>? dienste = null)
+    /// <param name="inhaltswurzel">
+    /// Ein anderes Stammverzeichnis für den Server — nur nötig, wenn ein Test
+    /// eine ausgelieferte Oberfläche braucht, denn die sucht der Server unter
+    /// <c>wwwroot</c> neben sich.
+    /// </param>
+    public FlaroServer(Action<IServiceCollection>? dienste = null, string? inhaltswurzel = null)
     {
         _verzeichnis = Path.Combine(Path.GetTempPath(), "flaro-test-" + Guid.CreateVersion7().ToString("N"));
         Environment.SetEnvironmentVariable("FLARO_DATA", Path.Combine(_verzeichnis, "config"));
@@ -36,7 +42,11 @@ public sealed class FlaroServer : IDisposable
         Environment.SetEnvironmentVariable("FLARO_RATELIMIT_SIGNIN", "10000");
 
         _grundlage = new WebApplicationFactory<Program>();
-        _fabrik = _grundlage.WithWebHostBuilder(b => b.ConfigureServices(sammlung =>
+        _fabrik = _grundlage.WithWebHostBuilder(b =>
+        {
+            if (inhaltswurzel is not null) b.UseContentRoot(inhaltswurzel);
+
+            b.ConfigureServices(sammlung =>
             {
                 // **Ohne das dauert der ganze Lauf eine Viertelstunde.** Ein Host
                 // wartet beim Herunterfahren fünf Sekunden auf seine Dienste, und
@@ -56,7 +66,8 @@ public sealed class FlaroServer : IDisposable
                 sammlung.AddScoped<IMetadataProvider, AbgeschalteterAnbieter>();
 
                 dienste?.Invoke(sammlung);
-        }));
+            });
+        });
         Client = _fabrik.CreateClient();
     }
 
@@ -84,6 +95,16 @@ public sealed class FlaroServer : IDisposable
         return client;
     }
 
+    /// <summary>Ein Client, der Cookies weder behält noch mitschickt.</summary>
+    ///
+    /// <remarks>
+    /// Der gewöhnliche Testclient führt im Hintergrund einen Cookie-Behälter
+    /// mit. Wer prüfen will, <i>ob</i> ein Cookie wirkt, darf sich nicht
+    /// darauf verlassen — sonst prüft er den Behälter, nicht den Server.
+    /// </remarks>
+    public HttpClient OhneGedaechtnis() =>
+        _fabrik.CreateClient(new WebApplicationFactoryClientOptions { HandleCookies = false });
+
     public void Dispose()
     {
         _fabrik.Dispose();

server/tests/Flaro.Api.Tests/MetadataTests.cs

@@ -383,7 +383,10 @@ public class ImageEndpointTests
         using var server = new FlaroServer();
         await server.SetUpAndSignIn();
 
-        var antwort = await server.Client.GetAsync($"/api/v1/images/{new string('a', 64)}");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await server.OhneGedaechtnis().GetAsync($"/api/v1/images/{new string('a', 64)}");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 

server/tests/Flaro.Api.Tests/SignInTests.cs

@@ -71,7 +71,10 @@ public class SignInTests
         using var server = new FlaroServer();
         await server.SetUpAndSignIn();
 
-        var antwort = await server.Client.GetAsync("/api/v1/auth/me");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await server.OhneGedaechtnis().GetAsync("/api/v1/auth/me");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 

server/tests/Flaro.Api.Tests/WebInterfaceTests.cs

@@ -0,0 +1,146 @@
+using System.Net;
+using System.Net.Http.Json;
+using Flaro.Api.Auth;
+using Flaro.Api.Endpoints;
+
+namespace Flaro.Api.Tests;
+
+/// <summary>Was der Browser braucht und die Apps nicht.</summary>
+///
+/// <remarks>
+/// Eine App legt ihr Token in jede Anfrage. Ein Browser kann das nicht:
+/// <c>&lt;img&gt;</c>, <c>&lt;video&gt;</c> und ein Download-Link senden keine
+/// eigenen Kopfzeilen. Das Token in die Adresse zu schreiben wäre der
+/// naheliegende Ausweg — und stünde danach in jedem Zugriffsprotokoll, in
+/// jedem Verlauf und in jedem weitergegebenen Link. Also ein Cookie.
+/// </remarks>
+[TestFixture]
+public sealed class WebInterfaceTests
+{
+    [Test]
+    public async Task Anmeldung_legt_ein_Cookie_ab()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var antwort = await server.OhneGedaechtnis().PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+
+        var gesetzt = antwort.Headers.GetValues("Set-Cookie").Single();
+
+        Assert.Multiple(() =>
+        {
+            Assert.That(gesetzt, Does.StartWith($"{TokenAuthenticationHandler.CookieName}="));
+            // Kein Skript kommt heran, auch keines, das sich eingeschlichen hat.
+            Assert.That(gesetzt, Does.Contain("httponly").IgnoreCase);
+            // Eine fremde Seite kann damit nichts auslösen.
+            Assert.That(gesetzt, Does.Contain("samesite=strict").IgnoreCase);
+            // Über http wäre „secure" ein Cookie, das der Browser nie schickt —
+            // und damit eine Oberfläche, die sich im Heimnetz nicht bedienen lässt.
+            Assert.That(gesetzt, Does.Not.Contain("secure").IgnoreCase);
+        });
+    }
+
+    [Test]
+    public async Task Cookie_allein_genuegt_fuer_eine_Anfrage()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var client = server.OhneGedaechtnis();
+        var angemeldet = await client.PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+        var keks = Keks(angemeldet);
+
+        // Ohne Kopfzeile — genau so, wie ein <img> fragt.
+        var anfrage = new HttpRequestMessage(HttpMethod.Get, "/api/v1/movies");
+        anfrage.Headers.Add("Cookie", keks);
+        var antwort = await client.SendAsync(anfrage);
+
+        Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+    }
+
+    [Test]
+    public async Task Ohne_Cookie_und_ohne_Kopfzeile_bleibt_es_bei_401()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var antwort = await server.OhneGedaechtnis().GetAsync("/api/v1/movies");
+
+        Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
+    }
+
+    [Test]
+    public async Task Abmelden_entwertet_das_Cookie()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var client = server.OhneGedaechtnis();
+        var angemeldet = await client.PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+        var keks = Keks(angemeldet);
+
+        var abmelden = new HttpRequestMessage(HttpMethod.Post, "/api/v1/auth/logout");
+        abmelden.Headers.Add("Cookie", keks);
+        (await client.SendAsync(abmelden)).EnsureSuccessStatusCode();
+
+        // **Das Token muss serverseitig weg sein, nicht nur das Cookie im
+        // Browser.** Ein gelöschtes Cookie schützt niemanden, der den Wert
+        // vorher mitgeschrieben hat.
+        var danach = new HttpRequestMessage(HttpMethod.Get, "/api/v1/movies");
+        danach.Headers.Add("Cookie", keks);
+
+        Assert.That((await client.SendAsync(danach)).StatusCode,
+            Is.EqualTo(HttpStatusCode.Unauthorized));
+    }
+
+    /// <summary>Die Oberfläche kommt heraus, bevor jemand angemeldet ist.</summary>
+    ///
+    /// <remarks>
+    /// <b>Der Fehler, den dieser Test festhält.</b> Die Rückfallregel verlangt
+    /// für jede Anfrage ohne eigenen Endpunkt einen angemeldeten Benutzer, und
+    /// <c>/assets/index.js</c> hat keinen. Standen die statischen Dateien unter
+    /// <c>UseAuthorization</c>, bekam ein neuer Besucher 401 auf genau das
+    /// Skript, das ihm die Anmeldemaske zeichnen sollte: eine weisse Seite,
+    /// ohne Hinweis worauf.
+    /// </remarks>
+    [Test]
+    public async Task Die_Oberflaeche_braucht_keine_Anmeldung()
+    {
+        var wurzel = Path.Combine(Path.GetTempPath(), "flaro-www-" + Guid.CreateVersion7().ToString("N"));
+        Directory.CreateDirectory(Path.Combine(wurzel, "wwwroot", "assets"));
+        await File.WriteAllTextAsync(Path.Combine(wurzel, "wwwroot", "index.html"), "<!doctype html><title>Flaro</title>");
+        await File.WriteAllTextAsync(Path.Combine(wurzel, "wwwroot", "assets", "app.js"), "export const da = true;");
+
+        try
+        {
+            using var server = new FlaroServer(inhaltswurzel: wurzel);
+            var client = server.OhneGedaechtnis();
+
+            var seite = await client.GetAsync("/");
+            var skript = await client.GetAsync("/assets/app.js");
+            // Der Router läuft im Browser: ein Neuladen auf einer Unterseite
+            // darf nicht in einem 404 enden.
+            var unterseite = await client.GetAsync("/verwaltung");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(seite.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+                Assert.That(skript.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+                Assert.That(unterseite.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+            });
+
+            Assert.That(await skript.Content.ReadAsStringAsync(), Is.EqualTo("export const da = true;"));
+        }
+        finally
+        {
+            try { Directory.Delete(wurzel, recursive: true); } catch (IOException) { /* Aufräumen ist Kür */ }
+        }
+    }
+
+    /// <summary>Nimmt den Namen und den Wert aus der Set-Cookie-Kopfzeile.</summary>
+    private static string Keks(HttpResponseMessage antwort) =>
+        antwort.Headers.GetValues("Set-Cookie").Single().Split(';')[0];
+}

web/app/index.html

@@ -3,12 +3,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#0B0B0D">
 <title>Flaro</title>
 </head>
 <body>
   <section id="login"></section>
   <div id="app" class="hidden">
-    <nav id="chrome"><div class="island" id="island"></div></nav>
+    <nav id="chrome"></nav>
     <main id="content"></main>
   </div>
   <script type="module" src="/src/main.ts"></script>

web/app/src/api.ts

@@ -1,151 +1,219 @@
-import type { Wiedergabeauskunft } from './types';
+/* Die Schnittstelle von Flaro, wie der Browser sie sieht.
+ *
+ * Eine Datei, weil es eine Schnittstelle ist: wer wissen will, was der Server
+ * kann, liest hier und nicht in fünf Ansichten nach. */
 
-/* Der Draht zum Server.
+export type Rolle = { id: string; userName: string; isAdministrator: boolean };
-   ----------------------------------------------------------------------------
+export type Spur = {
-   **Alles geht über `/api`, nicht über die Adresse des Medienservers.** Das
+  index: number; kind: 'Video' | 'Audio' | 'Subtitle';
-   ist der Grund, warum es diesen Server überhaupt gibt: Er reicht die
+  codec: string | null; language: string | null; title: string | null;
-   Anfragen weiter, und damit haben Seite und Daten dieselbe Herkunft. Kein
+  isDefault: boolean; isForced: boolean;
-   CORS, kein Ärger mit gemischtem HTTP und HTTPS, und der Zugangsschlüssel
+  channels: number | null; width: number | null; height: number | null;
-   bleibt beim Server statt im Browser zu liegen.
+};
+export type Datei = {
+  id: string; fileName: string; sizeBytes: number;
+  container: string | null; durationSeconds: number | null; streams: Spur[];
+};
+export type Film = {
+  id: string; title: string; year: number | null; overview: string | null;
+  posterImage: string | null; backdropImage: string | null; files: Datei[];
+};
+export type Serie = {
+  id: string; title: string; year: number | null; overview: string | null;
+  posterImage: string | null; backdropImage: string | null;
+  episodeCount: number; seasons: number[];
+};
+export type Folge = {
+  id: string; season: number; episode: number;
+  title: string | null; overview: string | null; stillImage: string | null; files: Datei[];
+};
+export type Bibliothek = { id: string; name: string; kind: string; path: string };
+export type Seite<T> = { items: T[]; total: number };
+export type Lieferung = {
+  method: 'directFile' | 'remux'; reasons: string[];
+  audioToEncode: number[]; subtitlesDropped: number[];
+  packageState: string; progress: number; error: string | null;
+};
+export type Scanstand = {
+  state: string; filesFound: number | null; added: number | null;
+  removed: number | null; unrecognised: number | null; probed: number | null;
+  problems: { path: string; reason: string }[] | null; error: string | null;
+  metadata: { moviesMatched: number; seriesMatched: number; episodesMatched: number;
+              skipped: boolean; error: string | null } | null;
+};
+export type Vorschlag = {
+  tmdbId: number; title: string; year: number | null;
+  overview: string | null; posterUrl: string | null;
+};
+export type Hinweis = { text: string; logoUrl: string; url: string };
 
-   Die Endpunkte selbst sind dieselben, die auch die App benutzt — übernommen
+/* ---------- Sitzung ---------- */
-   aus JellyfinKit, nicht geraten. */
 
-const BASIS = '/api';
+const SCHLUESSEL = 'flaro.session';
 
-export const sitzung = {
+export const sitzung: { token: string | null; wer: Rolle | null } = {
-  token: localStorage.getItem('flaro.token') ?? '',
+  token: null, wer: null,
-  userId: localStorage.getItem('flaro.user') ?? '',
-  geraet:
-    localStorage.getItem('flaro.device') ??
-    (() => {
-      const id = 'flaro-web-' + Math.random().toString(36).slice(2, 12);
-      localStorage.setItem('flaro.device', id);
-      return id;
-    })(),
 };
 
-/** Die Kopfzeile, mit oder ohne Schlüssel.
+try {
- *
+  const roh = localStorage.getItem(SCHLUESSEL);
- *  Die Anführungszeichen sind Pflicht, auch um Werte ohne Leerzeichen —
+  if (roh) Object.assign(sitzung, JSON.parse(roh));
- *  Jellyfin zerlegt die Zeile sonst falsch und meldet, man sei nicht
+} catch { /* Privates Fenster oder gesperrter Speicher — dann eben anmelden. */ }
- *  angemeldet, obwohl der Schlüssel stimmt. */
+
-function kopfzeile(): string {
+function merken(): void {
-  const teile = [
+  try {
-    'Client="Flaro Web"',
+    if (sitzung.token) localStorage.setItem(SCHLUESSEL, JSON.stringify(sitzung));
-    'Device="Browser"',
+    else localStorage.removeItem(SCHLUESSEL);
-    `DeviceId="${sitzung.geraet}"`,
+  } catch { /* Nicht schlimm: die Sitzung gilt dann nur bis zum Neuladen. */ }
-    'Version="0.1"',
-  ];
-  if (sitzung.token) teile.push(`Token="${sitzung.token}"`);
-  return 'MediaBrowser ' + teile.join(', ');
 }
 
-export class ServerFehler extends Error {
+export const angemeldet = (): boolean => Boolean(sitzung.token);
-  constructor(public status: number, text: string) {
+export const istAdmin = (): boolean => Boolean(sitzung.wer?.isAdministrator);
-    super(text);
+
+/* ---------- Anfragen ---------- */
+
+export class ApiFehler extends Error {
+  constructor(public status: number, nachricht: string) { super(nachricht); }
+}
+
+async function anfrage<T>(pfad: string, opts: RequestInit = {}): Promise<T> {
+  const kopf = new Headers(opts.headers);
+  if (sitzung.token) kopf.set('Authorization', `Bearer ${sitzung.token}`);
+  if (opts.body && !kopf.has('Content-Type')) kopf.set('Content-Type', 'application/json');
+
+  const antwort = await fetch(`/api/v1${pfad}`, { ...opts, headers: kopf });
+
+  // 401 heisst: das Token gilt nicht mehr. Weiterzumachen, als wäre nichts,
+  // führt zu einer Oberfläche, die bei jedem Klick stumm scheitert.
+  if (antwort.status === 401 && sitzung.token) { abmelden(); location.reload(); }
+
+  if (!antwort.ok) {
+    let text = `${antwort.status}`;
+    try {
+      const fehler = await antwort.json();
+      text = fehler.detail ?? fehler.title
+        ?? Object.values(fehler.errors ?? {}).flat().join(' ') ?? text;
+    } catch { /* Keine JSON-Antwort — dann bleibt der Status. */ }
+    throw new ApiFehler(antwort.status, text);
   }
+
+  return antwort.status === 204 ? (undefined as T) : antwort.json();
 }
 
-export async function api<T = unknown>(pfad: string, opts: RequestInit = {}): Promise<T> {
+/* ---------- Bilder ---------- */
-  const res = await fetch(BASIS + pfad, {
+
-    ...opts,
+/** Die Adresse eines Bildes.
-    headers: {
+ *
-      Authorization: kopfzeile(),
+ * Schlicht ein Pfad, denn der Browser weist sich über das Sitzungs-Cookie
-      Accept: 'application/json',
+ * aus — `<img>`, `<video>` und ein Download-Link können das von sich aus.
-      ...(opts.body ? { 'Content-Type': 'application/json' } : {}),
+ * Ohne das Cookie müsste jedes Plakat über fetch kommen und im
-      ...opts.headers,
+ * Arbeitsspeicher liegen. */
-    },
+export const bildAdresse = (schluessel: string | null): string | null =>
+  schluessel ? `/api/v1/images/${schluessel}` : null;
+
+/* ---------- System und Anmeldung ---------- */
+
+export const systemauskunft = () =>
+  anfrage<{ version: string; needsSetup: boolean; attributions: Hinweis[] }>('/system/info');
+
+export const einrichten = (benutzer: string, passwort: string) =>
+  anfrage<Rolle>('/system/setup', {
+    method: 'POST', body: JSON.stringify({ userName: benutzer, password: passwort }),
   });
 
-  if (!res.ok) {
-    throw new ServerFehler(
-      res.status,
-      res.status === 401 ? 'Nicht angemeldet' : `HTTP ${res.status}`,
-    );
-  }
-  return res.status === 204 ? (null as T) : ((await res.json()) as T);
-}
-
-/** Eine Adresse für das <video>-Element oder ein <img>.
- *
- *  Beide schicken keine Kopfzeilen mit, deshalb hängt der Schlüssel in der
- *  Adresse. Denselben Umweg geht die App. */
-export function medienURL(pfad: string, query: Record<string, string | number> = {}): string {
-  const u = new URL(BASIS + pfad, location.origin);
-  for (const [k, v] of Object.entries(query)) {
-    if (v !== '' && v != null) u.searchParams.set(k, String(v));
-  }
-  if (sitzung.token) u.searchParams.set('api_key', sitzung.token);
-  return u.href;
-}
-
-/* ---------- Anmeldung ---------- */
-
 export async function anmelden(benutzer: string, passwort: string): Promise<void> {
-  sitzung.token = '';
+  const antwort = await anfrage<{ token: string; user: Rolle }>('/auth/login', {
-  const r = await api<{ AccessToken: string; User: { Id: string } }>(
+    method: 'POST',
-    '/Users/AuthenticateByName',
+    body: JSON.stringify({
-    { method: 'POST', body: JSON.stringify({ Username: benutzer, Pw: passwort }) },
+      userName: benutzer, password: passwort,
-  );
+      deviceName: geraetename(), deviceId: geraetekennung(),
-  sitzung.token = r.AccessToken;
+    }),
-  sitzung.userId = r.User.Id;
+  });
-  localStorage.setItem('flaro.token', sitzung.token);
+  sitzung.token = antwort.token;
-  localStorage.setItem('flaro.user', sitzung.userId);
+  sitzung.wer = antwort.user;
+  merken();
 }
 
 export function abmelden(): void {
-  localStorage.removeItem('flaro.token');
+  if (sitzung.token) anfrage('/auth/logout', { method: 'POST' }).catch(() => {});
-  localStorage.removeItem('flaro.user');
+  sitzung.token = null; sitzung.wer = null;
-  location.reload();
+  merken();
 }
 
-export const angemeldet = (): boolean => Boolean(sitzung.token && sitzung.userId);
+function geraetename(): string {
+  const u = navigator.userAgent;
+  const was = /iPhone/.test(u) ? 'iPhone' : /iPad/.test(u) ? 'iPad'
+    : /Macintosh/.test(u) ? 'Mac' : /Windows/.test(u) ? 'Windows' : 'Browser';
+  return `${was} · ${/Firefox/.test(u) ? 'Firefox' : /Chrome/.test(u) ? 'Chrome' : 'Safari'}`;
+}
 
-/* ---------- Wiedergabe ---------- */
+/** Bleibt gleich, damit derselbe Browser nicht als zehn Geräte dasteht. */
+function geraetekennung(): string {
+  const name = 'flaro.device';
+  try {
+    let vorhanden = localStorage.getItem(name);
+    if (!vorhanden) { vorhanden = crypto.randomUUID(); localStorage.setItem(name, vorhanden); }
+    return vorhanden;
+  } catch { return crypto.randomUUID(); }
+}
 
-/** Handelt mit dem Server aus, wie abgespielt wird.
+/* ---------- Mediathek ---------- */
- *
- *  Das Geräteprofil sagt, was dieses Ende kann; die Antwort sagt, was daraus
- *  folgt. Leere `DirectPlayProfiles` heißt: nichts geht unverändert, rechne
- *  um. Im Browser ist das die ehrliche Auskunft — ein <video>-Element kann
- *  kein MKV und kein DTS. */
-export function wiedergabeauskunft(
-  itemID: string,
-  wahl: { quality?: number; audio?: number | null; subtitle?: number | null } = {},
-): Promise<Wiedergabeauskunft> {
-  const grenze = (wahl.quality ?? 0) > 0 ? wahl.quality! : 20000;
-  const profil = {
-    MaxStreamingBitrate: grenze * 1000,
-    DirectPlayProfiles: [],
-    TranscodingProfiles: [
-      {
-        Type: 'Video', Container: 'ts', Protocol: 'hls', VideoCodec: 'h264',
-        AudioCodec: 'aac,mp3', Context: 'Streaming', MaxAudioChannels: '2',
-        MinSegments: 1, BreakOnNonKeyFrames: true,
-      },
-    ],
-    SubtitleProfiles: [
-      { Format: 'vtt', Method: 'Hls' },
-      { Format: 'srt', Method: 'External' },
-    ],
-  };
 
-  return api<Wiedergabeauskunft>(
+export const filme = (q: { search?: string; skip?: number; take?: number } = {}) =>
-    `/Items/${itemID}/PlaybackInfo?` + new URLSearchParams({ userId: sitzung.userId }),
+  anfrage<Seite<Film>>(`/movies${abfrage(q)}`);
-    {
+
+export const serien = (q: { search?: string; skip?: number; take?: number } = {}) =>
+  anfrage<Seite<Serie>>(`/series${abfrage(q)}`);
+
+export const folgen = (serie: string, staffel?: number) =>
+  anfrage<Seite<Folge>>(`/series/${serie}/episodes${abfrage({ season: staffel })}`);
+
+export const lieferung = (datei: string) => anfrage<Lieferung>(`/files/${datei}/delivery`);
+
+export const downloadAdresse = (datei: string) => `/api/v1/files/${datei}/download`;
+
+/* ---------- Verwaltung ---------- */
+
+export const bibliotheken = () => anfrage<Bibliothek[]>('/libraries');
+
+export const bibliothekAnlegen = (name: string, art: string, pfad: string) =>
+  anfrage<Bibliothek>('/libraries', {
+    method: 'POST', body: JSON.stringify({ name, kind: art, path: pfad }),
+  });
+
+export const scanStarten = (id: string) =>
+  anfrage<unknown>(`/libraries/${id}/scan`, { method: 'POST' });
+
+export const scanstand = (id: string) => anfrage<Scanstand>(`/libraries/${id}/scan`);
+
+export const benutzer = () => anfrage<Rolle[]>('/users');
+
+export const benutzerAnlegen = (name: string, passwort: string, admin: boolean) =>
+  anfrage<Rolle>('/users', {
     method: 'POST',
-      body: JSON.stringify({
+    body: JSON.stringify({ userName: name, password: passwort, isAdministrator: admin }),
-        DeviceProfile: profil,
+  });
-        UserId: sitzung.userId,
+
-        MaxStreamingBitrate: profil.MaxStreamingBitrate,
+export const metadatenEinstellung = () =>
-        EnableDirectPlay: false,
+  anfrage<{ hasApiKey: boolean; language: string; usingProjectKey: boolean }>('/settings/metadata');
-        EnableDirectStream: false,
+
-        EnableTranscoding: true,
+export const metadatenSetzen = (werte: { apiKey?: string; language?: string }) =>
-        AutoOpenLiveStream: true,
+  anfrage<void>('/settings/metadata', { method: 'PUT', body: JSON.stringify(werte) });
-        ...(wahl.audio != null ? { AudioStreamIndex: wahl.audio } : {}),
+
-        ...((wahl.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: wahl.subtitle } : {}),
+/* ---------- Zuordnung ---------- */
-      }),
+
-    },
+export const vorschlaege = (art: 'movies' | 'series', id: string, suche?: string, jahr?: number) =>
-  );
+  anfrage<Vorschlag[]>(`/${art}/${id}/matches${abfrage({ query: suche, year: jahr })}`);
+
+export const zuordnen = (art: 'movies' | 'series', id: string, tmdbId: number) =>
+  anfrage<{ tmdbId: number; imdbId: string | null; locked: boolean; title: string; year: number | null }>(
+    `/${art}/${id}/match`, { method: 'PUT', body: JSON.stringify({ tmdbId }) });
+
+/* ---------- Hilfsmittel ---------- */
+
+function abfrage(werte: Record<string, string | number | undefined>): string {
+  const teile = Object.entries(werte)
+    .filter(([, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`);
+  return teile.length ? `?${teile.join('&')}` : '';
 }

web/app/src/contrast.ts

@@ -1,97 +0,0 @@
-/* Kontrastrechnung nach WCAG 2.1 — dieselbe wie in der App.
-   ----------------------------------------------------------------------------
-   Flaro lässt jede Farbe zu, aber ein dunkles Marineblau auf fast schwarzem
-   Grund ist als Schrift unlesbar. Solche Farben werden angehoben, bis sie den
-   geforderten Kontrast erreichen — und es wird gesagt, statt die Farbe
-   stillschweigend zu verändern.
-
-   Zuerst die Helligkeit, weil das den Farbton erhält: eine gewählte
-   Akzentfarbe soll erkennbar dieselbe bleiben. Reicht selbst volle Helligkeit
-   nicht, wird die Sättigung zurückgenommen, und die Farbe wandert Richtung
-   Weiß. */
-
-export type RGB = [number, number, number];
-
-const MINDESTENS = 4.5;
-
-export function leuchtdichte([r, g, b]: RGB): number {
-  // Der Knick bei 0,03928 ist kein Rundungsfehler, sondern Teil der
-  // sRGB-Definition: unterhalb davon ist die Kurve linear.
-  const linear = (c: number): number =>
-    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
-}
-
-export function verhaeltnis(a: RGB, b: RGB): number {
-  const la = leuchtdichte(a);
-  const lb = leuchtdichte(b);
-  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
-}
-
-export function lesbarMachen(farbe: RGB, grund: RGB): { farbe: RGB; geaendert: boolean } {
-  if (verhaeltnis(farbe, grund) >= MINDESTENS) return { farbe, geaendert: false };
-
-  const [h, s, v] = zuHSV(farbe);
-  // Beide Schritte sind monoton — mehr Helligkeit und weniger Sättigung
-  // erhöhen die Leuchtdichte immer. Deshalb genügt eine binäre Suche, und
-  // sie endet garantiert.
-  const suche = (tief: number, hoch: number, bauen: (x: number) => RGB): RGB | null => {
-    if (verhaeltnis(bauen(hoch), grund) < MINDESTENS) return null;
-    let u = tief;
-    let o = hoch;
-    for (let i = 0; i < 24; i++) {
-      const mitte = (u + o) / 2;
-      if (verhaeltnis(bauen(mitte), grund) >= MINDESTENS) o = mitte;
-      else u = mitte;
-    }
-    return bauen(o);
-  };
-
-  const heller = suche(v, 1, (x) => ausHSV(h, s, x));
-  if (heller) return { farbe: heller, geaendert: true };
-
-  const blasser = suche(s, 0, (x) => ausHSV(h, x, 1));
-  return { farbe: blasser ?? [1, 1, 1], geaendert: true };
-}
-
-function zuHSV([r, g, b]: RGB): RGB {
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const d = max - min;
-  let h = 0;
-  if (d) {
-    if (max === r) h = ((g - b) / d) % 6;
-    else if (max === g) h = (b - r) / d + 2;
-    else h = (r - g) / d + 4;
-    h /= 6;
-    if (h < 0) h += 1;
-  }
-  return [h, max ? d / max : 0, max];
-}
-
-function ausHSV(h: number, s: number, v: number): RGB {
-  const i = Math.floor(h * 6);
-  const f = h * 6 - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  const saetze: RGB[] = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]];
-  return saetze[i % 6]!;
-}
-
-export function ausHex(hex: string): RGB | null {
-  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) return null;
-  const n = parseInt(m[1]!, 16);
-  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
-}
-
-export function alsHex([r, g, b]: RGB): string {
-  return (
-    '#' +
-    [r, g, b]
-      .map((c) => Math.round(Math.min(Math.max(c, 0), 1) * 255).toString(16).padStart(2, '0'))
-      .join('')
-      .toUpperCase()
-  );
-}

web/app/src/main.ts

@@ -1,193 +1,140 @@
 import './style.css';
-import type { Item, Seite } from './types';
+import {
-import { api, sitzung, angemeldet, abmelden } from './api';
+  systemauskunft, angemeldet, istAdmin, abmelden, sitzung, type Hinweis,
-import { P, anwenden, setzen } from './prefs';
+} from './api';
-import { icon } from './icons';
+import { einrichtung } from './views/setup';
-import { esc, FELDER } from './util';
 import { anmeldung } from './views/login';
 import { startseite } from './views/home';
 import { mediathek } from './views/library';
-import { einstellungen } from './views/settings';
+import { detailseite } from './views/detail';
-import { blatt } from './views/cards';
+import { verwaltung } from './views/admin';
-import { playerOeffnen } from './views/player';
+import { esc } from './util';
 
+const anmeldeflaeche = document.getElementById('login')!;
 const app = document.getElementById('app')!;
+const leiste = document.getElementById('chrome')!;
 const inhalt = document.getElementById('content')!;
-const insel = document.getElementById('island')!;
-const chrome = document.getElementById('chrome')!;
 
-let ansichten: Item[] = [];
+let hinweise: Hinweis[] = [];
-let wo = 'home';
 
-/* ---------- Navigation ---------- */
+/* ---------- Start ---------- */
 
-function inselBauen(): void {
+void hochfahren();
-  insel.innerHTML = '';
 
-  // Der Umschalter zuerst, wie auf dem iPad: an der Seite oben in der Ecke,
+async function hochfahren(): Promise<void> {
-  // oben ganz links vor den Einträgen.
+  try {
-  const nav = document.createElement('button');
+    const auskunft = await systemauskunft();
-  nav.className = 'toggle-nav';
+    hinweise = auskunft.attributions;
-  nav.title = P.nav === 'side' ? 'Leiste nach oben' : 'Leiste an die Seite';
-  nav.setAttribute('aria-label', nav.title);
-  nav.innerHTML = icon(P.nav === 'side' ? 'barTop' : 'barSide', 18);
-  nav.onclick = () => leisteUmziehen(P.nav === 'side' ? 'top' : 'side');
-  insel.appendChild(nav);
 
-  const stueck = (klasse: string, text?: string): void => {
+    if (auskunft.needsSetup) { zeigeAnmeldung(einrichtung(() => location.reload())); return; }
+    if (!angemeldet()) { zeigeAnmeldung(anmeldung(() => location.reload())); return; }
+
+    anmeldeflaeche.classList.add('hidden');
+    app.classList.remove('hidden');
+    leisteBauen();
+    window.addEventListener('hashchange', zeichnen);
+    zeichnen();
+  } catch (fehler) {
+    // Der Server ist nicht erreichbar. Die Anmeldemaske zu zeigen wäre eine
+    // Lüge — sie würde bei jedem Versuch scheitern.
+    anmeldeflaeche.innerHTML =
+      `<div class="login-card"><h1>Flaro</h1>`
+      + `<div class="error">Der Server antwortet nicht: ${esc((fehler as Error).message)}</div>`
+      + `<div class="hint">Läuft er? Stimmt die Adresse?</div></div>`;
+  }
+}
+
+function zeigeAnmeldung(karte: HTMLElement): void {
+  anmeldeflaeche.innerHTML = '';
+  anmeldeflaeche.appendChild(karte);
+  anmeldeflaeche.classList.remove('hidden');
+  app.classList.add('hidden');
+}
+
+/* ---------- Seitenleiste ---------- */
+
+function leisteBauen(): void {
+  leiste.innerHTML = '';
+
+  const marke = document.createElement('div');
+  marke.className = 'marke';
+  marke.textContent = 'Flaro';
+  leiste.appendChild(marke);
+
+  gruppe('Mediathek');
+  eintrag('Start', '#/');
+  eintrag('Filme', '#/filme');
+  eintrag('Serien', '#/serien');
+
+  if (istAdmin()) { gruppe('Server'); eintrag('Verwaltung', '#/verwaltung'); }
+
+  const fuss = document.createElement('div');
+  fuss.className = 'nav-fuss';
+  const ab = document.createElement('button');
+  ab.textContent = `Abmelden · ${sitzung.wer?.userName ?? ''}`;
+  ab.onclick = () => { abmelden(); location.reload(); };
+  fuss.appendChild(ab);
+  leiste.appendChild(fuss);
+
+  function gruppe(text: string): void {
     const d = document.createElement('div');
-    d.className = klasse;
+    d.className = 'nav-gruppe';
-    if (text) d.textContent = text;
+    d.textContent = text;
-    insel.appendChild(d);
+    leiste.appendChild(d);
-  };
+  }
-  const eintrag = (text: string, ziel: string): void => {
+  function eintrag(text: string, ziel: string): void {
     const b = document.createElement('button');
     b.textContent = text;
-    b.dataset.key = ziel;
+    b.dataset.ziel = ziel;
-    b.onclick = () => gehe(ziel);
+    b.onclick = () => { location.hash = ziel; };
-    insel.appendChild(b);
+    leiste.appendChild(b);
-  };
-
-  stueck('brand', 'Flaro');
-  eintrag('Start', 'home');
-  eintrag('Einstellungen', 'settings');
-
-  if (ansichten.length) {
-    stueck('sep');
-    stueck('group-label', 'Mediatheken');
-    for (const v of ansichten) eintrag(v.Name ?? '—', 'lib:' + v.Id);
-  }
-  stueck('sep');
-  eintrag('Abmelden', 'out');
-
-  [...insel.querySelectorAll('button[data-key]')].forEach((b) =>
-    b.classList.toggle('active', (b as HTMLElement).dataset.key === wo));
-}
-
-/* Lässt die Leiste von ihrer alten Lage in die neue fahren.
-   ----------------------------------------------------------------------------
-   **Zwei Züge, nicht einer.** Ein reiner Weg von A nach B sieht aus, als würde
-   ein Kasten verschoben. Die Leiste zieht sich erst *in sich* zusammen und
-   zieht dann erst um — wie ein Gummiband, das sich sammelt, bevor es schnellt.
-
-   Gemacht mit FLIP: alte Lage messen, umbauen, neue Lage messen, und vom alten
-   Zustand in den neuen fahren. Über CSS allein ginge das nicht — `right: auto`
-   und `bottom: auto` lassen sich nicht animieren, und genau die wechseln. */
-function leisteUmziehen(nach: 'top' | 'side'): void {
-  const vorher = insel.getBoundingClientRect();
-  const sparsam = matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  setzen('nav', nach);
-  inselBauen();
-
-  if (sparsam) return;
-  const nachher = insel.getBoundingClientRect();
-  if (!vorher.width || !nachher.width) return;
-
-  const dx = vorher.left - nachher.left;
-  const dy = vorher.top - nachher.top;
-  const sx = vorher.width / nachher.width;
-  const sy = vorher.height / nachher.height;
-
-  // Welche Richtung sich zuerst sammelt, hängt davon ab, wohin es geht: Wer
-  // nach oben zieht, wird flach — also klappt zuerst die Höhe zusammen.
-  const gesammelt = nach === 'top'
-    ? `translate(${dx}px, ${dy}px) scale(${sx}, 1)`
-    : `translate(${dx}px, ${dy}px) scale(1, ${sy})`;
-
-  insel.animate(
-    [
-      { transformOrigin: 'top left', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`,
-        easing: 'cubic-bezier(.5,0,.75,0)', offset: 0 },
-      { transformOrigin: 'top left', transform: gesammelt,
-        easing: 'cubic-bezier(.22,1,.36,1)', offset: 0.42 },
-      { transformOrigin: 'top left', transform: 'none', offset: 1 },
-    ],
-    { duration: 520 },
-  );
-  insel.animate([{ opacity: 0.35 }, { opacity: 0.5, offset: 0.42 }, { opacity: 1 }],
-    { duration: 420, easing: 'ease-out' });
-}
-
-function gehe(ziel: string): void {
-  if (ziel === 'out') return abmelden();
-  wo = ziel;
-  [...insel.querySelectorAll('button[data-key]')].forEach((b) =>
-    b.classList.toggle('active', (b as HTMLElement).dataset.key === ziel));
-  scrollTo({ top: 0 });
-  inhalt.classList.remove('pad-top');
-
-  if (ziel === 'home') void startseite(inhalt, ansichten, tippen);
-  else if (ziel === 'settings') einstellungen(inhalt, () => gehe('home'));
-  else void mediathek(inhalt, ziel.slice(4), tippen);
-}
-
-/* ---------- Was beim Antippen geschieht ---------- */
-
-function tippen(item: Item): void {
-  blatt(item, starten);
-}
-
-/** Startet — und bei einer Serie die Folge, die als Nächstes dran ist.
- *
- *  Eine Serie gar nicht abzuspielen war die falsche Antwort: die
- *  offensichtliche Erwartung ist, dass es losgeht. */
-async function starten(item: Item): Promise<void> {
-  const ordner = ['Series', 'Season'].includes(item.Type ?? '');
-  const ziel = ordner ? await naechsteFolge(item) : item;
-  if (!ziel) return;
-  playerOeffnen(ziel, () => { if (wo === 'home') void startseite(inhalt, ansichten, tippen); });
-}
-
-async function naechsteFolge(item: Item): Promise<Item | null> {
-  const serie = item.Type === 'Season' ? (item.SeriesId ?? item.Id) : item.Id;
-  try {
-    // Erst „Als Nächstes": wer eine Serie anfängt und zurückkommt, meint die
-    // Folge, bei der er stehengeblieben ist — nicht die erste.
-    const weiter = await api<Seite>('/Shows/NextUp?' + new URLSearchParams({
-      userId: sitzung.userId, seriesId: serie, Limit: '1', Fields: FELDER,
-    }));
-    const folge = weiter.Items?.[0];
-    if (folge && (item.Type !== 'Season' || folge.SeasonId === item.Id)) return folge;
-  } catch { /* dann eben die erste */ }
-
-  try {
-    const q: Record<string, string> = { userId: sitzung.userId, Limit: '1', Fields: FELDER };
-    if (item.Type === 'Season') q.seasonId = item.Id;
-    const alle = await api<Seite>(`/Shows/${serie}/Episodes?` + new URLSearchParams(q));
-    return alle.Items?.[0] ?? null;
-  } catch {
-    return null;
   }
 }
 
-/* ---------- Los ---------- */
+/* ---------- Router ---------- */
 
-async function starte(): Promise<void> {
+function zeichnen(): void {
-  document.getElementById('login')!.classList.add('hidden');
+  const weg = location.hash.replace(/^#\/?/, '');
-  app.classList.remove('hidden');
+  const teile = weg.split('/').filter(Boolean);
-  anwenden();
-  inhalt.innerHTML = '<div class="spinner"></div>';
 
-  try {
+  leiste.querySelectorAll('button[data-ziel]').forEach(b => {
-    const r = await api<Seite>(`/Users/${sitzung.userId}/Views`);
+    const ziel = (b as HTMLElement).dataset.ziel!.replace(/^#\/?/, '');
-    ansichten = (r.Items ?? []).filter((v) => ['movies', 'tvshows'].includes(v.CollectionType ?? ''));
+    b.classList.toggle('check', ziel === (teile[0] ?? ''));
-    inselBauen();
+  });
-    gehe('home');
+
-  } catch (e) {
+  inhalt.innerHTML = '';
-    inhalt.innerHTML = `<div class="empty pad-top">${esc((e as Error).message)}<br><br>
+  inhalt.scrollTo?.(0, 0);
-      <button class="btn" id="raus">Abmelden</button></div>`;
+  window.scrollTo(0, 0);
-    document.getElementById('raus')!.onclick = abmelden;
+
+  const oeffnen = (art: 'filme' | 'serien', id: string) => { location.hash = `#/${art}/${id}`; };
+
+  const art = teile[0] === 'filme' || teile[0] === 'serien' ? teile[0] : null;
+  const kennung = teile[1];
+
+  if (art && kennung) {
+    inhalt.appendChild(detailseite(art, kennung, () => history.back()));
+  } else if (art) {
+    inhalt.appendChild(mediathek(art, oeffnen));
+  } else if (teile[0] === 'verwaltung' && istAdmin()) {
+    inhalt.appendChild(verwaltung());
+  } else {
+    inhalt.appendChild(startseite(oeffnen));
   }
+
+  inhalt.appendChild(hinweisleiste());
 }
 
-// Die Insel oben fährt beim Scrollen weg und kommt zurück, sobald man wieder
+/** Der Pflichthinweis auf TMDB — Bedingung ihrer Lizenz, nicht Höflichkeit. */
-// oben steht. An der Seite bleibt sie stehen — dort nimmt sie niemandem etwas.
+function hinweisleiste(): HTMLElement {
-addEventListener('scroll', () => {
+  const d = document.createElement('div');
-  if (P.nav === 'side') return;
+  d.className = 'attribution';
-  chrome.classList.toggle('away', scrollY > 8);
+  hinweise.forEach(h => {
-}, { passive: true });
+    const a = document.createElement('a');
-
+    a.href = h.url;
-anwenden();
+    a.target = '_blank';
-if (angemeldet()) void starte();
+    a.rel = 'noreferrer';
-else anmeldung(document.getElementById('login')!, () => void starte());
+    a.innerHTML = `<img src="${esc(h.logoUrl)}" alt="TMDB">`;
+    d.append(a, document.createTextNode(h.text));
+  });
+  return d;
+}

web/app/src/prefs.ts

@@ -1,144 +0,0 @@
-/* Die Einstellungen.
-   ----------------------------------------------------------------------------
-   **Pro Gerät, nicht über den Server.** Am Fernseher will man größere Kacheln
-   als am Laptop, und das eine soll das andere nicht umstellen. Dieselbe
-   Entscheidung wie in der App, dort nachzulesen in der Spec zum Abgleich.
-
-   Namen und Wertebereiche decken sich mit denen der App — ein Regler von
-   70 bis 180 Prozent heißt auf beiden Seiten dasselbe. Nur der Speicherort
-   unterscheidet sich, hier localStorage statt UserDefaults. */
-
-export type Navigation = 'top' | 'side';
-export type Aufmacherquelle = 'continueFirst' | 'latestOnly';
-
-interface Einstellungen {
-  accent: string;
-  nav: Navigation;
-  cardW: number;
-  heroSource: Aufmacherquelle;
-  heroCount: number;
-  heroHeight: number;
-  combineContinue: boolean;
-  hideWatched: boolean;
-  hiddenRows: string[];
-  rowOrder: string[];
-  rate: number;
-  skipForward: number;
-  skipBackward: number;
-  quality: number;
-  audioLanguage: string;
-  subtitleLanguage: string;
-}
-
-const vorgabe: Einstellungen = {
-  accent: '#C04AC9',
-  nav: 'top',
-  cardW: 150,
-  heroSource: 'continueFirst',
-  heroCount: 5,
-  heroHeight: 82,
-  combineContinue: true,
-  hideWatched: false,
-  hiddenRows: [],
-  rowOrder: [],
-  rate: 1,
-  skipForward: 30,
-  skipBackward: 10,
-  quality: 0,
-  audioLanguage: '',
-  subtitleLanguage: '',
-};
-
-function lesen<K extends keyof Einstellungen>(schluessel: K): Einstellungen[K] {
-  const roh = localStorage.getItem('flaro.' + schluessel);
-  if (roh == null) return vorgabe[schluessel];
-  const art = typeof vorgabe[schluessel];
-  if (Array.isArray(vorgabe[schluessel])) {
-    try {
-      return JSON.parse(roh) as Einstellungen[K];
-    } catch {
-      return vorgabe[schluessel];
-    }
-  }
-  if (art === 'number') return Number(roh) as Einstellungen[K];
-  if (art === 'boolean') return (roh === 'true') as Einstellungen[K];
-  return roh as Einstellungen[K];
-}
-
-/* Ausgeschrieben statt über `Object.fromEntries` zusammengesetzt: dort geht
-   der Typ jedes einzelnen Feldes verloren, und es bliebe nur ein doppelter
-   Cast, der die Prüfung stilllegt statt sie zu bestehen. */
-export const P: Einstellungen = {
-  accent: lesen('accent'),
-  nav: lesen('nav'),
-  cardW: lesen('cardW'),
-  heroSource: lesen('heroSource'),
-  heroCount: lesen('heroCount'),
-  heroHeight: lesen('heroHeight'),
-  combineContinue: lesen('combineContinue'),
-  hideWatched: lesen('hideWatched'),
-  hiddenRows: lesen('hiddenRows'),
-  rowOrder: lesen('rowOrder'),
-  rate: lesen('rate'),
-  skipForward: lesen('skipForward'),
-  skipBackward: lesen('skipBackward'),
-  quality: lesen('quality'),
-  audioLanguage: lesen('audioLanguage'),
-  subtitleLanguage: lesen('subtitleLanguage'),
-};
-
-export function setzen<K extends keyof Einstellungen>(schluessel: K, wert: Einstellungen[K]): void {
-  P[schluessel] = wert;
-  // Listen müssen als JSON abgelegt werden — ein Array landete sonst als
-  // "a,b,c" im Speicher und käme als Zeichenkette zurück.
-  localStorage.setItem(
-    'flaro.' + schluessel,
-    Array.isArray(wert) ? JSON.stringify(wert) : String(wert),
-  );
-  anwenden();
-}
-
-export function anwenden(): void {
-  const r = document.documentElement.style;
-  r.setProperty('--accent', P.accent);
-  r.setProperty('--card-w', P.cardW + 'px');
-  r.setProperty('--hero-h', P.heroHeight + 'vh');
-  document.getElementById('app')?.classList.toggle('side', P.nav === 'side');
-}
-
-/** Die Palette der App, damit die Farben sich decken. */
-export const PALETTE: readonly [string, string][] = [
-  ['Ember', '#E5484D'], ['Tangerine', '#F76B15'], ['Amber', '#FFB224'],
-  ['Lime', '#99D52A'], ['Mint', '#3DD68C'], ['Teal', '#12A594'],
-  ['Sky', '#52A9FF'], ['Indigo', '#7C77E8'], ['Orchid', '#C04AC9'],
-  ['Rose', '#F76190'],
-];
-
-export const RATES = [0.75, 1.0, 1.25, 1.5, 1.75, 2.0] as const;
-export const SKIPS = [5, 10, 15, 30, 45] as const;
-export const QUALITIES: readonly [number, string][] = [
-  [0, 'Original'], [12000, 'Hoch — 12 Mbit/s'], [8000, 'Mittel — 8 Mbit/s'],
-  [4000, 'Niedrig — 4 Mbit/s'], [2000, 'Sparsam — 2 Mbit/s'],
-];
-export const LANGUAGES: readonly [string, string][] = [
-  ['', 'Serverstandard'], ['ger', 'Deutsch'], ['eng', 'Englisch'],
-  ['fre', 'Französisch'], ['spa', 'Spanisch'], ['ita', 'Italienisch'],
-  ['jpn', 'Japanisch'], ['kor', 'Koreanisch'],
-];
-
-/* Anordnung der Reihen — dieselbe Rechnung wie `Arrangement` in MediaKit,
-   samt ihrer wichtigsten Eigenschaft: **unbekannte Einträge landen am Ende
-   statt zu verschwinden.** Sie zu verwerfen wäre die einfachere Regel — und
-   der Grund dafür, dass eine neu angelegte Mediathek nie aufgetaucht wäre. */
-export function anordnen<T extends { id: string }>(reihen: T[]): T[] {
-  const sichtbar = reihen.filter((r) => !P.hiddenRows.includes(r.id));
-  if (!P.rowOrder.length) return sichtbar;
-
-  const platz = new Map(P.rowOrder.map((id, i) => [id, i]));
-  return sichtbar
-    .map((reihe, i) => ({ reihe, rang: platz.get(reihe.id) ?? Infinity, i }))
-    // Bei gleichem Rang gilt die ursprüngliche Folge — sonst springen zwei
-    // unbekannte Reihen bei jedem Laden gegeneinander.
-    .sort((a, b) => a.rang - b.rang || a.i - b.i)
-    .map((x) => x.reihe);
-}

web/app/src/style.css

@@ -1,558 +1,246 @@
-/* ============================================================================
+/* Flaro — Weboberfläche
-   Flaro Web — ein Frontend für Jellyfin
+ *
-   ----------------------------------------------------------------------------
+ * Der Aufbau folgt Plex: Seitenleiste links, Inhalt als waagerechte Reihen,
-   Die Werte stammen aus FlaroDesign, nicht aus dem Augenmaß: dieselben
+ * Detailseite mit grossem unscharfem Hintergrund. Die Farben nicht — Orchid
-   Flächen, dieselben Radien, dieselben Abstände wie in der App.
+ * stimmt mit der iOS-App überein, und Plex' Orange ist deren Marke.
-   ========================================================================= */
+ */
+
 :root {
-  --accent: #C04AC9;          /* Orchid — wie auf dem iPad eingestellt */
+  --accent: #C04AC9;
+  --accent-dim: #8E3595;
   --canvas: #0B0B0D;
   --surface: #141417;
   --elevated: #1D1D21;
   --placeholder: #26262B;
   --text: #F5F5F7;
-  --text-2: #A0A0A8;
+  --text-dim: #A1A1A8;
-  --text-3: #6E6E76;
+  --text-faint: #6E6E76;
-  --separator: rgba(255,255,255,.10);
+  --separator: rgba(255, 255, 255, .10);
 
-  --r-card: 8px;
+  --r-card: 6px;
-  --r-control: 10px;
+  --r-control: 8px;
-  --r-sheet: 16px;
+  --r-panel: 14px;
-  --r-panel: 22px;
 
   --s-tight: 4px; --s-snug: 8px; --s-regular: 12px;
-  --s-loose: 16px; --s-section: 24px; --s-margin: 16px;
+  --s-loose: 16px; --s-section: 28px;
 
-  /* Die Kachelbreite. Der Regler in den Einstellungen verstellt genau diese
-     eine Zahl — Reihen, Raster und Querformat rechnen sich daraus ab. */
   --card-w: 150px;
-  --sidebar-w: 235px;
+  --sidebar-w: 240px;
 
-  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
-          "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
+  color-scheme: dark;
 }
 
-* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+* { box-sizing: border-box; }
 
 html, body {
   margin: 0; padding: 0; height: 100%;
   background: var(--canvas); color: var(--text);
-  font-family: var(--font); font-size: 15px; line-height: 1.4;
+  font-family: var(--font); font-size: 14px; line-height: 1.45;
   -webkit-font-smoothing: antialiased;
 }
 
-body { overflow-x: hidden; }
+button, input, select { font: inherit; color: inherit; }
-button { font-family: inherit; cursor: pointer; border: none; }
-img { display: block; }
-
 .hidden { display: none !important; }
 
-/* ---- Anmeldung ----------------------------------------------------------- */
+/* ---------- Gerüst ---------- */
+
+#app { display: flex; min-height: 100%; }
+
+#chrome {
+  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
+  background: var(--surface);
+  border-right: 1px solid var(--separator);
+  padding: var(--s-loose) 0;
+  display: flex; flex-direction: column; gap: var(--s-tight);
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+
+.marke {
+  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
+  padding: 0 var(--s-loose) var(--s-loose);
+  color: var(--accent);
+}
+
+.nav-gruppe {
+  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
+  color: var(--text-faint); padding: var(--s-loose) var(--s-loose) var(--s-tight);
+}
+
+#chrome button {
+  display: block; width: calc(100% - var(--s-regular)); margin: 0 var(--s-snug);
+  text-align: left; background: none; border: 0; cursor: pointer;
+  padding: var(--s-snug) var(--s-regular); border-radius: var(--r-control);
+  color: var(--text-dim); font-size: 14px;
+}
+#chrome button:hover { background: var(--elevated); color: var(--text); }
+#chrome button.check { background: var(--accent-dim); color: #fff; }
+
+.nav-fuss { margin-top: auto; padding-top: var(--s-loose); }
+
+#content { flex: 1; min-width: 0; padding: var(--s-section); }
+
+/* ---------- Anmeldung ---------- */
+
 #login {
-  min-height: 100dvh; display: grid; place-items: center; padding: var(--s-loose);
+  display: flex; align-items: center; justify-content: center;
+  min-height: 100vh; padding: var(--s-loose);
 }
 .login-card {
-  width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-regular);
+  width: 100%; max-width: 360px; background: var(--surface);
+  border: 1px solid var(--separator); border-radius: var(--r-panel);
+  padding: var(--s-section); display: flex; flex-direction: column; gap: var(--s-regular);
 }
-.login-card h1 {
+.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
-  font-size: 34px; font-weight: 700; margin: 0 0 var(--s-tight);
+
-  letter-spacing: -.02em; text-align: center;
+/* ---------- Bedienelemente ---------- */
+
+.field {
+  width: 100%; background: var(--elevated); border: 1px solid var(--separator);
+  border-radius: var(--r-control); padding: 10px var(--s-regular); outline: none;
 }
-.login-card .sub {
+.field:focus { border-color: var(--accent); }
-  color: var(--text-2); text-align: center; margin: 0 0 var(--s-section);
-}
-.field { display: flex; flex-direction: column; gap: 6px; }
-.field label { font-size: 13px; color: var(--text-2); }
-.field input {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text);
-  padding: 11px var(--s-regular); font-size: 15px; font-family: inherit;
-}
-.field input:focus { outline: none; border-color: var(--accent); }
 
 .btn {
-  border-radius: 999px; padding: 12px var(--s-section); font-size: 15px;
+  background: var(--elevated); border: 1px solid var(--separator);
-  font-weight: 600; background: var(--elevated); color: var(--text);
+  border-radius: var(--r-control); padding: 9px var(--s-loose);
-  transition: filter .15s ease;
+  cursor: pointer; white-space: nowrap;
 }
-.btn:hover { filter: brightness(1.25); }
+.btn:hover:not(:disabled) { background: #2A2A30; }
-.btn-primary { background: var(--accent); color: #fff; }
+.btn:disabled { opacity: .5; cursor: default; }
-.btn-row { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
+.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+.btn-primary:hover:not(:disabled) { background: #CB5BD3; }
+.btn-row { display: flex; gap: var(--s-snug); flex-wrap: wrap; align-items: center; }
 
-.error {
+.seg { display: inline-flex; background: var(--elevated); border-radius: var(--r-control); padding: 2px; }
-  color: #F08A8D; font-size: 13px; min-height: 18px; text-align: center;
+.seg button {
+  background: none; border: 0; cursor: pointer; color: var(--text-dim);
+  padding: 6px var(--s-loose); border-radius: 6px;
 }
-.note { color: var(--text-3); font-size: 12px; text-align: center; margin-top: var(--s-snug); }
+.seg button.check { background: var(--accent); color: #fff; }
 
-/* ---- Die schwebende Navigationsinsel -------------------------------------
+.seitentitel { margin: 0; font-size: 24px; letter-spacing: -.02em; }
-   Das Merkmal der App: eine Fläche mit Abstand ringsum, hinter der der
+.row { display: flex; gap: var(--s-regular); align-items: center; margin-bottom: var(--s-section); }
-   Inhalt durchläuft. Sie blendet beim Scrollen aus und kommt zurück, sobald
+.row .field { max-width: 280px; margin-left: auto; }
-   man wieder oben steht — genau wie in der App. */
-#chrome {
-  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
-  z-index: 50; display: flex; justify-content: center;
-  transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .28s ease;
-  pointer-events: none;
-}
-#chrome.away { transform: translateY(-140%); opacity: 0; }
 
-.island {
+/* ---------- Karten und Raster ---------- */
-  pointer-events: auto;
-  display: flex; align-items: center; gap: var(--s-tight);
-  padding: var(--s-snug);
-  background: rgba(20,20,23,.72);
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  border: 1px solid var(--separator);
-  border-radius: var(--r-panel);
-  box-shadow: 0 8px 24px rgba(0,0,0,.45);
-  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
-}
-.island::-webkit-scrollbar { display: none; }
 
-.island button {
+.grid {
-  background: none; color: var(--text); font-size: 15px; white-space: nowrap;
+  display: grid; gap: var(--s-loose);
-  padding: var(--s-snug) var(--s-loose); border-radius: 999px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
 }
-.island button.active { background: var(--elevated); color: var(--accent); }
-.island .sep { width: 1px; height: 22px; background: var(--separator); margin: 0 var(--s-tight); }
 
-/* Der Umschalter zwischen oben und seitlich — wie auf dem iPad ein Knopf in
+.card {
-   der Leiste selbst. Ihn in die Einstellungen zu verbannen hieße, für einen
+  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
-   Handgriff zwei Ebenen tief zu gehen. */
-.island .toggle-nav {
-  padding: var(--s-snug); color: var(--text-2); display: flex; align-items: center;
-  border-radius: var(--r-control); flex: 0 0 auto;
-}
-.island .toggle-nav:hover { color: var(--text); background: var(--elevated); }
-.island .toggle-nav svg { width: 18px; height: 18px; display: block; }
-#app.side .island .toggle-nav { align-self: flex-end; margin: 0 var(--s-snug) var(--s-snug); }
-
-/* ---- Aufmacher -----------------------------------------------------------
-   Randlos bis an den oberen Rand, die Insel schwebt darüber. Genau die
-   Entscheidung, die in der App getroffen wurde. */
-#hero {
-  position: relative; height: var(--hero-h, 82vh); min-height: 380px; overflow: hidden;
-}
-#hero .shot {
-  position: absolute; inset: 0; background-size: cover; background-position: center;
-  opacity: 0; transition: opacity .55s ease;
-}
-#hero .shot.on { opacity: 1; }
-#hero .veil {
-  position: absolute; inset: 0;
-  background:
-    linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 150px),
-    linear-gradient(to bottom, rgba(11,11,13,0) 45%, rgba(11,11,13,.75) 78%, var(--canvas) 100%);
-}
-#hero .body {
-  position: absolute; left: 0; right: 0; bottom: 0;
-  padding: 0 var(--s-margin) var(--s-section);
   display: flex; flex-direction: column; gap: var(--s-snug);
 }
-#hero .logo { max-width: 286px; max-height: 84px; object-fit: contain; }  /* 10 % über der App-Größe, auf Wunsch */
+.card:hover .poster { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
-#hero h2 { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
-#hero .meta { color: var(--text-2); font-size: 13px; }
-#hero .summary {
-  color: var(--text-2); font-size: 13px; max-width: 640px;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-}
-#hero .actions { display: flex; gap: var(--s-regular); margin-top: var(--s-tight); }
-.dots { display: flex; gap: var(--s-snug); justify-content: center; padding: var(--s-regular) 0 var(--s-section); }
-.dots button {
-  width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35);
-  padding: 0; transition: width .25s ease, background .25s ease;
-}
-.dots button:hover { background: rgba(255,255,255,.6); }
-.dots button.on { width: 18px; background: var(--accent); }
 
-/* Blättern von Hand. Die Pfeile liegen auf dem Bild und halten sich zurück,
+.poster {
-   bis der Zeiger da ist — auf einem Zeigegerät. Wer wischt, braucht sie nicht. */
+  aspect-ratio: 2 / 3; width: 100%; background: var(--placeholder);
-.hero-nav {
+  border-radius: var(--r-card); overflow: hidden; position: relative;
-  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+  transition: transform .15s ease, box-shadow .15s ease;
-  width: 44px; height: 44px; border-radius: 999px; padding: 0;
-  background: rgba(20,20,23,.55); color: var(--text); font-size: 20px;
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--separator); opacity: 0; transition: opacity .2s ease;
 }
-#hero:hover .hero-nav { opacity: 1; }
+.poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
-.hero-nav.prev { left: var(--s-margin); }
+.poster.geladen img { opacity: 1; }
-.hero-nav.next { right: var(--s-margin); }
-@media (hover: none) { .hero-nav { display: none; } }
 
-/* ---- Reihen -------------------------------------------------------------- */
+.rowline { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
-.row { margin-bottom: var(--s-section); }
+.rowline strong { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.row h3 {
+
+/* ---------- Waagerechte Reihen, wie bei Plex ---------- */
+
+.reihe { margin-bottom: var(--s-section); }
+.reihe h2 {
   font-size: 17px; font-weight: 600; margin: 0 0 var(--s-regular);
-  padding: 0 var(--s-margin); letter-spacing: -.01em;
+  letter-spacing: -.01em;
 }
 .strip {
-  display: flex; gap: var(--s-regular); overflow-x: auto;
+  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
-  padding: 0 var(--s-margin) var(--s-tight); scroll-snap-type: x proximity;
+  gap: var(--s-loose); overflow-x: auto; padding-bottom: var(--s-snug);
-  scrollbar-width: none;
+  scrollbar-width: thin; scroll-snap-type: x proximity;
 }
-.strip::-webkit-scrollbar { display: none; }
+.strip > * { scroll-snap-align: start; }
+.strip::-webkit-scrollbar { height: 8px; }
+.strip::-webkit-scrollbar-thumb { background: var(--elevated); border-radius: 4px; }
 
-.card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: start; background: none; padding: 0; text-align: left; }
+/* ---------- Detailseite ---------- */
-.card.wide { width: calc(var(--card-w) * 1.73); }
-.card .art {
-  width: 100%; aspect-ratio: 2/3; border-radius: var(--r-card);
-  background: var(--placeholder) center/cover no-repeat;
-  position: relative; overflow: hidden;
-}
-.card.wide .art { aspect-ratio: 16/9; }
-.card .title {
-  font-size: 13px; color: var(--text); margin-top: 6px;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.card .sub { font-size: 12px; color: var(--text-3); }
-.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
-.card .bar span { display: block; height: 100%; background: var(--accent); }
 
-/* ---- Raster (Mediathek) -------------------------------------------------- */
+.detail-head {
-.grid {
+  position: relative; margin: calc(var(--s-section) * -1) calc(var(--s-section) * -1) var(--s-section);
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) * .75), 1fr));
+  padding: var(--s-section); overflow: hidden;
-  gap: var(--s-loose) var(--s-regular); padding: 0 var(--s-margin) var(--s-section);
 }
-.grid .card { width: auto; }
+/* Der unscharfe Hintergrund, der die Seite trägt — Plex' auffälligster Zug. */
+.detail-head::before {
+  content: ''; position: absolute; inset: -40px;
+  background-image: var(--backdrop); background-size: cover; background-position: center;
+  filter: blur(28px) saturate(1.2); opacity: .35; z-index: 0;
+}
+.detail-head::after {
+  content: ''; position: absolute; inset: 0; z-index: 0;
+  background: linear-gradient(to bottom, rgba(11,11,13,.3), var(--canvas));
+}
+.detail-head > * { position: relative; z-index: 1; }
 
-/* ---- Detailblatt --------------------------------------------------------- */
+.detail-inner { display: flex; gap: var(--s-section); margin-top: var(--s-loose); align-items: flex-start; }
-#sheet {
+.detail-inner .poster { width: 200px; flex: 0 0 200px; }
-  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
+.detail-text h1 { margin: 0 0 var(--s-snug); font-size: 30px; letter-spacing: -.02em; }
-  display: grid; place-items: center; padding: var(--s-loose);
+.detail-text p { margin: 0; color: var(--text-dim); max-width: 60ch; }
-  backdrop-filter: blur(8px);
-}
-#sheet .panel {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); width: min(680px, 100%);
-  max-height: 86dvh; overflow: auto; padding: var(--s-section);
-}
-#sheet h2 { margin: 0 0 var(--s-snug); font-size: 24px; letter-spacing: -.02em; }
-#sheet .meta { color: var(--text-2); font-size: 13px; margin-bottom: var(--s-regular); }
-#sheet p { color: var(--text-2); font-size: 14px; }
-/* ---- Der Player ----------------------------------------------------------
-   Vollbild und schwarz. Ein Film nimmt den Bildschirm ein — alles andere ist
-   ein Vorschaufenster. */
-#player {
-  position: fixed; inset: 0; z-index: 100; background: #000;
-  display: grid; place-items: center; overflow: hidden;
-}
-#player video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
 
-/* **Die Fläche selbst nimmt keine Klicks entgegen, nur ihre Knöpfe.**
+.detail h2 { font-size: 17px; margin: var(--s-section) 0 var(--s-regular); }
-   Sonst liegt sie über dem Bild und schluckt jeden Klick — und „ins Bild
-   tippen hält an" funktioniert genau dann nicht, wenn die Bedienung zu
-   sehen ist, also fast immer. */
-.pl-chrome {
-  position: absolute; inset: 0; opacity: 0; pointer-events: none;
-  transition: opacity .25s ease;
-  display: grid; grid-template-rows: auto 1fr auto;
-}
-.pl-chrome.on { opacity: 1; }
-.pl-chrome.on button,
-.pl-chrome.on .pl-track,
-.pl-chrome.on select { pointer-events: auto; }
 
-/* Zwei Verläufe statt einer Fläche: die Mitte bleibt frei, und genau dort
+/* ---------- Listen und Einstellungen ---------- */
-   ist das Bild. */
-/* Eine gleichmäßige Abdunklung über allem, wie in der App: „genug, damit
-   weiße Schrift auf hellen Szenen lesbar bleibt, wenig genug, dass das Bild
-   nicht verfälscht wirkt." Zwei Verläufe an den Rändern taten das nicht —
-   in der Mitte stehen die Transportknöpfe und hatten nichts hinter sich. */
-.pl-chrome { background: rgba(0,0,0,.35); }
 
-.pl-top, .pl-bottom { padding: var(--s-loose) var(--s-section); }
+.settings { display: flex; flex-direction: column; gap: var(--s-regular); }
-.pl-top {
-  display: flex; align-items: center; gap: var(--s-regular);
-  padding-top: calc(var(--s-loose) + env(safe-area-inset-top));
-}
-.pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); }
-
-/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */
-.pl-quality { font-size: 14px; font-weight: 600; white-space: nowrap; }
-
-.pl-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.pl-title strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
-.pl-title span { font-size: 13px; color: var(--text-2); }
-
-/* **Keine Knopfflächen.** In der App sind das blanke weiße Symbole auf dem
-   Bild — der einzige Hintergrund ist die Abdunklung über allem. Runde
-   Flächen darunter waren meine Erfindung, und sie sind der Grund, warum
-   „Original" als Text darin schief aussah: ein Wort passt in keinen Kreis. */
-.pl-icon {
-  background: none; border: none; color: #fff; flex: 0 0 auto;
-  padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control);
-  opacity: .9; transition: opacity .15s ease, background .15s ease;
-}
-.pl-icon:hover { opacity: 1; background: rgba(255,255,255,.12); }
-/* Eine Vorgabegröße für alle Symbole, damit sie zueinander passen; einzelne
-   überschreiben sie über `icon(name, size)`. */
-.pl-icon svg, .tiny svg, .hero-nav svg { width: 22px; height: 22px; }
-.btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
-.tiny, .pl-icon, .pl-round, .hero-nav { display: inline-flex; align-items: center; justify-content: center; }
-
-.pl-center {
-  display: flex; align-items: center; justify-content: center;
-  gap: calc(var(--s-section) * 2);
-}
-/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es
-   durch die Abdunklung, die über dem ganzen Bild liegt. */
-.pl-round {
-  background: none; border: none; color: #fff; padding: var(--s-snug);
-  opacity: .95; transition: opacity .15s ease, transform .15s ease;
-}
-.pl-round:hover { opacity: 1; transform: scale(1.08); }
-
-/* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war
-   beides unlesbar, und die Zahl ist die eigentliche Auskunft. */
-
-
-/* Wie in der App: der Regler über die **volle Breite**, die Zeiten darunter.
-   Nebeneinander gestellt nimmt er in der Mitte Platz weg und wirkt wie ein
-   Formularfeld zwischen zwei Beschriftungen. */
-.pl-times {
-  display: flex; justify-content: space-between;
-  margin-top: var(--s-tight);
-  font-size: 13px; color: rgba(255,255,255,.8);
-  font-variant-numeric: tabular-nums;
-}
-
-.pl-track {
-  position: relative; width: 100%; height: 22px; cursor: pointer;
-  display: flex; align-items: center;
-}
-.pl-track::before {
-  content: ''; position: absolute; left: 0; right: 0; height: 4px;
-  background: rgba(0,0,0,.45); border-radius: 999px;
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
-}
-.pl-buf, .pl-fill { position: absolute; left: 0; height: 4px; border-radius: 999px; }
-.pl-buf { background: rgba(255,255,255,.3); width: 0; }
-.pl-fill { background: var(--accent); width: 0; }
-.pl-track i {
-  position: absolute; width: 13px; height: 13px; border-radius: 999px;
-  background: var(--accent); transform: translateX(-50%);
-  box-shadow: 0 1px 4px rgba(0,0,0,.6); transition: transform .12s ease;
-}
-.pl-track:hover i { transform: translateX(-50%) scale(1.25); }
-
-.pl-spacer { flex: 1; }
-
-/* Während geladen wird, treten die Transportknöpfe zurück: sie tun ohnehin
-   nichts, und der Kreisel lag vorher genau hinter dem größten von ihnen. */
-/* Während des ersten Ladens haben Vor- und Zurückspulen keine Wirkung — es
-   gibt noch keine Zeitachse. Der mittlere Knopf bleibt stehen: er trägt
-   jetzt selbst den Kreisel. */
-#player.loading .pl-center > :not(.pl-play) { opacity: 0; pointer-events: none; }
-.pl-center { transition: opacity .2s ease; }
-
-.pl-busy {
-  position: absolute; display: none; pointer-events: none;
-}
-.pl-busy.on { display: block; }
-.pl-busy i, .pl-wait {
-  display: block; width: 44px; height: 44px; border-radius: 999px;
-  border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent);
-  animation: spin .8s linear infinite;
-}
-
-/* Feste Größe für den mittleren Knopf, damit die beiden daneben stehen
-   bleiben: der Kreisel ist schmaler als das Symbol, das er vertritt, und
-   ohne diese Zeile rückten Zurück- und Vorspulen bei jedem Wechsel
-   zusammen. */
-.pl-round.pl-play { width: 68px; height: 68px; }
-
-.pl-error {
-  position: absolute; max-width: 460px; padding: var(--s-section);
-  background: var(--elevated); border: 1px solid rgba(229,72,77,.35);
-  border-radius: var(--r-sheet); display: flex; flex-direction: column; gap: var(--s-regular);
-  box-shadow: 0 20px 60px rgba(0,0,0,.6);
-}
-.pl-error strong { color: #F08A8D; font-size: 16px; font-weight: 600; }
-.pl-error span { color: var(--text-2); font-size: 14px; }
-.pl-error .btn { align-self: flex-start; }
-/* Das Menü für Qualität und Spuren — über der Leiste, nicht als Blatt.
-   Ein Blatt würde das Bild verdecken, und man stellt hier etwas ein, das man
-   am Bild beurteilen will. */
-.pl-menu {
-  position: fixed; z-index: 4;
-  min-width: 232px; max-width: 320px; max-height: 60vh; overflow-y: auto;
-  background: rgba(20,20,23,.92); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); padding: var(--s-snug);
-  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-  box-shadow: 0 16px 48px rgba(0,0,0,.6);
-}
-.pl-group {
-  font-size: 11px; font-weight: 600; color: var(--text-3);
-  text-transform: uppercase; letter-spacing: .06em;
-  padding: var(--s-regular) var(--s-regular) var(--s-tight);
-}
-.pl-group:first-child { padding-top: var(--s-snug); }
-.pl-item {
-  display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular);
-  width: 100%; padding: 9px var(--s-regular); border-radius: var(--r-control);
-  background: none; color: var(--text); font-size: 14px; text-align: left;
-}
-.pl-item:hover { background: rgba(255,255,255,.08); }
-.pl-item.on { color: var(--accent); }
-.pl-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
-.pl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.pl-error code {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
-  color: var(--text-3); background: rgba(0,0,0,.4); padding: var(--s-snug);
-  border-radius: 6px; word-break: break-all; line-height: 1.5;
-}
-
-@media (max-width: 600px) {
-  .pl-top, .pl-bottom { padding-left: var(--s-loose); padding-right: var(--s-loose); }
-  .pl-round { width: 50px; height: 50px; }
-  .pl-round.pl-play { width: 64px; height: 64px; }
-  .pl-rate, .pl-tools input[type=range] { display: none; }
-}
-
-/* ---- Die Navigation an der Seite -----------------------------------------
-   Dieselbe Wahl wie in der App: die Leiste sitzt oben als Insel oder links
-   als Spalte. Links bleibt sie stehen, statt beim Scrollen wegzufahren —
-   dort nimmt sie niemandem etwas weg. */
-#app.side #chrome {
-  top: 0; bottom: 0; left: 0; right: auto; width: calc(var(--sidebar-w) + 24px);
-  align-items: stretch; padding: 12px; transform: none !important; opacity: 1 !important;
-}
-#app.side .island {
-  flex-direction: column; align-items: stretch; gap: 2px;
-  width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden;
-  padding: var(--s-regular) var(--s-snug);
-}
-#app.side .island button { text-align: left; border-radius: var(--r-control); }
-#app.side .island .sep { width: auto; height: 1px; margin: var(--s-snug); }
-#app.side #content { margin-left: calc(var(--sidebar-w) + 24px); }
-
-/* ---- Der Umzug der Leiste -----------------------------------------------
-   Sie **zieht um**, sie verschwindet nicht und taucht woanders wieder auf.
-   Das ist der Unterschied zwischen einer Leiste, die man mit den Augen
-   verfolgt, und zweien, von denen eine geht und eine kommt — und es ist das,
-   was Mac und iPad tun.
-
-   Gemacht wird das mit FLIP: die alte Lage messen, umbauen, die neue Lage
-   messen, und das Element vom alten Zustand in den neuen fahren lassen. Der
-   Weg dazwischen ist eine einzige Bewegung, obwohl der Aufbau in der Mitte
-   ausgetauscht wurde. Über CSS allein ginge das nicht — `right: auto` und
-   `bottom: auto` lassen sich nicht animieren, und genau die wechseln hier.
-
-   Der Inhalt rückt gleichzeitig nach; ohne das bliebe links ein Loch stehen,
-   bis die Leiste angekommen ist. */
-#content { transition: margin-left .42s cubic-bezier(.32,.72,0,1); }
-
-/* Wer Bewegung nicht mag, bekommt keine. */
-@media (prefers-reduced-motion: reduce) {
-  #content, .card .art, .shot, .island { transition: none !important; }
-}
-#app.side .pad-top { padding-top: var(--s-loose); }
-
-.island .brand {
-  display: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
-  padding: var(--s-snug) var(--s-loose) var(--s-regular); color: var(--text);
-}
-#app.side .island .brand { display: block; }
-.island .group-label {
-  display: none; font-size: 12px; color: var(--text-3);
-  padding: var(--s-regular) var(--s-loose) var(--s-tight);
-}
-#app.side .island .group-label { display: block; }
-
-/* ---- Einstellungen -------------------------------------------------------- */
-.settings { max-width: 620px; margin: 0 auto; padding: 0 var(--s-margin) var(--s-section); }
-.settings h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 var(--s-section); }
-.settings .group {
-  font-size: 13px; font-weight: 600; color: var(--text-3);
-  text-transform: uppercase; letter-spacing: .06em;
-  margin: var(--s-section) 0 var(--s-snug); padding-left: var(--s-tight);
-}
-.settings .group:first-of-type { margin-top: 0; }
-.hexrow { display: flex; gap: var(--s-snug); margin-top: var(--s-regular); }
-.hexrow input {
-  flex: 1; background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text); padding: 9px var(--s-regular);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px;
-}
-.hexrow input:focus { outline: none; border-color: var(--accent); }
-.hint { font-size: 12px; color: var(--text-3); margin: var(--s-snug) 0 0; min-height: 16px; }
-.rowline {
-  display: flex; align-items: center; gap: var(--s-snug);
-  padding: var(--s-snug) 0; border-bottom: 1px solid var(--separator);
-}
-.rowline:last-child { border-bottom: none; }
-.rowline.off span { color: var(--text-3); text-decoration: line-through; }
-.tiny {
-  width: 30px; height: 30px; border-radius: var(--r-control);
-  background: var(--elevated); color: var(--text-2); font-size: 14px; padding: 0;
-}
-.tiny:hover:not(:disabled) { color: var(--text); }
-.tiny:disabled { opacity: .3; cursor: default; }
-.pick {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text);
-  padding: 9px var(--s-regular); font-family: inherit; font-size: 14px; width: 100%;
-}
-.pick:focus { outline: none; border-color: var(--accent); }
-.pickrow { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
-.pickrow label { flex: 1; min-width: 160px; font-size: 13px; color: var(--text-2); }
-.pickrow .pick { margin-top: 6px; }
 .setting {
   background: var(--surface); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); padding: var(--s-loose); margin-bottom: var(--s-regular);
+  border-radius: var(--r-panel); padding: var(--s-loose);
+  display: flex; flex-direction: column; gap: var(--s-snug);
 }
-.setting h4 { margin: 0 0 var(--s-snug); font-size: 15px; font-weight: 600; }
+button.setting { cursor: pointer; text-align: left; width: 100%; }
-.setting p { margin: 0 0 var(--s-regular); color: var(--text-2); font-size: 13px; }
+button.setting:hover { background: var(--elevated); }
-.swatches { display: flex; flex-wrap: wrap; gap: var(--s-regular); }
+
-.swatch {
+.hint { color: var(--text-dim); font-size: 13px; }
-  width: 34px; height: 34px; border-radius: 999px; padding: 0;
+.tiny { color: var(--text-faint); font-size: 12px; }
-  border: 2px solid transparent; transition: transform .12s ease;
+.note { color: var(--text-faint); font-size: 12px; }
+
+.error {
+  background: rgba(220, 60, 60, .14); border: 1px solid rgba(220, 60, 60, .4);
+  color: #FF9A9A; border-radius: var(--r-control); padding: var(--s-regular);
 }
-.swatch:hover { transform: scale(1.12); }
+.empty { color: var(--text-faint); padding: var(--s-section) 0; grid-column: 1 / -1; }
-.swatch.on { border-color: var(--text); }
-.seg { display: flex; gap: var(--s-snug); }
-.seg button { flex: 1; background: var(--elevated); color: var(--text-2); border-radius: var(--r-control); padding: 10px; }
-.seg button.on { background: var(--accent); color: #fff; }
-input[type=range] { width: 100%; accent-color: var(--accent); }
-.range-row { display: flex; align-items: center; gap: var(--s-regular); }
-.range-row output { min-width: 82px; text-align: right; color: var(--text-2); font-size: 13px; }
-.check {
-  display: flex; align-items: center; gap: var(--s-snug);
-  padding: var(--s-snug) 0; font-size: 14px; color: var(--text-2); cursor: pointer;
-}
-.check input { accent-color: var(--accent); width: 17px; height: 17px; }
 
-/* ---- Zustände ------------------------------------------------------------ */
-#content { padding-bottom: var(--s-section); }
-
-/* Ein Seitenwechsel soll nicht schlagen. Kurz und flach — was länger dauert,
-   fühlt sich nach Warten an statt nach Bewegung. */
-@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-.row, .grid, .settings, #hero { animation: rise .32s cubic-bezier(.32,.72,0,1) both; }
-/* Die Reihen kommen gestaffelt — die erste zuerst, dann nach unten weg. */
-.row:nth-of-type(2) { animation-delay: .04s; }
-.row:nth-of-type(3) { animation-delay: .08s; }
-.row:nth-of-type(4) { animation-delay: .12s; }
-.row:nth-of-type(n+5) { animation-delay: .16s; }
-
-/* Kacheln heben sich beim Überfahren leicht an. */
-.card .art { transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease; }
-.card:hover .art { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
-.pad-top { padding-top: calc(84px + env(safe-area-inset-top)); }
 .spinner {
-  width: 26px; height: 26px; border: 2px solid var(--separator);
+  width: 22px; height: 22px; margin: var(--s-section) auto;
-  border-top-color: var(--accent); border-radius: 999px;
+  border: 2px solid var(--separator); border-top-color: var(--accent);
-  animation: spin .8s linear infinite; margin: 60px auto;
+  border-radius: 50%; animation: dreh .7s linear infinite;
 }
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes dreh { to { transform: rotate(360deg); } }
-.empty { text-align: center; color: var(--text-2); padding: 60px var(--s-margin); }
 
-@media (max-width: 600px) {
+/* ---------- Abspielen ---------- */
-  #hero { height: 70vh; }
+
-  #hero h2 { font-size: 26px; }
+.pl-fill { position: fixed; inset: 0; background: #000; z-index: 50; }
-  .card { width: 120px; }
+
-  .card.wide { width: 200px; }
+/* ---------- Hinweis auf TMDB ---------- */
+
+.attribution {
+  margin-top: var(--s-section); padding-top: var(--s-loose);
+  border-top: 1px solid var(--separator);
+  color: var(--text-faint); font-size: 11px; display: flex; gap: var(--s-snug); align-items: center;
+}
+.attribution img { height: 14px; opacity: .7; }
+
+/* ---------- Schmale Fenster ---------- */
+
+@media (max-width: 760px) {
+  #app { flex-direction: column; }
+  #chrome {
+    width: 100%; flex: none; height: auto; position: static;
+    flex-direction: row; overflow-x: auto; padding: var(--s-snug);
+    border-right: 0; border-bottom: 1px solid var(--separator);
+  }
+  .marke, .nav-gruppe { display: none; }
+  .nav-fuss { margin: 0; padding: 0; display: flex; }
+  #content { padding: var(--s-loose); }
+  .detail-inner { flex-direction: column; }
+  .detail-inner .poster { width: 140px; flex: none; }
 }

web/app/src/types.ts

@@ -1,58 +0,0 @@
-/** Was Jellyfin über einen Eintrag schickt — nur das, was wir lesen. */
-export interface Item {
-  Id: string;
-  Name?: string;
-  Type?: string;
-  Overview?: string;
-  ProductionYear?: number;
-  RunTimeTicks?: number;
-  OfficialRating?: string;
-  IndexNumber?: number;
-  ParentIndexNumber?: number;
-  SeriesName?: string;
-  SeriesId?: string;
-  SeasonId?: string;
-  CollectionType?: string;
-  ImageTags?: Record<string, string>;
-  BackdropImageTags?: string[];
-  ParentBackdropItemId?: string;
-  ParentBackdropImageTags?: string[];
-  SeriesPrimaryImageTag?: string;
-  UserData?: { PlayedPercentage?: number; Played?: boolean };
-}
-
-export interface Seite<T = Item> {
-  Items?: T[];
-  TotalRecordCount?: number;
-}
-
-/** Eine Spur, wie der Server sie in der Wiedergabe-Auskunft nennt. */
-export interface Spur {
-  Type: 'Video' | 'Audio' | 'Subtitle';
-  Index: number;
-  DisplayTitle?: string;
-  Language?: string;
-}
-
-export interface Quelle {
-  Id?: string;
-  Container?: string;
-  TranscodingUrl?: string;
-  SupportsTranscoding?: boolean;
-  MediaStreams?: Spur[];
-  DefaultAudioStreamIndex?: number;
-  DefaultSubtitleStreamIndex?: number;
-}
-
-export interface Wiedergabeauskunft {
-  PlaySessionId?: string;
-  MediaSources?: Quelle[];
-}
-
-/** Eine Reihe auf der Startseite. */
-export interface Reihe {
-  id: string;
-  title: string;
-  items: Item[];
-  wide?: boolean;
-}

web/app/src/util.ts

@@ -1,74 +1,74 @@
-import type { Item } from './types';
+import { bildAdresse } from './api';
-import { medienURL } from './api';
 
-/** Entschärft Text, der in HTML landet. */
 export function esc(wert: unknown): string {
-  return String(wert ?? '').replace(/[&<>"']/g, (c) =>
+  return String(wert ?? '').replace(/[&<>"']/g, z =>
-    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[z]!));
 }
 
-/** Laufzeit als „2 Std 16 Min" oder „46 Min". */
+/** Sekunden als 1:02:03 oder 2:03. */
-export function laufzeit(item: Item): string {
+export function dauer(sekunden: number | null): string {
-  if (!item.RunTimeTicks) return '';
+  if (!sekunden || sekunden <= 0) return '';
-  const min = Math.round(item.RunTimeTicks / 600_000_000);
+  const s = Math.round(sekunden);
-  return min >= 60 ? `${Math.floor(min / 60)} Std ${min % 60} Min` : `${min} Min`;
+  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60);
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
+               : `${m}:${String(s % 60).padStart(2, '0')}`;
 }
 
-/** Zeit als Uhrwerk: „1:02:03" oder „7:15". */
+export function groesse(bytes: number): string {
-export function uhr(sekunden: number): string {
+  if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
-  if (!isFinite(sekunden)) return '–:--';
+  if (bytes >= 1024 ** 2) return `${Math.round(bytes / 1024 ** 2)} MB`;
-  const s = Math.max(0, Math.floor(sekunden));
+  return `${Math.round(bytes / 1024)} KB`;
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const r = s % 60;
-  return (h ? `${h}:${String(m).padStart(2, '0')}` : `${m}`) + ':' + String(r).padStart(2, '0');
 }
 
-/** Der Folgentitel: „S2:E4 · Der Fall". */
+/** Ein Plakat mit Platzhalter dahinter.
-export function folgentitel(item: Item): string {
-  const nummer =
-    item.ParentIndexNumber != null && item.IndexNumber != null
-      ? `S${item.ParentIndexNumber}:E${item.IndexNumber}`
-      : '';
-  return [nummer, item.Name].filter(Boolean).join(' · ');
-}
-
-/** Ob ein Eintrag ein Bild dieser Art hat. */
-export function hatBild(item: Item, art: 'Primary' | 'Backdrop'): boolean {
-  return art === 'Backdrop'
-    ? Boolean(item.BackdropImageTags?.length || item.ParentBackdropImageTags?.length)
-    : Boolean(item.ImageTags?.[art]);
-}
-
-/** Das Bild eines Eintrags — mit den Ersatzwegen, die Jellyfin nötig macht.
  *
- *  Eine Folge hat selten ein eigenes Hintergrundbild, aber ihre Serie hat
+ * Der Platzhalter hält die Fläche frei, bis das Bild da ist — ohne ihn
- *  eins. Ohne diese Kette bliebe die halbe Startseite grau. */
+ * springt das Raster beim Nachladen jedes Mal um. */
-export function bild(item: Item, art: 'Primary' | 'Backdrop', breite = 400): string {
+export function plakat(schluessel: string | null, beschriftung: string): HTMLElement {
-  if (art === 'Backdrop') {
+  const rahmen = document.createElement('div');
-    if (item.BackdropImageTags?.length) {
+  rahmen.className = 'poster';
-      return medienURL(`/Items/${item.Id}/Images/Backdrop`, {
+  rahmen.setAttribute('role', 'img');
-        tag: item.BackdropImageTags[0]!, maxWidth: breite, quality: 90,
+  rahmen.setAttribute('aria-label', beschriftung);
-      });
+
+  const adresse = bildAdresse(schluessel);
+  if (adresse) {
+    const img = document.createElement('img');
+    img.src = adresse;
+    img.alt = '';
+    img.loading = 'lazy';
+    // Erst einblenden, wenn es da ist — sonst blitzt der Platzhalter durch.
+    img.onload = () => rahmen.classList.add('geladen');
+    rahmen.appendChild(img);
   }
-    if (item.ParentBackdropItemId) {
+  return rahmen;
-      return medienURL(`/Items/${item.ParentBackdropItemId}/Images/Backdrop`, {
-        tag: item.ParentBackdropImageTags?.[0] ?? '', maxWidth: breite, quality: 90,
-      });
-    }
-  }
-  if (item.ImageTags?.Primary) {
-    return medienURL(`/Items/${item.Id}/Images/Primary`, {
-      tag: item.ImageTags.Primary, maxWidth: breite, quality: 90,
-    });
-  }
-  if (item.SeriesPrimaryImageTag && item.SeriesId) {
-    return medienURL(`/Items/${item.SeriesId}/Images/Primary`, {
-      tag: item.SeriesPrimaryImageTag, maxWidth: breite, quality: 90,
-    });
-  }
-  return '';
 }
 
-/** Die Felder, die die Startseite braucht. */
+export function knopf(text: string, klasse = 'btn'): HTMLButtonElement {
-export const FELDER = 'Overview,Genres,MediaSources,ParentBackdropItemId,ParentBackdropImageTags';
+  const b = document.createElement('button');
+  b.className = klasse;
+  b.textContent = text;
+  return b;
+}
+
+export function feld(platzhalter: string, art = 'text'): HTMLInputElement {
+  const i = document.createElement('input');
+  i.className = 'field';
+  i.type = art;
+  i.placeholder = platzhalter;
+  return i;
+}
+
+/** Zeigt einen Fehler, ohne die Seite zu verlassen. */
+export function fehlerzeile(text: string): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'error';
+  d.textContent = text;
+  return d;
+}
+
+export function leer(text: string): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'empty';
+  d.textContent = text;
+  return d;
+}

web/app/src/views/admin.ts

@@ -0,0 +1,230 @@
+import {
+  bibliotheken, bibliothekAnlegen, scanStarten, scanstand,
+  benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
+  type Bibliothek,
+} from '../api';
+import { esc, knopf, feld, fehlerzeile, leer } from '../util';
+
+export function verwaltung(): HTMLElement {
+  const wurzel = document.createElement('div');
+  wurzel.append(bibliotheksbereich(), benutzerbereich(), metadatenbereich());
+  return wurzel;
+}
+
+/* ---------- Bibliotheken ---------- */
+
+function bibliotheksbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Bibliotheken';
+
+  const liste = document.createElement('div');
+  liste.className = 'settings';
+  bereich.append(h, liste, anlegeform());
+  void laden();
+
+  async function laden(): Promise<void> {
+    liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      const alle = await bibliotheken();
+      liste.innerHTML = '';
+      if (alle.length === 0) {
+        liste.appendChild(leer('Noch keine Bibliothek. Lege unten eine an — der Pfad ist '
+          + 'der **im Container**, also etwa /media/Filme, nicht der auf dem NAS.'));
+        return;
+      }
+      alle.forEach(b => liste.appendChild(block(b)));
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  function block(b: Bibliothek): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'setting';
+    d.innerHTML = `<div class="rowline"><strong>${esc(b.name)}</strong>`
+      + `<span class="tiny">${esc(b.kind)} · ${esc(b.path)}</span></div>`;
+
+    const stand = document.createElement('div');
+    stand.className = 'hint';
+    const los = knopf('Scannen', 'btn');
+
+    los.onclick = async () => {
+      los.disabled = true;
+      try {
+        await scanStarten(b.id);
+        await verfolgen();
+      } catch (fehler) { stand.textContent = (fehler as Error).message; }
+      los.disabled = false;
+    };
+
+    /** Fragt nach, bis der Lauf durch ist — der Scan läuft im Hintergrund. */
+    async function verfolgen(): Promise<void> {
+      for (let i = 0; i < 900; i++) {
+        const s = await scanstand(b.id);
+        if (s.state === 'running') stand.textContent = 'Wird durchsucht…';
+        else if (s.state === 'enriching') stand.textContent = 'Metadaten werden geholt…';
+        else if (s.state === 'failed') { stand.textContent = s.error ?? 'Gescheitert.'; return; }
+        else if (s.state === 'finished') {
+          const teile = [`${s.filesFound} Dateien`, `${s.added} neu`, `${s.removed} entfernt`];
+          if (s.unrecognised) teile.push(`${s.unrecognised} ohne Folgennummer`);
+          if (s.metadata?.skipped) teile.push('Metadaten übersprungen');
+          else if (s.metadata) teile.push(`${s.metadata.moviesMatched + s.metadata.seriesMatched} zugeordnet`);
+          if (s.metadata?.error) teile.push(s.metadata.error);
+          stand.textContent = teile.join(' · ');
+          return;
+        }
+        await new Promise(r => setTimeout(r, 1000));
+      }
+    }
+
+    d.append(los, stand);
+    void verfolgen();
+    return d;
+  }
+
+  function anlegeform(): HTMLElement {
+    const form = document.createElement('div');
+    form.className = 'setting';
+
+    const name = feld('Name, etwa Filme');
+    const pfad = feld('Pfad im Container, etwa /media/Filme');
+    const art = document.createElement('select');
+    art.className = 'field';
+    art.innerHTML = '<option value="Movies">Filme</option><option value="Shows">Serien</option>';
+    const los = knopf('Anlegen', 'btn btn-primary');
+
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    reihe.append(name, art, pfad, los);
+    form.append(reihe);
+
+    los.onclick = async () => {
+      form.querySelector('.error')?.remove();
+      los.disabled = true;
+      try {
+        await bibliothekAnlegen(name.value.trim(), art.value, pfad.value.trim());
+        name.value = ''; pfad.value = '';
+        await laden();
+      } catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
+      los.disabled = false;
+    };
+    return form;
+  }
+
+  return bereich;
+}
+
+/* ---------- Benutzer ---------- */
+
+function benutzerbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Benutzer';
+  const liste = document.createElement('div');
+  liste.className = 'settings';
+
+  const name = feld('Benutzername');
+  const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
+  const admin = document.createElement('label');
+  admin.className = 'hint';
+  const haken = document.createElement('input');
+  haken.type = 'checkbox';
+  admin.append(haken, document.createTextNode(' Administrator'));
+  const los = knopf('Anlegen', 'btn');
+
+  const form = document.createElement('div');
+  form.className = 'setting';
+  const reihe = document.createElement('div');
+  reihe.className = 'btn-row';
+  reihe.append(name, passwort, admin, los);
+  form.append(reihe);
+
+  bereich.append(h, liste, form);
+  void laden();
+
+  async function laden(): Promise<void> {
+    liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      const alle = await benutzer();
+      liste.innerHTML = '';
+      alle.forEach(b => {
+        const d = document.createElement('div');
+        d.className = 'setting';
+        d.innerHTML = `<div class="rowline"><strong>${esc(b.userName)}</strong>`
+          + `<span class="tiny">${b.isAdministrator ? 'Administrator' : 'Benutzer'}</span></div>`;
+        liste.appendChild(d);
+      });
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  los.onclick = async () => {
+    form.querySelector('.error')?.remove();
+    los.disabled = true;
+    try {
+      await benutzerAnlegen(name.value.trim(), passwort.value, haken.checked);
+      name.value = ''; passwort.value = ''; haken.checked = false;
+      await laden();
+    } catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
+    los.disabled = false;
+  };
+
+  return bereich;
+}
+
+/* ---------- Metadaten ---------- */
+
+function metadatenbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Metadaten';
+  const block = document.createElement('div');
+  block.className = 'setting';
+  bereich.append(h, block);
+
+  void (async () => {
+    try {
+      const stand = await metadatenEinstellung();
+
+      const auskunft = document.createElement('div');
+      auskunft.className = 'hint';
+      auskunft.textContent = stand.usingProjectKey
+        ? 'Es wird der mitgelieferte TMDB-Zugang benutzt. Ein eigener löst ihn ab.'
+        : stand.hasApiKey ? 'Ein eigener TMDB-Zugang ist hinterlegt.'
+        : 'Kein Zugang hinterlegt — die Titel bleiben bei den Dateinamen.';
+
+      const schluessel = feld('Eigener TMDB-Zugang (Read Access Token oder API Key)', 'password');
+      const sprache = feld('Sprache, etwa de-DE');
+      sprache.value = stand.language;
+      const los = knopf('Speichern', 'btn');
+
+      const reihe = document.createElement('div');
+      reihe.className = 'btn-row';
+      reihe.append(schluessel, sprache, los);
+
+      los.onclick = async () => {
+        block.querySelector('.error')?.remove();
+        los.disabled = true;
+        try {
+          await metadatenSetzen({
+            apiKey: schluessel.value.trim() || undefined,
+            language: sprache.value.trim() || undefined,
+          });
+          schluessel.value = '';
+          auskunft.textContent = 'Gespeichert. Der nächste Scan benutzt die neuen Angaben.';
+        } catch (fehler) { block.appendChild(fehlerzeile((fehler as Error).message)); }
+        los.disabled = false;
+      };
+
+      block.append(auskunft, reihe);
+    } catch (fehler) {
+      block.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  })();
+
+  return bereich;
+}

web/app/src/views/cards.ts

@@ -1,60 +0,0 @@
-import type { Item } from '../types';
-import { esc, bild, laufzeit } from '../util';
-
-/** Eine Kachel. Querformat für Angefangenes, hochkant für alles andere —
- *  dieselbe Entscheidung wie in der App, und sie ist keine Einstellung:
- *  Angefangenes erkennt man am Szenenbild wieder, Neues sucht man nach
- *  Plakaten aus. */
-export function kachel(item: Item, quer: boolean, beimTippen: (item: Item) => void): HTMLElement {
-  const b = document.createElement('button');
-  b.className = 'card' + (quer ? ' wide' : '');
-  const anteil = item.UserData?.PlayedPercentage;
-  const art = bild(item, quer ? 'Backdrop' : 'Primary', quer ? 500 : 300);
-
-  b.innerHTML = `
-    <div class="art" ${art ? `style="background-image:url('${art}')"` : ''}>
-      ${anteil ? `<div class="bar"><span style="width:${Math.min(anteil, 100)}%"></span></div>` : ''}
-    </div>
-    <div class="title">${esc(item.SeriesName || item.Name)}</div>
-    <div class="sub">${esc(unterzeile(item))}</div>`;
-  b.onclick = () => beimTippen(item);
-  return b;
-}
-
-function unterzeile(item: Item): string {
-  if (item.Type === 'Episode' && item.ParentIndexNumber != null) {
-    return `S${item.ParentIndexNumber}:E${item.IndexNumber} · ${item.Name}`;
-  }
-  return String(item.ProductionYear ?? '');
-}
-
-/** Das Blatt zu einem Titel. */
-export function blatt(item: Item, starten: (item: Item) => void): void {
-  const hinten = document.createElement('div');
-  hinten.id = 'sheet';
-
-  // Serien und Staffeln sind Ordner — abgespielt wird trotzdem, nur eben
-  // nicht der Ordner, sondern die Folge, die als Nächstes dran ist.
-  const ordner = ['Series', 'Season'].includes(item.Type ?? '');
-  const spielbar = ordner || !['BoxSet', 'Folder', 'CollectionFolder'].includes(item.Type ?? '');
-  const teile = [item.ProductionYear, laufzeit(item), item.OfficialRating].filter(Boolean);
-
-  hinten.innerHTML = `
-    <div class="panel">
-      <h2>${esc(item.SeriesName ? item.SeriesName + ' — ' + item.Name : item.Name)}</h2>
-      <div class="meta">${teile.join(' · ')}</div>
-      <p>${esc(item.Overview ?? '')}</p>
-      <div class="btn-row">
-        ${spielbar ? '<button class="btn btn-primary" id="sheet-play"></button>' : ''}
-        <button class="btn" id="sheet-close">Schließen</button>
-      </div>
-    </div>`;
-  hinten.onclick = (e) => { if (e.target === hinten) hinten.remove(); };
-  document.body.appendChild(hinten);
-  hinten.querySelector<HTMLElement>('#sheet-close')!.onclick = () => hinten.remove();
-
-  if (!spielbar) return;
-  const knopf = hinten.querySelector<HTMLButtonElement>('#sheet-play')!;
-  knopf.textContent = ordner ? '▶ Weiterschauen' : '▶ Abspielen';
-  knopf.onclick = () => { starten(item); hinten.remove(); };
-}

web/app/src/views/detail.ts

@@ -0,0 +1,297 @@
+import {
+  filme, serien, folgen, lieferung, downloadAdresse, vorschlaege, zuordnen,
+  bildAdresse, istAdmin,
+  type Film, type Serie, type Folge, type Datei, type Lieferung,
+} from '../api';
+import { esc, dauer, groesse, plakat, knopf, feld, fehlerzeile, leer } from '../util';
+
+type Art = 'filme' | 'serien';
+
+export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElement {
+  const wurzel = document.createElement('div');
+  wurzel.className = 'detail';
+  void laden();
+
+  async function laden(): Promise<void> {
+    wurzel.innerHTML = '<div class="spinner"></div>';
+    try {
+      if (art === 'filme') {
+        const seite = await filme({ take: 200 });
+        const film = seite.items.find(f => f.id === id);
+        if (!film) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diesen Film gibt es nicht mehr.')); return; }
+        wurzel.innerHTML = '';
+        wurzel.append(kopfbereich(film), dateiliste(film.files), zuordnungsbereich(film.title, film.year));
+      } else {
+        const seite = await serien({ take: 200 });
+        const serie = seite.items.find(s => s.id === id);
+        if (!serie) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diese Serie gibt es nicht mehr.')); return; }
+        wurzel.innerHTML = '';
+        wurzel.append(kopfbereich(serie), await staffeln(serie), zuordnungsbereich(serie.title, serie.year));
+      }
+    } catch (fehler) {
+      wurzel.innerHTML = '';
+      wurzel.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  /* ---------- Kopf ---------- */
+
+  function kopfbereich(eintrag: Film | Serie): HTMLElement {
+    const kopf = document.createElement('header');
+    kopf.className = 'detail-head';
+
+    const hintergrund = bildAdresse(eintrag.backdropImage);
+    if (hintergrund) kopf.style.setProperty('--backdrop', `url("${hintergrund}")`);
+
+    const zurueckKnopf = knopf('Zurück', 'btn');
+    zurueckKnopf.onclick = zurueck;
+
+    const text = document.createElement('div');
+    text.className = 'detail-text';
+    const jahr = eintrag.year ? ` (${eintrag.year})` : '';
+    text.innerHTML =
+      `<h1>${esc(eintrag.title)}${esc(jahr)}</h1>` +
+      `<p>${esc(eintrag.overview ?? 'Keine Beschreibung.')}</p>`;
+
+    const innen = document.createElement('div');
+    innen.className = 'detail-inner';
+    innen.append(plakat(eintrag.posterImage, eintrag.title), text);
+
+    kopf.append(zurueckKnopf, innen);
+    return kopf;
+  }
+
+  /* ---------- Dateien und Spuren ---------- */
+
+  function dateiliste(dateien: Datei[]): HTMLElement {
+    const bereich = document.createElement('section');
+    bereich.className = 'settings';
+
+    if (dateien.length === 0) { bereich.appendChild(leer('Keine Datei hinterlegt.')); return bereich; }
+
+    dateien.forEach(datei => {
+      const block = document.createElement('div');
+      block.className = 'setting';
+
+      const zeile = document.createElement('div');
+      zeile.className = 'rowline';
+      zeile.innerHTML =
+        `<strong>${esc(datei.fileName)}</strong>` +
+        `<span class="tiny">${esc([datei.container?.toUpperCase(), groesse(datei.sizeBytes),
+          dauer(datei.durationSeconds)].filter(Boolean).join(' · '))}</span>`;
+      block.appendChild(zeile);
+
+      const spuren = document.createElement('div');
+      spuren.className = 'hint';
+      spuren.innerHTML = datei.streams.map(s => {
+        const was = s.kind === 'Video' ? `Bild ${s.width}×${s.height}`
+          : s.kind === 'Audio' ? `Ton${s.channels ? ` ${s.channels}.0` : ''}`
+          : 'Text';
+        const name = [s.language?.toUpperCase(), s.title].filter(Boolean).join(' · ');
+        return `<div>${esc(was)} — ${esc(s.codec ?? '?')}${name ? ` — ${esc(name)}` : ''}</div>`;
+      }).join('');
+      block.appendChild(spuren);
+
+      block.appendChild(aktionen(datei));
+      bereich.appendChild(block);
+    });
+    return bereich;
+  }
+
+  function aktionen(datei: Datei): HTMLElement {
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    const stand = document.createElement('div');
+    stand.className = 'hint';
+
+    const abspielen = knopf('Abspielen', 'btn btn-primary');
+    const herunterladen = knopf('Herunterladen', 'btn');
+
+    /** Sorgt dafür, dass die Datei abholbereit ist — packt um, falls nötig. */
+    async function bereitstellen(): Promise<boolean> {
+      let auskunft: Lieferung;
+      try { auskunft = await lieferung(datei.id); }
+      catch (fehler) { stand.textContent = (fehler as Error).message; return false; }
+
+      if (auskunft.method === 'directFile') return true;
+      if (auskunft.packageState === 'ready') return true;
+
+      // **Hier steht, was passieren wird, bevor es passiert.** Welche Spuren
+      // neu gerechnet werden, welche Untertitel nicht mitkönnen.
+      const gruende: string[] = [];
+      if (auskunft.audioToEncode.length) gruende.push(`${auskunft.audioToEncode.length} Tonspur(en) werden neu gerechnet`);
+      if (auskunft.subtitlesDropped.length) gruende.push(`${auskunft.subtitlesDropped.length} Bilduntertitel können nicht mit`);
+      stand.textContent = `Wird in eine MP4 umgepackt${gruende.length ? ` — ${gruende.join(', ')}` : ''}…`;
+
+      // Der erste Abruf stösst an, danach wird nachgefragt.
+      for (let i = 0; i < 600; i++) {
+        const antwort = await fetch(downloadAdresse(datei.id), { method: 'HEAD' });
+        if (antwort.ok) { stand.textContent = ''; return true; }
+        if (antwort.status !== 202) { stand.textContent = `Umpacken gescheitert (${antwort.status}).`; return false; }
+
+        const wie = await lieferung(datei.id);
+        if (wie.error) { stand.textContent = wie.error; return false; }
+        stand.textContent = `Wird umgepackt… ${Math.round(wie.progress * 100)} %`;
+        await new Promise(r => setTimeout(r, 1000));
+      }
+      stand.textContent = 'Das Umpacken dauert ungewöhnlich lange.';
+      return false;
+    }
+
+    abspielen.onclick = async () => {
+      abspielen.disabled = true;
+      if (await bereitstellen()) spieler(downloadAdresse(datei.id));
+      abspielen.disabled = false;
+    };
+
+    herunterladen.onclick = async () => {
+      herunterladen.disabled = true;
+      if (await bereitstellen()) {
+        // Ein echter Link, kein Blob: der Browser lädt im Hintergrund und
+        // kann fortsetzen, statt den ganzen Film in den Speicher zu nehmen.
+        const a = document.createElement('a');
+        a.href = downloadAdresse(datei.id);
+        a.download = '';
+        a.click();
+      }
+      herunterladen.disabled = false;
+    };
+
+    reihe.append(abspielen, herunterladen);
+    const huelle = document.createElement('div');
+    huelle.append(reihe, stand);
+    return huelle;
+  }
+
+  /* ---------- Staffeln und Folgen ---------- */
+
+  async function staffeln(serie: Serie): Promise<HTMLElement> {
+    const bereich = document.createElement('section');
+    const alle = await folgen(serie.id);
+
+    serie.seasons.forEach(nummer => {
+      const titel = document.createElement('h2');
+      titel.textContent = `Staffel ${nummer}`;
+      bereich.appendChild(titel);
+
+      const liste = document.createElement('div');
+      liste.className = 'settings';
+      alle.items.filter(f => f.season === nummer).forEach(folge => {
+        liste.appendChild(folgenblock(folge));
+      });
+      bereich.appendChild(liste);
+    });
+    return bereich;
+  }
+
+  function folgenblock(folge: Folge): HTMLElement {
+    const block = document.createElement('div');
+    block.className = 'setting';
+    const zeile = document.createElement('div');
+    zeile.className = 'rowline';
+    zeile.innerHTML =
+      `<strong>${String(folge.episode).padStart(2, '0')} · ${esc(folge.title ?? 'Ohne Titel')}</strong>`;
+    block.appendChild(zeile);
+
+    if (folge.overview) {
+      const text = document.createElement('div');
+      text.className = 'hint';
+      text.textContent = folge.overview;
+      block.appendChild(text);
+    }
+    folge.files.forEach(datei => block.appendChild(aktionen(datei)));
+    return block;
+  }
+
+  /* ---------- Zuordnung korrigieren ---------- */
+
+  function zuordnungsbereich(titel: string, jahr: number | null): HTMLElement {
+    const bereich = document.createElement('section');
+    if (!istAdmin()) return bereich;
+
+    const oeffner = knopf('Zuordnung korrigieren', 'btn');
+    bereich.appendChild(oeffner);
+
+    oeffner.onclick = () => {
+      oeffner.remove();
+      bereich.appendChild(zuordnungsmaske(titel, jahr));
+    };
+    return bereich;
+  }
+
+  function zuordnungsmaske(titel: string, jahr: number | null): HTMLElement {
+    const maske = document.createElement('div');
+    maske.className = 'settings';
+
+    const suche = feld('Anderer Suchbegriff');
+    suche.value = titel;
+    const jahrfeld = feld('Jahr', 'number');
+    if (jahr) jahrfeld.value = String(jahr);
+    const suchen = knopf('Suchen', 'btn');
+
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    reihe.append(suche, jahrfeld, suchen);
+
+    const treffer = document.createElement('div');
+    maske.append(reihe, treffer);
+
+    async function fragen(): Promise<void> {
+      treffer.innerHTML = '<div class="spinner"></div>';
+      try {
+        const liste = await vorschlaege(art === 'filme' ? 'movies' : 'series', id,
+          suche.value.trim(), jahrfeld.value ? Number(jahrfeld.value) : undefined);
+
+        treffer.innerHTML = '';
+        if (liste.length === 0) { treffer.appendChild(leer('Nichts gefunden.')); return; }
+
+        liste.forEach(v => {
+          const zeile = document.createElement('button');
+          zeile.className = 'setting pick';
+          zeile.innerHTML =
+            `<strong>${esc(v.title)}</strong> <span class="tiny">${esc(v.year ?? '')} · TMDB ${v.tmdbId}</span>` +
+            `<div class="hint">${esc((v.overview ?? '').slice(0, 160))}</div>`;
+          zeile.onclick = async () => {
+            zeile.disabled = true;
+            try {
+              await zuordnen(art === 'filme' ? 'movies' : 'series', id, v.tmdbId);
+              await laden();
+            } catch (fehler) { treffer.appendChild(fehlerzeile((fehler as Error).message)); }
+          };
+          treffer.appendChild(zeile);
+        });
+      } catch (fehler) {
+        treffer.innerHTML = '';
+        treffer.appendChild(fehlerzeile((fehler as Error).message));
+      }
+    }
+
+    suchen.onclick = () => void fragen();
+    void fragen();
+    return maske;
+  }
+
+  return wurzel;
+}
+
+/* ---------- Abspielen ---------- */
+
+function spieler(adresse: string): void {
+  const schicht = document.createElement('div');
+  schicht.className = 'pl-fill';
+
+  const video = document.createElement('video');
+  video.src = adresse;
+  video.controls = true;
+  video.autoplay = true;
+  video.style.cssText = 'width:100%;height:100%;background:#000';
+
+  const schliessen = knopf('Schliessen', 'btn');
+  schliessen.style.cssText = 'position:absolute;top:16px;right:16px;z-index:2';
+  schliessen.onclick = () => { video.pause(); schicht.remove(); };
+
+  schicht.append(video, schliessen);
+  schicht.onkeydown = e => { if (e.key === 'Escape') schliessen.click(); };
+  document.body.appendChild(schicht);
+  video.focus();
+}

web/app/src/views/home.ts

@@ -1,207 +1,60 @@
-import type { Item, Reihe, Seite } from '../types';
+import { filme, serien, type Film, type Serie } from '../api';
-import { api, sitzung } from '../api';
+import { esc, plakat, leer, fehlerzeile } from '../util';
-import { P, anordnen } from '../prefs';
-import { icon } from '../icons';
-import { esc, bild, laufzeit, hatBild, FELDER } from '../util';
-import { kachel } from './cards';
 
-/** Welche Reihen es bei diesem Server gibt — für die Einstellungen. */
+/** Die Startseite: je eine waagerechte Reihe, wie bei Plex.
-export let bekannteReihen: { id: string; title: string }[] = [];
+ *
-
+ * Noch ohne „Weiterschauen" — dafür braucht es den Sehfortschritt, und der
-export async function startseite(
+ * kommt erst in Stufe 4. Eine leere Reihe mit diesem Namen wäre eine Zusage,
-  wurzel: HTMLElement,
+ * die niemand einlöst. */
-  ansichten: Item[],
+export function startseite(oeffnen: (art: 'filme' | 'serien', id: string) => void): HTMLElement {
-  oeffnen: (item: Item) => void,
+  const wurzel = document.createElement('div');
-): Promise<void> {
   wurzel.innerHTML = '<div class="spinner"></div>';
 
-  const hole = async (pfad: string, q: Record<string, string> = {}): Promise<Item[]> => {
+  void (async () => {
     try {
-      const r = await api<Seite | Item[]>(
+      const [f, s] = await Promise.all([filme({ take: 24 }), serien({ take: 24 })]);
-        pfad + '?' + new URLSearchParams({ Fields: FELDER, Limit: '20', ...q }),
-      );
-      // „Latest" liefert ein blankes Feld, alles andere eine Seite mit Items.
-      return Array.isArray(r) ? r : (r.Items ?? []);
-    } catch {
-      return [];
-    }
-  };
-
-  const [weiter, naechstes, ...neues] = await Promise.all([
-    hole(`/Users/${sitzung.userId}/Items/Resume`, { MediaTypes: 'Video' }),
-    hole('/Shows/NextUp', { userId: sitzung.userId }),
-    ...ansichten.map((v) => hole(`/Users/${sitzung.userId}/Items/Latest`, { ParentId: v.Id })),
-  ]);
-
-  let reihen: Reihe[];
-  if (P.combineContinue) {
-    const gesehen = new Set<string>();
-    const zusammen = [...weiter!, ...naechstes!].filter((i) => !gesehen.has(i.Id) && gesehen.add(i.Id));
-    // Die zusammengelegte Reihe behält die Kennung der ersten — sonst wäre sie
-    // für die gespeicherte Reihenfolge eine neue und stünde wieder unten.
-    reihen = [{ id: 'resume', title: 'Weiterschauen', items: zusammen, wide: true }];
-  } else {
-    reihen = [
-      { id: 'resume', title: 'Weiterschauen', items: weiter!, wide: true },
-      { id: 'nextup', title: 'Als Nächstes', items: naechstes!, wide: true },
-    ];
-  }
-
-  reihen.push(...ansichten.map((v, i) => ({
-    id: 'latest.' + v.Id,
-    title: `Neu in ${v.Name}`,
-    // Gesehenes ausblenden gilt nur für Neuzugänge: in „Weiterschauen" wäre
-    // es sinnlos, dort ist alles angefangen.
-    items: (neues[i] ?? []).filter((it) => !P.hideWatched || !it.UserData?.Played),
-  })));
-  reihen = reihen.filter((r) => r.items.length);
-
-  // **Vor** dem Ausblenden merken: die Einstellungen müssen auch die Reihen
-  // anbieten, die gerade versteckt sind.
-  bekannteReihen = reihen.map((r) => ({ id: r.id, title: r.title }));
-  reihen = anordnen(reihen);
-
-  const auswahl = P.heroSource === 'latestOnly'
-    ? neues.flat()
-    : [...weiter!, ...naechstes!, ...neues.flat()];
-  const oben = aufmacherWahl(auswahl);
-
       wurzel.innerHTML = '';
-  wurzel.classList.toggle('pad-top', oben.length === 0);
-  if (oben.length) wurzel.appendChild(aufmacher(oben, oeffnen));
-  for (const r of reihen) wurzel.appendChild(reihe(r, oeffnen));
 
-  if (!reihen.length && !oben.length) {
+      if (f.total === 0 && s.total === 0) {
-    wurzel.innerHTML = '<div class="empty pad-top">Hier ist noch nichts.</div>';
+        wurzel.appendChild(leer('Noch nichts da. Lege unter Verwaltung eine Bibliothek an '
+          + 'und starte einen Scan.'));
+        return;
       }
-}
+      if (f.total > 0) wurzel.appendChild(reihe(`Filme · ${f.total}`, f.items, 'filme'));
+      if (s.total > 0) wurzel.appendChild(reihe(`Serien · ${s.total}`, s.items, 'serien'));
+    } catch (fehler) {
+      wurzel.innerHTML = '';
+      wurzel.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  })();
 
-/* Wählt aus, was oben groß steht — dieselbe Regel wie in der App.
+  function reihe(titel: string, eintraege: (Film | Serie)[], art: 'filme' | 'serien'): HTMLElement {
-   ----------------------------------------------------------------------------
+    const bereich = document.createElement('section');
-   Die Auswahl wechselt alle sechs Stunden, und ein Titel ohne Hintergrundbild
+    bereich.className = 'reihe';
-   zieht ein schlechteres Los. Bei jedem Laden zu würfeln wäre unruhig — man
-   tippt auf etwas, geht zurück, und es ist weg. Einmal täglich wäre zu träge. */
-function aufmacherWahl(items: Item[]): Item[] {
-  let keim = (Math.floor(Date.now() / (6 * 3600 * 1000)) * 2654435761) % 2147483647;
-  const wuerfeln = (): number => (keim = (keim * 16807) % 2147483647) / 2147483647;
 
-  const gesehen = new Set<string>();
+    const h = document.createElement('h2');
-  return items
+    h.textContent = titel;
-    .filter((it) => !gesehen.has(it.Id) && gesehen.add(it.Id))
-    // Wer ein Hintergrundbild hat, zieht aus [0,1) — wer keines hat, nur aus
-    // [0,0.2). Solange es genug mit Bild gibt, kommt er nicht nach vorn; gibt
-    // es wenige, hat er seine Chance.
-    .map((it) => ({ it, los: wuerfeln() * (hatBild(it, 'Backdrop') ? 1 : 0.2) }))
-    .sort((a, b) => b.los - a.los)
-    .slice(0, P.heroCount)
-    .map((x) => x.it);
-}
 
-function aufmacher(items: Item[], oeffnen: (item: Item) => void): HTMLElement {
+    const streifen = document.createElement('div');
-  const aussen = document.createElement('div');
+    streifen.className = 'strip';
-  const rahmen = document.createElement('section');
-  rahmen.id = 'hero';
 
-  const bilder = items.map((it, i) => {
+    eintraege.forEach(eintrag => {
-    const d = document.createElement('div');
+      const k = document.createElement('button');
-    d.className = 'shot' + (i === 0 ? ' on' : '');
+      k.className = 'card';
-    d.style.backgroundImage = `url("${bild(it, 'Backdrop', 1600)}")`;
+      k.appendChild(plakat(eintrag.posterImage, eintrag.title));
-    return d;
-  });
-  bilder.forEach((b) => rahmen.appendChild(b));
-  rahmen.insertAdjacentHTML('beforeend', '<div class="veil"></div>');
 
-  const koerper = document.createElement('div');
+      const unten = document.createElement('div');
-  koerper.className = 'body';
+      unten.className = 'rowline';
-  rahmen.appendChild(koerper);
+      unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
-
+        + `<span class="tiny">${esc(eintrag.year ?? '')}</span>`;
-  const punkte = document.createElement('div');
+      k.appendChild(unten);
-  punkte.className = 'dots';
+      k.onclick = () => oeffnen(art, eintrag.id);
-
+      streifen.appendChild(k);
-  let bei = 0;
-  let uhr: ReturnType<typeof setInterval> | null = null;
-  const anhalten = (): void => { if (uhr) { clearInterval(uhr); uhr = null; } };
-  const schritt = (um: number): void => {
-    anhalten();
-    bei = (bei + um + items.length) % items.length;
-    malen();
-  };
-
-  items.forEach((_, i) => {
-    const d = document.createElement('button');
-    d.className = i ? '' : 'on';
-    d.setAttribute('aria-label', `Titel ${i + 1}`);
-    d.onclick = () => { anhalten(); bei = i; malen(); };
-    punkte.appendChild(d);
     });
 
-  function malen(): void {
+    bereich.append(h, streifen);
-    const it = items[bei]!;
+    return bereich;
-    const teile = [it.ProductionYear, laufzeit(it), it.OfficialRating].filter(Boolean);
-    const zeichen = it.ImageTags?.Logo ? bild(it, 'Primary', 600) : '';
-    koerper.innerHTML = `
-      ${zeichen && it.ImageTags?.Logo ? `<img class="logo" src="${zeichen}" alt="${esc(it.Name)}">`
-        : `<h2>${esc(it.Name)}</h2>`}
-      <div class="meta">${teile.join(' · ')}</div>
-      <div class="summary">${esc(it.Overview ?? '')}</div>
-      <div class="actions">
-        <button class="btn btn-primary">${icon('play', 15)} Abspielen</button>
-        <button class="btn">Details</button>
-      </div>`;
-    const knoepfe = koerper.querySelectorAll('.btn');
-    (knoepfe[0] as HTMLElement).onclick = () => oeffnen(it);
-    (knoepfe[1] as HTMLElement).onclick = () => oeffnen(it);
-    bilder.forEach((b, i) => b.classList.toggle('on', i === bei));
-    [...punkte.children].forEach((d, i) => d.classList.toggle('on', i === bei));
-  }
-  malen();
-
-  if (items.length > 1) {
-    const zurueck = document.createElement('button');
-    zurueck.className = 'hero-nav prev';
-    zurueck.innerHTML = icon('left', 22);
-    zurueck.setAttribute('aria-label', 'Vorheriger Titel');
-    zurueck.onclick = () => schritt(-1);
-
-    const vor = document.createElement('button');
-    vor.className = 'hero-nav next';
-    vor.innerHTML = icon('right', 22);
-    vor.setAttribute('aria-label', 'Nächster Titel');
-    vor.onclick = () => schritt(1);
-    rahmen.append(zurueck, vor);
-
-    // Wischen — erst ab einem ordentlichen Weg und nur, wenn es waagerecht
-    // gemeint ist. Sonst nimmt die Geste dem Scrollen den Vortritt.
-    let x0: number | null = null;
-    let y0 = 0;
-    rahmen.addEventListener('touchstart', (e) => {
-      x0 = e.touches[0]!.clientX; y0 = e.touches[0]!.clientY;
-    }, { passive: true });
-    rahmen.addEventListener('touchend', (e) => {
-      if (x0 == null) return;
-      const dx = e.changedTouches[0]!.clientX - x0;
-      const dy = e.changedTouches[0]!.clientY - y0;
-      if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy)) schritt(dx < 0 ? 1 : -1);
-      x0 = null;
-    }, { passive: true });
-
-    // Sieben Sekunden — lang genug, um den Satz zu Ende zu lesen.
-    uhr = setInterval(() => {
-      if (!document.body.contains(rahmen)) return anhalten();
-      bei = (bei + 1) % items.length;
-      malen();
-    }, 7000);
   }
 
-  aussen.append(rahmen, punkte);
+  return wurzel;
-  return aussen;
-}
-
-function reihe(r: Reihe, oeffnen: (item: Item) => void): HTMLElement {
-  const abschnitt = document.createElement('section');
-  abschnitt.className = 'row';
-  abschnitt.innerHTML = `<h3>${esc(r.title)}</h3><div class="strip"></div>`;
-  const streifen = abschnitt.querySelector('.strip')!;
-  for (const it of r.items) streifen.appendChild(kachel(it, Boolean(r.wide), oeffnen));
-  return abschnitt;
 }

web/app/src/views/library.ts

@@ -1,28 +1,95 @@
-import type { Item, Seite } from '../types';
+import { filme, serien, type Film, type Serie } from '../api';
-import { api, sitzung } from '../api';
+import { esc, plakat, leer, fehlerzeile } from '../util';
-import { esc, FELDER } from '../util';
-import { kachel } from './cards';
 
-export async function mediathek(
+type Art = 'filme' | 'serien';
-  wurzel: HTMLElement,
-  id: string,
-  oeffnen: (item: Item) => void,
-): Promise<void> {
-  wurzel.classList.add('pad-top');
-  wurzel.innerHTML = '<div class="spinner"></div>';
 
+/** Eine Bibliothek als Raster.
+ *
+ * Welche Art gezeigt wird, entscheidet die Seitenleiste — wie bei Plex, wo
+ * jede Bibliothek ihr eigener Punkt in der Navigation ist. Eine zweite
+ * Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.
+ *
+ * Gesucht wird am Server, nicht im Browser: bei zehntausend Titeln wäre
+ * alles zu laden und dann zu filtern der falsche Weg. */
+export function mediathek(art: Art, oeffnen: (art: Art, id: string) => void): HTMLElement {
+  const wurzel = document.createElement('div');
+  let suche = '';
+  let tippt: number | undefined;
+
+  const kopf = document.createElement('div');
+  kopf.className = 'row';
+
+  const titel = document.createElement('h1');
+  titel.className = 'seitentitel';
+  titel.textContent = art === 'filme' ? 'Filme' : 'Serien';
+
+  const suchfeld = document.createElement('input');
+  suchfeld.className = 'field';
+  suchfeld.type = 'search';
+  suchfeld.placeholder = 'Suchen';
+  suchfeld.oninput = () => {
+    // Nicht bei jedem Tastendruck fragen: das wären bei „Untergang" neun
+    // Anfragen, von denen acht niemanden interessieren.
+    window.clearTimeout(tippt);
+    tippt = window.setTimeout(() => { suche = suchfeld.value.trim(); void laden(); }, 250);
+  };
+
+  kopf.append(titel, suchfeld);
+
+  const raster = document.createElement('div');
+  raster.className = 'grid';
+
+  wurzel.append(kopf, raster);
+
+  async function laden(): Promise<void> {
+    raster.innerHTML = '';
+    raster.appendChild(ladeanzeige());
     try {
-    const r = await api<Seite>(
+      const seite = art === 'filme'
-      `/Users/${sitzung.userId}/Items?` + new URLSearchParams({
+        ? await filme({ search: suche, take: 100 })
-        ParentId: id, Recursive: 'true', IncludeItemTypes: 'Movie,Series',
+        : await serien({ search: suche, take: 100 });
-        SortBy: 'SortName', SortOrder: 'Ascending', Limit: '200', Fields: FELDER,
+
-      }),
+      raster.innerHTML = '';
-    );
+      if (seite.items.length === 0) {
-    const items = r.Items ?? [];
+        raster.appendChild(leer(suche
-    wurzel.innerHTML = items.length ? '<div class="grid"></div>' : '<div class="empty">Leer.</div>';
+          ? `Nichts gefunden für „${suche}“.`
-    const raster = wurzel.querySelector('.grid');
+          : 'Noch nichts da. Lege unter Verwaltung eine Bibliothek an und starte einen Scan.'));
-    if (raster) for (const it of items) raster.appendChild(kachel(it, false, oeffnen));
+        return;
-  } catch (e) {
-    wurzel.innerHTML = `<div class="empty">${esc((e as Error).message)}</div>`;
       }
+      seite.items.forEach(eintrag => raster.appendChild(karte(eintrag)));
+    } catch (fehler) {
+      raster.innerHTML = '';
+      raster.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  function karte(eintrag: Film | Serie): HTMLElement {
+    const k = document.createElement('button');
+    k.className = 'card';
+    k.appendChild(plakat(eintrag.posterImage, eintrag.title));
+
+    const unten = document.createElement('div');
+    unten.className = 'rowline';
+    // Zusammengesetzt aus dem, was da ist — ein fest verdrahtetes „ · " davor
+    // hinterlässt bei fehlendem Jahr einen Punkt ohne Angabe.
+    const teile = [
+      eintrag.year ? String(eintrag.year) : null,
+      'episodeCount' in eintrag ? `${eintrag.episodeCount} Folgen` : null,
+    ].filter(Boolean);
+    unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
+      + `<span class="tiny">${esc(teile.join(' · '))}</span>`;
+    k.appendChild(unten);
+
+    k.onclick = () => oeffnen(art, eintrag.id);
+    return k;
+  }
+
+  void laden();
+  return wurzel;
+}
+
+function ladeanzeige(): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'spinner';
+  return d;
 }

web/app/src/views/login.ts

@@ -1,50 +1,36 @@
 import { anmelden } from '../api';
-import { esc } from '../util';
+import { knopf, feld, fehlerzeile } from '../util';
 
-export function anmeldung(wurzel: HTMLElement, fertig: () => void): void {
+export function anmeldung(fertig: () => void): HTMLElement {
-  wurzel.innerHTML = `
+  const karte = document.createElement('div');
-    <form class="login-card" id="login-form">
+  karte.className = 'login-card';
-      <h1>Flaro</h1>
-      <p class="sub">Deine Mediathek, schöner.</p>
-      <div class="field">
-        <label for="user">Benutzer</label>
-        <input id="user" type="text" autocomplete="username" required>
-      </div>
-      <div class="field">
-        <label for="pass">Passwort</label>
-        <input id="pass" type="password" autocomplete="current-password">
-      </div>
-      <p class="error" id="login-error"></p>
-      <button class="btn btn-primary" type="submit" id="login-btn">Anmelden</button>
-      <p class="note">
-        Der Zugangsschlüssel bleibt in diesem Browser. Das Passwort geht an
-        deinen eigenen Server und wird nirgends gespeichert.
-      </p>
-    </form>`;
 
-  const form = wurzel.querySelector<HTMLFormElement>('#login-form')!;
+  const titel = document.createElement('h1');
-  const knopf = wurzel.querySelector<HTMLButtonElement>('#login-btn')!;
+  titel.textContent = 'Flaro';
-  const fehler = wurzel.querySelector<HTMLElement>('#login-error')!;
 
-  form.onsubmit = async (e) => {
+  const name = feld('Benutzername');
-    e.preventDefault();
+  name.autocomplete = 'username';
-    knopf.disabled = true;
+  const passwort = feld('Passwort', 'password');
-    knopf.textContent = 'Verbinde …';
+  passwort.autocomplete = 'current-password';
-    fehler.textContent = '';
+  const los = knopf('Anmelden', 'btn btn-primary');
+
+  karte.append(titel, name, passwort, los);
+
+  async function absenden(): Promise<void> {
+    karte.querySelector('.error')?.remove();
+    los.disabled = true;
     try {
-      await anmelden(
+      await anmelden(name.value.trim(), passwort.value);
-        wurzel.querySelector<HTMLInputElement>('#user')!.value,
-        wurzel.querySelector<HTMLInputElement>('#pass')!.value,
-      );
       fertig();
-    } catch (e2) {
+    } catch (fehler) {
-      // Die Serveradresse steht nicht mehr hier, sondern beim Server davor —
+      karte.appendChild(fehlerzeile((fehler as Error).message));
-      // deshalb kann sie auch nicht mehr falsch eingetippt sein. Bleibt die
+      los.disabled = false;
-      // Anmeldung selbst, oder ein Server, der nicht läuft.
+      passwort.select();
-      fehler.textContent = 'Anmeldung fehlgeschlagen: ' + esc((e2 as Error).message);
-    } finally {
-      knopf.disabled = false;
-      knopf.textContent = 'Anmelden';
     }
-  };
+  }
+
+  los.onclick = () => void absenden();
+  passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
+  setTimeout(() => name.focus(), 50);
+  return karte;
 }

web/app/src/views/player.ts

@@ -1,499 +0,0 @@
-import type HlsTyp from 'hls.js';
-import type { Item, Quelle, Spur } from '../types';
-import { api, medienURL, sitzung, wiedergabeauskunft } from '../api';
-import { P, QUALITIES, RATES } from '../prefs';
-import { icon } from '../icons';
-import { esc, folgentitel, uhr } from '../util';
-
-/* Der Player.
-   ----------------------------------------------------------------------------
-   Vollbild und eigene Bedienung, nach dem Bauplan der iPad-App: Titel und die
-   Wahl oben, Transport in der Mitte, unten **nur** der Regler mit den beiden
-   Zeiten. Und keine Knopfflächen — dort sind es blanke weiße Symbole, der
-   einzige Hintergrund ist die Abdunklung über dem ganzen Bild. */
-
-interface Lauf {
-  quality: number;
-  audio: number | null;
-  subtitle: number | null;
-  streams: Spur[];
-  stelle: number;
-  sitzung?: Sitzungsmeldung;
-}
-
-interface Sitzungsmeldung {
-  id?: string;
-  quelleID: string;
-  itemID: string;
-  stelle: number;
-  melden: (weg: string, stelle?: number, extra?: Record<string, unknown>) => void;
-}
-
-export function playerOeffnen(item: Item, beimSchliessen?: () => void): void {
-  document.getElementById('player')?.remove();
-
-  const ebene = document.createElement('div');
-  ebene.id = 'player';
-  ebene.innerHTML = `
-    <video playsinline></video>
-    <div class="pl-chrome">
-      <div class="pl-top">
-        <button class="pl-icon" id="pl-close" aria-label="Schließen">${icon('close')}</button>
-        <div class="pl-title">
-          <strong>${esc(item.SeriesName || item.Name)}</strong>
-          ${item.SeriesName ? `<span>${esc(folgentitel(item))}</span>` : ''}
-        </div>
-        <span class="pl-spacer"></span>
-        <button class="pl-icon" id="pl-audio" aria-label="Tonspur" hidden>${icon('waveform')}</button>
-        <button class="pl-icon" id="pl-subs" aria-label="Untertitel" hidden>${icon('captions')}</button>
-        <button class="pl-icon pl-quality" id="pl-qual" aria-label="Qualität">Original</button>
-        <button class="pl-icon" id="pl-speed" aria-label="Geschwindigkeit">${icon('speed')}</button>
-        <button class="pl-icon" id="pl-mute" aria-label="Ton">${icon('sound')}</button>
-        <button class="pl-icon" id="pl-full" aria-label="Vollbild">${icon('expand')}</button>
-      </div>
-      <div class="pl-center">
-        <button class="pl-round" id="pl-back" aria-label="Zurückspulen">${icon('goBack', 40, P.skipBackward)}</button>
-        <button class="pl-round pl-play" id="pl-toggle" aria-label="Abspielen">${icon('play', 52)}</button>
-        <button class="pl-round" id="pl-fwd" aria-label="Vorspulen">${icon('goFwd', 40, P.skipForward)}</button>
-      </div>
-      <div class="pl-bottom">
-        <div class="pl-track" id="pl-track"><div class="pl-buf"></div><div class="pl-fill"></div><i></i></div>
-        <div class="pl-times"><span id="pl-now">0:00</span><span id="pl-left">–:--</span></div>
-      </div>
-    </div>
-    <div class="pl-menu" id="pl-menu" hidden></div>
-    <div class="pl-busy" id="pl-busy"><i></i></div>`;
-  document.body.appendChild(ebene);
-  document.body.style.overflow = 'hidden';
-
-  const v = ebene.querySelector('video')!;
-  const chrome = ebene.querySelector('.pl-chrome')!;
-  const el = <T extends HTMLElement>(id: string): T => ebene.querySelector('#' + id) as T;
-
-  const lauf: Lauf = {
-    quality: P.quality, audio: null, subtitle: null, streams: [], stelle: 0,
-  };
-
-  /* ---------- Fehler sichtbar machen ---------- */
-  let hls: HlsTyp | null = null;
-  /** Ob gerade auf Daten gewartet wird — am Anfang immer. */
-  let wartet = true;
-
-  const scheitern = (satz: string, hinweis?: string, adresse?: string): void => {
-    ebene.classList.remove('loading');
-    el('pl-busy').classList.remove('on');
-    // Sonst dreht sich der Kreisel im Knopf hinter dem Fehlerkasten weiter,
-    // als käme noch etwas.
-    wartet = false;
-    malen();
-    ebene.querySelector('.pl-error')?.remove();
-    const kasten = document.createElement('div');
-    kasten.className = 'pl-error';
-    kasten.innerHTML = `<strong>${esc(satz)}</strong>${hinweis ? `<span>${esc(hinweis)}</span>` : ''}
-      ${adresse ? `<code>${esc(adresse.replace(/api_key=[^&]*/, 'api_key=…'))}</code>` : ''}
-      <button class="btn">Schließen</button>`;
-    kasten.querySelector('button')!.onclick = schliessen;
-    ebene.appendChild(kasten);
-  };
-
-  const diagnose = { text: '', url: '' };
-  v.addEventListener('error', () => {
-    const c = v.error?.code;
-    scheitern('Der Browser kann diesen Strom nicht abspielen.',
-      (c === 4 ? 'Das Format wird nicht unterstützt. ' : `Fehlercode ${c ?? '?'}. `) + diagnose.text,
-      diagnose.url);
-  });
-
-  /* ---------- Bedienung ein- und ausblenden ---------- */
-  let ausblenden: ReturnType<typeof setTimeout>;
-  const zeigen = (): void => {
-    chrome.classList.add('on');
-    clearTimeout(ausblenden);
-    // Solange etwas steht, bleibt die Bedienung: sie auszublenden, während
-    // niemand spielt, versteckt den einzigen Knopf, der weiterhilft.
-    if (!v.paused) {
-      ausblenden = setTimeout(() => {
-        chrome.classList.remove('on');
-        kreisel();
-      }, 3000);
-    }
-    kreisel();
-  };
-
-  /** Der freistehende Kreisel — nur, wenn die Bedienung aus ist.
-   *
-   *  Sonst stünden zwei übereinander: einer in der Mitte des Bildes und einer
-   *  im Abspielknopf, der genau davor sitzt. Genau so sah es vorher aus. */
-  const kreisel = (): void => {
-    el('pl-busy').classList.toggle('on', wartet && !chrome.classList.contains('on'));
-  };
-  ebene.addEventListener('mousemove', zeigen);
-  ebene.addEventListener('touchstart', zeigen, { passive: true });
-
-  /* ---------- Transport ---------- */
-  const umschalten = (): void => { void (v.paused ? v.play() : v.pause()); };
-  el('pl-toggle').onclick = umschalten;
-  el('pl-back').onclick = () => { v.currentTime = Math.max(0, v.currentTime - P.skipBackward); zeigen(); };
-  el('pl-fwd').onclick = () => { v.currentTime = Math.min(v.duration || 1e9, v.currentTime + P.skipForward); zeigen(); };
-  v.addEventListener('click', umschalten);
-
-  /** Zeichnet den mittleren Knopf: Kreisel, Dreieck oder Doppelbalken.
-   *
-   *  Solange auf Daten gewartet wird, steht dort der Kreisel — **kein**
-   *  Dreieck. Ein Dreieck heißt „angehalten, drück mich", und beides stimmte
-   *  nicht: es lief bereits, und der Klick bewirkte nichts. */
-  const malen = (): void => {
-    const knopf = el('pl-toggle');
-    knopf.innerHTML = wartet ? '<i class="pl-wait"></i>' : icon(v.paused ? 'play' : 'pause', 52);
-    knopf.setAttribute('aria-label', wartet ? 'Lädt' : v.paused ? 'Abspielen' : 'Anhalten');
-  };
-
-  const warten = (an: boolean): void => {
-    wartet = an;
-    malen();
-    kreisel();
-  };
-
-  v.addEventListener('play', () => { malen(); zeigen(); });
-  v.addEventListener('pause', () => { warten(false); zeigen(); });
-  v.addEventListener('waiting', () => warten(true));
-  v.addEventListener('playing', () => {
-    warten(false);
-    ebene.classList.remove('loading');
-  });
-
-  /* ---------- Fortschrittsleiste ---------- */
-  const spur = el('pl-track');
-  v.addEventListener('timeupdate', () => {
-    const teil = v.duration ? v.currentTime / v.duration : 0;
-    spur.querySelector<HTMLElement>('.pl-fill')!.style.width = teil * 100 + '%';
-    spur.querySelector<HTMLElement>('i')!.style.left = teil * 100 + '%';
-    el('pl-now').textContent = uhr(v.currentTime);
-    // Restzeit statt Gesamtlänge: „noch 42 Minuten" beantwortet die Frage,
-    // die man sich beim Schauen tatsächlich stellt.
-    el('pl-left').textContent = '−' + uhr((v.duration || 0) - v.currentTime);
-  });
-  v.addEventListener('progress', () => {
-    if (!v.buffered.length || !v.duration) return;
-    spur.querySelector<HTMLElement>('.pl-buf')!.style.width =
-      (v.buffered.end(v.buffered.length - 1) / v.duration) * 100 + '%';
-  });
-
-  const springen = (e: MouseEvent | TouchEvent): void => {
-    const r = spur.getBoundingClientRect();
-    const x = ((e instanceof MouseEvent ? e.clientX : e.touches[0]!.clientX) - r.left) / r.width;
-    if (v.duration) v.currentTime = Math.min(Math.max(x, 0), 1) * v.duration;
-    zeigen();
-  };
-  spur.onclick = springen;
-  spur.onmousedown = (e) => {
-    springen(e);
-    const ziehen = (ev: MouseEvent): void => springen(ev);
-    const los = (): void => {
-      removeEventListener('mousemove', ziehen);
-      removeEventListener('mouseup', los);
-    };
-    addEventListener('mousemove', ziehen);
-    addEventListener('mouseup', los);
-  };
-
-  /* ---------- Die drei Listen ----------
-     Getrennt, weil es drei verschiedene Fragen sind: die Tonspur stellt man
-     einmal am Anfang um, die Untertitel mitten im Film, die Qualität, wenn es
-     hakt. Eine gemeinsame Liste hieße jedes Mal an den anderen vorbeisuchen. */
-  const menue = el('pl-menu');
-  const menueZu = (): void => { menue.hidden = true; };
-  const spuren = (art: Spur['Type']): Spur[] => lauf.streams.filter((x) => x.Type === art);
-  const nenne = (t: Spur): string => t.DisplayTitle || t.Language || `Spur ${t.Index}`;
-
-  interface Eintrag { text: string; gewaehlt: boolean; waehlen: () => void }
-
-  function liste(knopf: HTMLElement, titel: string, eintraege: Eintrag[]): void {
-    if (!menue.hidden && menue.dataset.von === knopf.id) return menueZu();
-    menue.dataset.von = knopf.id;
-    menue.innerHTML = `<div class="pl-group">${esc(titel)}</div>`;
-
-    for (const { text, gewaehlt, waehlen } of eintraege) {
-      const b = document.createElement('button');
-      b.className = 'pl-item' + (gewaehlt ? ' on' : '');
-      b.innerHTML = `<span>${esc(text)}</span>${gewaehlt ? icon('check', 16) : ''}`;
-      b.onclick = () => (gewaehlt ? menueZu() : waehlen());
-      menue.appendChild(b);
-    }
-
-    // Unter seinem Knopf, nicht in der Mitte: so ist zu sehen, wozu die Liste
-    // gehört, wenn mehrere davon nebeneinander sitzen.
-    const r = knopf.getBoundingClientRect();
-    menue.style.right = Math.max(12, innerWidth - r.right) + 'px';
-    menue.style.top = r.bottom + 8 + 'px';
-    menue.hidden = false;
-    zeigen();
-  }
-
-  const neuLaden = (): void => {
-    lauf.stelle = v.currentTime || 0;
-    ebene.querySelector('.pl-error')?.remove();
-    ebene.classList.add('loading');
-    warten(true);
-    menueZu();
-    void strom();
-  };
-
-  el('pl-audio').onclick = () => liste(el('pl-audio'), 'Tonspur',
-    spuren('Audio').map((t) => ({
-      text: nenne(t), gewaehlt: lauf.audio === t.Index,
-      waehlen: () => { lauf.audio = t.Index; neuLaden(); },
-    })));
-
-  el('pl-subs').onclick = () => liste(el('pl-subs'), 'Untertitel', [
-    { text: 'Aus', gewaehlt: (lauf.subtitle ?? -1) < 0, waehlen: () => { lauf.subtitle = -1; neuLaden(); } },
-    ...spuren('Subtitle').map((t) => ({
-      text: nenne(t), gewaehlt: lauf.subtitle === t.Index,
-      waehlen: () => { lauf.subtitle = t.Index; neuLaden(); },
-    })),
-  ]);
-
-  el('pl-qual').onclick = () => liste(el('pl-qual'), 'Qualität',
-    QUALITIES.map(([wert, text]) => ({
-      text, gewaehlt: lauf.quality === wert,
-      waehlen: () => { lauf.quality = wert; neuLaden(); },
-    })));
-
-  el('pl-speed').onclick = () => liste(el('pl-speed'), 'Geschwindigkeit',
-    RATES.map((r) => ({
-      text: r === 1 ? 'Normal' : r + '×',
-      gewaehlt: Math.abs(v.playbackRate - r) < 0.01,
-      waehlen: () => { v.playbackRate = r; menueZu(); zeigen(); },
-    })));
-
-  ebene.addEventListener('click', (e) => {
-    const ziel = e.target as HTMLElement;
-    if (menue.hidden || menue.contains(ziel) || ziel.closest('.pl-icon')) return;
-    menueZu();
-  });
-
-  /* ---------- Ton ---------- */
-  const tonMalen = (): void => {
-    el('pl-mute').innerHTML = icon(v.muted || v.volume === 0 ? 'muted' : 'sound');
-    el('pl-mute').title = `Lautstärke ${Math.round(v.volume * 100)} %`;
-  };
-  el('pl-mute').onclick = () => { v.muted = !v.muted; tonMalen(); };
-  el('pl-mute').addEventListener('wheel', (e) => {
-    e.preventDefault();
-    v.volume = Math.min(1, Math.max(0, v.volume - Math.sign(e.deltaY) * 0.05));
-    v.muted = v.volume === 0;
-    tonMalen();
-  }, { passive: false });
-
-  el('pl-full').onclick = () => {
-    void (document.fullscreenElement ? document.exitFullscreen() : ebene.requestFullscreen?.());
-  };
-
-  /* ---------- Tastatur ---------- */
-  const tasten = (e: KeyboardEvent): void => {
-    const ziel = e.target as HTMLElement;
-    if (ziel.tagName === 'SELECT' || ziel.tagName === 'INPUT') return;
-    const wege: Record<string, () => void> = {
-      ' ': umschalten, k: umschalten,
-      ArrowLeft: () => { v.currentTime -= P.skipBackward; },
-      ArrowRight: () => { v.currentTime += P.skipForward; },
-      ArrowUp: () => { v.volume = Math.min(1, v.volume + 0.1); tonMalen(); },
-      ArrowDown: () => { v.volume = Math.max(0, v.volume - 0.1); tonMalen(); },
-      f: () => el('pl-full').click(),
-      Escape: () => schliessen(),
-    };
-    const tun = wege[e.key];
-    if (!tun) return;
-    e.preventDefault();
-    tun();
-    zeigen();
-  };
-  addEventListener('keydown', tasten);
-
-  /* ---------- Zurück aus dem Hintergrund ----------
-     Wer die Anwendung wechselt, kommt zu einem stehenden Bild bei laufendem
-     Ton zurück: der Browser hält das Entpacken an, während der Tab verdeckt
-     ist, und hls.js findet danach nicht von selbst in den Puffer zurück. */
-  const zurueck = (): void => {
-    if (document.hidden || v.paused || !hls) return;
-    const stelle = v.currentTime;
-    hls.startLoad(stelle);
-    // Ein winziger Sprung erzwingt einen neuen Schlüsselbildpunkt. Ohne ihn
-    // bleibt das zuletzt gezeigte Bild stehen, obwohl Segmente ankommen.
-    if (stelle > 0.5) v.currentTime = stelle - 0.1;
-  };
-  document.addEventListener('visibilitychange', zurueck);
-
-  /* ---------- Schließen ---------- */
-  function schliessen(): void {
-    removeEventListener('keydown', tasten);
-    document.removeEventListener('visibilitychange', zurueck);
-    clearTimeout(ausblenden);
-    if (document.fullscreenElement) void document.exitFullscreen?.();
-
-    // **Erst melden, dann abräumen.** Andersherum steht die Stelle schon auf
-    // null, wenn die Meldung hinausgeht — und Jellyfin löscht daraufhin den
-    // Fortschritt, statt ihn zu speichern.
-    lauf.sitzung?.melden('/Sessions/Playing/Stopped');
-
-    hls?.destroy();
-    hls = null;
-    v.pause();
-    v.removeAttribute('src');
-    v.load();
-    ebene.remove();
-    document.body.style.overflow = '';
-    beimSchliessen?.();
-  }
-  el('pl-close').onclick = schliessen;
-
-  /* ---------- Der Strom ---------- */
-  async function strom(): Promise<void> {
-    hls?.destroy();
-    hls = null;
-
-    let auskunft;
-    try {
-      auskunft = await wiedergabeauskunft(item.Id, lauf);
-    } catch (e) {
-      return scheitern('Der Server hat die Wiedergabe abgelehnt.', (e as Error).message);
-    }
-
-    const quelle: Quelle | undefined = auskunft.MediaSources?.[0];
-    if (!quelle) return scheitern('Der Server nennt keine abspielbare Quelle.');
-
-    // Was zur Auswahl steht, weiß man erst jetzt. Beim ersten Lauf gilt die
-    // Vorauswahl des Servers.
-    lauf.streams = quelle.MediaStreams ?? [];
-    if (lauf.audio == null) {
-      lauf.audio = quelle.DefaultAudioStreamIndex ?? spuren('Audio')[0]?.Index ?? null;
-    }
-    if (lauf.subtitle == null) lauf.subtitle = quelle.DefaultSubtitleStreamIndex ?? -1;
-    spurenBekannt();
-
-    // **Die Adresse kommt vom Server.** Nennt er keine, wird ausdrücklich ein
-    // HLS-Strom verlangt — nicht die Rohdatei. Ein MKV mit DTS ist für einen
-    // Browser unlesbar, und genau dieser Rückfall war der Grund, warum lange
-    // gar nichts lief.
-    const adresse = quelle.TranscodingUrl
-      ? new URL(quelle.TranscodingUrl, location.origin + '/api').href
-      : medienURL(`/Videos/${item.Id}/master.m3u8`, {
-          mediaSourceId: quelle.Id ?? item.Id,
-          PlaySessionId: auskunft.PlaySessionId ?? '',
-          DeviceId: sitzung.geraet,
-          VideoCodec: 'h264', AudioCodec: 'aac,mp3',
-          TranscodingMaxAudioChannels: '2', SegmentContainer: 'ts',
-          MinSegments: '1', BreakOnNonKeyFrames: 'true', TranscodingProtocol: 'hls',
-          ...(lauf.audio != null ? { AudioStreamIndex: lauf.audio } : {}),
-          ...((lauf.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: lauf.subtitle! } : {}),
-          ...(lauf.quality > 0 ? { MaxStreamingBitrate: lauf.quality * 1000 } : {}),
-        });
-
-    diagnose.text = [
-      quelle.TranscodingUrl ? 'Server nannte eine Adresse' : 'Server nannte keine Adresse (Rückfall auf HLS)',
-      quelle.Container ? `Container ${quelle.Container}` : null,
-    ].filter(Boolean).join(' · ');
-    diagnose.url = adresse;
-
-    v.addEventListener('loadedmetadata', () => {
-      v.playbackRate = P.rate;
-      // Zurück an die Stelle, an der umgeschaltet wurde — sonst begänne jeder
-      // Wechsel der Tonspur den Film von vorn.
-      if (lauf.stelle > 1) v.currentTime = lauf.stelle;
-      void v.play();
-    }, { once: true });
-
-    lauf.sitzung = fortschritt(v, {
-      id: auskunft.PlaySessionId,
-      quelleID: quelle.Id ?? item.Id,
-      itemID: item.Id,
-    });
-
-    if (v.canPlayType('application/vnd.apple.mpegurl')) {
-      v.src = adresse;
-      return;
-    }
-
-    // **Erst hier geladen.** hls.js ist größer als der ganze Rest zusammen,
-    // und wer nur stöbert, braucht es nie. Safari schon gar nicht — dort
-    // sind wir oben schon heraus.
-    const { default: Hls } = await import('hls.js');
-    const h = new Hls();
-    hls = h;
-    h.on(Hls.Events.ERROR, (_e, daten) => {
-      if (!daten.fatal) return;
-      scheitern('Die Wiedergabe ist abgebrochen.',
-        `${daten.type}: ${daten.details}` +
-        (daten.response?.code ? ` (HTTP ${daten.response.code})` : ''));
-      h.destroy();
-    });
-    h.loadSource(adresse);
-    h.attachMedia(v);
-  }
-
-  function spurenBekannt(): void {
-    el('pl-audio').hidden = spuren('Audio').length === 0;
-    el('pl-subs').hidden = spuren('Subtitle').length === 0;
-    // Gefülltes Symbol, solange Untertitel laufen — wie auf dem iPad.
-    el('pl-subs').innerHTML = icon((lauf.subtitle ?? -1) >= 0 ? 'captionsOn' : 'captions');
-    el('pl-qual').textContent =
-      (QUALITIES.find(([w]) => w === lauf.quality)?.[1] ?? 'Original').split(' — ').pop()!;
-  }
-
-  zeigen();
-  tonMalen();
-  ebene.classList.add('loading');
-  warten(true);
-  void strom();
-}
-
-/* Meldet dem Server, wo man steht.
-   ----------------------------------------------------------------------------
-   Die Stelle wird **getrennt vom Element** gehalten. Beim Schließen fällt
-   `currentTime` auf null, und stünde die Meldung erst danach an, bekäme
-   Jellyfin „gestoppt bei 0:00" und löschte den Fortschritt.
-
-   Nicht ohne Hinsehen: ein verschlucktes `catch` hat lange verborgen, ob die
-   Meldungen überhaupt ankommen. */
-function fortschritt(
-  video: HTMLVideoElement,
-  sitz: { id?: string; quelleID: string; itemID: string },
-): Sitzungsmeldung {
-  const s: Sitzungsmeldung = {
-    ...sitz,
-    stelle: 0,
-    melden: (weg, stelle, extra = {}) => {
-      const wo = stelle ?? s.stelle;
-      void api(weg, {
-        method: 'POST',
-        body: JSON.stringify({
-          ItemId: s.itemID, PlaySessionId: s.id, MediaSourceId: s.quelleID,
-          PositionTicks: Math.round(wo * 10_000_000),
-          // Ohne die ordnet Jellyfin die Meldung keiner Wiedergabe zu.
-          PlayMethod: 'Transcode', CanSeek: true,
-          ...extra,
-        }),
-      })
-        .then(() => console.debug(`[Flaro] ${weg} → ${(wo / 60).toFixed(1)} min angenommen`))
-        .catch((e: Error) => console.warn(`[Flaro] ${weg} abgelehnt: ${e.message}`));
-    },
-  };
-
-  video.addEventListener('playing', () => s.melden('/Sessions/Playing'), { once: true });
-
-  let zuletzt = 0;
-  video.addEventListener('timeupdate', () => {
-    if (video.currentTime > 0) s.stelle = video.currentTime;
-    if (video.currentTime - zuletzt < 10) return;
-    zuletzt = video.currentTime;
-    s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: video.paused });
-  });
-
-  // Anhalten sofort melden: wer pausiert und weggeht, hatte sonst bis zur
-  // nächsten Zehn-Sekunden-Marke nichts hinterlassen.
-  video.addEventListener('pause', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: true }));
-  video.addEventListener('play', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: false }));
-  video.addEventListener('ended', () => s.melden('/Sessions/Playing/Stopped', video.duration || s.stelle));
-
-  return s;
-}

web/app/src/views/settings.ts

@@ -1,246 +0,0 @@
-import { P, PALETTE, QUALITIES, RATES, SKIPS, LANGUAGES, setzen, anordnen } from '../prefs';
-import { abmelden } from '../api';
-import { icon } from '../icons';
-import { esc } from '../util';
-import { bekannteReihen } from './home';
-import { lesbarMachen, alsHex, ausHex } from '../contrast';
-
-/* Die Einstellungen.
-   ----------------------------------------------------------------------------
-   Dieselben fünf Abschnitte in derselben Reihenfolge wie in der App:
-   Darstellung, Startseite, Wiedergabe, Sprachen, Server. Downloads und
-   Diagnose fehlen — dort fehlt die Funktion, nicht die Einstellung. */
-export function einstellungen(wurzel: HTMLElement, neuZeichnen: () => void): void {
-  wurzel.classList.add('pad-top');
-  wurzel.innerHTML = `
-    <div class="settings">
-      <h2>Einstellungen</h2>
-
-      <h3 class="group">Darstellung</h3>
-      <div class="setting">
-        <h4>Akzentfarbe</h4>
-        <p>Dieselbe Palette wie in der App.</p>
-        <div class="swatches" id="set-accent"></div>
-        <div class="hexrow">
-          <input type="text" id="set-hex" placeholder="#C04AC9" maxlength="7" spellcheck="false">
-          <button class="btn" id="set-hex-apply">Übernehmen</button>
-        </div>
-        <p class="hint" id="set-hex-note"></p>
-      </div>
-      <div class="setting">
-        <h4>Kachelgröße</h4>
-        <p>Wie groß Plakate und Vorschaubilder erscheinen — auf der Startseite
-           und in den Mediatheken. Gilt nur auf diesem Gerät.</p>
-        <div class="range-row"><input type="range" id="set-zoom" min="100" max="280" step="10"><output id="set-zoom-out"></output></div>
-      </div>
-
-      <h3 class="group">Startseite</h3>
-      <div class="setting">
-        <h4>Aufmacher</h4>
-        <p>Woher die Titel oben kommen. Die Auswahl wechselt alle sechs Stunden;
-           Titel ohne Hintergrundbild ziehen dabei ein schlechteres Los.</p>
-        <div class="seg" id="set-herosource">
-          <button data-v="continueFirst">Angefangenes zuerst</button>
-          <button data-v="latestOnly">Nur Neuzugänge</button>
-        </div>
-        <div class="range-row"><input type="range" id="set-herocount" min="1" max="10" step="1"><output id="set-herocount-out"></output></div>
-        <div class="range-row"><input type="range" id="set-heroheight" min="40" max="95" step="5"><output id="set-heroheight-out"></output></div>
-      </div>
-      <div class="setting">
-        <h4>Reihen</h4>
-        <label class="check"><input type="checkbox" id="set-combine"><span>„Weiterschauen“ und „Als Nächstes“ zusammenlegen</span></label>
-        <label class="check"><input type="checkbox" id="set-hidewatched"><span>Gesehenes aus den Neuzugängen ausblenden</span></label>
-      </div>
-      <div class="setting">
-        <h4>Reihen der Startseite</h4>
-        <p>Welche Reihen erscheinen und in welcher Folge. Was der Server neu
-           anlegt, kommt ans Ende, statt zu fehlen.</p>
-        <div id="set-rows"></div>
-      </div>
-
-      <h3 class="group">Wiedergabe</h3>
-      <div class="setting">
-        <h4>Geschwindigkeit</h4>
-        <p>Womit ein Titel beginnt. Im Player lässt sie sich jederzeit ändern.</p>
-        <select id="set-rate" class="pick"></select>
-      </div>
-      <div class="setting">
-        <h4>Spulweite</h4>
-        <div class="pickrow">
-          <label>Zurück <select id="set-skipback" class="pick"></select></label>
-          <label>Vor <select id="set-skipfwd" class="pick"></select></label>
-        </div>
-      </div>
-      <div class="setting">
-        <h4>Qualität</h4>
-        <p>„Original“ schickt die Datei unverändert, alles andere lässt den
-           Server umrechnen. Die App unterscheidet WLAN und Mobilfunk — im
-           Browser lässt sich das nicht verlässlich feststellen, deshalb eine
-           Stufe.</p>
-        <select id="set-quality" class="pick"></select>
-      </div>
-
-      <h3 class="group">Sprachen</h3>
-      <div class="setting">
-        <h4>Bevorzugte Sprachen</h4>
-        <p>Welche Spur beim Start gewählt wird, sofern der Titel sie mitbringt.</p>
-        <div class="pickrow">
-          <label>Ton <select id="set-audio" class="pick"></select></label>
-          <label>Untertitel <select id="set-subs" class="pick"></select></label>
-        </div>
-      </div>
-
-      <h3 class="group">Server</h3>
-      <div class="setting">
-        <h4>Verbindung</h4>
-        <p>Die Adresse steht beim Server, der diese Seite ausliefert — nicht im
-           Browser.</p>
-        <button class="btn" id="set-signout">Abmelden</button>
-      </div>
-    </div>`;
-
-  /* ---- Akzentfarbe ---- */
-  const felder = wurzel.querySelector('#set-accent')!;
-  for (const [name, hex] of PALETTE) {
-    const b = document.createElement('button');
-    b.className = 'swatch' + (hex.toLowerCase() === P.accent.toLowerCase() ? ' on' : '');
-    b.style.background = hex;
-    b.title = name;
-    b.dataset.hex = hex;
-    b.onclick = () => { setzen('accent', hex); einstellungen(wurzel, neuZeichnen); };
-    felder.appendChild(b);
-  }
-
-  const hex = wurzel.querySelector<HTMLInputElement>('#set-hex')!;
-  const notiz = wurzel.querySelector<HTMLElement>('#set-hex-note')!;
-  hex.value = P.accent;
-  const uebernehmen = (): void => {
-    const rgb = ausHex(hex.value);
-    if (!rgb) { notiz.textContent = 'Das ist kein Farbwert — erwartet wird etwa #C04AC9.'; return; }
-    const { farbe, geaendert } = lesbarMachen(rgb, ausHex('#0B0B0D')!);
-    const wert = alsHex(farbe);
-    setzen('accent', wert);
-    hex.value = wert;
-    notiz.textContent = geaendert
-      ? `Auf ${wert} aufgehellt — die gewählte Farbe wäre auf dem dunklen Grund nicht lesbar gewesen.`
-      : '';
-    felder.querySelectorAll<HTMLElement>('.swatch')
-      .forEach((b) => b.classList.toggle('on', b.dataset.hex === wert));
-  };
-  wurzel.querySelector<HTMLElement>('#set-hex-apply')!.onclick = uebernehmen;
-  hex.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); uebernehmen(); } };
-
-  /* ---- Die wiederkehrenden Bauteile ---- */
-  const regler = (id: string, feld: 'cardW' | 'heroCount' | 'heroHeight', einheit: string): void => {
-    const r = wurzel.querySelector<HTMLInputElement>('#' + id)!;
-    const o = wurzel.querySelector<HTMLOutputElement>('#' + id + '-out')!;
-    r.value = String(P[feld]);
-    o.textContent = P[feld] + einheit;
-    r.oninput = () => { o.textContent = r.value + einheit; setzen(feld, Number(r.value)); };
-  };
-  regler('set-zoom', 'cardW', ' px');
-  regler('set-herocount', 'heroCount', ' Titel');
-  regler('set-heroheight', 'heroHeight', ' % Höhe');
-
-  const schalter = wurzel.querySelector('#set-herosource')!;
-  [...schalter.children].forEach((b) => {
-    const el = b as HTMLElement;
-    el.classList.toggle('on', el.dataset.v === P.heroSource);
-    el.onclick = () => {
-      setzen('heroSource', el.dataset.v as typeof P.heroSource);
-      einstellungen(wurzel, neuZeichnen);
-    };
-  });
-
-  const haken = (id: string, feld: 'combineContinue' | 'hideWatched'): void => {
-    const c = wurzel.querySelector<HTMLInputElement>('#' + id)!;
-    c.checked = P[feld];
-    c.onchange = () => setzen(feld, c.checked);
-  };
-  haken('set-combine', 'combineContinue');
-  haken('set-hidewatched', 'hideWatched');
-
-  const auswahl = (id: string, feld: keyof typeof P, werte: readonly (readonly [string | number, string])[]): void => {
-    const s = wurzel.querySelector<HTMLSelectElement>('#' + id)!;
-    s.innerHTML = '';
-    for (const [wert, text] of werte) {
-      const o = document.createElement('option');
-      o.value = String(wert);
-      o.textContent = text;
-      o.selected = String(wert) === String(P[feld]);
-      s.appendChild(o);
-    }
-    s.onchange = () => {
-      const roh = typeof P[feld] === 'number' ? Number(s.value) : s.value;
-      setzen(feld as never, roh as never);
-    };
-  };
-  auswahl('set-rate', 'rate', RATES.map((r) => [r, r === 1 ? 'Normal' : r + '×'] as const));
-  auswahl('set-skipback', 'skipBackward', SKIPS.map((n) => [n, n + ' s'] as const));
-  auswahl('set-skipfwd', 'skipForward', SKIPS.map((n) => [n, n + ' s'] as const));
-  auswahl('set-quality', 'quality', QUALITIES);
-  auswahl('set-audio', 'audioLanguage', LANGUAGES);
-  auswahl('set-subs', 'subtitleLanguage', LANGUAGES);
-
-  wurzel.querySelector<HTMLElement>('#set-signout')!.onclick = abmelden;
-  reihenListe(wurzel, neuZeichnen);
-}
-
-/* Welche Reihen erscheinen und in welcher Folge.
-   ----------------------------------------------------------------------------
-   Knöpfe statt Ziehen: auf dem Zeigegerät ist Ziehen schöner, auf einem
-   Trackpad fummelig und mit der Tastatur gar nicht zu machen. Zwei Pfeile
-   können alle drei. */
-function reihenListe(wurzel: HTMLElement, neuZeichnen: () => void): void {
-  const ort = wurzel.querySelector('#set-rows');
-  if (!ort) return;
-
-  if (!bekannteReihen.length) {
-    ort.innerHTML = '<p class="hint">Erst sichtbar, wenn die Startseite einmal geladen war.</p>';
-    return;
-  }
-
-  // Ausgeblendete hinten dran, damit man sie wiederfindet.
-  const geordnet = [
-    ...anordnen(bekannteReihen),
-    ...bekannteReihen.filter((r) => P.hiddenRows.includes(r.id)),
-  ];
-
-  ort.innerHTML = '';
-  geordnet.forEach((reihe, stelle) => {
-    const aus = P.hiddenRows.includes(reihe.id);
-    const zeile = document.createElement('div');
-    zeile.className = 'rowline' + (aus ? ' off' : '');
-    zeile.innerHTML = `
-      <label class="check" style="flex:1;padding:0">
-        <input type="checkbox" ${aus ? '' : 'checked'}>
-        <span>${esc(reihe.title)}</span>
-      </label>
-      <button class="tiny" aria-label="Nach oben" ${stelle === 0 ? 'disabled' : ''}>${icon('up', 16)}</button>
-      <button class="tiny" aria-label="Nach unten" ${stelle === geordnet.length - 1 ? 'disabled' : ''}>${icon('down', 16)}</button>`;
-
-    zeile.querySelector('input')!.onchange = (e) => {
-      const an = (e.target as HTMLInputElement).checked;
-      setzen('hiddenRows', an
-        ? P.hiddenRows.filter((id) => id !== reihe.id)
-        : [...P.hiddenRows, reihe.id]);
-      reihenListe(wurzel, neuZeichnen);
-      neuZeichnen();
-    };
-
-    const schieben = (um: number): void => {
-      // Die aktuelle Folge festschreiben, bevor darin verschoben wird.
-      const ids = geordnet.map((r) => r.id);
-      const nach = stelle + um;
-      if (nach < 0 || nach >= ids.length) return;
-      [ids[stelle], ids[nach]] = [ids[nach]!, ids[stelle]!];
-      setzen('rowOrder', ids);
-      reihenListe(wurzel, neuZeichnen);
-      neuZeichnen();
-    };
-    const [hoch, runter] = zeile.querySelectorAll('button');
-    (hoch as HTMLElement).onclick = () => schieben(-1);
-    (runter as HTMLElement).onclick = () => schieben(1);
-    ort.appendChild(zeile);
-  });
-}

web/app/src/views/setup.ts

@@ -0,0 +1,44 @@
+import { einrichten, anmelden } from '../api';
+import { knopf, feld, fehlerzeile } from '../util';
+
+/** Der erste Start: ein Administrator muss angelegt werden.
+ *
+ * **Die einzige Stelle, an der jemand ohne Anmeldung etwas ändern darf** —
+ * und sie verschliesst sich selbst, sobald ein Benutzer existiert. */
+export function einrichtung(fertig: () => void): HTMLElement {
+  const karte = document.createElement('div');
+  karte.className = 'login-card';
+
+  const titel = document.createElement('h1');
+  titel.textContent = 'Flaro einrichten';
+  const text = document.createElement('p');
+  text.className = 'hint';
+  text.textContent = 'Lege das erste Konto an. Es wird Administrator und kann '
+    + 'später Bibliotheken und weitere Benutzer verwalten.';
+
+  const name = feld('Benutzername');
+  name.autocomplete = 'username';
+  const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
+  passwort.autocomplete = 'new-password';
+  const los = knopf('Anlegen und anmelden', 'btn btn-primary');
+
+  karte.append(titel, text, name, passwort, los);
+
+  async function absenden(): Promise<void> {
+    karte.querySelector('.error')?.remove();
+    los.disabled = true;
+    try {
+      await einrichten(name.value.trim(), passwort.value);
+      await anmelden(name.value.trim(), passwort.value);
+      fertig();
+    } catch (fehler) {
+      karte.appendChild(fehlerzeile((fehler as Error).message));
+      los.disabled = false;
+    }
+  }
+
+  los.onclick = () => void absenden();
+  passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
+  setTimeout(() => name.focus(), 50);
+  return karte;
+}

web/app/vite.config.ts

@@ -6,11 +6,11 @@ export default defineConfig({
     // Im Entwicklungsbetrieb übernimmt Vite, was sonst der eigene Server tut:
     // Anfragen an /api gehen an den Medienserver weiter. Damit ist die
     // Herkunft dieselbe wie die der Seite — und CORS nie wieder ein Thema.
+    // Der Pfad bleibt unverändert: Flaro bedient /api/v1 selbst.
     proxy: {
       '/api': {
-        target: process.env.FLARO_SERVER ?? 'http://localhost:8096',
+        target: process.env.FLARO_SERVER ?? 'http://localhost:18080',
         changeOrigin: true,
-        rewrite: (pfad) => pfad.replace(/^\/api/, ''),
       },
     },
   },