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

PlayerOverlay works as expected

Browse Source 
imageToUrlString uses uuid instead of DateTime.now()
seperated parts of Player for reuse accross different sizes of screen's specific widgets
integrating go_router to follow declarative route approach
This commit is contained in:
Kingkor Roy Tirtho 2022-03-10 12:29:29 +06:00
parent b585bf2df2
commit d608fa7d02
15 changed files with 466 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/components/Album/AlbumCard.dart
View File

@ -33,7 +33,10 @@ class AlbumCard extends HookConsumerWidget {
"Album • ${artistsToString<ArtistSimple>(album.artists ?? [])}",
onTap: () {
Navigator.of(context).push(SpotubePageRoute(
child: AlbumView(album),
child: AlbumView(
album,
key: Key("album-${album.id}"),
),
));
},
onPlaybuttonPressed: () async {

5
lib/components/Artist/ArtistCard.dart
View File

@ -18,7 +18,10 @@ class ArtistCard extends StatelessWidget {
return InkWell(
onTap: () {
Navigator.of(context).push(SpotubePageRoute(
child: ArtistProfile(artist.id!),
child: ArtistProfile(
artist.id!,
key: Key("artist-${artist.id}"),
),
));
},
borderRadius: BorderRadius.circular(10),

1
lib/components/Artist/ArtistProfile.dart
View File

@ -247,6 +247,7 @@ class ArtistProfile extends HookConsumerWidget {
child: ArtistAlbumView(
artistId,
snapshot.data?.name ?? "KRTX",
key: Key("artist-album-$artistId"),
),
));
},

2
lib/components/Home/Home.dart
View File

@ -168,7 +168,7 @@ class Home extends HookConsumerWidget {
Expanded(child: MoveWindow()),
if (!Platform.isMacOS) const TitleBarActionButtons(),
],
)),
))
],
),
),

4
lib/components/Home/Sidebar.dart
View File

@ -31,7 +31,9 @@ class Sidebar extends HookConsumerWidget {
static void goToSettings(BuildContext context) {
Navigator.of(context).push(SpotubePageRoute(
child: const Settings(),
child: const Settings(
key: Key("settings"),
),
));
}

4
lib/components/Lyrics.dart
View File

@ -70,7 +70,9 @@ class Lyrics extends HookConsumerWidget {
ElevatedButton(
onPressed: () {
Navigator.of(context).push(SpotubePageRoute(
child: const Settings(),
child: const Settings(
key: Key("settings"),
),
));
},
child: const Text("Add Access Token"))

141
lib/components/Player/Player.dart
View File

@ -4,13 +4,17 @@ import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:just_audio/just_audio.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:spotify/spotify.dart';
import 'package:spotify/spotify.dart' hide Image;
import 'package:spotube/components/Player/PlayerOverlay.dart';
import 'package:spotube/components/Player/PlayerTrackDetails.dart';
import 'package:spotube/components/Shared/DownloadTrackButton.dart';
import 'package:spotube/components/Player/PlayerControls.dart';
import 'package:spotube/helpers/artists-to-clickable-artists.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
import 'package:spotube/helpers/search-youtube.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/models/LocalStorageKeys.dart';
import 'package:spotube/provider/Playback.dart';
import 'package:flutter/material.dart';
@ -19,15 +23,17 @@ import 'package:youtube_explode_dart/youtube_explode_dart.dart';
class Player extends HookConsumerWidget {
const Player({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, ref) {
Playback playback = ref.watch(playbackProvider);
final _isPlaying = useState(false);
final _shuffled = useState(false);
final _volume = useState(0.0);
final _duration = useState<Duration?>(null);
final _currentTrackId = useState<String?>(null);
final breakpoint = useBreakpoints();
final AudioPlayer player = useMemoized(() => AudioPlayer(), []);
final YoutubeExplode youtube = useMemoized(() => YoutubeExplode(), []);
final Future<SharedPreferences> future =
@ -92,6 +98,7 @@ class Player extends HookConsumerWidget {
print(stack);
}
});
return () {
playingStreamListener.cancel();
durationStreamListener.cancel();
@ -106,9 +113,11 @@ class Player extends HookConsumerWidget {
_volume.value = localStorage.data?.getDouble(LocalStorageKeys.volume) ??
player.volume;
}
return null;
}, [localStorage.data]);
var _playTrack = useCallback((Track currentTrack, Playback playback) async {
final _playTrack =
useCallback((Track currentTrack, Playback playback) async {
try {
if (currentTrack.id != _currentTrackId.value) {
Uri? parsedUri = Uri.tryParse(currentTrack.uri ?? "");
@ -140,6 +149,13 @@ class Player extends HookConsumerWidget {
}
}, [player, _currentTrackId, _duration]);
useEffect(() {
if (playback.currentPlaylist != null && playback.currentTrack != null) {
_playTrack(playback.currentTrack!, playback);
}
return null;
}, [playback.currentPlaylist, playback.currentTrack]);
var _onNext = useCallback(() async {
try {
await player.pause();
@ -162,17 +178,7 @@ class Player extends HookConsumerWidget {
}
}, [player]);
return Container(
color: Theme.of(context).backgroundColor,
child: HookConsumer(
builder: (context, ref, widget) {
Playback playback = ref.watch(playbackProvider);
if (playback.currentPlaylist != null &&
playback.currentTrack != null) {
_playTrack(playback.currentTrack!, playback);
}
String? albumArt = useMemoized(
String albumArt = useMemoized(
() => imageToUrlString(
playback.currentTrack?.album?.images,
index: (playback.currentTrack?.album?.images?.length ?? 1) - 1,
@ -180,44 +186,21 @@ class Player extends HookConsumerWidget {
[playback.currentTrack?.album?.images],
);
return Material(
type: MaterialType.transparency,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (albumArt != null)
CachedNetworkImage(
imageUrl: albumArt,
maxHeightDiskCache: 50,
maxWidthDiskCache: 50,
placeholder: (context, url) {
return Container(
height: 50,
width: 50,
color: Colors.green[400],
);
},
),
// title of the currently playing track
Flexible(
flex: 1,
child: Column(
children: [
Text(
playback.currentTrack?.name ?? "Not playing",
style: const TextStyle(fontWeight: FontWeight.bold),
),
artistsToClickableArtists(
playback.currentTrack?.artists ?? [],
mainAxisAlignment: MainAxisAlignment.center,
)
],
),
),
// controls
Flexible(
flex: 3,
child: PlayerControls(
final entryRef = useRef<OverlayEntry?>(null);
disposeOverlay() {
try {
entryRef.value?.remove();
entryRef.value = null;
} catch (e, stack) {
if (e is! AssertionError) {
print("[Player.useEffect.cleanup] $e");
print(stack);
}
}
}
final controls = PlayerControls(
positionStream: player.positionStream,
isPlaying: _isPlaying.value,
duration: _duration.value ?? Duration.zero,
@ -249,8 +232,9 @@ class Player extends HookConsumerWidget {
}
},
onShuffle: () async {
if (playback.currentTrack == null ||
playback.currentPlaylist == null) return;
if (playback.currentTrack == null || playback.currentPlaylist == null) {
return;
}
try {
if (!_shuffled.value) {
playback.currentPlaylist!.shuffle();
@ -278,7 +262,50 @@ class Player extends HookConsumerWidget {
print(stack);
}
},
);
useEffect(() {
// clearing the overlay-entry as passing the already available
// entry will result in splashing while resizing the window
if (entryRef.value != null) disposeOverlay();
if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
entryRef.value = OverlayEntry(
opaque: false,
builder: (context) => PlayerOverlay(
controls: controls,
albumArt: albumArt,
),
);
// I can't believe useEffect doesn't run Post Frame aka
// after rendering/painting the UI
// `My disappointment is immeasurable and my day is ruined` XD
WidgetsBinding.instance?.addPostFrameCallback((time) {
Overlay.of(context)?.insert(entryRef.value!);
});
}
return () {
disposeOverlay();
};
}, [breakpoint]);
// returning an empty non spacious Container as the overlay will take
// place in the global overlay stack aka [_entries]
if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
return Container();
}
return Container(
color: Theme.of(context).backgroundColor,
child: Material(
type: MaterialType.transparency,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
// controls
Flexible(
flex: 3,
child: controls,
),
// add to saved tracks
Expanded(
@ -334,8 +361,8 @@ class Player extends HookConsumerWidget {
onPressed: () {
if (!isLiked &&
playback.currentTrack?.id != null) {
spotifyApi.tracks.me.saveOne(
playback.currentTrack!.id!);
spotifyApi.tracks.me
.saveOne(playback.currentTrack!.id!);
}
});
});
@ -347,8 +374,6 @@ class Player extends HookConsumerWidget {
)
],
),
);
},
),
);
}

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

@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:hotkey_manager/hotkey_manager.dart';
import 'package:spotube/helpers/zero-pad-num-str.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/models/GlobalKeyActions.dart';
import 'package:spotube/provider/UserPreferences.dart';
@ -77,6 +78,47 @@ class PlayerControls extends HookConsumerWidget {
};
});
final breakpoint = useBreakpoints();
Widget controlButtons = Material(
type: MaterialType.transparency,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (breakpoint.isMoreThan(Breakpoints.md))
IconButton(
icon: const Icon(Icons.shuffle_rounded),
color: shuffled ? Theme.of(context).primaryColor : null,
onPressed: () {
onShuffle?.call();
}),
IconButton(
icon: const Icon(Icons.skip_previous_rounded),
onPressed: () {
onPrevious?.call();
}),
IconButton(
icon: Icon(
isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
),
onPressed: () => _playOrPause(null),
),
IconButton(
icon: const Icon(Icons.skip_next_rounded),
onPressed: () => onNext?.call()),
if (breakpoint.isMoreThan(Breakpoints.md))
IconButton(
icon: const Icon(Icons.stop_rounded),
onPressed: () => onStop?.call(),
)
],
),
);
if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
return controlButtons;
}
return Container(
constraints: const BoxConstraints(maxWidth: 700),
child: Column(
@ -119,37 +161,8 @@ class PlayerControls extends HookConsumerWidget {
],
);
}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: const Icon(Icons.shuffle_rounded),
color: shuffled ? Theme.of(context).primaryColor : null,
onPressed: () {
onShuffle?.call();
}),
IconButton(
icon: const Icon(Icons.skip_previous_rounded),
onPressed: () {
onPrevious?.call();
}),
IconButton(
icon: Icon(
isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
),
onPressed: () => _playOrPause(null),
),
IconButton(
icon: const Icon(Icons.skip_next_rounded),
onPressed: () => onNext?.call()),
IconButton(
icon: const Icon(Icons.stop_rounded),
onPressed: () => onStop?.call(),
)
controlButtons,
],
)
],
),
);
));
}
}

55
lib/components/Player/PlayerOverlay.dart Normal file
View File

@ -0,0 +1,55 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:spotube/components/Player/PlayerTrackDetails.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
class PlayerOverlay extends HookWidget {
final Widget controls;
final String albumArt;
const PlayerOverlay({
required this.controls,
required this.albumArt,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final breakpoint = useBreakpoints();
return Positioned(
right: (breakpoint.isMd ? 10 : 5),
left: (breakpoint.isSm ? 5 : 80),
bottom: (breakpoint.isSm ? 63 : 10),
child: FutureBuilder<PaletteGenerator>(
future: PaletteGenerator.fromImageProvider(
CachedNetworkImageProvider(
albumArt,
cacheKey: albumArt,
maxHeight: 50,
maxWidth: 50,
),
),
builder: (context, snapshot) {
return Container(
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
color: snapshot.hasData
? snapshot.data!.colors.first
: Colors.blueGrey[200],
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
PlayerTrackDetails(albumArt: albumArt),
controls,
],
),
);
}),
);
}
}

71
lib/components/Player/PlayerTrackDetails.dart Normal file
View File

@ -0,0 +1,71 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/helpers/artists-to-clickable-artists.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/provider/Playback.dart';
class PlayerTrackDetails extends HookConsumerWidget {
final String? albumArt;
const PlayerTrackDetails({Key? key, this.albumArt}) : super(key: key);
@override
Widget build(BuildContext context, ref) {
final breakpoint = useBreakpoints();
final playback = ref.watch(playbackProvider);
return Row(
children: [
if (albumArt != null)
Padding(
padding: EdgeInsets.all(
breakpoint.isLessThanOrEqualTo(Breakpoints.md) ? 5.0 : 0),
child: CachedNetworkImage(
imageUrl: albumArt!,
maxHeightDiskCache: 50,
maxWidthDiskCache: 50,
cacheKey: albumArt,
placeholder: (context, url) {
return Container(
height: 50,
width: 50,
color: Colors.green[400],
);
},
),
),
if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) ...[
const SizedBox(width: 10),
Text(
playback.currentTrack?.name ?? "Not playing",
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.bodyText1
?.copyWith(fontWeight: FontWeight.bold),
),
],
// title of the currently playing track
if (breakpoint.isMoreThan(Breakpoints.md))
Flexible(
flex: 1,
child: Column(
children: [
Text(
playback.currentTrack?.name ?? "Not playing",
style: Theme.of(context)
.textTheme
.bodyText1
?.copyWith(fontWeight: FontWeight.bold),
),
artistsToClickableArtists(
playback.currentTrack?.artists ?? [],
mainAxisAlignment: MainAxisAlignment.center,
)
],
),
),
],
);
}
}

11
lib/components/Playlist/PlaylistCard.dart
View File

@ -26,9 +26,14 @@ class PlaylistCard extends HookConsumerWidget {
imageUrl: playlist.images![0].url!,
isPlaying: isPlaylistPlaying,
onTap: () {
Navigator.of(context).push(SpotubePageRoute(
child: PlaylistView(playlist),
));
Navigator.of(context).push(
SpotubePageRoute(
child: PlaylistView(
playlist,
key: Key("playlist-${playlist.id}"),
),
),
);
},
onPlaybuttonPressed: () async {
if (isPlaylistPlaying) return;

2
lib/components/Shared/SpotubePageRoute.dart
View File

@ -5,7 +5,7 @@ class SpotubePageRoute extends PageRouteBuilder {
SpotubePageRoute({required this.child})
: super(
pageBuilder: (context, animation, secondaryAnimation) => child,
);
settings: RouteSettings(name: child.key.toString()));
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,

4
lib/helpers/image-to-url-string.dart
View File

@ -1,7 +1,9 @@
import 'package:spotify/spotify.dart';
import 'package:uuid/uuid.dart' show Uuid;
const uuid = Uuid();
String imageToUrlString(List<Image>? images, {int index = 0}) {
return images != null && images.isNotEmpty
? images[0].url!
: "https://avatars.dicebear.com/api/croodles-neutral/${DateTime.now().toString()}.png";
: "https://avatars.dicebear.com/api/croodles-neutral/${uuid.v4()}.png";
}

21
pubspec.lock
View File

@ -226,6 +226,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
go_router:
dependency: "direct main"
description:
name: go_router
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.4"
hooks_riverpod:
dependency: "direct main"
description:
@ -331,6 +338,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.1"
logging:
dependency: transitive
description:
name: logging
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.2"
matcher:
dependency: transitive
description:
@ -380,6 +394,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.2"
palette_generator:
dependency: "direct main"
description:
name: palette_generator
url: "https://pub.dartlang.org"
source: hosted
version: "0.3.3"
path:
dependency: "direct main"
description:

2
pubspec.yaml
View File

@ -52,6 +52,8 @@ dependencies:
flutter_riverpod: ^1.0.3
flutter_hooks: ^0.18.2+1
hooks_riverpod: ^1.0.3
go_router: ^3.0.4
palette_generator: ^0.3.3
dev_dependencies:
flutter_test: