Player controls: one model, two skins (Standard, Minimal); conventional layout; controls settings

PlayerControlsModel holds the controls' state and actions once; the
Standard skin (our own, no more media_kit controls or private-state
reach-ins) and Minimal (the former uosc design, made the app's own and
credited) only draw it. One layout spec for both: play first, then
previous/next, volume, time; subtitles, audio, settings, chat,
fullscreen last; everything else in the settings menu. Settings ->
Player -> Controls: time display, size, hide delay, optional buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/desktop/lib/src/controls/control_menus.dart

@@ -0,0 +1,136 @@
+import 'package:flutter/material.dart';
+import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
+
+import '../jellyfin/track_prefs.dart' show MpvTrack;
+import '../playback/media_marks.dart';
+import '../shaders/shader_menu.dart';
+import '../shell/mark_problem.dart';
+import '../state/settings.dart';
+import '../widgets/app_menu.dart';
+import '../widgets/copy_open.dart';
+import 'frame.dart';
+import 'model/controls_layout.dart';
+import 'model/controls_model.dart';
+import 'player_settings.dart';
+
+// The controls' menus, shared by both skins: the track and chapter lists
+// and the ⚙ menu, all on the app's menu (`showAppMenu`), anchored on the
+// button that opens them. Each keeps the controls up while open.
+
+/// How many tracks of [type] there are.
+int trackCount(List<MpvTrack> tracks, JellyfinStreamType type) => tracks.where((t) => t.type == type).length;
+
+/// The audio or subtitle tracks ("Japanese · E-AC3 2.0 · title"), mpv's
+/// selection checked; subtitles start with Off.
+List<AppMenuItem<TrackPick>> trackMenuItems(JellyfinStreamType type, List<MpvTrack> tracks) {
+  final audio = type == JellyfinStreamType.audio;
+  final list = tracks.where((t) => t.type == type).toList();
+  return [
+    if (!audio)
+      AppMenuItem(
+        key: const ValueKey('track-off'),
+        value: (aid: null, sid: null, subtitlesOff: true),
+        label: 'Off',
+        checked: !list.any((t) => t.selected),
+      ),
+    if (audio && list.isEmpty)
+      const AppMenuItem(value: (aid: null, sid: null, subtitlesOff: false), label: 'None', enabled: false),
+    for (final t in list)
+      AppMenuItem(
+        key: ValueKey('track-${t.type.name}-${t.id}'),
+        value: audio ? (aid: t.id, sid: null, subtitlesOff: false) : (aid: null, sid: t.id, subtitlesOff: false),
+        label: t.label,
+        checked: t.selected,
+      ),
+  ];
+}
+
+/// Chapters with their start times, the playing one checked.
+List<AppMenuItem<MediaChapter>> chapterMenuItems(List<MediaChapter> chapters, int? current) => [
+  for (final c in chapters)
+    AppMenuItem(
+      key: ValueKey('chapter-${c.index}'),
+      value: c,
+      label: c.title.isEmpty ? 'Chapter ${c.index + 1}' : c.title,
+      hint: formatClock(c.start),
+      checked: c.index == current,
+    ),
+];
+
+Future<T?> _menu<T>(BuildContext context, PlayerControlsModel model, List<AppMenuItem<T>> items) async {
+  model.menusOpen++;
+  try {
+    return await showAppMenu<T>(context, items: items);
+  } finally {
+    model.menusOpen--;
+  }
+}
+
+/// The audio or subtitle list; a pick is applied (and remembered).
+Future<void> openTrackMenu(BuildContext context, PlayerControlsModel model, JellyfinStreamType type) async {
+  final pick = await _menu(context, model, trackMenuItems(type, model.tracks.peek()));
+  if (pick != null) model.pickTrack(pick);
+}
+
+/// The chapter list; a pick jumps there for everyone.
+Future<void> openChapterMenu(BuildContext context, PlayerControlsModel model) async {
+  final pick = await _menu(context, model, chapterMenuItems(model.chapters.peek(), model.currentChapter.peek()));
+  if (pick != null) model.pickChapter(pick);
+}
+
+/// The ⚙ menu: every action that is not a bar button.
+Future<void> openControlsMenu(BuildContext context, PlayerControlsModel model) async {
+  final s = AppSettings.instance;
+  final shader = shaderShortLabel(s.shaderPreset.peek(), s.shaderQuality.peek()) ?? 'Off';
+  final pick = await _menu(context, model, [
+    for (final a in model.menu())
+      AppMenuItem(
+        key: ValueKey('controls-menu-${a.name}'),
+        value: a,
+        label: a.label,
+        hint: a == ControlAction.shaders ? shader : a.hint,
+      ),
+  ]);
+  if (pick != null && context.mounted) await runControlAction(context, model, pick);
+}
+
+/// Runs a ⚙ menu action; [context] anchors what it opens next.
+Future<void> runControlAction(BuildContext context, PlayerControlsModel model, ControlAction action) async {
+  switch (action) {
+    case ControlAction.chapters:
+      await openChapterMenu(context, model);
+    case ControlAction.subtitles:
+      await openTrackMenu(context, model, JellyfinStreamType.subtitle);
+    case ControlAction.audio:
+      await openTrackMenu(context, model, JellyfinStreamType.audio);
+    case ControlAction.skipForward:
+      model.skipForward();
+    case ControlAction.shaders:
+      model.menusOpen++;
+      try {
+        await ControlsFrame.holdWhile(
+          context,
+          () => showShaderMenu(context, renderMode: model.renderMode, onPick: model.pickShader),
+        );
+      } finally {
+        model.menusOpen--;
+      }
+    case ControlAction.chat:
+      model.toggleChat();
+    case ControlAction.changeVideo:
+      model.changeVideo();
+    case ControlAction.copyLink:
+      final link = model.link();
+      if (link != null) await copyToClipboard(link, done: 'Link copied');
+    case ControlAction.reload:
+      model.reload();
+    case ControlAction.markAllReady:
+      model.markAllReady();
+    case ControlAction.markProblem:
+      await ControlsFrame.holdWhile(context, () => showMarkProblem(context));
+    case ControlAction.playerSettings:
+      await showPlayerSettings(context, renderMode: model.renderMode);
+    case ControlAction.leave:
+      model.leave();
+  }
+}

apps/desktop/lib/src/controls/controls_probe.dart

@@ -6,8 +6,7 @@ import 'package:flutter/material.dart';
 /// mouse on a floating element over the picture (a pill, a card, the
 /// status pill: [ControlsHoldRegion]) or an open popover. While anything
 /// holds, the controls stay up; on release they hide on their usual
-/// countdown. Both designs follow it ([ControlsHoverProbe] with
-/// media_kit's controls, `UoscControls`).
+/// countdown. Both skins follow it (through `ControlsFrame`).
 class ControlsHold extends ChangeNotifier {
   final _by = <Object>{};
   bool _told = false;
@@ -74,109 +73,3 @@ class _ControlsHoldRegionState extends State<ControlsHoldRegion> {
     );
   }
 }
-
-/// Follows whether media_kit's desktop controls around [child] are up,
-/// by the same rule they use: up on mount and on any mouse movement,
-/// down [hideAfter] later or when the mouse leaves. media_kit does not
-/// expose its visibility; this lets the player draw a progress line while
-/// they are down. With [hold] held it keeps them (and itself) up. Never
-/// takes input.
-class ControlsHoverProbe extends StatefulWidget {
-  final ValueNotifier<bool> shown;
-  final Duration hideAfter;
-  final ControlsHold? hold;
-  final Widget child;
-  const ControlsHoverProbe(
-      {super.key, required this.shown, required this.hideAfter, this.hold, required this.child});
-
-  @override
-  State<ControlsHoverProbe> createState() => _ControlsHoverProbeState();
-}
-
-class _ControlsHoverProbeState extends State<ControlsHoverProbe> {
-  Timer? _timer;
-  // While held: media_kit's own countdown is restarted before it ends.
-  Timer? _keep;
-
-  bool get _held => widget.hold?.held ?? false;
-
-  @override
-  void initState() {
-    super.initState();
-    widget.hold?.addListener(_holdChanged);
-    // Not during this build: the line listening to [shown] may be built.
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted) _wake();
-    });
-  }
-
-  @override
-  void didUpdateWidget(ControlsHoverProbe oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.hold != widget.hold) {
-      oldWidget.hold?.removeListener(_holdChanged);
-      widget.hold?.addListener(_holdChanged);
-      _holdChanged();
-    }
-  }
-
-  @override
-  void dispose() {
-    widget.hold?.removeListener(_holdChanged);
-    _timer?.cancel();
-    _keep?.cancel();
-    super.dispose();
-  }
-
-  void _holdChanged() {
-    if (!mounted) return;
-    _keep?.cancel();
-    _keep = null;
-    if (_held) {
-      _keep = Timer.periodic(widget.hideAfter * 0.5, (_) => _pokeControls());
-    }
-    _pokeControls();
-    _wake();
-  }
-
-  /// media_kit's controls state is private: a guarded dynamic call to its
-  /// hover handler, as a mouse movement on it would make.
-  void _pokeControls() {
-    if (!mounted) return;
-    void visit(Element e) {
-      if (e is StatefulElement && e.state.runtimeType.toString() == '_MaterialDesktopVideoControlsState') {
-        try {
-          (e.state as dynamic).onHover();
-        } catch (_) {}
-        return;
-      }
-      e.visitChildElements(visit);
-    }
-
-    context.visitChildElements(visit);
-  }
-
-  void _wake() {
-    widget.shown.value = true;
-    _timer?.cancel();
-    _timer = Timer(widget.hideAfter, _hide);
-  }
-
-  void _hide() {
-    _timer?.cancel();
-    if (!mounted || _held) return;
-    widget.shown.value = false;
-  }
-
-  @override
-  Widget build(BuildContext context) => MouseRegion(
-        opaque: false,
-        hitTestBehavior: HitTestBehavior.translucent,
-        onEnter: (_) => _wake(),
-        onHover: (_) => _wake(),
-        // Held (the mouse went onto a pill or the popover): media_kit's
-        // controls just hid on their own exit; bring them straight back.
-        onExit: (_) => _held ? _pokeControls() : _hide(),
-        child: widget.child,
-      );
-}

apps/desktop/lib/src/controls/frame.dart

@@ -0,0 +1,216 @@
+import 'dart:async';
+
+import 'package:flutter/gestures.dart' show kPrimaryMouseButton;
+import 'package:flutter/material.dart';
+
+import 'controls_probe.dart' show ControlsHold;
+
+// The frame both control skins live in: when the controls are up, and the
+// double-click on the picture. Mouse movement shows them; [hideAfter]
+// without any (or the mouse leaving) hides them and the cursor. Holds keep
+// them up: a seek drag (no hover events arrive), an open menu (a route
+// takes the mouse), and the session's [ControlsHold] (the mouse on a
+// floating pill or card, the Up next popover).
+
+class ControlsFrame extends StatefulWidget {
+  /// Draws the controls; [visible] false while they are hidden.
+  final Widget Function(BuildContext context, bool visible) builder;
+  final VoidCallback? onDoubleClick;
+
+  /// Bands at the top and bottom where a double-click is the bars', not
+  /// the picture's.
+  final double barTop;
+  final double barBottom;
+  final Duration hideAfter;
+
+  /// Follows whether the controls are up (for overlays outside them).
+  final ValueNotifier<bool>? shown;
+
+  /// Keeps them up while held.
+  final ControlsHold? holdBy;
+  const ControlsFrame({
+    super.key,
+    required this.builder,
+    this.onDoubleClick,
+    this.barTop = 0,
+    this.barBottom = 0,
+    this.hideAfter = const Duration(seconds: 3),
+    this.shown,
+    this.holdBy,
+  });
+
+  /// The frame around [context], for widgets that keep it up (a drag, a
+  /// menu).
+  static ControlsFrameState? maybeOf(BuildContext context) => context.findAncestorStateOfType<ControlsFrameState>();
+
+  /// Runs [open] (a menu, a popover) with the controls around [context]
+  /// held up, if there are any.
+  static Future<T> holdWhile<T>(BuildContext context, Future<T> Function() open) {
+    final frame = maybeOf(context);
+    return frame == null ? open() : frame.holdDuring(open);
+  }
+
+  /// The fade of the controls.
+  static const fade = Duration(milliseconds: 150);
+
+  @override
+  State<ControlsFrame> createState() => ControlsFrameState();
+}
+
+class ControlsFrameState extends State<ControlsFrame> {
+  bool _visible = true;
+  int _holds = 0;
+  bool _heldBy = false;
+  Timer? _timer;
+
+  bool get visible => _visible;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.holdBy?.addListener(_holdByChanged);
+    // Not during this build: an overlay listening to [shown] may be built.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted) widget.shown?.value = true;
+    });
+    _hideLater();
+  }
+
+  @override
+  void didUpdateWidget(ControlsFrame oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.holdBy != widget.holdBy) {
+      oldWidget.holdBy?.removeListener(_holdByChanged);
+      widget.holdBy?.addListener(_holdByChanged);
+      _holdByChanged();
+    }
+    if (oldWidget.hideAfter != widget.hideAfter && _visible) _hideLater();
+  }
+
+  @override
+  void dispose() {
+    widget.holdBy?.removeListener(_holdByChanged);
+    _timer?.cancel();
+    super.dispose();
+  }
+
+  void _holdByChanged() {
+    final on = widget.holdBy?.held ?? false;
+    if (on == _heldBy || !mounted) return;
+    _heldBy = on;
+    hold(on);
+  }
+
+  /// Show the controls and restart the hide countdown.
+  void wake() {
+    if (!_visible && mounted) {
+      setState(() => _visible = true);
+      widget.shown?.value = true;
+    }
+    _hideLater();
+  }
+
+  /// Keep the controls up while [on] (paired calls).
+  void hold(bool on) {
+    _holds = on ? _holds + 1 : (_holds - 1).clamp(0, 1 << 20);
+    wake();
+  }
+
+  /// Runs [open] (a menu) with the controls held up.
+  Future<T> holdDuring<T>(Future<T> Function() open) async {
+    hold(true);
+    try {
+      return await open();
+    } finally {
+      if (mounted) hold(false);
+    }
+  }
+
+  void _hideLater() {
+    _timer?.cancel();
+    _timer = Timer(widget.hideAfter, _hide);
+  }
+
+  void _hide() {
+    if (!mounted || _holds > 0 || !_visible) return;
+    setState(() => _visible = false);
+    widget.shown?.value = false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      cursor: _visible ? SystemMouseCursors.basic : SystemMouseCursors.none,
+      onEnter: (_) => wake(),
+      onHover: (_) => wake(),
+      onExit: (_) {
+        _timer?.cancel();
+        _hide();
+      },
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          if (widget.onDoubleClick != null)
+            Positioned.fill(
+              child: DoubleClickListener(
+                onDoubleClick: widget.onDoubleClick!,
+                skipTop: _visible ? widget.barTop : 0,
+                skipBottom: _visible ? widget.barBottom : 0,
+                child: const ColoredBox(color: Color(0x00000000), child: SizedBox.expand()),
+              ),
+            ),
+          widget.builder(context, _visible),
+        ],
+      ),
+    );
+  }
+}
+
+/// Double-click on the picture (not on the bars) without joining the
+/// gesture arena, so single clicks on buttons stay instant.
+class DoubleClickListener extends StatefulWidget {
+  final VoidCallback onDoubleClick;
+  final double skipTop, skipBottom;
+  final Widget child;
+  const DoubleClickListener({
+    super.key,
+    required this.onDoubleClick,
+    this.skipTop = 0,
+    this.skipBottom = 0,
+    required this.child,
+  });
+
+  @override
+  State<DoubleClickListener> createState() => _DoubleClickListenerState();
+}
+
+class _DoubleClickListenerState extends State<DoubleClickListener> {
+  DateTime? _last;
+  Offset? _lastAt;
+
+  void _down(PointerDownEvent e) {
+    if (e.buttons != kPrimaryMouseButton) return;
+    final h = context.size?.height ?? 0;
+    final y = e.localPosition.dy;
+    if (y < widget.skipTop || y > h - widget.skipBottom) {
+      _last = null;
+      return;
+    }
+    final now = DateTime.now();
+    final last = _last, at = _lastAt;
+    if (last != null &&
+        at != null &&
+        now.difference(last) < const Duration(milliseconds: 400) &&
+        (e.localPosition - at).distance < 24) {
+      _last = null;
+      widget.onDoubleClick();
+      return;
+    }
+    _last = now;
+    _lastAt = e.localPosition;
+  }
+
+  @override
+  Widget build(BuildContext context) =>
+      Listener(behavior: HitTestBehavior.translucent, onPointerDown: _down, child: widget.child);
+}

apps/desktop/lib/src/controls/minimal/minimal_controls.dart

@@ -0,0 +1,250 @@
+import 'package:flutter/material.dart';
+import 'package:signals/signals_flutter.dart';
+import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
+
+import '../../queue/queue_ui.dart';
+import '../../shell/now_playing_title.dart';
+import '../../state/settings.dart';
+import '../control_menus.dart';
+import '../controls_probe.dart' show ControlsHold;
+import '../frame.dart';
+import '../model/controls_layout.dart';
+import '../model/controls_model.dart';
+import '../model/controls_prefs.dart';
+import '../volume.dart';
+import 'style.dart';
+import 'timeline.dart';
+
+// The Minimal skin (inspired by mpv's uosc): a timeline band across the
+// bottom that carries the clock, and above it the buttons in two glass
+// capsules, in the layout's order. Top: what plays, Up next and the window
+// controls. Hidden, the band shrinks to a thin progress line (unless
+// switched off).
+
+class MinimalControls extends StatelessWidget {
+  final PlayerControlsModel model;
+  final bool visible;
+  final double scale;
+  final ControlsHold? hold;
+  final Widget? windowButtons;
+  const MinimalControls({
+    super.key,
+    required this.model,
+    required this.visible,
+    this.scale = 1,
+    this.hold,
+    this.windowButtons,
+  });
+
+  static const _rowGap = 8.0;
+
+  /// The button row's height at [scale] (a capsule).
+  static double rowHeight(double scale) => MinimalStyle.button * scale + 2 * MinimalStyle.capsulePad;
+
+  /// Buttons and timeline at [scale].
+  static double bottomHeight(double scale) => rowHeight(scale) + _rowGap + MinimalTimeline.heightFor(scale);
+
+  /// The top bar's height.
+  static const topHeight = 72.0;
+
+  @override
+  Widget build(BuildContext context) {
+    const fade = ControlsFrame.fade;
+    Widget shown(Widget child, {Key? key}) => IgnorePointer(
+      key: key,
+      ignoring: !visible,
+      child: AnimatedOpacity(duration: fade, opacity: visible ? 1 : 0, child: child),
+    );
+    return Stack(
+      children: [
+        Positioned(
+          left: 0,
+          right: 0,
+          top: 0,
+          child: shown(
+            key: const ValueKey('minimal-top'),
+            DecoratedBox(
+              decoration: const BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [Color(0x99000000), Color(0x00000000)],
+                ),
+              ),
+              child: SizedBox(
+                height: topHeight + 24,
+                child: Padding(padding: const EdgeInsets.fromLTRB(16, 0, 10, 24), child: _top()),
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              shown(
+                key: const ValueKey('minimal-buttons'),
+                Padding(
+                  padding: const EdgeInsets.fromLTRB(12, 0, 12, _rowGap),
+                  child: SizedBox(
+                    height: rowHeight(scale),
+                    child: SignalBuilder(
+                      builder: (context) {
+                        final s = model.snapshot.value;
+                        final layout = model.bar.value;
+                        // The clock lives on the timeline.
+                        List<Widget> cluster(List<BarControl> cs) => [
+                          for (final c in cs)
+                            if (c != BarControl.time) _control(context, c, s),
+                        ];
+                        return Row(
+                          children: [
+                            MinimalCapsule(scale: scale, children: cluster(layout.left)),
+                            const Spacer(),
+                            MinimalCapsule(scale: scale, children: cluster(layout.right)),
+                          ],
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+              SignalBuilder(
+                builder: (context) {
+                  final line = AppSettings.instance.progressLine.value;
+                  return AnimatedOpacity(
+                    key: const ValueKey('minimal-timeline-wrap'),
+                    duration: fade,
+                    opacity: visible || line ? 1 : 0,
+                    child: MinimalTimeline(
+                      position: model.position.value,
+                      duration: model.duration.value,
+                      buffered: model.buffered.value,
+                      chapters: model.chapters.value,
+                      expanded: visible,
+                      remaining: model.settings.timeDisplay.value == TimeDisplay.remaining,
+                      scale: scale,
+                      onSeek: model.seek,
+                      onToggleTime: model.toggleTimeDisplay,
+                    ),
+                  );
+                },
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _top() {
+    final m = model;
+    return Row(
+      children: [
+        const Expanded(
+          child: Align(alignment: AlignmentDirectional.centerStart, child: NowPlayingTitle()),
+        ),
+        UpNextButton(queue: m.queue, onPlayNextEpisode: m.playNextEpisode, look: UpNextLook.minimal, hold: hold),
+        const SizedBox(width: 4),
+        SignalBuilder(
+          builder: (context) {
+            final full = m.fullscreen.value;
+            return MinimalButton(
+              key: const ValueKey('minimal-collapse'),
+              icon: full ? Icons.fullscreen_exit_rounded : Icons.close_fullscreen_rounded,
+              tooltip: full ? 'Exit fullscreen (Esc)' : 'Back to the library (keeps playing)',
+              onPressed: full ? m.toggleFullscreen : m.collapse,
+            );
+          },
+        ),
+        ?windowButtons,
+      ],
+    );
+  }
+
+  Widget _control(BuildContext context, BarControl c, ControlsSnapshot s) {
+    final m = model;
+    final key = ValueKey('control-${c.name}');
+    final enabled = controlEnabled(c, s);
+    Widget button(VoidCallback? onPressed, {int? badge, bool accent = false}) => MinimalButton(
+      key: key,
+      icon: controlIcon(c, s),
+      tooltip: controlTooltip(c, s),
+      badge: badge,
+      accent: accent,
+      scale: scale,
+      onPressed: enabled ? onPressed : null,
+    );
+    switch (c) {
+      case BarControl.playPause:
+        return Padding(
+          padding: EdgeInsets.only(right: 4 * scale),
+          child: button(m.togglePlay, accent: true),
+        );
+      case BarControl.previous:
+        return button(m.previous);
+      case BarControl.next:
+        return button(m.next);
+      case BarControl.chapterPrevious:
+        return button(() => m.stepChapter(-1));
+      case BarControl.chapterNext:
+        return button(() => m.stepChapter(1));
+      case BarControl.volume:
+        return SignalBuilder(
+          key: key,
+          builder: (context) => VolumeControl(
+            volume: m.volume.value,
+            onChanged: m.setVolume,
+            onToggleMute: m.toggleMute,
+            sliderColor: Theme.of(context).colorScheme.primary,
+            trackColor: MinimalStyle.dim.withValues(alpha: 0.4),
+            button: (context, i, color, tip, onPressed) =>
+                MinimalButton(icon: i, tooltip: tip, color: color, scale: scale, onPressed: onPressed),
+          ),
+        );
+      case BarControl.time:
+        return const SizedBox.shrink();
+      case BarControl.subtitles || BarControl.audio:
+        final type = c == BarControl.audio ? JellyfinStreamType.audio : JellyfinStreamType.subtitle;
+        return SignalBuilder(
+          key: key,
+          builder: (context) => Builder(
+            builder: (context) => MinimalButton(
+              icon: controlIcon(c, s),
+              tooltip: controlTooltip(c, s),
+              badge: trackCount(m.tracks.value, type),
+              scale: scale,
+              onPressed: () => openTrackMenu(context, m, type),
+            ),
+          ),
+        );
+      case BarControl.settings:
+        return Builder(
+          key: key,
+          builder: (context) => MinimalButton(
+            icon: controlIcon(c, s),
+            tooltip: controlTooltip(c, s),
+            scale: scale,
+            onPressed: () => openControlsMenu(context, m),
+          ),
+        );
+      case BarControl.chat:
+        return SignalBuilder(
+          key: key,
+          builder: (context) => MinimalButton(
+            icon: controlIcon(c, s),
+            tooltip: controlTooltip(c, s),
+            badge: m.unread.value,
+            scale: scale,
+            onPressed: m.toggleChat,
+          ),
+        );
+      case BarControl.fullscreen:
+        return button(m.toggleFullscreen);
+    }
+  }
+}

apps/desktop/lib/src/controls/minimal/style.dart

@@ -0,0 +1,186 @@
+import 'package:flutter/material.dart';
+
+import '../../widgets/app_menu.dart' show AppMenuStyle;
+
+// The Minimal skin's look: the app's glass and accent (the theme's primary)
+// on a thick timeline band, with soft rounded buttons in two glass capsules.
+
+abstract final class MinimalStyle {
+  /// The timeline band (no blur: it spans the width over the picture).
+  static const band = Color(0xCC0E0E12);
+
+  /// The capsules holding the buttons: the player pills' glass.
+  static const capsule = AppMenuStyle.pillGlass;
+  static const hover = Color(0x1FFFFFFF);
+  static const text = Colors.white;
+  static const dim = Color(0xB3FFFFFF);
+  static const radius = 10.0;
+  static const fontSize = 13.0;
+
+  /// The tooltips and the timeline's hover tip.
+  static const tip = Color(0xEB18181C);
+
+  /// A button's box at scale 1.
+  static const button = 38.0;
+
+  /// The capsules' padding around the buttons.
+  static const capsulePad = 4.0;
+}
+
+/// The Minimal skin's tooltip: the app's dark glass colour, above.
+class MinimalTooltip extends StatelessWidget {
+  final String message;
+  final Widget child;
+  const MinimalTooltip({super.key, required this.message, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    if (message.isEmpty) return child;
+    return Tooltip(
+      message: message,
+      preferBelow: false,
+      verticalOffset: 28,
+      waitDuration: const Duration(milliseconds: 300),
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: MinimalStyle.tip,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: AppMenuStyle.border, width: 0.5),
+      ),
+      textStyle: const TextStyle(color: MinimalStyle.text, fontSize: 12),
+      child: child,
+    );
+  }
+}
+
+/// A Minimal button: a white icon on a rounded square that lights on hover
+/// ([accent]: filled with the theme's primary, the play button), an
+/// optional [label] and a count [badge]. Never takes focus.
+class MinimalButton extends StatefulWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback? onPressed;
+  final String? label;
+  final int? badge;
+  final bool accent;
+  final Color? color;
+  final double scale;
+  const MinimalButton({
+    super.key,
+    required this.icon,
+    required this.tooltip,
+    required this.onPressed,
+    this.label,
+    this.badge,
+    this.accent = false,
+    this.color,
+    this.scale = 1,
+  });
+
+  @override
+  State<MinimalButton> createState() => _MinimalButtonState();
+}
+
+class _MinimalButtonState extends State<MinimalButton> {
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final w = widget;
+    final primary = Theme.of(context).colorScheme.primary;
+    final onPrimary = Theme.of(context).colorScheme.onPrimary;
+    final enabled = w.onPressed != null;
+    final size = MinimalStyle.button * w.scale;
+    final fg = !enabled
+        ? MinimalStyle.dim.withValues(alpha: 0.35)
+        : w.accent
+        ? onPrimary
+        : (w.color ?? MinimalStyle.text);
+    final bg = w.accent
+        ? (_hover ? Color.lerp(primary, Colors.white, 0.18)! : primary)
+        : (_hover && enabled ? MinimalStyle.hover : Colors.transparent);
+    final badge = w.badge;
+    return MinimalTooltip(
+      message: w.tooltip,
+      child: MouseRegion(
+        cursor: enabled ? SystemMouseCursors.click : SystemMouseCursors.basic,
+        onEnter: (_) => setState(() => _hover = true),
+        onExit: (_) => setState(() => _hover = false),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: w.onPressed,
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 120),
+            height: size,
+            constraints: BoxConstraints(minWidth: size),
+            padding: EdgeInsets.symmetric(horizontal: w.label == null ? 0 : 10 * w.scale),
+            decoration: BoxDecoration(
+              color: bg,
+              borderRadius: BorderRadius.circular(w.accent ? size / 2 : MinimalStyle.radius * w.scale),
+            ),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Stack(
+                  clipBehavior: Clip.none,
+                  children: [
+                    Icon(w.icon, color: fg, size: (w.accent ? 26 : 22) * w.scale),
+                    if (badge != null && badge > 0)
+                      Positioned(
+                        right: -7,
+                        top: -5,
+                        child: Container(
+                          key: const ValueKey('minimal-badge'),
+                          padding: const EdgeInsets.symmetric(horizontal: 4),
+                          decoration: BoxDecoration(color: primary, borderRadius: BorderRadius.circular(999)),
+                          child: Text(
+                            '$badge',
+                            style: TextStyle(color: onPrimary, fontSize: 9, height: 1.35, fontWeight: FontWeight.w700),
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+                if (w.label != null) ...[
+                  SizedBox(width: 6 * w.scale),
+                  Text(
+                    w.label!,
+                    style: TextStyle(
+                      color: fg,
+                      fontSize: MinimalStyle.fontSize * w.scale,
+                      fontFeatures: const [FontFeature.tabularFigures()],
+                    ),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// A glass capsule around a row of Minimal buttons.
+class MinimalCapsule extends StatelessWidget {
+  final List<Widget> children;
+  final double scale;
+  const MinimalCapsule({super.key, required this.children, this.scale = 1});
+
+  @override
+  Widget build(BuildContext context) {
+    final r = BorderRadius.circular(MinimalStyle.radius * scale + MinimalStyle.capsulePad);
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: MinimalStyle.capsule,
+        borderRadius: r,
+        border: Border.all(color: AppMenuStyle.border, width: 0.5),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(MinimalStyle.capsulePad),
+        child: Row(mainAxisSize: MainAxisSize.min, spacing: 2, children: children),
+      ),
+    );
+  }
+}

apps/desktop/lib/src/controls/minimal/timeline.dart

@@ -0,0 +1,578 @@
+import 'dart:async';
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../playback/media_marks.dart';
+import '../frame.dart';
+import 'style.dart';
+
+// The Minimal skin's timeline: a band across the bottom with the played
+// part tinted in the accent and the position as a line, the part not
+// downloaded yet striped, chapter starts as dots on the top edge (click one
+// to jump), the elapsed time left and the total or the time left right,
+// the buffered seconds by the position while under a minute, and a tip
+// with the time (and the chapter title) under the mouse. Hidden, it shrinks
+// to a thin progress line.
+//
+// Inspired by the timeline of uosc (github.com/tomasklaen/uosc, LGPL-2.1,
+// by tomasklaen): the striped unbuffered part, the remaining time and the
+// thin line when hidden come from there. The drawing, geometry and values
+// here are our own.
+
+/// Sizes at scale 1.
+abstract final class MinimalTimelineSpec {
+  /// The band's height while the controls are up.
+  static const size = 36.0;
+
+  /// What is left of it while they are hidden.
+  static const lineSize = 3.0;
+
+  /// The position line.
+  static const lineWidth = 2.0;
+  static const fontSize = 15.0;
+
+  /// The times' inset from the ends.
+  static const inset = 12.0;
+
+  /// A chapter dot's radius (doubled-ish while hovered).
+  static const dot = 3.5;
+
+  /// The cache label shows while less than this is buffered ahead.
+  static const bufferedThreshold = Duration(seconds: 60);
+
+  /// Collapse / grow.
+  static const animation = Duration(milliseconds: 120);
+}
+
+/// Fraction of [total] at [d], 0..1 (0 without a duration).
+double timelineFraction(Duration d, Duration total) {
+  final t = total.inMicroseconds;
+  if (t <= 0) return 0;
+  return (d.inMicroseconds / t).clamp(0.0, 1.0);
+}
+
+/// Where the part not downloaded yet starts (it runs to the end), as a
+/// fraction; null when nothing known is missing. We know only the end of
+/// mpv's cache ahead ([buffered]); a cache within half a second of the end
+/// leaves nothing.
+double? uncachedFrom({required Duration position, required Duration buffered, required Duration duration}) {
+  if (duration <= Duration.zero || buffered <= Duration.zero) return null;
+  final from = buffered > position ? buffered : position;
+  if (duration - from <= const Duration(milliseconds: 500)) return null;
+  return timelineFraction(from, duration);
+}
+
+/// The cache label by the position ("12s"): the seconds buffered ahead,
+/// while under [MinimalTimelineSpec.bufferedThreshold] and the cache does
+/// not reach the end.
+String? cacheLabel({required Duration position, required Duration buffered, required Duration duration}) {
+  if (duration <= Duration.zero || buffered <= Duration.zero) return null;
+  if (duration - buffered <= const Duration(milliseconds: 500)) return null;
+  final ahead = buffered > position ? buffered - position : Duration.zero;
+  if (ahead >= MinimalTimelineSpec.bufferedThreshold) return null;
+  return '${(ahead.inMilliseconds / 1000).round()}s';
+}
+
+/// The band's height while it animates between hidden (0) and shown (1).
+double minimalBandSize(double visibility, double scale) =>
+    MinimalTimelineSpec.lineSize +
+    ((MinimalTimelineSpec.size * scale - MinimalTimelineSpec.lineSize) * visibility).roundToDouble();
+
+/// The Minimal timeline. [expanded] false (the controls hidden) shrinks it,
+/// animated, to the progress line. Seeks ([onSeek]) on press, on every drag
+/// move and on release; a press on a hovered chapter dot jumps to that
+/// chapter, one on the right-hand time switches it ([onToggleTime]).
+class MinimalTimeline extends StatefulWidget {
+  final Duration position;
+  final Duration duration;
+
+  /// End of the cached range.
+  final Duration buffered;
+  final List<MediaChapter> chapters;
+  final bool expanded;
+
+  /// The right-hand time: the time left instead of the total.
+  final bool remaining;
+  final double scale;
+  final ValueChanged<Duration> onSeek;
+  final VoidCallback? onToggleTime;
+  const MinimalTimeline({
+    super.key,
+    required this.position,
+    required this.duration,
+    this.buffered = Duration.zero,
+    this.chapters = const [],
+    this.expanded = true,
+    this.remaining = true,
+    this.scale = 1,
+    required this.onSeek,
+    this.onToggleTime,
+  });
+
+  static double heightFor(double scale) => MinimalTimelineSpec.size * scale;
+  static const collapsedHeight = MinimalTimelineSpec.lineSize;
+
+  @override
+  State<MinimalTimeline> createState() => _MinimalTimelineState();
+}
+
+class _MinimalTimelineState extends State<MinimalTimeline> {
+  Offset? _hover;
+  bool _dragging = false;
+  double _dragFraction = 0;
+  Duration? _lastSent;
+  // A released seek, shown until the position catches up (else the line
+  // jumps back to the old position for a moment).
+  double? _pending;
+  Timer? _pendingTimer;
+
+  double get _scale => widget.scale;
+  Duration _at(double fraction) => widget.duration * fraction.clamp(0.0, 1.0);
+
+  void _send(Duration d) {
+    if (d == _lastSent) return;
+    _lastSent = d;
+    widget.onSeek(d);
+  }
+
+  void _drag(bool on) {
+    if (_dragging == on) return;
+    setState(() => _dragging = on);
+    ControlsFrame.maybeOf(context)?.hold(on);
+  }
+
+  void _settle(double fraction) {
+    _pending = fraction;
+    _pendingTimer?.cancel();
+    _pendingTimer = Timer(const Duration(seconds: 2), () {
+      if (mounted) setState(() => _pending = null);
+    });
+  }
+
+  @override
+  void didUpdateWidget(MinimalTimeline old) {
+    super.didUpdateWidget(old);
+    if (!widget.expanded && old.expanded) _hover = null;
+    final p = _pending;
+    if (p != null && widget.duration > Duration.zero) {
+      final off = (widget.position - _at(p)).abs();
+      if (off < const Duration(milliseconds: 1500)) {
+        _pending = null;
+        _pendingTimer?.cancel();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _pendingTimer?.cancel();
+    // A drag cut short by a rebuild must not keep the controls up.
+    if (_dragging) ControlsFrame.maybeOf(context)?.hold(false);
+    super.dispose();
+  }
+
+  double _dotRadius(bool hovered) => MinimalTimelineSpec.dot * _scale * (hovered ? 1.7 : 1);
+
+  /// The chapter whose dot is within reach of [at].
+  int? _hoveredChapter(double width, List<MediaChapter> marks, Offset? at) {
+    if (at == null || _dragging) return null;
+    final reach = _dotRadius(false) * 2.5;
+    int? best;
+    var bestD = double.infinity;
+    for (var i = 0; i < marks.length; i++) {
+      final cx = width * timelineFraction(marks[i].start, widget.duration);
+      final d = (Offset(cx, 0) - at).distance;
+      if (d <= reach && d < bestD) {
+        best = i;
+        bestD = d;
+      }
+    }
+    return best;
+  }
+
+  String? _rightText(Duration shown) {
+    final d = widget.duration;
+    if (d <= Duration.zero) return null;
+    if (!widget.remaining) return formatClock(d);
+    final left = d - shown;
+    return '-${formatClock(left.isNegative ? Duration.zero : left)}';
+  }
+
+  // The painter's text takes the app's font (a TextPainter does not
+  // inherit it).
+  String? _font;
+
+  TextStyle get _timeStyle => TextStyle(
+    fontFamily: _font,
+    color: MinimalStyle.text,
+    fontSize: MinimalTimelineSpec.fontSize * _scale,
+    height: 1,
+    fontWeight: FontWeight.w500,
+    fontFeatures: const [FontFeature.tabularFigures()],
+  );
+
+  /// Where the right-hand time sits (a press there switches it).
+  bool _onRightTime(Offset at, double width, String? text) {
+    if (text == null || widget.onToggleTime == null) return false;
+    final tp = TextPainter(
+      text: TextSpan(text: text, style: _timeStyle),
+      textDirection: TextDirection.ltr,
+    )..layout();
+    return at.dx >= width - MinimalTimelineSpec.inset * _scale - tp.width - 6;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _font = DefaultTextStyle.of(context).style.fontFamily ?? Theme.of(context).textTheme.bodyMedium?.fontFamily;
+    return LayoutBuilder(
+      builder: (context, constraints) => TweenAnimationBuilder<double>(
+        tween: Tween(end: widget.expanded ? 1 : 0),
+        duration: MinimalTimelineSpec.animation,
+        builder: (context, visibility, _) => _band(context, constraints.maxWidth, visibility),
+      ),
+    );
+  }
+
+  Widget _band(BuildContext context, double width, double visibility) {
+    final expanded = widget.expanded;
+    final duration = widget.duration;
+    final size = minimalBandSize(visibility, _scale);
+    final progress = _dragging ? _dragFraction : (_pending ?? timelineFraction(widget.position, duration));
+    final shown = _at(progress);
+    final marks = duration > Duration.zero ? widget.chapters : const <MediaChapter>[];
+    final hover = expanded ? _hover : null;
+    final hovered = _hoveredChapter(width, marks, hover);
+    final hoverFraction = hovered != null
+        ? timelineFraction(marks[hovered].start, duration)
+        : (hover == null || duration <= Duration.zero || width <= 0 ? null : (hover.dx / width).clamp(0.0, 1.0));
+    final hoverAt = hoverFraction == null ? null : _at(hoverFraction);
+    final cursorX = hoverFraction == null ? null : width * hoverFraction;
+    final hoverChapter = hoverAt == null ? null : chapterIndexAt(widget.chapters, hoverAt);
+    final hoverTitle = hoverChapter == null ? '' : widget.chapters[hoverChapter].title;
+    // Text fades out before it would overflow the shrinking band.
+    final minText = MinimalTimelineSpec.fontSize * _scale;
+    final textOpacity = ((size - minText) / (minText / 2)).clamp(0.0, 1.0);
+    final right = _rightText(shown);
+    final primary = Theme.of(context).colorScheme.primary;
+    final painter = MinimalTimelinePainter(
+      progress: progress,
+      visibility: visibility,
+      accent: primary,
+      scale: _scale,
+      uncached: uncachedFrom(position: widget.position, buffered: widget.buffered, duration: duration),
+      chapters: [for (final c in marks) timelineFraction(c.start, duration)],
+      hoveredChapter: hovered,
+      hoverX: hovered == null ? cursorX : null,
+      textOpacity: textOpacity,
+      elapsed: duration > Duration.zero ? formatClock(shown) : null,
+      right: right,
+      cache: cacheLabel(position: widget.position, buffered: widget.buffered, duration: duration),
+      timeStyle: _timeStyle,
+    );
+    final bar = SizedBox(
+      key: const ValueKey('minimal-timeline'),
+      width: width,
+      height: size,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned.fill(
+            child: RepaintBoundary(child: CustomPaint(painter: painter)),
+          ),
+          if (hoverAt != null && cursorX != null)
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: size + 8,
+              height: 120,
+              child: IgnorePointer(
+                child: CustomMultiChildLayout(
+                  delegate: _TipLayout(x: cursorX),
+                  children: [
+                    LayoutId(
+                      id: #tip,
+                      child: _HoverTip(time: formatClock(hoverAt), chapter: hoverTitle, scale: _scale),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+    if (!expanded) return IgnorePointer(child: bar);
+    Offset clampTo(Offset p) => Offset(p.dx.clamp(0.0, width), p.dy);
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      onEnter: (e) => setState(() => _hover = clampTo(e.localPosition)),
+      onHover: (e) => setState(() => _hover = clampTo(e.localPosition)),
+      onExit: (_) {
+        if (!_dragging) setState(() => _hover = null);
+      },
+      child: Listener(
+        behavior: HitTestBehavior.opaque,
+        onPointerDown: (e) {
+          if (width <= 0) return;
+          final at = clampTo(e.localPosition);
+          if (_onRightTime(at, width, right)) {
+            widget.onToggleTime?.call();
+            return;
+          }
+          if (duration <= Duration.zero) return;
+          final chapter = _hoveredChapter(width, marks, at);
+          _lastSent = null;
+          if (chapter != null) {
+            _settle(timelineFraction(marks[chapter].start, duration));
+            _send(marks[chapter].start);
+            setState(() {});
+            return;
+          }
+          _pending = null;
+          _dragFraction = (at.dx / width).clamp(0.0, 1.0);
+          _drag(true);
+          _send(_at(_dragFraction));
+        },
+        onPointerMove: (e) {
+          if (!_dragging) return;
+          final at = clampTo(e.localPosition);
+          setState(() {
+            _hover = at;
+            _dragFraction = (at.dx / width).clamp(0.0, 1.0);
+          });
+          _send(_at(_dragFraction));
+        },
+        onPointerUp: (e) {
+          if (!_dragging) return;
+          _send(_at(_dragFraction));
+          _settle(_dragFraction);
+          final p = e.localPosition;
+          if (p.dx < 0 || p.dx > width || p.dy < 0 || p.dy > size) _hover = null;
+          _drag(false);
+        },
+        onPointerCancel: (_) => _drag(false),
+        child: bar,
+      ),
+    );
+  }
+}
+
+class _HoverTip extends StatelessWidget {
+  final String time;
+  final String chapter;
+  final double scale;
+  const _HoverTip({required this.time, required this.chapter, required this.scale});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: const BoxConstraints(maxWidth: 360),
+      padding: EdgeInsets.symmetric(horizontal: 10 * scale, vertical: 5 * scale),
+      decoration: BoxDecoration(
+        color: MinimalStyle.tip,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: const Color(0x1FFFFFFF), width: 0.5),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (chapter.isNotEmpty)
+            Text(
+              chapter,
+              key: const ValueKey('minimal-hover-chapter'),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(color: MinimalStyle.text, fontSize: 13 * scale, fontWeight: FontWeight.w600),
+            ),
+          Text(
+            time,
+            key: const ValueKey('minimal-hover-time'),
+            style: TextStyle(
+              color: chapter.isEmpty ? MinimalStyle.text : MinimalStyle.dim,
+              fontSize: 13 * scale,
+              fontFeatures: const [FontFeature.tabularFigures()],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// The hover tip centred on [x], kept inside the band's ends.
+class _TipLayout extends MultiChildLayoutDelegate {
+  final double x;
+  _TipLayout({required this.x});
+
+  @override
+  void performLayout(Size size) {
+    const gap = 4.0;
+    final tip = layoutChild(#tip, BoxConstraints.loose(size));
+    final left = (x - tip.width / 2).clamp(gap, math.max(gap, size.width - gap - tip.width)).toDouble();
+    positionChild(#tip, Offset(left, size.height - tip.height));
+  }
+
+  @override
+  bool shouldRelayout(_TipLayout old) => old.x != x;
+}
+
+/// Paints the band: background, the played tint and the (white) position
+/// line, the stripes over the part not downloaded, chapter marks, the
+/// times, the hover line.
+class MinimalTimelinePainter extends CustomPainter {
+  /// The playing position, 0..1.
+  final double progress;
+
+  /// 0 hidden .. 1 shown.
+  final double visibility;
+  final Color accent;
+  final double scale;
+
+  /// Start of the part not downloaded (to the end), as a fraction.
+  final double? uncached;
+
+  /// Chapter starts, as fractions.
+  final List<double> chapters;
+  final int? hoveredChapter;
+  final double? hoverX;
+  final double textOpacity;
+  final String? elapsed;
+  final String? right;
+  final String? cache;
+  final TextStyle timeStyle;
+  const MinimalTimelinePainter({
+    required this.progress,
+    this.visibility = 1,
+    this.accent = Colors.white,
+    this.scale = 1,
+    this.uncached,
+    this.chapters = const [],
+    this.hoveredChapter,
+    this.hoverX,
+    this.textOpacity = 1,
+    this.elapsed,
+    this.right,
+    this.cache,
+    this.timeStyle = const TextStyle(fontSize: MinimalTimelineSpec.fontSize),
+  });
+
+  /// x of the position line's centre.
+  double lineX(double width) {
+    final lw = MinimalTimelineSpec.lineWidth * scale;
+    return (width * progress).clamp(lw / 2, math.max(lw / 2, width - lw / 2));
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final w = size.width, h = size.height;
+    final x = lineX(w);
+    final band = Offset.zero & size;
+    // The band, darker as it grows; hidden, a faint track.
+    canvas.drawRect(band, Paint()..color = Color.lerp(const Color(0x40FFFFFF), MinimalStyle.band, visibility)!);
+    // Played: an accent tint, solid once the band is a line.
+    canvas.drawRect(
+      Rect.fromLTRB(0, 0, x, h),
+      Paint()..color = accent.withValues(alpha: 0.28 + 0.72 * (1 - visibility)),
+    );
+    _stripes(canvas, w, h);
+    _chapters(canvas, w, h);
+    if (visibility > 0) {
+      final lw = MinimalTimelineSpec.lineWidth * scale;
+      canvas.drawRect(
+        Rect.fromLTRB(x - lw / 2, 0, x + lw / 2, h),
+        Paint()..color = Colors.white.withValues(alpha: visibility),
+      );
+    }
+    if (textOpacity > 0) _times(canvas, w, h, x);
+    final hx = hoverX;
+    if (hx != null) {
+      canvas.drawRect(Rect.fromLTRB(hx - 0.5, 0, hx + 0.5, h), Paint()..color = Colors.white.withValues(alpha: 0.45));
+    }
+  }
+
+  /// Thin 45° stripes over the part not downloaded yet.
+  void _stripes(Canvas canvas, double w, double h) {
+    final from = uncached;
+    if (from == null) return;
+    final ax = (w * from).floorToDouble();
+    if (ax >= w) return;
+    final period = 7.0 * scale;
+    canvas.save();
+    canvas.clipRect(Rect.fromLTRB(ax, 0, w, h));
+    final paint = Paint()
+      ..color = Colors.white.withValues(alpha: 0.10 + 0.08 * (1 - visibility))
+      ..strokeWidth = 1.5 * scale;
+    for (var c = (ax / period).floorToDouble() * period - h; c <= w; c += period) {
+      canvas.drawLine(Offset(c, h), Offset(c + h, 0), paint);
+    }
+    canvas.restore();
+  }
+
+  void _chapters(Canvas canvas, double w, double h) {
+    final cut = Paint()..color = Colors.black.withValues(alpha: 0.55);
+    for (final f in chapters) {
+      if (f <= 0) continue;
+      final cx = w * f;
+      canvas.drawRect(Rect.fromLTRB(cx - 0.5, 0, cx + 0.5, h), cut);
+    }
+    if (visibility <= 0) return;
+    final r = MinimalTimelineSpec.dot * scale * visibility;
+    void dot(double f, double radius, Color fill) {
+      final c = Offset(w * f, 0);
+      canvas.drawCircle(c, radius + 1, Paint()..color = Colors.black.withValues(alpha: 0.7));
+      canvas.drawCircle(c, radius, Paint()..color = fill);
+    }
+
+    // Not at 0: the band's start says that already.
+    for (var i = 0; i < chapters.length; i++) {
+      if (i != hoveredChapter && chapters[i] > 0) dot(chapters[i], r, Colors.white.withValues(alpha: 0.9));
+    }
+    final hv = hoveredChapter;
+    if (hv != null && hv < chapters.length) dot(chapters[hv], r * 1.7, accent);
+  }
+
+  TextPainter _text(String s, TextStyle style) => TextPainter(
+    text: TextSpan(text: s, style: style),
+    textDirection: TextDirection.ltr,
+  )..layout();
+
+  /// White text with a soft shadow, so it reads over the accent tint too.
+  void _label(Canvas canvas, String s, TextStyle style, Offset at) {
+    final o = textOpacity;
+    _text(
+      s,
+      style.copyWith(
+        color: (style.color ?? Colors.white).withValues(alpha: o),
+        shadows: [Shadow(color: Colors.black.withValues(alpha: 0.8 * o), blurRadius: 3)],
+      ),
+    ).paint(canvas, at);
+  }
+
+  void _times(Canvas canvas, double w, double h, double lineX) {
+    final inset = MinimalTimelineSpec.inset * scale;
+    final fs = timeStyle.fontSize ?? MinimalTimelineSpec.fontSize;
+    final cy = h / 2;
+    final e = elapsed, r = right;
+    final ew = e == null ? 0.0 : _text(e, timeStyle).width;
+    final rw = r == null ? 0.0 : _text(r, timeStyle).width;
+    final c = cache;
+    if (c != null) {
+      final cs = timeStyle.copyWith(fontSize: fs * 0.8, color: MinimalStyle.dim);
+      final cw = _text(c, cs).width;
+      const margin = 6.0;
+      var x = lineX + margin;
+      final minX = inset + margin + ew, maxX = w - inset - margin - rw;
+      if (x < minX) {
+        x = minX;
+      } else if (x + cw > maxX) {
+        x = maxX - cw;
+      }
+      _label(canvas, c, cs, Offset(x, cy - fs * 0.4));
+    }
+    if (e != null) _label(canvas, e, timeStyle, Offset(inset, cy - fs / 2));
+    if (r != null) _label(canvas, r, timeStyle, Offset(w - inset - rw, cy - fs / 2));
+  }
+
+  @override
+  bool shouldRepaint(MinimalTimelinePainter old) => true;
+}

apps/desktop/lib/src/controls/model/controls_layout.dart

@@ -0,0 +1,235 @@
+import 'package:flutter/material.dart' show IconData, Icons;
+
+import '../../playback/media_marks.dart' show formatClock;
+import 'controls_prefs.dart';
+
+// The controls layout, defined once for both skins: which controls the
+// bottom bar has, in which order, which actions sit in the ⚙ menu instead,
+// and their icons, tooltips and labels. Pure: everything here is a
+// function of a [ControlsSnapshot] and the user's choices, so tests cover
+// it without a player.
+
+/// What playback does as this viewer sees it. In a server "play" is being
+/// ready: the video plays once everyone is.
+enum PlayState {
+  /// The video plays (the button pauses: you go unready).
+  playing,
+
+  /// You are ready; the others are not yet (the button unreadies you).
+  waiting,
+
+  /// You are not ready (the button readies you).
+  paused,
+
+  /// The media ended.
+  finished,
+}
+
+/// A control in the bottom bar.
+enum BarControl {
+  playPause,
+
+  /// Previous episode.
+  previous,
+
+  /// Up next's first item, else the next episode.
+  next,
+  chapterPrevious,
+  chapterNext,
+  volume,
+  time,
+  subtitles,
+  audio,
+
+  /// ⚙: everything that is not a bar button.
+  settings,
+  chat,
+  fullscreen,
+}
+
+/// An action in the ⚙ menu.
+enum ControlAction {
+  chapters('Chapters…', null),
+  subtitles('Subtitles…', null),
+  audio('Audio…', null),
+  skipForward('Skip 1:30', 'Shift+Right'),
+  shaders('Upscaling shader…', 'Ctrl+0…6'),
+  chat('Chat & activity', 'Tab'),
+  changeVideo('Change video', null),
+  copyLink('Copy link', null),
+  reload('Reload video', 'Ctrl+R'),
+  markAllReady('Mark everyone ready', null),
+  markProblem('Mark a problem', 'Ctrl+Shift+B'),
+  playerSettings('Player settings…', null),
+  leave('Leave server', null);
+
+  final String label;
+  final String? hint;
+  const ControlAction(this.label, this.hint);
+}
+
+/// The bar's order, left cluster then right cluster. The play button is
+/// always first and fullscreen always last; controls that do not apply
+/// (no episode, no chapters) or that the user hid are left out, the rest
+/// keep their order.
+abstract final class ControlsLayout {
+  static const left = [
+    BarControl.playPause,
+    BarControl.previous,
+    BarControl.next,
+    BarControl.chapterPrevious,
+    BarControl.chapterNext,
+    BarControl.volume,
+    BarControl.time,
+  ];
+  static const right = [
+    BarControl.subtitles,
+    BarControl.audio,
+    BarControl.settings,
+    BarControl.chat,
+    BarControl.fullscreen,
+  ];
+
+  /// The ⚙ menu's order.
+  static const menu = ControlAction.values;
+}
+
+/// What the layout depends on, at one moment.
+class ControlsSnapshot {
+  final PlayState play;
+
+  /// The previous episode's label; null: none.
+  final String? previousLabel;
+
+  /// Up next's first item's title, else the next episode's label; null:
+  /// nothing next.
+  final String? nextLabel;
+
+  /// [nextLabel] is Up next (not an episode).
+  final bool nextIsUpNext;
+  final bool hasChapters;
+
+  /// The media's length is known (seeks and skips make sense).
+  final bool hasDuration;
+
+  /// Watching alone (no one to mark ready).
+  final bool solo;
+
+  /// A link to copy (`SessionCoordinator.currentLink`).
+  final bool hasLink;
+  final bool fullscreen;
+  final bool chatOpen;
+  const ControlsSnapshot({
+    this.play = PlayState.paused,
+    this.previousLabel,
+    this.nextLabel,
+    this.nextIsUpNext = false,
+    this.hasChapters = false,
+    this.hasDuration = false,
+    this.solo = false,
+    this.hasLink = false,
+    this.fullscreen = false,
+    this.chatOpen = false,
+  });
+}
+
+/// The bar's two clusters for [s], in [ControlsLayout] order.
+({List<BarControl> left, List<BarControl> right}) barControls(ControlsSnapshot s, Set<OptionalControl> hidden) {
+  bool on(BarControl c) => switch (c) {
+    BarControl.previous => s.previousLabel != null,
+    BarControl.next => s.nextLabel != null,
+    BarControl.chapterPrevious || BarControl.chapterNext => s.hasChapters && !hidden.contains(OptionalControl.chapters),
+    BarControl.subtitles => !hidden.contains(OptionalControl.subtitles),
+    BarControl.audio => !hidden.contains(OptionalControl.audio),
+    BarControl.chat => !hidden.contains(OptionalControl.chat),
+    _ => true,
+  };
+  return (
+    left: [
+      for (final c in ControlsLayout.left)
+        if (on(c)) c,
+    ],
+    right: [
+      for (final c in ControlsLayout.right)
+        if (on(c)) c,
+    ],
+  );
+}
+
+/// The ⚙ menu for [s]: every action that applies, minus those the bar
+/// already shows.
+List<ControlAction> menuActions(ControlsSnapshot s, Set<OptionalControl> hidden) => [
+  for (final a in ControlsLayout.menu)
+    if (switch (a) {
+      ControlAction.chapters => s.hasChapters,
+      ControlAction.subtitles => hidden.contains(OptionalControl.subtitles),
+      ControlAction.audio => hidden.contains(OptionalControl.audio),
+      ControlAction.skipForward => s.hasDuration,
+      ControlAction.chat => hidden.contains(OptionalControl.chat),
+      ControlAction.copyLink => s.hasLink,
+      ControlAction.markAllReady => !s.solo,
+      _ => true,
+    })
+      a,
+];
+
+/// Whether a bar control does something now (a skin dims it otherwise).
+bool controlEnabled(BarControl c, ControlsSnapshot s) => switch (c) {
+  BarControl.chapterPrevious || BarControl.chapterNext => s.hasChapters && s.hasDuration,
+  BarControl.previous => s.previousLabel != null,
+  BarControl.next => s.nextLabel != null,
+  _ => true,
+};
+
+/// The icon of a bar control (volume and the clock draw their own).
+IconData controlIcon(BarControl c, ControlsSnapshot s) => switch (c) {
+  BarControl.playPause => switch (s.play) {
+    PlayState.playing => Icons.pause_rounded,
+    // Ready: the check says so; a click unreadies.
+    PlayState.waiting => Icons.check_rounded,
+    PlayState.finished => Icons.replay_rounded,
+    PlayState.paused => Icons.play_arrow_rounded,
+  },
+  BarControl.previous => Icons.skip_previous_rounded,
+  BarControl.next => Icons.skip_next_rounded,
+  BarControl.chapterPrevious => Icons.chevron_left_rounded,
+  BarControl.chapterNext => Icons.chevron_right_rounded,
+  BarControl.volume => Icons.volume_up_rounded,
+  BarControl.time => Icons.schedule_rounded,
+  BarControl.subtitles => Icons.subtitles_outlined,
+  BarControl.audio => Icons.graphic_eq_rounded,
+  BarControl.settings => Icons.settings_outlined,
+  BarControl.chat => s.chatOpen ? Icons.chat_bubble_rounded : Icons.chat_bubble_outline_rounded,
+  BarControl.fullscreen => s.fullscreen ? Icons.fullscreen_exit_rounded : Icons.fullscreen_rounded,
+};
+
+/// The tooltip of a bar control, with its key.
+String controlTooltip(BarControl c, ControlsSnapshot s) => switch (c) {
+  BarControl.playPause => switch (s.play) {
+    PlayState.playing => 'Pause for everyone (Space)',
+    PlayState.waiting => 'Ready, waiting for the others (Space: not ready)',
+    PlayState.paused => s.solo ? 'Play (Space)' : 'Ready: play when everyone is (Space)',
+    PlayState.finished => 'Ready (Space)',
+  },
+  BarControl.previous => 'Previous: ${s.previousLabel ?? ''}  (< or Shift+P)',
+  BarControl.next => '${s.nextIsUpNext ? 'Up next' : 'Next'}: ${s.nextLabel ?? ''}  (> or Shift+N)',
+  BarControl.chapterPrevious => 'Previous chapter (PgUp)',
+  BarControl.chapterNext => 'Next chapter (PgDn)',
+  BarControl.volume => 'Volume (scroll, ↑ / ↓)',
+  BarControl.time => 'Elapsed / remaining (click to switch)',
+  BarControl.subtitles => 'Subtitles',
+  BarControl.audio => 'Audio',
+  BarControl.settings => 'Settings and more',
+  BarControl.chat => 'Chat & activity (Tab)',
+  BarControl.fullscreen => s.fullscreen ? 'Exit fullscreen (F, Esc)' : 'Fullscreen (F)',
+};
+
+/// The bar's clock: "6:00 / 24:00", or the time left ("-18:00"); "0:00"
+/// parts while the length is unknown.
+String clockText(Duration position, Duration duration, TimeDisplay display) {
+  if (display == TimeDisplay.remaining && duration > Duration.zero) {
+    final left = duration - position;
+    return '-${formatClock(left.isNegative ? Duration.zero : left)}';
+  }
+  return '${formatClock(position)} / ${formatClock(duration)}';
+}

apps/desktop/lib/src/controls/model/controls_model.dart

@@ -0,0 +1,214 @@
+import 'package:flutter/foundation.dart';
+import 'package:signals/signals_flutter.dart';
+
+import '../../jellyfin/track_prefs.dart' show MpvTrack;
+import '../../playback/media_marks.dart';
+import '../../playback/playback_controller.dart';
+import '../../queue/queue_controller.dart';
+import '../../session/session_coordinator.dart';
+import '../../shaders/shader_presets.dart';
+import '../../state/session_state.dart';
+import '../../state/settings.dart';
+import '../player_settings.dart' show applyShaderChoice;
+import '../volume.dart' as vol;
+import 'controls_layout.dart';
+
+/// A track pick from a track menu: audio id, subtitle id, or off.
+typedef TrackPick = ({int? aid, int? sid, bool subtitlesOff});
+
+/// The player controls, independent of how they look: what the controls
+/// show (state, as signals) and what they do (actions), wired to the
+/// session once. Both skins only draw this and call its actions, so a
+/// control added here shows in both. Built by the session player per
+/// mount; [fullscreen], [chatOpen] and [unread] are the shell's, passed in.
+class PlayerControlsModel {
+  final SessionCoordinator coord;
+  final ReadonlySignal<bool> fullscreen;
+  final ReadonlySignal<bool> chatOpen;
+  final ReadonlySignal<int> unread;
+  final VoidCallback _toggleFullscreen;
+  final VoidCallback _toggleChat;
+  final VoidCallback _changeVideo;
+  final VoidCallback _collapse;
+  final VoidCallback _leave;
+
+  PlayerControlsModel({
+    required this.coord,
+    required this.fullscreen,
+    required this.chatOpen,
+    required this.unread,
+    required VoidCallback onToggleFullscreen,
+    required VoidCallback onToggleChat,
+    required VoidCallback onChangeVideo,
+    required VoidCallback onCollapse,
+    required VoidCallback onLeave,
+  }) : _toggleFullscreen = onToggleFullscreen,
+       _toggleChat = onToggleChat,
+       _changeVideo = onChangeVideo,
+       _collapse = onCollapse,
+       _leave = onLeave;
+
+  PlaybackController get playback => coord.playback;
+  QueueController get queue => coord.queue;
+  AppSettings get settings => AppSettings.instance;
+
+  // ---------------------------------------------------------------- state
+
+  ReadonlySignal<Duration> get position => playback.position;
+  ReadonlySignal<Duration> get duration => playback.duration;
+
+  /// End of the cached range ahead of the position.
+  ReadonlySignal<Duration> get buffered => playback.buffered;
+  ReadonlySignal<List<MediaChapter>> get chapters => playback.chapters;
+  ReadonlySignal<int?> get currentChapter => playback.currentChapter;
+  ReadonlySignal<List<MpvTrack>> get tracks => playback.tracks;
+
+  /// 0..`maxVolume`.
+  ReadonlySignal<double> get volume => playback.volume;
+  ReadonlySignal<SkipOffer?> get skipOffer => coord.skipOffer;
+  ReadonlySignal<RenderMode> get renderMode => playback.renderMode;
+
+  /// Play / pause as the session sees it ([PlayState]).
+  late final Computed<PlayState> play = computed(() {
+    final r = coord.serverState.value;
+    final self = coord.selfMember.value;
+    return switch (r?.transport) {
+      'playing' => PlayState.playing,
+      'finished' => PlayState.finished,
+      _ => (self?.ready ?? false) && (self?.inSet ?? false) ? PlayState.waiting : PlayState.paused,
+    };
+  });
+
+  /// Everything the layout depends on (not the position: that changes
+  /// four times a second and only the timeline needs it).
+  late final Computed<ControlsSnapshot> snapshot = computed(() {
+    final items = queue.items.value;
+    final next = coord.nextEpisode.value;
+    return ControlsSnapshot(
+      play: play.value,
+      previousLabel: coord.previousEpisode.value?.label,
+      nextLabel: items.isNotEmpty ? items.first.title : next?.label,
+      nextIsUpNext: items.isNotEmpty,
+      hasChapters: chapters.value.isNotEmpty,
+      hasDuration: duration.value > Duration.zero,
+      solo: SessionState.instance.solo.value,
+      // Not a signal: read again whenever the state changes.
+      hasLink: coord.serverState.value != null && coord.currentLink() != null,
+      fullscreen: fullscreen.value,
+      chatOpen: chatOpen.value,
+    );
+  });
+
+  /// The bar's clusters, in the layout's order.
+  late final Computed<({List<BarControl> left, List<BarControl> right})> bar = computed(
+    () => barControls(snapshot.value, settings.hiddenControls.value),
+  );
+
+  /// What the ⚙ menu lists now.
+  List<ControlAction> menu() => menuActions(snapshot.peek(), settings.hiddenControls.peek());
+
+  /// Ticks on each wheel / key volume step: the skins flash the volume.
+  final volumeFlash = ValueNotifier(0);
+
+  /// A menu of the controls is open (the player's Esc closes it).
+  int menusOpen = 0;
+
+  void dispose() => volumeFlash.dispose();
+
+  // -------------------------------------------------------------- actions
+
+  /// Space: ready / not ready (being ready is "play" in a server).
+  void togglePlay() => coord.toggleReady();
+
+  /// A seek bar's press or drag; through `player.seek`, the user-seek
+  /// path, so everyone follows.
+  void seek(Duration to) => playback.player.seek(to);
+
+  /// Arrow keys: ±[secs], relative to a seek still in flight.
+  void nudge(double secs) => coord.nudge(secs);
+
+  /// +1:30 for everyone.
+  void skipForward() => coord.skipForward();
+
+  /// A skip pill (Skip OP / ED / 1:30).
+  void skip(SkipOffer offer) => coord.skip(offer);
+
+  /// PgDn (+1) / PgUp (-1). False when there is no chapter to go to.
+  bool stepChapter(int delta) => coord.stepChapter(delta);
+
+  void pickChapter(MediaChapter c) => coord.seekTo(c.start.inMicroseconds / 1e6);
+
+  /// Up next's first item, else the next episode. False when neither.
+  bool next() {
+    if (queue.items.peek().isNotEmpty) {
+      queue.skip();
+      return true;
+    }
+    if (coord.nextEpisode.peek() == null) return false;
+    coord.playNextEpisode();
+    return true;
+  }
+
+  /// The previous episode. False without one.
+  bool previous() {
+    if (coord.previousEpisode.peek() == null) return false;
+    coord.playPreviousEpisode();
+    return true;
+  }
+
+  void playNextEpisode() => coord.playNextEpisode();
+
+  void setVolume(double v) => playback.player.setVolume(v.clamp(0.0, vol.maxVolume));
+
+  /// One volume step up (+1) or down (-1) from the wheel or ↑ / ↓;
+  /// flashes the volume readout.
+  void stepVolume(int step) {
+    setVolume(vol.stepVolume(volume.peek(), step * vol.volumeStep));
+    volumeFlash.value++;
+  }
+
+  double _beforeMute = 100;
+
+  /// The speaker: mute, or back to the volume before.
+  void toggleMute() {
+    final v = volume.peek();
+    if (v > 0) {
+      _beforeMute = v;
+      setVolume(0);
+    } else {
+      setVolume(_beforeMute <= 0 ? 100 : _beforeMute);
+    }
+  }
+
+  void pickTrack(TrackPick p) => coord.selectTrack(aid: p.aid, sid: p.sid, subtitlesOff: p.subtitlesOff);
+
+  /// Saved as the choice and applied live; a null quality keeps the
+  /// saved one.
+  void pickShader(ShaderPreset preset, ShaderQuality? quality) => applyShaderChoice(preset, quality);
+
+  void toggleTimeDisplay() => settings.setTimeDisplay(settings.timeDisplay.peek().toggled);
+
+  void toggleFullscreen() => _toggleFullscreen();
+
+  void toggleChat() {
+    coord.markInput();
+    _toggleChat();
+  }
+
+  void changeVideo() => _changeVideo();
+
+  /// Back to the library (keeps playing in the mini player).
+  void collapse() => _collapse();
+
+  /// Asks before leaving the server.
+  void leave() => _leave();
+
+  void reload() {
+    coord.markInput();
+    coord.reloadVideo();
+  }
+
+  void markAllReady() => coord.forcePlayAll();
+
+  String? link() => coord.currentLink();
+}

apps/desktop/lib/src/controls/model/controls_prefs.dart

@@ -0,0 +1,64 @@
+// The player controls' user choices (Settings → Player, stored in
+// `AppSettings`). Plain values: the layout spec and both skins read them.
+
+/// The controls' look. Both skins draw the same controls model in the same
+/// order ([ControlsLayout]); only the look differs.
+enum ControlsSkin {
+  /// Material-style bar: a seek bar over a row of round icon buttons.
+  standard('Standard'),
+
+  /// The app's own timeline skin (inspired by mpv's uosc): a thick band
+  /// with the buffered part, chapters and times, flat glass buttons.
+  minimal('Minimal');
+
+  final String label;
+  const ControlsSkin(this.label);
+
+  /// A stored name; the old `mpvControls` flag (true: the uosc design)
+  /// when there is none.
+  static ControlsSkin fromStored(Object? name, {Object? legacyMpvControls}) {
+    for (final s in values) {
+      if (s.name == name) return s;
+    }
+    return legacyMpvControls == true ? minimal : standard;
+  }
+}
+
+/// The bar's clock: "6:00 / 24:00" or the time left ("-18:00").
+enum TimeDisplay {
+  elapsed('Elapsed / total'),
+  remaining('Remaining');
+
+  final String label;
+  const TimeDisplay(this.label);
+
+  TimeDisplay get toggled => this == elapsed ? remaining : elapsed;
+}
+
+/// Bar and button size.
+enum ControlsSize {
+  normal('Normal', 1.0),
+  large('Large', 1.25);
+
+  final String label;
+  final double scale;
+  const ControlsSize(this.label, this.scale);
+}
+
+/// Bar buttons the user may hide; hidden ones are still in ⚙.
+enum OptionalControl {
+  chapters('Chapter buttons', 'Previous / next chapter (PgUp / PgDn)'),
+  subtitles('Subtitles', 'The subtitle track list'),
+  audio('Audio', 'The audio track list'),
+  chat('Chat', 'Chat & activity (Tab)');
+
+  final String label;
+  final String help;
+  const OptionalControl(this.label, this.help);
+}
+
+/// The auto-hide delays offered (seconds).
+const controlsHideChoices = [2, 3, 5];
+
+/// The default auto-hide delay (seconds).
+const defaultControlsHideSecs = 3;

apps/desktop/lib/src/controls/player_settings.dart

@@ -12,11 +12,11 @@ import '../shell/mark_problem.dart';
 import '../shell/motion.dart';
 import '../state/settings.dart';
 import '../widgets/app_menu.dart';
-import 'uosc/buttons.dart';
-import 'uosc/controls.dart';
+import 'frame.dart';
+import 'model/controls_prefs.dart';
 
-// Everything about the player, defined once: the rows of the ⚙ card in
-// both control designs and of Settings → Player. Each row reads and
+// Everything about the player, defined once: the rows of the player
+// settings card (⚙ → Player settings, both skins) and of Settings → Player. Each row reads and
 // writes [AppSettings] and applies to a running player right away.
 
 /// One setting: a label, one line of help under it, the control at the
@@ -67,7 +67,7 @@ AppSelect<T> _dropdown<T>({
 }) =>
     AppSelect<T>(key: key, value: value, items: items, onChanged: onChanged, expanded: expanded);
 
-/// Standard (our bars over media_kit's controls) or uosc. Live.
+/// The controls' skin: Standard or Minimal. Live.
 class PlayerDesignSetting extends StatelessWidget {
   const PlayerDesignSetting({super.key});
 
@@ -77,12 +77,100 @@ class PlayerDesignSetting extends StatelessWidget {
     return SignalBuilder(
       builder: (context) => SettingRow(
         label: 'Player design',
-        help: 'uosc is modeled on mpv: a thick timeline with chapters and what is cached',
-        control: _dropdown<bool>(
+        help: 'Minimal has a thick timeline with chapters and what is downloaded yet',
+        control: _dropdown<ControlsSkin>(
           key: const ValueKey('player-design'),
-          value: s.mpvControls.value,
-          items: const [(false, 'Standard'), (true, 'uosc')],
-          onChanged: s.setMpvControls,
+          value: s.controlsSkin.value,
+          items: [for (final k in ControlsSkin.values) (k, k.label)],
+          onChanged: s.setControlsSkin,
+        ),
+      ),
+    );
+  }
+}
+
+/// The bar's clock: elapsed / total or the time left. Live.
+class TimeDisplaySetting extends StatelessWidget {
+  const TimeDisplaySetting({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final s = AppSettings.instance;
+    return SignalBuilder(
+      builder: (context) => SettingRow(
+        label: 'Time display',
+        help: 'Also switched by a click on the time',
+        control: _dropdown<TimeDisplay>(
+          key: const ValueKey('time-display'),
+          value: s.timeDisplay.value,
+          items: [for (final t in TimeDisplay.values) (t, t.label)],
+          onChanged: s.setTimeDisplay,
+        ),
+      ),
+    );
+  }
+}
+
+/// Normal or large bar and buttons. Live.
+class ControlsSizeSetting extends StatelessWidget {
+  const ControlsSizeSetting({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final s = AppSettings.instance;
+    return SignalBuilder(
+      builder: (context) => SettingRow(
+        label: 'Controls size',
+        help: 'Large makes the bar and its buttons a quarter bigger',
+        control: _dropdown<ControlsSize>(
+          key: const ValueKey('controls-size'),
+          value: s.controlsSize.value,
+          items: [for (final z in ControlsSize.values) (z, z.label)],
+          onChanged: s.setControlsSize,
+        ),
+      ),
+    );
+  }
+}
+
+/// How long the controls stay up without mouse movement. Live.
+class HideDelaySetting extends StatelessWidget {
+  const HideDelaySetting({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final s = AppSettings.instance;
+    return SignalBuilder(
+      builder: (context) => SettingRow(
+        label: 'Hide the controls after',
+        help: 'Without mouse movement over the video',
+        control: _dropdown<int>(
+          key: const ValueKey('controls-hide'),
+          value: s.controlsHideSecs.value,
+          items: [for (final secs in controlsHideChoices) (secs, '$secs s')],
+          onChanged: s.setControlsHideSecs,
+        ),
+      ),
+    );
+  }
+}
+
+/// One optional bar button on or off (off: it is still in ⚙). Live.
+class BarButtonSetting extends StatelessWidget {
+  final OptionalControl control;
+  const BarButtonSetting({super.key, required this.control});
+
+  @override
+  Widget build(BuildContext context) {
+    final s = AppSettings.instance;
+    return SignalBuilder(
+      builder: (context) => SettingRow(
+        label: control.label,
+        help: control.help,
+        control: Switch(
+          key: ValueKey('bar-${control.name}'),
+          value: !s.hiddenControls.value.contains(control),
+          onChanged: (on) => s.setControlShown(control, on),
         ),
       ),
     );
@@ -296,7 +384,20 @@ class TrackSetting extends StatelessWidget {
   }
 }
 
-/// The player rows of Settings → Player and the ⚙ card, in order.
+/// The controls' own choices (Settings → Player → Controls).
+List<Widget> controlsSettingRows() => [
+  const TimeDisplaySetting(),
+  const ControlsSizeSetting(),
+  const HideDelaySetting(),
+  const Padding(
+    padding: EdgeInsets.only(top: 10, bottom: 2),
+    child: Text('Buttons in the bar (hidden ones stay in ⚙)', style: TextStyle(fontWeight: FontWeight.w600)),
+  ),
+  for (final c in OptionalControl.values) BarButtonSetting(control: c),
+];
+
+/// The player rows of Settings → Player and the player settings card, in
+/// order.
 List<Widget> playerSettingRows({ReadonlySignal<RenderMode>? renderMode}) => [
       const PlayerDesignSetting(),
       const ProgressLineSetting(),
@@ -304,7 +405,8 @@ List<Widget> playerSettingRows({ReadonlySignal<RenderMode>? renderMode}) => [
       const HwdecSetting(),
     ];
 
-/// The ⚙ card: every player setting, plus the running player's tracks.
+/// The player settings card: every player setting, plus the running
+/// player's tracks.
 class PlayerSettingsCard extends StatelessWidget {
   final ReadonlySignal<RenderMode>? renderMode;
   /// Show the audio / subtitle pickers (a player is running).
@@ -337,7 +439,7 @@ class PlayerSettingsCard extends StatelessWidget {
                 children: [
                   Expanded(
                     child: Text(
-                      'Custom shader files: Settings → Player',
+                      'Controls layout and custom shaders: Settings → Player',
                       style: TextStyle(color: Theme.of(context).colorScheme.onSurfaceVariant, fontSize: 12),
                     ),
                   ),
@@ -352,51 +454,14 @@ class PlayerSettingsCard extends StatelessWidget {
   }
 }
 
-/// Opens the ⚙ card over the player, near the controls' right end. The
-/// uosc controls stay up while it is open.
-Future<void> showPlayerSettings(BuildContext context, {ReadonlySignal<RenderMode>? renderMode}) {
-  Future<void> open() => showPopover<void>(
+/// Opens the player settings card over the player, near the controls'
+/// right end; the controls stay up while it is open.
+Future<void> showPlayerSettings(BuildContext context, {ReadonlySignal<RenderMode>? renderMode}) =>
+    ControlsFrame.holdWhile(
+      context,
+      () => showPopover<void>(
         context,
         at: const Alignment(0.96, 0.5),
         child: PlayerSettingsCard(renderMode: renderMode),
-      );
-  final controls = UoscControls.maybeOf(context);
-  return controls == null ? open() : controls.holdDuring(open);
-}
-
-/// ⚙ in the standard controls' bottom bar.
-class PlayerSettingsButton extends StatelessWidget {
-  final FocusNode? focusNode;
-  final ReadonlySignal<RenderMode>? renderMode;
-  const PlayerSettingsButton({super.key, this.focusNode, this.renderMode});
-
-  @override
-  Widget build(BuildContext context) {
-    return IconButton(
-      key: const ValueKey('player-settings'),
-      focusNode: focusNode,
-      tooltip: 'Player settings',
-      color: Colors.white,
-      iconSize: 20,
-      visualDensity: VisualDensity.compact,
-      icon: const Icon(Icons.tune),
-      onPressed: () => showPlayerSettings(context, renderMode: renderMode),
+      ),
     );
-  }
-}
-
-/// ⚙ in the uosc controls' button row.
-class UoscPlayerSettingsButton extends StatelessWidget {
-  final ReadonlySignal<RenderMode>? renderMode;
-  const UoscPlayerSettingsButton({super.key, this.renderMode});
-
-  @override
-  Widget build(BuildContext context) {
-    return UoscButton(
-      key: const ValueKey('uosc-player-settings'),
-      icon: Icons.tune_rounded,
-      tooltip: 'Player settings',
-      onPressed: () => showPlayerSettings(context, renderMode: renderMode),
-    );
-  }
-}

apps/desktop/lib/src/controls/session_controls.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:signals/signals_flutter.dart';
+
+import '../state/settings.dart';
+import 'controls_probe.dart' show ControlsHold;
+import 'frame.dart';
+import 'minimal/minimal_controls.dart';
+import 'model/controls_model.dart';
+import 'model/controls_prefs.dart';
+import 'standard/standard_controls.dart';
+
+// The session's controls: one [ControlsFrame] (when they are up) around the
+// skin the settings pick, both drawing the same [PlayerControlsModel].
+// Skin, size and the hide delay follow the settings live.
+
+/// The bottom controls' height in [skin] at [size] (the player's floating
+/// pills sit just above it).
+double controlsBottomHeight(ControlsSkin skin, ControlsSize size) => switch (skin) {
+  ControlsSkin.standard => StandardControls.bottomHeight(size.scale),
+  ControlsSkin.minimal => MinimalControls.bottomHeight(size.scale),
+};
+
+/// The top bar's height in [skin].
+double controlsTopHeight(ControlsSkin skin) => switch (skin) {
+  ControlsSkin.standard => StandardControls.topHeight,
+  ControlsSkin.minimal => MinimalControls.topHeight,
+};
+
+class SessionControls extends StatelessWidget {
+  final PlayerControlsModel model;
+
+  /// Follows whether the controls are up.
+  final ValueNotifier<bool> shown;
+  final ControlsHold hold;
+  final VoidCallback onDoubleClick;
+  final Widget? windowButtons;
+  const SessionControls({
+    super.key,
+    required this.model,
+    required this.shown,
+    required this.hold,
+    required this.onDoubleClick,
+    this.windowButtons,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final s = AppSettings.instance;
+    return SignalBuilder(
+      builder: (context) {
+        final skin = s.controlsSkin.value;
+        final size = s.controlsSize.value;
+        final scale = size.scale;
+        return ControlsFrame(
+          // A new frame per skin: each starts up, like a fresh mount.
+          key: ValueKey(skin),
+          shown: shown,
+          holdBy: hold,
+          hideAfter: Duration(seconds: s.controlsHideSecs.value),
+          onDoubleClick: onDoubleClick,
+          barTop: controlsTopHeight(skin),
+          barBottom: controlsBottomHeight(skin, size),
+          builder: (context, visible) => switch (skin) {
+            ControlsSkin.standard => StandardControls(
+              model: model,
+              visible: visible,
+              scale: scale,
+              hold: hold,
+              windowButtons: windowButtons,
+            ),
+            ControlsSkin.minimal => MinimalControls(
+              model: model,
+              visible: visible,
+              scale: scale,
+              hold: hold,
+              windowButtons: windowButtons,
+            ),
+          },
+        );
+      },
+    );
+  }
+}

apps/desktop/lib/src/controls/standard/seek_bar.dart

@@ -0,0 +1,229 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../playback/media_marks.dart';
+import '../frame.dart';
+
+// The Standard skin's seek bar: a Material-style track with the played and
+// buffered parts, chapter marks and a hover tip.
+
+/// The seek bar: played / buffered track, a diamond at each chapter start
+/// (not the one at 0), and on hover the time with the chapter title above
+/// it. Like media_kit's bar it reports a seek on every drag move and on
+/// release ([onSeek]); the session routes those through the user-seek path
+/// (debounced, everyone follows).
+class ChapterSeekBar extends StatefulWidget {
+  final Duration position;
+  final Duration duration;
+  final Duration buffer;
+  final List<MediaChapter> chapters;
+  final ValueChanged<Duration> onSeek;
+
+  /// The bar's height (its hit area); the track is centred in it.
+  final double height;
+  const ChapterSeekBar({
+    super.key,
+    required this.position,
+    required this.duration,
+    this.buffer = Duration.zero,
+    this.chapters = const [],
+    required this.onSeek,
+    this.height = ChapterSeekBar.defaultHeight,
+  });
+
+  static const defaultHeight = 28.0;
+
+  @override
+  State<ChapterSeekBar> createState() => _ChapterSeekBarState();
+}
+
+class _ChapterSeekBarState extends State<ChapterSeekBar> {
+  double? _hoverX;
+  bool _dragging = false;
+  double _dragFraction = 0;
+
+  double _fraction(Duration d) {
+    final total = widget.duration.inMicroseconds;
+    if (total <= 0) return 0;
+    return (d.inMicroseconds / total).clamp(0.0, 1.0);
+  }
+
+  Duration _at(double fraction) => widget.duration * fraction.clamp(0.0, 1.0);
+
+  // A drag sends no hover events: the controls are held up through it.
+  void _drag(bool on) {
+    if (_dragging == on) return;
+    setState(() => _dragging = on);
+    ControlsFrame.maybeOf(context)?.hold(on);
+  }
+
+  @override
+  void dispose() {
+    if (_dragging) ControlsFrame.maybeOf(context)?.hold(false);
+    super.dispose();
+  }
+
+  void _seekTo(double x, double width) {
+    if (widget.duration <= Duration.zero || width <= 0) return;
+    _dragFraction = (x / width).clamp(0.0, 1.0);
+    widget.onSeek(_at(_dragFraction));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final primary = Theme.of(context).colorScheme.primary;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth;
+        final active = _hoverX != null || _dragging;
+        final barHeight = active ? 5.0 : 3.0;
+        final played = _dragging ? _dragFraction : _fraction(widget.position);
+        final mid = widget.height / 2;
+        final hoverX = _hoverX;
+        final hoverAt = hoverX == null || width <= 0 ? null : _at(hoverX / width);
+        final hoverChapter = hoverAt == null ? null : chapterIndexAt(widget.chapters, hoverAt);
+        final hoverTitle = hoverChapter == null ? '' : widget.chapters[hoverChapter].title;
+        return MouseRegion(
+          cursor: SystemMouseCursors.click,
+          onEnter: (e) => setState(() => _hoverX = e.localPosition.dx.clamp(0, width)),
+          onHover: (e) => setState(() => _hoverX = e.localPosition.dx.clamp(0, width)),
+          onExit: (_) => setState(() => _hoverX = null),
+          child: Listener(
+            behavior: HitTestBehavior.opaque,
+            onPointerDown: (e) {
+              _dragFraction = width <= 0 ? 0 : (e.localPosition.dx / width).clamp(0.0, 1.0);
+              _drag(true);
+            },
+            onPointerMove: (e) {
+              setState(() => _hoverX = e.localPosition.dx.clamp(0, width));
+              _seekTo(e.localPosition.dx, width);
+            },
+            onPointerUp: (e) {
+              _seekTo(e.localPosition.dx, width);
+              _drag(false);
+            },
+            onPointerCancel: (_) => _drag(false),
+            child: SizedBox(
+              key: const ValueKey('seek-bar'),
+              width: width,
+              height: widget.height,
+              child: Stack(
+                clipBehavior: Clip.none,
+                children: [
+                  Positioned(
+                    left: 0,
+                    right: 0,
+                    top: mid - barHeight / 2,
+                    height: barHeight,
+                    child: Container(color: Colors.white24),
+                  ),
+                  Positioned(
+                    left: 0,
+                    top: mid - barHeight / 2,
+                    height: barHeight,
+                    width: width * _fraction(widget.buffer),
+                    child: Container(color: Colors.white24),
+                  ),
+                  if (hoverX != null && !_dragging)
+                    Positioned(
+                      left: 0,
+                      top: mid - barHeight / 2,
+                      height: barHeight,
+                      width: hoverX,
+                      child: Container(color: Colors.white24),
+                    ),
+                  Positioned(
+                    left: 0,
+                    top: mid - barHeight / 2,
+                    height: barHeight,
+                    width: width * played,
+                    child: Container(color: primary),
+                  ),
+                  for (final c in widget.chapters)
+                    if (c.start > Duration.zero && widget.duration > Duration.zero)
+                      Positioned(
+                        key: ValueKey('chapter-mark-${c.index}'),
+                        left: width * _fraction(c.start) - 4,
+                        top: mid - 4,
+                        width: 8,
+                        height: 8,
+                        child: IgnorePointer(
+                          child: Transform.rotate(
+                            angle: math.pi / 4,
+                            child: Container(
+                              margin: const EdgeInsets.all(1),
+                              decoration: BoxDecoration(
+                                color: Colors.white,
+                                border: Border.all(color: Colors.black54, width: 0.8),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                  if (active)
+                    Positioned(
+                      left: width * played - 6,
+                      top: mid - 6,
+                      width: 12,
+                      height: 12,
+                      child: IgnorePointer(
+                        child: DecoratedBox(
+                          decoration: BoxDecoration(color: primary, shape: BoxShape.circle),
+                        ),
+                      ),
+                    ),
+                  if (hoverAt != null)
+                    Positioned(
+                      // Kept clear of the window edges (the tip is centred).
+                      left: hoverX!.clamp(math.min(60.0, width / 2), math.max(width - 60, width / 2)),
+                      bottom: widget.height - 2,
+                      child: IgnorePointer(
+                        child: FractionalTranslation(
+                          translation: const Offset(-0.5, 0),
+                          child: _HoverTip(title: hoverTitle, time: formatClock(hoverAt)),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _HoverTip extends StatelessWidget {
+  final String title;
+  final String time;
+  const _HoverTip({required this.title, required this.time});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: const BoxConstraints(maxWidth: 320),
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.8), borderRadius: BorderRadius.circular(6)),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (title.isNotEmpty)
+            Text(
+              title,
+              key: const ValueKey('seek-hover-chapter'),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600),
+            ),
+          Text(
+            time,
+            key: const ValueKey('seek-hover-time'),
+            style: const TextStyle(color: Colors.white70, fontSize: 11),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/desktop/lib/src/controls/standard/standard_controls.dart

@@ -0,0 +1,340 @@
+import 'package:flutter/material.dart';
+import 'package:signals/signals_flutter.dart';
+import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
+
+import '../../queue/queue_ui.dart';
+import '../../shell/now_playing_title.dart';
+import '../../state/settings.dart';
+import '../control_menus.dart';
+import '../controls_probe.dart' show ControlsHold;
+import '../frame.dart';
+import '../model/controls_layout.dart';
+import '../model/controls_model.dart';
+import '../volume.dart';
+import 'seek_bar.dart';
+
+// The Standard skin: Material-style bars over the picture. Top: what plays,
+// Up next and the window controls; bottom: the seek bar (chapter marks,
+// hover time) over a row of round icon buttons in the layout's order.
+// Hidden, a thin progress line stays (unless switched off).
+
+class StandardControls extends StatelessWidget {
+  final PlayerControlsModel model;
+  final bool visible;
+  final double scale;
+  final ControlsHold? hold;
+
+  /// Right of the top bar's own buttons (the window buttons in fullscreen).
+  final Widget? windowButtons;
+  const StandardControls({
+    super.key,
+    required this.model,
+    required this.visible,
+    this.scale = 1,
+    this.hold,
+    this.windowButtons,
+  });
+
+  /// The top bar: room for the cover (2:3, 60 px tall).
+  static const topHeight = 72.0;
+  static const _rowHeight = 56.0;
+
+  /// The bottom bar (seek bar and buttons) at [scale].
+  static double bottomHeight(double scale) => (_rowHeight + ChapterSeekBar.defaultHeight) * scale;
+
+  @override
+  Widget build(BuildContext context) {
+    const fade = ControlsFrame.fade;
+    Widget bar(Widget child) => IgnorePointer(
+      ignoring: !visible,
+      child: AnimatedOpacity(duration: fade, opacity: visible ? 1 : 0, child: child),
+    );
+    // No button here takes focus (Space is the ready key); the top bar's
+    // Up next keeps its own (its popover has a text field).
+    return Stack(
+      children: [
+        Positioned(
+          left: 0,
+          right: 0,
+          top: 0,
+          child: bar(
+            DecoratedBox(
+              decoration: const BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [Color(0x99000000), Color(0x00000000)],
+                ),
+              ),
+              child: SizedBox(
+                key: const ValueKey('standard-top'),
+                height: topHeight,
+                child: Padding(padding: const EdgeInsets.only(left: 16, right: 8), child: _top()),
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: bar(
+            DecoratedBox(
+              decoration: const BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [Color(0x00000000), Color(0xB3000000)],
+                ),
+              ),
+              child: Padding(
+                padding: EdgeInsets.only(top: 24 * scale),
+                child: SizedBox(
+                  key: const ValueKey('standard-bottom'),
+                  height: bottomHeight(scale),
+                  child: Column(
+                    children: [
+                      Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: SignalBuilder(
+                          builder: (context) => ChapterSeekBar(
+                            position: model.position.value,
+                            duration: model.duration.value,
+                            buffer: model.buffered.value,
+                            chapters: model.chapters.value,
+                            height: ChapterSeekBar.defaultHeight * scale,
+                            onSeek: model.seek,
+                          ),
+                        ),
+                      ),
+                      Expanded(
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 8),
+                          child: ExcludeFocus(
+                            child: SignalBuilder(
+                              builder: (context) {
+                                final s = model.snapshot.value;
+                                final layout = model.bar.value;
+                                return Row(
+                                  key: const ValueKey('standard-buttons'),
+                                  children: [
+                                    for (final c in layout.left) _control(context, c, s),
+                                    const Spacer(),
+                                    for (final c in layout.right) _control(context, c, s),
+                                  ],
+                                );
+                              },
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        // Hidden: the thin progress line.
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: IgnorePointer(
+            child: SignalBuilder(
+              builder: (context) {
+                if (visible || !AppSettings.instance.progressLine.value) return const SizedBox.shrink();
+                final d = model.duration.value, p = model.position.value;
+                final v = d.inMilliseconds == 0 ? 0.0 : (p.inMilliseconds / d.inMilliseconds).clamp(0.0, 1.0);
+                return LinearProgressIndicator(
+                  key: const ValueKey('progress-line-standard'),
+                  value: v,
+                  minHeight: 2,
+                  backgroundColor: Colors.transparent,
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _top() {
+    final m = model;
+    return Row(
+      children: [
+        const Expanded(child: NowPlayingTitle()),
+        UpNextButton(queue: m.queue, onPlayNextEpisode: m.playNextEpisode, look: UpNextLook.standard, hold: hold),
+        SignalBuilder(
+          builder: (context) {
+            final full = m.fullscreen.value;
+            return ExcludeFocus(
+              child: _IconButton(
+                key: const ValueKey('standard-collapse'),
+                icon: full ? Icons.fullscreen_exit_rounded : Icons.close_fullscreen_rounded,
+                tooltip: full ? 'Exit fullscreen (Esc)' : 'Back to the library (keeps playing)',
+                onPressed: full ? m.toggleFullscreen : m.collapse,
+              ),
+            );
+          },
+        ),
+        ?windowButtons,
+      ],
+    );
+  }
+
+  Widget _control(BuildContext context, BarControl c, ControlsSnapshot s) {
+    final m = model;
+    final key = ValueKey('control-${c.name}');
+    final enabled = controlEnabled(c, s);
+    Widget icon(VoidCallback? onPressed, {int badge = 0, double size = 24, Color? color}) => _IconButton(
+      key: key,
+      icon: controlIcon(c, s),
+      tooltip: controlTooltip(c, s),
+      badge: badge,
+      size: size * scale,
+      color: color,
+      onPressed: enabled ? onPressed : null,
+    );
+    switch (c) {
+      case BarControl.playPause:
+        final waiting = s.play == PlayState.waiting;
+        return icon(m.togglePlay, size: 30, color: waiting ? Theme.of(context).colorScheme.primary : null);
+      case BarControl.previous:
+        return icon(m.previous);
+      case BarControl.next:
+        return icon(m.next);
+      case BarControl.chapterPrevious:
+        return icon(() => m.stepChapter(-1));
+      case BarControl.chapterNext:
+        return icon(() => m.stepChapter(1));
+      case BarControl.volume:
+        return SignalBuilder(
+          key: key,
+          builder: (context) => VolumeControl(
+            volume: m.volume.value,
+            onChanged: m.setVolume,
+            onToggleMute: m.toggleMute,
+            button: (context, i, color, tip, onPressed) =>
+                _IconButton(icon: i, tooltip: tip, color: color, size: 24 * scale, onPressed: onPressed),
+          ),
+        );
+      case BarControl.time:
+        return SignalBuilder(
+          key: key,
+          builder: (context) => _Clock(
+            text: clockText(m.position.value, m.duration.value, m.settings.timeDisplay.value),
+            tooltip: controlTooltip(c, s),
+            scale: scale,
+            onPressed: m.toggleTimeDisplay,
+          ),
+        );
+      case BarControl.subtitles || BarControl.audio:
+        final type = c == BarControl.audio ? JellyfinStreamType.audio : JellyfinStreamType.subtitle;
+        return SignalBuilder(
+          key: key,
+          builder: (context) => Builder(
+            builder: (context) => _IconButton(
+              icon: controlIcon(c, s),
+              tooltip: controlTooltip(c, s),
+              badge: trackCount(m.tracks.value, type),
+              size: 22 * scale,
+              onPressed: () => openTrackMenu(context, m, type),
+            ),
+          ),
+        );
+      case BarControl.settings:
+        return Builder(
+          key: key,
+          builder: (context) => _IconButton(
+            icon: controlIcon(c, s),
+            tooltip: controlTooltip(c, s),
+            size: 22 * scale,
+            onPressed: () => openControlsMenu(context, m),
+          ),
+        );
+      case BarControl.chat:
+        return SignalBuilder(
+          key: key,
+          builder: (context) => _IconButton(
+            icon: controlIcon(c, s),
+            tooltip: controlTooltip(c, s),
+            badge: m.unread.value,
+            size: 22 * scale,
+            onPressed: m.toggleChat,
+          ),
+        );
+      case BarControl.fullscreen:
+        return icon(m.toggleFullscreen, size: 26);
+    }
+  }
+}
+
+/// A round white icon button with an optional count badge (the Material
+/// look of media_kit's bar).
+class _IconButton extends StatelessWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback? onPressed;
+  final int badge;
+  final double size;
+  final Color? color;
+  const _IconButton({
+    super.key,
+    required this.icon,
+    required this.tooltip,
+    required this.onPressed,
+    this.badge = 0,
+    this.size = 24,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    return IconButton(
+      tooltip: tooltip,
+      iconSize: size,
+      color: color ?? Colors.white,
+      disabledColor: Colors.white38,
+      onPressed: onPressed,
+      icon: Badge(
+        isLabelVisible: badge > 0,
+        backgroundColor: scheme.primary,
+        textColor: scheme.onPrimary,
+        label: Text('$badge'),
+        child: Icon(icon),
+      ),
+    );
+  }
+}
+
+/// The clock: "6:00 / 24:00" or "-18:00"; a click switches.
+class _Clock extends StatelessWidget {
+  final String text;
+  final String tooltip;
+  final double scale;
+  final VoidCallback onPressed;
+  const _Clock({required this.text, required this.tooltip, required this.scale, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return Tooltip(
+      message: tooltip,
+      waitDuration: const Duration(milliseconds: 500),
+      child: TextButton(
+        style: TextButton.styleFrom(
+          foregroundColor: Colors.white,
+          padding: EdgeInsets.symmetric(horizontal: 10 * scale),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        ),
+        onPressed: onPressed,
+        child: Text(
+          text,
+          style: TextStyle(fontSize: 14 * scale, fontFeatures: const [FontFeature.tabularFigures()]),
+        ),
+      ),
+    );
+  }
+}

apps/desktop/lib/src/controls/uosc/buttons.dart

@@ -1,359 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:signals/signals_flutter.dart';
-import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
-
-import '../../jellyfin/track_prefs.dart' show MpvTrack;
-import '../../playback/media_marks.dart';
-import '../../playback/playback_controller.dart' show RenderMode;
-import '../../screens/session/player_controls.dart' show TrackPick;
-import '../../shaders/shader_menu.dart';
-import '../../shaders/shader_presets.dart';
-import '../../state/settings.dart';
-import '../volume.dart';
-import 'controls.dart';
-import 'menu.dart';
-import 'style.dart';
-
-/// Flat uosc button: a white icon (optionally a [label] beside it and a
-/// small count [badge] in the corner), a faint highlight on hover, a dark
-/// tooltip. Never takes focus (the session's keys are global).
-class UoscButton extends StatefulWidget {
-  final IconData icon;
-  final String tooltip;
-  final VoidCallback? onPressed;
-  final String? label;
-  final int? badge;
-  /// Tint for an "on" state (ready, shaders on).
-  final Color? color;
-  const UoscButton({
-    super.key,
-    required this.icon,
-    required this.tooltip,
-    required this.onPressed,
-    this.label,
-    this.badge,
-    this.color,
-  });
-
-  @override
-  State<UoscButton> createState() => _UoscButtonState();
-}
-
-class _UoscButtonState extends State<UoscButton> {
-  bool _hover = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final w = widget;
-    final color = w.onPressed == null ? UoscStyle.dim.withValues(alpha: 0.4) : (w.color ?? UoscStyle.text);
-    final badge = w.badge;
-    return UoscTooltip(
-      message: w.tooltip,
-      child: MouseRegion(
-        cursor: w.onPressed == null ? SystemMouseCursors.basic : SystemMouseCursors.click,
-        onEnter: (_) => setState(() => _hover = true),
-        onExit: (_) => setState(() => _hover = false),
-        child: GestureDetector(
-          behavior: HitTestBehavior.opaque,
-          onTap: w.onPressed,
-          child: Container(
-            height: UoscControls.buttonRowHeight,
-            constraints: const BoxConstraints(minWidth: UoscControls.buttonRowHeight),
-            padding: EdgeInsets.symmetric(horizontal: w.label == null ? 0 : 8),
-            decoration: BoxDecoration(
-              color: _hover && w.onPressed != null ? UoscStyle.hover : Colors.transparent,
-              borderRadius: BorderRadius.circular(UoscStyle.radius),
-            ),
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Stack(
-                  clipBehavior: Clip.none,
-                  children: [
-                    Icon(w.icon, color: color, size: 22),
-                    if (badge != null && badge > 0)
-                      Positioned(
-                        right: -8,
-                        bottom: -5,
-                        child: Container(
-                          key: const ValueKey('uosc-badge'),
-                          padding: const EdgeInsets.symmetric(horizontal: 3),
-                          decoration: BoxDecoration(
-                            color: UoscStyle.text,
-                            borderRadius: BorderRadius.circular(3),
-                          ),
-                          child: Text('$badge',
-                              style: const TextStyle(
-                                  color: Colors.black, fontSize: 9, height: 1.3, fontWeight: FontWeight.w700)),
-                        ),
-                      ),
-                  ],
-                ),
-                if (w.label != null) ...[
-                  const SizedBox(width: 6),
-                  Text(w.label!, style: TextStyle(color: color, fontSize: UoscStyle.fontSize)),
-                ],
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// Badge-style text button ("HQ" in uosc): a small outlined box with a
-/// short label, filled when [active].
-class UoscBadgeButton extends StatefulWidget {
-  final String text;
-  final String tooltip;
-  final bool active;
-  final VoidCallback onPressed;
-  const UoscBadgeButton({
-    super.key,
-    required this.text,
-    required this.tooltip,
-    required this.active,
-    required this.onPressed,
-  });
-
-  @override
-  State<UoscBadgeButton> createState() => _UoscBadgeButtonState();
-}
-
-class _UoscBadgeButtonState extends State<UoscBadgeButton> {
-  bool _hover = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final w = widget;
-    return UoscTooltip(
-      message: w.tooltip,
-      child: MouseRegion(
-        cursor: SystemMouseCursors.click,
-        onEnter: (_) => setState(() => _hover = true),
-        onExit: (_) => setState(() => _hover = false),
-        child: GestureDetector(
-          behavior: HitTestBehavior.opaque,
-          onTap: w.onPressed,
-          child: Container(
-            height: UoscControls.buttonRowHeight,
-            padding: const EdgeInsets.symmetric(horizontal: 6),
-            decoration: BoxDecoration(
-              color: _hover ? UoscStyle.hover : Colors.transparent,
-              borderRadius: BorderRadius.circular(UoscStyle.radius),
-            ),
-            alignment: Alignment.center,
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
-              decoration: BoxDecoration(
-                color: w.active ? UoscStyle.text : Colors.transparent,
-                border: Border.all(color: w.active ? UoscStyle.text : UoscStyle.dim, width: 1.4),
-                borderRadius: BorderRadius.circular(3),
-              ),
-              child: Text(w.text,
-                  style: TextStyle(
-                      color: w.active ? Colors.black : UoscStyle.dim,
-                      fontSize: 11,
-                      fontWeight: FontWeight.w800,
-                      letterSpacing: 0.3)),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// Volume: click mutes / unmutes, hovering shows a [VolumeBar] up to
-/// [maxVolume], the wheel steps [volumeStep].
-class UoscVolumeButton extends StatefulWidget {
-  /// 0..[maxVolume].
-  final double volume;
-  final ValueChanged<double> onChanged;
-  const UoscVolumeButton({super.key, required this.volume, required this.onChanged});
-
-  @override
-  State<UoscVolumeButton> createState() => _UoscVolumeButtonState();
-}
-
-class _UoscVolumeButtonState extends State<UoscVolumeButton> {
-  final _steps = WheelSteps();
-  double _beforeMute = 100;
-  bool _hover = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final v = widget.volume;
-    final icon = v <= 0 ? Icons.volume_off_rounded : (v < 50 ? Icons.volume_down_rounded : Icons.volume_up_rounded);
-    return MouseRegion(
-      onEnter: (_) => setState(() => _hover = true),
-      onExit: (_) => setState(() => _hover = false),
-      child: Listener(
-        // Claimed here, so the player's own wheel handler skips it.
-        onPointerSignal: (e) => _steps.handle(e, (step) => widget.onChanged(stepVolume(v, step * volumeStep))),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            AnimatedSize(
-              duration: const Duration(milliseconds: 150),
-              child: _hover
-                  ? Padding(
-                      padding: const EdgeInsets.only(left: 6, right: 2),
-                      child: VolumeBar(
-                        key: const ValueKey('uosc-volume-bar'),
-                        volume: v,
-                        onChanged: widget.onChanged,
-                        color: UoscStyle.text,
-                        trackColor: UoscStyle.dim.withValues(alpha: 0.5),
-                      ),
-                    )
-                  : const SizedBox.shrink(),
-            ),
-            UoscButton(
-              key: const ValueKey('uosc-volume'),
-              icon: icon,
-              color: v > 100 ? boostColor : null,
-              tooltip: 'Volume ${v.round()} % (scroll to change)',
-              onPressed: () {
-                if (v > 0) {
-                  _beforeMute = v;
-                  widget.onChanged(0);
-                } else {
-                  widget.onChanged(_beforeMute <= 0 ? 100 : _beforeMute);
-                }
-              },
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-/// Subtitles or audio: the icon with the track count; the menu lists the
-/// tracks (mpv's selection active).
-class UoscTracksButton extends StatelessWidget {
-  final JellyfinStreamType type;
-  final List<MpvTrack> tracks;
-  final void Function(TrackPick pick) onPick;
-  final ValueChanged<bool>? onMenuOpen;
-  const UoscTracksButton({super.key, required this.type, required this.tracks, required this.onPick, this.onMenuOpen});
-
-  @override
-  Widget build(BuildContext context) {
-    final audio = type == JellyfinStreamType.audio;
-    final count = tracks.where((t) => t.type == type).length;
-    return UoscButton(
-      key: ValueKey(audio ? 'uosc-audio' : 'uosc-subtitles'),
-      icon: audio ? Icons.graphic_eq_rounded : Icons.subtitles_outlined,
-      tooltip: audio ? 'Audio' : 'Subtitles',
-      badge: count,
-      onPressed: () async {
-        onMenuOpen?.call(true);
-        final pick = await showUoscMenu<TrackPick>(context,
-            title: audio ? 'Audio' : 'Subtitles', items: trackMenuItems(type, tracks));
-        onMenuOpen?.call(false);
-        if (pick != null) onPick(pick);
-      },
-    );
-  }
-}
-
-/// Chapters: the list with start times, the playing one active; a pick
-/// jumps there. Nothing without chapters.
-class UoscChaptersButton extends StatelessWidget {
-  final List<MediaChapter> chapters;
-  final int? current;
-  final Duration duration;
-  final ValueChanged<MediaChapter> onPick;
-  final ValueChanged<bool>? onMenuOpen;
-  const UoscChaptersButton({
-    super.key,
-    required this.chapters,
-    required this.current,
-    required this.duration,
-    required this.onPick,
-    this.onMenuOpen,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    if (chapters.isEmpty) return const SizedBox.shrink();
-    return UoscButton(
-      key: const ValueKey('uosc-chapters'),
-      icon: Icons.bookmarks_outlined,
-      tooltip: 'Chapters (PgUp / PgDn)',
-      onPressed: () async {
-        onMenuOpen?.call(true);
-        final pick = await showUoscMenu<MediaChapter>(context,
-            title: 'Chapters', items: chapterMenuItems(chapters, current, duration));
-        onMenuOpen?.call(false);
-        if (pick != null) onPick(pick);
-      },
-    );
-  }
-}
-
-/// Shaders as uosc's quality badge: the active Anime4K preset ("A HQ"),
-/// "4K" dimmed when off. Opens the shader menu.
-class UoscShaderButton extends StatelessWidget {
-  final ReadonlySignal<RenderMode> renderMode;
-  final void Function(ShaderPreset preset, ShaderQuality? quality) onPick;
-  final ValueChanged<bool>? onMenuOpen;
-  const UoscShaderButton({super.key, required this.renderMode, required this.onPick, this.onMenuOpen});
-
-  @override
-  Widget build(BuildContext context) {
-    final s = AppSettings.instance;
-    return SignalBuilder(builder: (context) {
-      final preset = s.shaderPreset.value;
-      final quality = s.shaderQuality.value;
-      final short = shaderShortLabel(preset, quality);
-      return Builder(
-        builder: (context) => UoscBadgeButton(
-          key: const ValueKey('uosc-shaders'),
-          text: short ?? '4K',
-          active: short != null,
-          tooltip: short == null
-              ? 'Shaders: off (Ctrl+1..6)'
-              : 'Shaders: ${shaderLabel(preset, quality)} (Ctrl+0 off)',
-          onPressed: () {
-            final controls = UoscControls.maybeOf(context);
-            Future<void> open() =>
-                showShaderMenu(context, renderMode: renderMode, onPick: onPick, onMenuOpen: onMenuOpen);
-            controls == null ? open() : controls.holdDuring(open);
-          },
-        ),
-      );
-    });
-  }
-}
-
-/// One entry of the ≡ menu.
-typedef UoscAction = ({String title, String? hint, VoidCallback run});
-
-/// ≡: the session's actions as a menu.
-class UoscMainMenuButton extends StatelessWidget {
-  final List<UoscAction> actions;
-  final ValueChanged<bool>? onMenuOpen;
-  const UoscMainMenuButton({super.key, required this.actions, this.onMenuOpen});
-
-  @override
-  Widget build(BuildContext context) {
-    return UoscButton(
-      key: const ValueKey('uosc-menu-button'),
-      icon: Icons.menu_rounded,
-      tooltip: 'Menu',
-      onPressed: () async {
-        onMenuOpen?.call(true);
-        final pick = await showUoscMenu<UoscAction>(context, items: [
-          for (final a in actions) UoscMenuItem(value: a, title: a.title, hint: a.hint),
-        ]);
-        onMenuOpen?.call(false);
-        pick?.run();
-      },
-    );
-  }
-}

apps/desktop/lib/src/controls/uosc/controls.dart

@@ -1,293 +0,0 @@
-import 'dart:async';
-
-import 'package:flutter/material.dart';
-import 'package:signals/signals_flutter.dart';
-
-import '../../state/settings.dart';
-import '../controls_probe.dart' show ControlsHold;
-
-// The mpv-style (uosc) controls frame: a full-width timeline at the
-// bottom with a row of flat buttons above it, the title top left and a
-// corner widget top right.
-// Mouse movement shows them; after [UoscControls.hideAfter] without any
-// they fade out, the timeline shrinks to uosc's progress line (gone when
-// "Progress line when hidden" is off) and the cursor hides. Our own frame: no
-// media_kit controls state to reach into.
-
-class UoscControls extends StatefulWidget {
-  /// The timeline; [expanded] is false while the controls are hidden.
-  final Widget Function(BuildContext context, bool expanded) timeline;
-  /// Buttons left and right of the row above the timeline.
-  final List<Widget> left;
-  final List<Widget> right;
-  /// Top-right corner (chat, back to the library), shown with the controls.
-  final Widget? top;
-  /// Top left (what is playing), shown with the controls; gets the width
-  /// [top] leaves.
-  final Widget? topLeft;
-  final VoidCallback? onDoubleTap;
-  final Duration hideAfter;
-  /// Follows whether the controls are up (for overlays outside them).
-  final ValueNotifier<bool>? shown;
-  /// Keeps them up while held (the mouse on an overlay, an open popover).
-  final ControlsHold? holdBy;
-  const UoscControls({
-    super.key,
-    required this.timeline,
-    this.left = const [],
-    this.right = const [],
-    this.top,
-    this.topLeft,
-    this.onDoubleTap,
-    this.hideAfter = const Duration(seconds: 3),
-    this.shown,
-    this.holdBy,
-  });
-
-  static const buttonRowHeight = 40.0;
-  /// Under the button row, above the timeline.
-  static const rowBottomPadding = 4.0;
-
-  /// The controls around [context], for widgets that need them kept up
-  /// (a timeline drag, an open menu).
-  static UoscControlsState? maybeOf(BuildContext context) =>
-      context.findAncestorStateOfType<UoscControlsState>();
-
-  @override
-  State<UoscControls> createState() => UoscControlsState();
-}
-
-class UoscControlsState extends State<UoscControls> {
-  bool _visible = true;
-  int _holds = 0;
-  bool _heldBy = false;
-  Timer? _timer;
-
-  bool get visible => _visible;
-
-  @override
-  void initState() {
-    super.initState();
-    widget.holdBy?.addListener(_holdByChanged);
-    // Not during this build: an overlay listening to [shown] may be built.
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted) widget.shown?.value = true;
-    });
-    _hideLater();
-  }
-
-  @override
-  void didUpdateWidget(UoscControls oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.holdBy != widget.holdBy) {
-      oldWidget.holdBy?.removeListener(_holdByChanged);
-      widget.holdBy?.addListener(_holdByChanged);
-      _holdByChanged();
-    }
-  }
-
-  @override
-  void dispose() {
-    widget.holdBy?.removeListener(_holdByChanged);
-    _timer?.cancel();
-    super.dispose();
-  }
-
-  void _holdByChanged() {
-    final on = widget.holdBy?.held ?? false;
-    if (on == _heldBy || !mounted) return;
-    _heldBy = on;
-    hold(on);
-  }
-
-  /// Show the controls and restart the hide countdown.
-  void wake() {
-    if (!_visible && mounted) {
-      setState(() => _visible = true);
-      widget.shown?.value = true;
-    }
-    _hideLater();
-  }
-
-  /// Keep the controls up while [on] (paired calls): a drag sends no
-  /// hover events and a menu route takes the mouse.
-  void hold(bool on) {
-    _holds = on ? _holds + 1 : (_holds - 1).clamp(0, 1 << 20);
-    wake();
-  }
-
-  /// Runs [open] (a menu) with the controls held up.
-  Future<T> holdDuring<T>(Future<T> Function() open) async {
-    hold(true);
-    try {
-      return await open();
-    } finally {
-      if (mounted) hold(false);
-    }
-  }
-
-  void _hideLater() {
-    _timer?.cancel();
-    _timer = Timer(widget.hideAfter, _hide);
-  }
-
-  void _hide() {
-    if (!mounted || _holds > 0 || !_visible) return;
-    setState(() => _visible = false);
-    widget.shown?.value = false;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final visible = _visible;
-    const fade = Duration(milliseconds: 150);
-    return MouseRegion(
-      cursor: visible ? SystemMouseCursors.basic : SystemMouseCursors.none,
-      onEnter: (_) => wake(),
-      onHover: (_) => wake(),
-      onExit: (_) {
-        _timer?.cancel();
-        _hide();
-      },
-      child: Stack(
-        children: [
-          Positioned.fill(
-            child: GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onDoubleTap: widget.onDoubleTap,
-            ),
-          ),
-          Positioned(
-            left: 0,
-            right: 0,
-            bottom: 0,
-            height: 160,
-            child: IgnorePointer(
-              child: AnimatedOpacity(
-                duration: fade,
-                opacity: visible ? 1 : 0,
-                child: const DecoratedBox(
-                  decoration: BoxDecoration(
-                    gradient: LinearGradient(
-                      begin: Alignment.topCenter,
-                      end: Alignment.bottomCenter,
-                      colors: [Color(0x00000000), Color(0x8C000000)],
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-          if (widget.topLeft != null)
-            Positioned(
-              left: 0,
-              right: 0,
-              top: 0,
-              height: 120,
-              child: IgnorePointer(
-                child: AnimatedOpacity(
-                  duration: fade,
-                  opacity: visible ? 1 : 0,
-                  child: const DecoratedBox(
-                    decoration: BoxDecoration(
-                      gradient: LinearGradient(
-                        begin: Alignment.topCenter,
-                        end: Alignment.bottomCenter,
-                        colors: [Color(0x8C000000), Color(0x00000000)],
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          if (widget.top != null || widget.topLeft != null)
-            Positioned(
-              top: 0,
-              left: 0,
-              right: 0,
-              child: IgnorePointer(
-                key: const ValueKey('uosc-top'),
-                ignoring: !visible,
-                child: AnimatedOpacity(
-                  duration: fade,
-                  opacity: visible ? 1 : 0,
-                  // The buttons centred on the title, like the standard
-                  // design's top bar.
-                  child: Row(
-                    children: [
-                      Expanded(
-                        child: Padding(
-                          padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
-                          child: widget.topLeft == null
-                              ? const SizedBox.shrink()
-                              : Align(alignment: AlignmentDirectional.centerStart, child: widget.topLeft),
-                        ),
-                      ),
-                      if (widget.top != null)
-                        Padding(padding: const EdgeInsets.fromLTRB(0, 12, 6, 0), child: widget.top),
-                    ],
-                  ),
-                ),
-              ),
-            ),
-          Positioned(
-            left: 0,
-            right: 0,
-            bottom: 0,
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                IgnorePointer(
-                  key: const ValueKey('uosc-buttons'),
-                  ignoring: !visible,
-                  child: AnimatedOpacity(
-                    duration: fade,
-                    opacity: visible ? 1 : 0,
-                    child: Padding(
-                      padding: const EdgeInsets.fromLTRB(6, 0, 6, UoscControls.rowBottomPadding),
-                      child: SizedBox(
-                        height: UoscControls.buttonRowHeight,
-                        child: Row(children: [...widget.left, const Spacer(), ...widget.right]),
-                      ),
-                    ),
-                  ),
-                ),
-                // Hidden: the collapsed timeline is the progress line,
-                // unless the player settings turn it off.
-                SignalBuilder(
-                  builder: (context) {
-                    final line = AppSettings.instance.progressLine.value;
-                    return AnimatedOpacity(
-                      key: const ValueKey('uosc-timeline-wrap'),
-                      duration: fade,
-                      opacity: visible || line ? 1 : 0,
-                      child: widget.timeline(context, visible),
-                    );
-                  },
-                ),
-              ],
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-/// The session's controls: the standard ones ([material]) or, with the
-/// "Player design" setting on uosc, the uosc ones ([mpv]). Switches live
-/// when the setting changes.
-class SessionControlsSwitch extends StatelessWidget {
-  final WidgetBuilder material;
-  final WidgetBuilder mpv;
-  const SessionControlsSwitch({super.key, required this.material, required this.mpv});
-
-  @override
-  Widget build(BuildContext context) {
-    return SignalBuilder(
-      builder: (context) =>
-          AppSettings.instance.mpvControls.value ? mpv(context) : material(context),
-    );
-  }
-}

apps/desktop/lib/src/controls/uosc/menu.dart

@@ -1,249 +0,0 @@
-import 'dart:math' as math;
-
-import 'package:flutter/material.dart';
-import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
-
-import '../../jellyfin/track_prefs.dart' show MpvTrack;
-import '../../playback/media_marks.dart';
-import '../../screens/session/player_controls.dart' show TrackPick;
-import 'controls.dart';
-import 'style.dart';
-
-/// One row of a uosc menu: [title], a dim [hint] on the right (a time, a
-/// key), [active] = the current one (highlighted).
-class UoscMenuItem<T> {
-  final T value;
-  final String title;
-  final String? hint;
-  final bool active;
-  final bool enabled;
-  const UoscMenuItem({
-    required this.value,
-    required this.title,
-    this.hint,
-    this.active = false,
-    this.enabled = true,
-  });
-}
-
-/// A flat dark menu over the controls, above the widget of [context] (the
-/// button that opens it), with an optional [title] row. Resolves to the
-/// picked value, or null when dismissed (click outside, Esc). Keeps the
-/// controls up while open.
-Future<T?> showUoscMenu<T>(
-  BuildContext context, {
-  String? title,
-  required List<UoscMenuItem<T>> items,
-}) {
-  final navigator = Navigator.of(context);
-  final overlay = navigator.overlay!.context.findRenderObject() as RenderBox;
-  final box = context.findRenderObject() as RenderBox;
-  final anchor = Rect.fromPoints(
-    box.localToGlobal(Offset.zero, ancestor: overlay),
-    box.localToGlobal(box.size.bottomRight(Offset.zero), ancestor: overlay),
-  );
-  Future<T?> open() => navigator.push<T>(_UoscMenuRoute<T>(anchor: anchor, title: title, items: items));
-  final controls = UoscControls.maybeOf(context);
-  return controls == null ? open() : controls.holdDuring(open);
-}
-
-class _UoscMenuRoute<T> extends PopupRoute<T> {
-  final Rect anchor;
-  final String? title;
-  final List<UoscMenuItem<T>> items;
-  _UoscMenuRoute({required this.anchor, required this.title, required this.items});
-
-  @override
-  Color? get barrierColor => null;
-
-  @override
-  bool get barrierDismissible => true;
-
-  @override
-  String? get barrierLabel => 'Close menu';
-
-  @override
-  Duration get transitionDuration => Duration.zero;
-
-  @override
-  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
-    return LayoutBuilder(builder: (context, constraints) {
-      const width = 360.0;
-      final screen = constraints.biggest;
-      final left = anchor.left.clamp(8.0, math.max(8.0, screen.width - width - 8));
-      final maxHeight = math.max(120.0, anchor.top - 16);
-      return Stack(
-        children: [
-          Positioned(
-            left: left.toDouble(),
-            bottom: screen.height - anchor.top + 6,
-            width: math.min(width, screen.width - 16),
-            child: ConstrainedBox(
-              constraints: BoxConstraints(maxHeight: maxHeight),
-              child: UoscMenuPanel<T>(
-                title: title,
-                items: items,
-                onPick: (v) => Navigator.of(context).pop(v),
-              ),
-            ),
-          ),
-        ],
-      );
-    });
-  }
-}
-
-/// The menu's panel alone (tests pump it without a route).
-class UoscMenuPanel<T> extends StatefulWidget {
-  final String? title;
-  final List<UoscMenuItem<T>> items;
-  final ValueChanged<T> onPick;
-  const UoscMenuPanel({super.key, this.title, required this.items, required this.onPick});
-
-  static const rowHeight = 36.0;
-
-  @override
-  State<UoscMenuPanel<T>> createState() => _UoscMenuPanelState<T>();
-}
-
-class _UoscMenuPanelState<T> extends State<UoscMenuPanel<T>> {
-  // Long lists open on the current row.
-  late final _scroll = ScrollController(
-      initialScrollOffset: math.max(0, widget.items.indexWhere((i) => i.active) - 3) * UoscMenuPanel.rowHeight);
-
-  @override
-  void dispose() {
-    _scroll.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final title = widget.title;
-    return Material(
-      key: const ValueKey('uosc-menu'),
-      color: UoscStyle.panel,
-      borderRadius: BorderRadius.circular(UoscStyle.radius * 2),
-      clipBehavior: Clip.antiAlias,
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          if (title != null)
-            Container(
-              height: 34,
-              alignment: Alignment.center,
-              decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Color(0x22FFFFFF)))),
-              child: Text(title,
-                  style: const TextStyle(color: UoscStyle.dim, fontSize: UoscStyle.fontSize, fontWeight: FontWeight.w600)),
-            ),
-          Flexible(
-            child: ListView.builder(
-              shrinkWrap: true,
-              padding: const EdgeInsets.all(4),
-              controller: _scroll,
-              itemCount: widget.items.length,
-              itemExtent: UoscMenuPanel.rowHeight,
-              itemBuilder: (context, i) => _Row<T>(item: widget.items[i], onPick: widget.onPick),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _Row<T> extends StatefulWidget {
-  final UoscMenuItem<T> item;
-  final ValueChanged<T> onPick;
-  const _Row({super.key, required this.item, required this.onPick});
-
-  @override
-  State<_Row<T>> createState() => _RowState<T>();
-}
-
-class _RowState<T> extends State<_Row<T>> {
-  bool _hover = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final item = widget.item;
-    final color = item.active
-        ? UoscStyle.fill
-        : _hover && item.enabled
-            ? UoscStyle.hover
-            : Colors.transparent;
-    final textColor = item.enabled ? UoscStyle.text : UoscStyle.dim.withValues(alpha: 0.4);
-    return MouseRegion(
-      cursor: item.enabled ? SystemMouseCursors.click : SystemMouseCursors.basic,
-      onEnter: (_) => setState(() => _hover = true),
-      onExit: (_) => setState(() => _hover = false),
-      child: GestureDetector(
-        key: ValueKey('uosc-menu-item-${item.title}'),
-        behavior: HitTestBehavior.opaque,
-        onTap: item.enabled ? () => widget.onPick(item.value) : null,
-        child: Container(
-          padding: const EdgeInsets.symmetric(horizontal: 10),
-          decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(UoscStyle.radius)),
-          child: Row(
-            children: [
-              Expanded(
-                child: Text(item.title,
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                        color: textColor,
-                        fontSize: UoscStyle.fontSize,
-                        fontWeight: item.active ? FontWeight.w600 : FontWeight.normal)),
-              ),
-              if (item.hint != null) ...[
-                const SizedBox(width: 12),
-                Text(item.hint!,
-                    style: TextStyle(
-                        color: item.active ? UoscStyle.text : UoscStyle.dim,
-                        fontSize: 12,
-                        fontFeatures: const [FontFeature.tabularFigures()])),
-              ],
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// Chapters with their start times, the playing one active.
-List<UoscMenuItem<MediaChapter>> chapterMenuItems(List<MediaChapter> chapters, int? current, Duration duration) {
-  final withHours = duration >= const Duration(hours: 1);
-  return [
-    for (final c in chapters)
-      UoscMenuItem(
-        value: c,
-        title: c.title.isEmpty ? 'Chapter ${c.index + 1}' : c.title,
-        hint: formatUoscTime(c.start, withHours: withHours),
-        active: c.index == current,
-      ),
-  ];
-}
-
-/// The audio or subtitle tracks ("Japanese · E-AC3 2.0 · title"), mpv's
-/// selection active; subtitles start with Off.
-List<UoscMenuItem<TrackPick>> trackMenuItems(JellyfinStreamType type, List<MpvTrack> tracks) {
-  final audio = type == JellyfinStreamType.audio;
-  final list = tracks.where((t) => t.type == type).toList();
-  return [
-    if (!audio)
-      UoscMenuItem(
-        value: (aid: null, sid: null, subtitlesOff: true),
-        title: 'Off',
-        active: !list.any((t) => t.selected),
-      ),
-    for (final t in list)
-      UoscMenuItem(
-        value: audio ? (aid: t.id, sid: null, subtitlesOff: false) : (aid: null, sid: t.id, subtitlesOff: false),
-        title: t.label,
-        hint: '#${t.id}',
-        active: t.selected,
-      ),
-  ];
-}

apps/desktop/lib/src/controls/uosc/style.dart

@@ -1,77 +0,0 @@
-import 'package:flutter/material.dart';
-
-// Look of the experimental mpv-style controls, after the uosc theme as the
-// owner runs it: flat black panels, white icons, a muted blue fill.
-
-abstract final class UoscStyle {
-  /// The active menu row.
-  static const fill = Color(0xFF4C6A8E);
-  /// Menus and tooltips.
-  static const panel = Color(0xF0101010);
-  static const hover = Color(0x24FFFFFF);
-  static const text = Colors.white;
-  static const dim = Color(0xA6FFFFFF);
-  static const radius = 4.0;
-  static const fontSize = 13.0;
-}
-
-/// uosc's clock: "01:51", "1:02:03" style but zero-padded ("01:02:03")
-/// once [withHours] (the media is an hour or longer).
-String formatUoscTime(Duration d, {bool withHours = false}) {
-  final t = d.isNegative ? Duration.zero : d;
-  String two(int n) => n.toString().padLeft(2, '0');
-  final h = t.inHours, m = t.inMinutes % 60, s = t.inSeconds % 60;
-  return withHours || h > 0 ? '${two(h)}:${two(m)}:${two(s)}' : '${two(m)}:${two(s)}';
-}
-
-/// Dark rounded hover tip ("Subtitles"), shown above its child.
-class UoscTooltip extends StatelessWidget {
-  final String message;
-  final Widget child;
-  const UoscTooltip({super.key, required this.message, required this.child});
-
-  @override
-  Widget build(BuildContext context) {
-    if (message.isEmpty) return child;
-    return Tooltip(
-      message: message,
-      preferBelow: false,
-      verticalOffset: 26,
-      waitDuration: const Duration(milliseconds: 250),
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: UoscStyle.panel,
-        borderRadius: BorderRadius.circular(UoscStyle.radius),
-      ),
-      textStyle: const TextStyle(color: UoscStyle.text, fontSize: 12),
-      child: child,
-    );
-  }
-}
-
-/// A small dark box with one line of text (the timeline's hover time and
-/// chapter title).
-class UoscBox extends StatelessWidget {
-  final String text;
-  final Color color;
-  final TextStyle style;
-  const UoscBox(
-    this.text, {
-    super.key,
-    this.color = UoscStyle.panel,
-    this.style = const TextStyle(color: UoscStyle.text, fontSize: UoscStyle.fontSize),
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      constraints: const BoxConstraints(maxWidth: 360),
-      padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
-      decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(UoscStyle.radius)),
-      child: Text(text,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: style.copyWith(fontFeatures: const [FontFeature.tabularFigures()])),
-    );
-  }
-}

apps/desktop/lib/src/controls/uosc/timeline.dart

@@ -1,645 +0,0 @@
-import 'dart:async';
-import 'dart:math' as math;
-
-import 'package:flutter/material.dart';
-
-import '../../playback/media_marks.dart';
-import 'controls.dart';
-import 'style.dart';
-
-// A port of uosc's timeline (`elements/Timeline.lua`, defaults from
-// `uosc.conf` / `main.lua`), style `line`, scale 1: a translucent black
-// band, the position a thin white line (no filled progress), the
-// uncached part hatched, chapter diamonds on the top edge, elapsed time
-// left and the time remaining right, the buffered seconds next to the
-// position while under the threshold, and a tooltip with the time (and
-// the chapter title) under the mouse.
-
-/// uosc's defaults at scale 1.
-abstract final class UoscTimelineSpec {
-  /// `timeline_size`: the band's height when expanded.
-  static const size = 40.0;
-
-  /// `timeline_border`: band above the line, also the diamonds' border.
-  static const border = 1.0;
-
-  /// `timeline_line_width`: the position line.
-  static const lineWidth = 2.0;
-
-  /// `progress_size`: what is left when the controls hide.
-  static const progressSize = 2.0;
-
-  /// `progress_line_width`: the position line once minimized.
-  static const progressLineWidth = 20.0;
-
-  /// floor(min((size + 60) * 0.2, size * 0.96)).
-  static const fontSize = 20.0;
-
-  /// max(floor((size - fontSize) / 2.5), 4): the times' inset.
-  static const spacing = 8.0;
-
-  /// `text_border`: the outline of text drawn on the band.
-  static const textBorder = 1.2;
-
-  /// `opacity.timeline` (the band) and `opacity.chapters` (diamond fill).
-  static const opacity = 0.9;
-  static const chaptersOpacity = 0.8;
-
-  /// Gap between the band and its tooltips, and between tooltips.
-  static const tooltipGap = 2.0;
-
-  /// `buffered_time_threshold`: the cache label shows below this.
-  static const bufferedThreshold = Duration(seconds: 60);
-
-  /// max((size + border) / 10, 3): diamond radius cap.
-  static const chapterSize = (size + border) / 10;
-}
-
-/// uosc's `format_time(seconds, duration)`: mpv's "HH:MM:SS", trimmed to
-/// "MM:SS" for media under an hour and "SS" under a minute; negative
-/// values keep their minus ("-01:47:30").
-String uoscClock(Duration d, Duration max) {
-  final neg = d.isNegative && d.inSeconds != 0;
-  final t = d.abs();
-  String two(int n) => n.toString().padLeft(2, '0');
-  final full = '${two(t.inHours)}:${two(t.inMinutes % 60)}:${two(t.inSeconds % 60)}';
-  final trim = max < const Duration(minutes: 1) ? 6 : (max < const Duration(hours: 1) ? 3 : 0);
-  return '${neg ? '-' : ''}${full.substring(trim)}';
-}
-
-/// Fraction of [total] at [d], 0..1 (0 without a duration).
-double timelineFraction(Duration d, Duration total) {
-  final t = total.inMicroseconds;
-  if (t <= 0) return 0;
-  return (d.inMicroseconds / t).clamp(0.0, 1.0);
-}
-
-/// Where the uncached part starts (it runs to the end), as a fraction;
-/// null when nothing known is uncached. We know only the end of mpv's
-/// cache ahead ([buffered]); without it (0) uosc draws no ranges either,
-/// and a cache that reaches the end (within uosc's 0.5 s) leaves none.
-double? uncachedFrom({required Duration position, required Duration buffered, required Duration duration}) {
-  if (duration <= Duration.zero || buffered <= Duration.zero) return null;
-  final from = buffered > position ? buffered : position;
-  if (duration - from <= const Duration(milliseconds: 500)) return null;
-  return timelineFraction(from, duration);
-}
-
-/// The cache label next to the position ("12s"): the seconds buffered
-/// ahead, shown while under [UoscTimelineSpec.bufferedThreshold] and the
-/// cache does not reach the end (uosc drops it at eof-cached).
-String? cacheLabel({required Duration position, required Duration buffered, required Duration duration}) {
-  if (duration <= Duration.zero || buffered <= Duration.zero) return null;
-  if (duration - buffered <= const Duration(milliseconds: 500)) return null;
-  final ahead = buffered > position ? buffered - position : Duration.zero;
-  if (ahead >= UoscTimelineSpec.bufferedThreshold) return null;
-  return '${(ahead.inMilliseconds / 1000).round()}s';
-}
-
-/// The band's geometry at one size, as uosc lays it out: the position
-/// line takes [lineWidth] pixels, and times map around it (`t2x`) so no
-/// time lies inside the line.
-class UoscTimelineGeometry {
-  final double width;
-
-  /// The foreground height (without the top border).
-  final double size;
-
-  /// The playing position, 0..1.
-  final double progress;
-  final double lineWidth;
-  const UoscTimelineGeometry({
-    required this.width,
-    required this.size,
-    required this.progress,
-    this.lineWidth = UoscTimelineSpec.lineWidth,
-  });
-
-  /// [size] while the band animates between hidden (0) and shown (1)
-  /// (`get_effective_size`).
-  static double sizeAt(double visibility) =>
-      UoscTimelineSpec.progressSize +
-      ((UoscTimelineSpec.size - UoscTimelineSpec.progressSize) * visibility).ceilToDouble();
-
-  /// The position line's width at [size]: it grows to
-  /// [UoscTimelineSpec.progressLineWidth] over the last eighth of the
-  /// collapse.
-  static double lineWidthAt(double size) {
-    const p = UoscTimelineSpec.progressSize;
-    final minimized = 1 - math.min((size - p) / ((UoscTimelineSpec.size - p) / 8), 1.0);
-    return UoscTimelineSpec.lineWidth + (UoscTimelineSpec.progressLineWidth - UoscTimelineSpec.lineWidth) * minimized;
-  }
-
-  double get height => size + UoscTimelineSpec.border;
-
-  /// Top of the foreground (below the border).
-  double get top => UoscTimelineSpec.border;
-  double get lineLeft => ((width - lineWidth) * progress).roundToDouble();
-  double get lineRight => ((width - lineWidth) * progress + lineWidth).roundToDouble();
-
-  /// x of [fraction] (uosc's `t2x`): past the position, shifted over the line.
-  double x(double fraction) {
-    final lw = lineWidth - 1;
-    final at = 0.5 + (width - lw - 1) * fraction;
-    return fraction <= progress ? at : at + lw;
-  }
-
-  /// The fraction at [x] (uosc's `get_time_at_x`): x on the line is the
-  /// position.
-  double fractionAt(double x) {
-    const lw = UoscTimelineSpec.lineWidth - 1;
-    final timeWidth = width - lw - 1;
-    if (timeWidth <= 0) return 0;
-    final a = timeWidth * progress, b = a + lw;
-    var at = x - 0.5;
-    if (at > b) {
-      at -= lw;
-    } else if (at > a) {
-      at = a;
-    }
-    return (at / timeWidth).clamp(0.0, 1.0);
-  }
-
-  /// Chapter diamond radius at this size; doubled while hovered.
-  double get diamondRadius => math.min(math.max(1.0, size * 0.8), UoscTimelineSpec.chapterSize);
-}
-
-/// The uosc timeline. [expanded] false (the controls hidden) shrinks it,
-/// animated, to the progress line. Seeks ([onSeek]) on press, on every
-/// drag move and on release; a press on a hovered chapter diamond jumps
-/// to that chapter. The session sends those through the user-seek path.
-class UoscTimeline extends StatefulWidget {
-  final Duration position;
-  final Duration duration;
-
-  /// End of the cached range ([PlaybackController.buffered]).
-  final Duration buffered;
-  final List<MediaChapter> chapters;
-  final bool expanded;
-  final ValueChanged<Duration> onSeek;
-  const UoscTimeline({
-    super.key,
-    required this.position,
-    required this.duration,
-    this.buffered = Duration.zero,
-    this.chapters = const [],
-    this.expanded = true,
-    required this.onSeek,
-  });
-
-  static const height = UoscTimelineSpec.size + UoscTimelineSpec.border;
-  static const collapsedHeight = UoscTimelineSpec.progressSize + UoscTimelineSpec.border;
-
-  /// uosc's `animation_duration`.
-  static const animation = Duration(milliseconds: 100);
-
-  @override
-  State<UoscTimeline> createState() => _UoscTimelineState();
-}
-
-class _UoscTimelineState extends State<UoscTimeline> {
-  Offset? _hover;
-  bool _dragging = false;
-  double _dragFraction = 0;
-  Duration? _lastSent;
-  // A released seek, shown until the position catches up (else the line
-  // jumps back to the old position for a moment).
-  double? _pending;
-  Timer? _pendingTimer;
-
-  Duration _at(double fraction) => widget.duration * fraction.clamp(0.0, 1.0);
-
-  void _send(Duration d) {
-    if (d == _lastSent) return;
-    _lastSent = d;
-    widget.onSeek(d);
-  }
-
-  void _drag(bool on) {
-    if (_dragging == on) return;
-    setState(() => _dragging = on);
-    UoscControls.maybeOf(context)?.hold(on);
-  }
-
-  void _settle(double fraction) {
-    _pending = fraction;
-    _pendingTimer?.cancel();
-    _pendingTimer = Timer(const Duration(seconds: 2), () {
-      if (mounted) setState(() => _pending = null);
-    });
-  }
-
-  @override
-  void didUpdateWidget(UoscTimeline old) {
-    super.didUpdateWidget(old);
-    if (!widget.expanded && old.expanded) _hover = null;
-    final p = _pending;
-    if (p != null && widget.duration > Duration.zero) {
-      final off = (widget.position - _at(p)).abs();
-      if (off < const Duration(milliseconds: 1500)) {
-        _pending = null;
-        _pendingTimer?.cancel();
-      }
-    }
-  }
-
-  @override
-  void dispose() {
-    _pendingTimer?.cancel();
-    // A drag cut short by a rebuild must not keep the controls up.
-    if (_dragging) UoscControls.maybeOf(context)?.hold(false);
-    super.dispose();
-  }
-
-  /// The chapter whose diamond is within twice its radius of [at].
-  int? _hoveredChapter(UoscTimelineGeometry geo, List<MediaChapter> marks, Offset? at) {
-    if (at == null || _dragging) return null;
-    final reach = geo.diamondRadius * 2;
-    int? best;
-    var bestD = double.infinity;
-    for (var i = 0; i < marks.length; i++) {
-      final cx = geo.x(timelineFraction(marks[i].start, widget.duration));
-      final d = (Offset(cx, 0) - at).distance;
-      if (d <= reach && d < bestD) {
-        best = i;
-        bestD = d;
-      }
-    }
-    return best;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final font = DefaultTextStyle.of(context).style.fontFamily ?? Theme.of(context).textTheme.bodyMedium?.fontFamily;
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final width = constraints.maxWidth;
-        return TweenAnimationBuilder<double>(
-          tween: Tween(end: widget.expanded ? 1 : 0),
-          duration: UoscTimeline.animation,
-          builder: (context, visibility, _) => _band(width, visibility, font),
-        );
-      },
-    );
-  }
-
-  Widget _band(double width, double visibility, String? font) {
-    final expanded = widget.expanded;
-    final duration = widget.duration;
-    final size = UoscTimelineGeometry.sizeAt(visibility);
-    final progress = _dragging ? _dragFraction : (_pending ?? timelineFraction(widget.position, duration));
-    final shown = _at(progress);
-    final geo = UoscTimelineGeometry(
-      width: width,
-      size: size,
-      progress: progress,
-      lineWidth: UoscTimelineGeometry.lineWidthAt(size),
-    );
-    final marks = duration > Duration.zero ? widget.chapters : const <MediaChapter>[];
-    final hover = expanded ? _hover : null;
-    final hovered = _hoveredChapter(geo, marks, hover);
-    final hoverFraction = hovered != null
-        ? timelineFraction(marks[hovered].start, duration)
-        : (hover == null || duration <= Duration.zero ? null : geo.fractionAt(hover.dx));
-    final hoverAt = hoverFraction == null ? null : _at(hoverFraction);
-    final cursorX = hovered != null ? geo.x(hoverFraction!) : hover?.dx;
-    final hoverChapter = hoverAt == null ? null : chapterIndexAt(widget.chapters, hoverAt);
-    final hoverTitle = hoverChapter == null ? '' : widget.chapters[hoverChapter].title;
-    // Text fades out just before it would overflow the shrinking band.
-    const hideBelow = UoscTimelineSpec.fontSize * 0.8;
-    final textOpacity = (size - hideBelow).clamp(0.0, hideBelow / 2) / (hideBelow / 2);
-    final radius = geo.diamondRadius;
-    final timestampGap = UoscTimelineSpec.tooltipGap + (hovered != null ? radius * 2 : radius).roundToDouble();
-    final painter = UoscTimelinePainter(
-      geometry: geo,
-      visibility: visibility,
-      uncached: uncachedFrom(position: widget.position, buffered: widget.buffered, duration: duration),
-      chapters: [for (final c in marks) timelineFraction(c.start, duration)],
-      hoveredChapter: hovered,
-      hoverX: cursorX,
-      textOpacity: textOpacity,
-      elapsed: duration > Duration.zero ? uoscClock(shown, duration) : null,
-      remaining: duration > Duration.zero ? uoscClock(shown - duration, duration) : null,
-      cache: cacheLabel(position: widget.position, buffered: widget.buffered, duration: duration),
-      fontFamily: font,
-    );
-    final bar = SizedBox(
-      key: const ValueKey('uosc-timeline'),
-      width: width,
-      height: geo.height,
-      child: Stack(
-        clipBehavior: Clip.none,
-        children: [
-          Positioned.fill(
-            child: RepaintBoundary(child: CustomPaint(painter: painter)),
-          ),
-          if (hoverAt != null && cursorX != null)
-            Positioned(
-              left: 0,
-              right: 0,
-              bottom: geo.height + timestampGap,
-              height: 160,
-              child: IgnorePointer(
-                child: CustomMultiChildLayout(
-                  delegate: _TooltipLayout(x: cursorX),
-                  children: [
-                    LayoutId(
-                      id: #time,
-                      child: UoscBox(
-                        uoscClock(hoverAt, duration),
-                        key: const ValueKey('uosc-hover-time'),
-                        color: Colors.black,
-                        style: _tipStyle,
-                      ),
-                    ),
-                    if (hoverTitle.isNotEmpty)
-                      LayoutId(
-                        id: #chapter,
-                        child: UoscBox(
-                          hoverTitle,
-                          key: const ValueKey('uosc-hover-chapter'),
-                          color: Colors.black,
-                          style: _tipStyle.copyWith(fontWeight: FontWeight.bold),
-                        ),
-                      ),
-                  ],
-                ),
-              ),
-            ),
-        ],
-      ),
-    );
-    if (!expanded) return IgnorePointer(child: bar);
-    Offset clampTo(Offset p) => Offset(p.dx.clamp(0.0, width), p.dy);
-    return MouseRegion(
-      cursor: SystemMouseCursors.click,
-      onEnter: (e) => setState(() => _hover = clampTo(e.localPosition)),
-      onHover: (e) => setState(() => _hover = clampTo(e.localPosition)),
-      onExit: (_) {
-        if (!_dragging) setState(() => _hover = null);
-      },
-      child: Listener(
-        behavior: HitTestBehavior.opaque,
-        onPointerDown: (e) {
-          if (duration <= Duration.zero || width <= 0) return;
-          final at = clampTo(e.localPosition);
-          final chapter = _hoveredChapter(geo, marks, at);
-          _lastSent = null;
-          if (chapter != null) {
-            final f = timelineFraction(marks[chapter].start, duration);
-            _settle(f);
-            _send(marks[chapter].start);
-            setState(() {});
-            return;
-          }
-          _pending = null;
-          _dragFraction = geo.fractionAt(at.dx);
-          _drag(true);
-          _send(_at(_dragFraction));
-        },
-        onPointerMove: (e) {
-          if (!_dragging) return;
-          final at = clampTo(e.localPosition);
-          setState(() {
-            _hover = at;
-            _dragFraction = geo.fractionAt(at.dx);
-          });
-          _send(_at(_dragFraction));
-        },
-        onPointerUp: (e) {
-          if (!_dragging) return;
-          _send(_at(_dragFraction));
-          _settle(_dragFraction);
-          final p = e.localPosition;
-          if (p.dx < 0 || p.dx > width || p.dy < 0 || p.dy > geo.height) _hover = null;
-          _drag(false);
-        },
-        onPointerCancel: (_) => _drag(false),
-        child: bar,
-      ),
-    );
-  }
-
-  static const _tipStyle = TextStyle(color: UoscStyle.text, fontSize: UoscTimelineSpec.fontSize, height: 1);
-}
-
-/// The hover tooltips: the time centred on [x], the chapter title over
-/// it; each kept [UoscTimelineSpec.tooltipGap] inside the band's ends.
-class _TooltipLayout extends MultiChildLayoutDelegate {
-  final double x;
-  _TooltipLayout({required this.x});
-
-  @override
-  void performLayout(Size size) {
-    const gap = UoscTimelineSpec.tooltipGap;
-    double left(double w) => (x - w / 2).clamp(gap, math.max(gap, size.width - gap - w));
-    final loose = BoxConstraints.loose(size);
-    final time = layoutChild(#time, loose);
-    final timeTop = size.height - time.height;
-    positionChild(#time, Offset(left(time.width), timeTop));
-    if (hasChild(#chapter)) {
-      final chapter = layoutChild(#chapter, loose);
-      positionChild(#chapter, Offset(left(chapter.width), timeTop - gap - chapter.height));
-    }
-  }
-
-  @override
-  bool shouldRelayout(_TooltipLayout old) => old.x != x;
-}
-
-/// Paints the band as uosc does: background, the position line, the
-/// uncached hatching, chapter diamonds, the times, the hover line.
-class UoscTimelinePainter extends CustomPainter {
-  final UoscTimelineGeometry geometry;
-
-  /// 0 hidden .. 1 shown (picks the hatching texture and its strength).
-  final double visibility;
-
-  /// Start of the uncached part (to the end), as a fraction.
-  final double? uncached;
-
-  /// Chapter starts, as fractions.
-  final List<double> chapters;
-  final int? hoveredChapter;
-
-  /// The hover line (the mouse, or the hovered chapter).
-  final double? hoverX;
-  final double textOpacity;
-  final String? elapsed;
-  final String? remaining;
-  final String? cache;
-  final String? fontFamily;
-  const UoscTimelinePainter({
-    required this.geometry,
-    this.visibility = 1,
-    this.uncached,
-    this.chapters = const [],
-    this.hoveredChapter,
-    this.hoverX,
-    this.textOpacity = 1,
-    this.elapsed,
-    this.remaining,
-    this.cache,
-    this.fontFamily,
-  });
-
-  double get played => geometry.progress;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final g = geometry;
-    final w = size.width, bottom = size.height, top = g.top;
-    final line = Rect.fromLTRB(g.lineLeft, top, g.lineRight, bottom);
-    // Background (`opacity.timeline`) around the position line.
-    final bg = Path()
-      ..fillType = PathFillType.evenOdd
-      ..addRect(Offset.zero & size)
-      ..addRect(line);
-    canvas.drawPath(bg, Paint()..color = Colors.black.withValues(alpha: UoscTimelineSpec.opacity));
-    canvas.drawRect(line, Paint()..color = Colors.white);
-    _hatch(canvas, w, top, bottom);
-    _chapters(canvas);
-    if (textOpacity > 0) _times(canvas, w, top, bottom, line);
-    final x = hoverX;
-    if (x != null) {
-      final onLine = line.left - 0.5 < x && x < line.right + 0.5;
-      canvas.drawRect(
-        Rect.fromLTRB(x - 0.5, top, x + 0.5, bottom),
-        Paint()..color = (onLine ? Colors.black : Colors.white).withValues(alpha: 0.33),
-      );
-    }
-  }
-
-  /// uosc's texture "b" (shown) or "a" (hidden) at 80 px: "/" stripes
-  /// 1.6 px thick, white then black shifted by size / 24 (or / 28).
-  void _hatch(Canvas canvas, double w, double top, double bottom) {
-    final from = uncached;
-    if (from == null) return;
-    final ax = from * (geometry.width) < 0.5 ? 0.0 : geometry.x(from).floorToDouble();
-    if (ax >= w) return;
-    final shown = visibility > 0;
-    const tile = 80.0, unit = tile / 100;
-    final period = (shown ? 100 / 12 : 100 / 14) * unit;
-    final phase = shown ? 0.0 : 5.727 * unit;
-    final offset = tile / (shown ? 24 : 28);
-    final h = bottom - top;
-    canvas.save();
-    canvas.clipRect(Rect.fromLTRB(ax, top, w, bottom));
-    void stripes(Color color, double opacity, double anchor) {
-      final paint = Paint()
-        ..color = color.withValues(alpha: opacity)
-        ..strokeWidth = 2 * unit;
-      // x + (y - bottom) = anchor + phase + k * period.
-      final base = anchor + phase;
-      final k0 = ((ax - h - base) / period).floor() - 1;
-      for (var k = k0; base + k * period <= w + 1; k++) {
-        final c = base + k * period;
-        canvas.drawLine(Offset(c, bottom), Offset(c + h, top), paint);
-      }
-    }
-
-    stripes(Colors.white, 0.4 - 0.2 * visibility, 0);
-    stripes(Colors.black, 0.6 - 0.2 * visibility, offset);
-    canvas.restore();
-  }
-
-  void _chapters(Canvas canvas) {
-    final g = geometry;
-    final r = g.diamondRadius;
-    if (r <= 0) return;
-    void diamond(double fraction, double radius) {
-      final c = Offset(g.x(fraction), 0);
-      Path shape(double r) => Path()
-        ..moveTo(c.dx - r, c.dy)
-        ..lineTo(c.dx, c.dy - r)
-        ..lineTo(c.dx + r, c.dy)
-        ..lineTo(c.dx, c.dy + r)
-        ..close();
-      final inner = shape(radius);
-      // A 1 px border outside the fill (`\bord`), the fill translucent.
-      final outer = shape(radius + UoscTimelineSpec.border * math.sqrt2);
-      canvas.drawPath(Path.combine(PathOperation.difference, outer, inner), Paint()..color = Colors.black);
-      canvas.drawPath(inner, Paint()..color = Colors.white.withValues(alpha: UoscTimelineSpec.chaptersOpacity));
-    }
-
-    for (var i = 0; i < chapters.length; i++) {
-      if (i != hoveredChapter) diamond(chapters[i], r);
-    }
-    final h = hoveredChapter;
-    if (h != null && h < chapters.length) diamond(chapters[h], r * 2);
-  }
-
-  TextPainter _text(String s, double fontSize, Color color, {Paint? foreground}) => TextPainter(
-    text: TextSpan(
-      text: s,
-      style: TextStyle(
-        fontFamily: fontFamily,
-        fontSize: fontSize,
-        height: 1,
-        color: foreground == null ? color : null,
-        foreground: foreground,
-        fontFeatures: const [FontFeature.tabularFigures()],
-      ),
-    ),
-    textDirection: TextDirection.ltr,
-  )..layout();
-
-  /// Text on the band: white with a black outline, inverted where it
-  /// crosses the position line (uosc clips one copy to each).
-  void _label(Canvas canvas, String s, double fontSize, double opacity, Offset at, Rect line, Size size) {
-    void copy(Color fill, Color outline) {
-      _text(
-        s,
-        fontSize,
-        fill,
-        foreground: Paint()
-          ..style = PaintingStyle.stroke
-          ..strokeWidth = UoscTimelineSpec.textBorder * 2
-          ..strokeJoin = StrokeJoin.round
-          ..color = outline.withValues(alpha: opacity),
-      ).paint(canvas, at);
-      _text(s, fontSize, fill.withValues(alpha: opacity)).paint(canvas, at);
-    }
-
-    canvas.save();
-    canvas.clipPath(
-      Path()
-        ..fillType = PathFillType.evenOdd
-        ..addRect(Rect.fromLTWH(-20, -20, size.width + 40, size.height + 40))
-        ..addRect(line),
-    );
-    copy(Colors.white, Colors.black);
-    canvas.restore();
-    canvas.save();
-    canvas.clipRect(line);
-    copy(Colors.black, Colors.white);
-    canvas.restore();
-  }
-
-  void _times(Canvas canvas, double w, double top, double bottom, Rect line) {
-    const fs = UoscTimelineSpec.fontSize, spacing = UoscTimelineSpec.spacing;
-    final size = Size(w, bottom);
-    final cy = top + (bottom - top) / 2;
-    final e = elapsed, r = remaining;
-    final ew = e == null ? 0.0 : _text(e, fs, Colors.white).width;
-    final rw = r == null ? 0.0 : _text(r, fs, Colors.white).width;
-    final c = cache;
-    if (c != null) {
-      const cfs = fs * 0.8, margin = 5.0;
-      final cw = _text(c, cfs, Colors.white).width;
-      var x = line.right + margin;
-      final minX = spacing + margin + ew, maxX = w - spacing - margin - rw;
-      if (x < minX) {
-        x = minX;
-      } else if (x + cw > maxX) {
-        x = maxX - cw;
-      }
-      _label(canvas, c, cfs, textOpacity * 0.6, Offset(x, cy - cfs / 2), line, size);
-    }
-    if (e != null) _label(canvas, e, fs, textOpacity, Offset(spacing, cy - fs / 2), line, size);
-    if (r != null) _label(canvas, r, fs, textOpacity, Offset(w - spacing - rw, cy - fs / 2), line, size);
-  }
-
-  @override
-  bool shouldRepaint(UoscTimelinePainter old) => true;
-}

apps/desktop/lib/src/controls/uosc/volume_flash.dart

@@ -1,128 +0,0 @@
-import 'dart:math' as math;
-
-import 'package:flutter/material.dart';
-
-import '../volume.dart' show maxVolume;
-
-// uosc's volume slider (`elements/Volume.lua`) as it flashes on a volume
-// change: a vertical band at the right edge, black at `opacity.slider`
-// with a white gauge from the bottom, notches at 100 %, the value at the
-// bottom (black on the gauge, white off it).
-
-/// The flashed uosc volume slider; size it with [UoscVolumeSlider.width]
-/// and the height uosc gives it (see [UoscVolumeSlider.heightFor]).
-class UoscVolumeSlider extends StatelessWidget {
-  /// 0..[maxVolume].
-  final double volume;
-  const UoscVolumeSlider({super.key, required this.volume});
-
-  /// `volume_size`.
-  static const width = 40.0;
-
-  /// uosc: min(size * 8, 80 % of the room between the bars), less the
-  /// mute button (one [width]) below it.
-  static double heightFor(double room) => math.min(width * 8, room * 0.8) - width;
-
-  @override
-  Widget build(BuildContext context) => CustomPaint(
-    key: const ValueKey('uosc-volume-flash'),
-    painter: UoscVolumePainter(
-      volume: volume,
-      fontFamily: DefaultTextStyle.of(context).style.fontFamily ?? Theme.of(context).textTheme.bodyMedium?.fontFamily,
-    ),
-  );
-}
-
-class UoscVolumePainter extends CustomPainter {
-  final double volume;
-  final String? fontFamily;
-  const UoscVolumePainter({required this.volume, this.fontFamily});
-
-  /// `volume_border`, `border_radius`.
-  static const border = 1.0;
-  static const radius = 4.0;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final w = size.width, h = size.height;
-    if (w <= 0 || h <= w) return;
-    final v = volume.clamp(0.0, maxVolume);
-    final nudgeY = h - (h * (100 / maxVolume)).roundToDouble();
-    final nudge = (w * 0.18).roundToDouble();
-    final spacing = (w * 0.2).roundToDouble();
-    Path notches(double inset) {
-      final n = nudge - inset;
-      return Path()
-        ..moveTo(0, nudgeY - nudge)
-        ..lineTo(inset + n, nudgeY)
-        ..lineTo(0, nudgeY + nudge)
-        ..close()
-        ..moveTo(w, nudgeY - nudge)
-        ..lineTo(w - inset - n, nudgeY)
-        ..lineTo(w, nudgeY + nudge)
-        ..close();
-    }
-
-    final bg = RRect.fromRectAndRadius(Offset.zero & size, const Radius.circular(radius + border));
-    final volumeY = border + (h - border * 2) * (1 - math.min(v / maxVolume, 1));
-    final gauge = RRect.fromRectAndRadius(
-      Rect.fromLTRB(border, math.min(volumeY, h - border), w - border, h - border),
-      const Radius.circular(radius),
-    );
-    // The notches cut into both.
-    canvas.save();
-    canvas.clipPath(
-      Path()
-        ..fillType = PathFillType.evenOdd
-        ..addRect(Offset.zero & size)
-        ..addPath(notches(0), Offset.zero),
-    );
-    canvas.drawPath(
-      Path()
-        ..fillType = PathFillType.evenOdd
-        ..addRRect(bg)
-        ..addRRect(gauge),
-      Paint()..color = Colors.black.withValues(alpha: 0.9),
-    );
-    canvas.restore();
-    canvas.save();
-    canvas.clipPath(
-      Path()
-        ..fillType = PathFillType.evenOdd
-        ..addRect(Offset.zero & size)
-        ..addPath(notches(border), Offset.zero),
-    );
-    canvas.drawRRect(gauge, Paint()..color = Colors.white);
-    canvas.restore();
-
-    // round(volume * 10) / 10, as Lua prints it ("85", "85.5").
-    final tenths = (v * 10).round();
-    final text = tenths % 10 == 0 ? '${tenths ~/ 10}' : (tenths / 10).toString();
-    final fontSize = (w * 0.6 - text.length * (w / 20)).roundToDouble();
-    TextPainter label(Color color) => TextPainter(
-      text: TextSpan(
-        text: text,
-        style: TextStyle(fontFamily: fontFamily, fontSize: fontSize, height: 1, color: color),
-      ),
-      textDirection: TextDirection.ltr,
-    )..layout();
-    final dark = label(Colors.black), light = label(Colors.white);
-    final at = Offset((w - dark.width) / 2, h - spacing - dark.height);
-    canvas.save();
-    canvas.clipRRect(gauge);
-    dark.paint(canvas, at);
-    canvas.restore();
-    canvas.save();
-    canvas.clipPath(
-      Path()
-        ..fillType = PathFillType.evenOdd
-        ..addRect(Offset.zero & size)
-        ..addRRect(gauge),
-    );
-    light.paint(canvas, at);
-    canvas.restore();
-  }
-
-  @override
-  bool shouldRepaint(UoscVolumePainter old) => old.volume != volume || old.fontFamily != fontFamily;
-}

apps/desktop/lib/src/controls/volume.dart

@@ -3,7 +3,6 @@ import 'dart:async';
 import 'package:flutter/foundation.dart' show ValueListenable;
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:media_kit/media_kit.dart';
 
 import '../playback/playback_controller.dart' show PlaybackController;
 import '../widgets/app_menu.dart' show AppGlass;
@@ -90,7 +89,7 @@ class VolumeFlash extends StatefulWidget {
   final WidgetBuilder builder;
   const VolumeFlash({super.key, required this.trigger, required this.builder});
 
-  /// uosc's `flash_duration`.
+  /// How long the readout stays after the last step.
   static const hold = Duration(seconds: 1);
 
   @override
@@ -142,7 +141,7 @@ class _VolumeFlashState extends State<VolumeFlash> {
   );
 }
 
-/// The standard design's volume readout for [VolumeFlash]: a glass pill
+/// The volume readout for [VolumeFlash] (both skins): a glass pill
 /// (the player's pill look) with the icon, a [VolumeBar] and the
 /// percentage.
 class VolumeReadout extends StatelessWidget {
@@ -159,11 +158,7 @@ class VolumeReadout extends StatelessWidget {
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Icon(
-              v <= 0 ? Icons.volume_off : (v < 50 ? Icons.volume_down : Icons.volume_up),
-              size: 20,
-              color: v > 100 ? boostColor : Colors.white,
-            ),
+            Icon(volumeIcon(v), size: 20, color: v > 100 ? boostColor : Colors.white),
             const SizedBox(width: 8),
             VolumeBar(volume: v, onChanged: (_) {}, width: 96),
             const SizedBox(width: 10),
@@ -246,72 +241,88 @@ class _VolumePainter extends CustomPainter {
   bool shouldRepaint(_VolumePainter old) => old.volume != volume || old.color != color || old.trackColor != trackColor;
 }
 
-/// Volume for the standard bar (instead of media_kit's, which stops at
-/// 100): the icon mutes / unmutes, hovering shows a [VolumeBar], the
-/// wheel steps [volumeStep].
-class VolumeButton extends StatefulWidget {
-  final Player player;
-  final FocusNode? focusNode;
-  const VolumeButton({super.key, required this.player, this.focusNode});
+/// The speaker icon for [volume].
+IconData volumeIcon(double volume) =>
+    volume <= 0 ? Icons.volume_off_rounded : (volume < 50 ? Icons.volume_down_rounded : Icons.volume_up_rounded);
+
+/// Builds a skin's button for the [VolumeControl].
+typedef VolumeButtonBuilder = Widget Function(
+  BuildContext context,
+  IconData icon,
+  Color? color,
+  String tooltip,
+  VoidCallback onPressed,
+);
+
+/// The bar's volume, in both skins: the skin's speaker button (click
+/// mutes / unmutes), a [VolumeBar] sliding out on hover, the wheel on it
+/// stepping [volumeStep] (claimed, so the player's wheel skips it).
+class VolumeControl extends StatefulWidget {
+  /// 0..[maxVolume].
+  final double volume;
+  final ValueChanged<double> onChanged;
+  final VoidCallback onToggleMute;
+  final VolumeButtonBuilder button;
+  final Color sliderColor;
+  final Color trackColor;
+  final double sliderWidth;
+  const VolumeControl({
+    super.key,
+    required this.volume,
+    required this.onChanged,
+    required this.onToggleMute,
+    required this.button,
+    this.sliderColor = Colors.white,
+    this.trackColor = Colors.white30,
+    this.sliderWidth = 72,
+  });
 
   @override
-  State<VolumeButton> createState() => _VolumeButtonState();
+  State<VolumeControl> createState() => _VolumeControlState();
 }
 
-class _VolumeButtonState extends State<VolumeButton> {
+class _VolumeControlState extends State<VolumeControl> {
   final _steps = WheelSteps();
   bool _hover = false;
-  double _beforeMute = 100;
 
   @override
   Widget build(BuildContext context) {
-    final player = widget.player;
-    return StreamBuilder<double>(
-      stream: player.stream.volume,
-      initialData: player.state.volume,
-      builder: (context, snap) {
-        final v = snap.data ?? 100;
-        return MouseRegion(
-          onEnter: (_) => setState(() => _hover = true),
-          onExit: (_) => setState(() => _hover = false),
-          child: Listener(
-            // Claimed here, so the player's own wheel handler skips it.
-            onPointerSignal: (e) =>
-                _steps.handle(e, (step) => player.setVolume(stepVolume(player.state.volume, step * volumeStep))),
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                const SizedBox(width: 4),
-                IconButton(
-                  key: const ValueKey('volume-button'),
-                  focusNode: widget.focusNode,
-                  tooltip: 'Volume ${v.round()} %',
-                  iconSize: 22,
-                  color: Colors.white,
-                  onPressed: () {
-                    if (v > 0) {
-                      _beforeMute = v;
-                      player.setVolume(0);
-                    } else {
-                      player.setVolume(_beforeMute <= 0 ? 100 : _beforeMute);
-                    }
-                  },
-                  icon: Icon(v <= 0 ? Icons.volume_off : (v < 50 ? Icons.volume_down : Icons.volume_up)),
-                ),
-                AnimatedSize(
-                  duration: const Duration(milliseconds: 150),
-                  child: _hover
-                      ? Padding(
-                          padding: const EdgeInsets.only(left: 4, right: 12),
-                          child: VolumeBar(volume: v, onChanged: player.setVolume),
-                        )
-                      : const SizedBox.shrink(),
-                ),
-              ],
+    final v = widget.volume;
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hover = true),
+      onExit: (_) => setState(() => _hover = false),
+      child: Listener(
+        onPointerSignal: (e) => _steps.handle(e, (step) => widget.onChanged(stepVolume(v, step * volumeStep))),
+        child: Row(
+          key: const ValueKey('volume-control'),
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            widget.button(
+              context,
+              volumeIcon(v),
+              v > 100 ? boostColor : null,
+              'Volume ${v.round()} %  (scroll, ↑ / ↓)',
+              widget.onToggleMute,
             ),
-          ),
-        );
-      },
+            AnimatedSize(
+              duration: const Duration(milliseconds: 150),
+              child: _hover
+                  ? Padding(
+                      padding: const EdgeInsets.only(left: 4, right: 8),
+                      child: VolumeBar(
+                        key: const ValueKey('volume-bar'),
+                        volume: v,
+                        onChanged: widget.onChanged,
+                        width: widget.sliderWidth,
+                        color: widget.sliderColor,
+                        trackColor: widget.trackColor,
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }

apps/desktop/lib/src/playback/playback_controller.dart

@@ -149,6 +149,9 @@ class PlaybackController {
   /// `demuxer-cache-time`, media_kit's `buffer`), in 250 ms steps.
   final buffered = signal(Duration.zero);
 
+  /// The player's volume, 0..[maxVolume] (media_kit's `volume`).
+  final volume = signal(100.0);
+
   /// The opening ([openingRange]: Intro segment, else an OP-titled
   /// chapter) and the ending ([endingRange]: Outro, else ED-titled).
   late final Computed<SkipRange?> opening =
@@ -504,9 +507,11 @@ class PlaybackController {
     }
   }
 
-  // Position / duration from media_kit's streams; chapter-list and
+  // Position, duration and volume from media_kit's streams; chapter-list and
   // track-list observed in mpv (read back as JSON).
   void _watchMarks(SyncPlayer p) {
+    volume.value = p.state.volume;
+    _timeSubs.add(p.stream.volume.listen((v) => volume.value = v));
     _timeSubs.add(p.stream.position.listen((d) {
       // At the end the bar shows full: mpv's last position is the last
       // frame's start (and the 250 ms steps round down), short of duration.

apps/desktop/lib/src/queue/queue_ui.dart

@@ -9,9 +9,7 @@ import 'package:signals/signals_flutter.dart';
 import 'package:sync_relay_core/core.dart';
 
 import '../controls/controls_probe.dart' show ControlsHold;
-import '../controls/uosc/buttons.dart' show UoscButton;
-import '../controls/uosc/controls.dart' show UoscControls;
-import '../controls/uosc/style.dart';
+import '../controls/minimal/style.dart';
 import '../files/scanner.dart' show FileKind, kindOf;
 import '../jellyfin/images.dart';
 import '../jellyfin/session_media.dart' show EpisodeLink;
@@ -28,16 +26,16 @@ import '../widgets/text_focus.dart' show KeyboardClaim;
 import 'queue_controller.dart';
 import 'queue_logic.dart';
 
-// Up next in the player: its control in the top bar (with chat and
-// fullscreen), the popover it opens (the queue, the continuation, a field
+// Up next in the player: its control in the top bar (with the window
+// controls), the popover it opens (the queue, the continuation, a field
 // and a drop zone to add), and the end-of-media card for the first item.
 
 
 // ---------------------------------------------------------------- button
 
-/// Which controls design the Up next control sits in: it takes the look
+/// Which controls skin the Up next control sits in: it takes the look
 /// of that bar's buttons.
-enum UpNextLook { standard, uosc }
+enum UpNextLook { standard, minimal }
 
 /// The next item's picture, "UP NEXT" over its title, a +n count and ⏭
 /// (play it now) in the player's top bar, one flat control among its
@@ -66,7 +64,7 @@ class _UpNextButtonState extends State<UpNextButton> {
   bool _hoverTitle = false;
 
   QueueController get _q => widget.queue;
-  bool get _uosc => widget.look == UpNextLook.uosc;
+  bool get _minimal => widget.look == UpNextLook.minimal;
 
   @override
   void didUpdateWidget(UpNextButton oldWidget) {
@@ -135,16 +133,16 @@ class _UpNextButtonState extends State<UpNextButton> {
 
   @override
   Widget build(BuildContext context) {
-    // The bar's own metrics: uosc's flat 40 px boxes, or media_kit's
-    // round 44 px icon buttons.
-    final height = _uosc ? UoscControls.buttonRowHeight : 44.0;
-    final radius = _uosc ? UoscStyle.radius : height / 2;
-    final hover = _uosc ? UoscStyle.hover : Colors.white10;
-    final fontSize = _uosc ? UoscStyle.fontSize : 14.0;
-    final dim = _uosc ? UoscStyle.dim : Colors.white70;
+    // The bar's own metrics: the Minimal skin's rounded squares, or the
+    // Standard skin's round 44 px icon buttons.
+    final height = _minimal ? MinimalStyle.button + 2 * MinimalStyle.capsulePad : 44.0;
+    final radius = _minimal ? MinimalStyle.radius + MinimalStyle.capsulePad : height / 2;
+    final hover = _minimal ? MinimalStyle.hover : Colors.white10;
+    final fontSize = _minimal ? MinimalStyle.fontSize : 14.0;
+    final dim = _minimal ? MinimalStyle.dim : Colors.white70;
     // The picture fills the button's height but for a 7 px margin.
     final thumbWidth = (height - 14) * 16 / 9;
-    final thumbRadius = _uosc ? UoscStyle.radius : 6.0;
+    final thumbRadius = _minimal ? MinimalStyle.radius - 4 : 6.0;
     return SignalBuilder(builder: (context) {
       final items = _q.items.value;
       final cont = _q.shownContinuation.value;
@@ -197,7 +195,7 @@ class _UpNextButtonState extends State<UpNextButton> {
             duration: const Duration(milliseconds: 150),
             height: height,
             // The picture clears a round button's curve.
-            padding: EdgeInsets.only(left: _uosc ? 7 : 12, right: 6),
+            padding: EdgeInsets.only(left: _minimal ? 7 : 12, right: 6),
             decoration: BoxDecoration(
               color: _hoverTitle || open ? hover : Colors.transparent,
               borderRadius: BorderRadius.circular(radius),
@@ -234,7 +232,7 @@ class _UpNextButtonState extends State<UpNextButton> {
                   const SizedBox(width: 8),
                   Container(
                     padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
-                    decoration: BoxDecoration(color: UoscStyle.hover, borderRadius: BorderRadius.circular(999)),
+                    decoration: BoxDecoration(color: MinimalStyle.hover, borderRadius: BorderRadius.circular(999)),
                     child: Text('+$more', style: TextStyle(color: dim, fontSize: 11)),
                   ),
                 ],
@@ -254,8 +252,8 @@ class _UpNextButtonState extends State<UpNextButton> {
           ? 'Play ${item!.title} now  ($playNextKeys)'
           : 'Play ${episode == null ? '' : episode.label} now  ($playNextKeys)';
       final VoidCallback? play = queued ? _q.skip : (episode != null ? widget.onPlayNextEpisode : null);
-      final playButton = _uosc
-          ? UoscButton(key: const ValueKey('up-next-play'), icon: Icons.skip_next_rounded, tooltip: playTip, onPressed: play)
+      final playButton = _minimal
+          ? MinimalButton(key: const ValueKey('up-next-play'), icon: Icons.skip_next_rounded, tooltip: playTip, onPressed: play)
           : Tooltip(
               message: playTip,
               waitDuration: const Duration(milliseconds: 500),

apps/desktop/lib/src/screens/home/about_page.dart

@@ -12,6 +12,10 @@ import 'settings_page.dart';
 import 'ui.dart';
 import 'update_indicator.dart';
 
+/// The Minimal player skin's credit (README says the same).
+const uoscCredit = 'Player timeline and controls inspired by uosc by tomasklaen, LGPL-2.1 '
+    '(github.com/tomasklaen/uosc).';
+
 /// Name, version, update state, the source link and the logs (Settings →
 /// About).
 class AboutPanel extends StatelessWidget {
@@ -48,6 +52,8 @@ class AboutPanel extends StatelessWidget {
                   ),
                 ],
               ),
+              const SizedBox(height: 4),
+              Text(uoscCredit, key: const ValueKey('uosc-credit'), style: t.bodySmall?.copyWith(color: Colors.grey)),
               const SizedBox(height: kGap),
               Text('Something went wrong? Copy diagnostics and send them to whoever helps you: '
                   'versions and the last hours of the log, passwords, tokens and cookies left out. '

apps/desktop/lib/src/screens/session/jellyfin_widgets.dart

@@ -8,35 +8,6 @@ import 'player_controls.dart' show FloatingPill;
 // Jellyfin pieces of the session player. Plain widgets fed by the
 // coordinator's signals, so tests can pump them without the player.
 
-/// Previous / next episode in the video controls. Nothing when there is
-/// no such episode or this viewer cannot put it up (no account).
-class EpisodeSkipButton extends StatelessWidget {
-  final EpisodeLink? episode;
-  final bool next;
-  final VoidCallback onPressed;
-  final FocusNode? focusNode;
-  const EpisodeSkipButton(
-      {super.key, required this.episode, required this.next, required this.onPressed, this.focusNode});
-
-  @override
-  Widget build(BuildContext context) {
-    final e = episode;
-    if (e == null) return const SizedBox.shrink();
-    return Tooltip(
-      message: '${next ? 'Next' : 'Previous'}: ${e.label}  (${next ? '> or Shift+N' : '< or Shift+P'})',
-      child: IconButton(
-        key: ValueKey(next ? 'episode-next' : 'episode-previous'),
-        focusNode: focusNode,
-        color: Colors.white,
-        iconSize: 22,
-        visualDensity: VisualDensity.compact,
-        icon: Icon(next ? Icons.skip_next_rounded : Icons.skip_previous_rounded),
-        onPressed: onPressed,
-      ),
-    );
-  }
-}
-
 /// Floating "Next episode ›" from the ED (or the last two minutes), while
 /// the controls are up (`PillGate`): faint at rest, lit on hover.
 class NextEpisodePill extends StatelessWidget {

apps/desktop/lib/src/screens/session/player_controls.dart

@@ -1,530 +1,11 @@
-import 'dart:async';
-import 'dart:math' as math;
-
 import 'package:flutter/material.dart';
-import 'package:media_kit/media_kit.dart';
-import 'package:sync_relay_core/core.dart' show JellyfinStreamType;
 
-import '../../jellyfin/track_prefs.dart' show MpvTrack;
 import '../../playback/media_marks.dart';
 import '../../widgets/app_menu.dart' show AppGlass;
 
-// Session control-bar pieces built on the playback signals (chapters,
-// tracks, skip offers): the seek bar with chapter marks, the chapter and
-// track menus, the 1:30 skip button and the floating skip pill. Plain
-// widgets fed by values and callbacks, so tests pump them without a player.
-
-/// Keeps media_kit's desktop controls shown, as a mouse hover would.
-/// While a seek bar drag runs no hover events arrive, and the controls
-/// would hide (and unmount the bar) mid-drag. A guarded dynamic call on
-/// the private controls state; nothing happens outside those controls.
-void keepVideoControlsAwake(BuildContext context) {
-  context.visitAncestorElements((e) {
-    if (e is StatefulElement &&
-        e.state.runtimeType.toString() == '_MaterialDesktopVideoControlsState') {
-      try {
-        (e.state as dynamic).onHover();
-      } catch (_) {}
-      return false;
-    }
-    return true;
-  });
-}
-
-/// The seek bar: played / buffered track, a diamond at each chapter start
-/// (not the one at 0), and on hover the time with the chapter title above
-/// it. Like media_kit's bar it reports a seek on every drag move and on
-/// release ([onSeek]); the session routes those through the user-seek path
-/// (debounced, everyone follows).
-class ChapterSeekBar extends StatefulWidget {
-  final Duration position;
-  final Duration duration;
-  final Duration buffer;
-  final List<MediaChapter> chapters;
-  final ValueChanged<Duration> onSeek;
-  /// Any pointer activity on the bar (keeps the controls up).
-  final VoidCallback? onActivity;
-  const ChapterSeekBar({
-    super.key,
-    required this.position,
-    required this.duration,
-    this.buffer = Duration.zero,
-    this.chapters = const [],
-    required this.onSeek,
-    this.onActivity,
-  });
-
-  static const height = 28.0;
-
-  @override
-  State<ChapterSeekBar> createState() => _ChapterSeekBarState();
-}
-
-class _ChapterSeekBarState extends State<ChapterSeekBar> {
-  double? _hoverX;
-  bool _dragging = false;
-  double _dragFraction = 0;
-
-  double _fraction(Duration d) {
-    final total = widget.duration.inMicroseconds;
-    if (total <= 0) return 0;
-    return (d.inMicroseconds / total).clamp(0.0, 1.0);
-  }
-
-  Duration _at(double fraction) => widget.duration * fraction.clamp(0.0, 1.0);
-
-  void _seekTo(double x, double width) {
-    if (widget.duration <= Duration.zero || width <= 0) return;
-    _dragFraction = (x / width).clamp(0.0, 1.0);
-    widget.onSeek(_at(_dragFraction));
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final primary = Theme.of(context).colorScheme.primary;
-    return LayoutBuilder(builder: (context, constraints) {
-      final width = constraints.maxWidth;
-      final active = _hoverX != null || _dragging;
-      final barHeight = active ? 5.0 : 3.0;
-      final played = _dragging ? _dragFraction : _fraction(widget.position);
-      const mid = ChapterSeekBar.height / 2;
-      final hoverX = _hoverX;
-      final hoverAt = hoverX == null || width <= 0 ? null : _at(hoverX / width);
-      final hoverChapter = hoverAt == null ? null : chapterIndexAt(widget.chapters, hoverAt);
-      final hoverTitle = hoverChapter == null ? '' : widget.chapters[hoverChapter].title;
-      return MouseRegion(
-        cursor: SystemMouseCursors.click,
-        onEnter: (e) => setState(() => _hoverX = e.localPosition.dx.clamp(0, width)),
-        onHover: (e) {
-          setState(() => _hoverX = e.localPosition.dx.clamp(0, width));
-          widget.onActivity?.call();
-        },
-        onExit: (_) => setState(() => _hoverX = null),
-        child: Listener(
-          behavior: HitTestBehavior.opaque,
-          onPointerDown: (e) {
-            widget.onActivity?.call();
-            setState(() {
-              _dragging = true;
-              _dragFraction = width <= 0 ? 0 : (e.localPosition.dx / width).clamp(0.0, 1.0);
-            });
-          },
-          onPointerMove: (e) {
-            widget.onActivity?.call();
-            setState(() => _hoverX = e.localPosition.dx.clamp(0, width));
-            _seekTo(e.localPosition.dx, width);
-          },
-          onPointerUp: (e) {
-            _seekTo(e.localPosition.dx, width);
-            setState(() => _dragging = false);
-            widget.onActivity?.call();
-          },
-          onPointerCancel: (_) => setState(() => _dragging = false),
-          child: SizedBox(
-            key: const ValueKey('seek-bar'),
-            width: width,
-            height: ChapterSeekBar.height,
-            child: Stack(
-              clipBehavior: Clip.none,
-              children: [
-                Positioned(
-                  left: 0,
-                  right: 0,
-                  top: mid - barHeight / 2,
-                  height: barHeight,
-                  child: Container(color: Colors.white24),
-                ),
-                Positioned(
-                  left: 0,
-                  top: mid - barHeight / 2,
-                  height: barHeight,
-                  width: width * _fraction(widget.buffer),
-                  child: Container(color: Colors.white24),
-                ),
-                if (hoverX != null && !_dragging)
-                  Positioned(
-                    left: 0,
-                    top: mid - barHeight / 2,
-                    height: barHeight,
-                    width: hoverX,
-                    child: Container(color: Colors.white24),
-                  ),
-                Positioned(
-                  left: 0,
-                  top: mid - barHeight / 2,
-                  height: barHeight,
-                  width: width * played,
-                  child: Container(color: primary),
-                ),
-                for (final c in widget.chapters)
-                  if (c.start > Duration.zero && widget.duration > Duration.zero)
-                    Positioned(
-                      key: ValueKey('chapter-mark-${c.index}'),
-                      left: width * _fraction(c.start) - 4,
-                      top: mid - 4,
-                      width: 8,
-                      height: 8,
-                      child: IgnorePointer(
-                        child: Transform.rotate(
-                          angle: math.pi / 4,
-                          child: Container(
-                            margin: const EdgeInsets.all(1),
-                            decoration: BoxDecoration(
-                              color: Colors.white,
-                              border: Border.all(color: Colors.black54, width: 0.8),
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                if (active)
-                  Positioned(
-                    left: width * played - 6,
-                    top: mid - 6,
-                    width: 12,
-                    height: 12,
-                    child: IgnorePointer(
-                      child: DecoratedBox(
-                        decoration: BoxDecoration(color: primary, shape: BoxShape.circle),
-                      ),
-                    ),
-                  ),
-                if (hoverAt != null)
-                  Positioned(
-                    // Kept clear of the window edges (the tip is centred).
-                    left: hoverX!.clamp(math.min(60.0, width / 2), math.max(width - 60, width / 2)),
-                    bottom: ChapterSeekBar.height - 2,
-                    child: IgnorePointer(
-                      child: FractionalTranslation(
-                        translation: const Offset(-0.5, 0),
-                        child: _HoverTip(title: hoverTitle, time: formatClock(hoverAt)),
-                      ),
-                    ),
-                  ),
-              ],
-            ),
-          ),
-        ),
-      );
-    });
-  }
-}
-
-class _HoverTip extends StatelessWidget {
-  final String title;
-  final String time;
-  const _HoverTip({required this.title, required this.time});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      constraints: const BoxConstraints(maxWidth: 320),
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: Colors.black.withValues(alpha: 0.8),
-        borderRadius: BorderRadius.circular(6),
-      ),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          if (title.isNotEmpty)
-            Text(title,
-                key: const ValueKey('seek-hover-chapter'),
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600)),
-          Text(time,
-              key: const ValueKey('seek-hover-time'),
-              style: const TextStyle(color: Colors.white70, fontSize: 11)),
-        ],
-      ),
-    );
-  }
-}
-
-/// [ChapterSeekBar] on a live player: position, duration and buffer from
-/// its streams. Seeks go to `player.seek`, which the session's
-/// `SyncPlayer` turns into user seeks.
-class PlayerSeekBar extends StatefulWidget {
-  final Player player;
-  final List<MediaChapter> chapters;
-  const PlayerSeekBar({super.key, required this.player, required this.chapters});
-
-  @override
-  State<PlayerSeekBar> createState() => _PlayerSeekBarState();
-}
-
-class _PlayerSeekBarState extends State<PlayerSeekBar> {
-  final List<StreamSubscription<Object>> _subs = [];
-  late Duration _position, _duration, _buffer;
-
-  @override
-  void initState() {
-    super.initState();
-    _listen();
-  }
-
-  @override
-  void didUpdateWidget(PlayerSeekBar old) {
-    super.didUpdateWidget(old);
-    if (!identical(old.player, widget.player)) {
-      _cancel();
-      _listen();
-    }
-  }
-
-  void _listen() {
-    final p = widget.player;
-    _position = p.state.position;
-    _duration = p.state.duration;
-    _buffer = p.state.buffer;
-    void set(VoidCallback f) {
-      if (mounted) setState(f);
-    }
-
-    _subs.addAll([
-      p.stream.position.listen((d) => set(() => _position = d)),
-      p.stream.duration.listen((d) => set(() => _duration = d)),
-      p.stream.buffer.listen((d) => set(() => _buffer = d)),
-    ]);
-  }
-
-  void _cancel() {
-    for (final s in _subs) {
-      s.cancel();
-    }
-    _subs.clear();
-  }
-
-  @override
-  void dispose() {
-    _cancel();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ChapterSeekBar(
-      position: _position,
-      duration: _duration,
-      buffer: _buffer,
-      chapters: widget.chapters,
-      onSeek: (d) => widget.player.seek(d),
-      onActivity: () => keepVideoControlsAwake(context),
-    );
-  }
-}
-
-RelativeRect _menuPosition(BuildContext context) {
-  final button = context.findRenderObject() as RenderBox;
-  final overlay = Navigator.of(context).overlay!.context.findRenderObject() as RenderBox;
-  return RelativeRect.fromRect(
-    Rect.fromPoints(
-      button.localToGlobal(Offset.zero, ancestor: overlay),
-      button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay),
-    ),
-    Offset.zero & overlay.size,
-  );
-}
-
-/// Control-bar icon with a small count in the corner.
-class _BadgedIcon extends StatelessWidget {
-  final IconData icon;
-  final int count;
-  const _BadgedIcon(this.icon, this.count);
-
-  @override
-  Widget build(BuildContext context) {
-    return Stack(
-      clipBehavior: Clip.none,
-      children: [
-        Icon(icon),
-        if (count > 0)
-          Positioned(
-            right: -7,
-            top: -5,
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 0.5),
-              decoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.primary,
-                borderRadius: BorderRadius.circular(999),
-              ),
-              child: Text('$count',
-                  style: const TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
-            ),
-          ),
-      ],
-    );
-  }
-}
-
-/// Chapter list for the controls: current chapter checked, a pick seeks
-/// to its start. Nothing when the file has no chapters.
-class ChaptersControlButton extends StatelessWidget {
-  final List<MediaChapter> chapters;
-  final int? current;
-  final ValueChanged<MediaChapter> onPick;
-  final FocusNode? focusNode;
-  final ValueChanged<bool>? onMenuOpen;
-  const ChaptersControlButton({
-    super.key,
-    required this.chapters,
-    required this.current,
-    required this.onPick,
-    this.focusNode,
-    this.onMenuOpen,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    if (chapters.isEmpty) return const SizedBox.shrink();
-    return Tooltip(
-      message: 'Chapters (PgUp / PgDn)',
-      child: IconButton(
-        key: const ValueKey('chapters-button'),
-        focusNode: focusNode,
-        color: Colors.white,
-        iconSize: 20,
-        visualDensity: VisualDensity.compact,
-        icon: _BadgedIcon(Icons.format_list_bulleted, chapters.length),
-        onPressed: () => _open(context),
-      ),
-    );
-  }
-
-  Future<void> _open(BuildContext context) async {
-    final position = _menuPosition(context);
-    onMenuOpen?.call(true);
-    final pick = await showMenu<MediaChapter>(
-      context: context,
-      position: position,
-      popUpAnimationStyle: AnimationStyle.noAnimation,
-      constraints: const BoxConstraints(minWidth: 240, maxWidth: 420),
-      items: [
-        for (final c in chapters)
-          CheckedPopupMenuItem(
-            value: c,
-            checked: c.index == current,
-            height: 36,
-            child: Row(
-              children: [
-                Expanded(
-                  child: Text(c.title.isEmpty ? 'Chapter ${c.index + 1}' : c.title,
-                      maxLines: 1, overflow: TextOverflow.ellipsis),
-                ),
-                const SizedBox(width: 12),
-                Text(formatClock(c.start), style: const TextStyle(fontSize: 12, color: Colors.grey)),
-              ],
-            ),
-          ),
-      ],
-    );
-    onMenuOpen?.call(false);
-    if (pick != null) onPick(pick);
-  }
-}
-
-/// A track pick from [TrackMenuButton]: audio id, subtitle id, or off.
-typedef TrackPick = ({int? aid, int? sid, bool subtitlesOff});
-
-/// Audio or subtitle menu for the controls bar (the count of tracks on the
-/// icon): "Japanese · E-AC3 2.0 · title", mpv's selection checked,
-/// subtitles with Off. The choice is remembered for the next Jellyfin item
-/// (per viewer).
-class TrackMenuButton extends StatelessWidget {
-  final JellyfinStreamType type;
-  /// All tracks; only those of [type] are listed.
-  final List<MpvTrack> tracks;
-  final void Function(TrackPick pick) onPick;
-  final FocusNode? focusNode;
-  final ValueChanged<bool>? onMenuOpen;
-  const TrackMenuButton({
-    super.key,
-    required this.type,
-    required this.tracks,
-    required this.onPick,
-    this.focusNode,
-    this.onMenuOpen,
-  });
-
-  bool get _audio => type == JellyfinStreamType.audio;
-
-  @override
-  Widget build(BuildContext context) {
-    final list = tracks.where((t) => t.type == type).toList();
-    return Tooltip(
-      message: _audio ? 'Audio' : 'Subtitles',
-      child: IconButton(
-        key: ValueKey(_audio ? 'audio-button' : 'subtitles-button'),
-        focusNode: focusNode,
-        color: Colors.white,
-        iconSize: 20,
-        visualDensity: VisualDensity.compact,
-        icon: _BadgedIcon(_audio ? Icons.audiotrack_outlined : Icons.subtitles_outlined, list.length),
-        onPressed: () => _open(context, list),
-      ),
-    );
-  }
-
-  Future<void> _open(BuildContext context, List<MpvTrack> list) async {
-    final position = _menuPosition(context);
-    onMenuOpen?.call(true);
-    final pick = await showMenu<TrackPick>(
-      context: context,
-      position: position,
-      popUpAnimationStyle: AnimationStyle.noAnimation,
-      constraints: const BoxConstraints(minWidth: 280, maxWidth: 460),
-      items: [
-        if (!_audio)
-          CheckedPopupMenuItem(
-            value: (aid: null, sid: null, subtitlesOff: true),
-            checked: !list.any((t) => t.selected),
-            height: 36,
-            child: const Text('Off'),
-          ),
-        if (_audio && list.isEmpty)
-          const PopupMenuItem(enabled: false, height: 32, child: Text('None')),
-        for (final t in list)
-          CheckedPopupMenuItem(
-            value: _audio
-                ? (aid: t.id, sid: null, subtitlesOff: false)
-                : (aid: null, sid: t.id, subtitlesOff: false),
-            checked: t.selected,
-            height: 36,
-            child: Text(t.label, maxLines: 1, overflow: TextOverflow.ellipsis),
-          ),
-      ],
-    );
-    onMenuOpen?.call(false);
-    if (pick != null) onPick(pick);
-  }
-}
-
-/// "1:30" in the controls: skip forward [fallbackSkip] (Shift+Right).
-class SkipForwardButton extends StatelessWidget {
-  final VoidCallback onPressed;
-  final FocusNode? focusNode;
-  const SkipForwardButton({super.key, required this.onPressed, this.focusNode});
-
-  @override
-  Widget build(BuildContext context) {
-    return Tooltip(
-      message: 'Skip 1:30 for everyone (Shift+Right)',
-      child: TextButton.icon(
-        key: const ValueKey('skip-forward-button'),
-        focusNode: focusNode,
-        style: TextButton.styleFrom(
-          foregroundColor: Colors.white,
-          padding: const EdgeInsets.symmetric(horizontal: 8),
-          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        ),
-        onPressed: onPressed,
-        icon: const Icon(Icons.fast_forward_rounded, size: 16),
-        label: const Text('1:30', style: TextStyle(fontSize: 12)),
-      ),
-    );
-  }
-}
+// The player's floating action pills (Skip OP / ED / 1:30, Next episode):
+// plain widgets fed by values and callbacks, so tests pump them without a
+// player. They live in the action area, outside the controls.
 
 /// The player's action pill (Next episode, Skip OP / ED / 1:30): the
 /// status pill's glass ([AppGlass.pill]) at [height], faint at rest, lit

apps/desktop/lib/src/shaders/shader_menu.dart

@@ -8,50 +8,6 @@ import 'shader_presets.dart';
 /// A shader pick from the menu; a null quality keeps the saved one.
 typedef ShaderPick = (ShaderPreset, ShaderQuality?);
 
-/// Compact shader button for the video controls bar (normal and
-/// fullscreen). Opens a small menu: Off, the six Anime4K modes with
-/// HQ / Fast, Custom. The menu is a route, so it outlives the controls
-/// bar hiding under it; [onPick] runs on the caller's side.
-class ShaderControlButton extends StatelessWidget {
-  final FocusNode focusNode;
-  final ReadonlySignal<RenderMode> renderMode;
-  final void Function(ShaderPreset preset, ShaderQuality? quality) onPick;
-  final ValueChanged<bool>? onMenuOpen;
-  const ShaderControlButton({
-    super.key,
-    required this.focusNode,
-    required this.renderMode,
-    required this.onPick,
-    this.onMenuOpen,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final s = AppSettings.instance;
-    return SignalBuilder(builder: (context) {
-      final preset = s.shaderPreset.value;
-      final quality = s.shaderQuality.value;
-      final short = shaderShortLabel(preset, quality) ?? 'Shaders';
-      return Tooltip(
-        message: 'Video shaders (Ctrl+1..6, Ctrl+0 off)',
-        child: TextButton.icon(
-          focusNode: focusNode,
-          style: TextButton.styleFrom(
-            foregroundColor:
-                preset == ShaderPreset.off ? Colors.white : Colors.amberAccent,
-            padding: const EdgeInsets.symmetric(horizontal: 8),
-            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          ),
-          onPressed: () => showShaderMenu(context,
-              renderMode: renderMode, onPick: onPick, onMenuOpen: onMenuOpen),
-          icon: const Icon(Icons.auto_awesome, size: 16),
-          label: Text(short, style: const TextStyle(fontSize: 12)),
-        ),
-      );
-    });
-  }
-}
-
 /// "A HQ", "C+A Fast", "Custom"; null when shaders are off.
 String? shaderShortLabel(ShaderPreset preset, ShaderQuality quality) =>
     switch (preset) {
@@ -61,7 +17,8 @@ String? shaderShortLabel(ShaderPreset preset, ShaderQuality quality) =>
     };
 
 /// The shader menu, anchored on [context]'s box (the button that opens
-/// it): Off, the six Anime4K modes with HQ / Fast, Custom.
+/// it; the controls' ⚙): Off, the six Anime4K modes with HQ / Fast,
+/// Custom. A route, so it outlives the controls hiding under it.
 Future<void> showShaderMenu(
   BuildContext context, {
   required ReadonlySignal<RenderMode> renderMode,

apps/desktop/lib/src/shell/app_shell.dart

@@ -7,6 +7,7 @@ import 'package:fox_utils/fox_utils.dart' show ClipboardX, DesktopDropX, DropTar
 import 'package:signals/signals_flutter.dart';
 import 'package:window_manager/window_manager.dart';
 
+import '../controls/frame.dart' show DoubleClickListener;
 import '../files/folder_store.dart';
 import '../files/ui/files_page.dart' show showFilesFolder;
 import '../jellyfin/accounts.dart';

apps/desktop/lib/src/shell/session_player.dart

@@ -2,26 +2,20 @@ import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:flutter/foundation.dart' show ValueListenable;
-import 'package:flutter/gestures.dart' show kPrimaryMouseButton;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:media_kit_video/media_kit_video.dart';
 import 'package:signals/signals_flutter.dart';
-import 'package:sync_relay_core/core.dart';
 
 import '../controls/controls_probe.dart';
-import '../controls/player_settings.dart';
-import '../controls/uosc/buttons.dart';
-import '../controls/uosc/controls.dart';
-import '../controls/uosc/timeline.dart';
-import '../controls/uosc/volume_flash.dart';
+import '../controls/model/controls_model.dart';
+import '../controls/session_controls.dart';
 import '../controls/volume.dart';
 import '../queue/queue_ui.dart';
 import '../playback/media_marks.dart' show SkipKind, SkipOffer, formatClock;
 import '../screens/session/jellyfin_widgets.dart';
 import '../screens/session/player_controls.dart';
 import '../session/session_coordinator.dart';
-import '../shaders/shader_menu.dart';
 import '../shaders/shader_presets.dart';
 import '../state/session_state.dart';
 import '../state/settings.dart';
@@ -29,7 +23,6 @@ import '../widgets/app_keys.dart';
 import '../widgets/text_focus.dart';
 import '../widgets/window_buttons.dart';
 import 'avatar.dart';
-import 'mark_problem.dart';
 import 'motion.dart';
 import 'now_playing_title.dart';
 import 'player_status.dart';
@@ -46,8 +39,8 @@ enum PlayerMode { none, mini, full }
 typedef VideoViewBuilder = Widget Function(BuildContext context, VideoControlsBuilder? controls);
 
 /// The session's player: the one `Video` of the current player and
-/// everything over it. Full: our bars on media_kit's controls or the uosc
-/// set (Settings), the start card, the status pill, Jellyfin overlays and
+/// everything over it. Full: the controls (one model, the skin picked in
+/// Settings), the start card, the status pill, Jellyfin overlays and
 /// the player keys. Mini: hover controls and a progress line. The shell keeps this
 /// widget mounted at one place in the tree while the mode changes, so the
 /// `Video` is never mounted twice nor rebuilt for a move.
@@ -99,21 +92,31 @@ class _SessionPlayerState extends State<SessionPlayer> {
   final _noFocus = FocusNode(skipTraversal: true, canRequestFocus: false);
   DateTime? _lastKeyAt;
   late final void Function() _stopShaderWatch;
-  bool _shaderMenuOpen = false;
   // Own toast ids, negative: the coordinator counts up from 1.
   int _toastSeq = 0;
   int _shaderNoticeSeen = 0;
   bool _miniHover = false;
-  // Whether the controls are up: the standard ones tracked like media_kit
-  // does (shown on mount and on mouse movement, hidden 3 s later or on
-  // exit), the uosc ones reporting it.
+  // Whether the controls are up (their frame reports it).
   final _controlsShown = ValueNotifier(true);
   // The mouse on a floating element, or the Up next popover open, keeps
   // the controls up.
   final _hold = ControlsHold();
-  // Ticks on each wheel / key volume step: flashes the volume readout.
-  final _volumeFlash = ValueNotifier(0);
   late final void Function() _stopPopoverWatch;
+  // The shell's state the controls show, as signals for the model.
+  late final _fullscreen = signal(widget.fullscreen);
+  late final _chatOpen = signal(widget.chatOpen);
+  late final _unread = signal(widget.unread);
+  late final PlayerControlsModel _model = PlayerControlsModel(
+    coord: _coord,
+    fullscreen: _fullscreen,
+    chatOpen: _chatOpen,
+    unread: _unread,
+    onToggleFullscreen: () => widget.onToggleFullscreen(),
+    onToggleChat: () => widget.onToggleChat(),
+    onChangeVideo: () => widget.onChangeVideo(),
+    onCollapse: () => widget.onCollapse(),
+    onLeave: () => widget.onLeave(),
+  );
 
   SessionCoordinator get _coord => SessionState.instance.coordinator;
   bool get _full => widget.mode == PlayerMode.full;
@@ -138,6 +141,14 @@ class _SessionPlayerState extends State<SessionPlayer> {
     });
   }
 
+  @override
+  void didUpdateWidget(SessionPlayer oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _fullscreen.value = widget.fullscreen;
+    _chatOpen.value = widget.chatOpen;
+    _unread.value = widget.unread;
+  }
+
   @override
   void dispose() {
     HardwareKeyboard.instance.removeHandler(_globalKey);
@@ -147,15 +158,10 @@ class _SessionPlayerState extends State<SessionPlayer> {
     _noFocus.dispose();
     _controlsShown.dispose();
     _hold.dispose();
-    _volumeFlash.dispose();
+    _model.dispose();
     super.dispose();
   }
 
-  void _reloadVideo() {
-    _coord.markInput();
-    _coord.reloadVideo();
-  }
-
   void _toast(String text) {
     _coord.toasts.value = [
       ..._coord.toasts.peek(),
@@ -163,22 +169,7 @@ class _SessionPlayerState extends State<SessionPlayer> {
     ];
   }
 
-  /// Menu, Ctrl+0..6: saved as the choice (also used on the next join)
-  /// and applied live. A null quality keeps the saved one.
-  void _pickShader(ShaderPreset preset, ShaderQuality? quality) => applyShaderChoice(preset, quality);
-
-  /// One volume step up (+1) or down (-1), from the wheel or ↑ / ↓;
-  /// flashes the design's volume readout.
-  void _stepVolume(int step) {
-    final player = _coord.playback.player;
-    player.setVolume(stepVolume(player.state.volume, step * volumeStep));
-    _volumeFlash.value++;
-  }
-
-  void _toggleChat() {
-    _coord.markInput();
-    widget.onToggleChat();
-  }
+  void _toggleChat() => _model.toggleChat();
 
   /// The player keys, while the player fills the body and nothing (a
   /// dialog, a card, a text field) is in front of it. Space and Tab are
@@ -196,7 +187,7 @@ class _SessionPlayerState extends State<SessionPlayer> {
     final route = ModalRoute.of(context);
     if (route != null && !route.isCurrent) {
       // A menu of ours is open: Esc closes it.
-      if (_shaderMenuOpen && event.logicalKey == LogicalKeyboardKey.escape) {
+      if (_model.menusOpen > 0 && event.logicalKey == LogicalKeyboardKey.escape) {
         Navigator.of(context, rootNavigator: true).maybePop();
         return true;
       }
@@ -207,62 +198,55 @@ class _SessionPlayerState extends State<SessionPlayer> {
     if (_lastKeyAt != null && now.difference(_lastKeyAt!).inMilliseconds < 350) {
       return false;
     }
-    final coord = _coord;
+    final model = _model;
     final key = event.logicalKey;
     // Ctrl+0..6: Anime4K's own mpv keys (off, modes A..C+A).
     final digit = _shaderKeys.indexOf(key);
     if (digit >= 0 && HardwareKeyboard.instance.isControlPressed) {
       _lastKeyAt = now;
-      _pickShader(digit == 0 ? ShaderPreset.off : ShaderPreset.modes[digit - 1], null);
+      model.pickShader(digit == 0 ? ShaderPreset.off : ShaderPreset.modes[digit - 1], null);
       return true;
     }
     if (key == LogicalKeyboardKey.keyR && HardwareKeyboard.instance.isControlPressed) {
       _lastKeyAt = now;
-      _reloadVideo();
+      model.reload();
       return true;
     }
     // mpv's playlist keys (< >) and Shift+P / Shift+N: Jellyfin episodes.
     final shift = HardwareKeyboard.instance.isShiftPressed;
     if (event.character == '>' || (shift && key == LogicalKeyboardKey.keyN)) {
       // Up next first, then the next episode.
-      if (coord.queue.items.peek().isNotEmpty) {
-        _lastKeyAt = now;
-        coord.queue.skip();
-        return true;
-      }
-      if (coord.nextEpisode.peek() == null) return false;
+      if (!model.next()) return false;
       _lastKeyAt = now;
-      coord.playNextEpisode();
       return true;
     }
     if (event.character == '<' || (shift && key == LogicalKeyboardKey.keyP)) {
-      if (coord.previousEpisode.peek() == null) return false;
+      if (!model.previous()) return false;
       _lastKeyAt = now;
-      coord.playPreviousEpisode();
       return true;
     }
     // mpv's chapter keys.
     if (key == LogicalKeyboardKey.pageDown || key == LogicalKeyboardKey.pageUp) {
       _lastKeyAt = now;
-      return coord.stepChapter(key == LogicalKeyboardKey.pageDown ? 1 : -1);
+      return model.stepChapter(key == LogicalKeyboardKey.pageDown ? 1 : -1);
     }
     if (shift && key == LogicalKeyboardKey.arrowRight) {
       _lastKeyAt = now;
-      coord.skipForward();
+      model.skipForward();
       return true;
     }
     if (key == LogicalKeyboardKey.arrowUp || key == LogicalKeyboardKey.arrowDown) {
-      _stepVolume(key == LogicalKeyboardKey.arrowUp ? 1 : -1);
+      model.stepVolume(key == LogicalKeyboardKey.arrowUp ? 1 : -1);
       return true;
     }
     if (key == LogicalKeyboardKey.arrowRight) {
       _lastKeyAt = now;
-      coord.nudge(10);
+      model.nudge(10);
       return true;
     }
     if (key == LogicalKeyboardKey.arrowLeft) {
       _lastKeyAt = now;
-      coord.nudge(-10);
+      model.nudge(-10);
       return true;
     }
     if (key == LogicalKeyboardKey.escape) {
@@ -312,13 +296,12 @@ class _SessionPlayerState extends State<SessionPlayer> {
           // (lists, menus and popovers under the mouse scroll instead).
           return VolumeWheel(
             enabled: _full,
-            onStep: _stepVolume,
+            onStep: _model.stepVolume,
             child: Stack(
               fit: StackFit.expand,
               children: [
                 video,
                 if (_full) ...[
-                  _progressLine(),
                   _blockedCard(),
                   _actionArea(),
                   if (widget.fullscreen) ...[if (!SessionState.instance.solo.value) _pausedParty(), _unreadChip()],
@@ -336,24 +319,12 @@ class _SessionPlayerState extends State<SessionPlayer> {
     );
   }
 
-  Widget _video(VideoControlsBuilder? controls) {
-    final theme = _controlsTheme();
-    return MaterialDesktopVideoControlsTheme(
-      normal: theme,
-      fullscreen: theme,
-      child: Video(
+  Widget _video(VideoControlsBuilder? controls) => Video(
         key: _videoKey,
         controller: _coord.playback.video,
         subtitleViewConfiguration: const SubtitleViewConfiguration(visible: false),
         controls: controls,
-      ),
-    );
-  }
-
-  static const _barHeight = 56.0;
-  /// The standard top bar: room for the cover (2:3, 60 px tall).
-  static const _topBarHeight = 72.0;
-  static const _controlsHide = Duration(seconds: 3);
+      );
 
   /// Fullscreen hides the strip and its window buttons: the top bar
   /// carries them while the controls are up (restore leaves fullscreen).
@@ -373,337 +344,18 @@ class _SessionPlayerState extends State<SessionPlayer> {
     );
   }
 
-  /// The standard design's progress line while its controls are hidden
-  /// (the uosc timeline collapses into its own).
-  Widget _progressLine() => Positioned(
-        left: 0,
-        right: 0,
-        bottom: 0,
-        child: IgnorePointer(
-          child: SignalBuilder(builder: (context) {
-            final s = AppSettings.instance;
-            if (s.mpvControls.value || !s.progressLine.value) return const SizedBox.shrink();
-            return ValueListenableBuilder<bool>(
-              valueListenable: _controlsShown,
-              builder: (context, shown, _) => shown
-                  ? const SizedBox.shrink()
-                  : const _MiniSeekBar(key: ValueKey('progress-line-standard'), thin: true),
-            );
-          }),
-        ),
-      );
-
-  MaterialDesktopVideoControlsThemeData _controlsTheme() {
-    final coord = _coord;
-    return MaterialDesktopVideoControlsThemeData(
-      playAndPauseOnTap: false,
-      modifyVolumeOnScroll: false,
-      // media_kit's double-click pushes its own fullscreen route (a second
-      // `Video`); ours toggles the window instead (see [DoubleClickListener]).
-      toggleFullscreenOnDoublePress: false,
-      keyboardShortcuts: {},
-      visibleOnMount: true,
-      hideMouseOnControlsRemoval: true,
-      controlsHoverDuration: _controlsHide,
-      // Our seek bar (chapter marks, hover title) sits in the bottom bar,
-      // which grows by its height; the top bar keeps its row at the top.
-      displaySeekBar: false,
-      buttonBarHeight: _barHeight + ChapterSeekBar.height,
-      topButtonBar: [
-        Expanded(
-          child: Align(
-            alignment: Alignment.topCenter,
-            child: SizedBox(
-              height: _topBarHeight,
-              child: Row(
-                children: [
-                  const Expanded(child: NowPlayingTitle()),
-                  UpNextButton(
-                      queue: coord.queue,
-                      onPlayNextEpisode: coord.playNextEpisode,
-                      look: UpNextLook.standard,
-                      hold: _hold),
-                  MaterialDesktopCustomButton(
-                    icon: const Icon(Icons.video_library_outlined),
-                    onPressed: widget.onChangeVideo,
-                  ),
-                  MaterialDesktopCustomButton(
-                    icon: Badge(
-                      isLabelVisible: widget.unread > 0,
-                      label: Text('${widget.unread}'),
-                      child: Icon(widget.chatOpen ? Icons.chat_bubble : Icons.chat_bubble_outline),
-                    ),
-                    onPressed: _toggleChat,
-                  ),
-                  MaterialDesktopCustomButton(
-                    icon: Icon(widget.fullscreen ? Icons.fullscreen_exit : Icons.close_fullscreen),
-                    onPressed: widget.fullscreen ? widget.onToggleFullscreen : widget.onCollapse,
-                  ),
-                  ?_fullscreenWindowButtons(),
-                ],
-              ),
-            ),
-          ),
-        ),
-      ],
-      bottomButtonBar: [
-        Expanded(
-          child: Column(
-            children: [
-              SignalBuilder(
-                builder: (context) => PlayerSeekBar(
-                  player: coord.playback.player,
-                  chapters: coord.playback.chapters.value,
-                ),
-              ),
-              Expanded(child: Row(children: _bottomButtons())),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-
-  List<Widget> _bottomButtons() {
-    final coord = _coord;
-    final playback = coord.playback;
-    void menuOpen(bool open) => _shaderMenuOpen = open;
-    void pickTrack(TrackPick p) => coord.selectTrack(aid: p.aid, sid: p.sid, subtitlesOff: p.subtitlesOff);
-    return [
-      SignalBuilder(
-        builder: (context) => EpisodeSkipButton(
-          focusNode: _noFocus,
-          episode: coord.previousEpisode.value,
-          next: false,
-          onPressed: coord.playPreviousEpisode,
-        ),
-      ),
-      SignalBuilder(
-        builder: (context) => EpisodeSkipButton(
-          focusNode: _noFocus,
-          episode: coord.nextEpisode.value,
-          next: true,
-          onPressed: coord.playNextEpisode,
-        ),
-      ),
-      VolumeButton(player: playback.player, focusNode: _noFocus),
-      _ReadyControlButton(focusNode: _noFocus),
-      _BarTextButton(
-        focusNode: _noFocus,
-        label: 'Mark everyone ready',
-        onPressed: coord.forcePlayAll,
-      ),
-      _BarTextButton(
-        focusNode: _noFocus,
-        icon: Icons.refresh,
-        label: 'Reload video',
-        tooltip: 'Reload video (Ctrl+R) — fixes a frozen picture',
-        onPressed: _reloadVideo,
-      ),
-      const MaterialDesktopPositionIndicator(),
-      const Spacer(),
-      SkipForwardButton(focusNode: _noFocus, onPressed: coord.skipForward),
-      SignalBuilder(
-        builder: (context) => ChaptersControlButton(
-          focusNode: _noFocus,
-          chapters: playback.chapters.value,
-          current: playback.currentChapter.value,
-          onPick: (c) => coord.seekTo(c.start.inMicroseconds / 1e6),
-          onMenuOpen: menuOpen,
-        ),
-      ),
-      SignalBuilder(
-        builder: (context) => TrackMenuButton(
-          focusNode: _noFocus,
-          type: JellyfinStreamType.audio,
-          tracks: playback.tracks.value,
-          onPick: pickTrack,
-          onMenuOpen: menuOpen,
-        ),
-      ),
-      SignalBuilder(
-        builder: (context) => TrackMenuButton(
-          focusNode: _noFocus,
-          type: JellyfinStreamType.subtitle,
-          tracks: playback.tracks.value,
-          onPick: pickTrack,
-          onMenuOpen: menuOpen,
-        ),
-      ),
-      ShaderControlButton(
-        focusNode: _noFocus,
-        renderMode: playback.renderMode,
-        onPick: _pickShader,
-        onMenuOpen: menuOpen,
-      ),
-      PlayerSettingsButton(focusNode: _noFocus, renderMode: playback.renderMode),
-      MaterialDesktopCustomButton(
-        icon: Icon(widget.fullscreen ? Icons.fullscreen_exit : Icons.fullscreen),
-        onPressed: widget.onToggleFullscreen,
-      ),
-    ];
-  }
-
   Widget _sessionControls(VideoState state) {
     // The start card sits under the controls (they stay usable on it).
-    // The "Player design" setting swaps them live.
-    return Stack(fit: StackFit.expand, children: [const StartBanner(), _controlsSwitch(state)]);
-  }
-
-  Widget _controlsSwitch(VideoState state) {
-    return SessionControlsSwitch(
-      material: (_) => ControlsHoverProbe(
-        shown: _controlsShown,
-        hideAfter: _controlsHide,
-        hold: _hold,
-        child: DoubleClickListener(
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        const StartBanner(),
+        SessionControls(
+          model: _model,
+          shown: _controlsShown,
+          hold: _hold,
           onDoubleClick: widget.onToggleFullscreen,
-          // Clicks on the bars are button clicks, not the video.
-          skipTop: _topBarHeight,
-          skipBottom: _barHeight + ChapterSeekBar.height,
-          child: MaterialDesktopVideoControls(state),
-        ),
-      ),
-      mpv: (_) => _mpvControls(),
-    );
-  }
-
-  /// The uosc controls: same actions as the bars above,
-  /// all through the coordinator (seeks via `player.seek`, the user path).
-  Widget _mpvControls() {
-    final coord = _coord;
-    final playback = coord.playback;
-    void menuOpen(bool open) => _shaderMenuOpen = open;
-    void pickTrack(TrackPick p) => coord.selectTrack(aid: p.aid, sid: p.sid, subtitlesOff: p.subtitlesOff);
-    Widget episode(bool next) => SignalBuilder(builder: (context) {
-          final e = next ? coord.nextEpisode.value : coord.previousEpisode.value;
-          if (e == null) return const SizedBox.shrink();
-          return UoscButton(
-            key: ValueKey(next ? 'episode-next' : 'episode-previous'),
-            icon: next ? Icons.skip_next_rounded : Icons.skip_previous_rounded,
-            tooltip: '${next ? 'Next' : 'Previous'}: ${e.label}  (${next ? '> or Shift+N' : '< or Shift+P'})',
-            onPressed: next ? coord.playNextEpisode : coord.playPreviousEpisode,
-          );
-        });
-    return UoscControls(
-      shown: _controlsShown,
-      holdBy: _hold,
-      onDoubleTap: widget.onToggleFullscreen,
-      topLeft: const NowPlayingTitle(),
-      // Up next is one of the top bar's controls, before chat.
-      top: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          UpNextButton(
-              queue: coord.queue, onPlayNextEpisode: coord.playNextEpisode, look: UpNextLook.uosc, hold: _hold),
-          UoscButton(
-            key: const ValueKey('uosc-chat'),
-            icon: widget.chatOpen ? Icons.chat_bubble_rounded : Icons.chat_bubble_outline_rounded,
-            tooltip: 'Chat & activity (Tab)',
-            badge: widget.unread,
-            onPressed: _toggleChat,
-          ),
-          UoscButton(
-            icon: widget.fullscreen ? Icons.fullscreen_exit_rounded : Icons.close_fullscreen_rounded,
-            tooltip: widget.fullscreen ? 'Exit fullscreen (Esc)' : 'Back to the library (keeps playing)',
-            onPressed: widget.fullscreen ? widget.onToggleFullscreen : widget.onCollapse,
-          ),
-          ?_fullscreenWindowButtons(),
-        ],
-      ),
-      timeline: (context, expanded) => SignalBuilder(
-        builder: (context) => UoscTimeline(
-          position: playback.position.value,
-          duration: playback.duration.value,
-          buffered: playback.buffered.value,
-          chapters: playback.chapters.value,
-          expanded: expanded,
-          onSeek: (d) => playback.player.seek(d),
-        ),
-      ),
-      left: [
-        UoscMainMenuButton(
-          onMenuOpen: menuOpen,
-          actions: [
-            (title: 'Change video', hint: null, run: widget.onChangeVideo),
-            (title: 'Chat & activity', hint: 'Tab', run: _toggleChat),
-            (title: 'Reload video', hint: 'Ctrl+R', run: _reloadVideo),
-            (title: 'Mark a problem', hint: 'Ctrl+Shift+B', run: () => showMarkProblem(context)),
-            (title: 'Mark everyone ready', hint: null, run: coord.forcePlayAll),
-            (title: 'Fullscreen', hint: 'F', run: widget.onToggleFullscreen),
-            (title: 'Leave server', hint: 'Esc', run: widget.onLeave),
-          ],
-        ),
-        SignalBuilder(
-          builder: (context) => UoscTracksButton(
-            type: JellyfinStreamType.subtitle,
-            tracks: playback.tracks.value,
-            onPick: pickTrack,
-            onMenuOpen: menuOpen,
-          ),
-        ),
-        SignalBuilder(
-          builder: (context) => UoscTracksButton(
-            type: JellyfinStreamType.audio,
-            tracks: playback.tracks.value,
-            onPick: pickTrack,
-            onMenuOpen: menuOpen,
-          ),
-        ),
-        UoscShaderButton(renderMode: playback.renderMode, onPick: _pickShader, onMenuOpen: menuOpen),
-        const SizedBox(width: 12),
-        SignalBuilder(builder: (context) {
-          final ready = coord.selfMember.value?.ready ?? false;
-          return UoscButton(
-            key: const ValueKey('uosc-ready'),
-            icon: ready ? Icons.check_circle_rounded : Icons.radio_button_unchecked_rounded,
-            label: ready ? 'Ready' : 'Not ready',
-            color: ready ? Colors.greenAccent : null,
-            tooltip: 'Ready / not ready (Space)',
-            onPressed: coord.toggleReady,
-          );
-        }),
-        UoscButton(icon: Icons.done_all_rounded, tooltip: 'Mark everyone ready', onPressed: coord.forcePlayAll),
-        UoscButton(
-          icon: Icons.refresh_rounded,
-          tooltip: 'Reload video (Ctrl+R) — fixes a frozen picture',
-          onPressed: _reloadVideo,
-        ),
-      ],
-      right: [
-        UoscButton(
-          key: const ValueKey('uosc-skip-forward'),
-          icon: Icons.fast_forward_rounded,
-          label: '1:30',
-          tooltip: 'Skip 1:30 for everyone (Shift+Right)',
-          onPressed: coord.skipForward,
-        ),
-        SignalBuilder(
-          builder: (context) => UoscChaptersButton(
-            chapters: playback.chapters.value,
-            current: playback.currentChapter.value,
-            duration: playback.duration.value,
-            onPick: (c) => coord.seekTo(c.start.inMicroseconds / 1e6),
-            onMenuOpen: menuOpen,
-          ),
-        ),
-        episode(false),
-        episode(true),
-        const SizedBox(width: 12),
-        UoscButton(icon: Icons.video_library_outlined, tooltip: 'Change video', onPressed: widget.onChangeVideo),
-        StreamBuilder<double>(
-          stream: playback.player.stream.volume,
-          initialData: playback.player.state.volume,
-          builder: (context, v) => UoscVolumeButton(
-            volume: v.data ?? 100,
-            onChanged: (x) => playback.player.setVolume(x),
-          ),
-        ),
-        UoscPlayerSettingsButton(renderMode: playback.renderMode),
-        UoscButton(
-          icon: widget.fullscreen ? Icons.fullscreen_exit_rounded : Icons.fullscreen_rounded,
-          tooltip: 'Fullscreen (F)',
-          onPressed: widget.onToggleFullscreen,
+          windowButtons: _fullscreenWindowButtons(),
         ),
       ],
     );
@@ -713,64 +365,26 @@ class _SessionPlayerState extends State<SessionPlayer> {
   /// the gap between them and the controls.
   static const _edge = 16.0;
 
-  /// The bottom controls' height in the design in use.
-  static double _bottomControlsHeight(bool uosc) => uosc
-      ? UoscControls.buttonRowHeight + UoscControls.rowBottomPadding + UoscTimeline.height
-      : _barHeight + ChapterSeekBar.height;
+  /// The bottom controls' height in the skin and size in use.
+  static double _bottomControlsHeight() {
+    final s = AppSettings.instance;
+    return controlsBottomHeight(s.controlsSkin.value, s.controlsSize.value);
+  }
 
-  /// The volume flash after a wheel or key step, in the design in use:
-  /// uosc's vertical slider at the right edge (centred between the top
-  /// buttons and the bottom controls, as uosc places it), else a pill
-  /// under the top bar.
-  Widget _volumeReadout() {
-    final playback = _coord.playback;
-    Widget withVolume(Widget Function(double v) build) => StreamBuilder<double>(
-          stream: playback.player.stream.volume,
-          initialData: playback.player.state.volume,
-          builder: (context, v) => build(v.data ?? 100),
-        );
-    return SignalBuilder(builder: (context) {
-      if (AppSettings.instance.mpvControls.value) {
-        const top = 12 + UoscControls.buttonRowHeight;
-        final bottom = _bottomControlsHeight(true);
-        return Positioned(
-          right: UoscVolumeSlider.width / 2,
-          top: top,
-          bottom: bottom,
-          width: UoscVolumeSlider.width,
-          child: LayoutBuilder(builder: (context, c) {
-            final h = UoscVolumeSlider.heightFor(c.maxHeight);
-            if (h <= UoscVolumeSlider.width) return const SizedBox.shrink();
-            return Align(
-              // Centred with the mute button's room below, like uosc.
-              alignment: Alignment.center,
-              child: Padding(
-                padding: const EdgeInsets.only(bottom: UoscVolumeSlider.width),
-                child: SizedBox(
-                  height: h,
-                  child: VolumeFlash(
-                    trigger: _volumeFlash,
-                    builder: (context) => withVolume((v) => UoscVolumeSlider(volume: v)),
-                  ),
-                ),
-              ),
-            );
-          }),
-        );
-      }
-      return Positioned(
+  static double get _topBarHeight => controlsTopHeight(AppSettings.instance.controlsSkin.peek());
+
+  /// The volume flash after a wheel or key step: a pill under the top bar.
+  Widget _volumeReadout() => Positioned(
         left: 0,
         right: 0,
         top: _topBarHeight + 8,
         child: Center(
           child: VolumeFlash(
-            trigger: _volumeFlash,
-            builder: (context) => withVolume((v) => VolumeReadout(volume: v)),
+            trigger: _model.volumeFlash,
+            builder: (context) => SignalBuilder(builder: (context) => VolumeReadout(volume: _model.volume.value)),
           ),
         ),
       );
-    });
-  }
 
   /// The action area: one band above the bottom controls for everything
   /// that floats there. The status pill (the ready prompt among it)
@@ -781,7 +395,7 @@ class _SessionPlayerState extends State<SessionPlayer> {
   /// ([ControlsHold]).
   Widget _actionArea() {
     return SignalBuilder(builder: (context) {
-      final controls = _bottomControlsHeight(AppSettings.instance.mpvControls.value);
+      final controls = _bottomControlsHeight();
       return ValueListenableBuilder<bool>(
         valueListenable: _controlsShown,
         builder: (context, shown, child) => AnimatedPositioned(
@@ -848,7 +462,7 @@ class _SessionPlayerState extends State<SessionPlayer> {
                 announce: skip.kind != SkipKind.ending,
                 controlsShown: _controlsShown,
                 hold: _hold,
-                child: SkipPill(offer: skip, onPressed: () => coord.skip(skip)),
+                child: SkipPill(offer: skip, onPressed: () => _model.skip(skip)),
               ),
             if (showNext)
               PillGate(
@@ -1171,7 +785,7 @@ const _shaderKeys = [
 class _MiniSeekBar extends StatelessWidget {
   final bool thin;
   final ValueChanged<Duration>? onSeek;
-  const _MiniSeekBar({super.key, this.thin = false, this.onSeek});
+  const _MiniSeekBar({this.thin = false, this.onSeek});
 
   @override
   Widget build(BuildContext context) {
@@ -1199,91 +813,3 @@ class _MiniSeekBar extends StatelessWidget {
     });
   }
 }
-
-/// Double-click on the picture (not on the bars) without joining the
-/// gesture arena, so single clicks on buttons stay instant.
-class DoubleClickListener extends StatefulWidget {
-  final VoidCallback onDoubleClick;
-  final double skipTop, skipBottom;
-  final Widget child;
-  const DoubleClickListener(
-      {super.key, required this.onDoubleClick, this.skipTop = 0, this.skipBottom = 0, required this.child});
-
-  @override
-  State<DoubleClickListener> createState() => _DoubleClickListenerState();
-}
-
-class _DoubleClickListenerState extends State<DoubleClickListener> {
-  DateTime? _last;
-  Offset? _lastAt;
-
-  void _down(PointerDownEvent e) {
-    if (e.buttons != kPrimaryMouseButton) return;
-    final h = context.size?.height ?? 0;
-    final y = e.localPosition.dy;
-    if (y < widget.skipTop || y > h - widget.skipBottom) {
-      _last = null;
-      return;
-    }
-    final now = DateTime.now();
-    final last = _last, at = _lastAt;
-    if (last != null &&
-        at != null &&
-        now.difference(last) < const Duration(milliseconds: 400) &&
-        (e.localPosition - at).distance < 24) {
-      _last = null;
-      widget.onDoubleClick();
-      return;
-    }
-    _last = now;
-    _lastAt = e.localPosition;
-  }
-
-  @override
-  Widget build(BuildContext context) =>
-      Listener(behavior: HitTestBehavior.translucent, onPointerDown: _down, child: widget.child);
-}
-
-class _ReadyControlButton extends StatelessWidget {
-  final FocusNode focusNode;
-  const _ReadyControlButton({required this.focusNode});
-
-  @override
-  Widget build(BuildContext context) {
-    return SignalBuilder(
-      builder: (context) {
-        final ready = SessionState.instance.coordinator.selfMember.value?.ready ?? false;
-        return _BarTextButton(
-          focusNode: focusNode,
-          label: ready ? 'Ready ✓' : 'Not ready',
-          onPressed: SessionState.instance.coordinator.toggleReady,
-        );
-      },
-    );
-  }
-}
-
-class _BarTextButton extends StatelessWidget {
-  final FocusNode focusNode;
-  final String label;
-  final IconData? icon;
-  final String? tooltip;
-  final VoidCallback onPressed;
-  const _BarTextButton(
-      {required this.focusNode, required this.label, required this.onPressed, this.icon, this.tooltip});
-
-  @override
-  Widget build(BuildContext context) {
-    final style = TextButton.styleFrom(
-      foregroundColor: Colors.white,
-      padding: const EdgeInsets.symmetric(horizontal: 8),
-      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-    );
-    final text = Text(label, style: const TextStyle(fontSize: 12));
-    final button = icon == null
-        ? TextButton(focusNode: focusNode, style: style, onPressed: onPressed, child: text)
-        : TextButton.icon(
-            focusNode: focusNode, style: style, onPressed: onPressed, icon: Icon(icon, size: 16), label: text);
-    return tooltip == null ? button : Tooltip(message: tooltip, child: button);
-  }
-}

apps/desktop/lib/src/shell/settings_tab.dart

@@ -121,12 +121,16 @@ class SettingsTab extends StatelessWidget {
         return [
           const SettingsHintCard(
             icon: Icons.tune,
-            text: "Player settings are also in the player's ⚙, at the right end of its controls.",
+            text: "Player settings are also in the player: ⚙ → Player settings, at the right of its controls.",
           ),
           SettingsPanel(
             title: 'Player',
             child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: playerSettingRows()),
           ),
+          SettingsPanel(
+            title: 'Controls',
+            child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: controlsSettingRows()),
+          ),
           const SettingsPanel(title: 'Custom shaders', child: CustomShaderFiles()),
           const SettingsPanel(title: 'yt-dlp', child: YtDlpSettings()),
         ];

apps/desktop/lib/src/state/settings.dart

@@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart';
 import 'package:hive_ce/hive.dart';
 import 'package:signals/signals_flutter.dart';
 
+import '../controls/model/controls_prefs.dart';
 import '../shaders/shader_presets.dart';
 
 // App preferences (Settings page), one Hive box. Signals start at their
@@ -17,7 +18,14 @@ const _keyShaderPreset = 'shaderPreset';
 const _keyShaderQuality = 'shaderQuality';
 const _keyCustomShaders = 'customShaders';
 const _keyAutoAdvance = 'autoAdvance';
+/// Legacy: true was the uosc design (now [ControlsSkin.minimal]); read
+/// once when [_keyControlsSkin] is missing.
 const _keyMpvControls = 'mpvControls';
+const _keyControlsSkin = 'controlsSkin';
+const _keyTimeDisplay = 'timeDisplay';
+const _keyControlsSize = 'controlsSize';
+const _keyControlsHideSecs = 'controlsHideSecs';
+const _keyHiddenControls = 'hiddenControls';
 const _keyHideReReleases = 'hideReReleases';
 const _keyProgressLine = 'progressLine';
 const _keySoundVolume = 'soundVolume';
@@ -62,14 +70,20 @@ class AppSettings {
   final unreadyOnSwap = signal(false);
   /// Session: the idle auto-unready sits this member out instead.
   final idleSitsOut = signal(false);
-  /// Player design: the uosc controls (`controls/uosc/`) instead of the
-  /// standard ones (media_kit's with our bars). Applies live.
-  final mpvControls = signal(false);
+  /// The player controls' skin (`controls/`). Applies live.
+  final controlsSkin = signal(ControlsSkin.standard);
+  /// The bar's clock: elapsed / total or the time left.
+  final timeDisplay = signal(TimeDisplay.elapsed);
+  final controlsSize = signal(ControlsSize.normal);
+  /// Seconds without mouse movement before the controls hide.
+  final controlsHideSecs = signal(defaultControlsHideSecs);
+  /// Optional bar buttons switched off (they stay in ⚙).
+  final hiddenControls = signal<Set<OptionalControl>>(const {});
   /// Library: leave out of "Latest in X" what was added long after it
   /// first aired (re-uploads, old seasons added late).
   final hideReReleases = signal(true);
   /// A 2 px progress line at the bottom of the video while the controls
-  /// are hidden (both designs). Applies live.
+  /// are hidden (both skins). Applies live.
   final progressLine = signal(true);
   /// Send this app's log lines to the server's session log while in a
   /// session (never chat). Off: nothing is sent but a note that it is off.
@@ -127,8 +141,18 @@ class AppSettings {
       if (unready is bool) unreadyOnSwap.value = unready;
       final idleOut = box.get(_keyIdleSitsOut);
       if (idleOut is bool) idleSitsOut.value = idleOut;
-      final mpv = box.get(_keyMpvControls);
-      if (mpv is bool) mpvControls.value = mpv;
+      controlsSkin.value =
+          ControlsSkin.fromStored(box.get(_keyControlsSkin), legacyMpvControls: box.get(_keyMpvControls));
+      final time = box.get(_keyTimeDisplay);
+      timeDisplay.value = TimeDisplay.values.where((t) => t.name == time).firstOrNull ?? TimeDisplay.elapsed;
+      final size = box.get(_keyControlsSize);
+      controlsSize.value = ControlsSize.values.where((t) => t.name == size).firstOrNull ?? ControlsSize.normal;
+      final hide = box.get(_keyControlsHideSecs);
+      if (hide is int && controlsHideChoices.contains(hide)) controlsHideSecs.value = hide;
+      final hidden = box.get(_keyHiddenControls);
+      if (hidden is List) {
+        hiddenControls.value = Set.unmodifiable(OptionalControl.values.where((c) => hidden.contains(c.name)));
+      }
       final hideRe = box.get(_keyHideReReleases);
       if (hideRe is bool) hideReReleases.value = hideRe;
       final line = box.get(_keyProgressLine);
@@ -199,9 +223,31 @@ class AppSettings {
     _put(_keyIdleSitsOut, on);
   }
 
-  void setMpvControls(bool on) {
-    mpvControls.value = on;
-    _put(_keyMpvControls, on);
+  void setControlsSkin(ControlsSkin skin) {
+    controlsSkin.value = skin;
+    _put(_keyControlsSkin, skin.name);
+  }
+
+  void setTimeDisplay(TimeDisplay t) {
+    timeDisplay.value = t;
+    _put(_keyTimeDisplay, t.name);
+  }
+
+  void setControlsSize(ControlsSize size) {
+    controlsSize.value = size;
+    _put(_keyControlsSize, size.name);
+  }
+
+  void setControlsHideSecs(int secs) {
+    controlsHideSecs.value = secs;
+    _put(_keyControlsHideSecs, secs);
+  }
+
+  void setControlShown(OptionalControl c, bool on) {
+    final next = {...hiddenControls.value};
+    on ? next.remove(c) : next.add(c);
+    hiddenControls.value = Set.unmodifiable(next);
+    _put(_keyHiddenControls, [for (final c in next) c.name]);
   }
 
   void setProgressLine(bool on) {

apps/desktop/lib/src/widgets/app_menu.dart

@@ -4,7 +4,7 @@ import 'dart:ui' show ImageFilter;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
-import '../controls/uosc/controls.dart';
+import '../controls/frame.dart';
 import '../shell/motion.dart';
 
 // The app's one menu: a frosted dark panel anchored under (or over) the
@@ -158,9 +158,8 @@ Future<int?> _openMenu(BuildContext context, List<AppMenuItem<Object?>> items, d
         minWidth: minWidth - shift,
         capturedThemes: InheritedTheme.capture(from: context, to: navigator.context),
       ));
-  // Over the uosc controls: keep them up while the menu is open.
-  final controls = UoscControls.maybeOf(context);
-  return controls == null ? open() : controls.holdDuring(open);
+  // Over the player's controls: keep them up while the menu is open.
+  return ControlsFrame.holdWhile(context, open);
 }
 
 class _AppMenuRoute extends PopupRoute<int> {