ocarina2/lib/widgets/player.dart

406 lines
19 KiB
Dart
Raw Permalink Normal View History

2024-05-23 20:36:42 +02:00
import 'package:auto_size_text/auto_size_text.dart';
2024-05-27 21:46:18 +02:00
import 'package:cached_network_image/cached_network_image.dart';
2024-05-23 19:14:08 +02:00
import 'package:flutter/material.dart';
2024-05-28 19:59:09 +02:00
import 'package:flutter_xlider/flutter_xlider.dart';
2024-05-23 19:14:08 +02:00
import 'package:ocarina/api/audio/audioplayer_service.dart';
2024-05-24 00:10:11 +02:00
import 'package:ocarina/api/subsonic/song.dart';
import 'package:ocarina/main.dart';
2024-05-23 19:14:08 +02:00
import 'package:ocarina/util/util.dart';
2024-05-23 20:36:42 +02:00
import 'package:responsive_sizer/responsive_sizer.dart';
import 'package:shimmer/shimmer.dart';
2024-05-24 00:10:11 +02:00
import 'package:text_scroll/text_scroll.dart';
2024-05-23 19:14:08 +02:00
2024-05-30 11:37:22 +02:00
/// The player control widget
2024-05-23 19:14:08 +02:00
///
/// Showcases the playing song's details and features playback controls
class Player extends StatefulWidget {
2024-05-30 11:37:22 +02:00
/// The player control widget
2024-05-23 19:14:08 +02:00
///
/// Showcases the playing song's details and features playback controls
const Player({super.key});
@override
State<Player> createState() => PlayerState();
}
/// State of [Player]
class PlayerState extends State<Player> {
void update() {
2024-05-24 00:10:11 +02:00
logger.d(AudioPlayerService().song?.coverArtUrl);
2024-05-23 19:14:08 +02:00
setState(() {});
}
2024-05-23 20:36:42 +02:00
var _showFullControls = false;
final _sheetController = DraggableScrollableController();
2024-05-23 19:14:08 +02:00
@override
Widget build(BuildContext context) {
2024-05-23 20:36:42 +02:00
return NotificationListener<DraggableScrollableNotification>(
onNotification: (n) {
if (n.extent > 0.3) {
_showFullControls = true;
} else {
_showFullControls = false;
}
setState(() {});
return false;
},
child: DraggableScrollableSheet(
controller: _sheetController,
initialChildSize: 0.1,
snap: true,
snapSizes: const [0.1, 1],
minChildSize: 0.1,
builder: (c, s) => SingleChildScrollView(
controller: s,
child: Column(
children: [
2024-05-30 11:37:22 +02:00
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: GestureDetector(
onTap: () {
_sheetController.animateTo(
(_sheetController.size == 1) ? 0.1 : 1,
duration: const Duration(milliseconds: 300),
curve: Curves.easeIn,
);
},
child: Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 10.h,
width: 100.w,
child: AnimatedOpacity(
opacity: _showFullControls ? 0 : 1,
duration: const Duration(milliseconds: 300),
2024-05-23 20:36:42 +02:00
child: Padding(
2024-05-30 11:37:22 +02:00
padding: const EdgeInsets.all(16),
2024-05-24 00:10:11 +02:00
child: ValueListenableBuilder<Song?>(
valueListenable: songNotifier,
builder: (c, t, w) {
return Row(
children: [
SizedBox(
height: 10.h,
width: 10.h,
child: Padding(
2024-05-30 11:37:22 +02:00
padding: const EdgeInsets.all(16),
2024-05-24 00:10:11 +02:00
child: ClipRRect(
child: (t == null)
? ColoredBox(
2024-05-23 20:36:42 +02:00
color: Theme.of(context)
.colorScheme
.primaryContainer,
child: Center(
child: Icon(
Icons.music_note,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
),
),
2024-05-24 00:10:11 +02:00
)
2024-05-27 21:46:18 +02:00
: CachedNetworkImage(
2024-05-28 18:54:05 +02:00
cacheKey: t.coverArtId,
2024-05-27 21:46:18 +02:00
imageUrl: t.coverArtUrl,
placeholder: (c, d) =>
2024-05-24 00:10:11 +02:00
Shimmer.fromColors(
baseColor: Colors.grey.shade300,
highlightColor:
Colors.grey.shade100,
child: Container(
color: Colors.grey,
),
),
2024-05-27 21:46:18 +02:00
errorWidget: (c, _, __) {
2024-05-24 00:10:11 +02:00
logger
..e(_)
..e(__);
return ColoredBox(
color: Theme.of(context)
.colorScheme
.primaryContainer,
child: Center(
child: Icon(
Icons.music_note,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
),
),
);
},
),
),
),
2024-05-23 20:36:42 +02:00
),
2024-05-24 00:10:11 +02:00
const SizedBox(
width: 5,
),
Expanded(
child: AutoSizeText(
AudioPlayerService().song == null
? "Nothing"
: AudioPlayerService().song!.title,
style: TextStyle(
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
fontSize: 14,
decoration: TextDecoration.none,
),
overflowReplacement: TextScroll(
AudioPlayerService().song == null
? "Nothing"
: AudioPlayerService().song!.title,
),
),
),
SizedBox(
width: 35.w,
2024-05-24 00:10:11 +02:00
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
2024-05-24 00:10:11 +02:00
children: [
IconButton(
onPressed: () {
AudioPlayerService().previous();
},
icon: const Icon(Icons.skip_previous),
),
2024-05-24 00:10:11 +02:00
IconButton(
onPressed: () async {
if (AudioPlayerService().song ==
null) {
return;
}
if (AudioPlayerService().isPlaying) {
await AudioPlayerService().pause();
} else {
AudioPlayerService().resume();
}
setState(() {});
},
icon: AnimatedCrossFade(
firstChild:
const Icon(Icons.play_arrow),
secondChild: const Icon(Icons.pause),
crossFadeState:
(AudioPlayerService().isPlaying)
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration:
const Duration(milliseconds: 300),
),
),
IconButton(
onPressed: () {
AudioPlayerService().next();
},
icon: const Icon(Icons.skip_next),
),
2024-05-24 00:10:11 +02:00
],
),
),
],
);
},
2024-05-23 20:36:42 +02:00
),
),
),
),
),
),
2024-05-28 19:59:09 +02:00
Container(
// Full player controls here
2024-05-23 20:36:42 +02:00
height: 90.h,
2024-05-28 19:59:09 +02:00
color: Theme.of(context).colorScheme.primaryContainer,
2024-05-23 20:36:42 +02:00
width: 100.w,
child: Center(
child: Column(
children: [
2024-05-28 19:59:09 +02:00
const SizedBox(
height: 30,
),
SizedBox(
width: 80.w,
height: 80.w,
child: ClipRRect(
2024-05-30 11:37:22 +02:00
borderRadius: BorderRadius.circular(16),
2024-05-28 19:59:09 +02:00
child: (AudioPlayerService().song == null)
? ColoredBox(
color: Theme.of(context)
.colorScheme
2024-05-30 11:37:22 +02:00
.secondaryContainer,
2024-05-28 19:59:09 +02:00
child: Center(
child: Icon(
Icons.music_note,
color: Theme.of(context)
.colorScheme
2024-05-30 11:37:22 +02:00
.onSecondaryContainer,
2024-05-28 19:59:09 +02:00
),
2024-05-23 20:36:42 +02:00
),
2024-05-28 19:59:09 +02:00
)
: (CachedNetworkImage(
cacheKey:
AudioPlayerService().song!.coverArtId,
imageUrl:
AudioPlayerService().song!.coverArtUrl,
placeholder: (c, d) => Shimmer.fromColors(
baseColor: Colors.grey.shade300,
highlightColor: Colors.grey.shade100,
child: Container(
color: Colors.grey,
),
2024-05-23 20:36:42 +02:00
),
2024-05-28 19:59:09 +02:00
errorWidget: (c, _, __) {
logger
..e(_)
..e(__);
return ColoredBox(
color: Theme.of(context)
.colorScheme
2024-05-30 11:37:22 +02:00
.secondaryContainer,
2024-05-28 19:59:09 +02:00
child: Center(
child: Icon(
Icons.music_note,
color: Theme.of(context)
.colorScheme
2024-05-30 11:37:22 +02:00
.onSecondaryContainer,
2024-05-28 19:59:09 +02:00
),
2024-05-23 20:36:42 +02:00
),
2024-05-28 19:59:09 +02:00
);
},
)),
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: 70.w,
height: 40,
child: AutoSizeText(
AudioPlayerService().song?.title ?? "Nothing",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.sp,
),
overflowReplacement: TextScroll(
AudioPlayerService().song?.title ?? "Nothing",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.sp,
),
),
),
),
SizedBox(
width: 70.w,
2024-05-30 11:37:22 +02:00
height: 30,
2024-05-28 19:59:09 +02:00
child: AutoSizeText(
AudioPlayerService().song?.artistName ?? "Nobody",
style: TextStyle(fontSize: 16.sp),
textAlign: TextAlign.center,
overflowReplacement: TextScroll(
AudioPlayerService().song?.artistName ?? "Nobody",
style: TextStyle(
fontSize: 16.sp,
),
),
),
),
SizedBox(
width: 60.w,
height: 40,
child: Overlay(
initialEntries: [
OverlayEntry(
builder: (c) => ValueListenableBuilder<List<int>>(
valueListenable: progressNotifier,
builder: (c, v, _) {
return FlutterSlider(
values: [v[0].toDouble()],
max: v[1].toDouble(),
min: 0,
onDragCompleted:
(handlerIndex, lowerValue, upperValue) {
if (AudioPlayerService().song == null) {
return;
}
logger.d(lowerValue);
AudioPlayerService()
.seek(lowerValue as double);
},
2024-05-23 20:36:42 +02:00
);
},
2024-05-28 19:59:09 +02:00
),
),
],
),
2024-05-23 20:36:42 +02:00
),
2024-05-30 11:37:22 +02:00
const SizedBox(
height: 10,
),
SizedBox(
width: 60.w,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {
AudioPlayerService().previous();
},
icon: const Icon(
Icons.skip_previous,
size: 36,
),
),
IconButton(
onPressed: () async {
if (AudioPlayerService().song == null) {
return;
}
if (AudioPlayerService().isPlaying) {
await AudioPlayerService().pause();
} else {
AudioPlayerService().resume();
}
setState(() {});
},
icon: AnimatedCrossFade(
firstChild: const Icon(
Icons.play_arrow,
size: 36, // TODO: adapt to display size
),
secondChild: const Icon(Icons.pause, size: 36),
crossFadeState: (AudioPlayerService().isPlaying)
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 300),
),
),
IconButton(
onPressed: () {
AudioPlayerService().next();
},
icon: const Icon(
Icons.skip_next,
size: 36,
),
),
],
),
),
2024-05-23 20:36:42 +02:00
],
),
),
),
],
),
2024-05-23 19:14:08 +02:00
),
),
);
}
}