freezer/lib/ui/player_screen.dart

774 lines
24 KiB
Dart
Raw Normal View History

2020-06-23 19:23:12 +00:00
import 'package:flutter/material.dart';
import 'package:audio_service/audio_service.dart';
import 'package:flutter_screenutil/screenutil.dart';
2020-06-23 19:23:12 +00:00
import 'package:freezer/api/deezer.dart';
import 'package:freezer/api/player.dart';
import 'package:freezer/translations.i18n.dart';
2020-06-23 19:23:12 +00:00
import 'package:freezer/ui/menu.dart';
import 'package:freezer/ui/settings_screen.dart';
2020-06-23 19:23:12 +00:00
import 'package:freezer/ui/tiles.dart';
import 'package:async/async.dart';
import 'package:just_audio/just_audio.dart';
2020-07-19 12:41:05 +00:00
import 'package:marquee/marquee.dart';
2020-06-23 19:23:12 +00:00
import 'cached_image.dart';
import '../api/definitions.dart';
import 'player_bar.dart';
import 'dart:ui';
import 'dart:async';
2020-06-23 19:23:12 +00:00
class PlayerScreen extends StatefulWidget {
@override
_PlayerScreenState createState() => _PlayerScreenState();
}
class _PlayerScreenState extends State<PlayerScreen> {
@override
Widget build(BuildContext context) {
//Responsive
ScreenUtil.init(context, allowFontScaling: true);
2020-06-23 19:23:12 +00:00
return Scaffold(
body: SafeArea(
child: StreamBuilder(
stream: StreamZip([AudioService.playbackStateStream, AudioService.currentMediaItemStream]),
builder: (BuildContext context, AsyncSnapshot snapshot) {
2020-06-23 19:23:12 +00:00
//When disconnected
if (AudioService.currentMediaItem == null) {
playerHelper.startService();
return Center(child: CircularProgressIndicator(),);
}
return OrientationBuilder(
builder: (context, orientation) {
//Landscape
if (orientation == Orientation.landscape) {
return PlayerScreenHorizontal();
}
//Portrait
return PlayerScreenVertical();
},
);
},
),
)
);
}
}
//Landscape
class PlayerScreenHorizontal extends StatefulWidget {
@override
_PlayerScreenHorizontalState createState() => _PlayerScreenHorizontalState();
}
class _PlayerScreenHorizontalState extends State<PlayerScreenHorizontal> {
double iconSize = ScreenUtil().setWidth(64);
bool _lyrics = false;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(16, 0, 16, 8),
child: Container(
width: ScreenUtil().setWidth(500),
child: Stack(
children: <Widget>[
CachedImage(
url: AudioService.currentMediaItem.artUri,
fullThumb: true,
),
if (_lyrics) LyricsWidget(
artUri: AudioService.currentMediaItem.extras['thumb'],
trackId: AudioService.currentMediaItem.id,
lyrics: Track.fromMediaItem(AudioService.currentMediaItem).lyrics,
height: ScreenUtil().setWidth(500),
),
],
),
)
),
//Right side
SizedBox(
width: ScreenUtil().setWidth(500),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(8, 16, 8, 0),
child: Container(
child: PlayerScreenTopRow(
textSize: ScreenUtil().setSp(26),
iconSize: ScreenUtil().setSp(32),
textWidth: ScreenUtil().setWidth(256),
short: true
),
)
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
2020-07-19 12:41:05 +00:00
Container(
height: ScreenUtil().setSp(40),
child: AudioService.currentMediaItem.displayTitle.length >= 22 ?
Marquee(
text: AudioService.currentMediaItem.displayTitle,
style: TextStyle(
fontSize: ScreenUtil().setSp(40),
fontWeight: FontWeight.bold
),
blankSpace: 32.0,
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
pauseAfterRound: Duration(seconds: 2),
):
Text(
AudioService.currentMediaItem.displayTitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: ScreenUtil().setSp(40),
fontWeight: FontWeight.bold
),
)
),
Container(height: 4,),
Text(
AudioService.currentMediaItem.displaySubtitle,
maxLines: 1,
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
color: Theme.of(context).primaryColor,
),
),
],
),
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: SeekBar(),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
PrevNextButton(iconSize, prev: true,),
PlayPauseButton(iconSize),
PrevNextButton(iconSize)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(8, 0, 8, 16),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 2.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.subtitles, size: ScreenUtil().setWidth(32)),
onPressed: () {
setState(() => _lyrics = !_lyrics);
},
),
FlatButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => QualitySettings())
),
child: Text(
AudioService.currentMediaItem.extras['qualityString'] ?? '',
style: TextStyle(fontSize: ScreenUtil().setSp(24)),
),
2020-06-23 19:23:12 +00:00
),
IconButton(
icon: Icon(Icons.more_vert, size: ScreenUtil().setWidth(32)),
onPressed: () {
Track t = Track.fromMediaItem(AudioService.currentMediaItem);
MenuSheet m = MenuSheet(context);
m.defaultTrackMenu(t);
},
)
],
),
)
)
],
),
)
],
);
}
}
2020-06-23 19:23:12 +00:00
//Portrait
class PlayerScreenVertical extends StatefulWidget {
@override
_PlayerScreenVerticalState createState() => _PlayerScreenVerticalState();
}
class _PlayerScreenVerticalState extends State<PlayerScreenVertical> {
double iconSize = ScreenUtil().setWidth(100);
bool _lyrics = false;
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(28, 10, 28, 0),
child: PlayerScreenTopRow()
),
Padding(
padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
child: Container(
height: ScreenUtil().setHeight(1050),
child: Stack(
children: <Widget>[
CachedImage(
url: AudioService.currentMediaItem.artUri,
fullThumb: true,
),
if (_lyrics) LyricsWidget(
artUri: AudioService.currentMediaItem.extras['thumb'],
trackId: AudioService.currentMediaItem.id,
lyrics: Track.fromMediaItem(AudioService.currentMediaItem).lyrics,
height: ScreenUtil().setHeight(1050),
),
],
),
)
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
2020-07-19 12:41:05 +00:00
Container(
height: ScreenUtil().setSp(64),
child: AudioService.currentMediaItem.displayTitle.length >= 24 ?
Marquee(
text: AudioService.currentMediaItem.displayTitle,
style: TextStyle(
fontSize: ScreenUtil().setSp(64),
fontWeight: FontWeight.bold
2020-07-19 12:41:05 +00:00
),
blankSpace: 32.0,
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
pauseAfterRound: Duration(seconds: 2),
):
Text(
AudioService.currentMediaItem.displayTitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: ScreenUtil().setSp(64),
fontWeight: FontWeight.bold
),
)
),
Container(height: 4,),
Text(
AudioService.currentMediaItem.displaySubtitle,
maxLines: 1,
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: ScreenUtil().setSp(52),
color: Theme.of(context).primaryColor,
),
),
],
),
SeekBar(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
PrevNextButton(iconSize, prev: true,),
PlayPauseButton(iconSize),
PrevNextButton(iconSize)
],
),
//Container(height: 8.0,),
Padding(
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 16.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.subtitles, size: ScreenUtil().setWidth(46)),
onPressed: () {
setState(() => _lyrics = !_lyrics);
},
),
FlatButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => QualitySettings())
),
child: Text(
AudioService.currentMediaItem.extras['qualityString'] ?? '',
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
),
),
),
IconButton(
icon: Icon(Icons.more_vert, size: ScreenUtil().setWidth(46)),
onPressed: () {
Track t = Track.fromMediaItem(AudioService.currentMediaItem);
MenuSheet m = MenuSheet(context);
m.defaultTrackMenu(t);
},
)
],
),
)
],
2020-06-23 19:23:12 +00:00
);
}
}
2020-06-23 19:23:12 +00:00
class LyricsWidget extends StatefulWidget {
final Lyrics lyrics;
final String trackId;
final String artUri;
final double height;
LyricsWidget({this.artUri, this.lyrics, this.trackId, this.height, Key key}): super(key: key);
@override
_LyricsWidgetState createState() => _LyricsWidgetState();
}
class _LyricsWidgetState extends State<LyricsWidget> {
bool _loading = true;
Lyrics _l;
Color _textColor = Colors.black;
ScrollController _scrollController = ScrollController();
Timer _timer;
int _currentIndex;
double _boxHeight;
2020-07-19 12:41:05 +00:00
double _lyricHeight = 128;
String _trackId;
2020-06-23 19:23:12 +00:00
Future _load() async {
_trackId = widget.trackId;
2020-06-23 19:23:12 +00:00
//Get text color by album art (black or white)
if (widget.artUri != null) {
bool bw = await imagesDatabase.isDark(widget.artUri);
if (bw != null) setState(() => _textColor = bw?Colors.white:Colors.black);
}
if (widget.lyrics.lyrics == null || widget.lyrics.lyrics.length == 0) {
//Load from api
try {
_l = await deezerAPI.lyrics(_trackId);
2020-06-23 19:23:12 +00:00
setState(() => _loading = false);
} catch (e) {
print(e);
2020-06-23 19:23:12 +00:00
//Error Lyrics
setState(() => _l = Lyrics.error());
}
//Empty lyrics
if (_l.lyrics.length == 0) {
setState(() {
_l = Lyrics.error();
_loading = false;
});
2020-06-23 19:23:12 +00:00
}
2020-06-23 19:23:12 +00:00
} else {
//Use provided lyrics
_l = widget.lyrics;
setState(() => _loading = false);
}
}
@override
void initState() {
this._boxHeight = widget.height??400.0;
_load();
2020-06-23 19:23:12 +00:00
Timer.periodic(Duration(milliseconds: 500), (timer) {
_timer = timer;
if (_loading) return;
//Update index of current lyric
setState(() {
_currentIndex = _l.lyrics.lastIndexWhere((l) => l.offset <= AudioService.playbackState.currentPosition);
});
//Scroll to current lyric
if (_currentIndex <= 0) return;
_scrollController.animateTo(
2020-07-19 12:41:05 +00:00
(_lyricHeight * _currentIndex) + (_lyricHeight / 2) - (_boxHeight / 2),
2020-06-23 19:23:12 +00:00
duration: Duration(milliseconds: 250),
curve: Curves.ease
);
});
super.initState();
}
@override
void dispose() {
if (_timer != null) _timer.cancel();
super.dispose();
}
@override
void didUpdateWidget(LyricsWidget oldWidget) {
if (this._trackId != widget.trackId) {
setState(() {
_loading = true;
this._trackId = widget.trackId;
});
_load();
}
super.didUpdateWidget(oldWidget);
}
2020-06-23 19:23:12 +00:00
@override
Widget build(BuildContext context) {
return Container(
height: _boxHeight,
width: _boxHeight,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 7.0,
sigmaY: 7.0
),
child: Container(
child: _loading?
Center(child: CircularProgressIndicator(),) :
SingleChildScrollView(
controller: _scrollController,
child: Column(
children: List.generate(_l.lyrics.length, (i) {
return Container(
2020-07-19 12:41:05 +00:00
height: _lyricHeight,
2020-06-23 19:23:12 +00:00
child: Center(
child: Stack(
children: <Widget>[
Text(
_l.lyrics[i].text,
textAlign: TextAlign.center,
style: TextStyle(
2020-07-19 12:41:05 +00:00
fontSize: 28.0,
fontWeight: (_currentIndex == i)?FontWeight.bold:FontWeight.normal,
foreground: Paint()
..strokeWidth = 6
..style = PaintingStyle.stroke
..color = (_textColor==Colors.black)?Colors.white:Colors.black,
),
),
Text(
_l.lyrics[i].text,
textAlign: TextAlign.center,
style: TextStyle(
color: _textColor,
2020-07-19 12:41:05 +00:00
fontSize: 28.0,
fontWeight: (_currentIndex == i)?FontWeight.bold:FontWeight.normal
),
),
],
)
2020-06-23 19:23:12 +00:00
)
);
}),
),
)
),
),
);
}
}
//Top row containing QueueSource, queue...
class PlayerScreenTopRow extends StatelessWidget {
double textSize;
double iconSize;
double textWidth;
bool short;
PlayerScreenTopRow({this.textSize, this.iconSize, this.textWidth, this.short});
2020-06-23 19:23:12 +00:00
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 8, 0),
child: InkWell(
child: Container(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.keyboard_arrow_down, size: this.iconSize??ScreenUtil().setWidth(46)),
),
onTap: () {
Navigator.of(context).pop();
},
),
),
Container(
width: this.textWidth??ScreenUtil().setWidth(550),
child: Text(
(short??false)?playerHelper.queueSource.text:'Playing from:'.i18n + ' ' + playerHelper.queueSource.text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: TextStyle(fontSize: this.textSize??ScreenUtil().setSp(34)),
),
)
],
2020-06-23 19:23:12 +00:00
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RepeatButton(size: this.iconSize),
2020-06-23 19:23:12 +00:00
Container(width: 16.0,),
InkWell(
child: Container(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.menu, size: this.iconSize??ScreenUtil().setWidth(46)),
),
2020-06-23 19:23:12 +00:00
onTap: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => QueueScreen()
));
},
),
],
)
],
);
}
}
class RepeatButton extends StatefulWidget {
double size;
RepeatButton({this.size, Key key}): super(key: key);
2020-06-23 19:23:12 +00:00
@override
_RepeatButtonState createState() => _RepeatButtonState();
}
class _RepeatButtonState extends State<RepeatButton> {
double _size = ScreenUtil().setWidth(46);
2020-06-23 19:23:12 +00:00
Icon get icon {
switch (playerHelper.repeatType) {
case LoopMode.off:
return Icon(Icons.repeat, size: widget.size??_size);
case LoopMode.all:
2020-06-23 19:23:12 +00:00
return Icon(
Icons.repeat,
color: Theme.of(context).primaryColor,
size: widget.size??_size
2020-06-23 19:23:12 +00:00
);
case LoopMode.one:
2020-06-23 19:23:12 +00:00
return Icon(
Icons.repeat_one,
color: Theme.of(context).primaryColor,
size: widget.size??_size
2020-06-23 19:23:12 +00:00
);
}
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () async {
await playerHelper.changeRepeat();
setState(() {});
},
child: Container(
padding: EdgeInsets.all(8.0),
child: icon,
),
2020-06-23 19:23:12 +00:00
);
}
}
class SeekBar extends StatefulWidget {
@override
_SeekBarState createState() => _SeekBarState();
}
class _SeekBarState extends State<SeekBar> {
bool _seeking = false;
double _pos;
double get position {
if (_seeking) return _pos;
if (AudioService.playbackState == null) return 0.0;
double p = AudioService.playbackState.currentPosition.inMilliseconds.toDouble()??0.0;
if (p > duration) return duration;
return p;
}
//Duration to mm:ss
String _timeString(double pos) {
Duration d = Duration(milliseconds: pos.toInt());
return "${d.inMinutes}:${d.inSeconds.remainder(60).toString().padLeft(2, '0')}";
}
double get duration {
if (AudioService.currentMediaItem == null) return 1.0;
return AudioService.currentMediaItem.duration.inMilliseconds.toDouble();
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Stream.periodic(Duration(milliseconds: 250)),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
_timeString(position),
style: TextStyle(
fontSize: ScreenUtil().setSp(35)
2020-06-23 19:23:12 +00:00
),
),
Text(
_timeString(duration),
style: TextStyle(
fontSize: ScreenUtil().setSp(35)
2020-06-23 19:23:12 +00:00
),
)
],
),
),
Container(
height: 32.0,
child: Slider(
value: position,
max: duration,
onChangeStart: (double d) {
setState(() {
_seeking = true;
_pos = d;
});
},
onChanged: (double d) {
setState(() {
_pos = d;
});
},
onChangeEnd: (double d) async {
await AudioService.seekTo(Duration(milliseconds: d.round()));
setState(() {
_pos = d;
_seeking = false;
});
},
),
)
],
);
},
);
}
}
class QueueScreen extends StatefulWidget {
@override
_QueueScreenState createState() => _QueueScreenState();
}
class _QueueScreenState extends State<QueueScreen> {
//Get proper icon color by theme
Color get shuffleIconColor {
Color og = Theme.of(context).primaryColor;
if (og.computeLuminance() > 0.5) {
if (playerHelper.shuffle) return Theme.of(context).primaryColorLight;
return Colors.black;
}
if (playerHelper.shuffle) return Theme.of(context).primaryColorDark;
return Colors.white;
}
2020-06-23 19:23:12 +00:00
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Queue'.i18n),
2020-06-23 19:23:12 +00:00
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shuffle,
color: shuffleIconColor
),
2020-06-23 19:23:12 +00:00
onPressed: () async {
await playerHelper.toggleShuffle();
setState(() {});
2020-06-23 19:23:12 +00:00
},
)
],
),
body: ListView.builder(
itemCount: AudioService.queue.length,
itemBuilder: (context, i) {
Track t = Track.fromMediaItem(AudioService.queue[i]);
return TrackTile(
t,
onTap: () async {
await AudioService.playFromMediaId(t.id);
Navigator.of(context).pop();
},
onHold: () {
MenuSheet m = MenuSheet(context);
m.defaultTrackMenu(t);
},
);
},
)
);
}
}