Add Loader to handle absent Alexa SDK libs

- it is possible that Alexa SDK libs are absent on target system.
To handle this, Loader for all the items that are using
AlexaInterface plugin is added. If error happens on load,
absent SDK warning message is shown, app doesn't crash

Task-number: AUTOSUITE-1189
Change-Id: I1248c404b040034f3568f9c8388b3f0eb8aaf687
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

3 files changed, 207 insertions, 140 deletions

diff --git a/app/MainView.qml b/app/MainView.qml
new file mode 100644
index 0000000..af823de
--- /dev/null
+++ b/app/MainView.qml
@@ -0,0 +1,181 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+
+import alexainterface 1.0
+import alexaauth 1.0
+
+import application.windows 1.0
+
+import shared.Sizes 1.0
+import shared.Style 1.0
+import shared.controls 1.0
+import shared.utils 1.0
+
+
+Item {
+    id: root
+
+    property string neptuneState: "Maximized"
+
+    AlexaAuth {
+        id: alexaAuth
+        httpUserAgent: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
+    }
+
+    Connections {
+        target: AlexaInterface
+        onAuthCodeChanged: {
+            if (authCode !== "") {
+                alexaAuth.authCode = authCode
+            }
+        }
+        onAuthUrlChanged: {
+            alexaAuth.authUrl = authUrl
+        }
+        Component.onCompleted: {
+            AlexaInterface.logLevel = Alexa.Debug9
+        }
+    }
+
+    Header {
+        anchors.top: parent.top
+        anchors.topMargin: Sizes.dp(80)
+        anchors.horizontalCenter: parent.horizontalCenter
+        unfoldHeader: alexaView.visible || authView.visible
+        visible: root.neptuneState === "Maximized"
+    }
+
+    Item {
+        id: paneMainView
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: parent.height - Sizes.dp(50)
+
+        AlexaView {
+            id: alexaView
+            anchors.fill: parent
+            visible: AlexaInterface.authState === Alexa.Refreshed
+            neptuneState: root.neptuneState
+        }
+
+        AuthView {
+            id: authView
+            anchors.fill: parent
+            alexaAuth: alexaAuth
+            visible: AlexaInterface.authState !== Alexa.Refreshed
+        }
+    }
+
+    property NeptuneWindow statusBar: NeptuneWindow {
+        width: Sizes.dp(Config.statusBarHeight)
+        height: Sizes.dp(Config.statusBarHeight)
+        Component.onCompleted: {
+            setWindowProperty("windowType", "statusbar")
+        }
+        Item {
+            id: interactionPane
+            anchors.fill: parent
+            anchors.margins: parent.width * 0.2
+            Rectangle {
+                width: interactionButton.width * ( 1.0 + 0.3 * AlexaInterface.audioLevel )
+                height: width
+                anchors.centerIn: interactionButton
+                radius: width / 2
+                color: Style.accentColor
+            }
+            RoundButton {
+                id: interactionButton
+                visible: opacity > 0
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: height
+                height: parent.height
+                background: Rectangle {
+                    anchors.fill: parent
+                    radius: width / 2
+                    color: AlexaInterface.connectionStatus === Alexa.Connected ?
+                               "#00caff" :
+                               "lightgrey";
+                }
+                icon.height: interactionButton.height/2
+                icon.width: interactionButton.width/2
+                icon.source: {
+                    if (AlexaInterface.dialogState === Alexa.Speaking) {
+                        return Qt.resolvedUrl("assets/ic_speaking.png")
+                    } else if (AlexaInterface.dialogState === Alexa.Thinking) {
+                        return Qt.resolvedUrl("assets/ic_thinking.png")
+                    } else {
+                        return Qt.resolvedUrl("assets/ic_microphone.png")
+                    }
+                }
+                enabled: AlexaInterface.connectionStatus === Alexa.Connected
+                onClicked: {
+                    var dialogState = AlexaInterface.dialogState;
+
+                    if (dialogState === Alexa.Idle) {
+                        AlexaInterface.tapToTalk();
+                    } else if ( (dialogState === Alexa.Listening)
+                               || (dialogState === Alexa.Speaking) ) {
+                        AlexaInterface.stopTalking();
+                    }
+                }
+                Image {
+                    id: busyIndicator
+                    anchors.centerIn: parent
+                    width: parent.width * 1.075
+                    height: parent.height * 1.075
+                    source: "assets/spinner.png"
+                    visible: false
+                }
+                ColorOverlay {
+                    id: overlay
+                    anchors.fill: busyIndicator
+                    source: busyIndicator
+                    color: "#0071ff"
+                    visible: (AlexaInterface.dialogState === Alexa.Listening)
+                             || (AlexaInterface.dialogState === Alexa.Thinking)
+                    RotationAnimation on rotation {
+                        loops: Animation.Infinite
+                        from: 0
+                        to: 360
+                        duration: 2000
+                        running: overlay.visible
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/app/app.pro b/app/app.pro
index 60355eb..247f50b 100644
--- a/app/app.pro
+++ b/app/app.pro
@@ -11,7 +11,8 @@ FILES += info.yaml \
          BasicCard.qml \
          Footer.qml \
          WeatherCard.qml \
-         InfoCard.qml
+         InfoCard.qml \
+         MainView.qml
 
 app.files = $$FILES
 app.path = /apps/com.luxoft.alexa
diff --git a/app/main.qml b/app/main.qml
index d7235b2..7006974 100644
--- a/app/main.qml
+++ b/app/main.qml
@@ -33,17 +33,10 @@ import application.windows 1.0
 
 import QtQuick 2.10
 import QtQuick.Window 2.10
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtGraphicalEffects 1.0
-
-import alexaauth 1.0
-import alexainterface 1.0
+import QtQuick.Controls 2.5
 
 import shared.Sizes 1.0
 import shared.Style 1.0
-import shared.controls 1.0
-import shared.utils 1.0
 
 ApplicationCCWindow {
     id: root
@@ -62,141 +55,33 @@ ApplicationCCWindow {
         visible: opacity > 0
     }
 
-    Item {
-        id: mainWindow
-        x: root.exposedRect.x
-        y: root.exposedRect.y
+    Label {
+        id: alexaLoadErrorText
+        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: Sizes.fontSizeM
+        font.weight: Font.Medium
+        horizontalAlignment: Text.AlignHCenter
         width: root.exposedRect.width
-        height: root.exposedRect.height
-
-        AlexaAuth {
-            id: alexaAuth
-            httpUserAgent: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
-        }
-
-        Connections {
-            target: AlexaInterface
-            onAuthCodeChanged: {
-                if (authCode !== "") {
-                    alexaAuth.authCode = authCode
-                }
-            }
-            onAuthUrlChanged: {
-                alexaAuth.authUrl = authUrl
-            }
-            Component.onCompleted: {
-                AlexaInterface.logLevel = Alexa.Debug9
-            }
-        }
-
-        Header {
-            anchors.top: parent.top
-            anchors.topMargin: Sizes.dp(80)
-            anchors.horizontalCenter: parent.horizontalCenter
-            unfoldHeader: alexaView.visible || authView.visible
-            visible: root.neptuneState === "Maximized"
-        }
-
-        Item {
-            id: paneMainView
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: parent.height - Sizes.dp(50)
-
-            AlexaView {
-                id: alexaView
-                anchors.fill: parent
-                visible: AlexaInterface.authState === Alexa.Refreshed
-                neptuneState: root.neptuneState
-            }
-
-            AuthView {
-                id: authView
-                anchors.fill: parent
-                alexaAuth: alexaAuth
-                visible: AlexaInterface.authState !== Alexa.Refreshed
-            }
-        }
+        opacity: Style.opacityHigh
+        text: qsTr("Please make sure that the Alexa SDK is installed correctly")
+        visible: false
     }
 
-    property NeptuneWindow statusBar: NeptuneWindow {
-        width: Sizes.dp(Config.statusBarHeight)
-        height: Sizes.dp(Config.statusBarHeight)
-        Component.onCompleted: {
-            setWindowProperty("windowType", "statusbar")
-        }
-        Item {
-            id: interactionPane
-            anchors.fill: parent
-            anchors.margins: parent.width * 0.2
-            Rectangle {
-                width: interactionButton.width * ( 1.0 + 0.3 * AlexaInterface.audioLevel )
-                height: width
-                anchors.centerIn: interactionButton
-                radius: width / 2
-                color: Style.accentColor
-            }
-            RoundButton {
-                id: interactionButton
-                visible: opacity > 0
-                anchors.horizontalCenter: parent.horizontalCenter
-                width: height
-                height: parent.height
-                background: Rectangle {
-                    anchors.fill: parent
-                    radius: width / 2
-                    color: AlexaInterface.connectionStatus === Alexa.Connected ?
-                                    "#00caff" :
-                                    "lightgrey";
-                }
-
-                icon.height: interactionButton.height/2
-                icon.width: interactionButton.width/2
-                icon.source: {
-                    if (AlexaInterface.dialogState === Alexa.Speaking) {
-                        return Qt.resolvedUrl("assets/ic_speaking.png")
-                    } else if (AlexaInterface.dialogState === Alexa.Thinking) {
-                        return Qt.resolvedUrl("assets/ic_thinking.png")
-                    } else {
-                        return Qt.resolvedUrl("assets/ic_microphone.png")
-                    }
-                }
-                enabled: AlexaInterface.connectionStatus === Alexa.Connected
-                onClicked: {
-                    var dialogState = AlexaInterface.dialogState;
-
-                    if (dialogState === Alexa.Idle) {
-                        AlexaInterface.tapToTalk()
-                    } else if ( (dialogState === Alexa.Listening)
-                               || (dialogState === Alexa.Speaking) ) {
-                        AlexaInterface.stopTalking();
-                    }
-                }
-                Image {
-                    id: busyIndicator
-                    anchors.centerIn: parent
-                    width: parent.width * 1.075
-                    height: parent.height * 1.075
-                    source: "assets/spinner.png"
-                    visible: false
-                }
-                ColorOverlay {
-                    id: overlay
-                    anchors.fill: busyIndicator
-                    source: busyIndicator
-                    color: "#0071ff"
-                    visible: (AlexaInterface.dialogState === Alexa.Listening)
-                             || (AlexaInterface.dialogState === Alexa.Thinking)
-                    RotationAnimation on rotation {
-                        loops: Animation.Infinite
-                        from: 0
-                        to: 360
-                        duration: 2000
-                        running: overlay.visible
-                    }
-                }
+    Loader {
+        source: "MainView.qml"
+        onStatusChanged: {
+            if (status === Loader.Error) {
+                alexaLoadErrorText.visible = true
             }
         }
+        onLoaded: {
+            alexaLoadErrorText.visible = false
+            item.x = Qt.binding(function() { return root.exposedRect.x; })
+            item.y = Qt.binding(function() { return root.exposedRect.y; })
+            item.width = Qt.binding(function() { return root.exposedRect.width; })
+            item.height = Qt.binding(function() { return root.exposedRect.height; })
+            item.neptuneState = Qt.binding(function() { return root.neptuneState; })
+            item.visible = Qt.binding(function() { return root.exposedRect.height > 0; })
+        }
     }
 }