touch: Add more PlayerPage implementation

touch/EpisodeItem.qml

@@ -47,7 +47,7 @@ Item {
             width: parent.width
 
             IconMenuItem {
-                text: 'Play'
+                text: episodeItem.isPlaying ? 'Pause' : 'Play'
                 iconSource: 'icons/' + (episodeItem.isPlaying ? 'pause_24x32.png' : 'play_24x32.png')
                 onClicked: {
                     if (episodeItem.isPlaying) {

touch/IconContextMenu.qml

@@ -23,6 +23,7 @@ import QtQuick 2.0
 Rectangle {
     id: contextMenu
     default property alias children: contextMenuRow.children
+    height: 80 * pgst.scalef
 
     color: '#33000000'
 

touch/PlayerPage.qml

@@ -20,19 +20,11 @@
 
 import QtQuick 2.0
 
-import 'constants.js' as Constants
+import 'common/util.js' as Util
 
 SlidePage {
     id: playerPage
 
-    property string episodeTitle
-
-    Component.onCompleted: {
-        py.call('main.show_episode', [player.episode], function (episode) {
-            playerPage.episodeTitle = episode.title;
-        });
-    }
-
     Flickable {
         id: flickable
         anchors.fill: parent
@@ -50,25 +42,47 @@ SlidePage {
                 title: 'Now playing'
             }
 
-            ButtonRow {
+            Column {
-                width: playerPage.width
+                anchors {
-                model: [
+                    left: parent.left
-                    { label: 'Play', clicked: function() {
+                    right: parent.right
-                        player.play();
+                    margins: 30 * pgst.scalef
-                    }},
+                }
-                    { label: 'Pause', clicked: function() {
+
-                        player.pause();
+                PLabel {
-                    }},
+                    text: player.episode_title
-                    { label: 'Details', clicked: function() {
+                    elide: Text.ElideRight
-                        pgst.loadPage('EpisodeDetail.qml', {
+                }
-                            episode_id: player.episode,
+
-                            title: playerPage.episodeTitle
+                PLabel {
-                        });
+                    text: player.podcast_title
-                    }}
+                    elide: Text.ElideRight
-                ]
+                }
+            }
+
+            IconContextMenu {
+                width: parent.width
+
+                IconMenuItem {
+                    text: player.isPlaying ? 'Pause' : 'Play'
+                    iconSource: 'icons/' + (player.isPlaying ? 'pause_24x32.png' : 'play_24x32.png')
+                    onClicked: {
+                        if (player.isPlaying) {
+                            player.pause();
+                        } else {
+                            player.play();
+                        }
+                    }
+                }
+            }
+
+            PLabel {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: Util.formatPosition(slider.displayedValue/1000, player.duration/1000)
             }
 
             PSlider {
+                id: slider
                 width: playerPage.width
                 value: player.position
                 min: 0