pato05/freezer
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

lyrics: add go-to on click feature

Browse source 
player_bar: animated play/pause icon
This commit is contained in:
pato05 2021-04-05 00:59:57 +02:00
parent ccb00191ad
commit 648a8ff7e8
2 changed files with 178 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
lib/ui/lyrics.dart
View file

@ -1,7 +1,6 @@
import 'dart:async'; import 'dart:async';
import 'package:audio_service/audio_service.dart'; import 'package:audio_service/audio_service.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:freezer/api/deezer.dart'; import 'package:freezer/api/deezer.dart';
import 'package:freezer/api/definitions.dart'; import 'package:freezer/api/definitions.dart';
@ -37,7 +36,7 @@ class _LyricsScreenState extends State<LyricsScreen> {
Future _load() async { Future _load() async {
//Already available //Already available
if (this.lyrics != null) return; if (this.lyrics != null) return;
if (widget.lyrics != null && widget.lyrics.lyrics != null && widget.lyrics.lyrics.length > 0) { if (widget.lyrics?.lyrics != null && widget.lyrics.lyrics.length > 0) {
setState(() { setState(() {
lyrics = widget.lyrics; lyrics = widget.lyrics;
_loading = false; _loading = false;
@ -70,18 +69,19 @@ class _LyricsScreenState extends State<LyricsScreen> {
Timer.periodic(Duration(milliseconds: 350), (timer) { Timer.periodic(Duration(milliseconds: 350), (timer) {
_timer = timer; _timer = timer;
_currentIndex = lyrics?.lyrics?.lastIndexWhere((l) => l.offset <= AudioService.playbackState.currentPosition);
if (_loading) return; if (_loading) return;
//Update current lyric index
setState(() => _currentIndex = lyrics.lyrics.lastIndexWhere((l) => l.offset <= AudioService.playbackState.currentPosition));
//Scroll to current lyric //Scroll to current lyric
if (_currentIndex <= 0) return; if (_currentIndex <= 0) return;
if (_prevIndex == _currentIndex) return; if (_prevIndex == _currentIndex) return;
//Update current lyric index
setState(() => null);
_prevIndex = _currentIndex; _prevIndex = _currentIndex;
//Lyric height, screen height, appbar height
double _scrollTo = (height * _currentIndex) - (MediaQuery.of(context).size.height / 2) + (height / 2) + 56;
if (0 > _scrollTo) return;
_controller.animateTo( _controller.animateTo(
//Lyric height, screen height, appbar height _scrollTo,
(height * _currentIndex) - (MediaQuery.of(context).size.height / 2) + (height / 2) + 56,
duration: Duration(milliseconds: 250), duration: Duration(milliseconds: 250),
curve: Curves.ease curve: Curves.ease
); );
@ -141,16 +141,11 @@ class _LyricsScreenState extends State<LyricsScreen> {
//Lyrics //Lyrics
Padding( Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, settings.lyricsVisualizer ? 100 : 0), padding: EdgeInsets.fromLTRB(0, 0, 0, settings.lyricsVisualizer ? 100 : 0),
child: ListView( child: _error ?
controller: _controller, //Shouldn't really happen, empty lyrics have own text
children: [ ErrorScreen() :
//Shouldn't really happen, empty lyrics have own text // Loading
if (_error) _loading ? Padding(
ErrorScreen(),
//Loading
if (_loading)
Padding(
padding: EdgeInsets.all(8.0), padding: EdgeInsets.all(8.0),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -158,32 +153,34 @@ class _LyricsScreenState extends State<LyricsScreen> {
CircularProgressIndicator() CircularProgressIndicator()
], ],
), ),
), ) : ListView.builder(
controller: _controller,
if (lyrics != null) itemCount: lyrics.lyrics.length,
...List.generate(lyrics.lyrics.length, (i) { itemBuilder: (BuildContext context, int i) {
return Padding( return Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0), padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), borderRadius: BorderRadius.circular(8.0),
color: (_currentIndex == i) ? Colors.grey.withOpacity(0.25) : Colors.transparent, color: _currentIndex == i ? Colors.grey.withOpacity(0.25) : Colors.transparent,
), ),
height: height, height: height,
child: Center( child: InkWell(
child: Text( borderRadius: BorderRadius.circular(8.0),
lyrics.lyrics[i].text, onTap: lyrics.id != null ? () => AudioService.seekTo(lyrics.lyrics[i].offset) : null,
textAlign: TextAlign.center, child: Center(
style: TextStyle( child: Text(
fontSize: 26.0, lyrics.lyrics[i].text,
fontWeight: (_currentIndex == i) ? FontWeight.bold : FontWeight.normal textAlign: TextAlign.center,
style: TextStyle(
fontSize: 26.0,
fontWeight: (_currentIndex == i) ? FontWeight.bold : FontWeight.normal
),
), ),
), ))
)
) )
); );
}), },
],
), ),
) )
], ],

238
lib/ui/player_bar.dart
View file

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:audio_service/audio_service.dart'; import 'package:audio_service/audio_service.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -11,8 +13,10 @@ class PlayerBar extends StatelessWidget {
double get progress { double get progress {
if (AudioService.playbackState == null) return 0.0; if (AudioService.playbackState == null) return 0.0;
if (AudioService.currentMediaItem == null) return 0.0; if (AudioService.currentMediaItem == null) return 0.0;
if (AudioService.currentMediaItem.duration.inSeconds == 0) return 0.0; //Division by 0 if (AudioService.currentMediaItem.duration.inSeconds == 0)
return AudioService.playbackState.currentPosition.inSeconds / AudioService.currentMediaItem.duration.inSeconds; return 0.0; //Division by 0
return AudioService.playbackState.currentPosition.inSeconds /
AudioService.currentMediaItem.duration.inSeconds;
} }
double iconSize = 28; double iconSize = 28;
@ -32,72 +36,80 @@ class PlayerBar extends StatelessWidget {
} }
//Left //Left
if (details.delta.dx < -sensitivity) { if (details.delta.dx < -sensitivity) {
await AudioService.skipToNext(); await AudioService.skipToNext();
} }
_gestureRegistered = false; _gestureRegistered = false;
return; return;
}, },
child: StreamBuilder( child: StreamBuilder(
stream: Stream.periodic(Duration(milliseconds: 250)), stream: Stream.periodic(Duration(milliseconds: 250)),
builder: (BuildContext context, AsyncSnapshot snapshot) { builder: (BuildContext context, AsyncSnapshot snapshot) {
if (AudioService.currentMediaItem == null) if (AudioService.currentMediaItem == null)
return Container(width: 0, height: 0,); return Container(
return Column( width: 0,
mainAxisSize: MainAxisSize.min, height: 0,
children: <Widget>[ );
Container( return Column(
// For Android TV: indicate focus by grey mainAxisSize: MainAxisSize.min,
color: focusNode.hasFocus ? Colors.black26 : Theme.of(context).bottomAppBarColor, children: <Widget>[
child: ListTile( Container(
dense: true, // For Android TV: indicate focus by grey
focusNode: focusNode, color: focusNode.hasFocus
contentPadding: EdgeInsets.symmetric(horizontal: 8.0), ? Colors.black26
onTap: () { : Theme.of(context).bottomAppBarColor,
Navigator.of(context).push(MaterialPageRoute( child: ListTile(
builder: (BuildContext context) => PlayerScreen())); dense: true,
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( focusNode: focusNode,
systemNavigationBarColor: settings.themeData contentPadding: EdgeInsets.symmetric(horizontal: 8.0),
.scaffoldBackgroundColor, onTap: () {
)); Navigator.of(context).push(MaterialPageRoute(
}, builder: (BuildContext context) => PlayerScreen()));
leading: CachedImage( SystemChrome.setSystemUIOverlayStyle(
width: 50, SystemUiOverlayStyle(
height: 50, systemNavigationBarColor:
url: AudioService.currentMediaItem.extras['thumb'] ?? settings.themeData.scaffoldBackgroundColor,
AudioService.currentMediaItem.artUri, ));
), },
title: Text( leading: CachedImage(
AudioService.currentMediaItem.displayTitle, width: 50,
overflow: TextOverflow.clip, height: 50,
maxLines: 1, url: AudioService.currentMediaItem.extras['thumb'] ??
), AudioService.currentMediaItem.artUri,
subtitle: Text( ),
AudioService.currentMediaItem.displaySubtitle ?? '', title: Text(
overflow: TextOverflow.clip, AudioService.currentMediaItem.displayTitle,
maxLines: 1, overflow: TextOverflow.clip,
), maxLines: 1,
trailing: Row( ),
mainAxisSize: MainAxisSize.min, subtitle: Text(
children: <Widget>[ AudioService.currentMediaItem.displaySubtitle ?? '',
PrevNextButton(iconSize, prev: true, hidePrev: true,), overflow: TextOverflow.clip,
PlayPauseButton(iconSize), maxLines: 1,
PrevNextButton(iconSize) ),
], trailing: Row(
) mainAxisSize: MainAxisSize.min,
children: <Widget>[
PrevNextButton(
iconSize,
prev: true,
hidePrev: true,
),
PlayPauseButton(iconSize),
PrevNextButton(iconSize)
],
)),
), ),
), Container(
Container( height: 3.0,
height: 3.0, child: LinearProgressIndicator(
child: LinearProgressIndicator( backgroundColor:
backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1), Theme.of(context).primaryColor.withOpacity(0.1),
value: progress, value: progress,
), ),
) )
], ],
); );
} }),
),
); );
} }
} }
@ -115,7 +127,8 @@ class PrevNextButton extends StatelessWidget {
stream: AudioService.queueStream, stream: AudioService.queueStream,
builder: (context, _snapshot) { builder: (context, _snapshot) {
if (!prev) { if (!prev) {
if (playerHelper.queueIndex == (AudioService.queue??[]).length - 1) { if (playerHelper.queueIndex ==
(AudioService.queue ?? []).length - 1) {
return IconButton( return IconButton(
icon: Icon(Icons.skip_next), icon: Icon(Icons.skip_next),
iconSize: size, iconSize: size,
@ -131,7 +144,10 @@ class PrevNextButton extends StatelessWidget {
if (prev) { if (prev) {
if (i == 0) { if (i == 0) {
if (hidePrev) { if (hidePrev) {
return Container(height: 0, width: 0,); return Container(
height: 0,
width: 0,
);
} }
return IconButton( return IconButton(
icon: Icon(Icons.skip_previous), icon: Icon(Icons.skip_previous),
@ -151,51 +167,91 @@ class PrevNextButton extends StatelessWidget {
} }
} }
class PlayPauseButton extends StatefulWidget {
class PlayPauseButton extends StatelessWidget {
final double size; final double size;
PlayPauseButton(this.size); PlayPauseButton(this.size);
@override @override
Widget build(BuildContext context) { _PlayPauseButtonState createState() => _PlayPauseButtonState();
}
class _PlayPauseButtonState extends State<PlayPauseButton>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
_animation = Tween<double>(begin: 0, end: 1)
.animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return StreamBuilder( return StreamBuilder(
stream: AudioService.playbackStateStream, stream: AudioService.playbackStateStream,
builder: (context, snapshot) { builder: (context, snapshot) {
//Playing ////Playing
if (AudioService.playbackState?.playing??false) { //if (AudioService.playbackState?.playing??false) {
// return IconButton(
// iconSize: widget.size,
// icon: Icon(Icons.pause),
// onPressed: () => AudioService.pause()
// );
//}
//
////Paused
//if ((!(AudioService.playbackState?.playing??false) &&
// AudioService.playbackState.processingState == AudioProcessingState.ready) ||
// //None state (stopped)
// AudioService.playbackState.processingState == AudioProcessingState.none) {
// return IconButton(
// iconSize: widget.size,
// icon: Icon(Icons.play_arrow),
// onPressed: () => AudioService.play()
// );
//}
bool _playing = AudioService.playbackState?.playing ?? false;
if (_playing ||
AudioService.playbackState?.processingState ==
AudioProcessingState.ready ||
AudioService.playbackState?.processingState ==
AudioProcessingState.none) {
if (_playing)
_controller.forward();
else
_controller.reverse();
return IconButton( return IconButton(
iconSize: this.size, icon: AnimatedIcon(
icon: Icon(Icons.pause), icon: AnimatedIcons.play_pause,
onPressed: () => AudioService.pause() progress: _animation,
); ),
} iconSize: widget.size,
onPressed: _playing
//Paused ? () => AudioService.pause()
if ((!(AudioService.playbackState?.playing??false) && : () => AudioService.play());
AudioService.playbackState.processingState == AudioProcessingState.ready) ||
//None state (stopped)
AudioService.playbackState.processingState == AudioProcessingState.none) {
return IconButton(
iconSize: this.size,
icon: Icon(Icons.play_arrow),
onPressed: () => AudioService.play()
);
} }
switch (AudioService.playbackState.processingState) { switch (AudioService.playbackState.processingState) {
//Stopped/Error //Stopped/Error
case AudioProcessingState.error: case AudioProcessingState.error:
case AudioProcessingState.none: case AudioProcessingState.none:
case AudioProcessingState.stopped: case AudioProcessingState.stopped:
return Container(width: this.size, height: this.size); return Container(width: widget.size, height: widget.size);
//Loading, connecting, rewinding... //Loading, connecting, rewinding...
default: default:
return Container( return Container(
width: this.size, width: widget.size,
height: this.size, height: widget.size,
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
); );
} }