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(player-overlay): flickering when a track is changed or navigated to another page

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-08-15 00:39:54 +06:00
parent 2818ed5c9d
commit e48b67cd47
7 changed files with 183 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/Album/AlbumView.dart
View File

@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/Shared/HeartButton.dart'; import 'package:spotube/components/Shared/HeartButton.dart';
import 'package:spotube/components/Shared/TrackCollectionView.dart'; import 'package:spotube/components/Shared/TrackCollectionView.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/utils/type_conversion_utils.dart'; import 'package:spotube/utils/type_conversion_utils.dart';
import 'package:spotube/models/CurrentPlaylist.dart'; import 'package:spotube/models/CurrentPlaylist.dart';
import 'package:spotube/provider/Auth.dart'; import 'package:spotube/provider/Auth.dart';
@ -52,6 +53,8 @@ class AlbumView extends HookConsumerWidget {
() => TypeConversionUtils.image_X_UrlString(album.images), () => TypeConversionUtils.image_X_UrlString(album.images),
[album.images]); [album.images]);
final breakpoint = useBreakpoints();
return TrackCollectionView( return TrackCollectionView(
id: album.id!, id: album.id!,
isPlaying: isPlaying:
@ -61,6 +64,7 @@ class AlbumView extends HookConsumerWidget {
tracksSnapshot: tracksSnapshot, tracksSnapshot: tracksSnapshot,
album: album, album: album,
routePath: "/album/${album.id}", routePath: "/album/${album.id}",
bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
onPlay: ([track]) { onPlay: ([track]) {
if (tracksSnapshot.asData?.value != null) { if (tracksSnapshot.asData?.value != null) {
playPlaylist( playPlaylist(

8
lib/components/Player/PlayerControls.dart
View File

@ -20,11 +20,9 @@ class PlayerControls extends HookConsumerWidget {
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final Playback playback = ref.watch(playbackProvider); final Playback playback = ref.watch(playbackProvider);
final onNext = useNextTrack(playback); final onNext = useNextTrack(ref);
final onPrevious = usePreviousTrack(ref);
final onPrevious = usePreviousTrack(playback); final _playOrPause = useTogglePlayPause(ref);
final _playOrPause = useTogglePlayPause(playback);
final duration = playback.currentDuration; final duration = playback.currentDuration;

47
lib/components/Player/PlayerOverlay.dart
View File

@ -6,7 +6,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/components/Player/PlayerTrackDetails.dart'; import 'package:spotube/components/Player/PlayerTrackDetails.dart';
import 'package:spotube/hooks/playback.dart'; import 'package:spotube/hooks/playback.dart';
import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/hooks/useIsCurrentRoute.dart';
import 'package:spotube/hooks/usePaletteColor.dart'; import 'package:spotube/hooks/usePaletteColor.dart';
import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/Playback.dart';
@ -21,24 +20,24 @@ class PlayerOverlay extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
final isCurrentRoute = useIsCurrentRoute("/");
final paletteColor = usePaletteColor(albumArt, ref); final paletteColor = usePaletteColor(albumArt, ref);
final playback = ref.watch(playbackProvider);
if (isCurrentRoute == false) { var isHome = GoRouter.of(context).location == "/";
return Container(); final isAllowedPage = ["/playlist/", "/album/"].any(
} (el) => GoRouter.of(context).location.startsWith(el),
);
final onNext = useNextTrack(playback); final onNext = useNextTrack(ref);
final onPrevious = usePreviousTrack(ref);
final _playOrPause = useTogglePlayPause(ref);
final onPrevious = usePreviousTrack(playback); if (!isHome && !isAllowedPage) return Container();
final _playOrPause = useTogglePlayPause(playback); return AnimatedPositioned(
duration: const Duration(milliseconds: 2500),
return Positioned( right: (breakpoint.isMd && !isAllowedPage ? 10 : 5),
right: (breakpoint.isMd ? 10 : 5), left: (breakpoint.isSm || isAllowedPage ? 5 : 90),
left: (breakpoint.isSm ? 5 : 80), bottom: (breakpoint.isSm && !isAllowedPage ? 63 : 10),
bottom: (breakpoint.isSm ? 63 : 10),
child: GestureDetector( child: GestureDetector(
onVerticalDragEnd: (details) { onVerticalDragEnd: (details) {
int sensitivity = 8; int sensitivity = 8;
@ -88,14 +87,18 @@ class PlayerOverlay extends HookConsumerWidget {
onPressed: () { onPressed: () {
onPrevious(); onPrevious();
}), }),
IconButton( Consumer(
icon: Icon( builder: (context, ref, _) {
playback.isPlaying return IconButton(
? Icons.pause_rounded icon: Icon(
: Icons.play_arrow_rounded, ref.read(playbackProvider).isPlaying
), ? Icons.pause_rounded
color: paletteColor.bodyTextColor, : Icons.play_arrow_rounded,
onPressed: _playOrPause, ),
color: paletteColor.bodyTextColor,
onPressed: _playOrPause,
);
},
), ),
IconButton( IconButton(
icon: const Icon(Icons.skip_next_rounded), icon: const Icon(Icons.skip_next_rounded),

4
lib/components/Playlist/PlaylistView.dart
View File

@ -5,6 +5,7 @@ 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/Shared/HeartButton.dart'; import 'package:spotube/components/Shared/HeartButton.dart';
import 'package:spotube/components/Shared/TrackCollectionView.dart'; import 'package:spotube/components/Shared/TrackCollectionView.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/hooks/usePaletteColor.dart'; import 'package:spotube/hooks/usePaletteColor.dart';
import 'package:spotube/models/CurrentPlaylist.dart'; import 'package:spotube/models/CurrentPlaylist.dart';
import 'package:spotube/models/Logger.dart'; import 'package:spotube/models/Logger.dart';
@ -51,6 +52,8 @@ class PlaylistView extends HookConsumerWidget {
final isPlaylistPlaying = final isPlaylistPlaying =
playback.playlist?.id != null && playback.playlist?.id == playlist.id; playback.playlist?.id != null && playback.playlist?.id == playlist.id;
final breakpoint = useBreakpoints();
final meSnapshot = ref.watch(currentUserQuery); final meSnapshot = ref.watch(currentUserQuery);
final tracksSnapshot = ref.watch(playlistTracksQuery(playlist.id!)); final tracksSnapshot = ref.watch(playlistTracksQuery(playlist.id!));
@ -81,6 +84,7 @@ class PlaylistView extends HookConsumerWidget {
); );
} }
}, },
bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
showShare: playlist.id != "user-liked-tracks", showShare: playlist.id != "user-liked-tracks",
routePath: "/playlist/${playlist.id}", routePath: "/playlist/${playlist.id}",
onShare: () { onShare: () {

3
lib/components/Shared/TrackCollectionView.dart
View File

@ -28,6 +28,7 @@ class TrackCollectionView extends HookConsumerWidget {
final bool showShare; final bool showShare;
final bool isOwned; final bool isOwned;
final bool bottomSpace;
final String routePath; final String routePath;
TrackCollectionView({ TrackCollectionView({
@ -44,6 +45,7 @@ class TrackCollectionView extends HookConsumerWidget {
this.description, this.description,
this.showShare = true, this.showShare = true,
this.isOwned = false, this.isOwned = false,
this.bottomSpace = false,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -233,6 +235,7 @@ class TrackCollectionView extends HookConsumerWidget {
onTrackPlayButtonPressed: onPlay, onTrackPlayButtonPressed: onPlay,
playlistId: id, playlistId: id,
userPlaylist: isOwned, userPlaylist: isOwned,
bottomSpace: bottomSpace,
); );
}, },
error: (error, _) => error: (error, _) =>

269
lib/components/Shared/TracksTableView.dart
View File

@ -16,6 +16,7 @@ class TracksTableView extends HookConsumerWidget {
final List<Track> tracks; final List<Track> tracks;
final bool userPlaylist; final bool userPlaylist;
final String? playlistId; final String? playlistId;
final bool bottomSpace;
final Widget? heading; final Widget? heading;
const TracksTableView( const TracksTableView(
@ -25,6 +26,7 @@ class TracksTableView extends HookConsumerWidget {
this.userPlaylist = false, this.userPlaylist = false,
this.playlistId, this.playlistId,
this.heading, this.heading,
this.bottomSpace = false,
}) : super(key: key); }) : super(key: key);
@override @override
@ -47,156 +49,159 @@ class TracksTableView extends HookConsumerWidget {
); );
return SliverList( return SliverList(
delegate: SliverChildListDelegate([ delegate: SliverChildListDelegate(
if (heading != null) heading!, [
Row( if (heading != null) heading!,
children: [ Row(
Checkbox( children: [
value: selected.value.length == tracks.length, Checkbox(
onChanged: (checked) { value: selected.value.length == tracks.length,
if (!showCheck.value) showCheck.value = true; onChanged: (checked) {
if (checked == true) { if (!showCheck.value) showCheck.value = true;
selected.value = tracks.map((s) => s.id!).toList(); if (checked == true) {
} else { selected.value = tracks.map((s) => s.id!).toList();
selected.value = []; } else {
showCheck.value = false; selected.value = [];
} showCheck.value = false;
}, }
), },
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"#",
textAlign: TextAlign.center,
style: tableHeadStyle,
), ),
), Padding(
Expanded( padding: const EdgeInsets.all(8.0),
child: Row( child: Text(
children: [ "#",
Text( textAlign: TextAlign.center,
"Title", style: tableHeadStyle,
style: tableHeadStyle, ),
overflow: TextOverflow.ellipsis,
),
],
), ),
),
// used alignment of this table-head
if (breakpoint.isMoreThan(Breakpoints.md)) ...[
const SizedBox(width: 100),
Expanded( Expanded(
child: Row( child: Row(
children: [ children: [
Text( Text(
"Album", "Title",
overflow: TextOverflow.ellipsis,
style: tableHeadStyle, style: tableHeadStyle,
overflow: TextOverflow.ellipsis,
), ),
], ],
), ),
) ),
], // used alignment of this table-head
if (!breakpoint.isSm) ...[ if (breakpoint.isMoreThan(Breakpoints.md)) ...[
const SizedBox(width: 10), const SizedBox(width: 100),
Text("Time", style: tableHeadStyle), Expanded(
const SizedBox(width: 10), child: Row(
], children: [
PopupMenuButton( Text(
itemBuilder: (context) { "Album",
return [ overflow: TextOverflow.ellipsis,
PopupMenuItem( style: tableHeadStyle,
enabled: selected.value.isNotEmpty, ),
child: Row( ],
children: [
const Icon(Icons.file_download_outlined),
Text(
"Download ${selectedTracks.isNotEmpty ? "(${selectedTracks.length})" : ""}",
),
],
),
value: "download",
), ),
]; )
}, ],
onSelected: (action) async { if (!breakpoint.isSm) ...[
switch (action) { const SizedBox(width: 10),
case "download": Text("Time", style: tableHeadStyle),
{ const SizedBox(width: 10),
final isConfirmed = await showDialog( ],
context: context, PopupMenuButton(
builder: (context) { itemBuilder: (context) {
return const DownloadConfirmationDialog(); return [
PopupMenuItem(
enabled: selected.value.isNotEmpty,
child: Row(
children: [
const Icon(Icons.file_download_outlined),
Text(
"Download ${selectedTracks.isNotEmpty ? "(${selectedTracks.length})" : ""}",
),
],
),
value: "download",
),
];
},
onSelected: (action) async {
switch (action) {
case "download":
{
final isConfirmed = await showDialog(
context: context,
builder: (context) {
return const DownloadConfirmationDialog();
});
if (isConfirmed != true) return;
final queue = Queue(
delay: const Duration(seconds: 5),
);
for (final selectedTrack in selectedTracks) {
queue.add(() async {
downloader.addToQueue(
await playback.toSpotubeTrack(
selectedTrack,
noSponsorBlock: true,
),
);
}); });
if (isConfirmed != true) return; }
final queue = Queue(
delay: const Duration(seconds: 5),
);
for (final selectedTrack in selectedTracks) {
queue.add(() async {
downloader.addToQueue(
await playback.toSpotubeTrack(
selectedTrack,
noSponsorBlock: true,
),
);
});
}
selected.value = []; selected.value = [];
showCheck.value = false; showCheck.value = false;
await queue.onComplete; await queue.onComplete;
break; break;
} }
default: default:
} }
}, },
), ),
], ],
), ),
...tracks.asMap().entries.map((track) { ...tracks.asMap().entries.map((track) {
String? thumbnailUrl = TypeConversionUtils.image_X_UrlString( String? thumbnailUrl = TypeConversionUtils.image_X_UrlString(
track.value.album?.images, track.value.album?.images,
index: (track.value.album?.images?.length ?? 1) - 1, index: (track.value.album?.images?.length ?? 1) - 1,
); );
String duration = String duration =
"${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}"; "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
return InkWell( return InkWell(
onLongPress: () { onLongPress: () {
showCheck.value = true; showCheck.value = true;
selected.value = [...selected.value, track.value.id!];
},
onTap: () {
if (showCheck.value) {
selected.value = [...selected.value, track.value.id!]; selected.value = [...selected.value, track.value.id!];
} else { },
onTrackPlayButtonPressed?.call(track.value); onTap: () {
} if (showCheck.value) {
},
child: TrackTile(
playback,
playlistId: playlistId,
track: track,
duration: duration,
thumbnailUrl: thumbnailUrl,
userPlaylist: userPlaylist,
isActive: playback.track?.id == track.value.id,
onTrackPlayButtonPressed: onTrackPlayButtonPressed,
isChecked: selected.value.contains(track.value.id),
showCheck: showCheck.value,
onCheckChange: (checked) {
if (checked == true) {
selected.value = [...selected.value, track.value.id!]; selected.value = [...selected.value, track.value.id!];
} else { } else {
selected.value = selected.value onTrackPlayButtonPressed?.call(track.value);
.where((id) => id != track.value.id)
.toList();
} }
}, },
), child: TrackTile(
); playback,
}).toList() playlistId: playlistId,
]), track: track,
duration: duration,
thumbnailUrl: thumbnailUrl,
userPlaylist: userPlaylist,
isActive: playback.track?.id == track.value.id,
onTrackPlayButtonPressed: onTrackPlayButtonPressed,
isChecked: selected.value.contains(track.value.id),
showCheck: showCheck.value,
onCheckChange: (checked) {
if (checked == true) {
selected.value = [...selected.value, track.value.id!];
} else {
selected.value = selected.value
.where((id) => id != track.value.id)
.toList();
}
},
),
);
}).toList(),
if (bottomSpace) const SizedBox(height: 70),
],
),
); );
} }
} }

10
lib/hooks/playback.dart
View File

@ -1,12 +1,14 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/models/Logger.dart'; import 'package:spotube/models/Logger.dart';
import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/Playback.dart';
final logger = getLogger("PlaybackHook"); final logger = getLogger("PlaybackHook");
Future<void> Function() useNextTrack(Playback playback) { Future<void> Function() useNextTrack(WidgetRef ref) {
return () async { return () async {
try { try {
final playback = ref.read(playbackProvider);
await playback.player.pause(); await playback.player.pause();
await playback.player.seek(Duration.zero); await playback.player.seek(Duration.zero);
playback.seekForward(); playback.seekForward();
@ -16,9 +18,10 @@ Future<void> Function() useNextTrack(Playback playback) {
}; };
} }
Future<void> Function() usePreviousTrack(Playback playback) { Future<void> Function() usePreviousTrack(WidgetRef ref) {
return () async { return () async {
try { try {
final playback = ref.read(playbackProvider);
await playback.player.pause(); await playback.player.pause();
await playback.player.seek(Duration.zero); await playback.player.seek(Duration.zero);
playback.seekBackward(); playback.seekBackward();
@ -28,9 +31,10 @@ Future<void> Function() usePreviousTrack(Playback playback) {
}; };
} }
Future<void> Function([dynamic]) useTogglePlayPause(Playback playback) { Future<void> Function([dynamic]) useTogglePlayPause(WidgetRef ref) {
return ([key]) async { return ([key]) async {
try { try {
final playback = ref.read(playbackProvider);
if (playback.track == null) { if (playback.track == null) {
return; return;
} else if (playback.track != null && } else if (playback.track != null &&