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

fix: track collection view status bar not transparent

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-06-20 10:25:57 +06:00
parent c93c229b0f
commit 9251121ba0
3 changed files with 227 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
lib/components/shared/track_table/track_collection_view/track_collection_heading.dart
View File

@ -71,118 +71,121 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 20, horizontal: 20,
), ),
child: Flex( child: SafeArea(
direction: child: Flex(
constrains.mdAndDown ? Axis.vertical : Axis.horizontal, direction: constrains.mdAndDown
mainAxisAlignment: MainAxisAlignment.center, ? Axis.vertical
children: [ : Axis.horizontal,
ConstrainedBox( mainAxisAlignment: MainAxisAlignment.center,
constraints: const BoxConstraints(maxHeight: 200), children: [
child: ClipRRect( ConstrainedBox(
borderRadius: BorderRadius.circular(10), constraints: const BoxConstraints(maxHeight: 200),
child: UniversalImage( child: ClipRRect(
path: titleImage, borderRadius: BorderRadius.circular(10),
placeholder: Assets.albumPlaceholder.path, child: UniversalImage(
path: titleImage,
placeholder: Assets.albumPlaceholder.path,
),
), ),
), ),
), const SizedBox(width: 10, height: 10),
const SizedBox(width: 10, height: 10), Column(
Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max,
mainAxisSize: MainAxisSize.max, children: [
children: [
Text(
title,
style: theme.textTheme.titleLarge!.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
if (album != null)
Text( Text(
"${AlbumType.from(album?.albumType).formatted} • ${context.l10n.released} • ${DateTime.tryParse( title,
album?.releaseDate ?? "", style: theme.textTheme.titleLarge!.copyWith(
)?.year}",
style: theme.textTheme.titleMedium!.copyWith(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.normal, fontWeight: FontWeight.w600,
), ),
), ),
if (description != null) if (album != null)
Text(
"${AlbumType.from(album?.albumType).formatted} • ${context.l10n.released} • ${DateTime.tryParse(
album?.releaseDate ?? "",
)?.year}",
style: theme.textTheme.titleMedium!.copyWith(
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
if (description != null)
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constrains.mdAndDown ? 400 : 300,
),
child: Text(
description!,
style: const TextStyle(color: Colors.white),
maxLines: 2,
overflow: TextOverflow.fade,
),
),
const SizedBox(height: 10),
IconTheme(
data: theme.iconTheme.copyWith(
color: Colors.white,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
),
),
const SizedBox(height: 10),
ConstrainedBox( ConstrainedBox(
constraints: BoxConstraints( constraints: BoxConstraints(
maxWidth: constrains.mdAndDown ? 400 : 300, maxWidth: constrains.mdAndDown ? 400 : 300,
), ),
child: Text( child: Row(
description!, mainAxisSize: constrains.smAndUp
style: const TextStyle(color: Colors.white), ? MainAxisSize.min
maxLines: 2, : MainAxisSize.min,
overflow: TextOverflow.fade, children: [
Expanded(
child: FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: color?.color,
),
label: Text(context.l10n.shuffle),
icon: const Icon(SpotubeIcons.shuffle),
onPressed: tracksSnapshot.data == null ||
isPlaying
? null
: onShuffledPlay,
),
),
const SizedBox(width: 10),
Expanded(
child: FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: color?.color,
foregroundColor: color?.bodyTextColor,
),
onPressed: tracksSnapshot.data != null
? onPlay
: null,
icon: Icon(
isPlaying
? SpotubeIcons.stop
: SpotubeIcons.play,
),
label: Text(
isPlaying
? context.l10n.stop
: context.l10n.play,
),
),
),
],
), ),
), ),
const SizedBox(height: 10), ],
IconTheme( )
data: theme.iconTheme.copyWith( ],
color: Colors.white, ),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
),
),
const SizedBox(height: 10),
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constrains.mdAndDown ? 400 : 300,
),
child: Row(
mainAxisSize: constrains.smAndUp
? MainAxisSize.min
: MainAxisSize.min,
children: [
Expanded(
child: FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: color?.color,
),
label: Text(context.l10n.shuffle),
icon: const Icon(SpotubeIcons.shuffle),
onPressed:
tracksSnapshot.data == null || isPlaying
? null
: onShuffledPlay,
),
),
const SizedBox(width: 10),
Expanded(
child: FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: color?.color,
foregroundColor: color?.bodyTextColor,
),
onPressed: tracksSnapshot.data != null
? onPlay
: null,
icon: Icon(
isPlaying
? SpotubeIcons.stop
: SpotubeIcons.play,
),
label: Text(
isPlaying
? context.l10n.stop
: context.l10n.play,
),
),
),
],
),
),
],
)
],
), ),
), ),
), ),

249
lib/components/shared/track_table/track_collection_view/track_collection_view.dart
View File

@ -106,139 +106,136 @@ class TrackCollectionView<T> extends HookConsumerWidget {
return () => controller.removeListener(listener); return () => controller.removeListener(listener);
}, [collapsed.value]); }, [collapsed.value]);
return SafeArea( return Scaffold(
bottom: false, appBar: kIsDesktop
child: Scaffold( ? const PageWindowTitleBar(
appBar: kIsDesktop backgroundColor: Colors.transparent,
? const PageWindowTitleBar( foregroundColor: Colors.white,
backgroundColor: Colors.transparent, leadingWidth: 400,
foregroundColor: Colors.white, leading: Align(
leadingWidth: 400, alignment: Alignment.centerLeft,
leading: Align( child: BackButton(color: Colors.white),
alignment: Alignment.centerLeft, ),
child: BackButton(color: Colors.white), )
: null,
extendBodyBehindAppBar: kIsDesktop,
body: RefreshIndicator(
onRefresh: () async {
await tracksSnapshot.refresh();
},
child: CustomScrollView(
controller: controller,
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverAppBar(
actions: [
AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: collapsed.value ? 1 : 0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
),
), ),
) AnimatedScale(
: null, duration: const Duration(milliseconds: 200),
extendBodyBehindAppBar: kIsDesktop, scale: collapsed.value ? 1 : 0,
body: RefreshIndicator( child: IconButton(
onRefresh: () async { tooltip: context.l10n.shuffle,
await tracksSnapshot.refresh(); icon: const Icon(SpotubeIcons.shuffle),
}, onPressed: isPlaying ? null : onShuffledPlay,
child: CustomScrollView(
controller: controller,
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverAppBar(
actions: [
AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: collapsed.value ? 1 : 0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
),
), ),
AnimatedScale( ),
duration: const Duration(milliseconds: 200), AnimatedScale(
scale: collapsed.value ? 1 : 0, duration: const Duration(milliseconds: 200),
child: IconButton( scale: collapsed.value ? 1 : 0,
tooltip: context.l10n.shuffle, child: ElevatedButton(
icon: const Icon(SpotubeIcons.shuffle), style: ElevatedButton.styleFrom(
onPressed: isPlaying ? null : onShuffledPlay, shape: const CircleBorder(),
backgroundColor: theme.colorScheme.inversePrimary,
), ),
onPressed: tracksSnapshot.data != null ? onPlay : null,
child: Icon(
isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
), ),
AnimatedScale( ),
duration: const Duration(milliseconds: 200), ],
scale: collapsed.value ? 1 : 0, floating: false,
child: ElevatedButton( pinned: true,
style: ElevatedButton.styleFrom( expandedHeight: 400,
shape: const CircleBorder(), automaticallyImplyLeading: kIsMobile,
backgroundColor: theme.colorScheme.inversePrimary, leading:
kIsMobile ? const BackButton(color: Colors.white) : null,
iconTheme: IconThemeData(color: color?.titleTextColor),
primary: true,
backgroundColor: color?.color,
title: collapsed.value
? Text(
title,
style: theme.textTheme.titleMedium!.copyWith(
color: color?.titleTextColor,
fontWeight: FontWeight.w600,
), ),
onPressed: tracksSnapshot.data != null ? onPlay : null, )
child: Icon( : null,
isPlaying ? SpotubeIcons.stop : SpotubeIcons.play), centerTitle: true,
), flexibleSpace: FlexibleSpaceBar(
), background: TrackCollectionHeading<T>(
], color: color,
floating: false, title: title,
pinned: true, description: description,
expandedHeight: 400, titleImage: titleImage,
automaticallyImplyLeading: kIsMobile, isPlaying: isPlaying,
leading: onPlay: onPlay,
kIsMobile ? const BackButton(color: Colors.white) : null, onShuffledPlay: onShuffledPlay,
iconTheme: IconThemeData(color: color?.titleTextColor), tracksSnapshot: tracksSnapshot,
primary: true, buttons: buttons,
backgroundColor: color?.color, album: album,
title: collapsed.value
? Text(
title,
style: theme.textTheme.titleMedium!.copyWith(
color: color?.titleTextColor,
fontWeight: FontWeight.w600,
),
)
: null,
centerTitle: true,
flexibleSpace: FlexibleSpaceBar(
background: TrackCollectionHeading<T>(
color: color,
title: title,
description: description,
titleImage: titleImage,
isPlaying: isPlaying,
onPlay: onPlay,
onShuffledPlay: onShuffledPlay,
tracksSnapshot: tracksSnapshot,
buttons: buttons,
album: album,
),
), ),
), ),
HookBuilder( ),
builder: (context) { HookBuilder(
if (tracksSnapshot.isLoading || !tracksSnapshot.hasData) { builder: (context) {
return const ShimmerTrackTile(); if (tracksSnapshot.isLoading || !tracksSnapshot.hasData) {
} else if (tracksSnapshot.hasError) { return const ShimmerTrackTile();
return SliverToBoxAdapter( } else if (tracksSnapshot.hasError) {
child: Text( return SliverToBoxAdapter(
context.l10n.error(tracksSnapshot.error ?? ""), child: Text(
), context.l10n.error(tracksSnapshot.error ?? ""),
); ),
}
return TracksTableView(
(tracksSnapshot.data ?? []).map(
(track) {
if (track is Track) {
return track;
} else {
return TypeConversionUtils.simpleTrack_X_Track(
track,
album!,
);
}
},
).toList(),
onTrackPlayButtonPressed: onPlay,
playlistId: id,
userPlaylist: isOwned,
onFiltering: () {
// scroll the flexible space
// to allow more space for search results
controller.animateTo(
330,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
);
},
); );
}, }
)
], return TracksTableView(
), (tracksSnapshot.data ?? []).map(
)), (track) {
); if (track is Track) {
return track;
} else {
return TypeConversionUtils.simpleTrack_X_Track(
track,
album!,
);
}
},
).toList(),
onTrackPlayButtonPressed: onPlay,
playlistId: id,
userPlaylist: isOwned,
onFiltering: () {
// scroll the flexible space
// to allow more space for search results
controller.animateTo(
330,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
);
},
);
},
)
],
),
));
} }
} }

2
lib/main.dart
View File

@ -132,7 +132,7 @@ Future<void> main(List<String> rawArgs) async {
runApp( runApp(
DevicePreview( DevicePreview(
availableLocales: L10n.all, availableLocales: L10n.all,
enabled: !kReleaseMode, enabled: !kReleaseMode && DesktopTools.platform.isDesktop,
builder: (context) { builder: (context) {
return ProviderScope( return ProviderScope(
child: QueryClientProvider( child: QueryClientProvider(