mirror of
https://github.com/gabehf/Fladder.git
synced 2026-03-08 23:18:16 -07:00
feat: Android TV support (#503)
Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
parent
7ab8c015b9
commit
c299492d6d
168 changed files with 12019 additions and 3073 deletions
|
|
@ -32,8 +32,11 @@ class AdaptiveFab {
|
|||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: FilledButton.tonal(
|
||||
onPressed: onPressed,
|
||||
style: FilledButton.styleFrom(
|
||||
padding: const EdgeInsets.all(16),
|
||||
),
|
||||
child: Row(
|
||||
spacing: 24,
|
||||
spacing: 16,
|
||||
children: [
|
||||
child,
|
||||
Flexible(child: Text(title)),
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ class _BackgroundImageState extends ConsumerState<BackgroundImage> {
|
|||
@override
|
||||
void didUpdateWidget(covariant BackgroundImage oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (oldWidget.items.length != widget.items.length || oldWidget.images.length != widget.images.length) {
|
||||
if (!oldWidget.items.equals(widget.items)) {
|
||||
updateItems();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,10 +81,12 @@ class DestinationModel {
|
|||
);
|
||||
}
|
||||
|
||||
NavigationButton toNavigationButton(bool selected, bool horizontal, bool expanded, {Widget? customIcon}) {
|
||||
NavigationButton toNavigationButton(bool selected, bool horizontal, bool expanded,
|
||||
{bool navFocusNode = false, Widget? customIcon}) {
|
||||
return NavigationButton(
|
||||
label: label,
|
||||
selected: selected,
|
||||
navFocusNode: navFocusNode,
|
||||
onPressed: action,
|
||||
horizontal: horizontal,
|
||||
expanded: expanded,
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ double floatingPlayerHeight(BuildContext context) => switch (AdaptiveLayout.view
|
|||
ViewSize.phone => 75,
|
||||
ViewSize.tablet => 85,
|
||||
ViewSize.desktop => 95,
|
||||
ViewSize.television => 105,
|
||||
};
|
||||
|
||||
class FloatingPlayerBar extends ConsumerStatefulWidget {
|
||||
|
|
|
|||
|
|
@ -64,25 +64,28 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
|
|||
child: widget.child,
|
||||
);
|
||||
|
||||
return switch (AdaptiveLayout.layoutOf(context)) {
|
||||
ViewSize.phone => paddedChild(),
|
||||
ViewSize.tablet => hasOverlay
|
||||
? SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
: paddedChild(),
|
||||
ViewSize.desktop => SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
};
|
||||
return FocusTraversalGroup(
|
||||
policy: GlobalFallbackTraversalPolicy(fallbackNode: navBarNode),
|
||||
child: switch (AdaptiveLayout.layoutOf(context)) {
|
||||
ViewSize.phone => paddedChild(),
|
||||
ViewSize.tablet => hasOverlay
|
||||
? SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
: paddedChild(),
|
||||
ViewSize.desktop || ViewSize.television => SideNavigationBar(
|
||||
currentIndex: widget.currentIndex,
|
||||
destinations: widget.destinations,
|
||||
currentLocation: widget.currentLocation,
|
||||
child: paddedChild(),
|
||||
scaffoldKey: widget.drawerKey,
|
||||
)
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
MediaQueryData semiNestedPadding(BuildContext context, bool hasOverlay) {
|
||||
|
|
@ -92,3 +95,28 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
FocusNode? lastMainFocus;
|
||||
|
||||
class GlobalFallbackTraversalPolicy extends ReadingOrderTraversalPolicy {
|
||||
final FocusNode fallbackNode;
|
||||
|
||||
GlobalFallbackTraversalPolicy({required this.fallbackNode}) : super();
|
||||
|
||||
@override
|
||||
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
|
||||
lastMainFocus = null;
|
||||
final handled = super.inDirection(currentNode, direction);
|
||||
if (!handled && direction == TraversalDirection.left) {
|
||||
lastMainFocus = currentNode;
|
||||
|
||||
if (fallbackNode.canRequestFocus && fallbackNode.context?.mounted == true) {
|
||||
final cb = FocusTraversalPolicy.defaultTraversalRequestFocusCallback;
|
||||
cb(fallbackNode);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return handled;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import 'package:fladder/util/localization_helper.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/side_navigation_bar.dart';
|
||||
import 'package:fladder/widgets/shared/item_actions.dart';
|
||||
|
||||
class NavigationButton extends ConsumerStatefulWidget {
|
||||
final String? label;
|
||||
final Widget selectedIcon;
|
||||
final Widget icon;
|
||||
final bool navFocusNode;
|
||||
final bool horizontal;
|
||||
final bool expanded;
|
||||
final Function()? onPressed;
|
||||
|
|
@ -21,6 +23,7 @@ class NavigationButton extends ConsumerStatefulWidget {
|
|||
required this.label,
|
||||
required this.selectedIcon,
|
||||
required this.icon,
|
||||
this.navFocusNode = false,
|
||||
this.horizontal = false,
|
||||
this.expanded = false,
|
||||
this.onPressed,
|
||||
|
|
@ -48,6 +51,7 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
|||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: ElevatedButton(
|
||||
focusNode: widget.navFocusNode ? navBarNode : null,
|
||||
onHover: (value) => setState(() => showPopupButton = value),
|
||||
style: ButtonStyle(
|
||||
elevation: const WidgetStatePropertyAll(0),
|
||||
|
|
@ -64,95 +68,97 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
|||
})),
|
||||
onPressed: widget.onPressed,
|
||||
onLongPress: widget.onLongPress,
|
||||
child: widget.horizontal
|
||||
? Padding(
|
||||
padding: widget.customIcon != null
|
||||
? EdgeInsetsGeometry.zero
|
||||
: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
|
||||
child: SizedBox(
|
||||
height: widget.customIcon != null ? 60 : 35,
|
||||
child: Row(
|
||||
spacing: 4,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
height: widget.selected ? 16 : 0,
|
||||
margin: const EdgeInsets.only(top: 1.5),
|
||||
width: 6,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.primary
|
||||
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
|
||||
),
|
||||
),
|
||||
widget.customIcon ??
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
if (widget.horizontal && widget.expanded) ...[
|
||||
if (widget.label != null)
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minWidth: 80),
|
||||
child: Text(
|
||||
widget.label!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.trailing.isNotEmpty)
|
||||
AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 125),
|
||||
opacity: showPopupButton ? 1 : 0,
|
||||
child: PopupMenuButton(
|
||||
tooltip: context.localized.options,
|
||||
iconColor: foreGroundColor,
|
||||
iconSize: 18,
|
||||
itemBuilder: (context) => widget.trailing.popupMenuItems(useIcons: true),
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: widget.customIcon != null ? EdgeInsetsGeometry.zero : const EdgeInsets.all(8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
spacing: 8,
|
||||
child: ExcludeFocusTraversal(
|
||||
child: widget.horizontal
|
||||
? Padding(
|
||||
padding: widget.customIcon != null
|
||||
? EdgeInsetsGeometry.zero
|
||||
: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
|
||||
child: SizedBox(
|
||||
height: widget.customIcon != null ? 60 : 35,
|
||||
child: Row(
|
||||
spacing: 4,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
height: widget.selected ? 16 : 0,
|
||||
margin: const EdgeInsets.only(top: 1.5),
|
||||
width: 6,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.primary
|
||||
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
|
||||
),
|
||||
),
|
||||
widget.customIcon ??
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
if (widget.label != null && widget.horizontal && widget.expanded)
|
||||
Flexible(child: Text(widget.label!))
|
||||
const SizedBox(width: 6),
|
||||
if (widget.horizontal && widget.expanded) ...[
|
||||
if (widget.label != null)
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minWidth: 80),
|
||||
child: Text(
|
||||
widget.label!,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.trailing.isNotEmpty)
|
||||
AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 125),
|
||||
opacity: showPopupButton ? 1 : 0,
|
||||
child: PopupMenuButton(
|
||||
tooltip: context.localized.options,
|
||||
iconColor: foreGroundColor,
|
||||
iconSize: 18,
|
||||
itemBuilder: (context) => widget.trailing.popupMenuItems(useIcons: true),
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
margin: EdgeInsets.only(top: widget.selected ? 4 : 0),
|
||||
height: widget.selected ? 6 : 0,
|
||||
width: widget.selected ? 14 : 0,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: widget.customIcon != null ? EdgeInsetsGeometry.zero : const EdgeInsets.all(8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
spacing: 8,
|
||||
children: [
|
||||
widget.customIcon ??
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
if (widget.label != null && widget.horizontal && widget.expanded)
|
||||
Flexible(child: Text(widget.label!))
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
margin: EdgeInsets.only(top: widget.selected ? 4 : 0),
|
||||
height: widget.selected ? 6 : 0,
|
||||
width: widget.selected ? 14 : 0,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,12 +20,15 @@ import 'package:fladder/util/fladder_image.dart';
|
|||
import 'package:fladder/util/localization_helper.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/adaptive_fab.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/destination_model.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/navigation_body.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/navigation_button.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/settings_user_icon.dart';
|
||||
import 'package:fladder/widgets/shared/custom_tooltip.dart';
|
||||
import 'package:fladder/widgets/shared/item_actions.dart';
|
||||
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
|
||||
|
||||
final navBarNode = FocusNode();
|
||||
|
||||
class SideNavigationBar extends ConsumerStatefulWidget {
|
||||
final int currentIndex;
|
||||
final List<DestinationModel> destinations;
|
||||
|
|
@ -53,7 +56,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
final views = ref.watch(viewsProvider.select((value) => value.views));
|
||||
final usePostersForLibrary = ref.watch(clientSettingsProvider.select((value) => value.usePosterForLibrary));
|
||||
|
||||
final expandedWidth = 250.0;
|
||||
final expandedWidth = 200.0;
|
||||
final padding = MediaQuery.paddingOf(context);
|
||||
|
||||
final collapsedWidth = 90 + padding.left;
|
||||
|
|
@ -64,6 +67,9 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
|
||||
final fullScreenChildRoute = fullScreenRoutes.contains(context.router.current.name);
|
||||
|
||||
final hasOverlay = AdaptiveLayout.layoutModeOf(context) == LayoutMode.dual ||
|
||||
homeRoutes.any((element) => element.name.contains(context.router.current.name));
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
AdaptiveLayoutBuilder(
|
||||
|
|
@ -73,15 +79,16 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
),
|
||||
child: (context) => widget.child,
|
||||
),
|
||||
IgnorePointer(
|
||||
ignoring: fullScreenChildRoute,
|
||||
child: AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
opacity: !fullScreenChildRoute ? 1 : 0,
|
||||
child: Container(
|
||||
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
|
||||
width: shouldExpand ? expandedWidth : collapsedWidth,
|
||||
child: MouseRegion(
|
||||
FocusTraversalGroup(
|
||||
policy: _RailTraversalPolicy(),
|
||||
child: IgnorePointer(
|
||||
ignoring: !hasOverlay || fullScreenChildRoute,
|
||||
child: AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
opacity: !fullScreenChildRoute ? 1 : 0,
|
||||
child: Container(
|
||||
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
|
||||
width: shouldExpand ? expandedWidth : collapsedWidth,
|
||||
child: Padding(
|
||||
key: const Key('navigation_rail'),
|
||||
padding: padding.copyWith(right: 0, top: isDesktop ? padding.top : null),
|
||||
|
|
@ -111,9 +118,12 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
),
|
||||
),
|
||||
if (largeBar) ...[
|
||||
AnimatedFadeSize(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4).copyWith(bottom: expandedSideBar ? 10 : 0),
|
||||
child: AnimatedFadeSize(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
|
|
@ -137,6 +147,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
child: destination.toNavigationButton(
|
||||
widget.currentIndex == index,
|
||||
true,
|
||||
navFocusNode: index == 0,
|
||||
shouldExpand,
|
||||
),
|
||||
),
|
||||
|
|
@ -204,6 +215,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
: view.collectionType.iconOutlined,
|
||||
),
|
||||
),
|
||||
decodeHeight: 64,
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
@ -273,6 +285,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
e.collectionType.iconOutlined,
|
||||
),
|
||||
),
|
||||
decodeHeight: 64,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -299,7 +312,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
selectedIcon: const Icon(IconsaxPlusBold.setting_3),
|
||||
horizontal: true,
|
||||
expanded: shouldExpand,
|
||||
icon: const SettingsUserIcon(),
|
||||
icon: const ExcludeFocusTraversal(child: SettingsUserIcon()),
|
||||
onPressed: () {
|
||||
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.single) {
|
||||
context.router.push(const SettingsRoute());
|
||||
|
|
@ -332,3 +345,64 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RailTraversalPolicy extends ReadingOrderTraversalPolicy {
|
||||
_RailTraversalPolicy();
|
||||
|
||||
@override
|
||||
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
|
||||
if (direction == TraversalDirection.left) {
|
||||
return false;
|
||||
}
|
||||
if (direction == TraversalDirection.right) {
|
||||
if (lastMainFocus != null && _isLaidOut(lastMainFocus!)) {
|
||||
lastMainFocus!.requestFocus();
|
||||
return true;
|
||||
} else {
|
||||
return super.inDirection(currentNode, direction);
|
||||
}
|
||||
}
|
||||
if (direction == TraversalDirection.up || direction == TraversalDirection.down) {
|
||||
final scope = currentNode.enclosingScope;
|
||||
if (scope == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
final candidates = scope.traversalDescendants
|
||||
.where((n) => n.canRequestFocus && FocusTraversalGroup.maybeOfNode(n) == this && _isLaidOut(n))
|
||||
.toList();
|
||||
|
||||
if (candidates.isEmpty) return false;
|
||||
|
||||
final sorted = sortDescendants(candidates, currentNode).toList();
|
||||
|
||||
var index = sorted.indexOf(currentNode);
|
||||
if (index == -1) {
|
||||
index = direction == TraversalDirection.down ? -1 : sorted.length;
|
||||
}
|
||||
|
||||
final nextIndex = direction == TraversalDirection.down ? index + 1 : index - 1;
|
||||
|
||||
if (nextIndex < 0 || nextIndex >= sorted.length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
requestFocusCallback(sorted[nextIndex]);
|
||||
return true;
|
||||
}
|
||||
return super.inDirection(currentNode, direction);
|
||||
}
|
||||
}
|
||||
|
||||
bool _isLaidOut(FocusNode node) {
|
||||
final ro = node.context?.findRenderObject();
|
||||
return ro is RenderBox && ro.hasSize;
|
||||
}
|
||||
|
||||
bool isNodeInCurrentRoute(FocusNode node) {
|
||||
if (!node.canRequestFocus) return false;
|
||||
if (node.context == null) return false;
|
||||
|
||||
final nearestScope = FocusScope.of(node.context!);
|
||||
return nearestScope.hasFocus || nearestScope.isFirstFocus;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue