Files
plezy/lib/focus/focus_theme.dart
T
edde746 5bd742c8b8 fix(tv): glide D-pad row and hub scrolls in 150ms on Android TV instead of 500ms
D-pad navigation on Android TV felt sluggish next to Projectivy and the
Fire TV launcher: every step of the home rail and hub rows trailed the
focus border in a 500ms ease-out, and hub moves deferred the vertical
glide by a frame. The 500ms was measured from the tvOS focus engine
(f357be407) and applied to every platform; Leanback prices a one-card
step at roughly 100-150ms, so the same glide reads as input lag on a
D-pad.

FocusTheme.navigationScrollDuration now vends the per-platform value:
Apple TV keeps the measured 500ms, everything else glides in 150ms.
TvBrowseRail and HubSection use it for row and hub-list scrolls, and a
hub move starts the vertical animation in the same frame when the
build-time section offsets are already known.

Measured with screen recordings on a Shield TV (2019) and a Fire TV
Stick 4K Max: row motion per press 470-510ms before, 135-150ms after;
hub move 480ms before, 120-150ms after.
2026-09-02 22:38:11 +02:00

114 lines
4.7 KiB
Dart

import 'package:flutter/material.dart';
import '../services/device_performance.dart';
import '../theme/mono_tokens.dart';
import '../utils/platform_detector.dart';
class FocusTheme {
FocusTheme._();
static const double focusScale = 1.02;
static const double fullCardFocusScale = 1.03;
static const double focusBorderWidth = 2.5;
static const double defaultBorderRadius = 8.0;
static const double focusGlowInnerBlurRadius = 18;
static const double focusGlowOuterBlurRadius = 34;
static const double focusGlowSpreadRadius = 1.5;
static Color getFocusBorderColor(BuildContext context) {
return Theme.of(context).colorScheme.primary;
}
static Duration getAnimationDuration(BuildContext context) {
// Reduced tier: snap focus transitions (scale/border/glow) instead of
// animating — each animation frame re-rasterizes the focused card.
if (DevicePerformance.isReduced) return Duration.zero;
return Theme.of(context).extension<MonoTokens>()?.fast ?? const Duration(milliseconds: 150);
}
/// How long a TV row (or the hub list) glides after one D-pad focus step.
///
/// Apple TV keeps the ~500ms ease-out measured from the native focus
/// engine's scrollable containers (issue #2006): Siri Remote swipes chain
/// steps into one continuous glide and users expect that inertia. D-pad
/// platforms have no such reference: Leanback's `GridLayoutManager` prices a
/// one-card step at roughly 100-150ms, so a 500ms glide there trails the
/// focus border on every press and reads as input lag next to the launcher.
/// Successive presses (including hold-repeats) retarget the animation from
/// wherever the row currently is, so a fast series still glides continuously.
static Duration navigationScrollDuration() =>
PlatformDetector.isAppleTV() ? const Duration(milliseconds: 500) : const Duration(milliseconds: 150);
/// [radii] overrides [borderRadius] when per-corner radii are needed
/// (M3E grouped cards: large outer / small inner corners).
static BoxDecoration focusDecoration(
BuildContext context, {
required bool isFocused,
double borderRadius = defaultBorderRadius,
BorderRadius? radii,
double borderStrokeAlign = BorderSide.strokeAlignInside,
Color? color,
}) {
final focusColor = color ?? getFocusBorderColor(context);
return BoxDecoration(
borderRadius: radii ?? BorderRadius.circular(borderRadius),
border: Border.all(
color: isFocused ? focusColor : Colors.transparent,
width: focusBorderWidth,
strokeAlign: borderStrokeAlign,
),
);
}
/// The focus glow as a list of [BoxShadow]s.
///
/// Rendered by [FocusGlowOverlay] in the root overlay so the glow paints
/// above sibling cards on all four sides (an in-tree background shadow is
/// occluded by later-painted neighbours, which produced the one-sided halo).
static List<BoxShadow> focusGlowShadows(Color color) {
return [
BoxShadow(
color: color.withValues(alpha: 0.34),
blurRadius: focusGlowInnerBlurRadius,
spreadRadius: focusGlowSpreadRadius,
),
BoxShadow(color: color.withValues(alpha: 0.2), blurRadius: focusGlowOuterBlurRadius),
];
}
/// How far the focus glow visibly reaches beyond the card edge. Used to size
/// the overlay paint area so the blur is not clipped.
static double get focusGlowExtent => focusGlowOuterBlurRadius * 2 + focusGlowSpreadRadius;
/// Build focus decoration with background color instead of border.
/// Useful for video controls where it should match the native hover style.
/// [radii] overrides [borderRadius] when per-corner radii are needed.
static BoxDecoration focusBackgroundDecoration({
required bool isFocused,
double borderRadius = defaultBorderRadius,
BorderRadius? radii,
}) {
return BoxDecoration(
borderRadius: radii ?? BorderRadius.circular(borderRadius),
color: isFocused ? Colors.white.withValues(alpha: 0.2) : Colors.transparent,
);
}
/// Focus background fill derived from the theme's text color, so it stays
/// visible on BOTH light and dark surfaces — the white-based
/// [focusBackgroundDecoration] disappears on light ones. This is the mono
/// convention used by [TrackRow], the navigation rail, and the music player
/// surfaces. Prefer this for any new mono-themed surface.
static BoxDecoration textFillFocusDecoration(
BuildContext context, {
required bool isFocused,
double borderRadius = defaultBorderRadius,
BorderRadius? radii,
}) {
return BoxDecoration(
borderRadius: radii ?? BorderRadius.circular(borderRadius),
color: isFocused ? tokens(context).text.withValues(alpha: 0.12) : Colors.transparent,
);
}
}