Redesign player widget.

lib/episodes/episode_detail.dart

@@ -2,20 +2,21 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:provider/provider.dart';
 import 'package:flutter_html/flutter_html.dart';
-import 'package:url_launcher/url_launcher.dart';
-import 'package:fluttertoast/fluttertoast.dart';
-import 'package:intl/intl.dart';
-import 'package:tuple/tuple.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:intl/intl.dart';
+import 'package:provider/provider.dart';
+import 'package:tuple/tuple.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 import '../home/audioplayer.dart';
 import '../local_storage/sqflite_localpodcast.dart';
 import '../state/audio_state.dart';
 import '../type/episodebrief.dart';
 import '../type/play_histroy.dart';
+import '../util/audiopanel.dart';
 import '../util/custom_widget.dart';
 import '../util/extension_helper.dart';
 import 'episode_download.dart';
@@ -34,6 +35,7 @@ class EpisodeDetail extends StatefulWidget {
 
 class _EpisodeDetailState extends State<EpisodeDetail> {
   final textstyle = TextStyle(fontSize: 15.0, color: Colors.black);
+  final GlobalKey<AudioPanelState> _playerKey = GlobalKey<AudioPanelState>();
   double downloadProgress;
 
   /// Show page title.
@@ -122,6 +124,16 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
         systemNavigationBarIconBrightness:
             Theme.of(context).accentColorBrightness,
       ),
+      child: WillPopScope(
+        onWillPop: () async {
+          if (_playerKey.currentState != null &&
+              _playerKey.currentState.initSize > 100) {
+            _playerKey.currentState.backToMini();
+            return false;
+          } else {
+            return true;
+          }
+        },
         child: Scaffold(
           backgroundColor: Theme.of(context).primaryColor,
           appBar: AppBar(
@@ -211,8 +223,8 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                             s.published(DateFormat.yMMMd().format(
                                 DateTime.fromMillisecondsSinceEpoch(
                                     widget.episodeItem.pubDate))),
-                          style:
+                            style: TextStyle(
-                              TextStyle(color: Theme.of(context).accentColor)),
+                                color: Theme.of(context).accentColor)),
                       ),
                       Padding(
                         padding: EdgeInsets.only(
@@ -234,8 +246,8 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                               Container(
                                 decoration: BoxDecoration(
                                     color: Colors.cyan[300],
-                                  borderRadius:
+                                    borderRadius: BorderRadius.all(
-                                      BorderRadius.all(Radius.circular(15.0))),
+                                        Radius.circular(15.0))),
                                 height: 25.0,
                                 margin: EdgeInsets.only(right: 10.0),
                                 padding: EdgeInsets.symmetric(horizontal: 10.0),
@@ -250,8 +262,8 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                               Container(
                                 decoration: BoxDecoration(
                                     color: Colors.lightBlue[300],
-                                  borderRadius:
+                                    borderRadius: BorderRadius.all(
-                                      BorderRadius.all(Radius.circular(15.0))),
+                                        Radius.circular(15.0))),
                                 height: 25.0,
                                 margin: EdgeInsets.only(right: 10.0),
                                 padding: EdgeInsets.symmetric(horizontal: 10.0),
@@ -288,7 +300,9 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                               : _description.length > 0
                                   ? Container(
                                       padding: EdgeInsets.only(
-                                        left: 20.0, right: 20.0, bottom: 50.0),
+                                          left: 20.0,
+                                          right: 20.0,
+                                          bottom: 50.0),
                                       alignment: Alignment.topLeft,
                                       child: SelectableLinkify(
                                         onOpen: (link) {
@@ -315,8 +329,8 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                                             MainAxisAlignment.center,
                                         children: <Widget>[
                                           Image(
-                                          image:
+                                            image: AssetImage(
-                                              AssetImage('assets/shownote.png'),
+                                                'assets/shownote.png'),
                                             height: 100.0,
                                           ),
                                           Padding(padding: EdgeInsets.all(5.0)),
@@ -332,8 +346,8 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                       Selector<AudioPlayerNotifier, bool>(
                           selector: (_, audio) => audio.playerRunning,
                           builder: (_, data, __) {
-                          return Padding(
+                            return SizedBox(
-                            padding: EdgeInsets.only(bottom: data ? 60.0 : 0),
+                              height: data ? 70.0 : 0,
                             );
                           }),
                     ],
@@ -345,7 +359,7 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                   builder: (_, data, __) {
                     return Container(
                       alignment: Alignment.bottomCenter,
-                    padding: EdgeInsets.only(bottom: data ? 60.0 : 0),
+                      padding: EdgeInsets.only(bottom: data ? 70.0 : 0),
                       child: AnimatedContainer(
                         duration: Duration(milliseconds: 400),
                         height: !_showMenu ? 50 : 0,
@@ -359,10 +373,11 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
                       ),
                     );
                   }),
-            Container(child: PlayerWidget()),
+              Container(child: PlayerWidget(playerKey: _playerKey)),
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/home/home.dart

@@ -18,6 +18,7 @@ import '../state/podcast_group.dart';
 import '../state/setting_state.dart';
 import '../type/episodebrief.dart';
 import '../type/playlist.dart';
+import '../util/audiopanel.dart';
 import '../util/custom_widget.dart';
 import '../util/episodegrid.dart';
 import '../util/extension_helper.dart';
@@ -44,6 +45,7 @@ class Home extends StatefulWidget {
 
 class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
   final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+  final GlobalKey<AudioPanelState> _playerKey = GlobalKey<AudioPanelState>();
   TabController _controller;
   Decoration _getIndicator(BuildContext context) {
     return UnderlineTabIndicator(
@@ -102,10 +104,14 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
           systemNavigationBarColor: Theme.of(context).primaryColor,
         ),
         child: Scaffold(
-          key: _scaffoldKey,
+          //  key: _scaffoldKey,
           body: WillPopScope(
             onWillPop: () async {
-              if (Platform.isAndroid) {
+              if (_playerKey.currentState != null &&
+                  _playerKey.currentState.initSize > 100) {
+                _playerKey.currentState.backToMini();
+                return false;
+              } else if (Platform.isAndroid) {
                 _androidAppRetain.invokeMethod('sendToBackground');
                 return false;
               } else {
@@ -445,7 +451,7 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
                           }),
                     ],
                   ),
-                  Container(child: PlayerWidget()),
+                  Container(child: PlayerWidget(playerKey: _playerKey)),
                 ],
               ),
             ),

lib/podcasts/podcast_detail.dart

@@ -21,6 +21,7 @@ import '../type/episodebrief.dart';
 import '../type/fireside_data.dart';
 import '../type/play_histroy.dart';
 import '../type/podcastlocal.dart';
+import '../util/audiopanel.dart';
 import '../util/custom_widget.dart';
 import '../util/episodegrid.dart';
 import '../util/extension_helper.dart';
@@ -39,6 +40,8 @@ class _PodcastDetailState extends State<PodcastDetail> {
   final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
       GlobalKey<RefreshIndicatorState>();
 
+  final GlobalKey<AudioPanelState> _playerKey = GlobalKey<AudioPanelState>();
+
   /// Fireside background if hosted on fireside.
   String _backgroundImage;
 
@@ -628,12 +631,22 @@ class _PodcastDetailState extends State<PodcastDetail> {
         systemNavigationBarColor: Theme.of(context).primaryColor,
         systemNavigationBarIconBrightness:
             Theme.of(context).accentColorBrightness,
-        //statusBarColor: _color,
       ),
+      child: WillPopScope(
+        onWillPop: () {
+          if (_playerKey.currentState != null &&
+              _playerKey.currentState.initSize > 100) {
+            _playerKey.currentState.backToMini();
+            return Future.value(false);
+          } else {
+            return Future.value(true);
+          }
+        },
         child: Scaffold(
           body: SafeArea(
             top: false,
-          minimum: widget.hide ? EdgeInsets.only(bottom: 50) : EdgeInsets.zero,
+            minimum:
+                widget.hide ? EdgeInsets.only(bottom: 50) : EdgeInsets.zero,
             child: RefreshIndicator(
               key: _refreshIndicatorKey,
               color: Theme.of(context).accentColor,
@@ -688,18 +701,22 @@ class _PodcastDetailState extends State<PodcastDetail> {
                                     slivers: <Widget>[
                                       SliverAppBar(
                                         brightness: Brightness.dark,
-                                      actions: <Widget>[_rightTopMenu(context)],
+                                        actions: <Widget>[
+                                          _rightTopMenu(context)
+                                        ],
                                         elevation: 0,
                                         iconTheme: IconThemeData(
                                           color: Colors.white,
                                         ),
-                                      expandedHeight: 150 + context.paddingTop,
+                                        expandedHeight:
+                                            150 + context.paddingTop,
                                         backgroundColor: _color,
                                         floating: true,
                                         pinned: true,
                                         flexibleSpace: LayoutBuilder(
                                             builder: (context, constraints) {
-                                        _topHeight = constraints.biggest.height;
+                                          _topHeight =
+                                              constraints.biggest.height;
                                           return FlexibleSpaceBar(
                                             background: Stack(
                                               children: <Widget>[
@@ -710,14 +727,16 @@ class _PodcastDetailState extends State<PodcastDetail> {
                                                   padding: EdgeInsets.only(
                                                       left: 80, right: 120),
                                                   color: Colors.white10,
-                                                alignment: Alignment.centerLeft,
+                                                  alignment:
+                                                      Alignment.centerLeft,
                                                   child: Column(
                                                     mainAxisAlignment:
                                                         MainAxisAlignment.start,
                                                     mainAxisSize:
                                                         MainAxisSize.min,
                                                     crossAxisAlignment:
-                                                      CrossAxisAlignment.start,
+                                                        CrossAxisAlignment
+                                                            .start,
                                                     children: <Widget>[
                                                       Text(
                                                           widget.podcastLocal
@@ -727,8 +746,8 @@ class _PodcastDetailState extends State<PodcastDetail> {
                                                           overflow: TextOverflow
                                                               .ellipsis,
                                                           style: TextStyle(
-                                                            color:
+                                                              color: Colors
-                                                                Colors.white)),
+                                                                  .white)),
                                                       if (widget.podcastLocal
                                                           .provider.isNotEmpty)
                                                         Text(
@@ -746,8 +765,8 @@ class _PodcastDetailState extends State<PodcastDetail> {
                                                 Container(
                                                   alignment:
                                                       Alignment.centerRight,
-                                                padding:
+                                                  padding: EdgeInsets.only(
-                                                    EdgeInsets.only(right: 10),
+                                                      right: 10),
                                                   child: SizedBox(
                                                     height: 120,
                                                     child: Image.file(File(
@@ -762,7 +781,8 @@ class _PodcastDetailState extends State<PodcastDetail> {
                                             ),
                                             title: _topHeight <
                                                     70 + context.paddingTop
-                                              ? Text(widget.podcastLocal.title,
+                                                ? Text(
+                                                    widget.podcastLocal.title,
                                                     maxLines: 1,
                                                     overflow:
                                                         TextOverflow.ellipsis,
@@ -811,18 +831,22 @@ class _PodcastDetailState extends State<PodcastDetail> {
                       Selector<AudioPlayerNotifier, bool>(
                           selector: (_, audio) => audio.playerRunning,
                           builder: (_, data, __) {
-                          return Padding(
+                            return SizedBox(
-                            padding: EdgeInsets.only(bottom: data ? 60.0 : 0),
+                              height: data ? 70.0 : 0,
                             );
                           }),
                     ],
                   ),
-                Container(child: PlayerWidget()),
+                  Container(
+                      child: PlayerWidget(
+                    playerKey: _playerKey,
+                  )),
                 ],
               ),
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/util/audiopanel.dart

@@ -10,23 +10,22 @@ class AudioPanel extends StatefulWidget {
   final Widget miniPanel;
   final Widget expandedPanel;
   final Widget optionPanel;
-  final Widget cover;
   final double minHeight;
   final double maxHeight;
+
   AudioPanel(
       {@required this.miniPanel,
       @required this.expandedPanel,
       this.optionPanel,
-      this.cover,
+      this.minHeight = 70,
-      this.minHeight = 60,
       this.maxHeight = 300,
       Key key})
       : super(key: key);
   @override
-  _AudioPanelState createState() => _AudioPanelState();
+  AudioPanelState createState() => AudioPanelState();
 }
 
-class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
+class AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
   double initSize;
   double _startdy;
   double _move = 0;
@@ -81,7 +80,7 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
         child: (_animation.value > widget.minHeight + 30)
             ? Positioned.fill(
                 child: GestureDetector(
-                  onTap: _backToMini,
+                  onTap: backToMini,
                   child: Container(
                     color: Theme.of(context)
                         .scaffoldBackgroundColor
@@ -92,7 +91,7 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
               )
             : Center(),
       ),
-      Container(
+      Align(
         alignment: Alignment.bottomCenter,
         child: GestureDetector(
           onVerticalDragStart: _start,
@@ -107,20 +106,17 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
                       opacity: _animation.value > widget.minHeight
                           ? (widget.minHeight + 30 - _animation.value) / 40
                           : 1,
-                      child: Container(
                       child: widget.miniPanel,
                     ),
-                    ),
                   )
                 : Container(
                     decoration: BoxDecoration(
                       color: context.primaryColor,
                       boxShadow: [
                         BoxShadow(
-                          offset: Offset(0, -0.5),
+                          offset: Offset(0, -1),
                           blurRadius: 1,
-                          color:
+                          color: context.brightness == Brightness.light
-                              Theme.of(context).brightness == Brightness.light
                               ? Colors.grey[400].withOpacity(0.5)
                               : Colors.grey[800],
                         ),
@@ -133,7 +129,7 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
                             ? (_animation.value - widget.minHeight) /
                                 (widget.maxHeight - widget.minHeight - 50)
                             : 1,
-                        child: Container(
+                        child: SizedBox(
                           height: math.max(widget.maxHeight,
                               math.min(_animation.value, _expandHeight)),
                           child: widget.expandedPanel,
@@ -147,7 +143,7 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
     ]);
   }
 
-  _backToMini() {
+  backToMini() {
     setState(() {
       _animation = Tween<double>(begin: initSize, end: widget.minHeight)
           .animate(_slowController);
@@ -156,6 +152,15 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
     _slowController.forward();
   }
 
+  scrollToTop() {
+    setState(() {
+      _animation = Tween<double>(begin: initSize, end: _expandHeight)
+          .animate(_slowController);
+      initSize = _expandHeight;
+    });
+    _slowController.forward();
+  }
+
   _start(DragStartDetails event) {
     setState(() {
       _startdy = event.localPosition.dy;
@@ -175,7 +180,7 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
     _controller.forward();
   }
 
-  _end() {
+  _end() async {
     if (_slideDirection == SlideDirection.up) {
       if (_move > 20) {
         if (_animation.value > widget.maxHeight + 20) {
@@ -185,15 +190,16 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
                     .animate(_slowController);
             initSize = _expandHeight;
           });
+          _slowController.forward();
         } else {
           setState(() {
             _animation =
-                Tween<double>(begin: _animation.value, end: widget.maxHeight)
+                Tween<double>(begin: widget.maxHeight, end: widget.maxHeight)
-                    .animate(_slowController);
+                    .animate(_controller);
             initSize = widget.maxHeight;
           });
+          _controller.forward();
         }
-        _slowController.forward();
       } else {
         setState(() {
           _animation =
@@ -251,3 +257,64 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
     }
   }
 }
+
+class _AudioPanelRoute extends StatefulWidget {
+  _AudioPanelRoute({this.expandPanel, this.height, Key key}) : super(key: key);
+  final Widget expandPanel;
+  final double height;
+  @override
+  __AudioPanelRouteState createState() => __AudioPanelRouteState();
+}
+
+class __AudioPanelRouteState extends State<_AudioPanelRoute> {
+  @override
+  Widget build(BuildContext context) {
+    return MediaQuery.removePadding(
+      context: context,
+      removeTop: true,
+      child: Scaffold(
+        body: Stack(children: <Widget>[
+          Container(
+            child: Positioned.fill(
+              child: GestureDetector(
+                onTap: () => Navigator.pop(context),
+                // child:
+                // Container(
+                //   color: Theme.of(context)
+                //       .scaffoldBackgroundColor
+                //       .withOpacity(0.8),
+                //
+                //),
+              ),
+            ),
+          ),
+          Align(
+            alignment: Alignment.bottomCenter,
+            child: Container(
+              height: widget.height,
+              decoration: BoxDecoration(
+                color: context.primaryColor,
+                boxShadow: [
+                  BoxShadow(
+                    offset: Offset(0, -1),
+                    blurRadius: 1,
+                    color: context.brightness == Brightness.light
+                        ? Colors.grey[400].withOpacity(0.5)
+                        : Colors.grey[800],
+                  ),
+                ],
+              ),
+              child: SingleChildScrollView(
+                physics: const NeverScrollableScrollPhysics(),
+                child: SizedBox(
+                  height: 300,
+                  child: widget.expandPanel,
+                ),
+              ),
+            ),
+          ),
+        ]),
+      ),
+    );
+  }
+}

lib/util/custom_widget.dart

@@ -1000,3 +1000,84 @@ class LayoutButton extends StatelessWidget {
     );
   }
 }
+
+/// Remove scroll view overlay effect.
+class NoGrowBehavior extends ScrollBehavior {
+  @override
+  Widget buildViewportChrome(
+      BuildContext context, Widget child, AxisDirection axisDirection) {
+    return child;
+  }
+}
+
+class Meteor extends CustomPainter {
+  Paint _paint;
+  Meteor() {
+    _paint = Paint()
+      ..color = Colors.white
+      ..strokeWidth = 2.0
+      ..strokeCap = StrokeCap.round;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), _paint);
+  }
+
+  @override
+  bool shouldRepaint(Meteor oldDelegate) {
+    return false;
+  }
+}
+
+/// Used in sleep mode widget.
+class MeteorLoader extends StatefulWidget {
+  @override
+  _MeteorLoaderState createState() => _MeteorLoaderState();
+}
+
+class _MeteorLoaderState extends State<MeteorLoader>
+    with SingleTickerProviderStateMixin {
+  double _fraction = 0.0;
+  double _move = 0.0;
+  Animation animation;
+  AnimationController controller;
+  @override
+  void initState() {
+    super.initState();
+    controller =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
+    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
+      ..addListener(() {
+        if (mounted) {
+          setState(() {
+            _move = animation.value;
+            if (animation.value <= 0.5) {
+              _fraction = animation.value * 2;
+            } else {
+              _fraction = 2 - (animation.value) * 2;
+            }
+          });
+        }
+      });
+    controller.forward();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: 300 * _move + 10,
+      left: 150 * _move + 50,
+      child: SizedBox(
+          width: 50 * _fraction,
+          height: 100 * _fraction,
+          child: CustomPaint(painter: Meteor())),
+    );
+  }
+}

lib/util/open_container.dart

@@ -725,7 +725,7 @@ class _OpenContainerRoute extends ModalRoute<void> {
           _positionTween.end = Offset(
               10,
               playerRunning
-                  ? MediaQuery.of(context).size.height - 100
+                  ? MediaQuery.of(context).size.height - 110
                   : MediaQuery.of(context).size.height - 40);
 
           var _width = MediaQuery.of(context).size.width;