Compare commits
7
Commits
84b7529aa4
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 HousemannandClaude Sonnet 4.6
|
7a7a997f15 | ||
|
HousemannandClaude Sonnet 4.6
|
50548d44c4 | ||
|
HousemannandClaude Sonnet 4.6
|
14c9bef002 | ||
|
HousemannandClaude Sonnet 4.6
|
3442659973 | ||
|
HousemannandClaude Sonnet 4.6
|
edfd7105b7 | ||
|
HousemannandClaude Sonnet 4.6
|
b5366783b1 | ||
|
HousemannandClaude Sonnet 4.6
|
944ca9a308 |
@@ -14,13 +14,13 @@ Web-Oberfläche zur Anzeige und Verwaltung von Medien-Metadaten aus **PostgreSQL
|
||||
- [Voraussetzungen](#voraussetzungen)
|
||||
- [Installation auf dem Server](#installation-auf-dem-server)
|
||||
- [Konfiguration](#konfiguration)
|
||||
- [Datenbank](#datenbank)
|
||||
- [Datenbank & Migrationen](#datenbank--migrationen)
|
||||
- [n8n Workflows](#n8n-workflows)
|
||||
- [Bedienung](#bedienung)
|
||||
- [API-Referenz](#api-referenz)
|
||||
- [Projektstruktur](#projektstruktur)
|
||||
- [Entwicklung & Updates](#entwicklung--updates)
|
||||
- [Fehlerbehebung](#fehlerbehebung)
|
||||
- [Hinweise für n8n](#hinweise-für-n8n)
|
||||
|
||||
---
|
||||
|
||||
@@ -28,12 +28,12 @@ Web-Oberfläche zur Anzeige und Verwaltung von Medien-Metadaten aus **PostgreSQL
|
||||
|
||||
Die Anwendung läuft als **zwei Docker-Container** auf einem Linux-Server:
|
||||
|
||||
1. **web** – Nginx liefert die Vue-App aus und leitet `/api` an das Backend weiter
|
||||
1. **web** – Nginx liefert die Vue-App aus und leitet `/api` an das Backend weiter
|
||||
2. **api** – FastAPI liest Daten aus PostgreSQL
|
||||
|
||||
**Produktiv-Pfad auf dem Server:** `/opt/nginx_filebot`
|
||||
|
||||
> Auf dem Entwicklungs-PC (z. B. Mac) ist **kein** Node.js oder Python für den Betrieb nötig. Code anpassen, auf den Server kopieren, dort `docker compose up -d --build` ausführen.
|
||||
> Auf dem Entwicklungs-PC ist kein Node.js oder Python für den Betrieb nötig. Code anpassen, mit `scripts/deploy.sh` auf den Server übertragen, dort `docker compose up -d --build` ausführen.
|
||||
|
||||
Für KI-Assistenten / Projekt-Kontext: siehe [`PROMPT.md`](PROMPT.md).
|
||||
|
||||
@@ -43,29 +43,30 @@ Für KI-Assistenten / Projekt-Kontext: siehe [`PROMPT.md`](PROMPT.md).
|
||||
|
||||
### Medien-Übersicht
|
||||
|
||||
- **Cover** aus `cover_url` (z. B. TVMaze-Poster) in der ersten Spalte / auf Karten
|
||||
- **Original-** und **Neu-Dateiname** immer sichtbar
|
||||
- **Cover** – primär aus der Datenbank (`cover_image` BYTEA), Fallback auf externe URL via Proxy
|
||||
- **Original-** und **Neu-Dateiname** immer sichtbar (Rename-Kontrolle)
|
||||
- Technische Spalten: Rating, Format, Auflösung, Codecs, Bitraten, Container, Erstellungsdatum
|
||||
- **Neueste Einträge zuerst** (Sortierung nach `created_at`)
|
||||
|
||||
### Filter
|
||||
|
||||
- Volltextsuche in beiden Dateinamen
|
||||
- **Button-Filter** für Videoformat, Codec und Container (nebeneinander auf Desktop, gestapelt auf Mobil)
|
||||
- **Zeitraum** „Von / Bis“ mit Kalender und Uhrzeit (HH:MM)
|
||||
- **Button-Filter** für Typ (Movie/Episode), Videoformat, Codec und Container
|
||||
- **Zeitraum** „Von / Bis" mit Kalender und Uhrzeit (HH:MM)
|
||||
- Schnellfilter in der Tabelle (clientseitig in geladenen Daten)
|
||||
|
||||
### Gesehen-Status
|
||||
|
||||
- Ungesehene Zeilen sind **hervorgehoben** (blauer Akzent)
|
||||
- **Tippen auf eine Zeile** markiert sie als gesehen oder ungesehen
|
||||
- Filter **„Nur ungesehen“** und Aktion **„Alle als gesehen“** (für aktuelle Filterauswahl)
|
||||
- Zähler **„X neu“** im Header und in den Filtern
|
||||
- Filter **„Nur ungesehen"** und Aktion **„Alle als gesehen"** (für aktuelle Filterauswahl)
|
||||
- Zähler **„X neu"** im Header
|
||||
|
||||
### Weitere Aktionen
|
||||
|
||||
- **Löschen** einzelner Einträge (Mülleimer, mit Bestätigung)
|
||||
- Responsives Layout: **Tabelle** (Desktop) / **Karten** (Mobil, ≤900px Breite)
|
||||
- **Live-Aktualisierung** alle 5 Sekunden (pausiert im Hintergrund-Tab)
|
||||
- Responsives Layout: **Tabelle** (Desktop) / **Karten** (Mobil, ≤900px)
|
||||
|
||||
---
|
||||
|
||||
@@ -77,7 +78,7 @@ Für KI-Assistenten / Projekt-Kontext: siehe [`PROMPT.md`](PROMPT.md).
|
||||
▼
|
||||
┌─────────────────┐ /api/* ┌─────────────────┐
|
||||
│ nginx (web) │ ───────────────►│ FastAPI (api) │
|
||||
│ Port 8080 │ │ Port 8000 │
|
||||
│ Port 8090 │ │ Port 8000 │
|
||||
│ Vue static │ └────────┬────────┘
|
||||
└─────────────────┘ │
|
||||
▼
|
||||
@@ -92,8 +93,6 @@ Für KI-Assistenten / Projekt-Kontext: siehe [`PROMPT.md`](PROMPT.md).
|
||||
| `web` | `nginx/Dockerfile` (Node → Nginx) | Statische Dateien, Reverse Proxy |
|
||||
| `api` | `api/Dockerfile` | REST-API, DB-Zugriff |
|
||||
|
||||
Compose-Datei nutzt **relative Pfade** – immer aus `/opt/nginx_filebot` starten.
|
||||
|
||||
---
|
||||
|
||||
## Voraussetzungen
|
||||
@@ -101,34 +100,24 @@ Compose-Datei nutzt **relative Pfade** – immer aus `/opt/nginx_filebot` starte
|
||||
- Linux-Server mit **Docker** und **Docker Compose v2**
|
||||
- Erreichbare **PostgreSQL**-Instanz (im LAN, z. B. `192.168.30.186:5432`)
|
||||
- Tabelle **`n8n.movie_files`** in Datenbank **`n8n_filebot`** (anpassbar in Config)
|
||||
- Optional: Spalten `seen_at` und `cover_url` (siehe [Datenbank](#datenbank))
|
||||
- Alle SQL-Migrationen ausgeführt (siehe [Datenbank & Migrationen](#datenbank--migrationen))
|
||||
|
||||
---
|
||||
|
||||
## Installation auf dem Server
|
||||
|
||||
Ausführliche Anleitung inkl. **SMB-Gruppe** und Umzug: [`docs/DEPLOY-NEUER-SERVER.md`](docs/DEPLOY-NEUER-SERVER.md).
|
||||
Ausführliche Anleitung inkl. SMB-Gruppe und Umzug: [`docs/DEPLOY-NEUER-SERVER.md`](docs/DEPLOY-NEUER-SERVER.md).
|
||||
|
||||
### 1. Projekt ablegen
|
||||
|
||||
```bash
|
||||
# Ein User (vogto): Rechte auf ganz /opt, nicht nur ein Unterordner
|
||||
sudo groupadd -f opt-docker
|
||||
sudo usermod -aG opt-docker,docker vogto
|
||||
sudo chown vogto:opt-docker /opt && sudo chmod 2775 /opt
|
||||
sudo mkdir -p /opt/nginx_filebot
|
||||
|
||||
# Variante A: Git
|
||||
git clone <repository-url> /opt/nginx_filebot
|
||||
|
||||
# Variante B: rsync vom Entwicklungsrechner
|
||||
# rsync -avz --exclude node_modules --exclude config/config.yaml \
|
||||
# ./ user@server:/opt/nginx_filebot/
|
||||
git clone https://git.vogt.de.com/vogto/filebot-media-browser.git /opt/nginx_filebot
|
||||
```
|
||||
|
||||
### 2. Datenbank vorbereiten
|
||||
|
||||
Siehe Abschnitt [Datenbank](#datenbank) – Migrationen ausführen.
|
||||
Alle Migrationen ausführen (siehe [Datenbank & Migrationen](#datenbank--migrationen)).
|
||||
|
||||
### 3. Konfiguration anlegen
|
||||
|
||||
@@ -149,19 +138,17 @@ docker compose up -d --build
|
||||
|
||||
```bash
|
||||
docker compose ps
|
||||
curl -s http://localhost:8080/api/health
|
||||
curl -s http://localhost:8090/api/health
|
||||
# Erwartung: {"status":"ok"}
|
||||
```
|
||||
|
||||
Im Browser: **`http://<Server-IP>:8080`**
|
||||
Im Browser: **`http://<Server-IP>:8090`**
|
||||
|
||||
---
|
||||
|
||||
## Konfiguration
|
||||
|
||||
Datei: **`/opt/nginx_filebot/config/config.yaml`** (nicht versionieren, in `.gitignore`).
|
||||
|
||||
Beispiel (produktive Werte aus dem Projekt):
|
||||
Datei: **`config/config.yaml`** (nicht versioniert, in `.gitignore`).
|
||||
|
||||
```yaml
|
||||
database:
|
||||
@@ -177,88 +164,126 @@ database:
|
||||
|
||||
| Parameter | Bedeutung |
|
||||
|-----------|-----------|
|
||||
| `name` | **Datenbank** (Catalog), nicht Tabellenname |
|
||||
| `name` | Datenbank (Catalog) |
|
||||
| `table` | Tabellenname innerhalb des Schemas |
|
||||
| `db_schema` | Schema (bei euch typisch `n8n`) |
|
||||
| `schema` | Alias für `db_schema` in YAML (optional) |
|
||||
|
||||
Die API verbindet sich mit: `"n8n"."movie_files"` (in Anführungszeichen, case-sensitiv).
|
||||
| `db_schema` | Schema (typisch `n8n`) |
|
||||
|
||||
---
|
||||
|
||||
## Datenbank
|
||||
## Datenbank & Migrationen
|
||||
|
||||
### Tabelle und Schema
|
||||
### Tabelle
|
||||
|
||||
| Einstellung | Typischer Wert |
|
||||
|-------------|----------------|
|
||||
| Einstellung | Wert |
|
||||
|-------------|------|
|
||||
| Datenbank | `n8n_filebot` |
|
||||
| Schema | `n8n` |
|
||||
| Tabelle | `movie_files` |
|
||||
| Vollqualifiziert | `"n8n"."movie_files"` |
|
||||
|
||||
Tabellen prüfen:
|
||||
### Migrationen ausführen
|
||||
|
||||
Alle SQL-Dateien im Verzeichnis `sql/` der Reihe nach ausführen:
|
||||
|
||||
```bash
|
||||
docker compose exec api python /app/scripts/list-tables.py
|
||||
cd /opt/nginx_filebot
|
||||
|
||||
for f in sql/00*.sql; do
|
||||
echo "==> $f"
|
||||
psql -h 192.168.30.186 -U n8n_filebot -d n8n_filebot -f "$f"
|
||||
done
|
||||
```
|
||||
|
||||
### Migration: `seen_at`
|
||||
| Datei | Inhalt |
|
||||
|-------|--------|
|
||||
| `001_add_seen_at.sql` | Spalte `seen_at TIMESTAMPTZ` + Index |
|
||||
| `002_add_cover_url.sql` | Spalte `cover_url TEXT` |
|
||||
| `003_add_object_type.sql` | Spalte `object_type TEXT` |
|
||||
| `004_add_cover_image.sql` | Spalten `cover_image BYTEA` + `cover_mime_type TEXT` |
|
||||
|
||||
```bash
|
||||
psql -h 192.168.30.186 -U n8n_filebot -d n8n_filebot \
|
||||
-f /opt/nginx_filebot/sql/001_add_seen_at.sql
|
||||
```
|
||||
### Gesehen-Status
|
||||
|
||||
Oder manuell:
|
||||
|
||||
```sql
|
||||
ALTER TABLE n8n.movie_files
|
||||
ADD COLUMN IF NOT EXISTS seen_at TIMESTAMPTZ NULL;
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_movie_files_seen_at
|
||||
ON n8n.movie_files (seen_at);
|
||||
```
|
||||
|
||||
- `seen_at IS NULL` → **ungesehen** (hervorgehoben in der UI)
|
||||
- `seen_at IS NULL` → **ungesehen** (blau hervorgehoben)
|
||||
- gesetzt → **gesehen**
|
||||
|
||||
### Migration: `cover_url`
|
||||
### Cover-Bilder
|
||||
|
||||
- `cover_url` – externe Poster-URL (z. B. TVMaze, OMDB)
|
||||
- `cover_image` – Bild-Binärdaten direkt in der DB (BYTEA)
|
||||
- `cover_mime_type` – MIME-Typ des gespeicherten Bildes (z. B. `image/jpeg`)
|
||||
|
||||
Die UI lädt Cover **primär aus der DB** (`/api/records/{id}/cover`), Fallback auf den URL-Proxy (`/api/cover?url=…`).
|
||||
|
||||
---
|
||||
|
||||
## n8n Workflows
|
||||
|
||||
### Workflow 1: FileBot (Haupt-Workflow)
|
||||
|
||||
Wird von Filebot per Webhook ausgelöst und schreibt Medien-Metadaten in die DB. Danach läuft alle 2 Minuten ein Schedule-Trigger, der fehlende Cover-URLs nachlädt und die Cover-Bilder herunterlädt.
|
||||
|
||||
**Ablauf:**
|
||||
|
||||
```bash
|
||||
psql -h 192.168.30.186 -U n8n_filebot -d n8n_filebot \
|
||||
-f /opt/nginx_filebot/sql/002_add_cover_url.sql
|
||||
```
|
||||
Webhook (Filebot) → Insert rows (Metadaten)
|
||||
|
||||
Schedule (alle 2 Min) → Select (cover_url IS NULL)
|
||||
→ Loop → Switch (Movie / Episode)
|
||||
Movie → HTTP omdbapi → Edit Fields → Download Cover → Prepare Data → Speichere Cover in DB
|
||||
Episode → If thetvdb_id → HTTP tvmaze → Edit Fields1 → Download Cover → Prepare Data → Speichere Cover in DB
|
||||
```
|
||||
|
||||
**Wichtig für n8n:**
|
||||
- `seen_at` und `cover_image` beim INSERT/UPDATE **nicht** überschreiben
|
||||
- `cover_url` bleibt immer erhalten (auch wenn der Bild-Download fehlschlägt)
|
||||
|
||||
---
|
||||
|
||||
### Workflow 2: Cover Backfill
|
||||
|
||||
Einmaliger / regelmäßiger Workflow zum Nachfüllen von `cover_image` für Einträge, die bereits eine `cover_url` haben, aber noch kein Bild in der DB.
|
||||
|
||||
**Ablauf:**
|
||||
|
||||
```
|
||||
Manuell / Stündlich
|
||||
→ Select (cover_image IS NULL AND cover_url IS NOT NULL)
|
||||
→ Loop (Batch 5)
|
||||
→ HTTP Download (cover_url, continueOnFail)
|
||||
→ Code (Base64 extrahieren)
|
||||
→ Execute Query (UPDATE cover_image, cover_mime_type)
|
||||
→ Loop (weiter)
|
||||
```
|
||||
|
||||
**Hinweis:** Wenn der Workflow wegen Timeout abbricht (viele Einträge), beim erneuten Ausführen macht er automatisch dort weiter, wo er aufgehört hat – der SELECT lädt nur noch Einträge mit `cover_image IS NULL`.
|
||||
|
||||
Tabellengröße prüfen:
|
||||
|
||||
```sql
|
||||
ALTER TABLE n8n.movie_files
|
||||
ADD COLUMN IF NOT EXISTS cover_url TEXT NULL;
|
||||
SELECT
|
||||
COUNT(*) AS zeilen,
|
||||
COUNT(cover_image) AS mit_bild,
|
||||
pg_size_pretty(pg_total_relation_size('"n8n"."movie_files"')) AS gesamt
|
||||
FROM n8n.movie_files;
|
||||
```
|
||||
|
||||
Beispiel-URL: `https://static.tvmaze.com/uploads/images/medium_portrait/200/502332.jpg`
|
||||
(Doppelte Anführungszeichen in der DB werden in der UI bereinigt.)
|
||||
|
||||
### Weitere Spalten
|
||||
|
||||
Die API liest alle in `api/main.py` → `COLUMNS` definierten Felder (entsprechen dem n8n/Filebot-Export). Fehlende Spalten führen zu API-Fehlern – dann Spalte in PostgreSQL ergänzen oder `COLUMNS` anpassen.
|
||||
|
||||
---
|
||||
|
||||
## Bedienung
|
||||
|
||||
### Desktop
|
||||
|
||||
1. Seite öffnen → Daten werden geladen (Status „DB verbunden“).
|
||||
1. Seite öffnen → Daten werden geladen (Status „DB verbunden").
|
||||
2. Filter oben nutzen; **Aktualisieren** lädt neu, **Zurücksetzen** löscht Filter.
|
||||
3. **Live-Aktualisierung:** Alle 5 Sekunden werden die Daten still neu geladen (ohne Seiten-Reload). Im Header: „Live · HH:MM:SS“. Im Hintergrund-Tab pausiert das Polling.
|
||||
4. **Cover:** Bilder werden über `/api/cover` geladen (Proxy), falls externe Poster (z. B. TVMaze) blockiert werden.
|
||||
5. **Zeile antippen/klicken** → Gesehen-Status umschalten.
|
||||
6. **Mülleimer** → Eintrag löschen (mit Bestätigung).
|
||||
7. Spaltenköpfe klicken zum Sortieren; Schnellfilter unter der Filterleiste.
|
||||
3. **Live-Aktualisierung:** Alle 5 Sekunden werden die Daten still neu geladen. Im Hintergrund-Tab pausiert das Polling.
|
||||
4. **Zeile antippen/klicken** → Gesehen-Status umschalten.
|
||||
5. **Mülleimer** → Eintrag löschen (mit Bestätigung).
|
||||
6. Spaltenköpfe klicken zum Sortieren; Schnellfilter unter der Filterleiste.
|
||||
|
||||
### Mobil
|
||||
|
||||
- Gleiche Logik in **Kartenform** mit Cover links.
|
||||
- Filter untereinander.
|
||||
- Filter untereinander gestapelt.
|
||||
|
||||
### Gesehen-Status
|
||||
|
||||
@@ -266,81 +291,28 @@ Die API liest alle in `api/main.py` → `COLUMNS` definierten Felder (entspreche
|
||||
|--------|--------|
|
||||
| Zeile antippen (ungesehen) | `seen_at` = jetzt |
|
||||
| Zeile antippen (gesehen) | `seen_at` = NULL |
|
||||
| „Nur ungesehen“ | Zeigt nur Einträge ohne `seen_at` |
|
||||
| „Alle als gesehen“ | Setzt `seen_at` für alle **aktuell gefilterten** Einträge |
|
||||
| „Nur ungesehen" | Zeigt nur Einträge ohne `seen_at` |
|
||||
| „Alle als gesehen" | Setzt `seen_at` für alle aktuell gefilterten Einträge |
|
||||
|
||||
---
|
||||
|
||||
## API-Referenz
|
||||
|
||||
Basis-URL hinter Nginx: `http://<host>:8080/api`
|
||||
Basis-URL: `http://<host>:8090/api`
|
||||
|
||||
### `GET /health`
|
||||
|
||||
```json
|
||||
{ "status": "ok" }
|
||||
```
|
||||
|
||||
### `GET /status`
|
||||
|
||||
Diagnose: Config-Pfad, qualifizierte Tabelle, Zeilenanzahl, bei Fehler Tabellenlisten.
|
||||
|
||||
### `GET /records`
|
||||
|
||||
Query-Parameter:
|
||||
|
||||
| Parameter | Beschreibung |
|
||||
|-----------|--------------|
|
||||
| `search` | ILIKE in `file_name_original` und `file_name_new` |
|
||||
| `format` | `standard_video_format` |
|
||||
| `codec` | `video_codec_library` |
|
||||
| `container` | `container_format` |
|
||||
| `created_from` | ISO-Datum/Zeit, `created_at >=` |
|
||||
| `created_to` | ISO-Datum/Zeit, `created_at <=` |
|
||||
| `unseen_only` | `true` → nur `seen_at IS NULL` |
|
||||
| `limit`, `offset` | Pagination (Standard limit=5000) |
|
||||
|
||||
Antwort enthält u. a. `records`, `total`, `unseen_total`.
|
||||
|
||||
### `GET /records/meta`
|
||||
|
||||
Gleiche Query-Parameter wie `GET /records` (ohne Pagination). Leichtgewichtige Antwort für Auto-Refresh:
|
||||
|
||||
```json
|
||||
{
|
||||
"total": 120,
|
||||
"unseen_total": 3,
|
||||
"max_id": 456,
|
||||
"latest_created_at": "2026-06-04T12:00:00+00:00",
|
||||
"revision": "a1b2c3…"
|
||||
}
|
||||
```
|
||||
|
||||
### `GET /cover`
|
||||
|
||||
Query: `url` (HTTP(S)-Poster-URL). Liefert das Bild über die API (umgeht Hotlink-/Referrer-Sperren).
|
||||
|
||||
### `GET /filters`
|
||||
|
||||
Distinct-Werte für Format-, Codec- und Container-Buttons.
|
||||
|
||||
### `PATCH /records/{id}/seen`
|
||||
|
||||
Body:
|
||||
|
||||
```json
|
||||
{ "seen": true }
|
||||
```
|
||||
|
||||
oder `{ "seen": false }` (setzt `seen_at` auf NULL).
|
||||
|
||||
### `POST /records/mark-all-seen`
|
||||
|
||||
Markiert alle Einträge, die zu den **gleichen Query-Filtern** wie `GET /records` passen (ohne `unseen_only`).
|
||||
|
||||
### `DELETE /records/{id}`
|
||||
|
||||
Löscht einen Datensatz anhand der `id`.
|
||||
| Methode | Pfad | Beschreibung |
|
||||
|---------|------|--------------|
|
||||
| GET | `/health` | DB-Ping |
|
||||
| GET | `/status` | Diagnose (Config, Tabellenliste bei Fehler) |
|
||||
| GET | `/columns` | Liste aller geladenen Spalten |
|
||||
| GET | `/filters` | Distinct-Werte für Filter-Buttons |
|
||||
| GET | `/records` | Datensätze; Query: `search`, `format`, `codec`, `container`, `object_type`, `created_from`, `created_to`, `unseen_only`, `limit`, `offset` |
|
||||
| GET | `/records/meta` | Leichtgewichtiger Check für Auto-Refresh (total, unseen_total, revision) |
|
||||
| GET | `/records/{id}/cover` | Cover-Bild direkt aus DB (BYTEA); 404 wenn kein Bild gespeichert |
|
||||
| GET | `/cover?url=…` | Cover-Proxy für externe URLs (umgeht Hotlink-Sperren) |
|
||||
| PATCH | `/records/{id}/seen` | Body: `{"seen": true\|false}` |
|
||||
| POST | `/records/mark-all-seen` | Alle gefilterten Einträge als gesehen markieren |
|
||||
| DELETE | `/records/{id}` | Eintrag löschen |
|
||||
|
||||
---
|
||||
|
||||
@@ -349,65 +321,74 @@ Löscht einen Datensatz anhand der `id`.
|
||||
```text
|
||||
.
|
||||
├── docker-compose.yml
|
||||
├── PROMPT.md # KI-/Projekt-Kontext
|
||||
├── PROMPT.md # KI-/Projekt-Kontext
|
||||
├── README.md
|
||||
├── config/
|
||||
│ └── config.example.yaml
|
||||
├── api/
|
||||
│ ├── main.py # REST-Endpunkte, COLUMNS
|
||||
│ ├── config.py # YAML-Config, db_schema
|
||||
│ ├── main.py # REST-Endpunkte, COLUMNS
|
||||
│ ├── config.py # YAML-Config, db_schema
|
||||
│ ├── Dockerfile
|
||||
│ ├── requirements.txt
|
||||
│ └── scripts/
|
||||
│ └── list-tables.py # Diagnose im Container
|
||||
│ └── list-tables.py # Diagnose im Container
|
||||
├── frontend/
|
||||
│ ├── package.json
|
||||
│ ├── vite.config.ts
|
||||
│ └── src/
|
||||
│ ├── App.vue
|
||||
│ ├── api.ts
|
||||
│ ├── styles.css # Theme (helles Dark-UI)
|
||||
│ ├── types.ts
|
||||
│ ├── styles.css
|
||||
│ ├── components/
|
||||
│ │ ├── DataTable.vue
|
||||
│ │ ├── MobileCards.vue
|
||||
│ │ ├── FilterBar.vue
|
||||
│ │ ├── CoverImage.vue
|
||||
│ │ ├── CoverImage.vue # DB-Bild primär, URL-Proxy als Fallback
|
||||
│ │ ├── NamePair.vue
|
||||
│ │ ├── DateTimeRangeFilter.vue
|
||||
│ │ └── DeleteButton.vue
|
||||
│ ├── composables/
|
||||
│ │ └── useAutoRefresh.ts
|
||||
│ └── utils/
|
||||
│ ├── coverUrl.ts
|
||||
│ ├── datetime.ts
|
||||
│ ├── names.ts
|
||||
│ ├── objectType.ts
|
||||
│ ├── preserveScroll.ts
|
||||
│ └── seen.ts
|
||||
├── nginx/
|
||||
│ ├── Dockerfile
|
||||
│ └── nginx.conf
|
||||
├── scripts/
|
||||
│ └── deploy.sh # Einmaliges SSH-Login, alle Dateien übertragen
|
||||
└── sql/
|
||||
├── 001_add_seen_at.sql
|
||||
└── 002_add_cover_url.sql
|
||||
├── 002_add_cover_url.sql
|
||||
├── 003_add_object_type.sql
|
||||
└── 004_add_cover_image.sql
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Entwicklung & Updates
|
||||
|
||||
### Code aktualisieren
|
||||
### Dateien auf den Server übertragen
|
||||
|
||||
```bash
|
||||
cd "/Users/vogto/Documents/ClaudeCode/Webseite Filebot"
|
||||
bash scripts/deploy.sh
|
||||
```
|
||||
|
||||
Das Script baut die Container anschließend automatisch neu.
|
||||
|
||||
### Manuell (einzelne Dateien)
|
||||
|
||||
```bash
|
||||
cd /opt/nginx_filebot
|
||||
git pull # falls Git
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
Nur Frontend:
|
||||
|
||||
```bash
|
||||
docker compose up -d --build web
|
||||
```
|
||||
|
||||
Nur API:
|
||||
|
||||
```bash
|
||||
docker compose up -d --build api
|
||||
docker compose up -d --build # alles
|
||||
docker compose up -d --build web # nur Frontend
|
||||
docker compose up -d --build api # nur API
|
||||
```
|
||||
|
||||
### Logs
|
||||
@@ -417,19 +398,6 @@ docker compose logs -f api
|
||||
docker compose logs -f web
|
||||
```
|
||||
|
||||
### Optional: lokale Entwicklung (nicht für Produktion)
|
||||
|
||||
Nur wenn bewusst gewünscht – normaler Workflow ist Server-only.
|
||||
|
||||
```bash
|
||||
# API
|
||||
cd api && pip install -r requirements.txt
|
||||
CONFIG_PATH=../config/config.yaml uvicorn main:app --reload --port 8000
|
||||
|
||||
# Frontend (proxied in vite.config.ts nach :8000)
|
||||
cd frontend && npm install && npm run dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fehlerbehebung
|
||||
@@ -437,19 +405,17 @@ cd frontend && npm install && npm run dev
|
||||
### API-Fehler / leere Seite
|
||||
|
||||
```bash
|
||||
cd /opt/nginx_filebot
|
||||
docker compose logs api --tail 80
|
||||
curl -s http://localhost:8080/api/status | python3 -m json.tool
|
||||
curl -s http://localhost:8090/api/status | python3 -m json.tool
|
||||
```
|
||||
|
||||
| Symptom | Ursache | Lösung |
|
||||
|---------|---------|--------|
|
||||
| `relation "n8n.n8n_filebot" does not exist` | Falscher Tabellenname | `table: "movie_files"` in config.yaml |
|
||||
| `relation "public...." does not exist` | Schema falsch | `db_schema: "n8n"` |
|
||||
| Spalte `seen_at` / `cover_url` fehlt | Migration fehlt | SQL in `sql/` ausführen |
|
||||
| `API-Fehler: 503` | DB nicht erreichbar | `nc -zv <host> 5432` vom Server und aus Container |
|
||||
| 0 Einträge | Filter zu streng / leere DB | Filter zurücksetzen, `SELECT COUNT(*)` prüfen |
|
||||
| Altes Design | Cache / kein Rebuild | `docker compose up -d --build web` + Hard-Reload |
|
||||
| `relation "..." does not exist` | Falscher Tabellenname oder Schema | `table: "movie_files"`, `db_schema: "n8n"` in config.yaml |
|
||||
| Spalte fehlt (API 500) | Migration nicht ausgeführt | SQL in `sql/` ausführen |
|
||||
| `503` | DB nicht erreichbar | `nc -zv 192.168.30.186 5432` vom Server prüfen |
|
||||
| Cover fehlt | `cover_image IS NULL` | Backfill-Workflow in n8n ausführen |
|
||||
| Altes Design | Kein Rebuild | `docker compose up -d --build web` + Hard-Reload |
|
||||
|
||||
### Netzwerk vom Container zur DB
|
||||
|
||||
@@ -460,21 +426,3 @@ s = socket.create_connection(('192.168.30.186', 5432), timeout=5)
|
||||
print('OK'); s.close()
|
||||
"
|
||||
```
|
||||
|
||||
### Port ändern
|
||||
|
||||
In `docker-compose.yml` z. B. `"80:80"` oder `"8888:80"` statt `"8080:80"`.
|
||||
|
||||
---
|
||||
|
||||
## Hinweise für n8n
|
||||
|
||||
- **INSERT:** Neue Zeilen haben `seen_at = NULL` → erscheinen als „neu“.
|
||||
- **UPDATE:** `seen_at` und `cover_url` nicht mit überschreiben, wenn der Status erhalten bleiben soll.
|
||||
- Datenbank-Workflow und Tabellenname (`movie_files`, Schema `n8n`) mit der `config.yaml` abstimmen.
|
||||
|
||||
---
|
||||
|
||||
## Lizenz / Nutzung
|
||||
|
||||
Privates Heimnetz-Projekt. Anpassungen nach Bedarf; `config.yaml` mit Passwörtern nicht in öffentliche Repositories committen.
|
||||
|
||||
+48
@@ -53,6 +53,7 @@ COLUMNS = [
|
||||
"audio_bitrate",
|
||||
"created_at",
|
||||
"seen_at",
|
||||
"cover_mime_type",
|
||||
]
|
||||
|
||||
|
||||
@@ -452,6 +453,31 @@ async def proxy_cover(url: str = Query(..., min_length=8)):
|
||||
)
|
||||
|
||||
|
||||
@app.get("/api/records/{record_id}/cover")
|
||||
async def get_record_cover(record_id: int):
|
||||
"""Cover-Bild aus DB liefern (BYTEA). 404 wenn kein Bild gespeichert."""
|
||||
if pool is None:
|
||||
raise HTTPException(503, detail="Datenbank nicht verbunden")
|
||||
|
||||
async with pool.acquire() as conn:
|
||||
row = await conn.fetchrow(
|
||||
f"SELECT cover_image, cover_mime_type FROM {qualified_table} WHERE id = $1",
|
||||
record_id,
|
||||
)
|
||||
|
||||
if row is None:
|
||||
raise HTTPException(404, detail="Eintrag nicht gefunden")
|
||||
if not row["cover_image"]:
|
||||
raise HTTPException(404, detail="Kein Bild gespeichert")
|
||||
|
||||
mime = row["cover_mime_type"] or "image/jpeg"
|
||||
return Response(
|
||||
content=bytes(row["cover_image"]),
|
||||
media_type=mime,
|
||||
headers={"Cache-Control": "public, max-age=604800"},
|
||||
)
|
||||
|
||||
|
||||
@app.get("/api/records")
|
||||
async def get_records(
|
||||
search: str | None = Query(None, description="Suche in Dateinamen"),
|
||||
@@ -518,6 +544,28 @@ async def get_records(
|
||||
}
|
||||
|
||||
|
||||
class SetCoverUrlBody(BaseModel):
|
||||
cover_url: str
|
||||
|
||||
|
||||
@app.patch("/api/records/{record_id}/cover_url")
|
||||
async def set_record_cover_url(record_id: int, body: SetCoverUrlBody):
|
||||
if pool is None:
|
||||
raise HTTPException(503, detail="Datenbank nicht verbunden")
|
||||
url = body.cover_url.strip()
|
||||
if not url:
|
||||
raise HTTPException(422, detail="cover_url darf nicht leer sein")
|
||||
async with pool.acquire() as conn:
|
||||
row = await conn.fetchrow(
|
||||
f"UPDATE {qualified_table} SET cover_url = $1, cover_image = NULL, cover_mime_type = NULL WHERE id = $2 RETURNING id, cover_url",
|
||||
url,
|
||||
record_id,
|
||||
)
|
||||
if row is None:
|
||||
raise HTTPException(404, detail=f"Eintrag mit ID {record_id} nicht gefunden")
|
||||
return {"id": row["id"], "cover_url": row["cover_url"]}
|
||||
|
||||
|
||||
@app.patch("/api/records/{record_id}/seen")
|
||||
async def set_record_seen(record_id: int, body: SetSeenBody):
|
||||
"""Einzelnen Eintrag als gesehen (seen=true) oder ungesehen (seen=false) markieren."""
|
||||
|
||||
@@ -7,12 +7,14 @@ import {
|
||||
fetchRecords,
|
||||
markAllSeen,
|
||||
setRecordSeen,
|
||||
updateCoverUrl,
|
||||
} from './api'
|
||||
import type { FilterOptions, MediaRecord } from './types'
|
||||
import { isUnseen } from './utils/seen'
|
||||
import { useAutoRefresh } from './composables/useAutoRefresh'
|
||||
import { captureScroll, restoreScroll } from './utils/preserveScroll'
|
||||
import FilterBar from './components/FilterBar.vue'
|
||||
import CoverUrlModal from './components/CoverUrlModal.vue'
|
||||
import { boundToIso, emptyDateTimeBound, type DateTimeBound } from './utils/datetime'
|
||||
import DataTable from './components/DataTable.vue'
|
||||
import MobileCards from './components/MobileCards.vue'
|
||||
@@ -39,6 +41,7 @@ let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const isMobile = ref(false)
|
||||
const deletingId = ref<number | null>(null)
|
||||
const togglingSeenId = ref<number | null>(null)
|
||||
const coverEditRecord = ref<MediaRecord | null>(null)
|
||||
|
||||
const autoRefreshEnabled = ref(true)
|
||||
const autoRefreshPaused = computed(
|
||||
@@ -170,6 +173,21 @@ async function handleMarkAllSeen() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCoverSave(recordId: number, url: string) {
|
||||
error.value = null
|
||||
try {
|
||||
const result = await updateCoverUrl(recordId, url)
|
||||
const record = records.value.find((r) => r.id === recordId)
|
||||
if (record) {
|
||||
record.cover_url = result.cover_url
|
||||
record.cover_mime_type = null
|
||||
}
|
||||
coverEditRecord.value = null
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Cover-URL konnte nicht gespeichert werden'
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
const row = records.value.find((r) => r.id === id)
|
||||
const label = row?.file_name_new || row?.file_name_original || `ID ${id}`
|
||||
@@ -285,6 +303,7 @@ onBeforeUnmount(() => {
|
||||
:toggling-seen-id="togglingSeenId"
|
||||
@delete="handleDelete"
|
||||
@toggle-seen="handleToggleSeen"
|
||||
@edit-cover="(r) => (coverEditRecord = r)"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="isMobile" class="view-mobile">
|
||||
@@ -294,11 +313,19 @@ onBeforeUnmount(() => {
|
||||
:toggling-seen-id="togglingSeenId"
|
||||
@delete="handleDelete"
|
||||
@toggle-seen="handleToggleSeen"
|
||||
@edit-cover="(r) => (coverEditRecord = r)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<CoverUrlModal
|
||||
:open="coverEditRecord !== null"
|
||||
:record-id="coverEditRecord?.id ?? 0"
|
||||
@close="coverEditRecord = null"
|
||||
@save="handleCoverSave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -79,6 +79,20 @@ export async function markAllSeen(params: FetchParams = {}): Promise<{ marked: n
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function updateCoverUrl(
|
||||
id: number,
|
||||
coverUrl: string,
|
||||
): Promise<{ id: number; cover_url: string }> {
|
||||
const res = await fetch(`/api/records/${id}/cover_url`, {
|
||||
...fetchOpts,
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ cover_url: coverUrl }),
|
||||
})
|
||||
if (!res.ok) throw new Error(await parseApiError(res))
|
||||
return res.json() as Promise<{ id: number; cover_url: string }>
|
||||
}
|
||||
|
||||
export async function deleteRecord(id: number): Promise<void> {
|
||||
const res = await fetch(`/api/records/${id}`, { ...fetchOpts, method: 'DELETE' })
|
||||
if (!res.ok) throw new Error(await parseApiError(res))
|
||||
|
||||
@@ -4,17 +4,39 @@ import { coverImageSrc } from '../utils/coverUrl'
|
||||
|
||||
const props = defineProps<{
|
||||
url: string | null | undefined
|
||||
id?: number | null
|
||||
hasCoverInDb?: boolean | null
|
||||
size?: 'table' | 'card'
|
||||
}>()
|
||||
|
||||
const failed = ref(false)
|
||||
// Ob das DB-Bild bereits fehlgeschlagen ist → Fallback auf URL
|
||||
const dbFailed = ref(false)
|
||||
const urlFailed = ref(false)
|
||||
|
||||
const src = computed(() => coverImageSrc(props.url))
|
||||
const src = computed(() => {
|
||||
if (dbFailed.value) {
|
||||
// Fallback: URL-Proxy
|
||||
return coverImageSrc(props.url, null, false)
|
||||
}
|
||||
return coverImageSrc(props.url, props.id, props.hasCoverInDb)
|
||||
})
|
||||
|
||||
const failed = computed(() => dbFailed.value && urlFailed.value)
|
||||
|
||||
function onError() {
|
||||
if (!dbFailed.value && props.id && props.hasCoverInDb) {
|
||||
// DB-Bild fehlgeschlagen → Fallback auf URL versuchen
|
||||
dbFailed.value = true
|
||||
} else {
|
||||
urlFailed.value = true
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.url,
|
||||
() => [props.id, props.url, props.hasCoverInDb],
|
||||
() => {
|
||||
failed.value = false
|
||||
dbFailed.value = false
|
||||
urlFailed.value = false
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -29,7 +51,7 @@ watch(
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="failed = true"
|
||||
@error="onError"
|
||||
/>
|
||||
<div v-else class="cover__placeholder" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{ recordId: number; open: boolean }>()
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
save: [recordId: number, url: string]
|
||||
}>()
|
||||
|
||||
const url = ref('')
|
||||
const error = ref('')
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(v) => {
|
||||
if (v) { url.value = ''; error.value = '' }
|
||||
},
|
||||
)
|
||||
|
||||
function onSave() {
|
||||
const trimmed = url.value.trim()
|
||||
if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
|
||||
error.value = 'Bitte eine gültige URL eingeben (http:// oder https://)'
|
||||
return
|
||||
}
|
||||
emit('save', props.recordId, trimmed)
|
||||
}
|
||||
|
||||
function onBackdrop(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="modal-backdrop" @click="onBackdrop">
|
||||
<div class="modal" role="dialog" aria-modal="true">
|
||||
<h2 class="modal__title">Cover-URL festlegen</h2>
|
||||
<p class="modal__hint">URL des Cover-Bildes eingeben. Das Bild wird sofort als Vorschau geladen und von n8n in die Datenbank übernommen.</p>
|
||||
<input
|
||||
v-model="url"
|
||||
class="modal__input"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
autofocus
|
||||
@keydown.enter="onSave"
|
||||
@keydown.esc="emit('close')"
|
||||
/>
|
||||
<p v-if="error" class="modal__error">{{ error }}</p>
|
||||
<div class="modal__actions">
|
||||
<button class="btn btn--ghost" @click="emit('close')">Abbrechen</button>
|
||||
<button class="btn btn--primary" @click="onSave">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
width: min(480px, 90vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.modal__title {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal__hint {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal__input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.modal__input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.modal__error {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
color: var(--danger, #e05);
|
||||
}
|
||||
|
||||
.modal__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
background: none;
|
||||
border-color: var(--border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
</style>
|
||||
@@ -26,8 +26,13 @@ const props = defineProps<{
|
||||
const emit = defineEmits<{
|
||||
delete: [id: number]
|
||||
'toggle-seen': [record: MediaRecord]
|
||||
'edit-cover': [record: MediaRecord]
|
||||
}>()
|
||||
|
||||
function needsCover(record: MediaRecord): boolean {
|
||||
return !record.cover_mime_type && (!record.cover_url || record.cover_url === 'N/A')
|
||||
}
|
||||
|
||||
function onRowClick(record: MediaRecord, event: MouseEvent) {
|
||||
const target = event.target as HTMLElement
|
||||
if (target.closest('button, a, input, select')) return
|
||||
@@ -47,10 +52,21 @@ const columns: ColumnDef<MediaRecord>[] = [
|
||||
accessorKey: 'cover_url',
|
||||
enableSorting: false,
|
||||
cell: ({ row }) =>
|
||||
h(CoverImage, {
|
||||
url: row.original.cover_url,
|
||||
size: 'table',
|
||||
}),
|
||||
h('div', { class: 'cover-cell' }, [
|
||||
h(CoverImage, {
|
||||
url: row.original.cover_url,
|
||||
id: row.original.id,
|
||||
hasCoverInDb: Boolean(row.original.cover_mime_type),
|
||||
size: 'table',
|
||||
}),
|
||||
needsCover(row.original)
|
||||
? h('button', {
|
||||
class: 'cover-edit-btn',
|
||||
title: 'Cover-URL eingeben',
|
||||
onClick: (e: Event) => { e.stopPropagation(); emit('edit-cover', row.original) },
|
||||
}, '＋')
|
||||
: null,
|
||||
]),
|
||||
},
|
||||
{
|
||||
id: 'object_type',
|
||||
@@ -362,6 +378,33 @@ td {
|
||||
padding-right: 0.35rem;
|
||||
}
|
||||
|
||||
.cover-cell {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cover-edit-btn {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.cover-cell:hover .cover-edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.th-type,
|
||||
.td-type {
|
||||
width: 88px;
|
||||
|
||||
@@ -17,8 +17,13 @@ const props = defineProps<{
|
||||
const emit = defineEmits<{
|
||||
delete: [id: number]
|
||||
'toggle-seen': [record: MediaRecord]
|
||||
'edit-cover': [record: MediaRecord]
|
||||
}>()
|
||||
|
||||
function needsCover(record: MediaRecord): boolean {
|
||||
return !record.cover_mime_type && (!record.cover_url || record.cover_url === 'N/A')
|
||||
}
|
||||
|
||||
function onCardClick(record: MediaRecord, event: MouseEvent) {
|
||||
const target = event.target as HTMLElement
|
||||
if (target.closest('button, a, input, select, dl')) return
|
||||
@@ -74,7 +79,15 @@ const detailFields: { key: keyof MediaRecord; label: string }[] = [
|
||||
@click="onCardClick(row, $event)"
|
||||
>
|
||||
<div class="card__hero">
|
||||
<CoverImage :url="row.cover_url" size="card" />
|
||||
<div class="cover-wrap">
|
||||
<CoverImage :url="row.cover_url" :id="row.id" :has-cover-in-db="Boolean(row.cover_mime_type)" size="card" />
|
||||
<button
|
||||
v-if="needsCover(row)"
|
||||
class="cover-edit-btn"
|
||||
title="Cover-URL eingeben"
|
||||
@click.stop="emit('edit-cover', row)"
|
||||
>＋</button>
|
||||
</div>
|
||||
<div class="card__hero-text">
|
||||
<header class="card__header">
|
||||
<div class="card__meta">
|
||||
@@ -153,6 +166,27 @@ const detailFields: { key: keyof MediaRecord; label: string }[] = [
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cover-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cover-edit-btn {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card__hero-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
@@ -4,6 +4,7 @@ export interface MediaRecord {
|
||||
file_name_new: string | null
|
||||
object_type: string | null
|
||||
cover_url: string | null
|
||||
cover_mime_type: string | null
|
||||
movie_rating: string | number | null
|
||||
movie_votes: number | null
|
||||
video_compression_format: string | null
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Cover über API-Proxy laden (Hotlink/Referrer-Probleme). */
|
||||
export function coverImageSrc(url: string | null | undefined): string | null {
|
||||
/** Cover-URL aus DB-URL bereinigen (für Fallback-Proxy). */
|
||||
function cleanCoverUrl(url: string | null | undefined): string | null {
|
||||
if (!url) return null
|
||||
const cleaned = url.trim().replace(/^["']+|["']+$/g, '')
|
||||
if (!cleaned) return null
|
||||
@@ -8,3 +8,18 @@ export function coverImageSrc(url: string | null | undefined): string | null {
|
||||
}
|
||||
return cleaned
|
||||
}
|
||||
|
||||
/**
|
||||
* Primäre Quelle: Bild aus DB (/api/records/{id}/cover).
|
||||
* Fallback-URL für den Fall dass kein Bild in DB gespeichert ist.
|
||||
*/
|
||||
export function coverImageSrc(
|
||||
url: string | null | undefined,
|
||||
id?: number | null,
|
||||
hasCoverInDb?: boolean | null,
|
||||
): string | null {
|
||||
if (id && hasCoverInDb) {
|
||||
return `/api/records/${id}/cover`
|
||||
}
|
||||
return cleanCoverUrl(url)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
# Einmal Passwort eingeben, alle Dateien übertragen, dann neu bauen.
|
||||
# Aufruf: bash scripts/deploy.sh
|
||||
|
||||
set -e
|
||||
|
||||
HOST="root@192.168.30.135"
|
||||
REMOTE="/opt/nginx_filebot"
|
||||
SOCKET="/tmp/ssh-filebot-$$"
|
||||
|
||||
echo "Verbinde mit $HOST …"
|
||||
ssh -MNf -o ControlPath="$SOCKET" -o ControlPersist=60 "$HOST"
|
||||
|
||||
scp_remote() {
|
||||
scp -o ControlPath="$SOCKET" "$1" "$HOST:$REMOTE/$2"
|
||||
}
|
||||
|
||||
echo "Übertrage Dateien …"
|
||||
scp_remote "api/main.py" "api/main.py"
|
||||
scp_remote "frontend/src/types.ts" "frontend/src/types.ts"
|
||||
scp_remote "frontend/src/api.ts" "frontend/src/api.ts"
|
||||
scp_remote "frontend/src/utils/coverUrl.ts" "frontend/src/utils/coverUrl.ts"
|
||||
scp_remote "frontend/src/components/CoverImage.vue" "frontend/src/components/CoverImage.vue"
|
||||
scp_remote "frontend/src/components/DataTable.vue" "frontend/src/components/DataTable.vue"
|
||||
scp_remote "frontend/src/components/MobileCards.vue" "frontend/src/components/MobileCards.vue"
|
||||
scp_remote "frontend/src/components/CoverUrlModal.vue" "frontend/src/components/CoverUrlModal.vue"
|
||||
scp_remote "frontend/src/App.vue" "frontend/src/App.vue"
|
||||
|
||||
echo "Baue Docker-Container neu …"
|
||||
ssh -o ControlPath="$SOCKET" "$HOST" "cd $REMOTE && docker compose up -d --build"
|
||||
|
||||
ssh -O exit -o ControlPath="$SOCKET" "$HOST" 2>/dev/null || true
|
||||
echo "Fertig."
|
||||
@@ -0,0 +1,4 @@
|
||||
-- Cover-Bild als Binary in der DB speichern
|
||||
ALTER TABLE n8n.movie_files
|
||||
ADD COLUMN IF NOT EXISTS cover_image BYTEA,
|
||||
ADD COLUMN IF NOT EXISTS cover_mime_type TEXT;
|
||||
Reference in New Issue
Block a user