[webradio] refactor webradio app

Task-number: AUTOSUITE-1472
Change-Id: I448f7ec0f077c74541e77574fffaf2d9e39599ee
Reviewed-by: Grigorii Zimin <gzimin@luxoft.com>

3 files changed, 417 insertions, 0 deletions

diff --git a/com.pelagicore.webradio/panels/CurrentStationScreen.qml b/com.pelagicore.webradio/panels/CurrentStationScreen.qml
new file mode 100644
index 0000000..49f38c3
--- /dev/null
+++ b/com.pelagicore.webradio/panels/CurrentStationScreen.qml
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 Luxoft Sweden AB
+** Copyright (C) 2014-2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the QtAuto Extra Apps.
+**
+** $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.2
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.2
+import shared.controls 1.0
+import shared.Sizes 1.0
+
+import shared.Style 1.0
+
+Item {
+    id: root
+
+    property string stationName: ""
+    property string stationImage: ""
+    property string bitRate: ""
+    property string streamingUrl: ""
+    property alias currentOperationStatus: stationInfo.status
+    property bool playing
+
+    signal nextStation()
+    signal prevStation()
+    signal playStation()
+    signal pauseStation()
+
+    StationCover {
+        id: stationInfo
+
+        anchors.left: parent.left
+        anchors.leftMargin: Sizes.dp(80)
+        source: root.stationImage === "" ? "../assets/onair.jpg" : root.stationImage
+        title: root.stationName
+        subTitle: qsTr("Bitrate: ") + root.bitRate
+        description: qsTr("Streaming: ") + root.streamingUrl
+    }
+
+    Image {
+        anchors.bottomMargin: -Sizes.dp(80)
+        anchors.bottom: controlsRow.top
+        anchors.left: stationInfo.right
+        height: Sizes.dp(278 / 3)
+        width: Sizes.dp(1000 / 3)
+        fillMode: Image.PreserveAspectCrop
+        source: Style.theme === Style.Dark ? "../assets/logo-dark.png" : "../assets/logo.png"
+    }
+
+    RowLayout {
+        id: controlsRow
+        anchors.top: parent.top
+        anchors.topMargin: Sizes.dp(52)
+        anchors.left: stationInfo.right
+        ToolButton {
+            Layout.preferredWidth: Sizes.dp(80)
+            Layout.preferredHeight: Sizes.dp(240)
+            icon.name: "ic_skipprevious"
+            onClicked: {
+                root.prevStation()
+            }
+        }
+
+        ToolButton {
+            Layout.preferredWidth: Sizes.dp(160)
+            Layout.preferredHeight: Sizes.dp(240)
+            icon.name: root.playing ? "ic-pause" : "ic_play"
+            onClicked: root.playing ? root.pauseStation() : root.playStation()
+        }
+
+        ToolButton {
+            Layout.preferredWidth: Sizes.dp(80)
+            Layout.preferredHeight: Sizes.dp(240)
+            icon.name: "ic_skipnext"
+            onClicked: {
+                root.nextStation()
+            }
+        }
+    }
+}
diff --git a/com.pelagicore.webradio/panels/SelectionScreen.qml b/com.pelagicore.webradio/panels/SelectionScreen.qml
new file mode 100644
index 0000000..48dcc7a
--- /dev/null
+++ b/com.pelagicore.webradio/panels/SelectionScreen.qml
@@ -0,0 +1,173 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 Luxoft Sweden AB
+** Copyright (C) 2014-2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the QtAuto Extra Apps.
+**
+** $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.8
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.2
+
+import shared.controls 1.0
+import shared.Sizes 1.0
+import shared.Style 1.0
+import shared.utils 1.0
+import shared.animations 1.0
+
+import "../stores"
+import "../popups"
+
+
+Item {
+    id: root
+
+    property RadioStore store
+    property Item rootItem
+    signal chosenGenre(var genre)
+
+    Image {
+        width: root.width - Sizes.dp(80)
+        height: Sizes.dp(16)
+        anchors.horizontalCenter: root.horizontalCenter
+        anchors.bottom: genrelist.top
+        source: Style.image("list-divider")
+        opacity: genrelist.contentY > 0 ? 1.0 : 0.0
+        Behavior on opacity { DefaultNumberAnimation { duration: 100 } }
+    }
+
+    ToolsColumn {
+        id: toolsColumn
+        width: Sizes.dp(264)
+        anchors.left: parent.left
+        anchors.top: parent.top
+        model: root.store.toolsColumnModel
+
+        onClicked: {
+            if (currentText === "sources") {
+                //FIXME in multiprocess store.musicSourcesModel.length returns 1
+                //even though is more. When spotify and/or web radio are uninstalled
+                //and installed again, then it updates fine.
+                var pos = currentItem.mapToItem(root.rootItem
+                                                , currentItem.width/2, currentItem.height/2);
+
+                //set model each time to ensure data accuracy
+                musicSourcesPopup.model = root.store.musicSourcesModel
+                musicSourcesPopup.originItemX = pos.x;
+                musicSourcesPopup.originItemY = pos.y;
+                musicSourcesPopup.visible = true;
+            } else if (currentText === "ABOUT...") {
+                pos = currentItem.mapToItem(root.rootItem
+                                                , currentItem.width/2, currentItem.height/2);
+                aboutPopup.originItemX = pos.x;
+                aboutPopup.originItemY = pos.y;
+                aboutPopup.visible = true;
+            }
+
+            toolsColumn.currentIndex = 0;
+        }
+    }
+
+    MusicSourcesPopup {
+        id: musicSourcesPopup
+        width: root.Sizes.dp(910)
+        // caclulate popup height based on musicSources list items
+        // + 200 for header & margins
+        height: model ? root.Sizes.dp(200 + (model.count * 96)) : root.Sizes.dp(296)
+        popupY: root.Sizes.dp(Config.centerConsoleHeight / 4)
+        onSwitchSourceClicked: {
+            store.switchSource(source)
+        }
+    }
+
+    AboutPopup {
+        id: aboutPopup
+        width: root.Sizes.dp(910)
+        // caclulate popup height based on musicSources list items
+        // + 200 for header & margins
+        height: root.Sizes.dp(450)
+        popupY: root.Sizes.dp(Config.centerConsoleHeight / 4)
+    }
+
+    GridView {
+        id: genrelist
+
+        width: root.width - Sizes.dp(247.5)
+        height: root.height
+        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.horizontalCenterOffset: toolsColumn.width / 3
+
+        model: root.store.musicGenres
+        clip: true
+        cellWidth: Sizes.dp(202.5) ; cellHeight: cellWidth
+
+        ScrollIndicator.vertical: ScrollIndicator {
+            parent: genrelist.parent
+            anchors.top: genrelist.top
+            anchors.right: genrelist.right
+            anchors.rightMargin: - Sizes.dp(9)
+            anchors.bottom: genrelist.bottom
+        }
+
+        delegate: Item {
+            width: Sizes.dp(193,5)
+            height: Sizes.dp(180)
+
+            Rectangle {
+                anchors.fill: parent
+                opacity: 0.2
+                color: "black"
+                border.width: mouseArea.containsPress ? 2 : 1
+                border.color: "#888"
+                radius: 4
+                gradient: Gradient {
+                    GradientStop { position: 0 ; color: mouseArea.containsPress ? "#ccc" : "#eee" }
+                    GradientStop { position: 1 ; color: mouseArea.containsPress ? "#aaa" : "#ccc" }
+                }
+            }
+
+            Label {
+                anchors.centerIn: parent
+                width: Sizes.dp(157,5)
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: Sizes.fontSizeS
+                text: model.name
+            }
+
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                onClicked: {
+                    root.chosenGenre(model.name)
+                }
+            }
+        }
+    }
+}
diff --git a/com.pelagicore.webradio/panels/StationCover.qml b/com.pelagicore.webradio/panels/StationCover.qml
new file mode 100644
index 0000000..364b473
--- /dev/null
+++ b/com.pelagicore.webradio/panels/StationCover.qml
@@ -0,0 +1,137 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 Luxoft Sweden AB
+** Copyright (C) 2014-2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the QtAuto Extra Apps.
+**
+** $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.8
+import QtQuick.Layouts 1.0
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.0
+
+import shared.Sizes 1.0
+import shared.controls 1.0
+import shared.Style 1.0
+
+Item {
+    id: root
+
+    width: Sizes.dp(607.5)
+    height: Sizes.dp(480)
+
+    property alias source: image.source
+    property alias title: title.text
+    property alias description: description.text
+    property alias subTitle: subTitle.text
+    property string status
+    signal clicked()
+
+    RowLayout {
+        id: currentRadio
+        anchors.left: parent.left
+        spacing: Sizes.dp(30)
+        Item {
+            Layout.preferredWidth: Sizes.dp(270)
+            Layout.preferredHeight: Sizes.dp(270)
+            Rectangle {
+                anchors.fill: parent
+                color: "white"
+                border.color: Qt.darker(color, 1.2)
+            }
+            Image {
+                id: image
+                anchors.fill: parent
+                anchors.margins: Sizes.dp(2)
+                fillMode: Image.PreserveAspectCrop
+                asynchronous: true
+                Image {
+                    anchors.top: parent.bottom
+                    width: Sizes.dp(270)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: Style.image("album-art-shadow-widget")
+                    fillMode: Image.PreserveAspectFit
+                }
+            }
+        }
+
+        Label {
+            id: titelPlaceholder
+            Layout.preferredWidth: Sizes.dp(306)
+            horizontalAlignment: Text.AlignLeft
+            font.pixelSize: Sizes.fontSizeM
+            wrapMode: Text.WordWrap
+            visible: title.text === ""
+            text: qsTr("No Stream Selected")
+        }
+
+        Label {
+            id: title
+            Layout.preferredWidth: Sizes.dp(306)
+            horizontalAlignment: Text.AlignLeft
+            font.pixelSize: Sizes.fontSizeM
+            wrapMode: Text.WordWrap
+        }
+    }
+
+    ColumnLayout {
+        anchors.top: currentRadio.bottom
+        anchors.topMargin: Sizes.dp(80)
+        anchors.left: currentRadio.left
+        spacing: Sizes.dp(5)
+
+        Label {
+            id: subTitle
+            font.pixelSize: Sizes.fontSizeS
+            font.weight: Font.Light
+        }
+
+        Label {
+            id: description
+            Layout.preferredWidth: root.width
+            Layout.preferredHeight: Sizes.dp(70)
+            font.pixelSize: Sizes.fontSizeS
+            font.weight: Font.Light
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        Label {
+            visible: root.status !== ""
+            text: root.status
+            font.pixelSize: Sizes.fontSizeM
+            font.weight: Font.Light
+            Layout.preferredWidth: root.width
+            Layout.alignment: Qt.AlignCenter
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+}