diff --git a/lib/components/player/player.dart b/lib/components/player/player.dart index a43fcbca..01e38670 100644 --- a/lib/components/player/player.dart +++ b/lib/components/player/player.dart @@ -138,12 +138,17 @@ class PlayerView extends HookConsumerWidget { onPressed: panelController.close, ), actions: [ - IconButton( - icon: Assets.logos.songlink.image( + TextButton.icon( + icon: Assets.logos.songlinkTransparent.image( width: 20, height: 20, + color: bodyTextColor, + ), + label: Text(context.l10n.song_link), + style: TextButton.styleFrom( + foregroundColor: bodyTextColor, + padding: EdgeInsets.zero, ), - tooltip: context.l10n.song_link, onPressed: currentTrack == null ? null : () { @@ -157,7 +162,8 @@ class PlayerView extends HookConsumerWidget { icon: const Icon(SpotubeIcons.info, size: 18), tooltip: context.l10n.details, style: IconButton.styleFrom( - foregroundColor: bodyTextColor), + foregroundColor: bodyTextColor, + ), onPressed: currentTrack == null ? null : () { diff --git a/lib/pages/album/album.dart b/lib/pages/album/album.dart index 4578aea2..6cba99f6 100644 --- a/lib/pages/album/album.dart +++ b/lib/pages/album/album.dart @@ -47,6 +47,7 @@ class AlbumPage extends HookConsumerWidget { image: TypeConversionUtils.image_X_UrlString( album.images, placeholder: ImagePlaceholder.albumArt, + index: 0, ), title: album.name!, description: diff --git a/lib/pages/home/genres/genre_playlists.dart b/lib/pages/home/genres/genre_playlists.dart index 78f32245..bfb0843c 100644 --- a/lib/pages/home/genres/genre_playlists.dart +++ b/lib/pages/home/genres/genre_playlists.dart @@ -18,8 +18,7 @@ import 'package:flutter_desktop_tools/flutter_desktop_tools.dart'; class GenrePlaylistsPage extends HookConsumerWidget { final Category category; - const GenrePlaylistsPage({Key? key, required this.category}) - : super(key: key); + const GenrePlaylistsPage({super.key, required this.category}); @override Widget build(BuildContext context, ref) { @@ -51,123 +50,118 @@ class GenrePlaylistsPage extends HookConsumerWidget { ) : null, extendBodyBehindAppBar: true, - body: CustomScrollView( - controller: scrollController, - slivers: [ - SliverAppBar( - automaticallyImplyLeading: DesktopTools.platform.isMobile, - expandedHeight: mediaQuery.mdAndDown ? 200 : 150, - pinned: true, - floating: false, - title: const Text(""), - backgroundColor: Colors.brown.withOpacity(0.7), - flexibleSpace: FlexibleSpaceBar( - stretchModes: const [ - StretchMode.zoomBackground, - StretchMode.blurBackground, - ], - background: DecoratedBox( - decoration: BoxDecoration( - image: DecorationImage( - image: UniversalImage.imageProvider( - category.icons!.first.url!, - ), - fit: BoxFit.cover, + body: DecoratedBox( + decoration: BoxDecoration( + image: DecorationImage( + image: UniversalImage.imageProvider(category.icons!.first.url!), + alignment: Alignment.topCenter, + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + Colors.black.withOpacity(0.5), + BlendMode.darken, + ), + repeat: ImageRepeat.noRepeat, + matchTextDirection: true, + ), + ), + child: CustomScrollView( + controller: scrollController, + slivers: [ + SliverAppBar( + automaticallyImplyLeading: DesktopTools.platform.isMobile, + expandedHeight: mediaQuery.mdAndDown ? 200 : 150, + title: const Text(""), + backgroundColor: Colors.transparent, + flexibleSpace: FlexibleSpaceBar( + centerTitle: DesktopTools.platform.isDesktop, + title: Text( + category.name!, + style: Theme.of(context).textTheme.headlineMedium?.copyWith( + color: Colors.white, + letterSpacing: 3, + shadows: [ + const Shadow( + offset: Offset(-1.5, -1.5), + color: Colors.black54, + ), + const Shadow( + offset: Offset(1.5, -1.5), + color: Colors.black54, + ), + const Shadow( + offset: Offset(1.5, 1.5), + color: Colors.black54, + ), + const Shadow( + offset: Offset(-1.5, 1.5), + color: Colors.black54, + ), + ], ), ), - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), - child: const ColoredBox(color: Colors.transparent), - ), + collapseMode: CollapseMode.parallax, ), - centerTitle: DesktopTools.platform.isDesktop, - title: Text( - category.name!, - style: Theme.of(context).textTheme.headlineMedium?.copyWith( - color: Colors.white, - letterSpacing: 3, - shadows: [ - const Shadow( - offset: Offset(-1.5, -1.5), - color: Colors.black54, - ), - const Shadow( - offset: Offset(1.5, -1.5), - color: Colors.black54, - ), - const Shadow( - offset: Offset(1.5, 1.5), - color: Colors.black54, - ), - const Shadow( - offset: Offset(-1.5, 1.5), - color: Colors.black54, - ), - ], - ), - ), - collapseMode: CollapseMode.parallax, ), - ), - const SliverGap(20), - SliverSafeArea( - top: false, - sliver: SliverPadding( - padding: EdgeInsets.symmetric( - horizontal: mediaQuery.mdAndDown ? 12 : 24, - ), - sliver: playlists.isEmpty - ? Skeletonizer.sliver( - child: SliverToBoxAdapter( - child: Wrap( - spacing: 12, - runSpacing: 12, - children: List.generate( - 6, - (index) => PlaylistCard(FakeData.playlist), + const SliverGap(20), + SliverSafeArea( + top: false, + sliver: SliverPadding( + padding: EdgeInsets.symmetric( + horizontal: mediaQuery.mdAndDown ? 12 : 24, + ), + sliver: playlists.isEmpty + ? Skeletonizer.sliver( + child: SliverToBoxAdapter( + child: Wrap( + spacing: 12, + runSpacing: 12, + children: List.generate( + 6, + (index) => PlaylistCard(FakeData.playlist), + ), ), ), - ), - ) - : SliverGrid.builder( - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 190, - mainAxisExtent: mediaQuery.mdAndDown ? 225 : 250, - crossAxisSpacing: 12, - mainAxisSpacing: 12, - ), - itemCount: playlists.length + 1, - itemBuilder: (context, index) { - final playlist = playlists.elementAtOrNull(index); + ) + : SliverGrid.builder( + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 190, + mainAxisExtent: mediaQuery.mdAndDown ? 225 : 250, + crossAxisSpacing: 12, + mainAxisSpacing: 12, + ), + itemCount: playlists.length + 1, + itemBuilder: (context, index) { + final playlist = playlists.elementAtOrNull(index); - if (playlist == null) { - if (!playlistsQuery.hasNextPage) { - return const SizedBox.shrink(); + if (playlist == null) { + if (!playlistsQuery.hasNextPage) { + return const SizedBox.shrink(); + } + return Skeletonizer( + enabled: true, + child: Waypoint( + controller: scrollController, + isGrid: true, + onTouchEdge: () async { + if (playlistsQuery.hasNextPage) { + await playlistsQuery.fetchNext(); + } + }, + child: PlaylistCard(FakeData.playlist), + ), + ); } - return Skeletonizer( - enabled: true, - child: Waypoint( - controller: scrollController, - isGrid: true, - onTouchEdge: () async { - if (playlistsQuery.hasNextPage) { - await playlistsQuery.fetchNext(); - } - }, - child: PlaylistCard(FakeData.playlist), - ), - ); - } - return Skeleton.keep( - child: PlaylistCard(playlist), - ); - }, - ), + return Skeleton.keep( + child: PlaylistCard(playlist), + ); + }, + ), + ), ), - ), - const SliverGap(20), - ], + const SliverGap(20), + ], + ), ), ); } diff --git a/lib/pages/home/genres/genres.dart b/lib/pages/home/genres/genres.dart index dc165fe4..17a67beb 100644 --- a/lib/pages/home/genres/genres.dart +++ b/lib/pages/home/genres/genres.dart @@ -15,7 +15,7 @@ import 'package:spotube/provider/user_preferences/user_preferences_provider.dart import 'package:spotube/services/queries/queries.dart'; class GenrePage extends HookConsumerWidget { - const GenrePage({Key? key}) : super(key: key); + const GenrePage({super.key}); @override Widget build(BuildContext context, ref) {