mirror of
https://github.com/meditohq/medito-app.git
synced 2024-09-11 12:15:46 +03:00
player screen updates
This commit is contained in:
parent
1296f78e3c
commit
a9be9b7796
BIN
assets/images/texture.png
Normal file
BIN
assets/images/texture.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 167 KiB |
@ -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";
|
||||
|
@ -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));
|
||||
|
@ -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,
|
||||
|
@ -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) {
|
||||
|
@ -105,6 +105,6 @@ class _StreakTileWidgetState extends State<StreakTileWidget> {
|
||||
|
||||
RoundedRectangleBorder roundedRectangleBorder() {
|
||||
return RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.0),
|
||||
borderRadius: BorderRadius.circular(6.0),
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user