From b5415f442a839671fbb8fd3cb5f2d50b8ad56850 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 8 Jan 2023 13:20:07 +0600 Subject: [PATCH] refactor(lyrics): remove lyric element from mobile navbar and open lyric sheet in mobile player view --- lib/collections/side_bar_tiles.dart | 7 +++ lib/collections/spotube_icons.dart | 3 + .../root/spotube_navigation_bar.dart | 16 ++---- lib/components/shared/playbutton_card.dart | 1 + lib/pages/lyrics/lyrics.dart | 56 +++++++++++++++++-- lib/pages/player/player.dart | 21 ++++++- 6 files changed, 85 insertions(+), 19 deletions(-) diff --git a/lib/collections/side_bar_tiles.dart b/lib/collections/side_bar_tiles.dart index 80541dab..9115b0d1 100644 --- a/lib/collections/side_bar_tiles.dart +++ b/lib/collections/side_bar_tiles.dart @@ -13,3 +13,10 @@ List sidebarTileList = [ SideBarTiles(icon: SpotubeIcons.library, title: "Library"), SideBarTiles(icon: SpotubeIcons.music, title: "Lyrics") ]; + +List navbarTileList = [ + SideBarTiles(icon: SpotubeIcons.home, title: "Browse"), + SideBarTiles(icon: SpotubeIcons.search, title: "Search"), + SideBarTiles(icon: SpotubeIcons.library, title: "Library"), + SideBarTiles(icon: SpotubeIcons.settings, title: "Settings") +]; diff --git a/lib/collections/spotube_icons.dart b/lib/collections/spotube_icons.dart index 21110c88..7fe227ee 100644 --- a/lib/collections/spotube_icons.dart +++ b/lib/collections/spotube_icons.dart @@ -50,6 +50,7 @@ abstract class SpotubeIcons { static const fastForward = FeatherIcons.fastForward; static const angleRight = FeatherIcons.chevronRight; static const angleLeft = FeatherIcons.chevronLeft; + static const angleDown = FeatherIcons.chevronDown; static const shoppingBag = FeatherIcons.shoppingBag; static const screenSearch = Icons.screen_search_desktop_outlined; static const save = FeatherIcons.save; @@ -58,4 +59,6 @@ abstract class SpotubeIcons { static const update = FeatherIcons.refreshCcw; static const info = FeatherIcons.info; static const userRemove = FeatherIcons.userX; + static const close = FeatherIcons.x; + static const minimize = FeatherIcons.minimize2; } diff --git a/lib/components/root/spotube_navigation_bar.dart b/lib/components/root/spotube_navigation_bar.dart index 7ca5dd85..bb874401 100644 --- a/lib/components/root/spotube_navigation_bar.dart +++ b/lib/components/root/spotube_navigation_bar.dart @@ -3,7 +3,6 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:platform_ui/platform_ui.dart'; import 'package:spotube/collections/side_bar_tiles.dart'; -import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/components/root/sidebar.dart'; import 'package:spotube/hooks/use_breakpoints.dart'; import 'package:spotube/provider/downloader_provider.dart'; @@ -40,7 +39,7 @@ class SpotubeNavigationBar extends HookConsumerWidget { layoutMode == LayoutMode.adaptive)) return const SizedBox(); return PlatformBottomNavigationBar( items: [ - ...sidebarTileList.map( + ...navbarTileList.map( (e) { return PlatformBottomNavigationBarItem( icon: e.icon, @@ -48,20 +47,15 @@ class SpotubeNavigationBar extends HookConsumerWidget { ); }, ), - const PlatformBottomNavigationBarItem( - icon: SpotubeIcons.settings, - label: "Settings", - ) ], selectedIndex: insideSelectedIndex.value, onSelectedIndexChanged: (i) { - if (i == 4) { - insideSelectedIndex.value = 4; + insideSelectedIndex.value = i; + if (navbarTileList[i].title == "Settings") { Sidebar.goToSettings(context); - } else { - insideSelectedIndex.value = i; - onSelectedIndexChanged(i); + return; } + onSelectedIndexChanged(i); }, ); } diff --git a/lib/components/shared/playbutton_card.dart b/lib/components/shared/playbutton_card.dart index c67447d5..40d1f5b2 100644 --- a/lib/components/shared/playbutton_card.dart +++ b/lib/components/shared/playbutton_card.dart @@ -193,6 +193,7 @@ class PlaybuttonCard extends HookWidget { ), const Spacer(), playButton, + const SizedBox(width: 10), ], ); diff --git a/lib/pages/lyrics/lyrics.dart b/lib/pages/lyrics/lyrics.dart index 536a8fcd..f2a04b27 100644 --- a/lib/pages/lyrics/lyrics.dart +++ b/lib/pages/lyrics/lyrics.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:platform_ui/platform_ui.dart'; +import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/components/shared/page_window_title_bar.dart'; import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/hooks/use_custom_status_bar_color.dart'; @@ -15,7 +16,8 @@ import 'package:spotube/utils/platform.dart'; import 'package:spotube/utils/type_conversion_utils.dart'; class LyricsPage extends HookConsumerWidget { - const LyricsPage({Key? key}) : super(key: key); + final bool isModal; + const LyricsPage({Key? key, this.isModal = false}) : super(key: key); @override Widget build(BuildContext context, ref) { @@ -37,13 +39,13 @@ class LyricsPage extends HookConsumerWidget { noSetBGColor: true, ); - final body = [ + Widget body = [ SyncedLyrics(palette: palette), GeniusLyrics(palette: palette), ][index.value]; final tabbar = PreferredSize( - preferredSize: const Size.fromHeight(40), + preferredSize: const Size.fromHeight(50), child: PlatformTabBar( isNavigational: PlatformProperty.only(linux: true, other: false), selectedIndex: index.value, @@ -63,10 +65,53 @@ class LyricsPage extends HookConsumerWidget { ], ), ); + + if (isModal) { + return SafeArea( + child: Container( + clipBehavior: Clip.hardEdge, + decoration: BoxDecoration( + color: Colors.black45, + borderRadius: BorderRadius.circular(8), + ), + margin: const EdgeInsets.all(16), + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50), + child: Column( + children: [ + const SizedBox(height: 5), + Container( + height: 7, + width: 150, + decoration: BoxDecoration( + color: palette.titleTextColor, + borderRadius: BorderRadius.circular(10), + ), + ), + PlatformAppBar( + title: tabbar, + backgroundColor: Colors.transparent, + automaticallyImplyLeading: false, + toolbarOpacity: platform == TargetPlatform.iOS ? 0 : 1, + actions: [ + PlatformIconButton( + icon: const Icon(SpotubeIcons.minimize), + onPressed: () => Navigator.of(context).pop(), + ), + const SizedBox(width: 5), + ], + ), + Expanded(child: body), + ], + ), + ), + ), + ); + } return PlatformScaffold( extendBodyBehindAppBar: true, appBar: !kIsMacOS - ? (platform != TargetPlatform.windows + ? (platform != TargetPlatform.windows && !isModal ? PageWindowTitleBar( toolbarOpacity: 0, backgroundColor: Colors.transparent, @@ -81,10 +126,11 @@ class LyricsPage extends HookConsumerWidget { image: UniversalImage.imageProvider(albumArt), fit: BoxFit.cover, ), + borderRadius: BorderRadius.circular(8), ), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), - child: Container( + child: ColoredBox( color: palette.color.withOpacity(.7), child: SafeArea(child: body), ), diff --git a/lib/pages/player/player.dart b/lib/pages/player/player.dart index 3c9f2fd9..ba3c785e 100644 --- a/lib/pages/player/player.dart +++ b/lib/pages/player/player.dart @@ -16,6 +16,7 @@ import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/hooks/use_breakpoints.dart'; import 'package:spotube/hooks/use_custom_status_bar_color.dart'; import 'package:spotube/hooks/use_palette_color.dart'; +import 'package:spotube/pages/lyrics/lyrics.dart'; import 'package:spotube/provider/playback_provider.dart'; import 'package:spotube/provider/user_preferences_provider.dart'; import 'package:spotube/utils/type_conversion_utils.dart'; @@ -193,10 +194,24 @@ class PlayerView extends HookConsumerWidget { extraActions: [ PlatformIconButton( tooltip: "Open Lyrics", - icon: const Icon(SpotubeIcons.lyrics), + icon: const Icon(SpotubeIcons.music), onPressed: () { - GoRouter.of(context).pop(); - GoRouter.of(context).go('/lyrics'); + showModalBottomSheet( + context: context, + isDismissible: true, + enableDrag: true, + isScrollControlled: true, + backgroundColor: Colors.transparent, + barrierColor: Colors.black12, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + ), + constraints: BoxConstraints( + maxHeight: MediaQuery.of(context).size.height, + ), + builder: (context) => + const LyricsPage(isModal: true), + ); }, ) ],