Add chapter information to episode details page
This commit is contained in:
parent
cba276055d
commit
dc604965ec
3 changed files with 189 additions and 1 deletions
70
qml/CustomExpander.qml
Normal file
70
qml/CustomExpander.qml
Normal 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
|
||||
}
|
||||
}
|
38
qml/CustomExpanderContent.qml
Normal file
38
qml/CustomExpanderContent.qml
Normal 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 { } }
|
||||
}
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue