Add chapter information to episode details page

This commit is contained in:
Thomas Perl 2014-04-30 20:46:34 +02:00
parent cba276055d
commit dc604965ec
3 changed files with 189 additions and 1 deletions

70
qml/CustomExpander.qml Normal file
View file

@ -0,0 +1,70 @@
/**
*
* gPodder QML UI Reference Implementation
* Copyright (c) 2014, Thomas Perl <m@thp.io>
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*
*/
import QtQuick 2.0
import Sailfish.Silica 1.0
BackgroundItem {
id: expander
property alias expanded: customExpanderContent.expanded
property alias canExpand: customExpanderContent.canExpand
property alias contractedHeight: customExpanderContent.contractedHeight
property alias expandedHeight: customExpanderContent.expandedHeight
default property alias contentChildren: customExpanderContent.children
height: customExpanderContent.height
onClicked: {
if (expander.canExpand) {
expander.expanded = !expander.expanded
}
}
CustomExpanderContent {
id: customExpanderContent
width: parent.width
}
OpacityRampEffect {
sourceItem: customExpanderContent
direction: OpacityRamp.TopToBottom
enabled: !expander.expanded
}
Label {
id: chapterExpander
anchors {
right: parent.right
bottom: parent.bottom
margins: Theme.paddingLarge
}
text: '•••'
visible: !expander.expanded
font.pixelSize: Theme.fontSizeLarge
color: Theme.secondaryColor
}
}

View file

@ -0,0 +1,38 @@
/**
*
* gPodder QML UI Reference Implementation
* Copyright (c) 2014, Thomas Perl <m@thp.io>
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*
*/
import QtQuick 2.0
import Sailfish.Silica 1.0
Item {
id: expander
property bool expanded: false
property bool canExpand: expandedHeight > contractedHeight
property real contractedHeight: Theme.itemSizeExtraLarge * 2
property real expandedHeight: childrenRect.height
height: expanded ? expandedHeight : contractedHeight
clip: true
Behavior on height { PropertyAnimation { } }
}

View file

@ -21,6 +21,8 @@
import QtQuick 2.0
import Sailfish.Silica 1.0
import 'common/util.js' as Util
Page {
id: detailPage
@ -28,6 +30,7 @@ Page {
property string title
property string link
property bool ready: false
property var chapters: ([])
onStatusChanged: pgst.handlePageStatusChange(status)
@ -35,6 +38,7 @@ Page {
py.call('main.show_episode', [episode_id], function (episode) {
descriptionLabel.text = episode.description;
metadataLabel.text = episode.metadata;
detailPage.chapters = episode.chapters;
detailPage.link = episode.link;
detailPage.ready = true;
});
@ -70,7 +74,7 @@ Page {
spacing: Theme.paddingMedium
PageHeader {
title: 'Shownotes'
title: 'Episode details'
}
Label {
@ -101,6 +105,82 @@ Page {
wrapMode: Text.WordWrap
}
CustomExpander {
id: chaptersExpander
visible: detailPage.chapters.length > 0
width: parent.width
expandedHeight: chaptersColumn.childrenRect.height
Column {
id: chaptersColumn
anchors {
left: parent.left
right: parent.right
margins: Theme.paddingMedium
}
Item { height: Theme.paddingMedium; width: parent.width }
Label {
text: 'Chapters'
anchors {
left: parent.left
}
color: Theme.highlightColor
}
Repeater {
model: detailPage.chapters
delegate: ListItem {
enabled: false
contentHeight: Theme.itemSizeExtraSmall
Label {
id: durationLabel
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
text: Util.formatDuration(modelData.start)
font.pixelSize: Theme.fontSizeSmall
color: Theme.secondaryColor
}
Label {
id: titleLabel
anchors {
left: durationLabel.right
verticalCenter: parent.verticalCenter
leftMargin: Theme.paddingMedium
right: parent.right
}
width: parent.width
text: modelData.title
color: Theme.primaryColor
truncationMode: TruncationMode.Fade
}
}
}
}
}
Label {
text: 'Shownotes'
color: Theme.highlightColor
anchors {
left: parent.left
leftMargin: Theme.paddingMedium
}
}
Label {
id: descriptionLabel
anchors {