experimentally use voicecall components

add an incoming call ui

shell/contents/views/Desktop.qml

@@ -23,6 +23,8 @@ import QtGraphicalEffects 1.0
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.shell 2.0 as Shell
 import org.kde.satellite.components 0.1 as SatelliteComponents
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.nemomobile.voicecall 1.0
 import "../components"
 
 Item {
@@ -83,6 +85,27 @@ Item {
         }
     }
 
+    property VoiceCallManager manager: VoiceCallManager {
+        id: manager
+
+        onActiveVoiceCallChanged: {
+            if (activeVoiceCall) {
+                dialer.calling = true;
+                //main.activeVoiceCallPerson = people.personByPhoneNumber(activeVoiceCall.lineId);
+                dialer.numberEntryText = activeVoiceCall.lineId;
+
+            } else {
+                dialer.calling = false;
+                dialer.numberEntryText = '';
+
+                main.activeVoiceCallPerson = null;
+            }
+        }
+
+        onError: {
+            console.log('*** QML *** VCM ERROR: ' + message);
+        }
+    }
 
     Timer {
         id: pendingTimer
@@ -166,7 +189,7 @@ Item {
             bottom: parent.bottom
         }
         z: 20
-        opacity: 0
+        opacity: calling ? 1 : 0
         visible: false
 
         Behavior on opacity {
@@ -286,7 +309,14 @@ Item {
     SatelliteStripe {
         id: stripe
         z: 1
-
+PlasmaComponents.Button {
+    z: 999
+    text: "bah"
+    onClicked: {
+        dialer.state = "incoming"
+        dialer.open()
+    }
+}
         PlasmaCore.Svg {
             id: stripeIcons
             imagePath: Qt.resolvedUrl("../images/homescreenicons.svg")
@@ -302,7 +332,7 @@ Item {
                 svg: stripeIcons
                 elementId: "phone"
                 callback: function() {
-                    dialer.visible = true;
+                    dialer.open()
                 }
             }
 

shell/contents/views/Dialer.qml

@@ -1,5 +1,27 @@
+/*
+ *   Copyright 2014 Aaron Seigo <aseigo@kde.org>
+ *   Copyright 2014 Marco Martin <mart@kde.org>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
 import QtQuick 2.0
+import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.nemomobile.voicecall 1.0
 import "../components"
 
 Rectangle {
@@ -7,9 +29,19 @@ Rectangle {
     color: "black"
     opacity: 0.8
 
+    state: manager.activeVoiceCall ? manager.activeVoiceCall.statusText : "disconnected"
     property color textColor: "white"
     property bool calling: false // needs to be connected to a system service
     property bool enableButtons: calling
+    property alias numberEntryText: status.text
+    property VoiceCallManager manager: homescreen.manager
+
+    property string providerId: manager.providers.id(1)
+
+    function open() {
+        visible = true;
+        opacity = 0.8;
+    }
 
     function addNumber(number) {
         status.text = status.text + number
@@ -18,12 +50,18 @@ Rectangle {
     function call() {
         if (!calling) {
             console.log("Calling: " + status.text);
+            dialer.calling = true;
+            manager.dial(providerId, status.text);
+
         } else {
             console.log("Hanging up: " + status.text);
             status.text = '';
+            dialer.calling = false;
+            var call = manager.activeVoiceCall;
+            if (call) {
+                call.hangup();
+            }
         }
-
-        dialer.calling = !dialer.calling;
     }
 
     function fromContacts() {
@@ -31,64 +69,187 @@ Rectangle {
         status.text = "+41 76 555 5555"
     }
 
-    Text {
+    function secondsToTimeString(seconds) {
-        id: status
+        var h = Math.floor(seconds / 3600);
-        height: parent.height / 6
+        var m = Math.floor((seconds - (h * 3600)) / 60);
-        width: parent.width
+        var s = seconds - h * 3600 - m * 60;
-        horizontalAlignment: Qt.AlignRight
+        if(h < 10) h = '0' + h;
-        verticalAlignment: Qt.AlignVCenter
+        if(m < 10) m = '0' + m;
-        font.pixelSize: one.font.pixelSize
+        if(s < 10) s = '0' + s;
-        color: textColor
+        return '' + h + ':' + m + ':' + s;
     }
 
-    Grid {
+    onCallingChanged: if (calling) {open();}
-        id: pad
+
-        columns: 3
+    MouseArea {
-        spacing: 0
+        anchors.fill: parent
-        property int buttonHeight: height / 5
+    }
+
+    ColumnLayout {
+        id: dialPadArea
+        visible: dialer.state == "disconnected"
+
         anchors {
-            top: status.bottom
+            fill: parent
-            bottom: parent.bottom
+            margins: 20
-            left: parent.left
+        }
-            right: parent.right
+        Text {
+            id: status
+            Layout.fillWidth: true
+            horizontalAlignment: Qt.AlignRight
+            verticalAlignment: Qt.AlignVCenter
+            font.pixelSize: one.font.pixelSize
+            color: textColor
         }
 
-        height: parent.height - status.height
+        Grid {
-        width: parent.width
+            id: pad
+            columns: 3
+            spacing: 0
+            property int buttonHeight: height / 5
 
-        DialerButton { id: one; text: "1" } 
+            Layout.fillWidth: true
-        DialerButton { text: "2" }
+            Layout.fillHeight: true
-        DialerButton { text: "3" }
 
-        DialerButton { text: "4" } 
+            height: parent.height - status.height
-        DialerButton { text: "5" }
+            width: parent.width
-        DialerButton { text: "6" }
 
-        DialerButton { text: "7" } 
+            DialerButton { id: one; text: "1" } 
-        DialerButton { text: "8" }
+            DialerButton { text: "2" }
-        DialerButton { text: "9" }
+            DialerButton { text: "3" }
 
-        DialerButton { text: "*"; } 
+            DialerButton { text: "4" } 
-        DialerButton { text: "0"; sub: "+"; }
+            DialerButton { text: "5" }
-        DialerButton { text: "#" }
+            DialerButton { text: "6" }
 
-        DialerIconButton {
+            DialerButton { text: "7" } 
-            source: "im-user"
+            DialerButton { text: "8" }
-            callback: fromContacts
+            DialerButton { text: "9" }
+
+            DialerButton { text: "*"; } 
+            DialerButton { text: "0"; sub: "+"; }
+            DialerButton { text: "#" }
+
+            DialerIconButton {
+                source: "im-user"
+                callback: fromContacts
+            }
+            DialerIconButton {
+                id: callButton
+                source: dialer.calling ? "call-stop" : "call-start"
+                callback: call
+            }
+            DialerIconButton { 
+                source: "edit-clear"
+                callback: function() {
+                    if (status.text.length > 0) {
+                        status.text = status.text.substr(0, status.text.length - 1);
+                    } else {
+                        dialer.calling = true;
+                        dialer.calling = false;
+                    }
+                }
+            }
         }
-        DialerIconButton {
+    }
-            id: callButton
+
-            source: dialer.calling ? "call-stop" : "call-start"
+    ColumnLayout {
-            callback: call
+        id: activeCallUi
+        spacing: 10
+        visible: dialer.state != "disconnected"
+
+        anchors {
+            fill: parent
+            margins: 20
         }
-        DialerIconButton { 
+
-            source: "edit-clear"
+        Item {
-            callback: function() {
+            Layout.fillWidth: true
-                if (status.text.length > 0) {
+            Layout.fillHeight: true
-                    status.text = status.text.substr(0, status.text.length - 1);
+            Layout.minimumHeight: parent.height/2
-                } else {
+            Rectangle {
-                    dialer.calling = true;
+                height: Math.min(parent.width, parent.height)
-                    dialer.calling = false;
+                width: height
+                radius: 5
+                anchors.centerIn: parent
+                PlasmaCore.IconItem {
+                    anchors {
+                        fill: parent
+                        centerIn: parent
+                        margins: 20
+                    }
+                    source: "im-user"
+                }
+            }
+        }
+        Text {
+            Layout.fillWidth: true
+            Layout.minimumHeight: implicitHeight
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            font.pixelSize: one.font.pixelSize
+            color: textColor
+            text: manager.activeVoiceCall ? manager.activeVoiceCall.lineId : ""
+        }
+        Text {
+            Layout.fillWidth: true
+            Layout.minimumHeight: implicitHeight
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            font.pixelSize: theme.smallestFont.pixelSize
+            color: textColor
+            text: manager.activeVoiceCall ? secondsToTimeString(manager.activeVoiceCall.duration) : ''
+        }
+        RowLayout {
+            height: parent.height / 3
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            DialerIconButton {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                source: dialer.state == "incoming" ? "call-start" : (manager.muteMicrophone ? "audio-volume-high" : "audio-volume-muted")
+                Rectangle {
+                    z: -1
+                    color: dialer.state == "incoming" ? "green" : "white"
+                    opacity: 0.5
+                    radius: 5
+                    anchors {
+                        fill: parent
+                    }
+                }
+
+                callback: function () {
+                    if (dialer.state == "incoming") {
+                        if (manager.activeVoiceCall) {
+                            manager.activeVoiceCall.answer();
+                        }
+                    } else {
+                        manager.setMuteMicrophone(manager.muteMicrophone ? false : true);
+                    }
+                }
+            }
+
+            DialerIconButton {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                source: "call-stop"
+                Rectangle {
+                    z: -1
+                    color: "red"
+                    opacity: 0.5
+                    radius: 5
+                    anchors {
+                        fill: parent
+                    }
+                }
+
+                callback: function () {
+                    if (manager.activeVoiceCall) {
+                        manager.activeVoiceCall.hangup();
+                    }
+                    dialer.opacity = 0;
                 }
             }
         }