From 14b5d56d13bb316e58cdcd7ebfb4231bec50791f Mon Sep 17 00:00:00 2001 From: Grigorii Zimin Date: Fri, 13 Mar 2020 11:04:46 +0300 Subject: [webradio] refactor webradio app Task-number: AUTOSUITE-1472 Change-Id: I448f7ec0f077c74541e77574fffaf2d9e39599ee Reviewed-by: Grigorii Zimin --- .../panels/CurrentStationScreen.qml | 107 +++++++++++++ com.pelagicore.webradio/panels/SelectionScreen.qml | 173 +++++++++++++++++++++ com.pelagicore.webradio/panels/StationCover.qml | 137 ++++++++++++++++ 3 files changed, 417 insertions(+) create mode 100644 com.pelagicore.webradio/panels/CurrentStationScreen.qml create mode 100644 com.pelagicore.webradio/panels/SelectionScreen.qml create mode 100644 com.pelagicore.webradio/panels/StationCover.qml (limited to 'com.pelagicore.webradio/panels') 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() + } +} -- cgit v1.2.3