update
This commit is contained in:
team3
@@ -1,6 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { abonnieren } from './live'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import MovieCard from './components/MovieCard.vue'
|
||||
import FilterSidebar from './components/FilterSidebar.vue'
|
||||
import AehnlichTab from './components/AehnlichTab.vue'
|
||||
@@ -14,507 +13,31 @@ import StreamTab from './components/StreamTab.vue'
|
||||
import WatchedTab from './components/WatchedTab.vue'
|
||||
import WheelTab from './components/WheelTab.vue'
|
||||
import SeriesCard from './components/SeriesCard.vue'
|
||||
import { useEinstellungen } from './composables/useEinstellungen'
|
||||
import { useMeins } from './composables/useMeins'
|
||||
import { matches, useKatalog } from './composables/useKatalog'
|
||||
import { REGLER, useFilter } from './composables/useFilter'
|
||||
import { useLangeListe } from './composables/useLangeListe'
|
||||
|
||||
const movies = ref([])
|
||||
const status = ref(null)
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const search = ref('')
|
||||
const sort = ref('random')
|
||||
// Suche und Ähnlichkeitsuche haben eine eigene Voreinstellung: TMDB liefert
|
||||
// dort eine Reihenfolge nach Verwandtschaft — dieselbe, die IMDb unter
|
||||
// "More like this" zeigt. Im Katalog gibt es die nicht.
|
||||
const suchSort = ref('relevanz')
|
||||
const { ansicht, ohneGesehene, activeTab, host } = useEinstellungen()
|
||||
|
||||
// Kompakt zeigt viele Karten nebeneinander, Details dafür mehr je Film
|
||||
const ANSICHT_SCHLUESSEL = 'filmabend_ansicht'
|
||||
const ansicht = ref(localStorage.getItem(ANSICHT_SCHLUESSEL) || 'kompakt')
|
||||
const {
|
||||
runde, ich, michSetzen,
|
||||
gesehen, gesehenIds, gesehenZahl, ladeGesehen,
|
||||
meinVorschlag, aufDemRad, ladeVorschlag,
|
||||
merkliste, ladeMerkliste,
|
||||
wuensche, ladeWuensche,
|
||||
} = useMeins({ host })
|
||||
|
||||
watch(ansicht, (wert) => localStorage.setItem(ANSICHT_SCHLUESSEL, wert))
|
||||
const {
|
||||
movies, loading, error, load,
|
||||
netflixMovies, canonMovies, canonGroups, netflixEntries, SORTS,
|
||||
} = useKatalog()
|
||||
|
||||
// Schon gelaufene Filme stehen beim Aussuchen nur im Weg — ab Werk raus.
|
||||
// Wer sie sehen will, schaltet um; das bleibt über den Neustart erhalten.
|
||||
const GESEHEN_SCHLUESSEL = 'filmabend_ohne_gesehene'
|
||||
const ohneGesehene = ref(localStorage.getItem(GESEHEN_SCHLUESSEL) !== 'aus')
|
||||
|
||||
watch(ohneGesehene, (an) => localStorage.setItem(GESEHEN_SCHLUESSEL, an ? 'an' : 'aus'))
|
||||
const selected = ref(null)
|
||||
|
||||
// Der Katalog liefert nur sechs Bildpfade je Film. Beim Öffnen holen wir
|
||||
// den vollen Datensatz nach — die Ansicht steht sofort, die restlichen
|
||||
// Bilder kommen gleich danach.
|
||||
//
|
||||
// Über /api/search, nicht über /api/movies: Empfehlungen führen auch zu
|
||||
// Filmen außerhalb des Katalogs. Dort greift der Rückgriff auf TMDB,
|
||||
// sonst fehlten Trailer, Bilder, Laufzeit und der IMDb-Knopf.
|
||||
async function filmOeffnen(movie) {
|
||||
selected.value = movie
|
||||
if (!movie?.id) return
|
||||
try {
|
||||
const resp = await fetch(`/api/search/${movie.id}`)
|
||||
if (resp.ok && selected.value?.id === movie.id) selected.value = await resp.json()
|
||||
} catch {
|
||||
/* dann eben mit den Listendaten */
|
||||
}
|
||||
}
|
||||
// Nach dem Neuladen soll derselbe Reiter offen sein
|
||||
const TAB_SCHLUESSEL = 'filmabend_tab'
|
||||
const TAB_IDS = [
|
||||
'netflix', 'canon', 'search', 'aehnlich', 'wheel', 'merkliste', 'watched',
|
||||
'wuensche', 'verwaltung', 'stream',
|
||||
]
|
||||
const gemerkterTab = localStorage.getItem(TAB_SCHLUESSEL)
|
||||
const activeTab = ref(TAB_IDS.includes(gemerkterTab) ? gemerkterTab : 'netflix')
|
||||
|
||||
watch(activeTab, (id) => localStorage.setItem(TAB_SCHLUESSEL, id))
|
||||
const include = ref([])
|
||||
const exclude = ref([])
|
||||
|
||||
const netflixMovies = computed(() => movies.value.filter((m) => m.on_netflix))
|
||||
const canonMovies = computed(() =>
|
||||
movies.value.filter((m) => m.canon_group !== null)
|
||||
)
|
||||
|
||||
// Die Skalen richten sich nach dem ungefilterten Bestand des Reiters —
|
||||
// sonst wandern die Enden bei jeder Auswahl
|
||||
const REGLER = [
|
||||
{ key: 'vote_count', label: 'Bewertungen', feld: 'vote_count', step: 1, gestaucht: true },
|
||||
{ key: 'runtime', label: 'Dauer', feld: 'runtime', step: 1, einheit: ' Min.' },
|
||||
{ key: 'year', label: 'Jahr', feld: 'year', step: 1, roh: true },
|
||||
{ key: 'vote_average', label: 'Bewertung', feld: 'vote_average', step: 0.1, nachkomma: 1 },
|
||||
]
|
||||
|
||||
// Bei der Suche steht kein Katalog dahinter, aus dem sich Grenzen ableiten
|
||||
// ließen — TMDB reicht von den Anfängen bis heute
|
||||
const SUCH_GRENZEN = {
|
||||
vote_count: { min: 50, max: 50000 },
|
||||
runtime: { min: 0, max: 240 },
|
||||
year: { min: 1900, max: new Date().getFullYear() + 1 },
|
||||
vote_average: { min: 0, max: 10 },
|
||||
}
|
||||
|
||||
// Die 19 Genres, die TMDB kennt
|
||||
const SUCH_GENRES = [
|
||||
'Abenteuer', 'Action', 'Animation', 'Dokumentarfilm', 'Drama', 'Familie',
|
||||
'Fantasy', 'Historie', 'Horror', 'Komödie', 'Krimi', 'Kriegsfilm',
|
||||
'Liebesfilm', 'Musik', 'Mystery', 'Science Fiction', 'TV-Film', 'Thriller',
|
||||
'Western',
|
||||
].map((genre) => ({ genre, count: null }))
|
||||
|
||||
const grenzen = computed(() => {
|
||||
if (activeTab.value === 'search' || activeTab.value === 'aehnlich') return SUCH_GRENZEN
|
||||
const pool = activeTab.value === 'netflix' ? netflixMovies.value : canonMovies.value
|
||||
const out = {}
|
||||
for (const regler of REGLER) {
|
||||
const werte = pool.map((m) => m[regler.feld]).filter((v) => v != null)
|
||||
const min = werte.length ? Math.min(...werte) : 0
|
||||
const max = werte.length ? Math.max(...werte) : 0
|
||||
out[regler.key] = {
|
||||
min: regler.step < 1 ? Math.floor(min * 10) / 10 : Math.floor(min),
|
||||
max: regler.step < 1 ? Math.ceil(max * 10) / 10 : Math.ceil(max),
|
||||
}
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
const ranges = ref({})
|
||||
|
||||
// Beim Reiterwechsel passen die alten Werte nicht mehr zur neuen Skala
|
||||
watch(
|
||||
grenzen,
|
||||
(neu) => {
|
||||
ranges.value = Object.fromEntries(
|
||||
Object.entries(neu).map(([k, v]) => [k, [v.min, v.max]])
|
||||
)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function resetRanges() {
|
||||
ranges.value = Object.fromEntries(
|
||||
Object.entries(grenzen.value).map(([k, v]) => [k, [v.min, v.max]])
|
||||
)
|
||||
}
|
||||
|
||||
function imBereich(movie) {
|
||||
for (const regler of REGLER) {
|
||||
const spanne = ranges.value[regler.key]
|
||||
const grenze = grenzen.value[regler.key]
|
||||
if (!spanne) continue
|
||||
// Ein unbegrenzter Regler darf Filme ohne Wert nicht aussortieren
|
||||
if (spanne[0] === grenze.min && spanne[1] === grenze.max) continue
|
||||
const wert = movie[regler.feld]
|
||||
if (wert == null || wert < spanne[0] || wert > spanne[1]) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function toggleGenre(kind, genre) {
|
||||
const liste = kind === 'include' ? include : exclude
|
||||
const andere = kind === 'include' ? exclude : include
|
||||
const at = liste.value.indexOf(genre)
|
||||
if (at === -1) {
|
||||
liste.value = [...liste.value, genre]
|
||||
// Ein Genre kann nicht gleichzeitig gezeigt und ausgeblendet werden
|
||||
andere.value = andere.value.filter((g) => g !== genre)
|
||||
} else {
|
||||
liste.value = liste.value.filter((g) => g !== genre)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAll(kind) {
|
||||
const liste = kind === 'include' ? include : exclude
|
||||
const andere = kind === 'include' ? exclude : include
|
||||
const alle = genreOptions.value.map((o) => o.genre)
|
||||
// Sind schon alle drin, ist der zweite Klick ein Leeren
|
||||
if (liste.value.length === alle.length) {
|
||||
liste.value = []
|
||||
} else {
|
||||
liste.value = alle
|
||||
andere.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function resetGenres() {
|
||||
include.value = []
|
||||
exclude.value = []
|
||||
resetRanges()
|
||||
}
|
||||
|
||||
// Nur Genres anbieten, die im offenen Reiter auch Treffer haben
|
||||
const genreOptions = computed(() => {
|
||||
if (activeTab.value === 'search' || activeTab.value === 'aehnlich') return SUCH_GENRES
|
||||
const pool = activeTab.value === 'netflix' ? netflixMovies.value : canonMovies.value
|
||||
const counts = new Map()
|
||||
for (const movie of pool) {
|
||||
for (const genre of movie.genres || []) counts.set(genre, (counts.get(genre) || 0) + 1)
|
||||
}
|
||||
// Alphabetisch, damit man ein Genre an derselben Stelle wiederfindet.
|
||||
// Nach Häufigkeit sortiert wanderten die Badges bei jedem Reiterwechsel.
|
||||
return [...counts.entries()]
|
||||
.sort((a, b) => a[0].localeCompare(b[0], 'de'))
|
||||
.map(([genre, count]) => ({ genre, count }))
|
||||
})
|
||||
|
||||
// Reihen bleiben zusammen, damit eine Karte durch ihre Teile blättert.
|
||||
// Grundlage ist TMDBs Collection — Herr der Ringe belegt sonst drei Kacheln.
|
||||
function groupBy(movies, schluessel) {
|
||||
const byKey = new Map()
|
||||
const einzeln = []
|
||||
for (const movie of movies) {
|
||||
const key = schluessel(movie)
|
||||
if (key === null || key === undefined) {
|
||||
einzeln.push(movie)
|
||||
continue
|
||||
}
|
||||
if (!byKey.has(key)) byKey.set(key, [])
|
||||
byKey.get(key).push(movie)
|
||||
}
|
||||
|
||||
const gruppen = []
|
||||
for (const [key, parts] of byKey) {
|
||||
// Eine Reihe mit nur einem verfügbaren Teil ist keine Reihe
|
||||
if (parts.length === 1) einzeln.push(parts[0])
|
||||
else gruppen.push({ group: key, parts })
|
||||
}
|
||||
return { gruppen, einzeln }
|
||||
}
|
||||
|
||||
function sortiereReihe(parts) {
|
||||
const sorted = [...parts].sort(
|
||||
(a, b) =>
|
||||
(a.release_date || '').localeCompare(b.release_date || '') ||
|
||||
(a.canon_pos ?? 0) - (b.canon_pos ?? 0)
|
||||
)
|
||||
// Die Karte startet beim stärksten Teil, danach sortiert auch die
|
||||
// Kachelreihenfolge — sonst entscheidet ein schwacher Auftakt
|
||||
let best = 0
|
||||
sorted.forEach((part, i) => {
|
||||
if (score(part) > score(sorted[best])) best = i
|
||||
})
|
||||
return { parts: sorted, best }
|
||||
}
|
||||
|
||||
// Ein Kanon-Eintrag ist ein Film oder eine ganze Reihe.
|
||||
// Die Vorlage gruppiert das Conjuring-Universum nach Sub-Reihen statt nach
|
||||
// Jahr — hier zählt das Erscheinungsjahr.
|
||||
const canonGroups = computed(() => {
|
||||
const byGroup = new Map()
|
||||
for (const movie of canonMovies.value) {
|
||||
if (!byGroup.has(movie.canon_group)) byGroup.set(movie.canon_group, [])
|
||||
byGroup.get(movie.canon_group).push(movie)
|
||||
}
|
||||
return [...byGroup.entries()]
|
||||
.sort((a, b) => a[0] - b[0])
|
||||
.map(([group, parts]) => ({ group, ...sortiereReihe(parts) }))
|
||||
})
|
||||
|
||||
// Im Netflix-Reiter bilden TMDBs Collections die Reihen
|
||||
const netflixEntries = computed(() => {
|
||||
const { gruppen, einzeln } = groupBy(netflixMovies.value, (m) => m.collection_id)
|
||||
return [
|
||||
...gruppen.map((g) => ({ group: 'c' + g.group, ...sortiereReihe(g.parts) })),
|
||||
...einzeln.map((m) => ({ group: 'm' + m.id, parts: [m], best: 0 })),
|
||||
]
|
||||
})
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ id: 'netflix', label: 'Netflix', count: netflixMovies.value.filter(nichtGesehen).length },
|
||||
{
|
||||
id: 'canon',
|
||||
label: 'Horror-Kanon',
|
||||
count: canonGroups.value.filter((g) => g.parts.some(nichtGesehen)).length,
|
||||
},
|
||||
{ id: 'search', label: 'Suche', count: null },
|
||||
{ id: 'aehnlich', label: 'Ähnlichkeitsuche', count: null },
|
||||
...(host.value
|
||||
? []
|
||||
: [{ id: 'merkliste', label: 'Sammlungen', count: null }]),
|
||||
{ id: 'wheel', label: 'Rad', count: null },
|
||||
{ id: 'stream', label: 'Stream', count: null },
|
||||
{ id: 'watched', label: 'Gesehen', count: gesehenZahl.value },
|
||||
{ id: 'wuensche', label: 'Wünsche', count: wuensche.value.filter((w) => !w.done_at).length },
|
||||
...(host.value ? [{ id: 'verwaltung', label: 'Verwaltung', count: null }] : []),
|
||||
])
|
||||
|
||||
// Was die Leiste eingestellt hat — der Suche-Reiter schickt es an TMDB
|
||||
const suchFilter = computed(() => {
|
||||
const spanne = (key) => ranges.value[key] || []
|
||||
return {
|
||||
sort: suchSort.value,
|
||||
include: include.value,
|
||||
exclude: exclude.value,
|
||||
stimmen: spanne('vote_count'),
|
||||
dauer: spanne('runtime'),
|
||||
jahr: spanne('year'),
|
||||
note: spanne('vote_average'),
|
||||
grenzen: grenzen.value,
|
||||
}
|
||||
})
|
||||
|
||||
// Aus der Filmansicht heraus zur Ähnlichkeitsuche springen
|
||||
const aehnlichStart = ref(null)
|
||||
|
||||
function zurAehnlichkeitsuche(movie) {
|
||||
aehnlichStart.value = movie
|
||||
selected.value = null
|
||||
activeTab.value = 'aehnlich'
|
||||
}
|
||||
|
||||
const rad = ref(null)
|
||||
|
||||
// Bei 2500 Karten kommt man sonst nicht mehr nach oben
|
||||
const obenKnopf = ref(false)
|
||||
|
||||
function beimScrollen() {
|
||||
obenKnopf.value = window.scrollY > 800
|
||||
}
|
||||
|
||||
// Eigene Animation statt behavior: 'smooth'. Das rechnet mit fester
|
||||
// Geschwindigkeit und bräuchte über 300.000 Pixel Seitenhöhe Minuten.
|
||||
const OBEN_DAUER = 450
|
||||
|
||||
function nachOben() {
|
||||
const start = window.scrollY
|
||||
const beginn = performance.now()
|
||||
|
||||
function schritt(jetzt) {
|
||||
const t = Math.min(1, (jetzt - beginn) / OBEN_DAUER)
|
||||
// Sanft an- und auslaufend
|
||||
const p = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
|
||||
window.scrollTo(0, start * (1 - p))
|
||||
if (t < 1) requestAnimationFrame(schritt)
|
||||
}
|
||||
|
||||
requestAnimationFrame(schritt)
|
||||
}
|
||||
|
||||
// Die movie_ids der geschauten Filme — die Detailansicht zeigt damit an,
|
||||
// ob der Film schon lief
|
||||
const gesehen = ref([])
|
||||
|
||||
async function ladeGesehen() {
|
||||
try {
|
||||
const resp = await fetch('/api/watched')
|
||||
if (resp.ok) gesehen.value = await resp.json()
|
||||
} catch {
|
||||
/* dann eben ohne */
|
||||
}
|
||||
}
|
||||
|
||||
// Für die Karten: nur die Kennungen, als Menge zum schnellen Nachschlagen
|
||||
const gesehenIds = computed(
|
||||
() => new Set(gesehen.value.map((e) => e.movie_id))
|
||||
)
|
||||
|
||||
// Ausgeblendete Filme zählen für Gäste nicht mit
|
||||
const gesehenZahl = computed(
|
||||
() => gesehen.value.filter((e) => host.value || !e.hidden).length
|
||||
)
|
||||
|
||||
// Wer den Abend leitet, darf drehen und die Runde leeren. Kein Login —
|
||||
// die Tastenkombination reicht, die Seite steht ohnehin nur Freunden offen.
|
||||
// Die Runde: der Host pflegt die Namen, alle anderen wählen sich einen aus.
|
||||
// Den Namen setzt danach der Server an Vorschläge und Wertungen.
|
||||
const runde = ref([])
|
||||
const ich = ref(null)
|
||||
|
||||
async function michSetzen(id) {
|
||||
await fetch('/api/users/waehlen', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ user_id: id ?? null }),
|
||||
})
|
||||
// Sammlung, Vorschlag, Wertungen und Wünsche gehören zum Namen. Ohne
|
||||
// Nachladen zeigt die Seite weiter die des vorigen Benutzers.
|
||||
await ladeRunde()
|
||||
ladeVorschlag()
|
||||
ladeMerkliste()
|
||||
ladeGesehen()
|
||||
ladeWuensche()
|
||||
}
|
||||
|
||||
async function ladeRunde() {
|
||||
try {
|
||||
const resp = await fetch('/api/users')
|
||||
if (!resp.ok) return
|
||||
const daten = await resp.json()
|
||||
runde.value = daten.items
|
||||
ich.value = daten.mine
|
||||
} catch {
|
||||
/* dann eben ohne */
|
||||
}
|
||||
}
|
||||
|
||||
const HOST_SCHLUESSEL = 'filmabend_host'
|
||||
const host = ref(localStorage.getItem(HOST_SCHLUESSEL) === '1')
|
||||
|
||||
// Die Verwaltung verschwindet mit dem Hostmodus. Bleibt sie offen, sieht
|
||||
// ein Gast sie weiter, ohne dass ein Reiter markiert wäre.
|
||||
watch(host, (an) => {
|
||||
// Verwaltung sieht nur der Host, Vorschläge nur die Gäste
|
||||
const weg = an ? 'merkliste' : 'verwaltung'
|
||||
if (activeTab.value === weg) activeTab.value = 'netflix'
|
||||
})
|
||||
|
||||
function tastatur(e) {
|
||||
// e.code statt e.key: mit drei Zusatztasten liefert das Layout sonst
|
||||
// je nach System ein anderes Zeichen
|
||||
if (e.ctrlKey && e.shiftKey && e.altKey && e.code === 'KeyS') {
|
||||
e.preventDefault()
|
||||
host.value = !host.value
|
||||
localStorage.setItem(HOST_SCHLUESSEL, host.value ? '1' : '0')
|
||||
}
|
||||
}
|
||||
|
||||
// Wer schon vorgeschlagen hat, soll das in der Detailansicht sehen
|
||||
const meinVorschlag = ref(null)
|
||||
|
||||
// Alle Filme auf dem Rad, damit die Karten es zeigen können
|
||||
const aufDemRad = ref([])
|
||||
|
||||
// Die eigene Merkliste — was man selbst sehen möchte, unabhängig vom Rad
|
||||
const merkliste = ref([])
|
||||
|
||||
// Was der Seite noch fehlt
|
||||
const wuensche = ref([])
|
||||
|
||||
async function ladeWuensche() {
|
||||
try {
|
||||
const resp = await fetch('/api/features')
|
||||
if (resp.ok) wuensche.value = await resp.json()
|
||||
} catch {
|
||||
/* dann eben ohne */
|
||||
}
|
||||
}
|
||||
|
||||
async function ladeMerkliste() {
|
||||
try {
|
||||
const resp = await fetch('/api/wishlist')
|
||||
if (resp.ok) merkliste.value = await resp.json()
|
||||
} catch {
|
||||
/* dann eben ohne */
|
||||
}
|
||||
}
|
||||
|
||||
async function ladeVorschlag() {
|
||||
try {
|
||||
const resp = await fetch('/api/suggestions')
|
||||
if (!resp.ok) return
|
||||
const daten = await resp.json()
|
||||
meinVorschlag.value = daten.items.find((i) => i.id === daten.mine) || null
|
||||
aufDemRad.value = daten.items.map((i) => i.movie_id)
|
||||
} catch {
|
||||
meinVorschlag.value = null
|
||||
aufDemRad.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function nachVorschlag() {
|
||||
ladeVorschlag()
|
||||
rad.value?.neu()
|
||||
}
|
||||
|
||||
// Gewichtete Note: ohne sie stehen Filme mit 10.0 aus zwei Stimmen ganz oben.
|
||||
// Je weniger Stimmen, desto stärker zieht der Katalogschnitt die Note zu sich.
|
||||
const MIN_VOTES = 150
|
||||
|
||||
const average = computed(() => {
|
||||
const rated = movies.value.filter((m) => m.vote_count)
|
||||
if (!rated.length) return 0
|
||||
return rated.reduce((sum, m) => sum + m.vote_average, 0) / rated.length
|
||||
})
|
||||
|
||||
function score(movie) {
|
||||
const votes = movie.vote_count || 0
|
||||
return (
|
||||
(votes / (votes + MIN_VOTES)) * (movie.vote_average || 0) +
|
||||
(MIN_VOTES / (votes + MIN_VOTES)) * average.value
|
||||
)
|
||||
}
|
||||
|
||||
// Ein fester Wurf je Film. Mit Math.random() im Vergleich springen die
|
||||
// Karten bei jedem Filtern neu durcheinander.
|
||||
const wuerfel = new Map()
|
||||
|
||||
function zufall(movie) {
|
||||
if (!wuerfel.has(movie.id)) wuerfel.set(movie.id, Math.random())
|
||||
return wuerfel.get(movie.id)
|
||||
}
|
||||
|
||||
const SORTS = {
|
||||
random: (a, b) => zufall(a) - zufall(b),
|
||||
rating: (a, b) => score(b) - score(a),
|
||||
newest: (a, b) => (b.year || 0) - (a.year || 0),
|
||||
oldest: (a, b) => (a.year || 9999) - (b.year || 9999),
|
||||
title: (a, b) => a.title.localeCompare(b.title, 'de'),
|
||||
}
|
||||
|
||||
function matches(movie, term) {
|
||||
return (
|
||||
movie.title.toLowerCase().includes(term) ||
|
||||
(movie.original_title || '').toLowerCase().includes(term)
|
||||
)
|
||||
}
|
||||
|
||||
// Eingeschlossene Genres wirken als ODER: wer Horror und Action wählt, will
|
||||
// beides sehen. Ein ausgeschlossenes Genre sticht das immer — ein Horrorfilm
|
||||
// mit Komödie fliegt raus, wenn Komödie ausgeblendet ist.
|
||||
function nichtGesehen(movie) {
|
||||
return !ohneGesehene.value || !gesehenIds.value.has(movie.id)
|
||||
}
|
||||
|
||||
function passt(movie) {
|
||||
return nichtGesehen(movie) && hasGenre(movie) && imBereich(movie)
|
||||
}
|
||||
|
||||
function hasGenre(movie) {
|
||||
const genres = movie.genres || []
|
||||
if (exclude.value.length && genres.some((g) => exclude.value.includes(g))) {
|
||||
return false
|
||||
}
|
||||
return !include.value.length || genres.some((g) => include.value.includes(g))
|
||||
}
|
||||
const {
|
||||
search, sort, suchSort, include, exclude, grenzen, ranges, genreOptions,
|
||||
toggleGenre, toggleAll, resetGenres, nichtGesehen, passt, suchFilter,
|
||||
} = useFilter({ activeTab, netflixMovies, canonMovies, gesehenIds, ohneGesehene })
|
||||
|
||||
// Eine Reihe erscheint, sobald ein Teil passt — sortiert wird sie über
|
||||
// ihren stärksten Teil
|
||||
@@ -538,55 +61,58 @@ const visibleCanon = computed(() =>
|
||||
filterGruppen(canonGroups.value, search.value.trim().toLowerCase())
|
||||
)
|
||||
|
||||
// Gefiltert wird über den ganzen Katalog, gerendert nur der Anfang davon.
|
||||
// Alle 2554 Karten auf einmal sind in der Detailansicht über zehntausend
|
||||
// Bilder — der Browser meldet dann "Seite reagiert nicht".
|
||||
const STAPEL = 100
|
||||
const gezeigt = ref(STAPEL)
|
||||
|
||||
const aktuelleListe = computed(() =>
|
||||
activeTab.value === 'netflix' ? visible.value : visibleCanon.value
|
||||
)
|
||||
|
||||
const sichtbar = computed(() => aktuelleListe.value.slice(0, gezeigt.value))
|
||||
|
||||
// Jede neue Suche, jeder Filter und jeder Reiterwechsel fängt oben an
|
||||
watch([aktuelleListe, ansicht], () => {
|
||||
gezeigt.value = STAPEL
|
||||
const { gezeigt, sichtbar, nachschub, obenKnopf, nachOben } = useLangeListe({
|
||||
liste: aktuelleListe,
|
||||
ansicht,
|
||||
})
|
||||
|
||||
async function mehrLaden() {
|
||||
if (gezeigt.value >= aktuelleListe.value.length) return
|
||||
gezeigt.value += STAPEL
|
||||
// Der Beobachter meldet sich nur beim Wechsel sichtbar/unsichtbar. Bleibt
|
||||
// der Fuß nach dem Nachladen im Blick — großer Bildschirm, kurze Liste —,
|
||||
// käme sonst nie ein zweiter Stapel.
|
||||
await nextTick()
|
||||
const el = nachschub.value
|
||||
if (el && el.getBoundingClientRect().top < window.innerHeight + 600) mehrLaden()
|
||||
}
|
||||
|
||||
// Der Fuß der Liste meldet sich, sobald er in Sichtweite kommt. Ein
|
||||
// Scroll-Handler müsste bei jedem Pixel rechnen, das hier nicht.
|
||||
// Gleich hier angelegt, nicht in onMounted: die Vorlage setzt die Referenz
|
||||
// schon beim ersten Zeichnen, da muss der Beobachter bereits stehen.
|
||||
const nachschub = ref(null)
|
||||
const beobachter = new IntersectionObserver(
|
||||
(eintraege) => {
|
||||
if (eintraege.some((e) => e.isIntersecting)) mehrLaden()
|
||||
const tabs = computed(() => [
|
||||
{ id: 'netflix', label: 'Netflix', count: netflixMovies.value.filter(nichtGesehen).length },
|
||||
{
|
||||
id: 'canon',
|
||||
label: 'Horror-Kanon',
|
||||
count: canonGroups.value.filter((g) => g.parts.some(nichtGesehen)).length,
|
||||
},
|
||||
// Vorlauf, damit der Nachschub schon da ist, bevor die Liste endet
|
||||
{ rootMargin: '600px' }
|
||||
{ id: 'search', label: 'Suche', count: null },
|
||||
{ id: 'aehnlich', label: 'Ähnlichkeitsuche', count: null },
|
||||
...(host.value ? [] : [{ id: 'merkliste', label: 'Sammlungen', count: null }]),
|
||||
{ id: 'wheel', label: 'Rad', count: null },
|
||||
{ id: 'stream', label: 'Stream', count: null },
|
||||
{ id: 'watched', label: 'Gesehen', count: gesehenZahl.value },
|
||||
{ id: 'wuensche', label: 'Wünsche', count: wuensche.value.filter((w) => !w.done_at).length },
|
||||
...(host.value ? [{ id: 'verwaltung', label: 'Verwaltung', count: null }] : []),
|
||||
])
|
||||
|
||||
// Auf dem Handy passt die Filterleiste nicht neben die Karten — dort
|
||||
// klappt sie über einen Knopf auf
|
||||
const filterOffen = ref(false)
|
||||
const mitFilter = computed(() =>
|
||||
['netflix', 'canon', 'search', 'aehnlich'].includes(activeTab.value)
|
||||
)
|
||||
|
||||
onUnmounted(() => beobachter.disconnect())
|
||||
const selected = ref(null)
|
||||
|
||||
// Der Fuß verschwindet und kommt wieder, je nach Filter — also bei jedem
|
||||
// Wechsel neu anmelden
|
||||
watch(nachschub, (el, vorher) => {
|
||||
if (vorher) beobachter.unobserve(vorher)
|
||||
if (el) beobachter.observe(el)
|
||||
})
|
||||
// Der Katalog liefert nur sechs Bildpfade je Film. Beim Öffnen holen wir
|
||||
// den vollen Datensatz nach — die Ansicht steht sofort, die restlichen
|
||||
// Bilder kommen gleich danach.
|
||||
//
|
||||
// Über /api/search, nicht über /api/movies: Empfehlungen führen auch zu
|
||||
// Filmen außerhalb des Katalogs. Dort greift der Rückgriff auf TMDB,
|
||||
// sonst fehlten Trailer, Bilder, Laufzeit und der IMDb-Knopf.
|
||||
async function filmOeffnen(movie) {
|
||||
selected.value = movie
|
||||
if (!movie?.id) return
|
||||
try {
|
||||
const resp = await fetch(`/api/search/${movie.id}`)
|
||||
if (resp.ok && selected.value?.id === movie.id) selected.value = await resp.json()
|
||||
} catch {
|
||||
/* dann eben mit den Listendaten */
|
||||
}
|
||||
}
|
||||
|
||||
// Die Reihe zum geöffneten Film. Im Kanon ist das die Gruppe der Vorlage,
|
||||
// sonst TMDBs Collection — dort aber nur, was auch auf Netflix liegt.
|
||||
@@ -607,60 +133,27 @@ const series = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
const currentCount = computed(() =>
|
||||
activeTab.value === 'netflix' ? visible.value.length : visibleCanon.value.length
|
||||
)
|
||||
// Aus der Filmansicht heraus zur Ähnlichkeitsuche springen
|
||||
const aehnlichStart = ref(null)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const [moviesRes, statusRes] = await Promise.all([
|
||||
fetch('/api/movies'),
|
||||
fetch('/api/status'),
|
||||
])
|
||||
if (!moviesRes.ok) throw new Error('Filme konnten nicht geladen werden')
|
||||
movies.value = await moviesRes.json()
|
||||
status.value = await statusRes.json()
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
function zurAehnlichkeitsuche(movie) {
|
||||
aehnlichStart.value = movie
|
||||
selected.value = null
|
||||
activeTab.value = 'aehnlich'
|
||||
}
|
||||
|
||||
let abbestellen = null
|
||||
const rad = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
function nachVorschlag() {
|
||||
ladeVorschlag()
|
||||
ladeGesehen()
|
||||
ladeRunde()
|
||||
ladeMerkliste()
|
||||
ladeWuensche()
|
||||
// Schlägt jemand anders etwas vor, sollen es auch die Karten zeigen
|
||||
abbestellen = abonnieren((nachricht) => {
|
||||
if (nachricht.type === 'suggestions' || nachricht.type === 'reset') ladeVorschlag()
|
||||
else if (nachricht.type === 'users') ladeRunde()
|
||||
else if (nachricht.type === 'features') ladeWuensche()
|
||||
})
|
||||
window.addEventListener('keydown', tastatur)
|
||||
window.addEventListener('scroll', beimScrollen, { passive: true })
|
||||
})
|
||||
rad.value?.neu()
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', tastatur)
|
||||
window.removeEventListener('scroll', beimScrollen)
|
||||
abbestellen?.()
|
||||
})
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page" :class="{
|
||||
breit: [
|
||||
'wheel', 'stream', 'watched', 'merkliste', 'wuensche', 'verwaltung',
|
||||
].includes(activeTab),
|
||||
}">
|
||||
<div class="page" :class="{ breit: !mitFilter }">
|
||||
<nav class="tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
@@ -672,6 +165,15 @@ onUnmounted(() => {
|
||||
{{ tab.label }}
|
||||
<span v-if="tab.count !== null" class="count">{{ tab.count }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="mitFilter"
|
||||
type="button"
|
||||
class="filter-knopf"
|
||||
:class="{ an: filterOffen }"
|
||||
@click="filterOffen = !filterOffen"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
<NamensWahl v-if="!host" :items="runde" :mine="ich" @waehlen="michSetzen" />
|
||||
<span v-else class="host">Host</span>
|
||||
</nav>
|
||||
@@ -687,8 +189,8 @@ onUnmounted(() => {
|
||||
/>
|
||||
|
||||
<AehnlichTab
|
||||
:gesehen-ids="gesehenIds"
|
||||
v-else
|
||||
:gesehen-ids="gesehenIds"
|
||||
:filter="suchFilter"
|
||||
:ansicht="ansicht"
|
||||
:start="aehnlichStart"
|
||||
@@ -701,6 +203,7 @@ onUnmounted(() => {
|
||||
v-model:ansicht="ansicht"
|
||||
v-model:ohne-gesehene="ohneGesehene"
|
||||
v-model:ranges="ranges"
|
||||
:class="{ offen: filterOffen }"
|
||||
:regler="REGLER"
|
||||
:grenzen="grenzen"
|
||||
:options="genreOptions"
|
||||
@@ -755,40 +258,40 @@ onUnmounted(() => {
|
||||
|
||||
<div v-else class="layout">
|
||||
<div class="results">
|
||||
<p v-if="loading" class="note">Lade Katalog…</p>
|
||||
<p v-else-if="error" class="note error">{{ error }}</p>
|
||||
<p v-else-if="!movies.length" class="note">
|
||||
Noch keine Filme in der Datenbank. Der erste Sync läuft eventuell noch.
|
||||
</p>
|
||||
<p v-else-if="!currentCount" class="note">
|
||||
Nichts gefunden{{ search ? ` für „${search}“` : '' }}.
|
||||
</p>
|
||||
<p v-if="loading" class="note">Lade Katalog…</p>
|
||||
<p v-else-if="error" class="note error">{{ error }}</p>
|
||||
<p v-else-if="!movies.length" class="note">
|
||||
Noch keine Filme in der Datenbank. Der erste Sync läuft eventuell noch.
|
||||
</p>
|
||||
<p v-else-if="!aktuelleListe.length" class="note">
|
||||
Nichts gefunden{{ search ? ` für „${search}“` : '' }}.
|
||||
</p>
|
||||
|
||||
<div class="grid" :class="ansicht">
|
||||
<template v-for="entry in sichtbar" :key="entry.group">
|
||||
<MovieCard
|
||||
v-if="entry.parts.length === 1"
|
||||
:movie="entry.parts[0]"
|
||||
:gesehen="gesehenIds.has(entry.parts[0].id)"
|
||||
:auf-dem-rad="aufDemRad.includes(entry.parts[0].id)"
|
||||
:ansicht="ansicht"
|
||||
@open="filmOeffnen"
|
||||
/>
|
||||
<SeriesCard
|
||||
v-else
|
||||
:parts="entry.parts"
|
||||
:gesehen-ids="gesehenIds"
|
||||
:start="entry.best"
|
||||
:auf-dem-rad="aufDemRad"
|
||||
:ansicht="ansicht"
|
||||
@open="filmOeffnen"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="grid" :class="ansicht">
|
||||
<template v-for="entry in sichtbar" :key="entry.group">
|
||||
<MovieCard
|
||||
v-if="entry.parts.length === 1"
|
||||
:movie="entry.parts[0]"
|
||||
:gesehen="gesehenIds.has(entry.parts[0].id)"
|
||||
:auf-dem-rad="aufDemRad.includes(entry.parts[0].id)"
|
||||
:ansicht="ansicht"
|
||||
@open="filmOeffnen"
|
||||
/>
|
||||
<SeriesCard
|
||||
v-else
|
||||
:parts="entry.parts"
|
||||
:gesehen-ids="gesehenIds"
|
||||
:start="entry.best"
|
||||
:auf-dem-rad="aufDemRad"
|
||||
:ansicht="ansicht"
|
||||
@open="filmOeffnen"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="gezeigt < aktuelleListe.length" ref="nachschub" class="nachschub">
|
||||
Lädt weitere Filme …
|
||||
</div>
|
||||
<div v-if="gezeigt < aktuelleListe.length" ref="nachschub" class="nachschub">
|
||||
Lädt weitere Filme …
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FilterSidebar
|
||||
@@ -798,6 +301,7 @@ onUnmounted(() => {
|
||||
v-model:ansicht="ansicht"
|
||||
v-model:ohne-gesehene="ohneGesehene"
|
||||
v-model:ranges="ranges"
|
||||
:class="{ offen: filterOffen }"
|
||||
:regler="REGLER"
|
||||
:grenzen="grenzen"
|
||||
:options="genreOptions"
|
||||
@@ -817,18 +321,17 @@ onUnmounted(() => {
|
||||
v-if="selected"
|
||||
:movie="selected"
|
||||
:series="series"
|
||||
@close="selected = null"
|
||||
@open="filmOeffnen"
|
||||
:mein-vorschlag="meinVorschlag"
|
||||
:host="host"
|
||||
:gesehen="gesehen.some((e) => e.movie_id === selected.id)"
|
||||
:gemerkt="merkliste.some((e) => e.mine && e.movie_id === selected.id)"
|
||||
@close="selected = null"
|
||||
@open="filmOeffnen"
|
||||
@gemerkt="ladeMerkliste"
|
||||
@suggested="nachVorschlag"
|
||||
@watched="ladeGesehen"
|
||||
@aehnlich="zurAehnlichkeitsuche"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -839,7 +342,7 @@ onUnmounted(() => {
|
||||
padding-right: calc(var(--sidebar) + 1.25rem);
|
||||
}
|
||||
|
||||
/* Such- und Rad-Reiter haben keine Filterleiste */
|
||||
/* Reiter ohne Filterleiste */
|
||||
.page.breit {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
@@ -886,6 +389,7 @@ onUnmounted(() => {
|
||||
padding: 0.8rem 1rem 0.6rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
@@ -898,6 +402,12 @@ onUnmounted(() => {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Den Filterknopf gibt es nur auf schmalen Schirmen — mit .tabs davor,
|
||||
sonst gewinnt die Regel für alle Reiterknöpfe */
|
||||
.tabs .filter-knopf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.host {
|
||||
align-self: center;
|
||||
margin-left: 0.4rem;
|
||||
@@ -938,26 +448,6 @@ onUnmounted(() => {
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.page {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
/* Zu schmal für eine feste Leiste — die Filter wandern über die Kacheln */
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout > :last-child {
|
||||
position: static;
|
||||
order: -1;
|
||||
width: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.nachschub {
|
||||
padding: 2rem 0;
|
||||
color: var(--muted);
|
||||
@@ -990,4 +480,82 @@ onUnmounted(() => {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Schmale Schirme ─────────────────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.page {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.nach-oben {
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Zu schmal für eine feste Leiste — die Filter klappen über den Karten auf */
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout > :last-child {
|
||||
display: none;
|
||||
position: static;
|
||||
order: -1;
|
||||
width: auto;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.layout > :last-child.offen {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabs .filter-knopf {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tabs .filter-knopf.an {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Die Namenswahl rückt neben den Filterknopf */
|
||||
.filter-knopf + * {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page {
|
||||
padding: 1rem 0.75rem 2.5rem;
|
||||
}
|
||||
|
||||
/* Die Reiter passen nicht in eine Zeile — sie scrollen seitlich */
|
||||
.tabs {
|
||||
gap: 0;
|
||||
margin: -1rem -0.75rem 1rem;
|
||||
padding: 0 0.75rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
padding: 0.7rem 0.6rem 0.5rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.grid.details {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user