Improve episode detail page layout.

This commit is contained in:
stonegate 2020-07-18 02:12:41 +08:00
parent 6f6ab16946
commit a6182973f2
1 changed files with 167 additions and 178 deletions

View File

@ -35,11 +35,15 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
final textstyle = TextStyle(fontSize: 15.0, color: Colors.black); final textstyle = TextStyle(fontSize: 15.0, color: Colors.black);
double downloadProgress; double downloadProgress;
/// Show page title.
bool _showTitle;
/// Load shownote. /// Load shownote.
bool _loaddes; bool _loaddes;
bool _showMenu; bool _showMenu;
String path; String path;
String _description; String _description;
Future getSDescription(String url) async { Future getSDescription(String url) async {
var dbHelper = DBHelper(); var dbHelper = DBHelper();
_description = (await dbHelper.getDescription(url)) _description = (await dbHelper.getDescription(url))
@ -65,6 +69,9 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
_showMenu = false; _showMenu = false;
}); });
} }
if (_controller.offset > context.textTheme.headline5.fontSize) {
if (!_showTitle) setState(() => _showTitle = true);
} else if (_showTitle) setState(() => _showTitle = false);
} }
_launchUrl(String url) async { _launchUrl(String url) async {
@ -78,7 +85,6 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
_markListened(EpisodeBrief episode) async { _markListened(EpisodeBrief episode) async {
DBHelper dbHelper = DBHelper(); DBHelper dbHelper = DBHelper();
bool marked = await dbHelper.checkMarked(episode); bool marked = await dbHelper.checkMarked(episode);
print(marked);
if (!marked) { if (!marked) {
final PlayHistory history = final PlayHistory history =
PlayHistory(episode.title, episode.enclosureUrl, 0, 1); PlayHistory(episode.title, episode.enclosureUrl, 0, 1);
@ -91,6 +97,7 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
super.initState(); super.initState();
_loaddes = false; _loaddes = false;
_showMenu = false; _showMenu = false;
_showTitle = false;
getSDescription(widget.episodeItem.enclosureUrl); getSDescription(widget.episodeItem.enclosureUrl);
_controller = ScrollController(); _controller = ScrollController();
_controller.addListener(_scrollListener); _controller.addListener(_scrollListener);
@ -115,8 +122,14 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
child: Scaffold( child: Scaffold(
backgroundColor: Theme.of(context).primaryColor, backgroundColor: Theme.of(context).primaryColor,
appBar: AppBar( appBar: AppBar(
// title: Text(widget.episodeItem.feedTitle), title: _showTitle
centerTitle: true, ? Text(
widget.episodeItem.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
)
: Center(),
elevation: _showTitle ? 1 : 0,
actions: [ actions: [
PopupMenuButton( PopupMenuButton(
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@ -171,41 +184,40 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
children: <Widget>[ children: <Widget>[
Container( Container(
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _controller,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, children: [
mainAxisSize: MainAxisSize.min, Padding(
children: <Widget>[
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 20.0), padding: EdgeInsets.symmetric(horizontal: 20.0),
alignment: Alignment.topLeft, child: Align(
alignment: Alignment.centerLeft,
child: Text( child: Text(
widget.episodeItem.title, widget.episodeItem.title,
textAlign: TextAlign.left,
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
), ),
),
Container( Container(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20.0), padding: EdgeInsets.only(
height: 30.0, left: 20.0, right: 20, top: 10, bottom: 10),
child: Text( child: Text(
s.published(DateFormat.yMMMd().format( s.published(DateFormat.yMMMd().format(
DateTime.fromMillisecondsSinceEpoch( DateTime.fromMillisecondsSinceEpoch(
widget.episodeItem.pubDate))), widget.episodeItem.pubDate))),
style: TextStyle( style:
color: Theme.of(context).accentColor)), TextStyle(color: Theme.of(context).accentColor)),
), ),
Container( Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0), padding: EdgeInsets.only(
height: 50.0, left: 20.0, right: 20, top: 10, bottom: 10),
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
(widget.episodeItem.explicit == 1) if (widget.episodeItem.explicit == 1)
? Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.red[800], color: Colors.red[800],
shape: BoxShape.circle), shape: BoxShape.circle),
@ -214,61 +226,44 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
margin: EdgeInsets.only(right: 10.0), margin: EdgeInsets.only(right: 10.0),
alignment: Alignment.center, alignment: Alignment.center,
child: Text('E', child: Text('E',
style: style: TextStyle(color: Colors.white))),
TextStyle(color: Colors.white))) if (widget.episodeItem.duration != 0)
: Center(), Container(
widget.episodeItem.duration != 0
? Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.cyan[300], color: Colors.cyan[300],
borderRadius: BorderRadius.all( borderRadius:
Radius.circular(15.0))), BorderRadius.all(Radius.circular(15.0))),
height: 25.0, height: 25.0,
margin: EdgeInsets.only(right: 10.0), margin: EdgeInsets.only(right: 10.0),
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(horizontal: 10.0),
horizontal: 10.0),
alignment: Alignment.center, alignment: Alignment.center,
child: Text( child: Text(
s.minsCount( s.minsCount(
widget.episodeItem.duration ~/ widget.episodeItem.duration ~/ 60),
60),
style: textstyle), style: textstyle),
) ),
: Center(), if (widget.episodeItem.enclosureLength != null &&
widget.episodeItem.enclosureLength != null && widget.episodeItem.enclosureLength != 0)
widget.episodeItem.enclosureLength != 0 Container(
? Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.lightBlue[300], color: Colors.lightBlue[300],
borderRadius: BorderRadius.all( borderRadius:
Radius.circular(15.0))), BorderRadius.all(Radius.circular(15.0))),
height: 25.0, height: 25.0,
margin: EdgeInsets.only(right: 10.0), margin: EdgeInsets.only(right: 10.0),
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(horizontal: 10.0),
horizontal: 10.0),
alignment: Alignment.center, alignment: Alignment.center,
child: Text( child: Text(
((widget.episodeItem ((widget.episodeItem.enclosureLength) ~/
.enclosureLength) ~/
1000000) 1000000)
.toString() + .toString() +
'MB', 'MB',
style: textstyle), style: textstyle),
)
: Center(),
],
),
), ),
], ],
), ),
), ),
Expanded( _loaddes
child: Container(
padding: EdgeInsets.only(top: 5.0),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _controller,
child: _loaddes
? (_description.contains('<')) ? (_description.contains('<'))
? Html( ? Html(
padding: EdgeInsets.only( padding: EdgeInsets.only(
@ -293,9 +288,7 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
: _description.length > 0 : _description.length > 0
? Container( ? Container(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 20.0, left: 20.0, right: 20.0, bottom: 50.0),
right: 20.0,
bottom: 50.0),
alignment: Alignment.topLeft, alignment: Alignment.topLeft,
child: SelectableLinkify( child: SelectableLinkify(
onOpen: (link) { onOpen: (link) {
@ -308,8 +301,7 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
), ),
), ),
linkStyle: TextStyle( linkStyle: TextStyle(
color: color: Theme.of(context).accentColor,
Theme.of(context).accentColor,
// decoration: // decoration:
// TextDecoration.underline, // TextDecoration.underline,
), ),
@ -323,12 +315,11 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
MainAxisAlignment.center, MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Image( Image(
image: AssetImage( image:
'assets/shownote.png'), AssetImage('assets/shownote.png'),
height: 100.0, height: 100.0,
), ),
Padding( Padding(padding: EdgeInsets.all(5.0)),
padding: EdgeInsets.all(5.0)),
Text(s.noShownote, Text(s.noShownote,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
@ -338,9 +329,6 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
), ),
) )
: Center(), : Center(),
),
),
),
Selector<AudioPlayerNotifier, bool>( Selector<AudioPlayerNotifier, bool>(
selector: (_, audio) => audio.playerRunning, selector: (_, audio) => audio.playerRunning,
builder: (_, data, __) { builder: (_, data, __) {
@ -351,6 +339,7 @@ class _EpisodeDetailState extends State<EpisodeDetail> {
], ],
), ),
), ),
),
Selector<AudioPlayerNotifier, bool>( Selector<AudioPlayerNotifier, bool>(
selector: (_, audio) => audio.playerRunning, selector: (_, audio) => audio.playerRunning,
builder: (_, data, __) { builder: (_, data, __) {