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

53
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/material.dart' hide Page;
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
@ -65,30 +66,40 @@ class CategoryCard extends HookConsumerWidget {
? const Text("Something Went Wrong") ? const Text("Something Went Wrong")
: SizedBox( : SizedBox(
height: 245, height: 245,
child: Scrollbar( child: ScrollConfiguration(
controller: scrollController, behavior: ScrollConfiguration.of(context).copyWith(
child: PagedListView<int, PlaylistSimple>( dragDevices: {
shrinkWrap: true, PointerDeviceKind.touch,
pagingController: pagingController, PointerDeviceKind.mouse,
scrollController: scrollController, },
scrollDirection: Axis.horizontal, ),
builderDelegate: PagedChildBuilderDelegate<PlaylistSimple>( child: Scrollbar(
noItemsFoundIndicatorBuilder: (context) { controller: scrollController,
return const NotFound(); interactive: false,
}, child: PagedListView<int, PlaylistSimple>(
firstPageProgressIndicatorBuilder: (context) { shrinkWrap: true,
return const ShimmerPlaybuttonCard(); pagingController: pagingController,
}, scrollController: scrollController,
newPageProgressIndicatorBuilder: (context) { scrollDirection: Axis.horizontal,
return const ShimmerPlaybuttonCard(); builderDelegate:
}, PagedChildBuilderDelegate<PlaylistSimple>(
itemBuilder: (context, playlist, index) { noItemsFoundIndicatorBuilder: (context) {
return PlaylistCard(playlist); return const NotFound();
}, },
firstPageProgressIndicatorBuilder: (context) {
return const ShimmerPlaybuttonCard();
},
newPageProgressIndicatorBuilder: (context) {
return const ShimmerPlaybuttonCard();
},
itemBuilder: (context, playlist, index) {
return PlaylistCard(playlist);
},
),
), ),
), ),
), ),
) ),
], ],
); );
} }

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

@ -57,11 +57,11 @@ class Home extends HookConsumerWidget {
useUpdateChecker(ref); useUpdateChecker(ref);
final titleBarContents = Container( final titleBarContents = Container(
color: Theme.of(context).scaffoldBackgroundColor, color: Theme.of(context).scaffoldBackgroundColor,
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(
child: Row( child: Row(
children: [ children: [
Container( Container(
constraints: BoxConstraints( constraints: BoxConstraints(
@ -74,9 +74,11 @@ class Home extends HookConsumerWidget {
if (!Platform.isMacOS && !kIsMobile) if (!Platform.isMacOS && !kIsMobile)
const TitleBarActionButtons(), const TitleBarActionButtons(),
], ],
)) ),
], )
)); ],
),
);
final backgroundColor = Theme.of(context).backgroundColor; final backgroundColor = Theme.of(context).backgroundColor;
@ -96,9 +98,10 @@ class Home extends HookConsumerWidget {
child: Scaffold( child: Scaffold(
body: Column( body: Column(
children: [ children: [
kIsMobile if (_selectedIndex.value != 3)
? titleBarContents kIsMobile
: WindowTitleBarBox(child: titleBarContents), ? titleBarContents
: WindowTitleBarBox(child: titleBarContents),
Expanded( Expanded(
child: Row( child: Row(
children: [ children: [
@ -110,7 +113,11 @@ class Home extends HookConsumerWidget {
if (_selectedIndex.value == 0) if (_selectedIndex.value == 0)
Expanded( Expanded(
child: Padding( 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) { child: HookBuilder(builder: (context) {
final pagingController = usePaginatedFutureProvider< final pagingController = usePaginatedFutureProvider<
Page<Category>, int, Category>( Page<Category>, int, Category>(

169
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:cached_network_image/cached_network_image.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:spotube/helpers/image-to-url-string.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/hooks/useBreakpoints.dart';
import 'package:spotube/models/sideBarTiles.dart'; import 'package:spotube/models/sideBarTiles.dart';
import 'package:spotube/provider/SpotifyRequests.dart'; import 'package:spotube/provider/SpotifyRequests.dart';
@ -37,6 +39,14 @@ class Sidebar extends HookConsumerWidget {
final extended = useState(false); final extended = useState(false);
final meSnapshot = ref.watch(currentUserQuery); final meSnapshot = ref.watch(currentUserQuery);
final int titleBarDragMaxWidth = useBreakpointValue(
md: 80,
lg: 256,
sm: 0,
xl: 0,
xxl: 0,
);
useEffect(() { useEffect(() {
if (breakpoints.isMd && extended.value) { if (breakpoints.isMd && extended.value) {
extended.value = false; extended.value = false;
@ -47,75 +57,100 @@ class Sidebar extends HookConsumerWidget {
return null; return null;
}); });
return NavigationRail( return Material(
destinations: sidebarTileList color: Theme.of(context).navigationRailTheme.backgroundColor,
.map( child: Column(
(e) => NavigationRailDestination( crossAxisAlignment: CrossAxisAlignment.start,
icon: Icon(e.icon), children: [
label: Text( if (selectedIndex == 3)
e.title, SizedBox(
style: const TextStyle( height: appWindow.titleBarHeight,
fontWeight: FontWeight.bold, width: titleBarDragMaxWidth.toDouble(),
fontSize: 16, 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(
icon: Icon(e.icon),
label: Text(
e.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
)
.toList(),
selectedIndex: selectedIndex,
onDestinationSelected: onSelectedIndexChanged,
extended: extended.value,
),
),
SizedBox(
width: titleBarDragMaxWidth.toDouble(),
child: meSnapshot.when(
data: (data) {
final avatarImg = imageToUrlString(data.images,
index: (data.images?.length ?? 1) - 1);
if (extended.value) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
CircleAvatar(
backgroundImage:
CachedNetworkImageProvider(avatarImg),
),
const SizedBox(width: 10),
Text(
data.displayName ?? "Guest",
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
IconButton(
icon: const Icon(Icons.settings_outlined),
onPressed: () => goToSettings(context)),
],
));
} 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(),
), ),
) )
.toList(), ],
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(
data: (data) {
final avatarImg = imageToUrlString(data.images,
index: (data.images?.length ?? 1) - 1);
return extended.value
? Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
CircleAvatar(
backgroundImage:
CachedNetworkImageProvider(avatarImg),
),
const SizedBox(width: 10),
Text(
data.displayName ?? "Guest",
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
IconButton(
icon: const Icon(Icons.settings_outlined),
onPressed: () => goToSettings(context)),
],
))
: InkWell(
onTap: () => goToSettings(context),
child: CircleAvatar(
backgroundImage: CachedNetworkImageProvider(avatarImg),
),
);
},
error: (e, _) => Text("Error $e"),
loading: () => const CircularProgressIndicator(),
), ),
); );
} }

98
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:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.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/helpers/artist-to-string.dart';
import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/Playback.dart';
import 'package:spotube/provider/SpotifyRequests.dart'; import 'package:spotube/provider/SpotifyRequests.dart';
class Lyrics extends HookConsumerWidget { 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 @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
@ -17,58 +22,57 @@ class Lyrics extends HookConsumerWidget {
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
final textTheme = Theme.of(context).textTheme; final textTheme = Theme.of(context).textTheme;
return Expanded( return Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.stretch, children: [
children: [ PageWindowTitleBar(foregroundColor: titleBarForegroundColor),
Center( Center(
child: Text( child: Text(
playback.track?.name ?? "", playback.track?.name ?? "",
style: breakpoint >= Breakpoints.md style: breakpoint >= Breakpoints.md
? textTheme.headline3 ? textTheme.headline3
: textTheme.headline4?.copyWith(fontSize: 25), : textTheme.headline4?.copyWith(fontSize: 25),
),
), ),
Center( ),
child: Text( Center(
artistsToString<Artist>(playback.track?.artists ?? []), child: Text(
style: breakpoint >= Breakpoints.md artistsToString<Artist>(playback.track?.artists ?? []),
? textTheme.headline5 style: breakpoint >= Breakpoints.md
: textTheme.headline6, ? textTheme.headline5
), : textTheme.headline6,
), ),
Expanded( ),
child: SingleChildScrollView( Expanded(
child: Center( child: SingleChildScrollView(
child: Padding( child: Center(
padding: const EdgeInsets.all(8.0), child: Padding(
child: geniusLyricsSnapshot.when( padding: const EdgeInsets.all(8.0),
data: (lyrics) { child: geniusLyricsSnapshot.when(
return Text( data: (lyrics) {
lyrics == null && playback.track == null return Text(
? "No Track being played currently" lyrics == null && playback.track == null
: lyrics!, ? "No Track being played currently"
style: textTheme.headline6 : lyrics!,
?.copyWith(color: textTheme.headline1?.color), style: textTheme.headline6
); ?.copyWith(color: textTheme.headline1?.color),
}, );
error: (error, __) => Text( },
"Sorry, no Lyrics were found for `${playback.track?.name}` :'("), error: (error, __) => Text(
loading: () => const ShimmerLyrics(), "Sorry, no Lyrics were found for `${playback.track?.name}` :'("),
), loading: () => const ShimmerLyrics(),
), ),
), ),
), ),
), ),
const Align( ),
alignment: Alignment.bottomRight, const Align(
child: Padding( alignment: Alignment.bottomRight,
padding: EdgeInsets.all(8.0), child: Padding(
child: Text("Powered by genius.com"), padding: EdgeInsets.all(8.0),
), child: Text("Powered by genius.com"),
) ),
], )
), ],
); );
} }
} }

176
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/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart'; import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
import 'package:spotube/components/Lyrics/Lyrics.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/components/Shared/SpotubeMarqueeText.dart';
import 'package:spotube/helpers/artist-to-string.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/useAutoScrollController.dart';
import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/hooks/usePaletteColor.dart';
import 'package:spotube/hooks/useSyncedLyrics.dart'; import 'package:spotube/hooks/useSyncedLyrics.dart';
import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/Playback.dart';
import 'package:scroll_to_index/scroll_to_index.dart'; import 'package:scroll_to_index/scroll_to_index.dart';
@ -88,79 +95,116 @@ class SyncedLyrics extends HookConsumerWidget {
}, [lyricValue]); }, [lyricValue]);
// when synced lyrics not found, fallback to GeniusLyrics // when synced lyrics not found, fallback to GeniusLyrics
if (failed.value) return const Lyrics();
final headlineTextStyle = breakpoint >= Breakpoints.md String albumArt = useMemoized(
? textTheme.headline3 () => imageToUrlString(
: textTheme.headline4?.copyWith(fontSize: 25); 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))
?.copyWith(color: palette.titleTextColor);
return Expanded( return Expanded(
child: Column( child: Container(
children: [ clipBehavior: Clip.hardEdge,
Center( decoration: BoxDecoration(
child: SizedBox( image: DecorationImage(
height: breakpoint >= Breakpoints.md ? 50 : 30, image: CachedNetworkImageProvider(
child: playback.track?.name != null && albumArt,
playback.track!.name!.length > 29 cacheKey: albumArt,
? SpotubeMarqueeText(
text: playback.track?.name ?? "Not Playing",
style: headlineTextStyle,
)
: Text(
playback.track?.name ?? "Not Playing",
style: headlineTextStyle,
),
)),
Center(
child: Text(
artistsToString<Artist>(playback.track?.artists ?? []),
style: breakpoint >= Breakpoints.md
? textTheme.headline5
: textTheme.headline6,
), ),
fit: BoxFit.cover,
), ),
if (lyricValue != null && lyricValue.lyrics.isNotEmpty) ),
Expanded( child: BackdropFilter(
child: ListView.builder( filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
controller: controller, child: Container(
itemCount: lyricValue.lyrics.length, color: palette.color.withOpacity(.7),
itemBuilder: (context, index) { child: failed.value
final lyricSlice = lyricValue.lyrics[index]; ? Lyrics(titleBarForegroundColor: palette.bodyTextColor)
final isActive = lyricSlice.time.inSeconds == currentTime; : Column(
if (isActive) { children: [
controller.scrollToIndex( PageWindowTitleBar(
index, foregroundColor: palette.bodyTextColor,
preferPosition: AutoScrollPosition.middle, ),
); Center(
} child: SizedBox(
return AutoScrollTag( height: breakpoint >= Breakpoints.md ? 50 : 30,
key: ValueKey(index), child: playback.track?.name != null &&
index: index, playback.track!.name!.length > 29
controller: controller, ? SpotubeMarqueeText(
child: Center( text: playback.track?.name ?? "Not Playing",
child: Padding( style: headlineTextStyle,
padding: const EdgeInsets.all(8.0), )
: Text(
playback.track?.name ?? "Not Playing",
style: headlineTextStyle,
),
)),
Center(
child: Text( child: Text(
lyricSlice.text, artistsToString<Artist>(
style: TextStyle( playback.track?.artists ?? []),
// indicating the active state of that lyric slice style: breakpoint >= Breakpoints.md
color: isActive ? textTheme.headline5
? Theme.of(context).primaryColor : textTheme.headline6,
: null,
fontWeight: isActive ? FontWeight.bold : null,
fontSize: 30,
),
textAlign: TextAlign.center,
), ),
), ),
), if (lyricValue != null && lyricValue.lyrics.isNotEmpty)
); Expanded(
}, child: ListView.builder(
), controller: controller,
), itemCount: lyricValue.lyrics.length,
if (playback.track != null && itemBuilder: (context, index) {
(lyricValue == null || lyricValue.lyrics.isEmpty == true)) final lyricSlice = lyricValue.lyrics[index];
const Expanded(child: ShimmerLyrics()), final isActive =
], lyricSlice.time.inSeconds == currentTime;
if (isActive) {
controller.scrollToIndex(
index,
preferPosition: AutoScrollPosition.middle,
);
}
return AutoScrollTag(
key: ValueKey(index),
index: index,
controller: controller,
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
lyricSlice.text,
style: TextStyle(
// indicating the active state of that lyric slice
color: isActive
? Theme.of(context).primaryColor
: palette.bodyTextColor,
fontWeight:
isActive ? FontWeight.bold : null,
fontSize: 30,
),
textAlign: TextAlign.center,
),
),
),
);
},
),
),
if (playback.track != null &&
(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 { class PlayerActions extends HookConsumerWidget {
final MainAxisAlignment mainAxisAlignment; final MainAxisAlignment mainAxisAlignment;
final bool floatingQueue;
PlayerActions({ PlayerActions({
this.mainAxisAlignment = MainAxisAlignment.center, this.mainAxisAlignment = MainAxisAlignment.center,
this.floatingQueue = true,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
final logger = getLogger(PlayerActions); final logger = getLogger(PlayerActions);
@ -37,7 +39,8 @@ class PlayerActions extends HookConsumerWidget {
isDismissible: true, isDismissible: true,
enableDrag: true, enableDrag: true,
isScrollControlled: true, isScrollControlled: true,
backgroundColor: Colors.transparent, backgroundColor: Colors.black12,
barrierColor: Colors.black12,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
@ -45,7 +48,7 @@ class PlayerActions extends HookConsumerWidget {
maxHeight: MediaQuery.of(context).size.height * .7, maxHeight: MediaQuery.of(context).size.height * .7,
), ),
builder: (context) { 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 { class PlayerControls extends HookConsumerWidget {
final Color? iconColor; final Color? iconColor;
PlayerControls({ PlayerControls({
this.iconColor, this.iconColor,
Key? key, Key? key,

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

@ -1,3 +1,5 @@
import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
@ -20,7 +22,7 @@ class PlayerOverlay extends HookConsumerWidget {
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
final isCurrentRoute = useIsCurrentRoute("/"); final isCurrentRoute = useIsCurrentRoute("/");
final paletteColor = usePaletteColor(context, albumArt, ref); final paletteColor = usePaletteColor(albumArt, ref);
final playback = ref.watch(playbackProvider); final playback = ref.watch(playbackProvider);
if (isCurrentRoute == false) { if (isCurrentRoute == false) {
@ -45,56 +47,66 @@ class PlayerOverlay extends HookConsumerWidget {
GoRouter.of(context).push("/player"); GoRouter.of(context).push("/player");
} }
}, },
child: AnimatedContainer( child: ClipRRect(
duration: const Duration(milliseconds: 500), borderRadius: BorderRadius.circular(5),
width: MediaQuery.of(context).size.width, child: BackdropFilter(
height: 50, filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
decoration: BoxDecoration( child: AnimatedContainer(
color: paletteColor.color, duration: const Duration(milliseconds: 500),
borderRadius: BorderRadius.circular(5), width: MediaQuery.of(context).size.width,
), height: 50,
child: Material( decoration: BoxDecoration(
type: MaterialType.transparency, color: paletteColor.color.withOpacity(.7),
child: Row( border: Border.all(
mainAxisAlignment: MainAxisAlignment.spaceBetween, color: paletteColor.titleTextColor,
children: [ width: 2,
Expanded(
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => GoRouter.of(context).push("/player"),
child: PlayerTrackDetails(
albumArt: albumArt,
color: paletteColor.bodyTextColor,
),
),
),
), ),
Row( borderRadius: BorderRadius.circular(5),
),
child: Material(
type: MaterialType.transparency,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
IconButton( Expanded(
icon: const Icon(Icons.skip_previous_rounded), child: MouseRegion(
color: paletteColor.bodyTextColor, cursor: SystemMouseCursors.click,
onPressed: () { child: GestureDetector(
onPrevious(); onTap: () => GoRouter.of(context).push("/player"),
}), child: PlayerTrackDetails(
IconButton( albumArt: albumArt,
icon: Icon( color: paletteColor.bodyTextColor,
playback.isPlaying ),
? Icons.pause_rounded ),
: Icons.play_arrow_rounded,
), ),
color: paletteColor.bodyTextColor,
onPressed: _playOrPause,
), ),
IconButton( Row(
icon: const Icon(Icons.skip_next_rounded), children: [
onPressed: () => onNext(), IconButton(
color: paletteColor.bodyTextColor, icon: const Icon(Icons.skip_previous_rounded),
color: paletteColor.bodyTextColor,
onPressed: () {
onPrevious();
}),
IconButton(
icon: Icon(
playback.isPlaying
? Icons.pause_rounded
: Icons.play_arrow_rounded,
),
color: paletteColor.bodyTextColor,
onPressed: _playOrPause,
),
IconButton(
icon: const Icon(Icons.skip_next_rounded),
onPressed: () => onNext(),
color: paletteColor.bodyTextColor,
),
],
), ),
], ],
), ),
], ),
), ),
), ),
), ),

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

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

137
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:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
@ -44,78 +46,101 @@ class PlayerView extends HookConsumerWidget {
[currentTrack?.album?.images], [currentTrack?.album?.images],
); );
final PaletteColor paletteColor = usePaletteColor(context, albumArt, ref); final PaletteColor paletteColor = usePaletteColor(albumArt, ref);
useCustomStatusBarColor( useCustomStatusBarColor(
paletteColor.color, paletteColor.color,
GoRouter.of(context).location == "/player", GoRouter.of(context).location == "/player",
noSetBGColor: true,
); );
return SafeArea( return SafeArea(
child: Scaffold( child: Scaffold(
appBar: const PageWindowTitleBar( // backgroundColor: paletteColor.color,
leading: BackButton(), body: Container(
backgroundColor: Colors.transparent, decoration: BoxDecoration(
), image: DecorationImage(
backgroundColor: paletteColor.color, image: CachedNetworkImageProvider(
body: Column( albumArt,
children: [ cacheKey: albumArt,
Padding( ),
padding: const EdgeInsets.all(10), fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: Container(
color: paletteColor.color.withOpacity(.5),
child: Column( child: Column(
children: [ children: [
SizedBox( PageWindowTitleBar(
height: 30, leading: const BackButton(),
child: currentTrack?.name != null && backgroundColor: Colors.transparent,
currentTrack!.name!.length > 29 foregroundColor: paletteColor.titleTextColor,
? SpotubeMarqueeText(
text: currentTrack.name ?? "Not playing",
style:
Theme.of(context).textTheme.headline5?.copyWith(
fontWeight: FontWeight.bold,
color: paletteColor.titleTextColor,
),
)
: Text(
currentTrack?.name ?? "Not Playing",
style: Theme.of(context).textTheme.headline5,
),
), ),
artistsToClickableArtists( Padding(
currentTrack?.artists ?? [], padding: const EdgeInsets.all(10),
textStyle: Theme.of(context).textTheme.headline6!.copyWith( child: Column(
fontWeight: FontWeight.bold, children: [
color: paletteColor.bodyTextColor, SizedBox(
height: 30,
child: currentTrack?.name != null &&
currentTrack!.name!.length > 29
? SpotubeMarqueeText(
text: currentTrack.name ?? "Not playing",
style: Theme.of(context)
.textTheme
.headline5
?.copyWith(
fontWeight: FontWeight.bold,
color: paletteColor.titleTextColor,
),
)
: Text(
currentTrack?.name ?? "Not Playing",
style: Theme.of(context).textTheme.headline5,
),
), ),
artistsToClickableArtists(
currentTrack?.artists ?? [],
textStyle:
Theme.of(context).textTheme.headline6!.copyWith(
fontWeight: FontWeight.bold,
color: paletteColor.bodyTextColor,
),
),
],
),
), ),
const Spacer(),
HookBuilder(builder: (context) {
final ticker = useSingleTickerProvider();
final controller = useAnimationController(
duration: const Duration(seconds: 10),
vsync: ticker,
)..repeat();
return RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(controller),
child: CircleAvatar(
backgroundImage: CachedNetworkImageProvider(
albumArt,
cacheKey: albumArt,
),
radius: MediaQuery.of(context).size.width *
(breakpoint.isSm ? 0.4 : 0.3),
),
);
}),
const Spacer(),
PlayerActions(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
floatingQueue: false,
),
PlayerControls(iconColor: paletteColor.bodyTextColor),
], ],
), ),
), ),
const Spacer(), ),
HookBuilder(builder: (context) {
final ticker = useSingleTickerProvider();
final controller = useAnimationController(
duration: const Duration(seconds: 10),
vsync: ticker,
)..repeat();
return RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(controller),
child: CircleAvatar(
backgroundImage: CachedNetworkImageProvider(
albumArt,
cacheKey: albumArt,
),
radius: MediaQuery.of(context).size.width *
(breakpoint.isSm ? 0.4 : 0.3),
),
);
}),
const Spacer(),
PlayerActions(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
PlayerControls(iconColor: paletteColor.bodyTextColor),
],
), ),
), ),
); );

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

@ -13,42 +13,60 @@ class TitleBarActionButtons extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Row( return TextButtonTheme(
children: [ data: TextButtonThemeData(
TextButton( style: ButtonStyle(
onPressed: () { splashFactory: NoSplash.splashFactory,
appWindow.minimize(); shape: MaterialStateProperty.all(const RoundedRectangleBorder()),
}, overlayColor: MaterialStateProperty.all(Colors.black12),
style: ButtonStyle( padding: MaterialStateProperty.all(EdgeInsets.zero),
foregroundColor: minimumSize: MaterialStateProperty.all(const Size(50, 40)),
MaterialStateProperty.all(Theme.of(context).iconTheme.color), maximumSize: MaterialStateProperty.all(const Size(50, 40)),
), ),
child: Icon( ),
Icons.minimize_rounded, child: IconTheme(
color: color, data: const IconThemeData(size: 16),
)), child: Row(
TextButton( children: [
onPressed: () async { TextButton(
appWindow.maximizeOrRestore(); onPressed: () {
}, appWindow.minimize();
style: ButtonStyle( },
foregroundColor: style: ButtonStyle(
MaterialStateProperty.all(Theme.of(context).iconTheme.color), foregroundColor: MaterialStateProperty.all(
), Theme.of(context).iconTheme.color),
child: Icon(Icons.crop_square_rounded, color: color)), ),
TextButton( child: Icon(
onPressed: () { Icons.minimize_rounded,
appWindow.close(); color: color,
}, )),
style: ButtonStyle( TextButton(
foregroundColor: MaterialStateProperty.all( onPressed: () async {
color ?? Theme.of(context).iconTheme.color), appWindow.maximizeOrRestore();
overlayColor: MaterialStateProperty.all(Colors.redAccent), },
), style: ButtonStyle(
child: const Icon( foregroundColor: MaterialStateProperty.all(
Icons.close_rounded, Theme.of(context).iconTheme.color),
)), ),
], child: Icon(
Icons.crop_square_rounded,
color: color,
)),
TextButton(
onPressed: () {
appWindow.close();
},
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(
color ?? Theme.of(context).iconTheme.color),
overlayColor: MaterialStateProperty.all(Colors.redAccent),
),
child: const Icon(
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/services.dart';
import 'package:flutter_hooks/flutter_hooks.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 context = useContext();
final backgroundColor = Theme.of(context).backgroundColor; final backgroundColor = Theme.of(context).backgroundColor;
resetStatusbar() => SystemChrome.setSystemUIOverlayStyle( resetStatusbar() => SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle( SystemUiOverlayStyle(
statusBarColor: backgroundColor, // status bar color statusBarColor:
!noSetBGColor ? backgroundColor : null, // status bar color
statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179 statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179
? Brightness.dark ? Brightness.dark
: Brightness.light, : Brightness.light,

4
lib/hooks/usePaletteColor.dart
View File

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