💄 Improve UI for Mini audio player

lib/app.dart

@@ -1,8 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:varanasi_mobile_app/utils/constants/constants.dart';
 import 'package:varanasi_mobile_app/utils/router.dart';
 import 'package:varanasi_mobile_app/widgets/responsive_sizer.dart';
 
+import 'cubits/config/config_cubit.dart';
+import 'cubits/player/player_cubit.dart';
 import 'utils/theme.dart';
 
 class Varanasi extends StatelessWidget {
@@ -12,13 +15,25 @@ class Varanasi extends StatelessWidget {
   Widget build(BuildContext context) {
     return ResponsiveSizer(
       builder: (context, orientation, screenType) {
-        return MaterialApp.router(
-          title: AppStrings.appName,
-          theme: lightTheme,
-          darkTheme: darkTheme,
-          themeMode: ThemeMode.dark,
-          routerConfig: routerConfig,
-          debugShowCheckedModeBanner: false,
+        return MultiBlocProvider(
+          providers: [
+            BlocProvider(
+              lazy: false,
+              create: (context) => ConfigCubit()..initialise(),
+            ),
+            BlocProvider(
+              lazy: false,
+              create: (context) => MediaPlayerCubit()..init(),
+            ),
+          ],
+          child: MaterialApp.router(
+            title: AppStrings.appName,
+            theme: lightTheme,
+            darkTheme: darkTheme,
+            themeMode: ThemeMode.dark,
+            routerConfig: routerConfig,
+            debugShowCheckedModeBanner: false,
+          ),
         );
       },
     );

lib/cubits/config/config_cubit.dart

@@ -1,6 +1,8 @@
 import 'package:bloc/bloc.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:equatable/equatable.dart';
 import 'package:hive/hive.dart';
+import 'package:palette_generator/palette_generator.dart';
 import 'package:varanasi_mobile_app/models/app_config.dart';
 import 'package:varanasi_mobile_app/models/sort_type.dart';
 import 'package:varanasi_mobile_app/utils/logger.dart';
@@ -9,11 +11,14 @@ part 'config_state.dart';
 
 class ConfigCubit extends Cubit<ConfigState> {
   late final Box<AppConfig> _configBox;
+  final Map<String, CachedNetworkImageProvider> _imageProviderCache = {};
+  late final Expando<PaletteGenerator> _paletteGeneratorExpando;
   Logger logger = Logger.instance;
 
   ConfigCubit() : super(ConfigInitial());
 
   void initialise() async {
+    _paletteGeneratorExpando = Expando<PaletteGenerator>();
     _configBox = await Hive.openBox<AppConfig>('config');
     if (_configBox.isEmpty) {
       logger.i('Config box is empty');
@@ -38,4 +43,29 @@ class ConfigCubit extends Cubit<ConfigState> {
       emit(ConfigLoaded(config: config));
     }
   }
+
+  PaletteGenerator? maybeGetPaletteGenerator(String mediaUrl) {
+    final provider = _imageProviderCache[mediaUrl];
+    if (provider == null) return null;
+    return _paletteGeneratorExpando[provider];
+  }
+
+  CachedNetworkImageProvider getProvider(String mediaUrl) {
+    return _imageProviderCache[mediaUrl] ??=
+        CachedNetworkImageProvider(mediaUrl);
+  }
+
+  Future<PaletteGenerator?> generatePalleteGenerator(String mediaUrl) async {
+    try {
+      final exists = maybeGetPaletteGenerator(mediaUrl);
+      if (exists != null) return exists;
+      final provider = getProvider(mediaUrl);
+      final paletteGenerator =
+          await PaletteGenerator.fromImageProvider(provider);
+      _paletteGeneratorExpando[provider] = paletteGenerator;
+      return paletteGenerator;
+    } catch (e) {
+      return null;
+    }
+  }
 }

lib/features/library/cubit/library_cubit.dart

@@ -1,15 +1,15 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:palette_generator/palette_generator.dart';
+import 'package:varanasi_mobile_app/cubits/config/config_cubit.dart';
 import 'package:varanasi_mobile_app/features/library/data/library_repository.dart';
 import 'package:varanasi_mobile_app/models/media_playlist.dart';
 import 'package:varanasi_mobile_app/models/playable_item.dart';
 import 'package:varanasi_mobile_app/models/sort_type.dart';
 import 'package:varanasi_mobile_app/utils/configs.dart';
 import 'package:varanasi_mobile_app/utils/extensions/extensions.dart';
-import 'package:varanasi_mobile_app/utils/generate_pallette.dart';
+import 'package:varanasi_mobile_app/utils/helpers/get_app_context.dart';
 import 'package:varanasi_mobile_app/utils/logger.dart';
 
 part 'library_state.dart';
@@ -27,8 +27,10 @@ class LibraryCubit extends Cubit<LibraryState> {
       if (link == appConfig.placeholderImageLink) {
         link = media.artworkUrl!;
       }
-      final image = CachedNetworkImageProvider(link);
-      final colorPalette = await generateColorPalette(imageProvider: image);
+      if (!appContext.mounted) return;
+      final configCubit = appContext.read<ConfigCubit>();
+      final colorPalette = await configCubit.generatePalleteGenerator(link);
+      final image = configCubit.getProvider(link);
       emit(LibraryLoaded(
         playlist,
         colorPalette!,

lib/features/library/ui/library_search_page.dart

@@ -73,7 +73,6 @@ class LibrarySearchPage extends HookWidget {
           } else {
             context.readMediaPlayerCubit.playFromMediaPlaylist(playlist);
           }
-          // context.go('/player');
         },
       ),
     );

lib/utils/router.dart

@@ -1,7 +1,5 @@
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
-import 'package:varanasi_mobile_app/cubits/config/config_cubit.dart';
-import 'package:varanasi_mobile_app/cubits/player/player_cubit.dart';
 import 'package:varanasi_mobile_app/features/home/bloc/home_bloc.dart';
 import 'package:varanasi_mobile_app/features/home/ui/home_screen.dart';
 import 'package:varanasi_mobile_app/features/library/cubit/library_cubit.dart';
@@ -67,19 +65,7 @@ final routerConfig = GoRouter(
         ),
       ],
       builder: (context, state, navigationShell) {
-        return MultiBlocProvider(
-          providers: [
-            BlocProvider(
-              lazy: false,
-              create: (context) => ConfigCubit()..initialise(),
-            ),
-            BlocProvider(
-              lazy: false,
-              create: (context) => MediaPlayerCubit()..init(),
-            ),
-          ],
-          child: PageWithNavbar(child: navigationShell),
-        );
+        return PageWithNavbar(child: navigationShell);
       },
     ),
   ],

lib/widgets/animated_overflow_text.dart

@@ -223,6 +223,7 @@ class AnimatedText extends StatelessWidget {
       showFadingOnlyWhenScrolling: true,
       fadingEdgeStartFraction: 0.1,
       fadingEdgeEndFraction: 0.1,
+      style: style?.copyWith(fontSize: maxFontSize),
     );
   }
 

lib/widgets/page_with_navbar.dart

@@ -1,6 +1,8 @@
+import 'package:another_flushbar/flushbar_helper.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:varanasi_mobile_app/widgets/player/mini_player.dart';
+
+import 'player/mini_player.dart';
 
 class PageWithNavbar extends StatelessWidget {
   final StatefulNavigationShell child;
@@ -9,8 +11,42 @@ class PageWithNavbar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: child,
-      bottomNavigationBar: const MiniPlayer(),
+      body: Stack(
+        children: [
+          Positioned.fill(child: child),
+          const Positioned(
+            bottom: 0,
+            right: 8,
+            left: 8,
+            height: 56,
+            child: MiniPlayer(),
+          ),
+        ],
+      ),
+      bottomNavigationBar: NavigationBar(
+        surfaceTintColor: Colors.transparent,
+        selectedIndex: child.currentIndex,
+        onDestinationSelected: (value) {
+          FlushbarHelper.createError(
+            message: 'Coming soon!',
+            duration: const Duration(seconds: 1),
+          ).show(context);
+        },
+        destinations: const [
+          NavigationDestination(
+            icon: Icon(Icons.home_filled),
+            label: 'Home',
+          ),
+          NavigationDestination(
+            icon: Icon(Icons.search_rounded),
+            label: 'Search',
+          ),
+          NavigationDestination(
+            icon: Icon(Icons.library_music_outlined),
+            label: 'Library',
+          ),
+        ],
+      ),
     );
   }
 }

lib/widgets/play_pause_button.dart

@@ -11,11 +11,13 @@ class PlayPauseMediaButton extends StatefulHookWidget {
     this.backgroundColor,
     this.foregroundColor,
     this.variant = ButtonVariant.floatingactionbutton,
+    this.size,
   });
   final ButtonVariant variant;
   final VoidCallback onPressed;
   final bool isPlaying;
   final Color? backgroundColor, foregroundColor;
+  final double? size;
 
   @override
   State<PlayPauseMediaButton> createState() => _PlayPauseMediaButtonState();
@@ -54,6 +56,7 @@ class _PlayPauseMediaButtonState extends State<PlayPauseMediaButton>
       onPressed: widget.onPressed,
       shape: const CircleBorder(),
       child: AnimatedIcon(
+        size: widget.size,
         icon: AnimatedIcons.play_pause,
         progress: _controller,
       ),
@@ -63,6 +66,8 @@ class _PlayPauseMediaButtonState extends State<PlayPauseMediaButton>
   Widget _buildIconButton() {
     return IconButton(
       onPressed: widget.onPressed,
+      color: widget.foregroundColor,
+      iconSize: widget.size,
       icon: AnimatedIcon(
         icon: AnimatedIcons.play_pause,
         progress: _controller,