📱 Large screen support

This commit is contained in:
2024-08-29 01:45:33 +08:00
parent 249c8fbf80
commit be44aadc07
14 changed files with 560 additions and 369 deletions

View File

@ -3,6 +3,7 @@ import 'package:get/get.dart';
import 'package:go_router/go_router.dart';
import 'package:rhythm_box/providers/spotify.dart';
import 'package:rhythm_box/widgets/auto_cache_image.dart';
import 'package:rhythm_box/widgets/sized_container.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:spotify/spotify.dart';
@ -39,45 +40,48 @@ class _ExploreScreenState extends State<ExploreScreen> {
child: Scaffold(
appBar: AppBar(
title: Text('explore'.tr),
centerTitle: MediaQuery.of(context).size.width >= 720,
),
body: Skeletonizer(
enabled: _isLoading,
child: ListView.builder(
itemCount: _featuredPlaylist?.length ?? 20,
itemBuilder: (context, idx) {
final item = _featuredPlaylist?[idx];
return ListTile(
leading: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: item != null
? AutoCacheImage(
item.images!.first.url!,
width: 64.0,
height: 64.0,
)
: const SizedBox(
width: 64,
height: 64,
child: Center(
child: Icon(Icons.image),
body: CenteredContainer(
child: Skeletonizer(
enabled: _isLoading,
child: ListView.builder(
itemCount: _featuredPlaylist?.length ?? 20,
itemBuilder: (context, idx) {
final item = _featuredPlaylist?[idx];
return ListTile(
leading: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: item != null
? AutoCacheImage(
item.images!.first.url!,
width: 64.0,
height: 64.0,
)
: const SizedBox(
width: 64,
height: 64,
child: Center(
child: Icon(Icons.image),
),
),
),
),
title: Text(item?.name ?? 'Loading...'),
subtitle: Text(
item?.description ?? 'Please stand by...',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
onTap: () {
if (item == null) return;
GoRouter.of(context).pushNamed(
'playlistView',
pathParameters: {'id': item.id!},
);
},
);
},
),
title: Text(item?.name ?? 'Loading...'),
subtitle: Text(
item?.description ?? 'Please stand by...',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
onTap: () {
if (item == null) return;
GoRouter.of(context).pushNamed(
'playlistView',
pathParameters: {'id': item.id!},
);
},
);
},
),
),
),
),

View File

@ -16,6 +16,7 @@ import 'package:rhythm_box/services/audio_player/audio_player.dart';
import 'package:rhythm_box/services/duration.dart';
import 'package:rhythm_box/widgets/auto_cache_image.dart';
import 'package:rhythm_box/services/audio_services/image.dart';
import 'package:rhythm_box/widgets/lyrics/synced.dart';
import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
class PlayerScreen extends StatefulWidget {
@ -50,9 +51,14 @@ class _PlayerScreenState extends State<PlayerScreen> {
double? _draggingValue;
static const double maxAlbumSize = 360;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final albumSize = max(size.shortestSide, maxAlbumSize).toDouble();
final isLargeScreen = size.width >= 720;
return DismissiblePage(
backgroundColor: Theme.of(context).colorScheme.surface,
@ -63,230 +69,260 @@ class _PlayerScreenState extends State<PlayerScreen> {
child: Material(
color: Colors.transparent,
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
child: Row(
children: [
Hero(
tag: const Key('current-active-track-album-art'),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16)),
child: AspectRatio(
aspectRatio: 1,
child: _albumArt != null
? AutoCacheImage(
_albumArt!,
width: size.width,
height: size.width,
)
: Container(
color: Theme.of(context)
.colorScheme
.surfaceContainerHigh,
width: 64,
height: 64,
child: const Center(child: Icon(Icons.image)),
),
),
).marginSymmetric(horizontal: 24),
),
const Gap(24),
Text(
_playback.state.value.activeTrack?.name ?? 'Not playing',
style: Theme.of(context).textTheme.titleLarge,
),
Text(
_playback.state.value.activeTrack?.artists?.asString() ??
'No author',
style: Theme.of(context).textTheme.bodyMedium,
overflow: TextOverflow.ellipsis,
),
const Gap(24),
Obx(
() => Column(
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SliderTheme(
data: SliderThemeData(
trackHeight: 2,
trackShape: _PlayerProgressTrackShape(),
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 8,
),
overlayShape: SliderComponentShape.noOverlay,
),
child: Slider(
secondaryTrackValue: _playback
.durationBuffered.value.inMilliseconds
.abs()
.toDouble(),
value: _draggingValue?.abs() ??
_playback.durationCurrent.value.inMilliseconds
.toDouble()
.abs(),
min: 0,
max: max(
_playback.durationCurrent.value.inMilliseconds.abs(),
_playback.durationTotal.value.inMilliseconds.abs(),
).toDouble(),
onChanged: (value) {
setState(() => _draggingValue = value);
},
onChangeEnd: (value) {
audioPlayer
.seek(Duration(milliseconds: value.toInt()));
},
LimitedBox(
maxHeight: maxAlbumSize,
maxWidth: maxAlbumSize,
child: Hero(
tag: const Key('current-active-track-album-art'),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(16)),
child: AspectRatio(
aspectRatio: 1,
child: _albumArt != null
? AutoCacheImage(
_albumArt!,
width: albumSize,
height: albumSize,
)
: Container(
color: Theme.of(context)
.colorScheme
.surfaceContainerHigh,
width: 64,
height: 64,
child:
const Center(child: Icon(Icons.image)),
),
),
).marginSymmetric(horizontal: 24),
),
),
const Gap(24),
Text(
_playback.state.value.activeTrack?.name ?? 'Not playing',
style: Theme.of(context).textTheme.titleLarge,
),
Text(
_playback.state.value.activeTrack?.artists?.asString() ??
'No author',
style: Theme.of(context).textTheme.bodyMedium,
overflow: TextOverflow.ellipsis,
),
const Gap(24),
Obx(
() => Column(
children: [
SliderTheme(
data: SliderThemeData(
trackHeight: 2,
trackShape: _PlayerProgressTrackShape(),
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 8,
),
overlayShape: SliderComponentShape.noOverlay,
),
child: Slider(
secondaryTrackValue: _playback
.durationBuffered.value.inMilliseconds
.abs()
.toDouble(),
value: _draggingValue?.abs() ??
_playback.durationCurrent.value.inMilliseconds
.toDouble()
.abs(),
min: 0,
max: max(
_playback.durationCurrent.value.inMilliseconds
.abs(),
_playback.durationTotal.value.inMilliseconds
.abs(),
).toDouble(),
onChanged: (value) {
setState(() => _draggingValue = value);
},
onChangeEnd: (value) {
audioPlayer.seek(
Duration(milliseconds: value.toInt()));
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
_playback.durationCurrent.value
.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
),
Text(
_playback.durationTotal.value
.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
),
],
).paddingSymmetric(horizontal: 8, vertical: 4),
],
).paddingSymmetric(horizontal: 24),
),
const Gap(24),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
_playback.durationCurrent.value
.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
StreamBuilder<bool>(
stream: audioPlayer.shuffledStream,
builder: (context, snapshot) {
final shuffled = snapshot.data ?? false;
return IconButton(
icon: Icon(
shuffled
? Icons.shuffle_on_outlined
: Icons.shuffle,
),
onPressed: _isFetchingActiveTrack
? null
: () {
if (shuffled) {
audioPlayer.setShuffle(false);
} else {
audioPlayer.setShuffle(true);
}
},
);
},
),
Text(
_playback.durationTotal.value.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
IconButton(
icon: const Icon(Icons.skip_previous),
onPressed: _isFetchingActiveTrack
? null
: audioPlayer.skipToPrevious,
),
const Gap(8),
SizedBox(
width: 56,
height: 56,
child: IconButton.filled(
icon: _isFetchingActiveTrack
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2.5,
),
)
: Icon(
!_isPlaying
? Icons.play_arrow
: Icons.pause,
size: 28,
),
onPressed: _isFetchingActiveTrack
? null
: _togglePlayState,
),
),
const Gap(8),
IconButton(
icon: const Icon(Icons.skip_next),
onPressed: _isFetchingActiveTrack
? null
: audioPlayer.skipToNext,
),
Obx(
() => IconButton(
icon: Icon(
_loopMode == PlaylistMode.none
? Icons.repeat
: _loopMode == PlaylistMode.loop
? Icons.repeat_on_outlined
: Icons.repeat_one_on_outlined,
),
onPressed: _isFetchingActiveTrack
? null
: () async {
await audioPlayer.setLoopMode(
switch (_loopMode) {
PlaylistMode.loop =>
PlaylistMode.single,
PlaylistMode.single =>
PlaylistMode.none,
PlaylistMode.none => PlaylistMode.loop,
},
);
},
),
),
],
).paddingSymmetric(horizontal: 8, vertical: 4),
],
).paddingSymmetric(horizontal: 24),
),
const Gap(24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
StreamBuilder<bool>(
stream: audioPlayer.shuffledStream,
builder: (context, snapshot) {
final shuffled = snapshot.data ?? false;
return IconButton(
icon: Icon(
shuffled ? Icons.shuffle_on_outlined : Icons.shuffle,
),
onPressed: _isFetchingActiveTrack
? null
: () {
if (shuffled) {
audioPlayer.setShuffle(false);
} else {
audioPlayer.setShuffle(true);
),
const Gap(20),
Row(
children: [
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.queue_music),
label: const Text('Queue'),
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) => const PlayerQueuePopup(),
).then((_) {
if (mounted) {
setState(() {});
}
},
);
},
),
IconButton(
icon: const Icon(Icons.skip_previous),
onPressed: _isFetchingActiveTrack
? null
: audioPlayer.skipToPrevious,
),
const Gap(8),
SizedBox(
width: 56,
height: 56,
child: IconButton.filled(
icon: _isFetchingActiveTrack
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2.5,
),
)
: Icon(
!_isPlaying ? Icons.play_arrow : Icons.pause,
size: 28,
),
onPressed:
_isFetchingActiveTrack ? null : _togglePlayState,
),
),
const Gap(8),
IconButton(
icon: const Icon(Icons.skip_next),
onPressed:
_isFetchingActiveTrack ? null : audioPlayer.skipToNext,
),
Obx(
() => IconButton(
icon: Icon(
_loopMode == PlaylistMode.none
? Icons.repeat
: _loopMode == PlaylistMode.loop
? Icons.repeat_on_outlined
: Icons.repeat_one_on_outlined,
),
onPressed: _isFetchingActiveTrack
? null
: () async {
await audioPlayer.setLoopMode(
switch (_loopMode) {
PlaylistMode.loop => PlaylistMode.single,
PlaylistMode.single => PlaylistMode.none,
PlaylistMode.none => PlaylistMode.loop,
},
);
});
},
),
),
if (!isLargeScreen) const Gap(4),
if (!isLargeScreen)
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.lyrics),
label: const Text('Lyrics'),
onPressed: () {
GoRouter.of(context).pushNamed('playerLyrics');
},
),
),
const Gap(4),
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.merge),
label: const Text('Sources'),
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) =>
const SiblingTracksPopup(),
).then((_) {
if (mounted) {
setState(() {});
}
});
},
),
),
],
),
),
],
),
const Gap(20),
Row(
children: [
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.queue_music),
label: const Text('Queue'),
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) => const PlayerQueuePopup(),
).then((_) {
if (mounted) {
setState(() {});
}
});
},
),
),
const Gap(4),
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.lyrics),
label: const Text('Lyrics'),
onPressed: () {
GoRouter.of(context).pushNamed('playerLyrics');
},
),
),
const Gap(4),
Expanded(
child: TextButton.icon(
icon: const Icon(Icons.merge),
label: const Text('Sources'),
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) => const SiblingTracksPopup(),
).then((_) {
if (mounted) {
setState(() {});
}
});
},
),
),
],
],
),
),
if (isLargeScreen) const Gap(24),
if (isLargeScreen)
const Expanded(
child: SyncedLyrics(defaultTextZoom: 67),
)
],
),
).marginAll(24),

View File

@ -10,6 +10,7 @@ import 'package:rhythm_box/providers/history.dart';
import 'package:rhythm_box/providers/spotify.dart';
import 'package:rhythm_box/services/audio_player/audio_player.dart';
import 'package:rhythm_box/widgets/auto_cache_image.dart';
import 'package:rhythm_box/widgets/sized_container.dart';
import 'package:rhythm_box/widgets/tracks/playlist_track_list.dart';
import 'package:spotify/spotify.dart';
@ -60,6 +61,7 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
child: Scaffold(
appBar: AppBar(
title: const Text('Playlist'),
centerTitle: MediaQuery.of(context).size.width >= 720,
),
body: Builder(
builder: (context) {
@ -69,86 +71,115 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
);
}
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Material(
borderRadius: radius,
elevation: 2,
child: ClipRRect(
return CenteredContainer(
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Material(
borderRadius: radius,
child: Hero(
tag: Key('playlist-cover-${_playlist!.id}'),
child: AutoCacheImage(
_playlist!.images!.first.url!,
width: 160.0,
height: 160.0,
elevation: 2,
child: ClipRRect(
borderRadius: radius,
child: Hero(
tag: Key('playlist-cover-${_playlist!.id}'),
child: AutoCacheImage(
_playlist!.images!.first.url!,
width: 160.0,
height: 160.0,
),
),
),
),
),
const Gap(24),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_playlist!.name ?? 'Playlist',
style:
Theme.of(context).textTheme.headlineSmall,
maxLines: 2,
overflow: TextOverflow.fade,
),
Text(
_playlist!.description ?? 'A Playlist',
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
const Gap(8),
Text(
"${NumberFormat.compactCurrency(symbol: '', decimalDigits: 2).format(_playlist!.followers!.total!)} saves",
),
Text(
'#${_playlist!.id}',
style: GoogleFonts.robotoMono(fontSize: 10),
),
],
const Gap(24),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_playlist!.name ?? 'Playlist',
style: Theme.of(context)
.textTheme
.headlineSmall,
maxLines: 2,
overflow: TextOverflow.fade,
),
Text(
_playlist!.description ?? 'A Playlist',
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
const Gap(8),
Text(
"${NumberFormat.compactCurrency(symbol: '', decimalDigits: 2).format(_playlist!.followers!.total!)} saves",
),
Text(
'#${_playlist!.id}',
style: GoogleFonts.robotoMono(fontSize: 10),
),
],
),
),
),
],
).paddingOnly(left: 24, right: 24, top: 24),
const Gap(8),
Wrap(
spacing: 8,
children: [
Obx(
() => ElevatedButton.icon(
icon: (_isCurrentPlaylist &&
_playback.isPlaying.value)
? const Icon(Icons.pause_outlined)
: const Icon(Icons.play_arrow),
label: const Text('Play'),
],
).paddingOnly(left: 24, right: 24, top: 24),
const Gap(8),
Wrap(
spacing: 8,
children: [
Obx(
() => ElevatedButton.icon(
icon: (_isCurrentPlaylist &&
_playback.isPlaying.value)
? const Icon(Icons.pause_outlined)
: const Icon(Icons.play_arrow),
label: const Text('Play'),
onPressed: _isUpdating
? null
: () async {
if (_isCurrentPlaylist &&
_playback.isPlaying.value) {
audioPlayer.pause();
return;
} else if (_isCurrentPlaylist &&
!_playback.isPlaying.value) {
audioPlayer.resume();
return;
}
setState(() => _isUpdating = true);
final tracks = (await _spotify
.api.playlists
.getTracksByPlaylistId(
widget.playlistId)
.all())
.toList();
await _playback.load(tracks,
autoPlay: true);
_playback.addCollection(_playlist!.id!);
Get.find<PlaybackHistoryProvider>()
.addPlaylists([_playlist!]);
setState(() => _isUpdating = false);
},
),
),
TextButton.icon(
icon: const Icon(Icons.shuffle),
label: const Text('Shuffle'),
onPressed: _isUpdating
? null
: () async {
if (_isCurrentPlaylist &&
_playback.isPlaying.value) {
audioPlayer.pause();
return;
} else if (_isCurrentPlaylist &&
!_playback.isPlaying.value) {
audioPlayer.resume();
return;
}
setState(() => _isUpdating = true);
audioPlayer.setShuffle(true);
final tracks = (await _spotify
.api.playlists
.getTracksByPlaylistId(
@ -156,8 +187,12 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
.all())
.toList();
await _playback.load(tracks,
autoPlay: true);
await _playback.load(
tracks,
autoPlay: true,
initialIndex:
Random().nextInt(tracks.length),
);
_playback.addCollection(_playlist!.id!);
Get.find<PlaybackHistoryProvider>()
.addPlaylists([_playlist!]);
@ -165,50 +200,21 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
setState(() => _isUpdating = false);
},
),
),
TextButton.icon(
icon: const Icon(Icons.shuffle),
label: const Text('Shuffle'),
onPressed: _isUpdating
? null
: () async {
setState(() => _isUpdating = true);
audioPlayer.setShuffle(true);
final tracks = (await _spotify.api.playlists
.getTracksByPlaylistId(
widget.playlistId)
.all())
.toList();
await _playback.load(
tracks,
autoPlay: true,
initialIndex:
Random().nextInt(tracks.length),
);
_playback.addCollection(_playlist!.id!);
Get.find<PlaybackHistoryProvider>()
.addPlaylists([_playlist!]);
setState(() => _isUpdating = false);
},
),
],
).paddingSymmetric(horizontal: 24),
const Gap(24),
],
],
).paddingSymmetric(horizontal: 24),
const Gap(24),
],
),
),
),
SliverToBoxAdapter(
child: Text(
'Songs (${_playlist!.tracks!.total})',
style: Theme.of(context).textTheme.titleLarge,
).paddingOnly(left: 28, right: 28, bottom: 4),
),
PlaylistTrackList(playlistId: widget.playlistId),
],
SliverToBoxAdapter(
child: Text(
'Songs (${_playlist!.tracks!.total})',
style: Theme.of(context).textTheme.titleLarge,
).paddingOnly(left: 28, right: 28, bottom: 4),
),
PlaylistTrackList(playlistId: widget.playlistId),
],
),
);
},
),

View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:rhythm_box/providers/spotify.dart';
import 'package:rhythm_box/providers/user_preferences.dart';
import 'package:rhythm_box/widgets/sized_container.dart';
import 'package:rhythm_box/widgets/tracks/track_list.dart';
import 'package:spotify/spotify.dart';
@ -61,11 +62,13 @@ class _SearchScreenState extends State<SearchScreen> {
FocusManager.instance.primaryFocus?.unfocus(),
).paddingSymmetric(horizontal: 24, vertical: 8),
Expanded(
child: CustomScrollView(
slivers: [
if (_searchResult != null)
TrackSliverList(tracks: List<Track>.from(_searchResult!)),
],
child: CenteredContainer(
child: CustomScrollView(
slivers: [
if (_searchResult != null)
TrackSliverList(tracks: List<Track>.from(_searchResult!)),
],
),
),
),
],

View File

@ -10,6 +10,22 @@ class SettingsScreen extends StatefulWidget {
class _SettingsScreenState extends State<SettingsScreen> {
@override
Widget build(BuildContext context) {
return const Placeholder();
return Material(
color: Theme.of(context).colorScheme.surface,
child: SafeArea(
child: Column(
children: [
ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
leading: const Icon(Icons.login),
title: const Text('Connect with Spotify'),
subtitle: const Text('To explore your own library and more'),
trailing: const Icon(Icons.chevron_right),
onTap: () {},
),
],
),
),
);
}
}