mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 07:55:18 +00:00
331 lines
12 KiB
Dart
331 lines
12 KiB
Dart
import 'package:flutter/material.dart' hide Action;
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:spotify/spotify.dart' hide Image;
|
|
import 'package:spotube/components/Shared/AdaptivePopupMenuButton.dart';
|
|
import 'package:spotube/components/Shared/LinkText.dart';
|
|
import 'package:spotube/components/Shared/UniversalImage.dart';
|
|
import 'package:spotube/hooks/useBreakpoints.dart';
|
|
import 'package:spotube/hooks/useForceUpdate.dart';
|
|
import 'package:spotube/models/Logger.dart';
|
|
import 'package:spotube/provider/Auth.dart';
|
|
import 'package:spotube/provider/Playback.dart';
|
|
import 'package:spotube/provider/SpotifyDI.dart';
|
|
import 'package:spotube/provider/SpotifyRequests.dart';
|
|
import 'package:spotube/utils/type_conversion_utils.dart';
|
|
|
|
class TrackTile extends HookConsumerWidget {
|
|
final Playback playback;
|
|
final MapEntry<int, Track> track;
|
|
final String duration;
|
|
final void Function(Track currentTrack)? onTrackPlayButtonPressed;
|
|
final logger = getLogger(TrackTile);
|
|
final bool userPlaylist;
|
|
// null playlistId indicates its not inside a playlist
|
|
final String? playlistId;
|
|
|
|
final bool showAlbum;
|
|
|
|
final bool isActive;
|
|
|
|
final bool isChecked;
|
|
final bool showCheck;
|
|
|
|
final bool isLocal;
|
|
final void Function(bool?)? onCheckChange;
|
|
|
|
TrackTile(
|
|
this.playback, {
|
|
required this.track,
|
|
required this.duration,
|
|
required this.isActive,
|
|
this.playlistId,
|
|
this.userPlaylist = false,
|
|
this.onTrackPlayButtonPressed,
|
|
this.showAlbum = true,
|
|
this.isChecked = false,
|
|
this.showCheck = false,
|
|
this.isLocal = false,
|
|
this.onCheckChange,
|
|
Key? key,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context, ref) {
|
|
final isReallyLocal = isLocal ||
|
|
ref.watch(
|
|
playbackProvider.select((s) => s.playlist?.isLocal == true),
|
|
);
|
|
final breakpoint = useBreakpoints();
|
|
final auth = ref.watch(authProvider);
|
|
final spotify = ref.watch(spotifyProvider);
|
|
final update = useForceUpdate();
|
|
|
|
final savedTracksSnapshot = ref.watch(currentUserSavedTracksQuery);
|
|
|
|
final isSaved = savedTracksSnapshot.asData?.value.any(
|
|
(e) => track.value.id == e.id,
|
|
) ??
|
|
false;
|
|
|
|
final actionFavorite = useCallback((bool isLiked) async {
|
|
try {
|
|
isLiked
|
|
? await spotify.tracks.me.removeOne(track.value.id!)
|
|
: await spotify.tracks.me.saveOne(track.value.id!);
|
|
} catch (e, stack) {
|
|
logger.e("FavoriteButton.onPressed", e, stack);
|
|
} finally {
|
|
update();
|
|
ref.refresh(currentUserSavedTracksQuery);
|
|
ref.refresh(playlistTracksQuery("user-liked-tracks"));
|
|
}
|
|
}, [track.value.id, spotify]);
|
|
|
|
final actionRemoveFromPlaylist = useCallback(() async {
|
|
if (playlistId == null) return;
|
|
return await spotify.playlists.removeTrack(track.value.uri!, playlistId!);
|
|
}, [playlistId, spotify, track.value.uri]);
|
|
|
|
void actionShare(Track track) {
|
|
final data = "https://open.spotify.com/track/${track.id}";
|
|
Clipboard.setData(ClipboardData(text: data)).then((_) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
width: 300,
|
|
behavior: SnackBarBehavior.floating,
|
|
content: Text(
|
|
"Copied $data to clipboard",
|
|
textAlign: TextAlign.center,
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
Future<void> actionAddToPlaylist() async {
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) {
|
|
return FutureBuilder<Iterable<PlaylistSimple>>(
|
|
future: spotify.playlists.me.all().then((playlists) async {
|
|
final me = await spotify.me.get();
|
|
return playlists.where((playlist) =>
|
|
playlist.owner?.id != null &&
|
|
playlist.owner!.id == me.id);
|
|
}),
|
|
builder: (context, snapshot) {
|
|
return HookBuilder(builder: (context) {
|
|
final playlistsCheck = useState(<String, bool>{});
|
|
return AlertDialog(
|
|
title: Text(
|
|
"Add `${track.value.name}` to following Playlists"),
|
|
titleTextStyle:
|
|
Theme.of(context).textTheme.bodyText1?.copyWith(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
child: const Text("Cancel"),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
ElevatedButton(
|
|
child: const Text("Add"),
|
|
onPressed: () async {
|
|
final selectedPlaylists = playlistsCheck
|
|
.value.entries
|
|
.where((entry) => entry.value)
|
|
.map((entry) => entry.key);
|
|
|
|
await Future.wait(
|
|
selectedPlaylists.map(
|
|
(playlistId) => spotify.playlists
|
|
.addTrack(track.value.uri!, playlistId),
|
|
),
|
|
).then((_) => Navigator.pop(context));
|
|
},
|
|
)
|
|
],
|
|
content: SizedBox(
|
|
height: 300,
|
|
width: 300,
|
|
child: !snapshot.hasData
|
|
? const Center(
|
|
child: CircularProgressIndicator.adaptive())
|
|
: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: snapshot.data!.length,
|
|
itemBuilder: (context, index) {
|
|
final playlist =
|
|
snapshot.data!.elementAt(index);
|
|
return CheckboxListTile(
|
|
title: Text(playlist.name!),
|
|
controlAffinity:
|
|
ListTileControlAffinity.leading,
|
|
value: playlistsCheck.value[playlist.id] ??
|
|
false,
|
|
onChanged: (val) {
|
|
playlistsCheck.value = {
|
|
...playlistsCheck.value,
|
|
playlist.id!: val == true
|
|
};
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
final String thumbnailUrl = TypeConversionUtils.image_X_UrlString(
|
|
track.value.album?.images,
|
|
placeholder: ImagePlaceholder.albumArt,
|
|
index: track.value.album?.images?.length == 1 ? 0 : 2,
|
|
);
|
|
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 500),
|
|
decoration: BoxDecoration(
|
|
color: isActive
|
|
? Theme.of(context).popupMenuTheme.color
|
|
: Colors.transparent,
|
|
borderRadius: BorderRadius.circular(isActive ? 10 : 0),
|
|
),
|
|
child: Material(
|
|
type: MaterialType.transparency,
|
|
child: Row(
|
|
children: [
|
|
if (showCheck)
|
|
Checkbox(
|
|
value: isChecked,
|
|
onChanged: (s) => onCheckChange?.call(s),
|
|
)
|
|
else
|
|
SizedBox(
|
|
height: 20,
|
|
width: 25,
|
|
child: Center(
|
|
child: Text((track.key + 1).toString()),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: breakpoint.isMoreThan(Breakpoints.md) ? 8.0 : 0,
|
|
vertical: 8.0,
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: const BorderRadius.all(Radius.circular(5)),
|
|
child: UniversalImage(
|
|
path: thumbnailUrl,
|
|
height: 40,
|
|
width: 40,
|
|
placeholder: (context, url) {
|
|
return Image.asset(
|
|
"assets/album-placeholder.png",
|
|
height: 40,
|
|
width: 40,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
playback.track?.id != null &&
|
|
playback.track?.id == track.value.id
|
|
? Icons.pause_circle_rounded
|
|
: Icons.play_circle_rounded,
|
|
color: Theme.of(context).primaryColor,
|
|
),
|
|
onPressed: () => onTrackPlayButtonPressed?.call(
|
|
track.value,
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
track.value.name ?? "",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: breakpoint.isSm ? 14 : 17,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
isReallyLocal
|
|
? Text(
|
|
TypeConversionUtils.artists_X_String<Artist>(
|
|
track.value.artists ?? []),
|
|
)
|
|
: TypeConversionUtils.artists_X_ClickableArtists(
|
|
track.value.artists ?? [],
|
|
textStyle: TextStyle(
|
|
fontSize: breakpoint.isLessThan(Breakpoints.lg)
|
|
? 12
|
|
: 14)),
|
|
],
|
|
),
|
|
),
|
|
if (breakpoint.isMoreThan(Breakpoints.md) && showAlbum)
|
|
Expanded(
|
|
child: isReallyLocal
|
|
? Text(track.value.album?.name ?? "")
|
|
: LinkText(
|
|
track.value.album!.name!,
|
|
"/album/${track.value.album?.id}",
|
|
extra: track.value.album,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
if (!breakpoint.isSm) ...[
|
|
const SizedBox(width: 10),
|
|
Text(duration),
|
|
],
|
|
const SizedBox(width: 10),
|
|
if (!isReallyLocal)
|
|
AdaptiveActions(
|
|
actions: [
|
|
if (auth.isLoggedIn)
|
|
Action(
|
|
icon: Icon(isSaved
|
|
? Icons.favorite_rounded
|
|
: Icons.favorite_border_rounded),
|
|
text: const Text("Save as favorite"),
|
|
onPressed: () {
|
|
actionFavorite(isSaved);
|
|
},
|
|
),
|
|
if (auth.isLoggedIn)
|
|
Action(
|
|
icon: const Icon(Icons.add_box_rounded),
|
|
text: const Text("Add To playlist"),
|
|
onPressed: actionAddToPlaylist,
|
|
),
|
|
if (userPlaylist && auth.isLoggedIn)
|
|
Action(
|
|
icon: const Icon(Icons.remove_circle_outline_rounded),
|
|
text: const Text("Remove from playlist"),
|
|
onPressed: actionRemoveFromPlaylist,
|
|
),
|
|
Action(
|
|
icon: const Icon(Icons.share_rounded),
|
|
text: const Text("Share"),
|
|
onPressed: () {
|
|
actionShare(track.value);
|
|
},
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|