kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Blur effect applied in Lyrics, PlayerView & PlayerOverlay

Browse Source 
Drag to scroll support for Playlist Categories
Sidebar user name & settings icon moved down
This commit is contained in:
Kingkor Roy Tirtho 2022-07-05 14:08:56 +06:00
parent 7e24059900
commit da2e371dfd
13 changed files with 595 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/components/Category/CategoryCard.dart
View File

@ -1,3 +1,4 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart' hide Page;
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
@ -65,14 +66,23 @@ class CategoryCard extends HookConsumerWidget {
? const Text("Something Went Wrong")
: SizedBox(
height: 245,
child: ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: scrollController,
interactive: false,
child: PagedListView<int, PlaylistSimple>(
shrinkWrap: true,
pagingController: pagingController,
scrollController: scrollController,
scrollDirection: Axis.horizontal,
builderDelegate: PagedChildBuilderDelegate<PlaylistSimple>(
builderDelegate:
PagedChildBuilderDelegate<PlaylistSimple>(
noItemsFoundIndicatorBuilder: (context) {
return const NotFound();
},
@ -88,7 +98,8 @@ class CategoryCard extends HookConsumerWidget {
),
),
),
)
),
),
],
);
}

13
lib/components/Home/Home.dart
View File

@ -74,9 +74,11 @@ class Home extends HookConsumerWidget {
if (!Platform.isMacOS && !kIsMobile)
const TitleBarActionButtons(),
],
))
),
)
],
));
),
);
final backgroundColor = Theme.of(context).backgroundColor;
@ -96,6 +98,7 @@ class Home extends HookConsumerWidget {
child: Scaffold(
body: Column(
children: [
if (_selectedIndex.value != 3)
kIsMobile
? titleBarContents
: WindowTitleBarBox(child: titleBarContents),
@ -110,7 +113,11 @@ class Home extends HookConsumerWidget {
if (_selectedIndex.value == 0)
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.only(
bottom: 8.0,
top: 8.0,
left: 8.0,
),
child: HookBuilder(builder: (context) {
final pagingController = usePaginatedFutureProvider<
Page<Category>, int, Category>(

69
lib/components/Home/Sidebar.dart
View File

@ -1,9 +1,11 @@
import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/material.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
import 'package:spotube/hooks/useBreakpointValue.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/models/sideBarTiles.dart';
import 'package:spotube/provider/SpotifyRequests.dart';
@ -37,6 +39,14 @@ class Sidebar extends HookConsumerWidget {
final extended = useState(false);
final meSnapshot = ref.watch(currentUserQuery);
final int titleBarDragMaxWidth = useBreakpointValue(
md: 80,
lg: 256,
sm: 0,
xl: 0,
xxl: 0,
);
useEffect(() {
if (breakpoints.isMd && extended.value) {
extended.value = false;
@ -47,7 +57,32 @@ class Sidebar extends HookConsumerWidget {
return null;
});
return NavigationRail(
return Material(
color: Theme.of(context).navigationRailTheme.backgroundColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (selectedIndex == 3)
SizedBox(
height: appWindow.titleBarHeight,
width: titleBarDragMaxWidth.toDouble(),
child: MoveWindow(),
),
extended.value
? Padding(
padding: const EdgeInsets.only(left: 15),
child: Row(children: [
_buildSmallLogo(),
const SizedBox(
width: 10,
),
Text("Spotube",
style: Theme.of(context).textTheme.headline4),
]),
)
: _buildSmallLogo(),
Expanded(
child: NavigationRail(
destinations: sidebarTileList
.map(
(e) => NavigationRailDestination(
@ -65,24 +100,16 @@ class Sidebar extends HookConsumerWidget {
selectedIndex: selectedIndex,
onDestinationSelected: onSelectedIndexChanged,
extended: extended.value,
leading: extended.value
? Padding(
padding: const EdgeInsets.only(left: 15),
child: Row(children: [
_buildSmallLogo(),
const SizedBox(
width: 10,
),
Text("Spotube", style: Theme.of(context).textTheme.headline4),
]),
)
: _buildSmallLogo(),
trailing: meSnapshot.when(
),
SizedBox(
width: titleBarDragMaxWidth.toDouble(),
child: meSnapshot.when(
data: (data) {
final avatarImg = imageToUrlString(data.images,
index: (data.images?.length ?? 1) - 1);
return extended.value
? Padding(
if (extended.value) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -106,17 +133,25 @@ class Sidebar extends HookConsumerWidget {
icon: const Icon(Icons.settings_outlined),
onPressed: () => goToSettings(context)),
],
))
: InkWell(
));
} else {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () => goToSettings(context),
child: CircleAvatar(
backgroundImage: CachedNetworkImageProvider(avatarImg),
),
),
);
}
},
error: (e, _) => Text("Error $e"),
loading: () => const CircularProgressIndicator(),
),
)
],
),
);
}
}

12
lib/components/Lyrics/Lyrics.dart
View File

@ -2,13 +2,18 @@ import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/helpers/artist-to-string.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/provider/Playback.dart';
import 'package:spotube/provider/SpotifyRequests.dart';
class Lyrics extends HookConsumerWidget {
const Lyrics({Key? key}) : super(key: key);
final Color? titleBarForegroundColor;
const Lyrics({
required this.titleBarForegroundColor,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context, ref) {
@ -17,10 +22,10 @@ class Lyrics extends HookConsumerWidget {
final breakpoint = useBreakpoints();
final textTheme = Theme.of(context).textTheme;
return Expanded(
child: Column(
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
PageWindowTitleBar(foregroundColor: titleBarForegroundColor),
Center(
child: Text(
playback.track?.name ?? "",
@ -68,7 +73,6 @@ class Lyrics extends HookConsumerWidget {
),
)
],
),
);
}
}

62
lib/components/Lyrics/SyncedLyrics.dart
View File

@ -1,13 +1,20 @@
import 'dart:ui';
import 'package:cached_network_image/cached_network_image.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';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
import 'package:spotube/components/Lyrics/Lyrics.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
import 'package:spotube/helpers/artist-to-string.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
import 'package:spotube/hooks/useAutoScrollController.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/hooks/usePaletteColor.dart';
import 'package:spotube/hooks/useSyncedLyrics.dart';
import 'package:spotube/provider/Playback.dart';
import 'package:scroll_to_index/scroll_to_index.dart';
@ -88,14 +95,44 @@ class SyncedLyrics extends HookConsumerWidget {
}, [lyricValue]);
// when synced lyrics not found, fallback to GeniusLyrics
if (failed.value) return const Lyrics();
final headlineTextStyle = breakpoint >= Breakpoints.md
String albumArt = useMemoized(
() => imageToUrlString(
playback.track?.album?.images,
index: (playback.track?.album?.images?.length ?? 1) - 1,
),
[playback.track?.album?.images],
);
final palette = usePaletteColor(albumArt, ref);
final headlineTextStyle = (breakpoint >= Breakpoints.md
? textTheme.headline3
: textTheme.headline4?.copyWith(fontSize: 25);
: textTheme.headline4?.copyWith(fontSize: 25))
?.copyWith(color: palette.titleTextColor);
return Expanded(
child: Column(
child: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
albumArt,
cacheKey: albumArt,
),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: Container(
color: palette.color.withOpacity(.7),
child: failed.value
? Lyrics(titleBarForegroundColor: palette.bodyTextColor)
: Column(
children: [
PageWindowTitleBar(
foregroundColor: palette.bodyTextColor,
),
Center(
child: SizedBox(
height: breakpoint >= Breakpoints.md ? 50 : 30,
@ -112,7 +149,8 @@ class SyncedLyrics extends HookConsumerWidget {
)),
Center(
child: Text(
artistsToString<Artist>(playback.track?.artists ?? []),
artistsToString<Artist>(
playback.track?.artists ?? []),
style: breakpoint >= Breakpoints.md
? textTheme.headline5
: textTheme.headline6,
@ -125,7 +163,8 @@ class SyncedLyrics extends HookConsumerWidget {
itemCount: lyricValue.lyrics.length,
itemBuilder: (context, index) {
final lyricSlice = lyricValue.lyrics[index];
final isActive = lyricSlice.time.inSeconds == currentTime;
final isActive =
lyricSlice.time.inSeconds == currentTime;
if (isActive) {
controller.scrollToIndex(
index,
@ -145,8 +184,9 @@ class SyncedLyrics extends HookConsumerWidget {
// indicating the active state of that lyric slice
color: isActive
? Theme.of(context).primaryColor
: null,
fontWeight: isActive ? FontWeight.bold : null,
: palette.bodyTextColor,
fontWeight:
isActive ? FontWeight.bold : null,
fontSize: 30,
),
textAlign: TextAlign.center,
@ -158,10 +198,14 @@ class SyncedLyrics extends HookConsumerWidget {
),
),
if (playback.track != null &&
(lyricValue == null || lyricValue.lyrics.isEmpty == true))
(lyricValue == null ||
lyricValue.lyrics.isEmpty == true))
const Expanded(child: ShimmerLyrics()),
],
),
),
),
),
);
}
}

7
lib/components/Player/PlayerActions.dart
View File

@ -13,8 +13,10 @@ import 'package:spotube/provider/SpotifyRequests.dart';
class PlayerActions extends HookConsumerWidget {
final MainAxisAlignment mainAxisAlignment;
final bool floatingQueue;
PlayerActions({
this.mainAxisAlignment = MainAxisAlignment.center,
this.floatingQueue = true,
Key? key,
}) : super(key: key);
final logger = getLogger(PlayerActions);
@ -37,7 +39,8 @@ class PlayerActions extends HookConsumerWidget {
isDismissible: true,
enableDrag: true,
isScrollControlled: true,
backgroundColor: Colors.transparent,
backgroundColor: Colors.black12,
barrierColor: Colors.black12,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
@ -45,7 +48,7 @@ class PlayerActions extends HookConsumerWidget {
maxHeight: MediaQuery.of(context).size.height * .7,
),
builder: (context) {
return const PlayerQueue();
return PlayerQueue(floating: floatingQueue);
},
);
}

1
lib/components/Player/PlayerControls.dart
View File

@ -8,6 +8,7 @@ import 'package:spotube/provider/Playback.dart';
class PlayerControls extends HookConsumerWidget {
final Color? iconColor;
PlayerControls({
this.iconColor,
Key? key,

16
lib/components/Player/PlayerOverlay.dart
View File

@ -1,3 +1,5 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
@ -20,7 +22,7 @@ class PlayerOverlay extends HookConsumerWidget {
Widget build(BuildContext context, ref) {
final breakpoint = useBreakpoints();
final isCurrentRoute = useIsCurrentRoute("/");
final paletteColor = usePaletteColor(context, albumArt, ref);
final paletteColor = usePaletteColor(albumArt, ref);
final playback = ref.watch(playbackProvider);
if (isCurrentRoute == false) {
@ -45,12 +47,20 @@ class PlayerOverlay extends HookConsumerWidget {
GoRouter.of(context).push("/player");
}
},
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
color: paletteColor.color,
color: paletteColor.color.withOpacity(.7),
border: Border.all(
color: paletteColor.titleTextColor,
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: Material(
@ -99,6 +109,8 @@ class PlayerOverlay extends HookConsumerWidget {
),
),
),
),
),
);
}
}

78
lib/components/Player/PlayerQueue.dart
View File

@ -1,56 +1,103 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:scroll_to_index/scroll_to_index.dart';
import 'package:spotube/components/Shared/NotFound.dart';
import 'package:spotube/components/Shared/TrackTile.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
import 'package:spotube/helpers/zero-pad-num-str.dart';
import 'package:spotube/hooks/useAutoScrollController.dart';
import 'package:spotube/provider/Playback.dart';
import 'package:collection/collection.dart';
class PlayerQueue extends HookConsumerWidget {
const PlayerQueue({Key? key}) : super(key: key);
final bool floating;
const PlayerQueue({
this.floating = true,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context, ref) {
final playback = ref.watch(playbackProvider);
final controller = useAutoScrollController();
final tracks = playback.playlist?.tracks ?? [];
if (tracks.isEmpty) {
return const NotFound(vertical: true);
}
final borderRadius = floating
? BorderRadius.circular(10)
: const BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
);
final headlineColor = Theme.of(context).textTheme.headline4?.color;
useEffect(() {
if (playback.track == null || playback.playlist == null) return null;
final index = playback.playlist!.tracks
.indexWhere((track) => track.id == playback.track!.id);
if (index < 0) return;
controller.scrollToIndex(
index,
preferPosition: AutoScrollPosition.middle,
);
return null;
}, []);
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
filter: ImageFilter.blur(
sigmaX: 12.0,
sigmaY: 12.0,
),
child: Container(
margin: EdgeInsets.all(floating ? 8.0 : 0),
padding: const EdgeInsets.only(
top: 5.0,
),
decoration: BoxDecoration(
color: Theme.of(context)
.navigationRailTheme
.backgroundColor
?.withOpacity(0.5),
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.only(
top: 5.0,
borderRadius: borderRadius,
),
child: Column(
children: [
Container(
height: 5,
width: 100,
margin: const EdgeInsets.only(bottom: 5, top: 2),
decoration: BoxDecoration(
color: headlineColor,
borderRadius: BorderRadius.circular(20),
),
),
Text(
"Queue (${playback.playlist?.name})",
style: Theme.of(context).textTheme.headline4,
style: Theme.of(context).textTheme.headline4?.copyWith(
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 10),
Flexible(
child: ListView(
child: ListView.builder(
controller: controller,
itemCount: tracks.length,
shrinkWrap: true,
children: [
...tracks.asMap().entries.mapIndexed((i, track) {
itemBuilder: (context, i) {
final track = tracks.asMap().entries.elementAt(i);
String duration =
"${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
return Padding(
return AutoScrollTag(
key: ValueKey(i),
controller: controller,
index: i,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TrackTile(
playback,
@ -64,10 +111,9 @@ class PlayerQueue extends HookConsumerWidget {
await playback.setPlaylistPosition(i);
},
),
),
);
}),
],
),
),
],
),

45
lib/components/Player/PlayerView.dart
View File

@ -1,3 +1,5 @@
import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
@ -44,22 +46,38 @@ class PlayerView extends HookConsumerWidget {
[currentTrack?.album?.images],
);
final PaletteColor paletteColor = usePaletteColor(context, albumArt, ref);
final PaletteColor paletteColor = usePaletteColor(albumArt, ref);
useCustomStatusBarColor(
paletteColor.color,
GoRouter.of(context).location == "/player",
noSetBGColor: true,
);
return SafeArea(
child: Scaffold(
appBar: const PageWindowTitleBar(
leading: BackButton(),
backgroundColor: Colors.transparent,
// backgroundColor: paletteColor.color,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
albumArt,
cacheKey: albumArt,
),
backgroundColor: paletteColor.color,
body: Column(
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: Container(
color: paletteColor.color.withOpacity(.5),
child: Column(
children: [
PageWindowTitleBar(
leading: const BackButton(),
backgroundColor: Colors.transparent,
foregroundColor: paletteColor.titleTextColor,
),
Padding(
padding: const EdgeInsets.all(10),
child: Column(
@ -70,8 +88,10 @@ class PlayerView extends HookConsumerWidget {
currentTrack!.name!.length > 29
? SpotubeMarqueeText(
text: currentTrack.name ?? "Not playing",
style:
Theme.of(context).textTheme.headline5?.copyWith(
style: Theme.of(context)
.textTheme
.headline5
?.copyWith(
fontWeight: FontWeight.bold,
color: paletteColor.titleTextColor,
),
@ -83,7 +103,8 @@ class PlayerView extends HookConsumerWidget {
),
artistsToClickableArtists(
currentTrack?.artists ?? [],
textStyle: Theme.of(context).textTheme.headline6!.copyWith(
textStyle:
Theme.of(context).textTheme.headline6!.copyWith(
fontWeight: FontWeight.bold,
color: paletteColor.bodyTextColor,
),
@ -112,12 +133,16 @@ class PlayerView extends HookConsumerWidget {
}),
const Spacer(),
PlayerActions(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
floatingQueue: false,
),
PlayerControls(iconColor: paletteColor.bodyTextColor),
],
),
),
),
),
),
);
}
}

30
lib/components/Shared/PageWindowTitleBar.dart
View File

@ -13,15 +13,28 @@ class TitleBarActionButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
return TextButtonTheme(
data: TextButtonThemeData(
style: ButtonStyle(
splashFactory: NoSplash.splashFactory,
shape: MaterialStateProperty.all(const RoundedRectangleBorder()),
overlayColor: MaterialStateProperty.all(Colors.black12),
padding: MaterialStateProperty.all(EdgeInsets.zero),
minimumSize: MaterialStateProperty.all(const Size(50, 40)),
maximumSize: MaterialStateProperty.all(const Size(50, 40)),
),
),
child: IconTheme(
data: const IconThemeData(size: 16),
child: Row(
children: [
TextButton(
onPressed: () {
appWindow.minimize();
},
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Theme.of(context).iconTheme.color),
foregroundColor: MaterialStateProperty.all(
Theme.of(context).iconTheme.color),
),
child: Icon(
Icons.minimize_rounded,
@ -32,10 +45,13 @@ class TitleBarActionButtons extends StatelessWidget {
appWindow.maximizeOrRestore();
},
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Theme.of(context).iconTheme.color),
foregroundColor: MaterialStateProperty.all(
Theme.of(context).iconTheme.color),
),
child: Icon(Icons.crop_square_rounded, color: color)),
child: Icon(
Icons.crop_square_rounded,
color: color,
)),
TextButton(
onPressed: () {
appWindow.close();
@ -49,6 +65,8 @@ class TitleBarActionButtons extends StatelessWidget {
Icons.close_rounded,
)),
],
),
),
);
}
}

9
lib/hooks/useCustomStatusBarColor.dart
View File

@ -2,12 +2,17 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void useCustomStatusBarColor(Color color, bool isCurrentRoute) {
void useCustomStatusBarColor(
Color color,
bool isCurrentRoute, {
bool noSetBGColor = false,
}) {
final context = useContext();
final backgroundColor = Theme.of(context).backgroundColor;
resetStatusbar() => SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: backgroundColor, // status bar color
statusBarColor:
!noSetBGColor ? backgroundColor : null, // status bar color
statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179
? Brightness.dark
: Brightness.light,

4
lib/hooks/usePaletteColor.dart
View File

@ -10,8 +10,8 @@ final _paletteColorState = StateProvider<PaletteColor>(
},
);
PaletteColor usePaletteColor(
BuildContext context, String imageUrl, WidgetRef ref) {
PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
final context = useContext();
final paletteColor = ref.watch(_paletteColorState);
final mounted = useIsMounted();