From 97088d5393cdc23a2ae1264d3c810d19cbfe6770 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 11 Jul 2026 23:10:24 +0200
Subject: [PATCH] chore(plex): dedup frontend formatters + LS key, drop dead
 wasPlaying pref
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- format.ts: new formatRuntime() ("1h 30m"); PlexBrowse dur() + PlexInfo
  fmtDur() were byte-identical copies, now both call it.
- PlexPlayer fmt() delegates to formatDuration (keeps the NaN/negative clamp
  the live media clock needs); local reimplementation gone.
- Register LS.plexPlayerPrefs; PlexPlayer uses it instead of a bare string.
- Remove the dead PlexPlayerPrefs.wasPlaying field (written on play/pause, never
  read) + its two patchPrefs writes.
- PlexBrowse item page: drop the redundant onStateChange={() => q.refetch()} —
  PlexInfo.setState already invalidates ["plex-item", id], so q refetches itself.
---
 frontend/src/components/PlexBrowse.tsx | 15 +++++---------
 frontend/src/components/PlexInfo.tsx   | 10 ++-------
 frontend/src/components/PlexPlayer.tsx | 28 +++++++++-----------------
 frontend/src/lib/format.ts             |  9 +++++++++
 frontend/src/lib/storage.ts            |  1 +
 5 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index 9a7f341..82bdf25 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -26,6 +26,7 @@ import {
   type PlexSeasonDetail,
   type PlexUnifiedResult,
 } from "../lib/api";
+import { formatRuntime } from "../lib/format";
 import { useDebounced } from "../lib/useDebounced";
 import { useHistorySubview } from "../lib/history";
 import { DetailCustomizeMenu, Filterable, useArtBackdrop, useDetailPrefs } from "../lib/plexDetailUi";
@@ -67,13 +68,6 @@ type Props = {
 
 const PAGE = 40;
 
-function dur(n?: number | null): string {
-  if (!n) return "";
-  const h = Math.floor(n / 3600);
-  const m = Math.floor((n % 3600) / 60);
-  return h ? `${h}h ${m}m` : `${m}m`;
-}
-
 export default function PlexBrowse({
   q,
   onClearSearch,
@@ -483,7 +477,7 @@ function PlexPosterCard({
         style={{ background: "color-mix(in srgb, var(--card) 60%, transparent)" }}
       >
         <div className="text-sm font-medium line-clamp-2 leading-tight hover:text-accent">{card.title}</div>
-        <div className="text-xs text-muted">{[card.year, dur(card.duration_seconds)].filter(Boolean).join(" · ")}</div>
+        <div className="text-xs text-muted">{[card.year, formatRuntime(card.duration_seconds)].filter(Boolean).join(" · ")}</div>
       </div>
     </div>
   );
@@ -526,7 +520,8 @@ function PlexInfoView({
             onPlay={onPlay}
             onPlayItem={onPlayItem}
             onFilter={onFilter}
-            onStateChange={() => q.refetch()}
+            // No onStateChange: PlexInfo.setState already invalidates ["plex-item", id] (this very
+            // query), so q refetches automatically — a manual refetch here just double-fetched.
           />
         </Suspense>
       )}
@@ -845,7 +840,7 @@ function EpisodeCard({
             {!withShowTitle && <span className="text-muted mr-1">{ep.episode_number}.</span>}
             {ep.title}
           </div>
-          <div className="text-[11px] text-muted mt-0.5">{dur(ep.duration_seconds)}</div>
+          <div className="text-[11px] text-muted mt-0.5">{formatRuntime(ep.duration_seconds)}</div>
         </div>
         {onAdd && (
           <button
diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/components/PlexInfo.tsx
index 691fe92..1c8a28a 100644
--- a/frontend/src/components/PlexInfo.tsx
+++ b/frontend/src/components/PlexInfo.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Check, ExternalLink, FolderPlus, ListPlus, Play, RotateCcw, Star, X } from "lucide-react";
 import { api, type PlexFilters, type PlexItemDetail } from "../lib/api";
+import { formatRuntime } from "../lib/format";
 import { DetailCustomizeMenu, Filterable, PrefToggle, useArtBackdrop, useDetailPrefs } from "../lib/plexDetailUi";
 import PlexCollectionEditor from "./PlexCollectionEditor";
 import PlexPlaylistAdd from "./PlexPlaylistAdd";
@@ -28,13 +29,6 @@ type Props = {
   library?: string;
 };
 
-function fmtDur(s?: number | null): string {
-  if (!s) return "";
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  return h ? `${h}h ${m}m` : `${m}m`;
-}
-
 export default function PlexInfo({
   detail,
   variant,
@@ -170,7 +164,7 @@ export default function PlexInfo({
                   {detail.content_rating}
                 </Filterable>
               )}
-              {detail.duration_seconds ? <span className={mutedCls}>{fmtDur(detail.duration_seconds)}</span> : null}
+              {detail.duration_seconds ? <span className={mutedCls}>{formatRuntime(detail.duration_seconds)}</span> : null}
               {detail.studio && (
                 <Filterable
                   className={mutedCls}
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx
index 68e4ddd..fe9848e 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/components/PlexPlayer.tsx
@@ -33,7 +33,8 @@ import {
   X,
 } from "lucide-react";
 import { api, type PlexMarker } from "../lib/api";
-import { useAccountPersistedObject } from "../lib/storage";
+import { formatDuration } from "../lib/format";
+import { LS, useAccountPersistedObject } from "../lib/storage";
 import { useDismiss } from "../lib/useDismiss";
 import { useBackToClose } from "../lib/history";
 
@@ -63,7 +64,6 @@ function subOrdForLang(subs: SubStream[], lang: string): number | null {
 type PlexPlayerPrefs = {
   volume: number; // 0..1
   muted: boolean;
-  wasPlaying: boolean; // resume-playing intent across reloads (best-effort; browsers may block autoplay)
   audioLang: string; // "" = default first audio
   subLang: string; // "" = subtitles off
   subOffset: number; // seconds, +later / -earlier (client-side cue shift)
@@ -90,7 +90,6 @@ type PlexPlayerPrefs = {
 const DEFAULT_PREFS: PlexPlayerPrefs = {
   volume: 1,
   muted: false,
-  wasPlaying: true,
   audioLang: "",
   subLang: "",
   subOffset: 0,
@@ -165,13 +164,10 @@ const HLS_SUB_LAG = 1.0;
 // the queue instead of the item's own episode neighbours.
 type Props = { itemId: string; onClose: () => void; queue?: string[] };
 
+// Seekbar clock — same H:MM:SS / M:SS shape as the shared formatDuration, but the live media clock
+// can be NaN/negative before metadata loads, so clamp to 0 first (formatDuration never sees null here).
 function fmt(t: number): string {
-  if (!isFinite(t) || t < 0) t = 0;
-  const s = Math.floor(t % 60);
-  const m = Math.floor((t / 60) % 60);
-  const h = Math.floor(t / 3600);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return h ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+  return formatDuration(isFinite(t) && t >= 0 ? t : 0);
 }
 
 export default function PlexPlayer({ itemId, onClose, queue }: Props) {
@@ -217,7 +213,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
 
   // Per-account persisted player prefs — survive F5, carry across items.
   const [prefs, patchPrefs] = useAccountPersistedObject<PlexPlayerPrefs>(
-    "siftlode.plexPlayerPrefs",
+    LS.plexPlayerPrefs,
     DEFAULT_PREFS,
   );
   const { volume, muted } = prefs;
@@ -419,18 +415,12 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
         /* ignore */
       }
     };
-    const onPlay = () => {
-      setPlaying(true);
-      patchPrefs({ wasPlaying: true }); // remember play intent for F5 (best-effort; autoplay may be blocked)
-    };
-    const onPause = () => {
-      setPlaying(false);
-      patchPrefs({ wasPlaying: false });
-    };
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
     // A seek that restarts the hls.js session detaches/re-attaches the media, firing 'emptied' —
     // which silently flips paused=true WITHOUT a 'pause' event, so the play/pause pair alone let the
     // button lie (⏸ shown while actually paused). Resync the flag from reality on the settling events
-    // so the icon can never contradict the video. (Does not touch the wasPlaying pref.)
+    // so the icon can never contradict the video.
     const syncPlaying = () => setPlaying(!video.paused);
     video.addEventListener("timeupdate", onTime);
     video.addEventListener("play", onPlay);
diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
index d8ac660..7461c35 100644
--- a/frontend/src/lib/format.ts
+++ b/frontend/src/lib/format.ts
@@ -70,6 +70,15 @@ export function formatDuration(sec: number | null): string {
   return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
 }
 
+/** Compact human runtime ("1h 30m", "45m") from seconds — used for Plex movie/episode lengths.
+ * Empty string for a missing/zero duration (nothing to show). */
+export function formatRuntime(sec?: number | null): string {
+  if (!sec) return "";
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return h ? `${h}h ${m}m` : `${m}m`;
+}
+
 // Human label for a canonical quota-action key (see backend app.quota.QuotaAction). Resolved
 // from i18n (quotaActions.<key>) so it's translated in all UI languages; falls back to the raw
 // key for any unmapped/legacy value.
diff --git a/frontend/src/lib/storage.ts b/frontend/src/lib/storage.ts
index fc576e3..1102d3b 100644
--- a/frontend/src/lib/storage.ts
+++ b/frontend/src/lib/storage.ts
@@ -32,6 +32,7 @@ export const LS = {
   plexFilters: "siftlode.plexFilters",
   plexQ: "siftlode.plexQ",
   plexPlaylistLayout: "siftlode.plexPlaylistLayout",
+  plexPlayerPrefs: "siftlode.plexPlayerPrefs",
   notifHistory: "siftlode.notifications",
   notifSettings: "siftlode.notifSettings",
   onboardingDismissed: "siftlode.onboarding.dismissed",