Skip to content

Commit

Permalink
fix: lyrics modal sheet out of safe area so use 80% of screen height …
Browse files Browse the repository at this point in the history 
…instead of full
  • Loading branch information
@KRTirtho
KRTirtho committed Jan 8, 2023
1 parent b5415f4 commit 3db28f4
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 122 deletions.
45 changes: 24 additions & 21 deletions lib/pages/lyrics/genius_lyrics.dart
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);

Expand All @@ -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<Artist>(
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<Artist>(
playback.track?.artists ?? []),
style: (breakpoint >= Breakpoints.md
? textTheme.headline5
: textTheme.headline6)
?.copyWith(color: palette.bodyTextColor),
),
)
],
Expanded(
child: SingleChildScrollView(
child: Center(
Expand Down
13 changes: 7 additions & 6 deletions lib/pages/lyrics/lyrics.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down
180 changes: 89 additions & 91 deletions lib/pages/lyrics/synced_lyrics.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,11 @@ final lyricDelayState = StateProvider<Duration>(

class SyncedLyrics extends HookConsumerWidget {
final PaletteColor palette;
final bool? isModal;

const SyncedLyrics({
required this.palette,
this.isModal,
Key? key,
}) : super(key: key);

Expand Down Expand Up @@ -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<Artist>(
playback.track?.artists ?? []),
style: breakpoint >= Breakpoints.md
? textTheme.headline5
: textTheme.headline6,
),
],
),
),
),
Center(
child: Text(
TypeConversionUtils.artists_X_String<Artist>(
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()),
),
],
);
}
Expand Down
12 changes: 8 additions & 4 deletions lib/pages/player/player.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down

0 comments on commit 3db28f4

Please sign in to comment.