"Now playing" as attached page; seek bar + seek wheel

gpodder-ui-qml

@@ -1 +1 @@
-Subproject commit 32d95cd1620eb92cf901554182e8fd2481f4af4b
+Subproject commit e6869016f21e1f59c3a12daf9f3e3d463e0875ca

qml/EpisodeDetail.qml

@@ -29,6 +29,8 @@ Page {
     property int episode_id
     property string title
 
+    onStatusChanged: pgst.handlePageStatusChange(status)
+
     Component.onCompleted: {
         label.text = 'Loading...';
         py.call('main.show_episode', [episode_id], function (episode) {
@@ -42,13 +44,6 @@ Page {
 
         VerticalScrollDecorator { flickable: flickable }
 
-        PullDownMenu {
-            MenuItem {
-                text: 'Now playing'
-                onClicked: pgst.loadPage('PlayerPage.qml');
-            }
-        }
-
         contentWidth: detailColumn.width
         contentHeight: detailColumn.height + detailColumn.spacing
 

qml/EpisodesPage.qml

@@ -31,6 +31,8 @@ Page {
     property int podcast_id
     property string title
 
+    onStatusChanged: pgst.handlePageStatusChange(status)
+
     width: parent.width
     height: parent.height
 
@@ -79,11 +81,6 @@ Page {
         model: ListModel { id: episodeListModel }
 
         PullDownMenu {
-            MenuItem {
-                text: 'Now playing'
-                onClicked: pgst.loadPage('PlayerPage.qml');
-            }
-
             MenuItem {
                 text: 'Unsubscribe'
                 onClicked: {

qml/FreshEpisodes.qml

@@ -47,11 +47,6 @@ Page {
         VerticalScrollDecorator { flickable: freshEpisodesList }
 
         PullDownMenu {
-            MenuItem {
-                text: 'Now playing'
-                onClicked: pgst.loadPage('PlayerPage.qml');
-            }
-
             MenuItem {
                 text: 'Mark all as old'
             }

qml/Main.qml

@@ -29,6 +29,19 @@ PodcastsPage {
 
     property real scalef: width / 480
 
+    property var playerPage: undefined
+
+    onStatusChanged: pgst.handlePageStatusChange(status)
+
+    function handlePageStatusChange(st) {
+        if (st == PageStatus.Active) {
+            if (playerPage === undefined) {
+                playerPage = Qt.createComponent('PlayerPage.qml').createObject(pgst);
+            }
+            pageStack.pushAttached(playerPage);
+        }
+    }
+
     function update(page, x) {
         var index = -1;
         for (var i=0; i<children.length; i++) {
@@ -49,16 +62,21 @@ PodcastsPage {
         id: player
     }
 
-    function loadPage(filename, properties) {
+    function loadPage(filename, properties, replace) {
         var component = Qt.createComponent(filename);
         if (component.status != Component.Ready) {
             console.log('Error loading ' + filename + ':' +
                 component.errorString());
         }
+
         if (properties === undefined) {
-            pageStack.push(component.createObject(pgst));
+            properties = {};
-        } else {
+        }
+
+        if (replace != true) {
             pageStack.push(component.createObject(pgst, properties));
+        } else {
+            pageStack.replace(component.createObject(pgst, properties));
         }
     }
 

qml/PlayerPage.qml

@@ -22,16 +22,19 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 
 import 'constants.js' as Constants
+import 'common/util.js' as Util
 
 Page {
     id: playerPage
 
     property string episodeTitle
 
-    Component.onCompleted: {
+    onStatusChanged: {
-        py.call('main.show_episode', [player.episode], function (episode) {
+        if (status == PageStatus.Activating) {
-            playerPage.episodeTitle = episode.title;
+            py.call('main.show_episode', [player.episode], function (episode) {
-        });
+                playerPage.episodeTitle = episode.title;
+            });
+        }
     }
 
     SilicaFlickable {
@@ -41,41 +44,117 @@ Page {
         contentWidth: column.width
         contentHeight: column.height + column.spacing
 
+        PullDownMenu {
+            MenuItem {
+                text: player.isPlaying ? 'Pause': 'Play'
+                onClicked: {
+                    if (player.isPlaying) {
+                        player.pause();
+                    } else {
+                        player.play();
+                    }
+                }
+            }
+        }
+
         Column {
             id: column
 
             width: playerPage.width
-            spacing: 10 * pgst.scalef
 
             PageHeader {
                 title: 'Now playing'
             }
 
-            ButtonRow {
+            Label {
-                width: playerPage.width
+                anchors {
-                model: [
+                    left: parent.left
-                    { label: 'Play', clicked: function() {
+                    right: parent.right
-                        player.play();
+                    margins: Theme.paddingLarge
-                    }},
+                }
-                    { label: 'Pause', clicked: function() {
+
-                        player.pause();
+                truncationMode: TruncationMode.Fade
-                    }},
+                horizontalAlignment: Text.AlignRight
-                    { label: 'Details', clicked: function() {
+                text: episodeTitle
-                        pgst.loadPage('EpisodeDetail.qml', {
+                color: Theme.rgba(Theme.highlightColor, 0.7)
-                            episode_id: player.episode,
+                font.pixelSize: Theme.fontSizeSmall
-                            title: playerPage.episodeTitle
+            }
-                        });
+
-                    }}
+            Connections {
-                ]
+                target: player
+                onPositionChanged: {
+                    if (!positionSlider.down) {
+                        positionSlider.value = player.position;
+                    }
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.itemSizeSmall
+            }
+
+            Label {
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                }
+
+                font.pixelSize: Theme.fontSizeLarge
+                text: Util.formatPosition(positionSlider.value/1000, player.duration/1000)
+                color: positionSlider.highlighted ? Theme.highlightColor : Theme.primaryColor
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.paddingMedium
             }
 
             Slider {
-                width: playerPage.width
+                id: positionSlider
-                value: player.playbackRate
+                width: parent.width
-                minimumValue: 0.5
+
-                maximumValue: 3.0
+                value: player.position
-                onSliderValueChanged: {
+                minimumValue: 0
-                    player.playbackRate = sliderValue
+                maximumValue: player.duration
+                onDownChanged: {
+                    if (!down) {
+                        player.seek(sliderValue)
+                    }
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.itemSizeLarge
+            }
+
+            TimePicker {
+                hourMode: DateTime.TwentyFourHours
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                property int oldHour: hour
+                property int oldMinute: minute
+
+                onHourChanged: {
+                    var diff = hour - oldHour;
+                    if (diff > 12) {
+                        diff -= 24;
+                    } else if (diff < -12) {
+                        diff += 24;
+                    }
+                    player.seek(player.position + 1000 * 60 * diff);
+                    oldHour = hour;
+                }
+
+                onMinuteChanged: {
+                    var diff = minute - oldMinute;
+                    if (diff > 30) {
+                        diff -= 60;
+                    } else if (diff < -30) {
+                        diff += 60;
+                    }
+                    player.seek(player.position + 1000 * 10 * diff);
+                    oldMinute = minute;
                 }
             }
         }

qml/PodcastsPage.qml

@@ -70,11 +70,6 @@ Page {
         VerticalScrollDecorator { flickable: podcastList }
 
         PullDownMenu {
-            MenuItem {
-                text: 'Now playing'
-                onClicked: pgst.loadPage('PlayerPage.qml');
-            }
-
             MenuItem {
                 text: "Settings"
                 onClicked: pgst.loadPage('Settings.qml');