lyrics: add go-to on click feature

player_bar: animated play/pause icon

lib/ui/lyrics.dart

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

lib/ui/player_bar.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:audio_service/audio_service.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -11,8 +13,10 @@ class PlayerBar extends StatelessWidget {
   double get progress {
     if (AudioService.playbackState == 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;
@@ -32,7 +36,6 @@ class PlayerBar extends StatelessWidget {
         }
         //Left
         if (details.delta.dx < -sensitivity) {
-
           await AudioService.skipToNext();
         }
         _gestureRegistered = false;
@@ -42,13 +45,18 @@ class PlayerBar extends StatelessWidget {
           stream: Stream.periodic(Duration(milliseconds: 250)),
           builder: (BuildContext context, AsyncSnapshot snapshot) {
             if (AudioService.currentMediaItem == null)
-            return Container(width: 0, height: 0,);
+              return Container(
+                width: 0,
+                height: 0,
+              );
             return Column(
               mainAxisSize: MainAxisSize.min,
               children: <Widget>[
                 Container(
                   // For Android TV: indicate focus by grey
-                color: focusNode.hasFocus ? Colors.black26 : Theme.of(context).bottomAppBarColor,
+                  color: focusNode.hasFocus
+                      ? Colors.black26
+                      : Theme.of(context).bottomAppBarColor,
                   child: ListTile(
                       dense: true,
                       focusNode: focusNode,
@@ -56,9 +64,10 @@ class PlayerBar extends StatelessWidget {
                       onTap: () {
                         Navigator.of(context).push(MaterialPageRoute(
                             builder: (BuildContext context) => PlayerScreen()));
-                    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
+                        SystemChrome.setSystemUIOverlayStyle(
-                      systemNavigationBarColor: settings.themeData
+                            SystemUiOverlayStyle(
-                          .scaffoldBackgroundColor,
+                          systemNavigationBarColor:
+                              settings.themeData.scaffoldBackgroundColor,
                         ));
                       },
                       leading: CachedImage(
@@ -80,24 +89,27 @@ class PlayerBar extends StatelessWidget {
                       trailing: Row(
                         mainAxisSize: MainAxisSize.min,
                         children: <Widget>[
-                      PrevNextButton(iconSize, prev: true, hidePrev: true,),
+                          PrevNextButton(
+                            iconSize,
+                            prev: true,
+                            hidePrev: true,
+                          ),
                           PlayPauseButton(iconSize),
                           PrevNextButton(iconSize)
                         ],
-                  )
+                      )),
-                ),
                 ),
                 Container(
                   height: 3.0,
                   child: LinearProgressIndicator(
-                  backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1),
+                    backgroundColor:
+                        Theme.of(context).primaryColor.withOpacity(0.1),
                     value: progress,
                   ),
                 )
               ],
             );
-        }
+          }),
-      ),
     );
   }
 }
@@ -115,7 +127,8 @@ class PrevNextButton extends StatelessWidget {
       stream: AudioService.queueStream,
       builder: (context, _snapshot) {
         if (!prev) {
-          if (playerHelper.queueIndex == (AudioService.queue??[]).length - 1) {
+          if (playerHelper.queueIndex ==
+              (AudioService.queue ?? []).length - 1) {
             return IconButton(
               icon: Icon(Icons.skip_next),
               iconSize: size,
@@ -131,7 +144,10 @@ class PrevNextButton extends StatelessWidget {
         if (prev) {
           if (i == 0) {
             if (hidePrev) {
-              return Container(height: 0, width: 0,);
+              return Container(
+                height: 0,
+                width: 0,
+              );
             }
             return IconButton(
               icon: Icon(Icons.skip_previous),
@@ -151,38 +167,78 @@ class PrevNextButton extends StatelessWidget {
   }
 }
 
-
+class PlayPauseButton extends StatefulWidget {
-
-class PlayPauseButton extends StatelessWidget {
-
   final double size;
   PlayPauseButton(this.size);
 
   @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(
       stream: AudioService.playbackStateStream,
       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(
-              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) {
@@ -190,12 +246,12 @@ class PlayPauseButton extends StatelessWidget {
           case AudioProcessingState.error:
           case AudioProcessingState.none:
           case AudioProcessingState.stopped:
-            return Container(width: this.size, height: this.size);
+            return Container(width: widget.size, height: widget.size);
           //Loading, connecting, rewinding...
           default:
             return Container(
-              width: this.size,
+              width: widget.size,
-              height: this.size,
+              height: widget.size,
               child: CircularProgressIndicator(),
             );
         }