add navigation rail for laptop

2023-10-16 16:54:56 +02:00 · 2023-10-16 16:54:56 +02:00 · 6aa596177f
parent 5ba7e932e3
commit 6aa596177f
4 changed files with 320 additions and 132 deletions
--- a/lib/main.dart
+++ b/lib/main.dart
@ -298,20 +298,17 @@ class _LoginMainWrapperState extends State<LoginMainWrapper> {
 class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

+  static MainScreenState of(BuildContext context) =>
+      context.findAncestorStateOfType<MainScreenState>()!;
+
  @override
-  State<MainScreen> createState() => _MainScreenState();
+  MainScreenState createState() => MainScreenState();
 }

-class _MainScreenState extends State<MainScreen>
+class MainScreenState extends State<MainScreen>
    with SingleTickerProviderStateMixin, WidgetsBindingObserver {
  final _logger = Logger('_MainScreenState');
  final _selected = ValueNotifier<int>(0);
-  final _destinations = <int, String>{
-    0: '/',
-    1: '/podcasts',
-    2: '/library',
-    3: '/search',
-  };
  StreamSubscription? _urlLinkStream;
  int _keyPressed = 0;
  bool textFieldVisited = false;
@ -320,6 +317,9 @@ class _MainScreenState extends State<MainScreen>
  final playerScreenFocusNode = FocusScopeNode();
  final playerBarFocusNode = FocusNode();
  final _fancyScaffoldKey = GlobalKey<FancyScaffoldState>();
+  final routeObserver = RouteObserver();
+
+  late bool _isDesktop;

  @override
  void initState() {
@ -445,7 +445,7 @@ class _MainScreenState extends State<MainScreen>
    // Movement to navigation bar and back
    if ((event is RawKeyUpEvent && textFieldVisited) ||
        event is RawKeyDownEvent) {
-      // only handl if we're running on android
+      // only handle if we're running on android
      if (event.data is! RawKeyEventDataAndroid) return;
      int keyCode = (event.data as RawKeyEventDataAndroid).keyCode;
      _logger.fine('KEY PRESSED: $keyCode');
@ -518,108 +518,203 @@ class _MainScreenState extends State<MainScreen>
    return playerBarFocusNode.requestFocus();
  }

+  final _destinationRoutes = <int, String>{
+    0: '/',
+    1: '/podcasts',
+    2: '/library',
+    3: '/search',
+  };
+  final _destinations = <NavigationDestination>[
+    NavigationDestination(
+        icon: const Icon(Icons.home_outlined),
+        selectedIcon: const Icon(Icons.home),
+        label: 'Home'.i18n),
+    NavigationDestination(
+        icon: const Icon(Icons.podcasts), label: 'Podcasts'.i18n),
+    NavigationDestination(
+        icon: const Icon(Icons.library_music_outlined),
+        selectedIcon: const Icon(Icons.library_music),
+        label: 'Library'.i18n),
+    NavigationDestination(icon: const Icon(Icons.search), label: 'Search'.i18n),
+  ];
+
+  final _navigationRailDestinationRoutes = <int, String>{
+    0: '/',
+    1: '/podcasts',
+    2: '/library/tracks',
+    3: '/library/albums',
+    4: '/library/artists',
+    5: '/library/playlists',
+    6: '/library/history',
+    7: '/downloads',
+    8: '/settings',
+  };
+  final _navigationRailDestinations = <NavigationRailDestination>[
+    NavigationRailDestination(
+      icon: const Icon(Icons.home_outlined),
+      selectedIcon: const Icon(Icons.home),
+      label: Text('Home'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.podcasts),
+      label: Text('Podcasts'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.audiotrack_outlined),
+      selectedIcon: const Icon(Icons.audiotrack),
+      label: Text('Tracks'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.album_outlined),
+      selectedIcon: const Icon(Icons.album),
+      label: Text('Albums'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.recent_actors_outlined),
+      selectedIcon: const Icon(Icons.recent_actors),
+      label: Text('Artists'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.playlist_play),
+      label: Text('Playlists'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.history),
+      label: Text('History'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.download_outlined),
+      selectedIcon: const Icon(Icons.download),
+      label: Text('Downloads'.i18n),
+    ),
+    NavigationRailDestination(
+      icon: const Icon(Icons.settings_outlined),
+      selectedIcon: const Icon(Icons.settings),
+      label: Text('Settings'.i18n),
+    ),
+  ];
+
+  void _onDestinationSelected(int s,
+      {bool useNavigationRailDestinations = false}) {
+//Pop all routes until home screen
+    navigatorKey.currentState!.popUntil((route) => route.isFirst);
+    navigatorKey.currentState!.pushReplacementNamed(
+        useNavigationRailDestinations
+            ? _navigationRailDestinationRoutes[s]!
+            : _destinationRoutes[s]!,
+        arguments: true);
+
+    if (_selected.value != s) _selected.value = s;
+  }
+
+  Widget? buildBottomBar(bool isDesktop) {
+    if (isDesktop) return null;
+    if (_selected.value > _destinations.length - 1) _selected.value = 3;
+    return FocusScope(
+      node: navigationBarFocusNode,
+      child: ValueListenableBuilder<int>(
+          valueListenable: _selected,
+          builder: (context, value, _) {
+            return NavigationBar(
+              selectedIndex: value,
+              onDestinationSelected: _onDestinationSelected,
+              destinations: _destinations,
+            );
+          }),
+    );
+  }
+
+  Widget? _buildNavigationRail(bool isDesktop) {
+    if (!isDesktop) return null;
+
+    return ValueListenableBuilder(
+        valueListenable: _selected,
+        builder: (context, selected, _) {
+          return ExtensibleNavigationRail(
+            destinations: _navigationRailDestinations,
+            selectedIndex: selected,
+            onDestinationSelected: (int s) =>
+                _onDestinationSelected(s, useNavigationRailDestinations: true),
+          );
+        });
+  }
+
  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
        focusNode: FocusNode(),
        onKey: _handleKey,
-        child: FancyScaffold(
-            key: _fancyScaffoldKey,
-            bottomNavigationBar: FocusScope(
-              node: navigationBarFocusNode,
-              child: ValueListenableBuilder<int>(
-                  valueListenable: _selected,
-                  builder: (context, value, _) {
-                    return NavigationBar(
-                      selectedIndex: value,
-                      onDestinationSelected: (int s) async {
-                        //Pop all routes until home screen
-                        navigatorKey.currentState!
-                            .popUntil((route) => route.isFirst);
-                        navigatorKey.currentState!.pushReplacementNamed(
-                            _destinations[s]!,
-                            arguments: true);
-
-                        if (_selected.value != s) _selected.value = s;
-                      },
-                      destinations: <NavigationDestination>[
-                        NavigationDestination(
-                            icon: const Icon(Icons.home_outlined),
-                            selectedIcon: const Icon(Icons.home),
-                            label: 'Home'.i18n),
-                        NavigationDestination(
-                            icon: const Icon(Icons.podcasts),
-                            label: 'Podcasts'.i18n),
-                        NavigationDestination(
-                            icon: const Icon(Icons.library_music_outlined),
-                            selectedIcon: const Icon(Icons.library_music),
-                            label: 'Library'.i18n),
-                        NavigationDestination(
-                            icon: const Icon(Icons.search),
-                            label: 'Search'.i18n),
-                      ],
-                    );
-                  }),
-            ),
-            bottomPanel: PlayerBar(
-              focusNode: playerBarFocusNode,
-              onTap: () =>
-                  _fancyScaffoldKey.currentState!.dragController.fling(),
-              shouldHaveHero: false,
-            ),
-            bottomPanelHeight: 68.0,
-            expandedPanel: FocusScope(
-              node: playerScreenFocusNode,
-              skipTraversal: true,
-              canRequestFocus: true,
-              child: const PlayerScreen(),
-            ),
-            onAnimationStatusChange: (status) {
-              if (status == AnimationStatus.dismissed) {
-                return playerBarFocusNode.requestFocus();
-              }
-
-              _logger.fine('requesting focus to playerScreen');
-              playerScreenFocusNode.requestFocus();
-            },
-            body: Focus(
-                focusNode: screenFocusNode,
+        child: LayoutBuilder(builder: (context, constraints) {
+          // check if we're running on a desktop platform
+          final isLandscape = constraints.maxWidth > constraints.maxHeight;
+          _isDesktop = isLandscape && constraints.maxWidth > 1024;
+          return FancyScaffold(
+              key: _fancyScaffoldKey,
+              bodyDrawer: _buildNavigationRail(_isDesktop),
+              bottomNavigationBar: buildBottomBar(_isDesktop),
+              bottomPanel: PlayerBar(
+                focusNode: playerBarFocusNode,
+                onTap: () =>
+                    _fancyScaffoldKey.currentState!.dragController.fling(),
+                shouldHaveHero: false,
+              ),
+              bottomPanelHeight: 68.0,
+              expandedPanel: FocusScope(
+                node: playerScreenFocusNode,
                skipTraversal: true,
-                canRequestFocus: false,
-                child: _MainRouteNavigator(
-                  navigatorKey: navigatorKey,
-                  routes: {
-                    Navigator.defaultRouteName: (context) => const HomeScreen(),
-                    '/podcasts': (context) => HomePageScreen(
-                          cacheable: true,
-                          channel:
-                              const DeezerChannel(target: 'channels/podcasts'),
-                          title: 'Podcasts'.i18n,
-                        ),
-                    '/library': (context) => const LibraryScreen(),
-                    '/library/tracks': (context) => const LibraryTracks(),
-                    '/library/albums': (context) => const LibraryAlbums(),
-                    '/library/artists': (context) => const LibraryArtists(),
-                    '/library/playlists': (context) => const LibraryPlaylists(),
-                    '/library/history': (context) => const HistoryScreen(),
-                    '/search': (context) => const SearchScreen(),
-                    '/settings': (context) => const SettingsScreen(),
-                    '/downloads': (context) => const DownloadsScreen(),
-                  },
-                ))));
+                canRequestFocus: true,
+                child: const PlayerScreen(),
+              ),
+              onAnimationStatusChange: (status) {
+                if (status == AnimationStatus.dismissed) {
+                  return playerBarFocusNode.requestFocus();
+                }
+
+                _logger.fine('requesting focus to playerScreen');
+                playerScreenFocusNode.requestFocus();
+              },
+              body: Focus(
+                  focusNode: screenFocusNode,
+                  skipTraversal: true,
+                  canRequestFocus: false,
+                  child: _MainRouteNavigator(
+                    observers: [routeObserver],
+                    navigatorKey: navigatorKey,
+                    routes: {
+                      Navigator.defaultRouteName: (context) =>
+                          const HomeScreen(),
+                      '/podcasts': (context) => HomePageScreen(
+                            cacheable: true,
+                            channel: const DeezerChannel(
+                                target: 'channels/podcasts'),
+                            title: 'Podcasts'.i18n,
+                          ),
+                      '/library': (context) => const LibraryScreen(),
+                      '/library/tracks': (context) => const LibraryTracks(),
+                      '/library/albums': (context) => const LibraryAlbums(),
+                      '/library/artists': (context) => const LibraryArtists(),
+                      '/library/playlists': (context) =>
+                          const LibraryPlaylists(),
+                      '/library/history': (context) => const HistoryScreen(),
+                      '/search': (context) => const SearchScreen(),
+                      '/settings': (context) => const SettingsScreen(),
+                      '/downloads': (context) => const DownloadsScreen(),
+                    },
+                  )));
+        }));
  }
 }

 // hella simple null-safe reimplementation of custom_navigator, which is NOT null-safe
 class _MainRouteNavigator extends StatefulWidget {
  final Map<String, WidgetBuilder> routes;
-  final Map<String, RouteFactory>? customRoutes;
  final GlobalKey<NavigatorState> navigatorKey;
+  final List<NavigatorObserver> observers;
  const _MainRouteNavigator({
    Key? key,
    required this.routes,
-    this.customRoutes,
    required this.navigatorKey,
+    this.observers = const <NavigatorObserver>[],
  }) : super(key: key);

  @override
@ -630,6 +725,7 @@ class _MainRouteNavigatorState extends State<_MainRouteNavigator>
    with WidgetsBindingObserver {
  @override
  void initState() {
+    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

@ -658,6 +754,7 @@ class _MainRouteNavigatorState extends State<_MainRouteNavigator>
  @override
  Widget build(BuildContext context) {
    return Navigator(
+      observers: widget.observers,
      key: widget.navigatorKey,
      initialRoute: Navigator.defaultRouteName,
      onGenerateRoute: _onGenerateRoute,
@ -687,80 +784,155 @@ class _MainRouteNavigatorState extends State<_MainRouteNavigator>
  }
 }

+class ExtensibleNavigationRail extends StatefulWidget {
+  final List<NavigationRailDestination> destinations;
+  final int selectedIndex;
+  final void Function(int)? onDestinationSelected;
+  const ExtensibleNavigationRail({
+    super.key,
+    required this.destinations,
+    required this.selectedIndex,
+    this.onDestinationSelected,
+  });
+
+  @override
+  State<ExtensibleNavigationRail> createState() =>
+      _ExtensibleNavigationRailState();
+}
+
+class _ExtensibleNavigationRailState extends State<ExtensibleNavigationRail> {
+  bool _extended = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) => setState(() => _extended = true),
+      onExit: (_) => setState(() => _extended = false),
+      child: NavigationRail(
+        extended: _extended,
+        destinations: widget.destinations,
+        selectedIndex: widget.selectedIndex,
+        onDestinationSelected: widget.onDestinationSelected,
+      ),
+    );
+  }
+}
+
 // class FreezerDrawer extends StatelessWidget {
-//   const FreezerDrawer({Key? key}) : super(key: key);
-//
+//   final double? width;
+//   const FreezerDrawer({super.key, this.width});
+// 
 //   @override
 //   Widget build(BuildContext context) {
-//     return Drawer(
-//       child: ListView(children: [
+//     return NavigationDrawer(
+//       onDestinationSelected: print,
+//       children: [
 //         const DrawerHeader(child: FreezerTitle()),
+//         NavigationDrawerDestination(
+//             icon: const Icon(Icons.home_outlined),
+//             selectedIcon: const Icon(Icons.home),
+//             label: Text('Home'.i18n)),
 //         FreezerDrawerTile(
-//             title: 'Home'.i18n, icon: Icon(Icons.home), route: '/'),
-//         Divider(),
+//             title: 'Home'.i18n,
+//             icon: const Icon(Icons.home),
+//             route: Navigator.defaultRouteName),
+//         const Divider(),
 //         FreezerDrawerTile(
 //             title: 'Tracks'.i18n,
-//             icon: Icon(Icons.audiotrack),
+//             icon: const Icon(Icons.audiotrack),
 //             route: '/library/tracks'),
 //         FreezerDrawerTile(
 //             title: 'Albums'.i18n,
-//             icon: Icon(Icons.album),
+//             icon: const Icon(Icons.album),
 //             route: '/library/albums'),
 //         FreezerDrawerTile(
 //             title: 'Artists'.i18n,
-//             icon: Icon(Icons.recent_actors),
+//             icon: const Icon(Icons.recent_actors),
 //             route: '/library/artists'),
 //         FreezerDrawerTile(
 //             title: 'Playlists'.i18n,
-//             icon: Icon(Icons.playlist_play),
+//             icon: const Icon(Icons.playlist_play),
 //             route: '/library/playlists'),
-//         Divider(),
+//         const Divider(),
 //         FreezerDrawerTile(
 //             title: 'Downloads'.i18n,
-//             icon: Icon(Icons.download),
+//             icon: const Icon(Icons.download),
 //             route: '/downloads'),
 //         FreezerDrawerTile(
 //             title: 'History'.i18n,
-//             icon: Icon(Icons.history),
+//             icon: const Icon(Icons.history),
 //             route: '/library/history'),
 //         FreezerDrawerTile(
 //             title: 'Settings'.i18n,
-//             icon: Icon(Icons.settings),
+//             icon: const Icon(Icons.settings),
 //             route: '/settings'),
-//       ]),
+//       ],
 //     );
 //   }
 // }
-//
-// class FreezerDrawerTile extends StatelessWidget {
+// 
+// class FreezerDrawerTile extends StatefulWidget {
 //   final Widget? icon;
 //   final String title;
 //   final String route;
 //   const FreezerDrawerTile(
 //       {Key? key, this.icon, required this.title, required this.route})
 //       : super(key: key);
-//
+// 
+//   @override
+//   State<FreezerDrawerTile> createState() => _FreezerDrawerTileState();
+// }
+// 
+// class _FreezerDrawerTileState extends State<FreezerDrawerTile> with RouteAware {
+//   bool _isHighlighted = false;
+//   late final RouteObserver _routeObserver;
+// 
+//   @override
+//   void didChangeDependencies() {
+//     _routeObserver = MainScreen.of(context).routeObserver;
+//     _routeObserver.subscribe(this, ModalRoute.of(context)!);
+//     super.didChangeDependencies();
+//   }
+// 
+//   @override
+//   void dispose() {
+//     _routeObserver.unsubscribe(this);
+//     super.dispose();
+//   }
+// 
+//   @override
+//   void didPushNext() => _update();
+// 
+//   @override
+//   void didPopNext() => _update();
+// 
+//   void _update() {
+//     final highlighted = ModalRoute.of(context)?.settings.name == widget.route;
+// 
+//     if (highlighted != _isHighlighted) {
+//       setState(() => _isHighlighted = highlighted);
+//     }
+//   }
+// 
 //   @override
 //   Widget build(BuildContext context) {
-//     print(route);
 //     return Padding(
 //       padding: const EdgeInsets.symmetric(horizontal: 8.0),
 //       child: Material(
 //         borderRadius: BorderRadius.circular(8.0),
 //         clipBehavior: Clip.antiAlias,
-//         color: ModalRoute.of(context)?.settings.name == route
+//         color: _isHighlighted
 //             ? Theme.of(context).brightness == Brightness.dark
 //                 ? Colors.white12
 //                 : Colors.black12
 //             : null,
 //         child: ListTile(
-//             selected: ModalRoute.of(context)?.settings.name == route,
-//             leading: icon,
+//             selected: _isHighlighted,
+//             leading: widget.icon,
 //             visualDensity: VisualDensity.compact,
-//             title: Text(title),
+//             title: Text(widget.title),
 //             onTap: () {
-//               Navigator.of(context).pop();
-//               navigatorKey.currentState!.pushReplacementNamed(route);
+//               navigatorKey.currentState!.pushReplacementNamed(widget.route);
 //             }),
 //       ),
 //     );
--- a/lib/ui/player_bar.dart
+++ b/lib/ui/player_bar.dart
@ -13,7 +13,9 @@ class FancyScaffold extends StatefulWidget {
  final Widget bottomPanel;
  final double bottomPanelHeight;
  final Widget expandedPanel;
-  final Widget bottomNavigationBar;
+  final Widget? bottomNavigationBar;
+  final Widget? drawer;
+  final Widget? bodyDrawer;
  final Widget body;
  final void Function(AnimationStatus)? onAnimationStatusChange;

@ -21,9 +23,11 @@ class FancyScaffold extends StatefulWidget {
    required this.bottomPanel,
    required this.bottomPanelHeight,
    required this.expandedPanel,
-    required this.bottomNavigationBar,
    required this.body,
    this.onAnimationStatusChange,
+    this.bottomNavigationBar,
+    this.bodyDrawer,
+    this.drawer,
    super.key,
  });

@ -61,7 +65,8 @@ class FancyScaffoldState extends State<FancyScaffold>
  @override
  Widget build(BuildContext context) {
    final systemPadding = MediaQuery.of(context).viewPadding;
-    final defaultBottomPadding = 80.0 + systemPadding.bottom;
+    final defaultBottomPadding =
+        (widget.bottomNavigationBar == null ? 0 : 80.0) + systemPadding.bottom;
    final screenHeight = MediaQuery.of(context).size.height;
    final sizeAnimation = Tween<double>(
      begin: widget.bottomPanelHeight / MediaQuery.of(context).size.height,
@ -81,17 +86,24 @@ class FancyScaffoldState extends State<FancyScaffold>
        children: [
          Positioned.fill(
            child: Scaffold(
-              body: widget.body,
+              body: widget.bodyDrawer != null
+                  ? Row(children: [
+                      widget.bodyDrawer!,
+                      Expanded(child: widget.body)
+                    ])
+                  : widget.body,
+              drawer: widget.drawer,
              bottomNavigationBar: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(height: widget.bottomPanelHeight),
-                  SizeTransition(
-                    axisAlignment: -1.0,
-                    sizeFactor:
-                        Tween(begin: 1.0, end: 0.0).animate(sizeAnimation),
-                    child: widget.bottomNavigationBar,
-                  ),
+                  if (widget.bottomNavigationBar != null)
+                    SizeTransition(
+                      axisAlignment: -1.0,
+                      sizeFactor:
+                          Tween(begin: 1.0, end: 0.0).animate(sizeAnimation),
+                      child: widget.bottomNavigationBar,
+                    ),
                ],
              ),
            ),
--- a/pubspec.lock
+++ b/pubspec.lock
@ -754,9 +754,11 @@ packages:
  just_audio_media_kit:
    dependency: "direct main"
    description:
-      path: "../just_audio_media_kit"
-      relative: true
-    source: path
+      path: "."
+      ref: HEAD
+      resolved-ref: "8ccec63c67c0c206c6df3570e46f60b2a45dbb24"
+      url: "https://github.com/Pato05/just_audio_media_kit.git"
+    source: git
    version: "0.0.1"
  just_audio_platform_interface:
    dependency: transitive
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -93,6 +93,8 @@ dependencies:
    isar: ^3.1.0+1
    isar_flutter_libs: ^3.1.0+1
    flutter_background_service: ^5.0.1
+      #deezcryptor:
+      #path: deezcryptor/

 dev_dependencies:
    flutter_test: