✨ Updated UI for media details page

devaryakjha · Oct 23, 2023 · c0347b0 · c0347b0
1 parent cdb42d8
commit c0347b0
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 23 deletions.
diff --git a/assets/icon/shuffle.svg b/assets/icon/shuffle.svg
diff --git a/lib/features/library/ui/library_widgets/library_app_bar.dart b/lib/features/library/ui/library_widgets/library_app_bar.dart
@@ -42,9 +42,20 @@ class LibraryAppBar extends StatelessWidget {
           ),
           child: FlexibleSpaceBar(
             centerTitle: true,
-            title: state.showTitleInAppBar
-                ? Text(state.title, style: context.textTheme.headlineSmall)
-                : null,
+            title: AnimatedCrossFade(
+              crossFadeState: state.showTitleInAppBar
+                  ? CrossFadeState.showSecond
+                  : CrossFadeState.showFirst,
+              firstChild: const SizedBox.shrink(),
+              secondChild: Text(
+                state.title,
+                style: context.textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  letterSpacing: 0.5,
+                ),
+              ),
+              duration: const Duration(milliseconds: 100),
+            ),
             collapseMode: CollapseMode.pin,
             background: AnimatedContainer(
               duration: kThemeAnimationDuration,

diff --git a/lib/features/library/ui/library_widgets/page.dart b/lib/features/library/ui/library_widgets/page.dart
@@ -7,11 +7,13 @@ import 'package:varanasi_mobile_app/cubits/player/player_cubit.dart';
 import 'package:varanasi_mobile_app/features/library/cubit/library_cubit.dart';
 import 'package:varanasi_mobile_app/features/library/ui/library_widgets/library_app_bar.dart';
 import 'package:varanasi_mobile_app/models/playable_item.dart';
+import 'package:varanasi_mobile_app/utils/extensions/extensions.dart';
 import 'package:varanasi_mobile_app/utils/extensions/media_query.dart';
+import 'package:varanasi_mobile_app/widgets/add_to_library.dart';
 import 'package:varanasi_mobile_app/widgets/download_button.dart';
 import 'package:varanasi_mobile_app/widgets/media_list.dart';
 import 'package:varanasi_mobile_app/widgets/play_pause_button.dart';
-import 'package:varanasi_mobile_app/widgets/typography.dart';
+import 'package:varanasi_mobile_app/widgets/player/full_screen_player/shuffle_mode_toggle.dart';
 
 class LibraryContent extends StatefulHookWidget {
   /// The source of the library content
@@ -107,20 +109,31 @@ class _LibraryContentState extends State<LibraryContent> {
                   LibraryAppBar(state: state, padding: padding),
                   SliverToBoxAdapter(
                     child: Padding(
-                      key: titleKey,
                       padding: const EdgeInsets.symmetric(
                         horizontal: 16,
                         vertical: 16,
                       ).copyWith(right: 84),
-                      child: Row(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                          Expanded(
-                            child: Typography(
-                              state.title,
-                              secondary: state.subtitle,
+                          Text(
+                            state.title,
+                            style: context.textTheme.bodyMedium?.copyWith(
+                              fontWeight: FontWeight.bold,
+                              letterSpacing: 0.5,
                             ),
                           ),
-                          DownloadPlaylist(playlist: state.playlist),
+                          Text(state.subtitle),
+                          Row(
+                            key: titleKey,
+                            children: [
+                              AddToLibrary(state.playlist),
+                              DownloadPlaylist(playlist: state.playlist),
+                              const Spacer(),
+                              const ShuffleModeToggle(iconSize: 24),
+                            ],
+                          ),
                         ],
                       ),
                     ),
@@ -166,6 +179,7 @@ class _LibraryContentState extends State<LibraryContent> {
                     );
                   },
                   isPlaying: isThisPlaylistPlaying,
+                  size: 36,
                 ),
               )
             ],

diff --git a/lib/features/user-library/cubit/user_library_cubit.dart b/lib/features/user-library/cubit/user_library_cubit.dart
@@ -47,4 +47,11 @@ class UserLibraryCubit extends AppCubit<UserLibraryState> {
     final library = _repository.getLibraries();
     emit(UserLibraryLoaded(library: library));
   }
+
+  Future<void> removeFromLibrary(MediaPlaylist playlist) async {
+    _repository.deleteLibrary(playlist.toUserLibrary());
+    final library = _repository.getLibraries();
+    emit(UserLibraryLoaded(library: library));
+    AppSnackbar.show("Removed from library");
+  }
 }
diff --git a/lib/features/user-library/cubit/user_library_state.dart b/lib/features/user-library/cubit/user_library_state.dart
@@ -32,4 +32,10 @@ class UserLibraryLoaded extends UserLibraryState {
         (library) => library is Favorite,
         orElse: () => const Favorite.empty(),
       ) as Favorite;
+
+  bool get isEmpty => library.isEmpty;
+
+  bool isAdded(MediaPlaylist playlist) {
+    return library.any((a) => playlist.id == a.id);
+  }
 }
diff --git a/lib/gen/assets.gen.dart b/lib/gen/assets.gen.dart
diff --git a/lib/widgets/add_to_library.dart b/lib/widgets/add_to_library.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:varanasi_mobile_app/features/user-library/cubit/user_library_cubit.dart';
+import 'package:varanasi_mobile_app/models/media_playlist.dart';
+
+class AddToLibrary extends StatelessWidget {
+  final MediaPlaylist playlist;
+  const AddToLibrary(this.playlist, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<UserLibraryCubit, UserLibraryState>(
+      builder: (context, state) {
+        if (state is! UserLibraryLoaded) return const SizedBox.shrink();
+        final isAdded = state.isAdded(playlist);
+        AnimatedIcons.add_event;
+        return IconButton(
+          onPressed: () {
+            final cubit = context.read<UserLibraryCubit>();
+            if (isAdded) {
+              cubit.removeFromLibrary(playlist);
+            } else {
+              cubit.addToLibrary(playlist);
+            }
+          },
+          icon: isAdded
+              ? const Icon(Icons.check_circle_rounded)
+              : const Icon(Icons.add_circle_outline_rounded),
+          iconSize: 30,
+        );
+      },
+    );
+  }
+}
diff --git a/lib/widgets/download_button.dart b/lib/widgets/download_button.dart
@@ -97,8 +97,8 @@ class DownloadPlaylist extends StatelessWidget {
               downloading: downloading,
               downloaded: downloaded,
               progress: progress,
+              dimension: 26,
             ),
-            iconSize: 24,
           );
         });
   }
@@ -120,7 +120,7 @@ class DownloadStatus extends StatelessWidget {
   final double dimension;
   final bool hideStopIconOnIos;
 
-  double get iconSize => dimension * 0.6;
+  double get iconSize => dimension * 0.8;
 
   @override
   Widget build(BuildContext context) {

diff --git a/lib/widgets/player/full_screen_player/full_screen_player.dart b/lib/widgets/player/full_screen_player/full_screen_player.dart
@@ -94,7 +94,7 @@ class _PlayerState extends State<Player> {
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
-                ShuffleModeToggle(audioHandler: audioHandler),
+                const ShuffleModeToggle(),
                 SkipToPrevious(queueState: queueState),
                 PlayPauseMediaButton(
                   backgroundColor: Colors.white,

diff --git a/lib/widgets/player/full_screen_player/shuffle_mode_toggle.dart b/lib/widgets/player/full_screen_player/shuffle_mode_toggle.dart
@@ -2,21 +2,25 @@ import 'package:audio_service/audio_service.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:varanasi_mobile_app/cubits/player/player_cubit.dart';
+import 'package:varanasi_mobile_app/gen/assets.gen.dart';
 import 'package:varanasi_mobile_app/utils/extensions/theme.dart';
-import 'package:varanasi_mobile_app/utils/player/audio_handler_impl.dart';
 
 class ShuffleModeToggle extends StatelessWidget {
   const ShuffleModeToggle({
     super.key,
-    required this.audioHandler,
+    this.iconSize = 32,
   });
 
-  final AudioHandlerImpl audioHandler;
+  final double iconSize;
+
+  double get smallSize => iconSize * 0.18;
 
   @override
   Widget build(BuildContext context) {
+    final audioHandler = context.read<MediaPlayerCubit>().audioHandler;
     return StreamBuilder(
       stream: audioHandler.playbackState.map((event) => event.shuffleMode),
+      initialData: AudioServiceShuffleMode.none,
       builder: (context, snapshot) {
         final shuffleEnabled =
             ![null, AudioServiceShuffleMode.none].contains(snapshot.data);
@@ -35,14 +39,16 @@ class ShuffleModeToggle extends StatelessWidget {
           icon: Badge(
             alignment: Alignment.bottomCenter,
             isLabelVisible: shuffleEnabled,
-            backgroundColor: context.colorScheme.primary,
-            child: const Padding(
-              padding: EdgeInsets.symmetric(vertical: 4.0),
-              child: Icon(Icons.shuffle),
+            smallSize: smallSize,
+            child: Assets.icon.shuffle.svg(
+              width: iconSize,
+              height: iconSize,
+              color:
+                  shuffleEnabled ? context.colorScheme.primary : Colors.white,
             ),
           ),
           color: shuffleEnabled ? context.colorScheme.primary : null,
-          iconSize: 32,
+          iconSize: iconSize,
         );
       },
     );