From 8c6c6a96b19c2b7489fbd4ae8267bef15b46cacc Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Tue, 23 Jan 2024 09:21:45 +0600 Subject: [PATCH] feat: add friend activity in home screen --- lib/collections/fake.dart | 32 +++++ lib/components/home/sections/friends.dart | 96 +++++++++++++ .../home/sections/friends/friend_item.dart | 136 ++++++++++++++++++ .../shared/page_window_title_bar.dart | 4 +- lib/l10n/app_en.arb | 3 +- lib/models/spotify_friends.dart | 11 ++ lib/pages/home/home.dart | 2 + lib/services/queries/user.dart | 13 ++ untranslated_messages.json | 51 ++++--- 9 files changed, 327 insertions(+), 21 deletions(-) create mode 100644 lib/components/home/sections/friends.dart create mode 100644 lib/components/home/sections/friends/friend_item.dart diff --git a/lib/collections/fake.dart b/lib/collections/fake.dart index 10cf2819..8f5f9e8b 100644 --- a/lib/collections/fake.dart +++ b/lib/collections/fake.dart @@ -1,5 +1,6 @@ import 'package:spotify/spotify.dart'; import 'package:spotube/extensions/track.dart'; +import 'package:spotube/models/spotify_friends.dart'; abstract class FakeData { static final Image image = Image() @@ -164,4 +165,35 @@ abstract class FakeData { ..icons = [image] ..id = "1" ..name = "category"; + + static final friends = SpotifyFriends( + friends: [ + for (var i = 0; i < 3; i++) + SpotifyFriendActivity( + user: const SpotifyFriend( + name: "name", + imageUrl: "imageUrl", + uri: "uri", + ), + track: SpotifyActivityTrack( + name: "name", + artist: const SpotifyActivityArtist( + name: "name", + uri: "uri", + ), + album: const SpotifyActivityAlbum( + name: "name", + uri: "uri", + ), + context: SpotifyActivityContext( + name: "name", + index: i, + uri: "uri", + ), + imageUrl: "imageUrl", + uri: "uri", + ), + ), + ], + ); } diff --git a/lib/components/home/sections/friends.dart b/lib/components/home/sections/friends.dart new file mode 100644 index 00000000..208c25be --- /dev/null +++ b/lib/components/home/sections/friends.dart @@ -0,0 +1,96 @@ +import 'package:flutter/material.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:skeletonizer/skeletonizer.dart'; +import 'package:spotube/collections/fake.dart'; +import 'package:spotube/components/home/sections/friends/friend_item.dart'; +import 'package:spotube/hooks/utils/use_breakpoint_value.dart'; +import 'package:spotube/models/spotify_friends.dart'; +import 'package:spotube/services/queries/queries.dart'; + +class HomePageFriendsSection extends HookConsumerWidget { + const HomePageFriendsSection({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, ref) { + final friendsQuery = useQueries.user.friendActivity(ref); + final friends = friendsQuery.data?.friends ?? FakeData.friends.friends; + + final groupCount = useBreakpointValue( + sm: 3, + xs: 2, + md: 4, + lg: 5, + xl: 6, + xxl: 7, + ); + + final friendGroup = friends.fold>>( + [], + (previousValue, element) { + if (previousValue.isEmpty) { + return [ + [element] + ]; + } + + final lastGroup = previousValue.last; + if (lastGroup.length < groupCount) { + return [ + ...previousValue.sublist(0, previousValue.length - 1), + [...lastGroup, element] + ]; + } + + return [ + ...previousValue, + [element] + ]; + }, + ); + + if (friendsQuery.hasData && + friendsQuery.data?.friends.isEmpty == true && + !friendsQuery.isLoading) { + return const SliverToBoxAdapter( + child: SizedBox.shrink(), + ); + } + + return Skeletonizer.sliver( + enabled: friendsQuery.isLoading, + child: SliverMainAxisGroup( + slivers: [ + SliverToBoxAdapter( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + 'Friends', + style: Theme.of(context).textTheme.titleMedium, + ), + ), + ), + SliverToBoxAdapter( + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + for (final group in friendGroup) + Row( + children: [ + for (final friend in group) + Padding( + padding: const EdgeInsets.all(8.0), + child: FriendItem(friend: friend), + ), + ], + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/components/home/sections/friends/friend_item.dart b/lib/components/home/sections/friends/friend_item.dart new file mode 100644 index 00000000..fcdadab7 --- /dev/null +++ b/lib/components/home/sections/friends/friend_item.dart @@ -0,0 +1,136 @@ +import 'package:fl_query_hooks/fl_query_hooks.dart'; +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; +import 'package:gap/gap.dart'; +import 'package:go_router/go_router.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:spotify/spotify.dart'; +import 'package:spotube/collections/spotube_icons.dart'; +import 'package:spotube/components/shared/image/universal_image.dart'; +import 'package:spotube/models/spotify_friends.dart'; +import 'package:spotube/provider/spotify_provider.dart'; + +class FriendItem extends HookConsumerWidget { + final SpotifyFriendActivity friend; + const FriendItem({ + Key? key, + required this.friend, + }) : super(key: key); + + @override + Widget build(BuildContext context, ref) { + final ThemeData( + textTheme: textTheme, + colorScheme: colorScheme, + ) = Theme.of(context); + + final queryClient = useQueryClient(); + final spotify = ref.watch(spotifyProvider); + + return Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration( + color: colorScheme.surfaceVariant.withOpacity(0.3), + borderRadius: BorderRadius.circular(15), + ), + constraints: const BoxConstraints( + minWidth: 300, + ), + height: 80, + child: Row( + children: [ + CircleAvatar( + backgroundImage: UniversalImage.imageProvider( + friend.user.imageUrl, + ), + ), + const Gap(8), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + friend.user.name, + style: textTheme.bodyLarge, + ), + RichText( + text: TextSpan( + style: textTheme.bodySmall, + children: [ + TextSpan( + text: friend.track.name, + recognizer: TapGestureRecognizer() + ..onTap = () { + context.push("/track/${friend.track.id}"); + }, + ), + const TextSpan(text: " • "), + const WidgetSpan( + child: Icon( + SpotubeIcons.artist, + size: 12, + ), + ), + TextSpan( + text: " ${friend.track.artist.name}", + recognizer: TapGestureRecognizer() + ..onTap = () { + context.push( + "/artist/${friend.track.artist.id}", + ); + }, + ), + const TextSpan(text: "\n"), + TextSpan( + text: friend.track.context.name, + recognizer: TapGestureRecognizer() + ..onTap = () async { + context.push( + "/${friend.track.context.path}", + extra: !friend.track.context.path + .startsWith("album") + ? null + : await queryClient.fetchQuery( + "album/${friend.track.album.id}", + () => spotify.albums.get( + friend.track.album.id, + ), + ), + ); + }, + ), + const TextSpan(text: " • "), + const WidgetSpan( + child: Icon( + SpotubeIcons.album, + size: 12, + ), + ), + TextSpan( + text: " ${friend.track.album.name}", + recognizer: TapGestureRecognizer() + ..onTap = () async { + final album = + await queryClient.fetchQuery( + "album/${friend.track.album.id}", + () => spotify.albums.get( + friend.track.album.id, + ), + ); + if (context.mounted) { + context.push( + "/album/${friend.track.album.id}", + extra: album, + ); + } + }, + ), + ], + ), + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart index d8e20184..4f522e0c 100644 --- a/lib/components/shared/page_window_title_bar.dart +++ b/lib/components/shared/page_window_title_bar.dart @@ -2,14 +2,12 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:spotube/provider/user_preferences/user_preferences_provider.dart'; -import 'package:spotube/provider/user_preferences/user_preferences_state.dart'; import 'package:spotube/utils/platform.dart'; import 'package:titlebar_buttons/titlebar_buttons.dart'; import 'dart:math'; import 'package:flutter/foundation.dart' show kIsWeb; -import 'dart:io' show Platform, exit; +import 'dart:io' show Platform; import 'package:flutter_desktop_tools/flutter_desktop_tools.dart'; -import 'package:local_notifier/local_notifier.dart'; class PageWindowTitleBar extends StatefulHookConsumerWidget implements PreferredSizeWidget { diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index 82877ea1..6b61cbae 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -284,5 +284,6 @@ "discord_rich_presence": "Discord Rich Presence", "browse_all": "Browse All", "genres": "Genres", - "explore_genres": "Explore Genres" + "explore_genres": "Explore Genres", + "friends": "Friends" } \ No newline at end of file diff --git a/lib/models/spotify_friends.dart b/lib/models/spotify_friends.dart index d8e79770..b386fb81 100644 --- a/lib/models/spotify_friends.dart +++ b/lib/models/spotify_friends.dart @@ -16,6 +16,8 @@ class SpotifyFriend { factory SpotifyFriend.fromJson(Map json) => _$SpotifyFriendFromJson(json); + + String get id => uri.split(":").last; } @JsonSerializable(createToJson: false) @@ -27,6 +29,8 @@ class SpotifyActivityArtist { factory SpotifyActivityArtist.fromJson(Map json) => _$SpotifyActivityArtistFromJson(json); + + String get id => uri.split(":").last; } @JsonSerializable(createToJson: false) @@ -38,6 +42,8 @@ class SpotifyActivityAlbum { factory SpotifyActivityAlbum.fromJson(Map json) => _$SpotifyActivityAlbumFromJson(json); + + String get id => uri.split(":").last; } @JsonSerializable(createToJson: false) @@ -54,6 +60,9 @@ class SpotifyActivityContext { factory SpotifyActivityContext.fromJson(Map json) => _$SpotifyActivityContextFromJson(json); + + String get id => uri.split(":").last; + String get path => uri.split(":").skip(1).join("/"); } @JsonSerializable(createToJson: false) @@ -76,6 +85,8 @@ class SpotifyActivityTrack { factory SpotifyActivityTrack.fromJson(Map json) => _$SpotifyActivityTrackFromJson(json); + + String get id => uri.split(":").last; } @JsonSerializable(createToJson: false) diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart index 9b33a66c..eb2ddb94 100644 --- a/lib/pages/home/home.dart +++ b/lib/pages/home/home.dart @@ -3,6 +3,7 @@ import 'package:flutter_desktop_tools/flutter_desktop_tools.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:spotube/components/home/sections/featured.dart'; +import 'package:spotube/components/home/sections/friends.dart'; import 'package:spotube/components/home/sections/genres.dart'; import 'package:spotube/components/home/sections/made_for_user.dart'; import 'package:spotube/components/home/sections/new_releases.dart'; @@ -31,6 +32,7 @@ class HomePage extends HookConsumerWidget { HomeNewReleasesSection(), ], ), + const HomePageFriendsSection(), const SliverSafeArea(sliver: HomeMadeForUserSection()), ], ), diff --git a/lib/services/queries/user.dart b/lib/services/queries/user.dart index 40799c1e..82af600f 100644 --- a/lib/services/queries/user.dart +++ b/lib/services/queries/user.dart @@ -3,7 +3,9 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/hooks/spotify/use_spotify_query.dart'; +import 'package:spotube/models/spotify_friends.dart'; import 'package:spotube/provider/authentication_provider.dart'; +import 'package:spotube/provider/custom_spotify_endpoint_provider.dart'; import 'package:spotube/utils/type_conversion_utils.dart'; class UserQueries { @@ -37,4 +39,15 @@ class UserQueries { ref: ref, ); } + + Query friendActivity(WidgetRef ref) { + final customSpotify = ref.read(customSpotifyEndpointProvider); + return useSpotifyQuery( + "friend-activity", + (spotify) { + return customSpotify.getFriendActivity(); + }, + ref: ref, + ); + } } diff --git a/untranslated_messages.json b/untranslated_messages.json index 59b26614..2fd7ceca 100644 --- a/untranslated_messages.json +++ b/untranslated_messages.json @@ -1,86 +1,103 @@ { "ar": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "bn": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "ca": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "de": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "es": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "fa": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "fr": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "hi": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "it": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "ja": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "nl": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "pl": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "pt": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "ru": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "tr": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "uk": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ], "zh": [ "step_3_steps", - "step_4_steps" + "step_4_steps", + "friends" ] }