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

feat: add spotify friends activity (#1130)

Browse Source 
* feat: add spotify friend endpoint

* feat: add friend activity in home screen

* fix: when no friends, dummy UI still shows giving the user a false hope of friendship :'(
This commit is contained in:
Kingkor Roy Tirtho 2024-01-23 22:44:00 +06:00 committed by GitHub
parent 682e88e0c5
commit 79839329b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 507 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
lib/collections/fake.dart
View File

@ -1,5 +1,6 @@
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/extensions/track.dart'; import 'package:spotube/extensions/track.dart';
import 'package:spotube/models/spotify_friends.dart';
abstract class FakeData { abstract class FakeData {
static final Image image = Image() static final Image image = Image()
@ -164,4 +165,35 @@ abstract class FakeData {
..icons = [image] ..icons = [image]
..id = "1" ..id = "1"
..name = "category"; ..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",
),
),
],
);
} }

95
lib/components/home/sections/friends.dart Normal file
View File

@ -0,0 +1,95 @@
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<List<List<SpotifyFriendActivity>>>(
[],
(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.isLoading &&
(!friendsQuery.hasData || friendsQuery.data!.friends.isEmpty)) {
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),
),
],
),
],
),
),
),
],
),
);
}
}

136
lib/components/home/sections/friends/friend_item.dart Normal file
View File

@ -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, dynamic>(
"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, dynamic>(
"album/${friend.track.album.id}",
() => spotify.albums.get(
friend.track.album.id,
),
);
if (context.mounted) {
context.push(
"/album/${friend.track.album.id}",
extra: album,
);
}
},
),
],
),
),
],
),
],
),
);
}
}

4
lib/components/shared/page_window_title_bar.dart
View File

@ -2,14 +2,12 @@ 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:spotube/provider/user_preferences/user_preferences_provider.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:spotube/utils/platform.dart';
import 'package:titlebar_buttons/titlebar_buttons.dart'; import 'package:titlebar_buttons/titlebar_buttons.dart';
import 'dart:math'; import 'dart:math';
import 'package:flutter/foundation.dart' show kIsWeb; 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:flutter_desktop_tools/flutter_desktop_tools.dart';
import 'package:local_notifier/local_notifier.dart';
class PageWindowTitleBar extends StatefulHookConsumerWidget class PageWindowTitleBar extends StatefulHookConsumerWidget
implements PreferredSizeWidget { implements PreferredSizeWidget {

3
lib/l10n/app_en.arb
View File

@ -284,5 +284,6 @@
"discord_rich_presence": "Discord Rich Presence", "discord_rich_presence": "Discord Rich Presence",
"browse_all": "Browse All", "browse_all": "Browse All",
"genres": "Genres", "genres": "Genres",
"explore_genres": "Explore Genres" "explore_genres": "Explore Genres",
"friends": "Friends"
} }

4
lib/main.dart
View File

@ -228,7 +228,9 @@ class SpotubeState extends ConsumerState<Spotube> {
builder: (context, child) { builder: (context, child) {
return DevicePreview.appBuilder( return DevicePreview.appBuilder(
context, context,
DragToResizeArea(child: child!), DesktopTools.platform.isDesktop
? DragToResizeArea(child: child!)
: child,
); );
}, },
themeMode: themeMode, themeMode: themeMode,

111
lib/models/spotify_friends.dart Normal file
View File

@ -0,0 +1,111 @@
import 'package:json_annotation/json_annotation.dart';
part 'spotify_friends.g.dart';
@JsonSerializable(createToJson: false)
class SpotifyFriend {
final String uri;
final String name;
final String imageUrl;
const SpotifyFriend({
required this.uri,
required this.name,
required this.imageUrl,
});
factory SpotifyFriend.fromJson(Map<String, dynamic> json) =>
_$SpotifyFriendFromJson(json);
String get id => uri.split(":").last;
}
@JsonSerializable(createToJson: false)
class SpotifyActivityArtist {
final String uri;
final String name;
const SpotifyActivityArtist({required this.uri, required this.name});
factory SpotifyActivityArtist.fromJson(Map<String, dynamic> json) =>
_$SpotifyActivityArtistFromJson(json);
String get id => uri.split(":").last;
}
@JsonSerializable(createToJson: false)
class SpotifyActivityAlbum {
final String uri;
final String name;
const SpotifyActivityAlbum({required this.uri, required this.name});
factory SpotifyActivityAlbum.fromJson(Map<String, dynamic> json) =>
_$SpotifyActivityAlbumFromJson(json);
String get id => uri.split(":").last;
}
@JsonSerializable(createToJson: false)
class SpotifyActivityContext {
final String uri;
final String name;
final num index;
const SpotifyActivityContext({
required this.uri,
required this.name,
required this.index,
});
factory SpotifyActivityContext.fromJson(Map<String, dynamic> json) =>
_$SpotifyActivityContextFromJson(json);
String get id => uri.split(":").last;
String get path => uri.split(":").skip(1).join("/");
}
@JsonSerializable(createToJson: false)
class SpotifyActivityTrack {
final String uri;
final String name;
final String imageUrl;
final SpotifyActivityArtist artist;
final SpotifyActivityAlbum album;
final SpotifyActivityContext context;
const SpotifyActivityTrack({
required this.uri,
required this.name,
required this.imageUrl,
required this.artist,
required this.album,
required this.context,
});
factory SpotifyActivityTrack.fromJson(Map<String, dynamic> json) =>
_$SpotifyActivityTrackFromJson(json);
String get id => uri.split(":").last;
}
@JsonSerializable(createToJson: false)
class SpotifyFriendActivity {
SpotifyFriend user;
SpotifyActivityTrack track;
SpotifyFriendActivity({required this.user, required this.track});
factory SpotifyFriendActivity.fromJson(Map<String, dynamic> json) =>
_$SpotifyFriendActivityFromJson(json);
}
@JsonSerializable(createToJson: false)
class SpotifyFriends {
List<SpotifyFriendActivity> friends;
SpotifyFriends({required this.friends});
factory SpotifyFriends.fromJson(Map<String, dynamic> json) =>
_$SpotifyFriendsFromJson(json);
}

65
lib/models/spotify_friends.g.dart Normal file
View File

@ -0,0 +1,65 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'spotify_friends.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
SpotifyFriend _$SpotifyFriendFromJson(Map<String, dynamic> json) =>
SpotifyFriend(
uri: json['uri'] as String,
name: json['name'] as String,
imageUrl: json['imageUrl'] as String,
);
SpotifyActivityArtist _$SpotifyActivityArtistFromJson(
Map<String, dynamic> json) =>
SpotifyActivityArtist(
uri: json['uri'] as String,
name: json['name'] as String,
);
SpotifyActivityAlbum _$SpotifyActivityAlbumFromJson(
Map<String, dynamic> json) =>
SpotifyActivityAlbum(
uri: json['uri'] as String,
name: json['name'] as String,
);
SpotifyActivityContext _$SpotifyActivityContextFromJson(
Map<String, dynamic> json) =>
SpotifyActivityContext(
uri: json['uri'] as String,
name: json['name'] as String,
index: json['index'] as num,
);
SpotifyActivityTrack _$SpotifyActivityTrackFromJson(
Map<String, dynamic> json) =>
SpotifyActivityTrack(
uri: json['uri'] as String,
name: json['name'] as String,
imageUrl: json['imageUrl'] as String,
artist: SpotifyActivityArtist.fromJson(
json['artist'] as Map<String, dynamic>),
album:
SpotifyActivityAlbum.fromJson(json['album'] as Map<String, dynamic>),
context: SpotifyActivityContext.fromJson(
json['context'] as Map<String, dynamic>),
);
SpotifyFriendActivity _$SpotifyFriendActivityFromJson(
Map<String, dynamic> json) =>
SpotifyFriendActivity(
user: SpotifyFriend.fromJson(json['user'] as Map<String, dynamic>),
track:
SpotifyActivityTrack.fromJson(json['track'] as Map<String, dynamic>),
);
SpotifyFriends _$SpotifyFriendsFromJson(Map<String, dynamic> json) =>
SpotifyFriends(
friends: (json['friends'] as List<dynamic>)
.map((e) => SpotifyFriendActivity.fromJson(e as Map<String, dynamic>))
.toList(),
);

2
lib/pages/home/home.dart
View File

@ -3,6 +3,7 @@ import 'package:flutter_desktop_tools/flutter_desktop_tools.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:spotube/components/home/sections/featured.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/genres.dart';
import 'package:spotube/components/home/sections/made_for_user.dart'; import 'package:spotube/components/home/sections/made_for_user.dart';
import 'package:spotube/components/home/sections/new_releases.dart'; import 'package:spotube/components/home/sections/new_releases.dart';
@ -31,6 +32,7 @@ class HomePage extends HookConsumerWidget {
HomeNewReleasesSection(), HomeNewReleasesSection(),
], ],
), ),
const HomePageFriendsSection(),
const SliverSafeArea(sliver: HomeMadeForUserSection()), const SliverSafeArea(sliver: HomeMadeForUserSection()),
], ],
), ),

14
lib/services/custom_spotify_endpoints/spotify_endpoints.dart
View File

@ -2,6 +2,7 @@ import 'dart:convert';
import 'package:http/http.dart' as http; import 'package:http/http.dart' as http;
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/models/spotify_friends.dart';
class CustomSpotifyEndpoints { class CustomSpotifyEndpoints {
static const _baseUrl = 'https://api.spotify.com/v1'; static const _baseUrl = 'https://api.spotify.com/v1';
@ -163,6 +164,18 @@ class CustomSpotifyEndpoints {
); );
} }
Future<SpotifyFriends> getFriendActivity() async {
final res = await _client.get(
Uri.parse("https://guc-spclient.spotify.com/presence-view/v1/buddylist"),
headers: {
"content-type": "application/json",
"authorization": "Bearer $accessToken",
"accept": "application/json",
},
);
return SpotifyFriends.fromJson(jsonDecode(res.body));
}
Future<Artist> artist({required String id}) async { Future<Artist> artist({required String id}) async {
final pathQuery = "$_baseUrl/artists/$id"; final pathQuery = "$_baseUrl/artists/$id";
@ -174,7 +187,6 @@ class CustomSpotifyEndpoints {
"accept": "application/json", "accept": "application/json",
}, },
); );
final data = jsonDecode(res.body); final data = jsonDecode(res.body);
return Artist.fromJson(_purifyArtistResponse(data)); return Artist.fromJson(_purifyArtistResponse(data));

13
lib/services/queries/user.dart
View File

@ -3,7 +3,9 @@ import 'package:flutter_hooks/flutter_hooks.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/hooks/spotify/use_spotify_query.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/authentication_provider.dart';
import 'package:spotube/provider/custom_spotify_endpoint_provider.dart';
import 'package:spotube/utils/type_conversion_utils.dart'; import 'package:spotube/utils/type_conversion_utils.dart';
class UserQueries { class UserQueries {
@ -37,4 +39,15 @@ class UserQueries {
ref: ref, ref: ref,
); );
} }
Query<SpotifyFriends, dynamic> friendActivity(WidgetRef ref) {
final customSpotify = ref.read(customSpotifyEndpointProvider);
return useSpotifyQuery<SpotifyFriends, dynamic>(
"friend-activity",
(spotify) {
return customSpotify.getFriendActivity();
},
ref: ref,
);
}
} }

51
untranslated_messages.json
View File

@ -1,86 +1,103 @@
{ {
"ar": [ "ar": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"bn": [ "bn": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"ca": [ "ca": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"de": [ "de": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"es": [ "es": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"fa": [ "fa": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"fr": [ "fr": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"hi": [ "hi": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"it": [ "it": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"ja": [ "ja": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"nl": [ "nl": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"pl": [ "pl": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"pt": [ "pt": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"ru": [ "ru": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"tr": [ "tr": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"uk": [ "uk": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
], ],
"zh": [ "zh": [
"step_3_steps", "step_3_steps",
"step_4_steps" "step_4_steps",
"friends"
] ]
} }