From 46b00bafdf71a4add61cf50168a32198c3293181 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Mon, 31 Oct 2022 23:28:10 +0600 Subject: [PATCH] feat: platform slider and progress indicator integration --- lib/components/Artist/ArtistProfile.dart | 7 +-- lib/components/Home/Sidebar.dart | 11 +++-- lib/components/Library/UserDownloads.dart | 2 +- lib/components/Player/Player.dart | 6 +-- lib/components/Player/PlayerControls.dart | 4 +- .../Playlist/PlaylistGenreView.dart | 3 +- lib/components/Search/Search.dart | 10 ++-- lib/components/Shared/HeartButton.dart | 8 ++-- lib/components/Shared/PlaybuttonCard.dart | 48 +++---------------- lib/components/Shared/TrackTile.dart | 2 +- lib/main.dart | 2 +- lib/themes/light-theme.dart | 5 +- 12 files changed, 40 insertions(+), 68 deletions(-) diff --git a/lib/components/Artist/ArtistProfile.dart b/lib/components/Artist/ArtistProfile.dart index 5d1e288f5..556ca6fa4 100644 --- a/lib/components/Artist/ArtistProfile.dart +++ b/lib/components/Artist/ArtistProfile.dart @@ -139,7 +139,8 @@ class ArtistProfile extends HookConsumerWidget { return const SizedBox( height: 20, width: 20, - child: CircularProgressIndicator(), + child: + PlatformCircularProgressIndicator(), ); } @@ -214,7 +215,7 @@ class ArtistProfile extends HookConsumerWidget { ); if (topTracksQuery.isLoading || !topTracksQuery.hasData) { - return const CircularProgressIndicator.adaptive(); + return const PlatformCircularProgressIndicator(); } else if (topTracksQuery.hasError) { return Center( child: Text(topTracksQuery.error.toString()), @@ -313,7 +314,7 @@ class ArtistProfile extends HookConsumerWidget { ); if (relatedArtists.isLoading || !relatedArtists.hasData) { - return const CircularProgressIndicator.adaptive(); + return const PlatformCircularProgressIndicator(); } else if (relatedArtists.hasError) { return Center( child: Text(relatedArtists.error.toString()), diff --git a/lib/components/Home/Sidebar.dart b/lib/components/Home/Sidebar.dart index 1d42c49e7..f31acde4e 100644 --- a/lib/components/Home/Sidebar.dart +++ b/lib/components/Home/Sidebar.dart @@ -141,7 +141,7 @@ class Sidebar extends HookConsumerWidget { ), Text( "Spotube", - style: Theme.of(context).textTheme.headline4, + style: PlatformTheme.of(context).textTheme?.headline, ), PlatformIconButton( icon: const Icon(Icons.menu_rounded), @@ -207,7 +207,7 @@ class SidebarFooter extends HookConsumerWidget { children: [ if (auth.isLoggedIn && data == null) const Center( - child: CircularProgressIndicator(), + child: PlatformCircularProgressIndicator(), ) else if (data != null) Flexible( @@ -233,9 +233,10 @@ class SidebarFooter extends HookConsumerWidget { maxLines: 1, softWrap: false, overflow: TextOverflow.fade, - style: const TextStyle( - fontWeight: FontWeight.bold, - ), + style: PlatformTheme.of(context) + .textTheme + ?.body + ?.copyWith(fontWeight: FontWeight.bold), ), ), ], diff --git a/lib/components/Library/UserDownloads.dart b/lib/components/Library/UserDownloads.dart index 4ceaf3d5c..340d80718 100644 --- a/lib/components/Library/UserDownloads.dart +++ b/lib/components/Library/UserDownloads.dart @@ -67,7 +67,7 @@ class UserDownloads extends HookConsumerWidget { trailing: const SizedBox( width: 30, height: 30, - child: CircularProgressIndicator.adaptive(), + child: PlatformCircularProgressIndicator(), ), subtitle: Text( TypeConversionUtils.artists_X_String( diff --git a/lib/components/Player/Player.dart b/lib/components/Player/Player.dart index 1f09f57b3..37e35c249 100644 --- a/lib/components/Player/Player.dart +++ b/lib/components/Player/Player.dart @@ -68,13 +68,13 @@ class Player extends HookConsumerWidget { android: null, ios: Border( top: BorderSide( - color: CupertinoTheme.of(context).barBackgroundColor, + color: PlatformTheme.of(context).borderColor ?? Colors.transparent, width: 1, ), ), macos: Border( top: BorderSide( - color: MacosTheme.of(context).dividerColor, + color: PlatformTheme.of(context).borderColor ?? Colors.transparent, width: 1, ), ), @@ -130,7 +130,7 @@ class Player extends HookConsumerWidget { } } }, - child: Slider.adaptive( + child: PlatformSlider( min: 0, max: 1, value: volume.value, diff --git a/lib/components/Player/PlayerControls.dart b/lib/components/Player/PlayerControls.dart index 381efac2d..0bfc88187 100644 --- a/lib/components/Player/PlayerControls.dart +++ b/lib/components/Player/PlayerControls.dart @@ -97,7 +97,7 @@ class PlayerControls extends HookConsumerWidget { children: [ Tooltip( message: "Slide to seek forward or backward", - child: Slider.adaptive( + child: PlatformSlider( focusNode: FocusNode(), // cannot divide by zero // there's an edge case for value being bigger @@ -174,7 +174,7 @@ class PlayerControls extends HookConsumerWidget { ? const SizedBox( height: 20, width: 20, - child: CircularProgressIndicator(), + child: PlatformCircularProgressIndicator(), ) : Icon( playback.isPlaying diff --git a/lib/components/Playlist/PlaylistGenreView.dart b/lib/components/Playlist/PlaylistGenreView.dart index aa519f2c8..a9191b6a3 100644 --- a/lib/components/Playlist/PlaylistGenreView.dart +++ b/lib/components/Playlist/PlaylistGenreView.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:platform_ui/platform_ui.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/components/Playlist/PlaylistCard.dart'; import 'package:spotube/components/Shared/PageWindowTitleBar.dart'; @@ -47,7 +48,7 @@ class PlaylistGenreView extends ConsumerWidget { return const Center(child: Text("Error occurred")); } if (!snapshot.hasData) { - return const CircularProgressIndicator.adaptive(); + return const PlatformCircularProgressIndicator(); } return Center( child: Wrap( diff --git a/lib/components/Search/Search.dart b/lib/components/Search/Search.dart index d31539a47..39982108b 100644 --- a/lib/components/Search/Search.dart +++ b/lib/components/Search/Search.dart @@ -143,7 +143,7 @@ class Search extends HookConsumerWidget { ), if (searchTrack.isLoading && !searchTrack.isFetchingNextPage) - const CircularProgressIndicator() + const PlatformCircularProgressIndicator() else if (searchTrack.hasError) Text( searchTrack.error?[searchTrack.pageParams.last]) @@ -190,7 +190,7 @@ class Search extends HookConsumerWidget { ? null : () => searchTrack.fetchNextPage(), child: searchTrack.isFetchingNextPage - ? const CircularProgressIndicator() + ? const PlatformCircularProgressIndicator() : const Text("Load more"), ), ), @@ -202,7 +202,7 @@ class Search extends HookConsumerWidget { const SizedBox(height: 10), if (searchPlaylist.isLoading && !searchPlaylist.isFetchingNextPage) - const CircularProgressIndicator() + const PlatformCircularProgressIndicator() else if (searchPlaylist.hasError) Text(searchPlaylist .error?[searchPlaylist.pageParams.last]) @@ -256,7 +256,7 @@ class Search extends HookConsumerWidget { const SizedBox(height: 10), if (searchArtist.isLoading && !searchArtist.isFetchingNextPage) - const CircularProgressIndicator() + const PlatformCircularProgressIndicator() else if (searchArtist.hasError) Text(searchArtist .error?[searchArtist.pageParams.last]) @@ -310,7 +310,7 @@ class Search extends HookConsumerWidget { const SizedBox(height: 10), if (searchAlbum.isLoading && !searchAlbum.isFetchingNextPage) - const CircularProgressIndicator() + const PlatformCircularProgressIndicator() else if (searchAlbum.hasError) Text( searchAlbum.error?[searchAlbum.pageParams.last]) diff --git a/lib/components/Shared/HeartButton.dart b/lib/components/Shared/HeartButton.dart index b119cb9c4..6b87e6d95 100644 --- a/lib/components/Shared/HeartButton.dart +++ b/lib/components/Shared/HeartButton.dart @@ -122,7 +122,7 @@ class TrackHeartButton extends HookConsumerWidget { ); final toggler = useTrackToggleLike(track, ref); if (toggler.item3.isLoading || !toggler.item3.hasData) { - return const CircularProgressIndicator(); + return const PlatformCircularProgressIndicator(); } return HeartButton( @@ -182,7 +182,8 @@ class PlaylistHeartButton extends HookConsumerWidget { titleImage, ).dominantColor; - if (me.isLoading || !me.hasData) return const CircularProgressIndicator(); + if (me.isLoading || !me.hasData) + return const PlatformCircularProgressIndicator(); return HeartButton( isLiked: isLikedQuery.data ?? false, @@ -236,7 +237,8 @@ class AlbumHeartButton extends HookConsumerWidget { }, ); - if (me.isLoading || !me.hasData) return const CircularProgressIndicator(); + if (me.isLoading || !me.hasData) + return const PlatformCircularProgressIndicator(); return HeartButton( isLiked: isLiked, diff --git a/lib/components/Shared/PlaybuttonCard.dart b/lib/components/Shared/PlaybuttonCard.dart index 3c21c581d..b86c2a927 100644 --- a/lib/components/Shared/PlaybuttonCard.dart +++ b/lib/components/Shared/PlaybuttonCard.dart @@ -32,17 +32,7 @@ class PlaybuttonCard extends HookWidget { @override Widget build(BuildContext context) { - final backgroundColor = usePlatformProperty( - (context) => PlatformProperty( - android: Theme.of(context).backgroundColor, - ios: CupertinoTheme.of(context).scaffoldBackgroundColor, - macos: MacosTheme.of(context).brightness == Brightness.dark - ? Colors.grey[800] - : Colors.blueGrey[50], - linux: Theme.of(context).backgroundColor, - windows: FluentUI.FluentTheme.maybeOf(context)?.scaffoldBackgroundColor, - ), - ); + final backgroundColor = PlatformTheme.of(context).secondaryBackgroundColor; final boxShadow = usePlatformProperty( (context) => PlatformProperty( @@ -64,28 +54,9 @@ class PlaybuttonCard extends HookWidget { ), ); - final titleStyle = usePlatformProperty( - (context) => PlatformProperty( - android: Theme.of(context).textTheme.bodyMedium, - ios: CupertinoTheme.of(context).textTheme.textStyle, - macos: MacosTheme.of(context).typography.body, - linux: Theme.of(context).textTheme.bodyMedium, - windows: FluentUI.FluentTheme.maybeOf(context)?.typography.body, - ), - ); + final titleStyle = PlatformTextTheme.of(context).body; - final descriptionStyle = usePlatformProperty( - (context) => PlatformProperty( - android: Theme.of(context).textTheme.caption, - ios: CupertinoTheme.of(context) - .textTheme - .textStyle - .copyWith(fontSize: 13), - macos: MacosTheme.of(context).typography.caption1, - linux: Theme.of(context).textTheme.caption, - windows: FluentUI.FluentTheme.maybeOf(context)?.typography.caption, - ), - ); + final descriptionStyle = PlatformTextTheme.of(context).caption; final splash = usePlatformProperty( (context) => PlatformProperty.multiPlatformGroup({ @@ -98,15 +69,7 @@ class PlaybuttonCard extends HookWidget { }), ); - final iconBgColor = usePlatformProperty( - (context) => PlatformProperty( - android: Theme.of(context).primaryColor, - ios: CupertinoTheme.of(context).primaryColor, - macos: MacosTheme.of(context).primaryColor, - linux: Theme.of(context).primaryColor, - windows: FluentUI.FluentTheme.maybeOf(context)?.accentColor, - ), - ); + final iconBgColor = PlatformTheme.of(context).primaryColor; return Container( margin: margin, @@ -174,7 +137,8 @@ class PlaybuttonCard extends HookWidget { ? const SizedBox( height: 23, width: 23, - child: CircularProgressIndicator(), + child: + PlatformCircularProgressIndicator(), ) : Icon( isPlaying diff --git a/lib/components/Shared/TrackTile.dart b/lib/components/Shared/TrackTile.dart index b3c185422..4605fd0bc 100644 --- a/lib/components/Shared/TrackTile.dart +++ b/lib/components/Shared/TrackTile.dart @@ -132,7 +132,7 @@ class TrackTile extends HookConsumerWidget { width: 300, child: !snapshot.hasData ? const Center( - child: CircularProgressIndicator.adaptive()) + child: PlatformCircularProgressIndicator()) : ListView.builder( shrinkWrap: true, itemCount: snapshot.data!.length, diff --git a/lib/main.dart b/lib/main.dart index cdc1260e0..688cf9c2b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -201,7 +201,7 @@ class SpotubeState extends ConsumerState with WidgetsBindingObserver { }; }, []); - platform = TargetPlatform.macOS; + platform = TargetPlatform.windows; return PlatformApp.router( routeInformationParser: router.routeInformationParser, diff --git a/lib/themes/light-theme.dart b/lib/themes/light-theme.dart index 030fafd8b..dbf5996a7 100644 --- a/lib/themes/light-theme.dart +++ b/lib/themes/light-theme.dart @@ -139,6 +139,9 @@ final macosTheme = MacosThemeData.light().copyWith( ), iconTheme: MacosIconThemeData(size: 16), iconButtonTheme: MacosIconButtonThemeData(), + typography: MacosTypography(color: Colors.green), +); +final macosDarkTheme = MacosThemeData.dark().copyWith( + typography: MacosTypography(color: Colors.red), ); -final macosDarkTheme = MacosThemeData.dark(); final iosTheme = CupertinoThemeData();