From 3db28f43b4200d03f7758e8c395d8430e0f89333 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 8 Jan 2023 14:18:29 +0600 Subject: [PATCH] fix: lyrics modal sheet out of safe area so use 80% of screen height instead of full --- lib/pages/lyrics/genius_lyrics.dart | 45 +++---- lib/pages/lyrics/lyrics.dart | 13 +- lib/pages/lyrics/synced_lyrics.dart | 180 ++++++++++++++-------------- lib/pages/player/player.dart | 12 +- 4 files changed, 128 insertions(+), 122 deletions(-) diff --git a/lib/pages/lyrics/genius_lyrics.dart b/lib/pages/lyrics/genius_lyrics.dart index e19cfb77c..b8074c9b0 100644 --- a/lib/pages/lyrics/genius_lyrics.dart +++ b/lib/pages/lyrics/genius_lyrics.dart @@ -1,6 +1,5 @@ import 'package:fl_query_hooks/fl_query_hooks.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:palette_generator/palette_generator.dart'; import 'package:spotify/spotify.dart'; @@ -15,8 +14,10 @@ import 'package:tuple/tuple.dart'; class GeniusLyrics extends HookConsumerWidget { final PaletteColor palette; + final bool? isModal; const GeniusLyrics({ required this.palette, + this.isModal, Key? key, }) : super(key: key); @@ -36,27 +37,29 @@ class GeniusLyrics extends HookConsumerWidget { return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Center( - child: Text( - playback.track?.name ?? "", - style: breakpoint >= Breakpoints.md - ? textTheme.headline3 - : textTheme.headline4?.copyWith( - fontSize: 25, - color: palette.titleTextColor, - ), - ), - ), - Center( - child: Text( - TypeConversionUtils.artists_X_String( - playback.track?.artists ?? []), - style: (breakpoint >= Breakpoints.md - ? textTheme.headline5 - : textTheme.headline6) - ?.copyWith(color: palette.bodyTextColor), + if (isModal != true) ...[ + Center( + child: Text( + playback.track?.name ?? "", + style: breakpoint >= Breakpoints.md + ? textTheme.headline3 + : textTheme.headline4?.copyWith( + fontSize: 25, + color: palette.titleTextColor, + ), + ), ), - ), + Center( + child: Text( + TypeConversionUtils.artists_X_String( + playback.track?.artists ?? []), + style: (breakpoint >= Breakpoints.md + ? textTheme.headline5 + : textTheme.headline6) + ?.copyWith(color: palette.bodyTextColor), + ), + ) + ], Expanded( child: SingleChildScrollView( child: Center( diff --git a/lib/pages/lyrics/lyrics.dart b/lib/pages/lyrics/lyrics.dart index f2a04b271..3459d817b 100644 --- a/lib/pages/lyrics/lyrics.dart +++ b/lib/pages/lyrics/lyrics.dart @@ -40,8 +40,8 @@ class LyricsPage extends HookConsumerWidget { ); Widget body = [ - SyncedLyrics(palette: palette), - GeniusLyrics(palette: palette), + SyncedLyrics(palette: palette, isModal: isModal), + GeniusLyrics(palette: palette, isModal: isModal), ][index.value]; final tabbar = PreferredSize( @@ -70,11 +70,12 @@ class LyricsPage extends HookConsumerWidget { return SafeArea( child: Container( clipBehavior: Clip.hardEdge, - decoration: BoxDecoration( - color: Colors.black45, - borderRadius: BorderRadius.circular(8), + decoration: const BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(10), + topRight: Radius.circular(10), + ), ), - margin: const EdgeInsets.all(16), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50), child: Column( diff --git a/lib/pages/lyrics/synced_lyrics.dart b/lib/pages/lyrics/synced_lyrics.dart index add225548..0bd899090 100644 --- a/lib/pages/lyrics/synced_lyrics.dart +++ b/lib/pages/lyrics/synced_lyrics.dart @@ -26,8 +26,11 @@ final lyricDelayState = StateProvider( class SyncedLyrics extends HookConsumerWidget { final PaletteColor palette; + final bool? isModal; + const SyncedLyrics({ required this.palette, + this.isModal, Key? key, }) : super(key: key); @@ -70,107 +73,102 @@ class SyncedLyrics extends HookConsumerWidget { : textTheme.headline4?.copyWith(fontSize: 25)) ?.copyWith(color: palette.titleTextColor); - return Column( + return Stack( children: [ - SizedBox( - height: breakpoint >= Breakpoints.md ? 50 : 40, - child: Material( - type: MaterialType.transparency, - textStyle: PlatformTheme.of(context).textTheme!.body!, - child: Stack( - children: [ - Center( - child: SpotubeMarqueeText( - text: playback.track?.name ?? "Not Playing", - style: headlineTextStyle, - isHovering: true, - ), + Column( + children: [ + if (isModal != true) + Center( + child: SpotubeMarqueeText( + text: playback.track?.name ?? "Not Playing", + style: headlineTextStyle, + isHovering: true, ), - Positioned( - top: 10, - right: 10, - child: Align( - alignment: Alignment.centerRight, - child: PlatformFilledButton( - child: const Icon( - SpotubeIcons.clock, - size: 16, - ), - onPressed: () async { - final delay = await showPlatformAlertDialog( - context, - builder: (context) => const LyricDelayAdjustDialog(), - ); - if (delay != null) { - ref.read(lyricDelayState.notifier).state = delay; - } - }, - ), - ), + ), + if (isModal != true) + Center( + child: Text( + TypeConversionUtils.artists_X_String( + playback.track?.artists ?? []), + style: breakpoint >= Breakpoints.md + ? textTheme.headline5 + : textTheme.headline6, ), - ], - ), - ), - ), - Center( - child: Text( - TypeConversionUtils.artists_X_String( - playback.track?.artists ?? []), - style: breakpoint >= Breakpoints.md - ? textTheme.headline5 - : textTheme.headline6, - ), - ), - if (lyricValue != null && lyricValue.lyrics.isNotEmpty) - Expanded( - child: ListView.builder( - controller: controller, - itemCount: lyricValue.lyrics.length, - itemBuilder: (context, index) { - final lyricSlice = lyricValue.lyrics[index]; - final isActive = lyricSlice.time.inSeconds == currentTime; - - if (isActive) { - controller.scrollToIndex( - index, - preferPosition: AutoScrollPosition.middle, - ); - } - return AutoScrollTag( - key: ValueKey(index), - index: index, + ), + if (lyricValue != null && lyricValue.lyrics.isNotEmpty) + Expanded( + child: ListView.builder( controller: controller, - child: lyricSlice.text.isEmpty - ? Container() - : Center( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: AnimatedDefaultTextStyle( - duration: const Duration(milliseconds: 250), - style: TextStyle( - color: isActive - ? Colors.white - : palette.bodyTextColor, - fontWeight: isActive - ? FontWeight.bold - : FontWeight.normal, - fontSize: isActive ? 30 : 26, - ), - child: Text( - lyricSlice.text, - maxLines: 2, - textAlign: TextAlign.center, + itemCount: lyricValue.lyrics.length, + itemBuilder: (context, index) { + final lyricSlice = lyricValue.lyrics[index]; + final isActive = lyricSlice.time.inSeconds == currentTime; + + if (isActive) { + controller.scrollToIndex( + index, + preferPosition: AutoScrollPosition.middle, + ); + } + return AutoScrollTag( + key: ValueKey(index), + index: index, + controller: controller, + child: lyricSlice.text.isEmpty + ? Container() + : Center( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: AnimatedDefaultTextStyle( + duration: const Duration(milliseconds: 250), + style: TextStyle( + color: isActive + ? Colors.white + : palette.bodyTextColor, + fontWeight: isActive + ? FontWeight.bold + : FontWeight.normal, + fontSize: isActive ? 30 : 26, + ), + child: Text( + lyricSlice.text, + maxLines: 2, + textAlign: TextAlign.center, + ), + ), ), ), - ), - ), + ); + }, + ), + ), + if (playback.track != null && + (lyricValue == null || lyricValue.lyrics.isEmpty == true)) + const Expanded(child: ShimmerLyrics()), + ], + ), + Positioned( + top: 10, + right: 10, + child: Align( + alignment: Alignment.centerRight, + child: PlatformFilledButton( + child: const Icon( + SpotubeIcons.clock, + size: 16, + ), + onPressed: () async { + final delay = await showPlatformAlertDialog( + context, + builder: (context) => const LyricDelayAdjustDialog(), ); + if (delay != null) { + ref.read(lyricDelayState.notifier).state = delay; + } }, ), ), - if (playback.track != null && - (lyricValue == null || lyricValue.lyrics.isEmpty == true)) - const Expanded(child: ShimmerLyrics()), + ), ], ); } diff --git a/lib/pages/player/player.dart b/lib/pages/player/player.dart index ba3c785e5..68093a41b 100644 --- a/lib/pages/player/player.dart +++ b/lib/pages/player/player.dart @@ -201,13 +201,17 @@ class PlayerView extends HookConsumerWidget { isDismissible: true, enableDrag: true, isScrollControlled: true, - backgroundColor: Colors.transparent, + backgroundColor: Colors.black38, barrierColor: Colors.black12, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20), + topRight: Radius.circular(20), + ), ), constraints: BoxConstraints( - maxHeight: MediaQuery.of(context).size.height, + maxHeight: + MediaQuery.of(context).size.height * 0.8, ), builder: (context) => const LyricsPage(isModal: true),