385 lines
16 KiB
Dart
385 lines
16 KiB
Dart
import 'dart:async';
|
|
import 'dart:math';
|
|
|
|
import 'package:dismissible_page/dismissible_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:gap/gap.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:media_kit/media_kit.dart';
|
|
import 'package:rhythm_box/providers/audio_player.dart';
|
|
import 'package:rhythm_box/providers/auth.dart';
|
|
import 'package:rhythm_box/screens/player/queue.dart';
|
|
import 'package:rhythm_box/screens/player/siblings.dart';
|
|
import 'package:rhythm_box/services/artist.dart';
|
|
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_lyrics.dart';
|
|
import 'package:rhythm_box/widgets/tracks/heart_button.dart';
|
|
import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
|
|
|
|
class PlayerScreen extends StatefulWidget {
|
|
const PlayerScreen({super.key});
|
|
|
|
@override
|
|
State<PlayerScreen> createState() => _PlayerScreenState();
|
|
}
|
|
|
|
class _PlayerScreenState extends State<PlayerScreen> {
|
|
late final AudioPlayerProvider _playback = Get.find();
|
|
late final QueryingTrackInfoProvider _query = Get.find();
|
|
late final AuthenticationProvider _auth = Get.find();
|
|
|
|
String? get _albumArt =>
|
|
(_playback.state.value.activeTrack?.album?.images).asUrlString(
|
|
index:
|
|
(_playback.state.value.activeTrack?.album?.images?.length ?? 1) - 1,
|
|
);
|
|
|
|
bool get _isPlaying => _playback.isPlaying.value;
|
|
bool get _isFetchingActiveTrack => _query.isQueryingTrackInfo.value;
|
|
PlaylistMode get _loopMode => _playback.state.value.loopMode;
|
|
|
|
Future<void> _togglePlayState() async {
|
|
if (!audioPlayer.isPlaying) {
|
|
await audioPlayer.resume();
|
|
} else {
|
|
await audioPlayer.pause();
|
|
}
|
|
setState(() {});
|
|
}
|
|
|
|
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,
|
|
onDismissed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
direction: DismissiblePageDismissDirection.down,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: SafeArea(
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: ListView(
|
|
shrinkWrap: true,
|
|
padding: const EdgeInsets.symmetric(vertical: 24),
|
|
children: [
|
|
Obx(
|
|
() => 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),
|
|
Obx(
|
|
() => Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
_playback.state.value.activeTrack?.name ??
|
|
'Not playing',
|
|
style: Theme.of(context).textTheme.titleLarge,
|
|
textAlign: TextAlign.left,
|
|
),
|
|
Text(
|
|
_playback.state.value.activeTrack?.artists
|
|
?.asString() ??
|
|
'No author',
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
overflow: TextOverflow.ellipsis,
|
|
textAlign: TextAlign.left,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (_playback.state.value.activeTrack != null &&
|
|
_auth.auth.value != null)
|
|
TrackHeartButton(
|
|
trackId: _playback.state.value.activeTrack!.id!,
|
|
),
|
|
],
|
|
).paddingSymmetric(horizontal: 32),
|
|
),
|
|
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.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);
|
|
}
|
|
},
|
|
);
|
|
},
|
|
),
|
|
Obx(
|
|
() => IconButton(
|
|
icon: const Icon(Icons.skip_previous),
|
|
onPressed: _isFetchingActiveTrack
|
|
? null
|
|
: audioPlayer.skipToPrevious,
|
|
),
|
|
),
|
|
const Gap(8),
|
|
Obx(
|
|
() => 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),
|
|
Obx(
|
|
() => 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,
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
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(() {});
|
|
}
|
|
});
|
|
},
|
|
),
|
|
),
|
|
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(() {});
|
|
}
|
|
});
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (isLargeScreen) const Gap(24),
|
|
if (isLargeScreen)
|
|
const Expanded(
|
|
child: SyncedLyrics(defaultTextZoom: 67),
|
|
)
|
|
],
|
|
),
|
|
).marginSymmetric(horizontal: 24),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PlayerProgressTrackShape extends RoundedRectSliderTrackShape {
|
|
@override
|
|
Rect getPreferredRect({
|
|
required RenderBox parentBox,
|
|
Offset offset = Offset.zero,
|
|
required SliderThemeData sliderTheme,
|
|
bool isEnabled = false,
|
|
bool isDiscrete = false,
|
|
}) {
|
|
final trackHeight = sliderTheme.trackHeight;
|
|
final trackLeft = offset.dx;
|
|
final trackTop = offset.dy + (parentBox.size.height - trackHeight!) / 2;
|
|
final trackWidth = parentBox.size.width;
|
|
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
|
|
}
|
|
}
|