peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

release: 0.63.3 (r12-s5-player-frontend)

Browse Source
This commit is contained in:
peter
2026-08-13 03:45:24 +02:00
parent f3fce67e4c 8ff28dcc69
commit f3b95ed543
7 changed files with 398 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
VERSION
+1 -1
View File
@@ -1 +1 @@
0.63.2
0.63.3
frontend/src/components/PlexPlayer.tsx
+12 -241
View File
@@ -36,7 +36,8 @@ import {
subShadowCss,
type PlexPlayerPrefs,
} from "../lib/plexPlayerPrefs";
import { Ctrl, PanelHead, Slider, Toggle } from "./plexPlayerControls";
import { Ctrl, PanelHead } from "./plexPlayerControls";
import { PlexPlayerSettings } from "./PlexPlayerSettings";
import {
useAutoSkip,
useControlsVisibility,
@@ -1048,246 +1049,16 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
<Settings className="w-5 h-5" />
</button>
{menuOpen && (
<div
ref={menuRef}
onWheel={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
className="border border-white/15 bg-neutral-900/95 absolute bottom-full right-0 mb-2 w-80 rounded-xl p-2 text-sm text-white shadow-2xl"
>
<div className="mb-1.5 flex gap-1">
{settingsTabs.map((tab) => (
<button
key={tab.key}
onClick={() => setSettingsTab(tab.key)}
className={`flex-1 whitespace-nowrap rounded px-2 py-1 text-2xs ${
activeTab === tab.key
? "bg-white/15 text-accent"
: "text-white/70 hover:bg-white/10"
}`}
>
{tab.label}
</button>
))}
</div>
{activeTab === "sync" && (
<>
<Slider
label={t("plex.player.subOffset")}
value={prefs.subOffset}
min={-10}
max={10}
step={0.1}
suffix="s"
onChange={(v) => patchPrefs({ subOffset: v })}
onReset={() => patchPrefs({ subOffset: 0 })}
/>
<Slider
label={t("plex.player.audioOffset")}
value={prefs.audioOffset}
min={-5}
max={5}
step={0.1}
suffix="s"
onChange={changeAudioOffset}
onReset={() => changeAudioOffset(0)}
/>
</>
)}
{activeTab === "playback" && (
<>
<Slider
label={t("plex.player.seekStep")}
value={prefs.seekStep}
min={5}
max={30}
step={1}
suffix="s"
onChange={(v) => patchPrefs({ seekStep: v })}
/>
<Slider
label={t("plex.player.fineSeek")}
value={prefs.fineSeekStep}
min={0.1}
max={5}
step={0.1}
suffix="s"
onChange={(v) => patchPrefs({ fineSeekStep: v })}
/>
<Toggle
label={t("plex.player.autoHide")}
checked={prefs.barAutoHide}
onChange={(v) => patchPrefs({ barAutoHide: v })}
/>
<Toggle
label={t("plex.player.autoSkipIntro")}
checked={prefs.autoSkipIntro}
onChange={(v) => patchPrefs({ autoSkipIntro: v })}
/>
<Toggle
label={t("plex.player.autoSkipCredits")}
checked={prefs.autoSkipCredits}
onChange={(v) => patchPrefs({ autoSkipCredits: v })}
/>
{(prefs.autoSkipIntro || prefs.autoSkipCredits) && (
<Slider
label={t("plex.player.autoSkipDelay")}
value={prefs.autoSkipDelay}
min={0}
max={10}
step={1}
suffix="s"
onChange={(v) => patchPrefs({ autoSkipDelay: v })}
/>
)}
</>
)}
{activeTab === "subtitle" && (
<>
<Slider
label={t("plex.player.subSize")}
value={prefs.subSize}
min={50}
max={250}
step={5}
suffix="%"
onChange={(v) => patchPrefs({ subSize: v })}
/>
<Slider
label={t("plex.player.subPos")}
value={prefs.subPos}
min={50}
max={95}
step={1}
suffix="%"
onChange={(v) => patchPrefs({ subPos: v })}
/>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">
{t("plex.player.subColor")}
</span>
<input
type="color"
value={prefs.subColor}
onChange={(e) => patchPrefs({ subColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">
{t("plex.player.subBg")}
</span>
<div className="flex items-center gap-2">
<label className="flex items-center gap-1 text-2xs text-white/70">
<input
type="checkbox"
checked={prefs.subBg === "transparent"}
onChange={(e) =>
patchPrefs({
subBg: e.target.checked ? "transparent" : "#000000",
})
}
className="accent-accent"
/>
{t("plex.player.subBgNone")}
</label>
{prefs.subBg !== "transparent" && (
<input
type="color"
value={prefs.subBg}
onChange={(e) => patchPrefs({ subBg: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
)}
</div>
</div>
<Slider
label={t("plex.player.subShadow")}
value={prefs.subShadow}
min={0}
max={10}
step={1}
suffix="px"
onChange={(v) => patchPrefs({ subShadow: v })}
/>
{prefs.subShadow > 0 && (
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">
{t("plex.player.subShadowColor")}
</span>
<input
type="color"
value={prefs.subShadowColor}
onChange={(e) => patchPrefs({ subShadowColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
)}
</>
)}
{activeTab === "clock" && (
<>
<Toggle
label={t("plex.player.clockShow")}
checked={prefs.clockShow}
onChange={(v) => patchPrefs({ clockShow: v })}
/>
<Toggle
label={t("plex.player.clock24h")}
checked={prefs.clock24h}
onChange={(v) => patchPrefs({ clock24h: v })}
/>
<Slider
label={t("plex.player.clockSize")}
value={prefs.clockSize}
min={70}
max={200}
step={5}
suffix="%"
onChange={(v) => patchPrefs({ clockSize: v })}
/>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">
{t("plex.player.clockColor")}
</span>
<input
type="color"
value={prefs.clockColor}
onChange={(e) => patchPrefs({ clockColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
<Toggle
label={t("plex.player.clockDate")}
checked={prefs.clockDate}
onChange={(v) => patchPrefs({ clockDate: v })}
/>
{prefs.clockDate && (
<div className="flex gap-1 px-1 py-1">
{(["hu", "en"] as const).map((st) => (
<button
key={st}
onClick={() => patchPrefs({ clockDateStyle: st })}
className={`flex-1 rounded px-2 py-1 text-2xs ${
prefs.clockDateStyle === st
? "bg-white/15 text-accent"
: "text-white/70 hover:bg-white/10"
}`}
>
{
clockParts(now, { ...prefs, clockDate: true, clockDateStyle: st })
.date
}
</button>
))}
</div>
)}
</>
)}
</div>
<PlexPlayerSettings
menuRef={menuRef}
settingsTabs={settingsTabs}
activeTab={activeTab}
setSettingsTab={setSettingsTab}
prefs={prefs}
patchPrefs={patchPrefs}
changeAudioOffset={changeAudioOffset}
now={now}
/>
)}
</div>
)}
frontend/src/components/PlexPlayerSettings.tsx
+266
View File
@@ -0,0 +1,266 @@
import { type RefObject } from "react";
import { useTranslation } from "react-i18next";
import { Slider, Toggle } from "./plexPlayerControls";
import { clockParts, type PlexPlayerPrefs } from "../lib/plexPlayerPrefs";
type SettingsTab = "sync" | "playback" | "subtitle" | "clock";
// The gear/tuning panel of the Plex player — a tabbed (sync / playback / subtitle / clock) sheet of
// Slider/Toggle rows over the per-account prefs. Extracted verbatim from PlexPlayer to keep that
// component focused on the media engine; every row is still `prefs.<field>` + `patchPrefs`, so the
// panel owns no state of its own. `now` is the live wall clock (passed in, not a second ticker) used
// only for the clock-date-style preview buttons.
export function PlexPlayerSettings(props: {
menuRef: RefObject<HTMLDivElement>;
settingsTabs: { key: SettingsTab; label: string }[];
activeTab: SettingsTab;
setSettingsTab: (tab: SettingsTab) => void;
prefs: PlexPlayerPrefs;
patchPrefs: (patch: Partial<PlexPlayerPrefs>) => void;
changeAudioOffset: (v: number) => void;
now: Date;
}) {
const {
menuRef,
settingsTabs,
activeTab,
setSettingsTab,
prefs,
patchPrefs,
changeAudioOffset,
now,
} = props;
const { t } = useTranslation();
return (
<div
ref={menuRef}
onWheel={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
className="border border-white/15 bg-neutral-900/95 absolute bottom-full right-0 mb-2 w-80 rounded-xl p-2 text-sm text-white shadow-2xl"
>
<div className="mb-1.5 flex gap-1">
{settingsTabs.map((tab) => (
<button
key={tab.key}
onClick={() => setSettingsTab(tab.key)}
className={`flex-1 whitespace-nowrap rounded px-2 py-1 text-2xs ${
activeTab === tab.key ? "bg-white/15 text-accent" : "text-white/70 hover:bg-white/10"
}`}
>
{tab.label}
</button>
))}
</div>
{activeTab === "sync" && (
<>
<Slider
label={t("plex.player.subOffset")}
value={prefs.subOffset}
min={-10}
max={10}
step={0.1}
suffix="s"
onChange={(v) => patchPrefs({ subOffset: v })}
onReset={() => patchPrefs({ subOffset: 0 })}
/>
<Slider
label={t("plex.player.audioOffset")}
value={prefs.audioOffset}
min={-5}
max={5}
step={0.1}
suffix="s"
onChange={changeAudioOffset}
onReset={() => changeAudioOffset(0)}
/>
</>
)}
{activeTab === "playback" && (
<>
<Slider
label={t("plex.player.seekStep")}
value={prefs.seekStep}
min={5}
max={30}
step={1}
suffix="s"
onChange={(v) => patchPrefs({ seekStep: v })}
/>
<Slider
label={t("plex.player.fineSeek")}
value={prefs.fineSeekStep}
min={0.1}
max={5}
step={0.1}
suffix="s"
onChange={(v) => patchPrefs({ fineSeekStep: v })}
/>
<Toggle
label={t("plex.player.autoHide")}
checked={prefs.barAutoHide}
onChange={(v) => patchPrefs({ barAutoHide: v })}
/>
<Toggle
label={t("plex.player.autoSkipIntro")}
checked={prefs.autoSkipIntro}
onChange={(v) => patchPrefs({ autoSkipIntro: v })}
/>
<Toggle
label={t("plex.player.autoSkipCredits")}
checked={prefs.autoSkipCredits}
onChange={(v) => patchPrefs({ autoSkipCredits: v })}
/>
{(prefs.autoSkipIntro || prefs.autoSkipCredits) && (
<Slider
label={t("plex.player.autoSkipDelay")}
value={prefs.autoSkipDelay}
min={0}
max={10}
step={1}
suffix="s"
onChange={(v) => patchPrefs({ autoSkipDelay: v })}
/>
)}
</>
)}
{activeTab === "subtitle" && (
<>
<Slider
label={t("plex.player.subSize")}
value={prefs.subSize}
min={50}
max={250}
step={5}
suffix="%"
onChange={(v) => patchPrefs({ subSize: v })}
/>
<Slider
label={t("plex.player.subPos")}
value={prefs.subPos}
min={50}
max={95}
step={1}
suffix="%"
onChange={(v) => patchPrefs({ subPos: v })}
/>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">{t("plex.player.subColor")}</span>
<input
type="color"
value={prefs.subColor}
onChange={(e) => patchPrefs({ subColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">{t("plex.player.subBg")}</span>
<div className="flex items-center gap-2">
<label className="flex items-center gap-1 text-2xs text-white/70">
<input
type="checkbox"
checked={prefs.subBg === "transparent"}
onChange={(e) =>
patchPrefs({
subBg: e.target.checked ? "transparent" : "#000000",
})
}
className="accent-accent"
/>
{t("plex.player.subBgNone")}
</label>
{prefs.subBg !== "transparent" && (
<input
type="color"
value={prefs.subBg}
onChange={(e) => patchPrefs({ subBg: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
)}
</div>
</div>
<Slider
label={t("plex.player.subShadow")}
value={prefs.subShadow}
min={0}
max={10}
step={1}
suffix="px"
onChange={(v) => patchPrefs({ subShadow: v })}
/>
{prefs.subShadow > 0 && (
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">
{t("plex.player.subShadowColor")}
</span>
<input
type="color"
value={prefs.subShadowColor}
onChange={(e) => patchPrefs({ subShadowColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
)}
</>
)}
{activeTab === "clock" && (
<>
<Toggle
label={t("plex.player.clockShow")}
checked={prefs.clockShow}
onChange={(v) => patchPrefs({ clockShow: v })}
/>
<Toggle
label={t("plex.player.clock24h")}
checked={prefs.clock24h}
onChange={(v) => patchPrefs({ clock24h: v })}
/>
<Slider
label={t("plex.player.clockSize")}
value={prefs.clockSize}
min={70}
max={200}
step={5}
suffix="%"
onChange={(v) => patchPrefs({ clockSize: v })}
/>
<div className="flex items-center justify-between px-1 py-1.5">
<span className="text-[0.75rem] text-white/80">{t("plex.player.clockColor")}</span>
<input
type="color"
value={prefs.clockColor}
onChange={(e) => patchPrefs({ clockColor: e.target.value })}
className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
/>
</div>
<Toggle
label={t("plex.player.clockDate")}
checked={prefs.clockDate}
onChange={(v) => patchPrefs({ clockDate: v })}
/>
{prefs.clockDate && (
<div className="flex gap-1 px-1 py-1">
{(["hu", "en"] as const).map((st) => (
<button
key={st}
onClick={() => patchPrefs({ clockDateStyle: st })}
className={`flex-1 rounded px-2 py-1 text-2xs ${
prefs.clockDateStyle === st
? "bg-white/15 text-accent"
: "text-white/70 hover:bg-white/10"
}`}
>
{clockParts(now, { ...prefs, clockDate: true, clockDateStyle: st }).date}
</button>
))}
</div>
)}
</>
)}
</div>
);
}
frontend/src/lib/playerVolume.test.ts
+44 -1
View File
@@ -1,6 +1,14 @@
import { describe, expect, it } from "vitest";
import { DEFAULT_VOLUME, normalizeVolume, stepVolume } from "./playerVolume";
import {
DEFAULT_VOLUME,
PLEX_SCALE,
YT_SCALE,
normalizeVolume,
normalizeVolumeIn,
stepVolume,
stepVolumeIn,
} from "./playerVolume";
describe("normalizeVolume", () => {
it("keeps a valid level", () => {
@@ -56,3 +64,38 @@ describe("stepVolume", () => {
expect(stepVolume(NaN, { delta: -5, fallback: 90 })).toBe(85);
});
});
describe("scale-generic core (shared by both players)", () => {
it("keeps 0..1 floats WITHOUT rounding on the Plex scale", () => {
// PLEX_SCALE.round is false — the HTML5 <video> takes a float, so 0.37 must stay 0.37 (the YT
// scale would round it to a whole percent).
expect(normalizeVolumeIn(0.37, undefined, PLEX_SCALE)).toBeCloseTo(0.37, 10);
expect(normalizeVolumeIn(1.5, undefined, PLEX_SCALE)).toBe(1); // clamps to max
expect(normalizeVolumeIn(-0.2, undefined, PLEX_SCALE)).toBe(0); // clamps to min
});
it("holds the last-known level on a corrupt Plex volume, never jumping to full", () => {
// The Plex-side latent bug this consolidation fixes: a bare clamp turned a corrupt persisted
// volume (null / "0.5" / NaN) into 0 — silently muting. The hook passes the element's CURRENT
// level as the fallback, so a corrupt read HOLDS that level rather than muting (old bug) OR
// jumping to PLEX_SCALE.default=1 / full (the failure mode the header warns against).
expect(normalizeVolumeIn(null, 0.3, PLEX_SCALE)).toBeCloseTo(0.3, 10); // holds a quiet 0.3
expect(normalizeVolumeIn("0.5", 0.3, PLEX_SCALE)).toBeCloseTo(0.3, 10);
expect(normalizeVolumeIn(NaN, 0.42, PLEX_SCALE)).toBeCloseTo(0.42, 10);
// Only when the fallback is ALSO unusable does it land on the scale default.
expect(normalizeVolumeIn(null, undefined, PLEX_SCALE)).toBe(PLEX_SCALE.default);
expect(normalizeVolumeIn(NaN, NaN, PLEX_SCALE)).toBe(PLEX_SCALE.default);
});
it("steps and clamps on the Plex scale", () => {
expect(stepVolumeIn(0.5, { delta: 0.05, fallback: 0.5 }, PLEX_SCALE)).toBeCloseTo(0.55, 10);
expect(stepVolumeIn(0.98, { delta: 0.05, fallback: 1 }, PLEX_SCALE)).toBe(1); // clamps at max
expect(stepVolumeIn(0.03, { delta: -0.05, fallback: 1 }, PLEX_SCALE)).toBe(0); // clamps at min
});
it("still rounds to whole percents on the YouTube scale via the generic core", () => {
expect(normalizeVolumeIn(42.6, undefined, YT_SCALE)).toBe(43);
expect(YT_SCALE.round).toBe(true);
expect(PLEX_SCALE.round).toBe(false);
});
});
frontend/src/lib/playerVolume.ts
+47 -12
View File
@@ -1,33 +1,68 @@
// The YouTube player's volume arithmetic, kept out of PlayerModal so it can be unit-tested. Every
// Volume arithmetic for BOTH players, kept out of the components so it can be unit-tested. Every
// rule here was established by a bug: a wheel spin that lost notches to the iframe's lagging
// getVolume, a partial stored object that became NaN and persisted as `null`, and a "corrupt →
// default" fallback that jumped an already-quiet session to full blast.
//
// The two players run on different native scales — the YouTube iframe API takes 0–100 integers, the
// HTML5 <video> element a 0..1 float with a separate `.muted` flag — so the pure core below is
// scale-agnostic (a `VolumeScale` parameterises the range, default, and integer rounding) and each
// player binds it to its own scale. The YouTube-bound wrappers keep the original 0–100 API.
/** Level used when nothing trustworthy is available. */
export const DEFAULT_VOLUME = 100;
/** A player's volume scale. `round` is true for the integer YouTube API, false for the 0..1 float. */
export interface VolumeScale {
min: number;
max: number;
/** Level used when nothing trustworthy is available. */
default: number;
round: boolean;
}
const clamp = (n: number) => Math.max(0, Math.min(100, Math.round(n)));
/** YouTube iframe API: 0–100 integers, no mute flag (level 0 IS muted). */
export const YT_SCALE: VolumeScale = { min: 0, max: 100, default: 100, round: true };
/** HTML5 <video>: a 0..1 float (mute is a separate flag the caller carries). */
export const PLEX_SCALE: VolumeScale = { min: 0, max: 1, default: 1, round: false };
function clampTo(n: number, s: VolumeScale): number {
const c = Math.max(s.min, Math.min(s.max, n));
return s.round ? Math.round(c) : c;
}
/**
* Coerce anything that claims to be a volume into a usable 0–100 level.
* Coerce anything that claims to be a volume into a usable level ON `scale`.
*
* Only a real, finite `number` is accepted: the stored blob is JSON, so a level is a number or it
* is corrupt — `null`, `undefined`, `"80"` and `NaN` all mean "we don't know", and `Number(null)`
* being `0` (silently muting the player) is exactly the coercion to avoid. `fallback` is the last
* level known to work; it is itself validated, so a corrupt value can never travel through it.
*/
export function normalizeVolume(raw: unknown, fallback: unknown = DEFAULT_VOLUME): number {
if (typeof raw === "number" && Number.isFinite(raw)) return clamp(raw);
if (typeof fallback === "number" && Number.isFinite(fallback)) return clamp(fallback);
return DEFAULT_VOLUME;
export function normalizeVolumeIn(raw: unknown, fallback: unknown, scale: VolumeScale): number {
if (typeof raw === "number" && Number.isFinite(raw)) return clampTo(raw, scale);
if (typeof fallback === "number" && Number.isFinite(fallback)) return clampTo(fallback, scale);
return scale.default;
}
/** One volume step (wheel notch / arrow key) from `current`.
/** One volume step (wheel notch / arrow key) from `current`, on `scale`.
*
* `delta` and `fallback` ride in an options object on purpose: as two adjacent `number`
* parameters they were transposable without a type error, and swapping them silently steps the
* volume BY the current level. */
export function stepVolumeIn(
current: unknown,
opts: { delta: number; fallback: unknown },
scale: VolumeScale,
): number {
return clampTo(normalizeVolumeIn(current, opts.fallback, scale) + opts.delta, scale);
}
// --- YouTube-bound convenience wrappers (0–100 integers) — the original API, behaviour unchanged. ---
/** Level used when nothing trustworthy is available (YouTube scale). */
export const DEFAULT_VOLUME = YT_SCALE.default;
export function normalizeVolume(raw: unknown, fallback: unknown = DEFAULT_VOLUME): number {
return normalizeVolumeIn(raw, fallback, YT_SCALE);
}
export function stepVolume(current: unknown, opts: { delta: number; fallback: unknown }): number {
const base = normalizeVolume(current, opts.fallback);
return clamp(base + opts.delta);
return stepVolumeIn(current, opts, YT_SCALE);
}
frontend/src/lib/plexPlayerHooks.ts
+21 -10
View File
@@ -17,7 +17,8 @@ import {
} from "./fullscreen";
import { api, type PlexItemDetail, type PlexMarker } from "./api";
import { qk } from "./queryKeys";
import { clamp01, type PlexPlayerPrefs } from "./plexPlayerPrefs";
import { type PlexPlayerPrefs } from "./plexPlayerPrefs";
import { PLEX_SCALE, normalizeVolumeIn, stepVolumeIn } from "./playerVolume";
// A live wall clock for the top bar, re-rendered every 15s (minute resolution is enough for the
// HH:MM display, and a coarse tick keeps the whole player from re-rendering each second).
@@ -138,9 +139,11 @@ export function usePlexProgress(opts: {
// Volume/mute for the Plex player's HTML5 <video> (0..1 float, independent .muted flag). Persists to
// the per-account prefs (survives F5) and re-applies on each fresh session (the element resets to its
// default volume after a load/seek-restart). NOTE: this is the Plex-side model; the YouTube player has
// its own 0-100 / no-mute-flag arithmetic in playerVolume.ts. Sharing the tested pure core across both
// is a separate R12 consolidation sprint — this hook is the seam it will rework internally.
// default volume after a load/seek-restart). The 0..1 arithmetic is the shared, unit-tested core in
// playerVolume.ts bound to PLEX_SCALE (the YouTube player binds the same core to YT_SCALE, 0–100); the
// separate .muted flag stays here since it's Plex-only. Using normalizeVolumeIn (not a bare clamp)
// means a corrupt persisted volume falls back to the element's CURRENT level (last applied) rather
// than either silently muting (the old bare clamp) or jumping to full — see playerVolume.ts's header.
export function usePlayerVolume(opts: {
videoRef: RefObject<HTMLVideoElement | null>;
volume: number;
@@ -160,21 +163,29 @@ export function usePlayerVolume(opts: {
(vol: number, mute: boolean) => {
const v = videoRef.current;
if (!v) return;
v.volume = clamp01(vol);
// Fallback = the element's current level, so a corrupt `vol` HOLDS the playing level instead
// of jumping to full (PLEX_SCALE.default). On a fresh element that current level is the
// browser default, which is the sensible "nothing to restore" value anyway.
v.volume = normalizeVolumeIn(vol, v.volume, PLEX_SCALE);
v.muted = mute;
},
[videoRef],
);
// Set volume/mute on the <video> AND persist (survives F5).
// Set volume/mute on the <video> AND persist (survives F5). Normalise ONCE so the element and the
// stored pref can never disagree; a corrupt input holds the element's current level.
const setVol = useCallback(
(vol: number, mute: boolean) => {
applyVolume(vol, mute);
patchPrefs({ volume: clamp01(vol), muted: mute });
const level = normalizeVolumeIn(vol, videoRef.current?.volume, PLEX_SCALE);
applyVolume(level, mute);
patchPrefs({ volume: level, muted: mute });
},
[applyVolume, patchPrefs],
[applyVolume, patchPrefs, videoRef],
);
const nudgeVolume = useCallback(
(d: number) => setVol(clamp01(volume + d), clamp01(volume + d) === 0),
(d: number) => {
const next = stepVolumeIn(volume, { delta: d, fallback: volume }, PLEX_SCALE);
setVol(next, next === 0);
},
[volume, setVol],
);
const toggleMute = useCallback(() => setVol(volume, !muted), [volume, muted, setVol]);
frontend/src/lib/releaseNotes.ts
+7
View File
@@ -14,6 +14,13 @@ export interface ReleaseEntry {
}
export const RELEASE_NOTES: ReleaseEntry[] = [
{
version: "0.63.3",
date: "2026-08-13",
chores: [
"Internal player cleanup: the video-player volume logic is now shared between the YouTube and Plex players (one tested core), and the Plex player's settings menu moved into its own component. No change to how either player looks or behaves.",
],
},
{
version: "0.63.2",
date: "2026-08-13",