From 1982cfa7b983febcb928487786eee554a7b24e4d Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 6 Jul 2026 00:15:31 +0200
Subject: [PATCH] feat(plex): sort direction, genre any/all, multi-person
 filters; fix back-nav + player stop

UAT follow-ups on the Plex filter epic:
- Sort now has an asc/desc toggle (sort_dir), applied to any sort field.
- Genre multi-select gains an Any/All mode (genre_mode: OR vs AND containment).
- Director/actor/studio become multi-value: people AND (titles featuring all selected),
  studios OR; clicking them on the info page stacks (unions) instead of replacing, and
  the sidebar shows each as a removable 'Active' chip.
- fix(history): clicking a metadata filter on the info page now pushes a fresh grid
  entry instead of history.back(), so browser Back returns to the info page rather than
  leaving the Plex module.
- fix(player): fully tear down the <video> + hls on unmount and guard late play() calls,
  so backing out of a just-started video no longer leaves audio playing in the background.
i18n en/hu/de (match any/all, sort direction).
---
 backend/app/routes/plex.py              | 55 ++++++++++++----------
 frontend/src/components/PlexBrowse.tsx  | 18 +++++--
 frontend/src/components/PlexInfo.tsx    |  6 +--
 frontend/src/components/PlexPlayer.tsx  | 29 +++++++++++-
 frontend/src/components/PlexSidebar.tsx | 62 +++++++++++++++++++------
 frontend/src/i18n/locales/de/plex.json  |  4 +-
 frontend/src/i18n/locales/en/plex.json  |  4 +-
 frontend/src/i18n/locales/hu/plex.json  |  4 +-
 frontend/src/lib/api.ts                 | 30 ++++++++----
 frontend/src/lib/releaseNotes.ts        |  8 +++-
 10 files changed, 160 insertions(+), 60 deletions(-)

diff --git a/backend/app/routes/plex.py b/backend/app/routes/plex.py
index 9a5c982..2ed696f 100644
--- a/backend/app/routes/plex.py
+++ b/backend/app/routes/plex.py
@@ -193,6 +193,7 @@ def browse(
     offset: int = 0,
     limit: int = Query(default=40, ge=1, le=100),
     genres: str | None = None,
+    genre_mode: str = "any",
     content_ratings: str | None = None,
     year_min: int | None = None,
     year_max: int | None = None,
@@ -200,9 +201,10 @@ def browse(
     duration_min: int | None = None,
     duration_max: int | None = None,
     added_within: str | None = None,
-    director: str | None = None,
-    actor: str | None = None,
-    studio: str | None = None,
+    directors: str | None = None,
+    actors: str | None = None,
+    studios: str | None = None,
+    sort_dir: str = "desc",
     user: User = Depends(current_user),
     db: Session = Depends(get_db),
 ) -> dict:
@@ -230,9 +232,10 @@ def browse(
         else:  # all — hide only the explicitly hidden
             query = query.filter(or_(st.status.is_(None), st.status != "hidden"))
         # --- Metadata filters (movie libraries; @> containment is GIN-indexed) ---
-        genre_any = _csv(genres)
-        if genre_any:
-            query = query.filter(or_(*[PlexItem.genres.contains([g]) for g in genre_any]))
+        gsel = _csv(genres)
+        if gsel:
+            conds = [PlexItem.genres.contains([g]) for g in gsel]
+            query = query.filter(and_(*conds) if genre_mode == "all" else or_(*conds))
         crs = _csv(content_ratings)
         if crs:
             query = query.filter(PlexItem.content_rating.in_(crs))
@@ -249,12 +252,13 @@ def browse(
         cutoff = _added_cutoff(added_within)
         if cutoff is not None:
             query = query.filter(PlexItem.added_at >= cutoff)
-        if director:
-            query = query.filter(PlexItem.directors.contains([director]))
-        if actor:
-            query = query.filter(PlexItem.cast_names.contains([actor]))
-        if studio:
-            query = query.filter(PlexItem.studio == studio)
+        for d in _csv(directors):  # AND — titles this whole set directed
+            query = query.filter(PlexItem.directors.contains([d]))
+        for a in _csv(actors):  # AND — titles featuring all these people
+            query = query.filter(PlexItem.cast_names.contains([a]))
+        stds = _csv(studios)
+        if stds:  # OR — a title has one studio
+            query = query.filter(PlexItem.studio.in_(stds))
     else:
         query = query.filter(PlexShow.library_id == lib.id)
 
@@ -268,18 +272,21 @@ def browse(
 
     if tsq is not None:
         order = [func.ts_rank(model.search_vector, tsq).desc()]
-    elif sort == "title":
-        order = [func.lower(model.title).asc()]
-    elif sort == "year" and model is PlexItem:
-        order = [PlexItem.year.desc().nullslast()]
-    elif sort == "rating" and model is PlexItem:
-        order = [PlexItem.rating.desc().nullslast()]
-    elif sort == "duration" and model is PlexItem:
-        order = [PlexItem.duration_s.desc().nullslast()]
-    elif sort == "release" and model is PlexItem:
-        order = [PlexItem.originally_available_at.desc().nullslast()]
-    else:  # added — newest first
-        order = [model.added_at.desc().nullslast()]
+    else:
+        if sort == "title":
+            col = func.lower(model.title)
+        elif sort == "year" and model is PlexItem:
+            col = PlexItem.year
+        elif sort == "rating" and model is PlexItem:
+            col = PlexItem.rating
+        elif sort == "duration" and model is PlexItem:
+            col = PlexItem.duration_s
+        elif sort == "release" and model is PlexItem:
+            col = PlexItem.originally_available_at
+        else:  # added
+            col = model.added_at
+        asc = sort_dir == "asc"
+        order = [(col.asc() if asc else col.desc()).nullslast()]
     order.append(model.id.desc())
 
     rows = query.order_by(*order).offset(offset).limit(limit).all()
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index 8a74f5b..855662a 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -127,9 +127,21 @@ export default function PlexBrowse({ q, library, show, sort, filters, setFilters
         onBack={sub.back}
         onPlay={() => sub.open({ kind: "player", id: infoId })}
         onFilter={(patch) => {
-          // Clicking a metadata chip sets that filter and returns to the (now filtered) grid.
-          setFilters({ ...filters, ...patch });
-          sub.back();
+          // Clicking a metadata chip sets that filter and shows the filtered grid. Array filters
+          // (genres/people/studios) UNION with what's already set (so you can stack people); scalars
+          // replace. We push a fresh grid entry (not history.back) so browser Back returns to this
+          // info page instead of leaving the Plex module.
+          const merged = { ...filters } as unknown as Record<string, unknown>;
+          for (const [k, v] of Object.entries(patch)) {
+            const cur = merged[k];
+            if (Array.isArray(v) && Array.isArray(cur)) {
+              merged[k] = Array.from(new Set([...(cur as unknown[]), ...(v as unknown[])]));
+            } else {
+              merged[k] = v;
+            }
+          }
+          setFilters(merged as unknown as PlexFilters);
+          sub.open({ kind: "grid" });
         }}
       />
     );
diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/components/PlexInfo.tsx
index 188425e..4adf81b 100644
--- a/frontend/src/components/PlexInfo.tsx
+++ b/frontend/src/components/PlexInfo.tsx
@@ -181,7 +181,7 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
               {detail.studio && (
                 <Filterable
                   className={mutedCls}
-                  onClick={onFilter ? () => onFilter({ studio: detail.studio! }) : undefined}
+                  onClick={onFilter ? () => onFilter({ studios: [detail.studio!] }) : undefined}
                 >
                   {detail.studio}
                 </Filterable>
@@ -232,7 +232,7 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
                   <span key={d}>
                     <Filterable
                       className="font-medium"
-                      onClick={onFilter ? () => onFilter({ director: d }) : undefined}
+                      onClick={onFilter ? () => onFilter({ directors: [d] }) : undefined}
                     >
                       {d}
                     </Filterable>
@@ -331,7 +331,7 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
                 return onFilter ? (
                   <button
                     key={i}
-                    onClick={() => onFilter({ actor: c.name })}
+                    onClick={() => onFilter({ actors: [c.name] })}
                     title={t("plex.info.filterActor", { name: c.name })}
                     className="group/cast w-20 shrink-0 text-center"
                   >
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx
index 0df196c..e3f7e3e 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/components/PlexPlayer.tsx
@@ -53,6 +53,9 @@ export default function PlexPlayer({ itemId, onClose }: Props) {
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
+  // False once unmounted, so a late play() (from MANIFEST_PARSED / loadedmetadata firing after Back)
+  // can't start a detached <video> playing audio in the background.
+  const aliveRef = useRef(true);
   const wrapRef = useRef<HTMLDivElement>(null);
   const sessionStartRef = useRef(0); // absolute offset the current HLS/direct session begins at
   const durationRef = useRef(0);
@@ -143,7 +146,7 @@ export default function PlexPlayer({ itemId, onClose }: Props) {
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           enableSubs();
           setReady(true);
-          video.play().catch(() => {});
+          if (aliveRef.current) video.play().catch(() => {});
         });
         // A fatal HLS error (e.g. the remux session died / the file became unreadable) would
         // otherwise leave the spinner up forever — surface it instead.
@@ -157,7 +160,7 @@ export default function PlexPlayer({ itemId, onClose }: Props) {
         const onMeta = () => {
           if (sess.mode === "direct" && startAt > 0) video.currentTime = startAt;
           setReady(true);
-          video.play().catch(() => {});
+          if (aliveRef.current) video.play().catch(() => {});
           video.removeEventListener("loadedmetadata", onMeta);
         };
         video.addEventListener("loadedmetadata", onMeta);
@@ -179,6 +182,28 @@ export default function PlexPlayer({ itemId, onClose }: Props) {
     };
   }, [detail, loadSession]);
 
+  // Full media teardown on unmount (Back): stop + detach the <video> and destroy hls, so a late
+  // play() can't leave audio playing on a detached element after leaving the player.
+  useEffect(() => {
+    return () => {
+      aliveRef.current = false;
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+      const v = videoRef.current;
+      if (v) {
+        try {
+          v.pause();
+          v.removeAttribute("src");
+          v.load();
+        } catch {
+          /* ignore */
+        }
+      }
+    };
+  }, []);
+
   // --- time tracking + progress checkpoints ----------------------------------------------------
   useEffect(() => {
     const video = videoRef.current;
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/components/PlexSidebar.tsx
index cf1aee0..79502db 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/components/PlexSidebar.tsx
@@ -155,7 +155,7 @@ export default function PlexSidebar({
         </Section>
       )}
 
-      {/* Sort */}
+      {/* Sort + direction */}
       <Section label={t("plex.filter.sort")}>
         <ChipRow>
           {sorts.map((s) => (
@@ -164,24 +164,43 @@ export default function PlexSidebar({
             </Chip>
           ))}
         </ChipRow>
+        <div className="mt-1.5 flex gap-1">
+          {(["desc", "asc"] as const).map((d) => (
+            <Chip key={d} active={(filters.sortDir ?? "desc") === d} onClick={() => patch({ sortDir: d })}>
+              {t(`plex.filter.dir.${d}`)}
+            </Chip>
+          ))}
+        </div>
       </Section>
 
       {/* Metadata filters (movie libraries only) */}
       {isMovieLib && (
         <>
-          {/* Active people / studio — set by clicking the info page. */}
-          {(filters.director || filters.actor || filters.studio) && (
+          {/* Active people / studios — set by clicking the info page (stackable). */}
+          {filters.directors.length + filters.actors.length + filters.studios.length > 0 && (
             <Section label={t("plex.filter.active")}>
               <div className="flex flex-wrap gap-1.5">
-                {filters.director && (
-                  <RemovableChip label={filters.director} onRemove={() => patch({ director: null })} />
-                )}
-                {filters.actor && (
-                  <RemovableChip label={filters.actor} onRemove={() => patch({ actor: null })} />
-                )}
-                {filters.studio && (
-                  <RemovableChip label={filters.studio} onRemove={() => patch({ studio: null })} />
-                )}
+                {filters.directors.map((d) => (
+                  <RemovableChip
+                    key={`d:${d}`}
+                    label={d}
+                    onRemove={() => patch({ directors: filters.directors.filter((x) => x !== d) })}
+                  />
+                ))}
+                {filters.actors.map((a) => (
+                  <RemovableChip
+                    key={`a:${a}`}
+                    label={a}
+                    onRemove={() => patch({ actors: filters.actors.filter((x) => x !== a) })}
+                  />
+                ))}
+                {filters.studios.map((s) => (
+                  <RemovableChip
+                    key={`s:${s}`}
+                    label={s}
+                    onRemove={() => patch({ studios: filters.studios.filter((x) => x !== s) })}
+                  />
+                ))}
               </div>
             </Section>
           )}
@@ -200,9 +219,26 @@ export default function PlexSidebar({
             </ChipRow>
           </Section>
 
-          {/* Genres (from facets) */}
+          {/* Genres (from facets) + Any/All when more than one is picked */}
           {facets && facets.genres.length > 0 && (
             <Section label={t("plex.filter.genre")}>
+              {filters.genres.length > 1 && (
+                <div className="mb-1.5 inline-flex overflow-hidden rounded-lg border border-border text-[11px]">
+                  {(["any", "all"] as const).map((m) => (
+                    <button
+                      key={m}
+                      onClick={() => patch({ genreMode: m })}
+                      className={`px-2 py-0.5 transition ${
+                        (filters.genreMode ?? "any") === m
+                          ? "bg-accent text-accent-fg"
+                          : "text-muted hover:bg-surface"
+                      }`}
+                    >
+                      {t(`plex.filter.match.${m}`)}
+                    </button>
+                  ))}
+                </div>
+              )}
               <ChipRow>
                 {facets.genres.map((g) => (
                   <Chip
diff --git a/frontend/src/i18n/locales/de/plex.json b/frontend/src/i18n/locales/de/plex.json
index 6ed5d61..a77e2c6 100644
--- a/frontend/src/i18n/locales/de/plex.json
+++ b/frontend/src/i18n/locales/de/plex.json
@@ -31,7 +31,9 @@
     "durationOpt": { "short": "Unter 90 Min.", "mid": "90–120 Min.", "long": "Über 2 Std." },
     "added": "Zu Plex hinzugefügt",
     "addedOpt": { "24h": "24 Std.", "1w": "1 Woche", "1m": "1 Monat", "6m": "6 Monate", "1y": "1 Jahr" },
-    "contentRating": "Altersfreigabe"
+    "contentRating": "Altersfreigabe",
+    "match": { "any": "Beliebig", "all": "Alle" },
+    "dir": { "desc": "↓ Absteigend", "asc": "↑ Aufsteigend" }
   },
   "count": "{{count}} Titel",
   "searchCount": "{{count}} Treffer",
diff --git a/frontend/src/i18n/locales/en/plex.json b/frontend/src/i18n/locales/en/plex.json
index 0378749..79bd804 100644
--- a/frontend/src/i18n/locales/en/plex.json
+++ b/frontend/src/i18n/locales/en/plex.json
@@ -31,7 +31,9 @@
     "durationOpt": { "short": "Under 90m", "mid": "90–120m", "long": "Over 2h" },
     "added": "Added to Plex",
     "addedOpt": { "24h": "24h", "1w": "1 week", "1m": "1 month", "6m": "6 months", "1y": "1 year" },
-    "contentRating": "Age rating"
+    "contentRating": "Age rating",
+    "match": { "any": "Any", "all": "All" },
+    "dir": { "desc": "↓ Descending", "asc": "↑ Ascending" }
   },
   "count": "{{count}} titles",
   "searchCount": "{{count}} matches",
diff --git a/frontend/src/i18n/locales/hu/plex.json b/frontend/src/i18n/locales/hu/plex.json
index 6961d49..5131f55 100644
--- a/frontend/src/i18n/locales/hu/plex.json
+++ b/frontend/src/i18n/locales/hu/plex.json
@@ -31,7 +31,9 @@
     "durationOpt": { "short": "90 perc alatt", "mid": "90–120 perc", "long": "2 óra felett" },
     "added": "Plexhez adva",
     "addedOpt": { "24h": "24 óra", "1w": "1 hét", "1m": "1 hónap", "6m": "6 hónap", "1y": "1 év" },
-    "contentRating": "Korhatár"
+    "contentRating": "Korhatár",
+    "match": { "any": "Bármelyik", "all": "Mind" },
+    "dir": { "desc": "↓ Csökkenő", "asc": "↑ Növekvő" }
   },
   "count": "{{count}} cím",
   "searchCount": "{{count}} találat",
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 06ff88e..016d93f 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -723,6 +723,7 @@ export interface PlexCastMember {
 // The expanded Plex browse filters (movie libraries). Persisted per-account as JSON.
 export interface PlexFilters {
   genres: string[];
+  genreMode?: "any" | "all"; // how multiple genres combine (default any)
   contentRatings: string[];
   yearMin?: number | null;
   yearMax?: number | null;
@@ -730,11 +731,18 @@ export interface PlexFilters {
   durationMin?: number | null; // seconds
   durationMax?: number | null;
   addedWithin?: string; // "" | "24h" | "1w" | "1m" | "6m" | "1y"
-  director?: string | null;
-  actor?: string | null;
-  studio?: string | null;
+  directors: string[]; // AND — titles featuring ALL selected
+  actors: string[]; // AND — titles featuring ALL selected
+  studios: string[]; // OR — from any selected studio
+  sortDir?: "asc" | "desc"; // sort direction (default desc)
 }
-export const EMPTY_PLEX_FILTERS: PlexFilters = { genres: [], contentRatings: [] };
+export const EMPTY_PLEX_FILTERS: PlexFilters = {
+  genres: [],
+  contentRatings: [],
+  directors: [],
+  actors: [],
+  studios: [],
+};
 export function plexFilterCount(f: PlexFilters): number {
   return (
     f.genres.length +
@@ -743,9 +751,9 @@ export function plexFilterCount(f: PlexFilters): number {
     (f.ratingMin != null ? 1 : 0) +
     (f.durationMin != null || f.durationMax != null ? 1 : 0) +
     (f.addedWithin ? 1 : 0) +
-    (f.director ? 1 : 0) +
-    (f.actor ? 1 : 0) +
-    (f.studio ? 1 : 0)
+    f.directors.length +
+    f.actors.length +
+    f.studios.length
   );
 }
 export interface PlexFacets {
@@ -1097,6 +1105,7 @@ export const api = {
     const f = p.filters;
     if (f) {
       if (f.genres?.length) u.set("genres", f.genres.join(","));
+      if (f.genreMode === "all") u.set("genre_mode", "all");
       if (f.contentRatings?.length) u.set("content_ratings", f.contentRatings.join(","));
       if (f.yearMin != null) u.set("year_min", String(f.yearMin));
       if (f.yearMax != null) u.set("year_max", String(f.yearMax));
@@ -1104,9 +1113,10 @@ export const api = {
       if (f.durationMin != null) u.set("duration_min", String(f.durationMin));
       if (f.durationMax != null) u.set("duration_max", String(f.durationMax));
       if (f.addedWithin) u.set("added_within", f.addedWithin);
-      if (f.director) u.set("director", f.director);
-      if (f.actor) u.set("actor", f.actor);
-      if (f.studio) u.set("studio", f.studio);
+      if (f.directors?.length) u.set("directors", f.directors.join(","));
+      if (f.actors?.length) u.set("actors", f.actors.join(","));
+      if (f.studios?.length) u.set("studios", f.studios.join(","));
+      if (f.sortDir === "asc") u.set("sort_dir", "asc");
     }
     return req(`/api/plex/browse?${u.toString()}`);
   },
diff --git a/frontend/src/lib/releaseNotes.ts b/frontend/src/lib/releaseNotes.ts
index d04ee34..943c964 100644
--- a/frontend/src/lib/releaseNotes.ts
+++ b/frontend/src/lib/releaseNotes.ts
@@ -19,10 +19,14 @@ export const RELEASE_NOTES: ReleaseEntry[] = [
     date: "2026-07-05",
     summary: "Powerful Plex filters — by genre, IMDb rating, year, length, added date and age rating — and click any detail on the info page to filter by it. Plus much faster poster loading.",
     features: [
-      "Plex library: a greatly expanded filter panel for movies — genre, IMDb rating, year range, length, when it was added to Plex, and age rating — plus new sort orders (release date, year, IMDb rating, length).",
-      "Plex info page: the year, genres, director, cast and studio are now clickable — tap one to filter the whole library by it (e.g. every film with an actor, or everything rated 7+).",
+      "Plex library: a greatly expanded filter panel for movies — genre, IMDb rating, year range, length, when it was added to Plex, and age rating — plus new sort orders (release date, year, IMDb rating, length) with an ascending/descending toggle.",
+      "Plex filters: pick several genres and choose Any (match one) or All (match every one); stack multiple actors, directors and studios at once (from the info page).",
+      "Plex info page: the year, genres, director, cast and studio are now clickable — tap one to filter the whole library by it (e.g. every film with an actor, or everything rated 7+). Browser Back returns to the info page.",
       "Plex: posters and cast photos are cached on disk after first view, so scrolling the library is much smoother on repeat visits.",
     ],
+    fixes: [
+      "Plex player: leaving a video with Back now fully stops it — no more audio playing in the background until a refresh.",
+    ],
   },
   {
     version: "0.25.0",