player screen updates

lib/utils/strings.dart

@@ -1,3 +1,7 @@
 const String EMPTY_DOWNLOADS_MESSAGE =
     'It looks like you haven’t downloaded anything yet. Downloads are useful to save mobile data or to access sessions in places without signal.';
 const String EMPTY_FAVORITES_MESSAGE = 'Favorites are coming soon.';
+const String WELL_DONE_COPY = 'Well done for meditating today!';
+const String WELL_DONE_SUBTITLE = 'The mind is everything. What you think, you become.';
+const String LOADING = 'Loading';
+const String SHARE_TEXT = "I just meditated with Medito. Try it out, it's like Headspace and Calm but it's 100% free and not-for-profit! https://medito.app";

lib/widgets/btm_nav/downloads_widget.dart

@@ -114,7 +114,7 @@ class _DownloadsListWidgetState extends State<DownloadsListWidget>
   PackListItemWidget _getListItemWidget(MediaItem item) {
     return PackListItemWidget(PackImageListItemData(
         title: item.title,
-        subtitle: '${item.artist} - ${_getDuration(item.extras['length'])}',
+        subtitle: '${item.artist}    〰    ${_getDuration(item.extras['length'])}',
         cover: item.artUri,
         colorPrimary: parseColor(item.extras['primaryColor']),
         coverSize: 56));

lib/widgets/player/player_widget.dart

@@ -8,6 +8,7 @@ import 'package:Medito/utils/bgvolume_utils.dart';
 import 'package:Medito/utils/colors.dart';
 import 'package:Medito/utils/shared_preferences_utils.dart';
 import 'package:Medito/utils/stats_utils.dart';
+import 'package:Medito/utils/strings.dart';
 import 'package:Medito/utils/utils.dart';
 import 'package:Medito/widgets/app_bar_widget.dart';
 import 'package:Medito/widgets/folders/folder_nav_widget.dart';
@@ -36,9 +37,8 @@ class PlayerWidget extends StatefulWidget {
 class _PlayerWidgetState extends State<PlayerWidget> {
   String illustrationUrl;
   Color secondaryColor;
-  Color primaryColorAsColor;
+  Color primaryColorAsColor = MeditoColors.transparent;
   bool _complete = false;
-  double _height = 0;
   String __loaded;
   double volume;
 
@@ -93,62 +93,83 @@ class _PlayerWidgetState extends State<PlayerWidget> {
 
   @override
   Widget build(BuildContext context) {
-    if (_height == 0) {
-      _height = MediaQuery.of(context).size.height;
-    }
+    return Scaffold(body: Builder(builder: (BuildContext context) {
+      return StreamBuilder<ScreenState>(
+          stream: _screenStateStream,
+          builder: (context, screenStateSnapshot) {
+            final screenState = screenStateSnapshot.data;
+            final mediaItem = screenState?.mediaItem;
+            final state = screenState?.playbackState;
+            final processingState =
+                state?.processingState ?? AudioProcessingState.none;
+            final playing = state?.playing ?? false;
 
-    return Scaffold(
-        backgroundColor: MeditoColors.midnight,
-        body: Builder(builder: (BuildContext context) {
-          return StreamBuilder<ScreenState>(
-              stream: _screenStateStream,
-              builder: (context, screenStateSnapshot) {
-                final screenState = screenStateSnapshot.data;
-                final mediaItem = screenState?.mediaItem;
-                final state = screenState?.playbackState;
-                final processingState =
-                    state?.processingState ?? AudioProcessingState.none;
-                final playing = state?.playing ?? false;
+            if (processingState == AudioProcessingState.stopped ||
+                processingState == AudioProcessingState.completed ||
+                (loaded && mediaItem == null)) {
+              _complete = true;
+              Tracking.changeScreenName(Tracking.PLAYER_END_PAGE);
+            }
 
-                if (processingState == AudioProcessingState.stopped ||
-                    processingState == AudioProcessingState.completed ||
-                    (loaded && mediaItem == null)) {
-                  _complete = true;
-                  Tracking.changeScreenName(Tracking.PLAYER_END_PAGE);
-                }
+            setLoaded(mediaItem != null);
+            getSecondaryColor(mediaItem);
+            getPrimaryColor(mediaItem);
+            getArtUrl(mediaItem);
 
-                setLoaded(mediaItem != null);
-                getSecondaryColor(mediaItem);
-                getPrimaryColor(mediaItem);
-                getArtUrl(mediaItem);
+            return Stack(
+              children: [
+                _getGradientWidget(mediaItem, context),
+                _getGradientOverlayWidget(),
+                (mediaItem != null || _complete)
+                    ? Column(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: <Widget>[
+                          _getAppBar(mediaItem),
+                          _getTitleRow(mediaItem),
+                          _getSubtitleWidget(mediaItem),
+                          _complete
+                              ? getDonateAndShareButton()
+                              : _getPlayingPauseOrLoadingIndicator(
+                                  processingState, playing),
+                          _complete
+                              ? Container()
+                              : positionIndicator(
+                                  mediaItem, state, primaryColorAsColor),
+                        ],
+                      )
+                    : _getLoadingScreenWidget(),
+              ],
+            );
+          });
+    }));
+  }
 
-                return SafeArea(
-                  child: Stack(
-                    children: [
-                      (mediaItem != null || _complete)
-                          ? Column(
-                              mainAxisAlignment: MainAxisAlignment.start,
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: <Widget>[
-                                _getAppBar(mediaItem),
-                                _getTitleRow(mediaItem),
-                                _getSubtitleWidget(mediaItem),
-                                _complete
-                                    ? getDonateAndShareButton()
-                                    : _getPlayingPauseOrLoadingIndicator(
-                                        processingState, playing),
-                                _complete
-                                    ? Container()
-                                    : positionIndicator(
-                                        mediaItem, state, primaryColorAsColor),
-                              ],
-                            )
-                          : _getLoadingScreenWidget(),
-                    ],
-                  ),
-                );
-              });
-        }));
+  Widget _getGradientOverlayWidget() {
+    if (!loaded) return Container();
+    return Image.asset(
+      'assets/images/texture.png',
+      width: MediaQuery.of(context).size.width,
+      fit: BoxFit.fitWidth,
+    );
+  }
+
+  Widget _getGradientWidget(MediaItem mediaItem, BuildContext context) {
+    if (!loaded || _complete) return Container();
+    return Align(
+        alignment: Alignment.center,
+        child: Container(
+          decoration: BoxDecoration(
+              gradient: RadialGradient(
+            colors: [
+              primaryColorAsColor.withAlpha(178),
+              primaryColorAsColor.withAlpha(0),
+            ],
+            radius: 1.0,
+          )),
+          height: MediaQuery.of(context).size.height,
+          width: MediaQuery.of(context).size.width,
+        ));
   }
 
   MeditoAppBarWidget _getAppBar(MediaItem mediaItem) {
@@ -168,10 +189,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
 
   Widget _getTitleRow(MediaItem mediaItem) {
     return Padding(
-      padding: const EdgeInsets.symmetric(
-        horizontal: 16.0,
-        vertical: 4.0
-      ),
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
       child: Row(
         children: [
           Expanded(
@@ -206,7 +224,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
   Widget _getSubtitleWidget(MediaItem mediaItem) {
     var attr = '';
     if (_complete) {
-      attr = _bloc.version.body;
+      attr = _bloc.version?.body ?? WELL_DONE_SUBTITLE;
     } else {
       attr = mediaItem?.extras != null ? mediaItem?.extras['attr'] : '';
     }
@@ -350,7 +368,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
       children: [
         CircularProgressIndicator(),
         Container(height: 16),
-        Text('Loading')
+        Text(loaded ? WELL_DONE_COPY : LOADING)
       ],
     ));
   }
@@ -364,7 +382,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
   }
 
   void getPrimaryColor(MediaItem mediaItem) {
-    if (primaryColorAsColor == null && mediaItem != null) {
+    if (mediaItem != null) {
       final primaryColor = mediaItem?.extras['primaryColor'];
       primaryColorAsColor = parseColor(primaryColor);
     }
@@ -374,10 +392,11 @@ class _PlayerWidgetState extends State<PlayerWidget> {
     if (secondaryColor == null && mediaItem != null) {
       String secondaryColorString = mediaItem?.extras['secondaryColor'] ?? '';
 
-      if (secondaryColorString.isEmpty && secondaryColor == null) {
-        secondaryColorString = '#FF272829';
+      if (secondaryColorString.isEmptyOrNull()) {
+        secondaryColor = MeditoColors.deepNight;
+      } else {
+        secondaryColor = parseColor(secondaryColorString);
       }
-      secondaryColor = parseColor(secondaryColorString);
     }
   }
 
@@ -455,7 +474,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
         children: [
           Padding(
             padding: const EdgeInsets.only(
-                left: 32.0, top: 32, bottom: 8, right: 32.0),
+                left: 16.0, top: 32, bottom: 8, right: 16.0),
             child: TextButton(
               style: TextButton.styleFrom(
                   shape: roundedRectangleBorder(),
@@ -475,7 +494,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
             ),
           ),
           Padding(
-            padding: const EdgeInsets.only(left: 32.0, right: 32.0),
+            padding: const EdgeInsets.only(left: 16.0, right: 16.0),
             child: TextButton(
               style: TextButton.styleFrom(
                   shape: roundedRectangleBorder(),
@@ -490,8 +509,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
                     padding: const EdgeInsets.only(left: 8.0),
                     child: Text(
                       'Share',
-                      style: TextStyle(
-                          color: MeditoColors.walterWhite, fontSize: 16),
+                      style: Theme.of(context).textTheme.subtitle2,
                     ),
                   ),
                 ],
@@ -510,7 +528,10 @@ class _PlayerWidgetState extends State<PlayerWidget> {
 
     return Text(
       label,
-      style: TextStyle(color: secondaryColor, fontSize: 16),
+      style: Theme.of(context)
+          .textTheme
+          .subtitle2
+          .copyWith(color: MeditoColors.darkMoon),
     );
   }
 
@@ -537,8 +558,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
   }
 
   Future<void> _share() {
-    Share.share(
-        "I just meditated with Medito. I ❤️ this app! Try it out - it's 100% free! Download on Android -> https://bit.ly/medito-android & iOS -> https://bit.ly/medito-ios");
+    Share.share(SHARE_TEXT);
     Tracking.trackEvent(
       Tracking.CTA_TAPPED,
       Tracking.SECOND_CTA_TAPPED,

lib/widgets/player/subtitle_text_widget.dart

@@ -11,26 +11,15 @@ class SubtitleTextWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        Expanded(
-          child: Wrap(
-            children: [
-              Markdown(
-                  data: body ?? 'Loading...',
-                  onTapLink: _linkTap,
-                  shrinkWrap: true,
-                  padding: null,
-                  styleSheet: buildMarkdownStyleSheet(context).copyWith(
-                      p: Theme.of(context).textTheme.subtitle1,
-                      textAlign: WrapAlignment.center,
-                      a: TextStyle(color: MeditoColors.meditoTextGrey))),
-            ],
-          ),
-        ),
-      ],
-    );
+    return Markdown(
+        data: body ?? 'Loading...',
+        onTapLink: _linkTap,
+        shrinkWrap: true,
+        padding: const EdgeInsets.all(0),
+        styleSheet: buildMarkdownStyleSheet(context).copyWith(
+            p: Theme.of(context).textTheme.subtitle1,
+            textAlign: WrapAlignment.center,
+            a: TextStyle(color: MeditoColors.meditoTextGrey)));
   }
 
   void _linkTap(String url) {

lib/widgets/streak_tile_widget.dart

@@ -105,6 +105,6 @@ class _StreakTileWidgetState extends State<StreakTileWidget> {
 
 RoundedRectangleBorder roundedRectangleBorder() {
   return RoundedRectangleBorder(
-    borderRadius: BorderRadius.circular(12.0),
+    borderRadius: BorderRadius.circular(6.0),
   );
 }