From 7884bd3290ca09a655e45a81d7866898ac97a6cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 4 Aug 2026 19:10:44 +0000
Subject: [PATCH] jellyfin: subtitle tracks, audio picker and real player
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the sidecar now describes every audio and subtitle stream on the chosen source. a subtitle
jellyfin can deliver as an external file gets a /_jf webvtt path with the embedded ApiKey
stripped; one it cannot gets the reason instead, so the picker can show it disabled rather
than pretend it does not exist. colliding labels get their stream index — two tracks called
"English - ASS" are a coin flip otherwise.

quality is a named rung rather than a number. a bitrate the owner picks maps onto the rung
at or below it, which is what stops jellyfin's ResolutionNormalizer from inventing a
resolution from an unrounded number. auto stays absent so a copyable source still copies.

the control bar is ours in all three transports. progressive has no timeline the browser can
render, and an audio-track or quality change is a re-negotiation with the server rather than
something a <video> knows how to do — one bar for all three is what keeps those from being
three different players. the menus are hand-rolled because a radix dropdown portals to
document.body, which is outside the fullscreen element and would be invisible exactly when
the player is most likely to be used.

no scrubber thumbnails: they come from trickplay tiles and this server generates none.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/servers/sidecar/jellyfin/routes.ts        | 159 ++++++-
 .../src/apps/Jellyfin/PlayerControls.tsx      | 404 ++++++++++++++++++
 .../src/apps/Jellyfin/VideoPlayer.tsx         | 317 +++++++++++---
 .../officerdev/src/apps/Jellyfin/shared.ts    |  31 ++
 .../src/apps/Jellyfin/useJellyfinData.ts      |  12 +-
 5 files changed, 842 insertions(+), 81 deletions(-)
 create mode 100644 src/workspaces/officerdev/src/apps/Jellyfin/PlayerControls.tsx

diff --git a/src/servers/sidecar/jellyfin/routes.ts b/src/servers/sidecar/jellyfin/routes.ts
index 9c7fb67d..0b96c413 100644
--- a/src/servers/sidecar/jellyfin/routes.ts
+++ b/src/servers/sidecar/jellyfin/routes.ts
@@ -190,12 +190,24 @@ async function item(cfg: UpstreamConfig, id: string): Promise<Response> {
 
 type SourceStream = {
   Type?: string;
+  Index?: number;
   Codec?: string;
   Profile?: string;
   Level?: number;
   Width?: number;
   Height?: number;
   BitRate?: number;
+  Channels?: number;
+  Language?: string | null;
+  DisplayTitle?: string | null;
+  Title?: string | null;
+  IsDefault?: boolean;
+  IsForced?: boolean;
+  IsExternal?: boolean;
+  IsTextSubtitleStream?: boolean;
+  /** Jellyfin's own verdict for THIS profile: External (a file we can fetch), Embed, Encode, or None. */
+  DeliveryMethod?: string | null;
+  DeliveryUrl?: string | null;
 };
 
 type MediaSource = {
@@ -238,10 +250,24 @@ const COPY_CEILING_BITRATE = 120_000_000;
 const ENCODE_BITRATE = 12_000_000;
 const ENCODE_MAX_WIDTH = 1920;
 
+/**
+ * The rungs the quality picker offers, widest first. A bitrate alone is not a quality: Jellyfin's own
+ * `ResolutionNormalizer` would pair a low one with a resolution of its choosing, and the whole 416-pixel
+ * incident was that mapping being applied to a number nobody meant. Naming both here is what makes
+ * "720p" mean 720p.
+ */
+export const QUALITY_RUNGS = [
+  { label: '1080p', videoBitrate: 12_000_000, maxWidth: 1920 },
+  { label: '720p', videoBitrate: 6_000_000, maxWidth: 1280 },
+  { label: '480p', videoBitrate: 2_500_000, maxWidth: 854 },
+  { label: '360p', videoBitrate: 1_000_000, maxWidth: 640 },
+] as const;
+
 /**
  * Decide the bitrate and resolution cap to ask for, from what is actually in the file.
  *
- * The two cases pull in opposite directions, which is why this is not one constant:
+ * With no `requested` ceiling — the "Auto" the player sends by default — the two cases pull in opposite
+ * directions, which is why this is not one constant:
  *
  *   video can be copied → any cap is a reason for Jellyfin to REFUSE the copy (it will not copy a stream
  *                         above the requested bitrate, or wider than a requested `maxWidth`), so ask for a
@@ -251,8 +277,18 @@ const ENCODE_MAX_WIDTH = 1920;
  *                         CPU; downscaling to 1080p is what makes that keep up with playback.
  *
  * The copy test mirrors the profile's own conditions rather than a new opinion: h264, not 10-bit, level ≤ 5.2.
+ *
+ * A `requested` ceiling overrides both, and deliberately defeats the copy: picking 480p on a file that would
+ * have passed through untouched is asking for a re-encode, and that is the entire point of picking it.
  */
-function transcodeQuality(source: MediaSource): { videoBitrate: number; maxWidth?: number } {
+export type TranscodeQuality = { videoBitrate: number; maxWidth?: number };
+
+function transcodeQuality(source: MediaSource, requested?: number): TranscodeQuality {
+  if (requested && requested < COPY_CEILING_BITRATE) {
+    const rung = QUALITY_RUNGS.find((r) => r.videoBitrate <= requested) ?? QUALITY_RUNGS[QUALITY_RUNGS.length - 1]!;
+    return { videoBitrate: rung.videoBitrate, maxWidth: rung.maxWidth };
+  }
+
   const video = source.MediaStreams?.find((stream) => stream.Type === 'Video');
   const copyable =
     video?.Codec?.toLowerCase() === 'h264' && video.Profile?.toLowerCase() !== 'high 10' && (video.Level ?? 0) <= 52;
@@ -261,6 +297,99 @@ function transcodeQuality(source: MediaSource): { videoBitrate: number; maxWidth
   return { videoBitrate: ENCODE_BITRATE, maxWidth: ENCODE_MAX_WIDTH };
 }
 
+/** `DisplayTitle` is what Jellyfin shows in its own picker; the rest is a legible fallback when it is absent. */
+function trackLabel(stream: SourceStream, fallback: string): string {
+  const parts = [stream.DisplayTitle || stream.Title, stream.Language, stream.Codec?.toUpperCase()].filter(Boolean);
+  return (parts[0] as string) || parts.join(' · ') || fallback;
+}
+
+export type AudioTrack = {
+  index: number;
+  label: string;
+  language: string | null;
+  codec: string | null;
+  channels: number | null;
+  isDefault: boolean;
+};
+
+export type SubtitleTrack = {
+  index: number;
+  label: string;
+  language: string | null;
+  codec: string | null;
+  isDefault: boolean;
+  isForced: boolean;
+  /** A `/_jf` path to a WebVTT file, or null when this track cannot be delivered as one. */
+  url: string | null;
+  /** Why `url` is null, in words the picker can show. Null when the track is fine. */
+  unavailable: string | null;
+};
+
+/**
+ * Turn the source's streams into the two pickers the player offers.
+ *
+ * Subtitles are the interesting half. Jellyfin has already decided, for OUR profile, how each one could be
+ * delivered, and `DeliveryMethod: 'External'` with a `DeliveryUrl` means "fetch this as a file" — which for
+ * the profile's declared formats is WebVTT the `<track>` element reads directly. That is the only method
+ * taken. `Encode` means burning the subtitle into the picture, which forces a full video re-encode of a file
+ * that may have needed nothing but a remux, so an image-based track (PGS, VOBSUB) is reported as unavailable
+ * WITH ITS REASON rather than quietly dropped — "why is this subtitle missing" should be answerable from the
+ * picker instead of from the server logs.
+ */
+function describeTracks(source: MediaSource): { audio: AudioTrack[]; subtitles: SubtitleTrack[] } {
+  const streams = source.MediaStreams ?? [];
+
+  const audio = streams
+    .filter((stream) => stream.Type === 'Audio' && stream.Index !== undefined)
+    .map((stream) => ({
+      index: stream.Index!,
+      label: trackLabel(stream, `Track ${stream.Index}`),
+      language: stream.Language ?? null,
+      codec: stream.Codec ?? null,
+      channels: stream.Channels ?? null,
+      isDefault: stream.IsDefault === true,
+    }));
+
+  const subtitles = streams
+    .filter((stream) => stream.Type === 'Subtitle' && stream.Index !== undefined)
+    .map((stream) => {
+      const external = stream.DeliveryMethod === 'External' && !!stream.DeliveryUrl;
+      const graphical = stream.IsTextSubtitleStream === false;
+      return {
+        index: stream.Index!,
+        label: trackLabel(stream, `Subtitle ${stream.Index}`),
+        language: stream.Language ?? null,
+        codec: stream.Codec ?? null,
+        isDefault: stream.IsDefault === true,
+        isForced: stream.IsForced === true,
+        url: external ? `/_jf${sanitizeUpstreamPath(stream.DeliveryUrl!)}` : null,
+        unavailable: external
+          ? null
+          : graphical
+            ? 'image-based subtitles can only be burned into the video, which forces a full re-encode'
+            : `the server offered no external file for this track (delivery: ${stream.DeliveryMethod ?? 'none'})`,
+      };
+    });
+
+  return { audio: disambiguate(audio), subtitles: disambiguate(subtitles) };
+}
+
+/**
+ * Make every label in a list distinguishable.
+ *
+ * Two subtitle tracks on the same file genuinely do come back as "English - ASS" and "English - ASS" — one is
+ * usually dialogue and the other signs, and Jellyfin's own `DisplayTitle` does not say which. A picker with
+ * two identical rows is a coin flip, so colliding labels get their stream index, which at least makes the
+ * choice repeatable.
+ */
+function disambiguate<T extends { index: number; label: string }>(tracks: T[]): T[] {
+  const counts = new Map<string, number>();
+  for (const track of tracks) counts.set(track.label, (counts.get(track.label) ?? 0) + 1);
+  return tracks.map((track) =>
+    counts.get(track.label)! > 1 ? { ...track, label: `${track.label} #${track.index}` } : track,
+  );
+}
+
 /**
  * Fix up the HLS URL Jellyfin handed back so it carries the same quality decision as the progressive one.
  *
@@ -275,11 +404,10 @@ function transcodeQuality(source: MediaSource): { videoBitrate: number; maxWidth
  * Verified against a real answer from this server: the URL comes back with `VideoBitrate=119616000` and no
  * width, on an item whose transcode reason was `ContainerNotSupported` alone.
  */
-function hlsPath(source: MediaSource): string {
+function hlsPath(source: MediaSource, quality: TranscodeQuality): string {
   const sanitized = sanitizeUpstreamPath(source.TranscodingUrl!);
   const [path, search = ''] = sanitized.split('?');
   const params = new URLSearchParams(search);
-  const quality = transcodeQuality(source);
 
   // Jellyfin's own casing here is PascalCase, and its query parsing is case-insensitive — but a duplicate key
   // under a different case would still be two values, so delete before setting rather than trusting that.
@@ -315,8 +443,15 @@ function hlsPath(source: MediaSource): string {
  * `scale=…min(max(iw,ih*a),416)…` with `-maxrate 0`, i.e. 416 pixels wide. That is the whole of the "why does
  * it look so bad" question, and it is a silent, plausible-looking picture rather than an error.
  */
-function progressivePath(id: string, source: MediaSource, playSessionId: string | null, startSeconds: number): string {
-  const quality = transcodeQuality(source);
+type ProgressiveParams = {
+  id: string;
+  source: MediaSource;
+  playSessionId: string | null;
+  startSeconds: number;
+  quality: TranscodeQuality;
+};
+
+function progressivePath({ id, source, playSessionId, startSeconds, quality }: ProgressiveParams): string {
   return `/Videos/${encodeURIComponent(id)}/stream.mp4${buildQuery({
     static: 'false',
     container: 'mp4',
@@ -389,6 +524,7 @@ async function playbackInfo(cfg: UpstreamConfig, id: string, req: Request, url:
 
   const playSessionId = info.PlaySessionId ?? null;
   const direct = !!(source.SupportsDirectPlay || source.SupportsDirectStream);
+  const quality = transcodeQuality(source, body.maxStreamingBitrate);
 
   const staticPath = `/Videos/${encodeURIComponent(id)}/stream${buildQuery({
     static: 'true',
@@ -403,7 +539,7 @@ async function playbackInfo(cfg: UpstreamConfig, id: string, req: Request, url:
     : // A `TranscodingUrl` is Jellyfin agreeing to transcode. We ask for the same thing progressively
       // instead of taking its HLS URL, but its absence still means "refused", so it stays the signal.
       source.TranscodingUrl
-      ? progressivePath(id, source, playSessionId, startSeconds)
+      ? progressivePath({ id, source, playSessionId, startSeconds, quality })
       : null;
 
   if (!path) {
@@ -419,12 +555,19 @@ async function playbackInfo(cfg: UpstreamConfig, id: string, req: Request, url:
     seekable: direct,
     // The seekable form of a transcode: the playlist spans the whole runtime, so a scrub is a segment request
     // rather than a new ffmpeg. Preferred by the player whenever it is present and MSE is available.
-    hlsUrl: source.TranscodingUrl ? `/_jf${hlsPath(source)}` : null,
+    hlsUrl: source.TranscodingUrl ? `/_jf${hlsPath(source, quality)}` : null,
     playSessionId,
     mediaSourceId: source.Id ?? null,
     mediaSource: source,
     startSeconds,
     runtimeSeconds: source.RunTimeTicks ? source.RunTimeTicks / TICKS_PER_SECOND : null,
+    // The pickers. Audio needs a re-negotiation to change (it is muxed into the stream); subtitles do not,
+    // because an external VTT is a separate file the <track> element fetches on its own.
+    ...describeTracks(source),
+    audioStreamIndex: body.audioStreamIndex ?? null,
+    /** Null means Auto — the copy-or-encode decision above, rather than a rung the owner picked. */
+    maxStreamingBitrate: body.maxStreamingBitrate ?? null,
+    qualityRungs: QUALITY_RUNGS,
   });
 }
 
diff --git a/src/workspaces/officerdev/src/apps/Jellyfin/PlayerControls.tsx b/src/workspaces/officerdev/src/apps/Jellyfin/PlayerControls.tsx
new file mode 100644
index 00000000..76427db4
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Jellyfin/PlayerControls.tsx
@@ -0,0 +1,404 @@
+import type { AudioTrack, QualityRung, SubtitleTrack } from './shared';
+import { useEffect, useRef, useState } from 'react';
+import {
+  Check,
+  Gauge,
+  Languages,
+  Maximize2,
+  Minimize2,
+  Pause,
+  Play,
+  RotateCcw,
+  SkipForward,
+  Subtitles,
+  Volume1,
+  Volume2,
+  VolumeX,
+} from 'lucide-react';
+import { formatClock } from './shared';
+
+// The control bar. Ours rather than the browser's for every transport, so that the progressive fallback — whose
+// scrubber has to re-request the stream — is not a visibly different player from the seekable ones.
+//
+// THE MENUS ARE HAND-ROLLED, and that is not an oversight. A Radix/shadcn dropdown renders through a portal
+// into document.body, and body is not inside the element that went fullscreen — so every one of these would be
+// invisible exactly when the player is most likely to be used. These stay in the DOM subtree they belong to.
+
+const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+const BUTTON = 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white/90 hover:bg-white/15';
+const ROW = 'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-white/10';
+
+type MenuProps = {
+  icon: React.ReactNode;
+  label: string;
+  active?: boolean;
+  children: (close: () => void) => React.ReactNode;
+};
+
+const Menu = ({ icon, label, active, children }: MenuProps) => {
+  const [open, setOpen] = useState(false);
+  const wrapper = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointer = (ev: PointerEvent) => {
+      if (!wrapper.current?.contains(ev.target as Node)) setOpen(false);
+    };
+    const onKey = (ev: KeyboardEvent) => {
+      if (ev.key !== 'Escape') return;
+      // Escape closes the menu rather than leaving fullscreen, but only while one is open.
+      ev.stopPropagation();
+      ev.preventDefault();
+      setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointer, true);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('pointerdown', onPointer, true);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  }, [open]);
+
+  return (
+    <div ref={wrapper} className="relative shrink-0">
+      <button
+        type="button"
+        aria-label={label}
+        aria-expanded={open}
+        onClick={() => setOpen((was) => !was)}
+        className={`${BUTTON} ${active ? 'text-primary' : ''}`}
+      >
+        {icon}
+      </button>
+      {open && (
+        <div className="absolute bottom-10 right-0 z-10 max-h-72 min-w-56 overflow-y-auto rounded-lg border border-white/10 bg-black/90 p-1 text-white shadow-xl backdrop-blur">
+          <p className="px-2 py-1 text-[10px] uppercase tracking-wide text-white/40">{label}</p>
+          {children(() => setOpen(false))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+type OptionProps = { selected: boolean; onSelect: () => void; children: React.ReactNode; hint?: string | null };
+
+const Option = ({ selected, onSelect, children, hint }: OptionProps) => (
+  <button type="button" onClick={onSelect} className={ROW}>
+    <Check className={`h-3.5 w-3.5 shrink-0 ${selected ? 'opacity-100 text-primary' : 'opacity-0'}`} />
+    <span className="min-w-0 flex-1">
+      <span className="block truncate">{children}</span>
+      {hint && <span className="block truncate text-[10px] text-white/40">{hint}</span>}
+    </span>
+  </button>
+);
+
+export type PlayerControlsProps = {
+  playing: boolean;
+  position: number;
+  duration: number;
+  /** Seconds buffered ahead of the current position, as one number — the element's own ranges, flattened. */
+  bufferedTo: number;
+  /** False in progressive mode, where a scrub costs a new transcode and only commits on release. */
+  liveScrub: boolean;
+  volume: number;
+  muted: boolean;
+  rate: number;
+  fullscreen: boolean;
+  audio: AudioTrack[];
+  audioIndex: number | null;
+  subtitles: SubtitleTrack[];
+  subtitleIndex: number | null;
+  qualityRungs: QualityRung[];
+  maxBitrate: number | null;
+  /** Set while a re-negotiation is in flight, so a picker click reads as busy rather than as nothing. */
+  busy: boolean;
+  onTogglePlay: () => void;
+  onScrub: (seconds: number) => void;
+  onScrubCommit: (seconds: number) => void;
+  onSkip: (seconds: number) => void;
+  onVolume: (volume: number) => void;
+  onToggleMute: () => void;
+  onRate: (rate: number) => void;
+  onAudio: (index: number) => void;
+  onSubtitle: (index: number | null) => void;
+  onQuality: (bitrate: number | null) => void;
+  onFullscreen: () => void;
+};
+
+export const PlayerControls = (props: PlayerControlsProps) => {
+  const { position, duration, bufferedTo, liveScrub } = props;
+  const barRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState<number | null>(null);
+  const [hover, setHover] = useState<number | null>(null);
+
+  const shown = dragging ?? position;
+  const pct = (seconds: number) => (duration > 0 ? Math.min(100, Math.max(0, (seconds / duration) * 100)) : 0);
+
+  const secondsAt = (clientX: number): number => {
+    const box = barRef.current?.getBoundingClientRect();
+    if (!box || box.width === 0) return 0;
+    return Math.max(0, Math.min(duration, ((clientX - box.left) / box.width) * duration));
+  };
+
+  // Pointer capture rather than window listeners: the drag keeps tracking when the cursor leaves the bar, and
+  // it ends on the same element it started on even if that is over the video or outside the window.
+  const onPointerDown = (ev: React.PointerEvent<HTMLDivElement>) => {
+    ev.currentTarget.setPointerCapture(ev.pointerId);
+    const seconds = secondsAt(ev.clientX);
+    setDragging(seconds);
+    if (liveScrub) props.onScrub(seconds);
+  };
+
+  const onPointerMove = (ev: React.PointerEvent<HTMLDivElement>) => {
+    const seconds = secondsAt(ev.clientX);
+    setHover(seconds);
+    if (dragging === null) return;
+    setDragging(seconds);
+    // In progressive mode every intermediate value would start an ffmpeg, so only the release commits.
+    if (liveScrub) props.onScrub(seconds);
+  };
+
+  const onPointerUp = (ev: React.PointerEvent<HTMLDivElement>) => {
+    if (dragging === null) return;
+    ev.currentTarget.releasePointerCapture(ev.pointerId);
+    props.onScrubCommit(secondsAt(ev.clientX));
+    setDragging(null);
+  };
+
+  const currentSubtitle = props.subtitles.find((track) => track.index === props.subtitleIndex) ?? null;
+  const currentQuality = props.qualityRungs.find((rung) => rung.videoBitrate === props.maxBitrate) ?? null;
+
+  return (
+    <div className="bg-gradient-to-t from-black/90 to-transparent px-3 pb-2 pt-6">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <span className="w-12 shrink-0 text-right text-[11px] tabular-nums text-white/70">{formatClock(shown)}</span>
+
+          <div
+            ref={barRef}
+            role="slider"
+            tabIndex={0}
+            aria-label="Seek"
+            aria-valuemin={0}
+            aria-valuemax={Math.max(1, Math.round(duration))}
+            aria-valuenow={Math.round(shown)}
+            aria-valuetext={formatClock(shown)}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerLeave={() => setHover(null)}
+            className="group relative h-6 flex-1 cursor-pointer touch-none select-none"
+          >
+            <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-white/20">
+              <div className="h-full rounded-full bg-white/30" style={{ width: `${pct(bufferedTo)}%` }} />
+            </div>
+            <div
+              className="absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary"
+              style={{ width: `${pct(shown)}%` }}
+            />
+            <div
+              className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-hover:opacity-100"
+              style={{ left: `${pct(shown)}%`, opacity: dragging !== null ? 1 : undefined }}
+            />
+            {hover !== null && duration > 0 && (
+              <span
+                className="pointer-events-none absolute -top-5 -translate-x-1/2 rounded bg-black/80 px-1 text-[10px] tabular-nums text-white"
+                style={{ left: `${pct(hover)}%` }}
+              >
+                {formatClock(hover)}
+              </span>
+            )}
+          </div>
+
+          <span className="w-12 shrink-0 text-[11px] tabular-nums text-white/70">{formatClock(duration)}</span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={props.onTogglePlay}
+            aria-label={props.playing ? 'Pause' : 'Play'}
+            className={BUTTON}
+          >
+            {props.playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" fill="currentColor" />}
+          </button>
+          <button type="button" onClick={() => props.onSkip(-10)} aria-label="Back 10 seconds" className={BUTTON}>
+            <RotateCcw className="h-4 w-4" />
+          </button>
+          <button type="button" onClick={() => props.onSkip(30)} aria-label="Forward 30 seconds" className={BUTTON}>
+            <SkipForward className="h-4 w-4" />
+          </button>
+
+          {/* The slider stays out of the tab order on purpose — the volume button is the keyboard affordance,
+              and a range input here would swallow the arrow keys the player binds to seeking. */}
+          <div className="group/vol flex items-center">
+            <button
+              type="button"
+              onClick={props.onToggleMute}
+              aria-label={props.muted ? 'Unmute' : 'Mute'}
+              className={BUTTON}
+            >
+              {props.muted || props.volume === 0 ? (
+                <VolumeX className="h-4 w-4" />
+              ) : props.volume < 0.5 ? (
+                <Volume1 className="h-4 w-4" />
+              ) : (
+                <Volume2 className="h-4 w-4" />
+              )}
+            </button>
+            <input
+              type="range"
+              min={0}
+              max={1}
+              step={0.02}
+              tabIndex={-1}
+              value={props.muted ? 0 : props.volume}
+              onChange={(ev) => props.onVolume(Number(ev.target.value))}
+              aria-label="Volume"
+              className="h-1 w-0 cursor-pointer accent-primary opacity-0 transition-all group-hover/vol:w-20 group-hover/vol:opacity-100"
+            />
+          </div>
+
+          <span className="flex-1" />
+
+          {props.busy && <span className="mr-1 text-[10px] text-white/50">switching…</span>}
+
+          <Menu icon={<Subtitles className="h-4 w-4" />} label="Subtitles" active={props.subtitleIndex !== null}>
+            {(close) => (
+              <>
+                <Option
+                  selected={props.subtitleIndex === null}
+                  onSelect={() => {
+                    props.onSubtitle(null);
+                    close();
+                  }}
+                >
+                  Off
+                </Option>
+                {props.subtitles.length === 0 && (
+                  <p className="px-2 py-1.5 text-[11px] text-white/40">This file has no subtitle tracks.</p>
+                )}
+                {props.subtitles.map((track) =>
+                  track.url ? (
+                    <Option
+                      key={track.index}
+                      selected={props.subtitleIndex === track.index}
+                      onSelect={() => {
+                        props.onSubtitle(track.index);
+                        close();
+                      }}
+                      hint={track.isForced ? 'forced' : null}
+                    >
+                      {track.label}
+                    </Option>
+                  ) : (
+                    <p
+                      key={track.index}
+                      className="px-2 py-1.5 text-[11px] text-white/30"
+                      title={track.unavailable ?? ''}
+                    >
+                      <span className="block truncate line-through">{track.label}</span>
+                      <span className="block text-[10px]">unavailable — {track.unavailable}</span>
+                    </p>
+                  ),
+                )}
+              </>
+            )}
+          </Menu>
+
+          <Menu icon={<Languages className="h-4 w-4" />} label="Audio track">
+            {(close) => (
+              <>
+                {props.audio.map((track) => (
+                  <Option
+                    key={track.index}
+                    selected={props.audioIndex === track.index || (props.audioIndex === null && track.isDefault)}
+                    onSelect={() => {
+                      props.onAudio(track.index);
+                      close();
+                    }}
+                    hint={[track.codec?.toUpperCase(), track.channels ? `${track.channels}ch` : null]
+                      .filter(Boolean)
+                      .join(' · ')}
+                  >
+                    {track.label}
+                  </Option>
+                ))}
+                {props.audio.length <= 1 && (
+                  <p className="px-2 py-1.5 text-[11px] text-white/40">Only one audio track.</p>
+                )}
+              </>
+            )}
+          </Menu>
+
+          <Menu icon={<Gauge className="h-4 w-4" />} label="Speed and quality">
+            {(close) => (
+              <>
+                <p className="px-2 pt-1 text-[10px] uppercase tracking-wide text-white/40">Speed</p>
+                {PLAYBACK_RATES.map((rate) => (
+                  <Option
+                    key={rate}
+                    selected={props.rate === rate}
+                    onSelect={() => {
+                      props.onRate(rate);
+                      close();
+                    }}
+                  >
+                    {rate === 1 ? 'Normal' : `${rate}×`}
+                  </Option>
+                ))}
+                <p className="mt-1 border-t border-white/10 px-2 pt-2 text-[10px] uppercase tracking-wide text-white/40">
+                  Quality
+                </p>
+                <Option
+                  selected={props.maxBitrate === null}
+                  onSelect={() => {
+                    props.onQuality(null);
+                    close();
+                  }}
+                  hint="direct play or remux where possible"
+                >
+                  Auto
+                </Option>
+                {props.qualityRungs.map((rung) => (
+                  <Option
+                    key={rung.videoBitrate}
+                    selected={props.maxBitrate === rung.videoBitrate}
+                    onSelect={() => {
+                      props.onQuality(rung.videoBitrate);
+                      close();
+                    }}
+                    hint={`${Math.round(rung.videoBitrate / 1_000_000)} Mbit · forces a re-encode`}
+                  >
+                    {rung.label}
+                  </Option>
+                ))}
+              </>
+            )}
+          </Menu>
+
+          <button
+            type="button"
+            onClick={props.onFullscreen}
+            aria-label={props.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+            className={BUTTON}
+          >
+            {props.fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+          </button>
+        </div>
+
+        {(currentSubtitle || currentQuality) && (
+          <p className="truncate px-1 text-[10px] text-white/35">
+            {[
+              currentSubtitle && `subtitles: ${currentSubtitle.label}`,
+              currentQuality && `quality: ${currentQuality.label}`,
+            ]
+              .filter(Boolean)
+              .join(' · ')}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/workspaces/officerdev/src/apps/Jellyfin/VideoPlayer.tsx b/src/workspaces/officerdev/src/apps/Jellyfin/VideoPlayer.tsx
index 8bb7754a..f43de727 100644
--- a/src/workspaces/officerdev/src/apps/Jellyfin/VideoPlayer.tsx
+++ b/src/workspaces/officerdev/src/apps/Jellyfin/VideoPlayer.tsx
@@ -1,18 +1,11 @@
 import type { PlaybackPlan } from './shared';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useLocation, useSearchParams } from 'react-router';
-import { Loader2, Maximize2, Pause, Play, X } from 'lucide-react';
+import { Loader2, X } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
-import {
-  closeHref,
-  episodeLabel,
-  formatClock,
-  PLAY_PARAM,
-  streamUrl,
-  TICKS_PER_SECOND,
-  ticksToSeconds,
-} from './shared';
+import { closeHref, episodeLabel, PLAY_PARAM, streamUrl, TICKS_PER_SECOND, ticksToSeconds } from './shared';
 import { useJellyfinItem, usePlaybackPlan, usePlaystateReporter } from './useJellyfinData';
+import { PlayerControls } from './PlayerControls';
 import Hls from './vendor/hls.mjs';
 
 // The player — a full-panel overlay opened by `?play=<id>`.
@@ -21,23 +14,33 @@ import Hls from './vendor/hls.mjs';
 // file. There are three transports, and `mode` names which one is in use rather than letting the difference
 // leak out as mysterious behaviour:
 //
-//   file        — direct play or direct stream. A real byte-range resource; native controls, native seeking,
-//                 `currentTime` is the position.
+//   file        — direct play or direct stream. A real byte-range resource; native seeking, `currentTime` is
+//                 the position, and a scrub can follow the pointer.
 //   hls-mse     — a transcode, driven by the vendored hls.js over Media Source Extensions. A real timeline
 //                 too: Jellyfin's playlist is VOD and spans the whole runtime, so a scrub is a segment
-//                 request and the server moves its ffmpeg to that point.
+//                 request and the server moves its ffmpeg to that point. Committed on release, because each
+//                 intermediate position would be a real repositioning of that ffmpeg.
 //   progressive — the fallback for a browser without MSE. One endless mp4 with no length and no ranges, so
 //                 the browser CANNOT seek it: seeking means asking the server for a NEW stream at an offset,
-//                 the position is `startSeconds + currentTime`, and the scrubber has to be ours.
+//                 and the position is `startSeconds + currentTime`.
 //
-// Only that last mode is the odd one, and `hasTimeline` is the single flag every other decision here reads.
+// `hasTimeline` is the single flag every other decision here reads.
 //
 // Safari plays an m3u8 natively and is deliberately NOT given one. Segment URIs inside the playlist are
 // relative, so they inherit the playlist's path but not its `?token=` — every segment would come back 401,
 // and Safari cannot set an Authorization header the way hls.js can. Where hls.js runs (including iOS 17.1+,
 // via Managed Media Source) it is used; where it does not, progressive is the honest fallback.
+//
+// The controls are ours in every mode. Not for looks: progressive has no timeline the browser can render, and
+// an audio-track or quality change is a re-negotiation with the server rather than something a <video> knows
+// how to do. One control bar for all three is what keeps those from being three different players.
+//
+// NO SCRUBBER THUMBNAILS. They come from Jellyfin's trickplay tiles, and this server generates none
+// (`item.Trickplay` is `{}`) — a hover preview would be a permanently empty box.
 
 const PROGRESS_INTERVAL_MS = 10_000;
+const CHROME_HIDE_MS = 2_500;
+const VOLUME_KEY = 'jellyfin:volume';
 
 type Mode = 'file' | 'hls-mse' | 'progressive';
 
@@ -47,6 +50,26 @@ function transportFor(plan: PlaybackPlan): Mode {
   return 'progressive';
 }
 
+function readStoredVolume(): { volume: number; muted: boolean } {
+  try {
+    const raw = localStorage.getItem(VOLUME_KEY);
+    if (!raw) return { volume: 1, muted: false };
+    const parsed = JSON.parse(raw) as { volume?: number; muted?: boolean };
+    return { volume: Math.min(1, Math.max(0, parsed.volume ?? 1)), muted: !!parsed.muted };
+  } catch {
+    return { volume: 1, muted: false };
+  }
+}
+
+/** How far the element has buffered past the point being played, flattened to one number for the bar. */
+function bufferedAhead(video: HTMLVideoElement): number {
+  const { buffered, currentTime } = video;
+  for (let i = 0; i < buffered.length; i += 1) {
+    if (buffered.start(i) <= currentTime && buffered.end(i) >= currentTime) return buffered.end(i);
+  }
+  return currentTime;
+}
+
 export const VideoPlayer = ({ id }: { id: string }) => {
   const { token } = useClient();
   const { pathname } = useLocation();
@@ -55,11 +78,21 @@ export const VideoPlayer = ({ id }: { id: string }) => {
   const negotiate = usePlaybackPlan();
   const report = usePlaystateReporter();
 
+  const shellRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const [plan, setPlan] = useState<PlaybackPlan | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [position, setPosition] = useState(0);
-  const [paused, setPaused] = useState(false);
+  const [bufferedTo, setBufferedTo] = useState(0);
+  const [playing, setPlaying] = useState(false);
+
+  const stored = useMemo(readStoredVolume, []);
+  const [volume, setVolume] = useState(stored.volume);
+  const [muted, setMuted] = useState(stored.muted);
+  const [rate, setRate] = useState(1);
+  const [subtitleIndex, setSubtitleIndex] = useState<number | null>(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [chrome, setChrome] = useState(true);
 
   // Refs shadow the state the unmount cleanup needs. A cleanup closes over the values from the render that
   // registered it, and the last thing this component does — report where playback stopped — must use the
@@ -67,10 +100,15 @@ export const VideoPlayer = ({ id }: { id: string }) => {
   const planRef = useRef<PlaybackPlan | null>(null);
   const positionRef = useRef(0);
   const startedRef = useRef(false);
+  // The chosen track and rung, kept in refs so `open` does not have to be rebuilt (and the start-once effect
+  // re-run) every time one of them changes.
+  const audioRef = useRef<number | null>(null);
+  const bitrateRef = useRef<number | null>(null);
 
   const mode = useMemo(() => (plan ? transportFor(plan) : null), [plan]);
   const hasTimeline = mode !== null && mode !== 'progressive';
   const duration = plan?.runtimeSeconds ?? ticksToSeconds(item?.RunTimeTicks);
+  const subtitle = plan?.subtitles.find((track) => track.index === subtitleIndex && track.url) ?? null;
 
   const sendReport = useCallback(
     (action: 'playing' | 'progress' | 'stopped', isPaused = false) => {
@@ -88,7 +126,10 @@ export const VideoPlayer = ({ id }: { id: string }) => {
     [id, report],
   );
 
-  /** Open (or re-open) the stream at an offset. In progressive mode a seek is exactly this call. */
+  /**
+   * Open (or re-open) the stream. In progressive mode a seek is exactly this call; so is any audio-track or
+   * quality change in every mode, because both are decided during negotiation and baked into the stream.
+   */
   const open = useCallback(
     async (startSeconds: number) => {
       // Tell the server the previous session ended before starting another, or its ffmpeg keeps running and
@@ -96,11 +137,17 @@ export const VideoPlayer = ({ id }: { id: string }) => {
       if (planRef.current) sendReport('stopped');
       setError(null);
       try {
-        const next = await negotiate.mutateAsync({ id, startSeconds });
+        const next = await negotiate.mutateAsync({
+          id,
+          startSeconds,
+          audioStreamIndex: audioRef.current ?? undefined,
+          maxStreamingBitrate: bitrateRef.current ?? undefined,
+        });
         planRef.current = next;
         positionRef.current = next.startSeconds;
         setPlan(next);
         setPosition(next.startSeconds);
+        setBufferedTo(next.startSeconds);
       } catch (err) {
         setError((err as { message?: string } | null)?.message ?? 'Playback could not be started');
       }
@@ -164,30 +211,116 @@ export const VideoPlayer = ({ id }: { id: string }) => {
     return () => clearInterval(timer);
   }, [plan, sendReport]);
 
-  const onTimeUpdate = () => {
+  // Volume, mute and rate are element properties, not attributes — React will not set them from JSX, and they
+  // have to be re-applied after the element remounts (which in progressive mode is every scrub).
+  useEffect(() => {
     const video = videoRef.current;
-    if (!video || !plan) return;
-    // Only progressive starts the element's clock at zero for a stream that begins mid-film.
-    const next = hasTimeline ? video.currentTime : plan.startSeconds + video.currentTime;
-    positionRef.current = next;
-    setPosition(next);
-  };
+    if (!video) return;
+    video.volume = volume;
+    video.muted = muted;
+    video.playbackRate = rate;
+  }, [volume, muted, rate, plan]);
 
-  const seek = (seconds: number) => {
+  useEffect(() => {
+    localStorage.setItem(VOLUME_KEY, JSON.stringify({ volume, muted }));
+  }, [volume, muted]);
+
+  // Only the selected subtitle is rendered as a <track>, so Jellyfin is asked to extract exactly one — and
+  // `mode` has to be set imperatively because `default` only applies on the element's first parse.
+  useEffect(() => {
     const video = videoRef.current;
-    const clamped = Math.max(0, duration ? Math.min(seconds, duration - 1) : seconds);
-    if (hasTimeline && video) {
-      video.currentTime = clamped;
-      return;
+    if (!video) return;
+    for (let i = 0; i < video.textTracks.length; i += 1) {
+      video.textTracks[i]!.mode = subtitle ? 'showing' : 'disabled';
     }
-    void open(clamped);
-  };
+  }, [subtitle, plan]);
 
-  const togglePlay = () => {
+  useEffect(() => {
+    const onChange = () => setFullscreen(document.fullscreenElement === shellRef.current);
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, []);
+
+  // Auto-hide, but never while paused — a paused player with no controls looks broken rather than clean.
+  useEffect(() => {
+    if (!chrome || !playing) return;
+    const timer = setTimeout(() => setChrome(false), CHROME_HIDE_MS);
+    return () => clearTimeout(timer);
+  }, [chrome, playing, position]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      const video = videoRef.current;
+      const clamped = Math.max(0, duration ? Math.min(seconds, duration - 1) : seconds);
+      if (hasTimeline && video) {
+        video.currentTime = clamped;
+        return;
+      }
+      void open(clamped);
+    },
+    [duration, hasTimeline, open],
+  );
+
+  const togglePlay = useCallback(() => {
     const video = videoRef.current;
     if (!video) return;
     if (video.paused) void video.play().catch(() => undefined);
     else video.pause();
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    // The container, not the <video> — fullscreening the element itself would take the controls with it into
+    // a UA-drawn shell that has none of these buttons.
+    if (document.fullscreenElement) void document.exitFullscreen().catch(() => undefined);
+    else void shellRef.current?.requestFullscreen().catch(() => undefined);
+  }, []);
+
+  const changeAudio = (index: number) => {
+    audioRef.current = index;
+    void open(positionRef.current);
+  };
+
+  const changeQuality = (bitrate: number | null) => {
+    bitrateRef.current = bitrate;
+    void open(positionRef.current);
+  };
+
+  const wake = () => setChrome(true);
+
+  // Keyboard on the container rather than on window: the player is a panel inside a workspace, and stealing
+  // space or the arrow keys from whatever else is on screen would be wrong. Autofocus puts it in reach.
+  const onKeyDown = (ev: React.KeyboardEvent) => {
+    const target = ev.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return;
+    const bump = (delta: number) => setVolume((was) => Math.min(1, Math.max(0, was + delta)));
+    const keys: Record<string, () => void> = {
+      ' ': togglePlay,
+      k: togglePlay,
+      ArrowLeft: () => seek(positionRef.current - 10),
+      j: () => seek(positionRef.current - 10),
+      ArrowRight: () => seek(positionRef.current + 10),
+      l: () => seek(positionRef.current + 10),
+      ArrowUp: () => bump(0.05),
+      ArrowDown: () => bump(-0.05),
+      m: () => setMuted((was) => !was),
+      f: toggleFullscreen,
+      c: () => setSubtitleIndex((was) => (was !== null ? null : (plan?.subtitles.find((s) => s.url)?.index ?? null))),
+    };
+    const action = keys[ev.key];
+    if (!action) return;
+    ev.preventDefault();
+    wake();
+    action();
+  };
+
+  const onTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video || !plan) return;
+    // Only progressive starts the element's clock at zero for a stream that begins mid-film.
+    const offset = hasTimeline ? 0 : plan.startSeconds;
+    positionRef.current = offset + video.currentTime;
+    setPosition(offset + video.currentTime);
+    setBufferedTo(offset + bufferedAhead(video));
   };
 
   // `src` for everything except MSE, where hls.js feeds the element instead. The key remounts the element when
@@ -196,10 +329,25 @@ export const VideoPlayer = ({ id }: { id: string }) => {
 
   const close = closeHref(pathname, params, PLAY_PARAM);
   const title = item ? episodeLabel(item) : '';
+  const idle = playing && !chrome;
 
   return (
-    <div className="absolute inset-0 z-30 flex flex-col bg-black">
-      <div className="flex items-center gap-2 px-3 py-2 text-white">
+    <div
+      ref={shellRef}
+      tabIndex={-1}
+      autoFocus
+      onKeyDown={onKeyDown}
+      onPointerMove={wake}
+      onPointerDown={wake}
+      className={`absolute inset-0 z-30 bg-black outline-none ${idle ? 'cursor-none' : ''}`}
+    >
+      {/* Chrome floats OVER the video rather than sitting beside it in a column, so that going fullscreen —
+          which fullscreens this container — does not change the video's size or the layout around it. */}
+      <div
+        className={`absolute inset-x-0 top-0 z-10 flex items-center gap-2 bg-gradient-to-b from-black/80 to-transparent px-3 py-2 text-white transition-opacity ${
+          idle ? 'pointer-events-none opacity-0' : 'opacity-100'
+        }`}
+      >
         <span className="min-w-0 flex-1 truncate text-xs font-medium">{title}</span>
         {plan && plan.playMethod !== 'DirectPlay' && (
           <span className="rounded bg-white/10 px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
@@ -215,7 +363,7 @@ export const VideoPlayer = ({ id }: { id: string }) => {
         </Link>
       </div>
 
-      <div className="relative flex-1 bg-black">
+      <div className="absolute inset-0 bg-black">
         {error ? (
           <div className="flex h-full flex-col items-center justify-center gap-1 p-6 text-center text-white">
             <p className="text-sm font-medium">This will not play</p>
@@ -228,23 +376,41 @@ export const VideoPlayer = ({ id }: { id: string }) => {
             src={source ?? undefined}
             className="h-full w-full"
             autoPlay
-            // A real timeline means the browser's own controls are correct, and better than ours. Progressive
-            // has none, and native controls there would show a scrubber that does nothing.
-            controls={hasTimeline}
+            playsInline
+            onClick={togglePlay}
+            onDoubleClick={toggleFullscreen}
             onTimeUpdate={onTimeUpdate}
+            onProgress={onTimeUpdate}
             onPlay={() => {
-              setPaused(false);
+              setPlaying(true);
               sendReport('playing');
             }}
             onPause={() => {
-              setPaused(true);
+              setPlaying(false);
+              setChrome(true);
               sendReport('progress', true);
             }}
-            onEnded={() => sendReport('stopped')}
+            onEnded={() => {
+              setPlaying(false);
+              sendReport('stopped');
+            }}
             // hls.js reports its own errors through the ERROR event, and sets a MediaError on the element for
             // ones it is already recovering from — so in MSE mode this handler would fire on the recoverable.
             onError={() => mode !== 'hls-mse' && setError('The stream stopped unexpectedly.')}
-          />
+          >
+            {/* A <track> cannot send headers, so this is the `?token=` form. Safe here in a way an m3u8 is
+                not: it is one self-contained file with no relative children to lose the query string. */}
+            {subtitle && (
+              <track
+                key={subtitle.index}
+                kind="subtitles"
+                src={streamUrl(subtitle.url!, token)}
+                srcLang={subtitle.language ?? undefined}
+                label={subtitle.label}
+                default
+              />
+            )}
+          </video>
         ) : (
           <div className="flex h-full items-center justify-center text-white/60">
             <Loader2 className="h-6 w-6 animate-spin" />
@@ -252,35 +418,44 @@ export const VideoPlayer = ({ id }: { id: string }) => {
         )}
       </div>
 
-      {plan && !hasTimeline && !error && (
-        <div className="flex items-center gap-3 px-3 py-2 text-white">
-          <button type="button" onClick={togglePlay} aria-label={paused ? 'Play' : 'Pause'} className="shrink-0">
-            {paused ? <Play className="h-4 w-4" fill="currentColor" /> : <Pause className="h-4 w-4" />}
-          </button>
-          <span className="shrink-0 text-[11px] tabular-nums">{formatClock(position)}</span>
-          <input
-            type="range"
-            min={0}
-            max={Math.max(1, Math.floor(duration))}
-            value={Math.floor(position)}
-            // `onChange` fires on every pixel of a drag, and each one would start a transcode. Committing on
-            // release is what makes a scrub cost one ffmpeg instead of forty.
-            onChange={(ev) => setPosition(Number(ev.target.value))}
-            onMouseUp={(ev) => seek(Number((ev.target as HTMLInputElement).value))}
-            onTouchEnd={(ev) => seek(Number((ev.target as HTMLInputElement).value))}
-            onKeyUp={(ev) => seek(Number((ev.target as HTMLInputElement).value))}
-            className="h-1 flex-1 accent-primary"
-            aria-label="Seek"
+      {plan && !error && (
+        <div
+          className={`absolute inset-x-0 bottom-0 z-10 transition-opacity ${
+            idle ? 'pointer-events-none opacity-0' : 'opacity-100'
+          }`}
+        >
+          <PlayerControls
+            playing={playing}
+            position={position}
+            duration={duration}
+            bufferedTo={bufferedTo}
+            liveScrub={mode === 'file'}
+            volume={volume}
+            muted={muted}
+            rate={rate}
+            fullscreen={fullscreen}
+            audio={plan.audio}
+            audioIndex={plan.audioStreamIndex}
+            subtitles={plan.subtitles}
+            subtitleIndex={subtitleIndex}
+            qualityRungs={plan.qualityRungs}
+            maxBitrate={plan.maxStreamingBitrate}
+            busy={negotiate.isPending}
+            onTogglePlay={togglePlay}
+            onScrub={seek}
+            onScrubCommit={seek}
+            onSkip={(delta) => seek(positionRef.current + delta)}
+            onVolume={(next) => {
+              setVolume(next);
+              setMuted(next === 0);
+            }}
+            onToggleMute={() => setMuted((was) => !was)}
+            onRate={setRate}
+            onAudio={changeAudio}
+            onSubtitle={setSubtitleIndex}
+            onQuality={changeQuality}
+            onFullscreen={toggleFullscreen}
           />
-          <span className="shrink-0 text-[11px] tabular-nums">{formatClock(duration)}</span>
-          <button
-            type="button"
-            onClick={() => void videoRef.current?.requestFullscreen().catch(() => undefined)}
-            aria-label="Fullscreen"
-            className="shrink-0"
-          >
-            <Maximize2 className="h-4 w-4" />
-          </button>
         </div>
       )}
     </div>
diff --git a/src/workspaces/officerdev/src/apps/Jellyfin/shared.ts b/src/workspaces/officerdev/src/apps/Jellyfin/shared.ts
index 445a3cd2..e01070a8 100644
--- a/src/workspaces/officerdev/src/apps/Jellyfin/shared.ts
+++ b/src/workspaces/officerdev/src/apps/Jellyfin/shared.ts
@@ -144,6 +144,30 @@ export type HomeResponse = {
   latest: { viewId: string; viewName: string; collectionType: string | null; items: JellyItem[] }[];
 };
 
+export type AudioTrack = {
+  index: number;
+  label: string;
+  language: string | null;
+  codec: string | null;
+  channels: number | null;
+  isDefault: boolean;
+};
+
+export type SubtitleTrack = {
+  index: number;
+  label: string;
+  language: string | null;
+  codec: string | null;
+  isDefault: boolean;
+  isForced: boolean;
+  /** A `/_jf` path to a WebVTT file, or null when this track cannot be delivered as one. */
+  url: string | null;
+  /** Why `url` is null, in words the picker shows. Null when the track is fine. */
+  unavailable: string | null;
+};
+
+export type QualityRung = { label: string; videoBitrate: number; maxWidth: number };
+
 /** What `/_officer/items/{id}/playback` answers — the sidecar's own shape, not Jellyfin's. */
 export type PlaybackPlan = {
   playMethod: 'DirectPlay' | 'DirectStream' | 'Transcode';
@@ -156,6 +180,13 @@ export type PlaybackPlan = {
   mediaSource: MediaSource;
   startSeconds: number;
   runtimeSeconds: number | null;
+  audio: AudioTrack[];
+  subtitles: SubtitleTrack[];
+  /** Echoed back so the picker shows what is actually playing, not what was last clicked. */
+  audioStreamIndex: number | null;
+  /** Null means Auto — the server's own copy-or-encode decision rather than a rung the owner picked. */
+  maxStreamingBitrate: number | null;
+  qualityRungs: QualityRung[];
 };
 
 // ── Media URLs ────────────────────────────────────────────────────────────────────────────────────
diff --git a/src/workspaces/officerdev/src/apps/Jellyfin/useJellyfinData.ts b/src/workspaces/officerdev/src/apps/Jellyfin/useJellyfinData.ts
index 00a5a2f9..ba04a2ec 100644
--- a/src/workspaces/officerdev/src/apps/Jellyfin/useJellyfinData.ts
+++ b/src/workspaces/officerdev/src/apps/Jellyfin/useJellyfinData.ts
@@ -131,7 +131,14 @@ export function useItemFlags() {
 
 // ── Playback ──────────────────────────────────────────────────────────────────────────────────────
 
-export type PlaybackRequest = { id: string; startSeconds: number; mediaSourceId?: string; audioStreamIndex?: number };
+export type PlaybackRequest = {
+  id: string;
+  startSeconds: number;
+  mediaSourceId?: string;
+  audioStreamIndex?: number;
+  /** A rung the owner picked. Omitted means Auto — the server decides whether it can copy the video. */
+  maxStreamingBitrate?: number;
+};
 
 /**
  * Negotiate a stream. A mutation rather than a query on purpose: it has a side effect on the server —
@@ -141,10 +148,11 @@ export type PlaybackRequest = { id: string; startSeconds: number; mediaSourceId?
 export function usePlaybackPlan() {
   const { post } = useClient();
   return useMutation({
-    mutationFn: ({ id, startSeconds, mediaSourceId, audioStreamIndex }: PlaybackRequest) =>
+    mutationFn: ({ id, startSeconds, mediaSourceId, audioStreamIndex, maxStreamingBitrate }: PlaybackRequest) =>
       post<PlaybackPlan>(`/jellyfin/_officer/items/${id}/playback${query({ startSeconds })}`, {
         mediaSourceId,
         audioStreamIndex,
+        maxStreamingBitrate,
       }),
   });
 }