Prepare player and settings, create branding

CMakeLists.txt

@@ -17,6 +17,8 @@ qt_add_qml_module(appqyouradio
     VERSION 1.0
     QML_FILES
         Main.qml
+        ViewPlayer.qml
+        ViewSettings.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

Main.qml

@@ -1,5 +1,8 @@
 import QtQuick 6.8
+import QtQuick.Controls 6.8
+import QtQuick.Controls.Basic 6.8
 import QtQuick.Layouts 6.8
+
 import QYRComponents 1.0
 
 ApplicationWindow {
@@ -7,52 +10,45 @@ ApplicationWindow {
     height: 800
     title: qsTr("Hello World")
 
-    header: Rectangle {
+    ColumnLayout {
-        color: Colors.surface1
+        anchors.fill: parent
-        width: children.width
+        anchors.margins: 10
-        height: children.height
 
-        RowLayout {
+        TabBar {
-            anchors.fill: parent
+            id: tabbar
-
+            Layout.fillWidth: true
-            Label {
+            spacing: 10
-                Layout.fillWidth: true
+            TabButton {
-                heading: "h2"
-                text: "QYouRadio"
-                font.bold: true
-            }
-
-            Button {
-                Layout.alignment: Qt.AlignVCenter
                 text: qsTr("Autoradio")
             }
-
+            TabButton {
-            Button {
+                text: qsTr("Live Mix")
-                Layout.alignment: Qt.AlignVCenter
-                text: qsTr("Live Radio")
             }
-
+            TabButton {
-            Button {
+                text: qsTr("Deep Bass")
-                Layout.alignment: Qt.AlignVCenter
+            }
+            TabButton {
                 text: qsTr("Settings")
             }
         }
-    }
 
-    ColumnLayout {
+        StackLayout {
-        anchors.fill: parent
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.margins: 10
 
-        Button {
+            currentIndex: tabbar.currentIndex
-            text: qsTr("Settings")
+            ViewPlayer {
-        }
+                title: qsTr("Autoradio")
-
+            }
-        CheckBox {}
+            ViewPlayer {
-
+                title: qsTr("Live Radio")
-        Slider {
+            }
-            from: 0.0
+            ViewPlayer {
-            value: 0.5
+                title: qsTr("Deep Bass")
-            stepSize: 0.1
+            }
-            to: 1.1
+            ViewSettings {
+            }
         }
     }
 }

QYRComponents/ApplicationWindow.qml

@@ -1,8 +1,8 @@
 import QtQuick 6.8
-import QtQuick.Controls 6.8 as QC
+import QtQuick.Controls 6.8
-import QtQuick.Controls.Basic as QC
+import QtQuick.Controls.Basic 6.8
 
-QC.ApplicationWindow {
+ApplicationWindow {
     visible: true
 
     background: Rectangle {

QYRComponents/Button.qml

@@ -1,21 +1,24 @@
 import QtQuick 6.8
-import QtQuick.Controls 6.8 as QC
+import QtQuick.Controls 6.8
-import QtQuick.Controls.Basic as QC
+import QtQuick.Controls.Basic 6.8
 
-QC.Button {
+Button {
-    // highlighted: true
-    background: Rectangle {
-        color: hovered ? Colors.primaryAlt : Colors.primary
-        radius: 5
-    }
-
-    // width: player.playing ? 60 : 56
     implicitHeight: 36
 
+    contentItem: Text {
+        text: parent.text
+        font.family: Colors.fontFamily
+        font.pointSize: Colors.fontSize.base
+        opacity: enabled ? 1.0 : 0.3
+        color: Colors.text;
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
 
-    Component.onCompleted: {
+    background: Rectangle {
-        contentItem.color = Colors.text;
+        color: parent.hovered ? Colors.primaryAlt : Colors.primary
-        font.family = Colors.fontFamily;
+        opacity: enabled ? 1 : 0.3
-        font.pointSize = Colors.fontSize.base;
+        radius: 5
     }
 }

QYRComponents/CMakeLists.txt

@@ -22,6 +22,7 @@ qt_add_qml_module(QYRComponents
     QML_FILES CheckBox.qml
     QML_FILES Slider.qml
     QML_FILES Label.qml
+    QML_FILES TabButton.qml
     # SOURCES qyrcomponents.cpp qyrcomponents.h
 )
 

QYRComponents/CheckBox.qml

@@ -1,15 +1,15 @@
 import QtQuick 6.8
-import QtQuick.Controls 6.8 as QC
+import QtQuick.Controls 6.8
-import QtQuick.Controls.Basic as QC
+import QtQuick.Controls.Basic 6.8
 
-QC.CheckBox {
+CheckBox {
     implicitWidth: 14
     implicitHeight: 14
     contentItem: Rectangle {
         anchors.fill: parent
         radius: 2
         color: parent.checked ? (parent.hovered ? Colors.primaryAlt : Colors.primary) : "#fff"
-        border.color: parent.checked ? (parent.hovered ? Colors.primaryAlt : Colors.primary) : "#fff"
+        border.color: parent.checked ? (parent.hovered ? Colors.primaryAlt : Colors.primary) : "#000"
         border.width: 1
     }
 }

QYRComponents/Colors.qml

@@ -10,6 +10,8 @@ Item {
             text: "#1f1f1f",
             primary: "#007bff",
             primaryAlt: "#0056b3",
+            secondary: "#009eff",
+            secondaryAlt: "#0076b3",
             surface1: "#323232",
             surface0: "#282828",
             background: "#f4f4f4"
@@ -19,6 +21,8 @@ Item {
             text: "#f4f4f4",
             primary: "#007bff",
             primaryAlt: "#0056b3",
+            secondary: "#009eff",
+            secondaryAlt: "#0076b3",
             surface1: "#323232",
             surface0: "#282828",
             background: "#1f1f1f"
@@ -43,6 +47,8 @@ Item {
     readonly property string text: currentTheme.text
     readonly property string primary: currentTheme.primary
     readonly property string primaryAlt: currentTheme.primaryAlt
+    readonly property string secondary: currentTheme.secondary
+    readonly property string secondaryAlt: currentTheme.secondaryAlt
     readonly property string surface1: currentTheme.surface1
     readonly property string surface0: currentTheme.surface0
     readonly property string background: currentTheme.background

QYRComponents/Label.qml

@@ -1,8 +1,8 @@
 import QtQuick 6.8
-import QtQuick.Controls 6.8 as QC
+import QtQuick.Controls 6.8
-import QtQuick.Controls.Basic as QC
+import QtQuick.Controls.Basic 6.8
 
-QC.Label {
+Label {
     property string heading: "base"
 
     font.family: Colors.fontFamily

QYRComponents/Slider.qml

@@ -1,8 +1,8 @@
 import QtQuick 6.8
-import QtQuick.Controls 6.8 as QC
+import QtQuick.Controls 6.8
-import QtQuick.Controls.Basic as QC
+import QtQuick.Controls.Basic 6.8
 
-QC.Slider {
+Slider {
     snapMode: Slider.SnapAlways
 
     implicitWidth: 130

QYRComponents/TabButton.qml

@@ -0,0 +1,26 @@
+import QtQuick 6.8
+import QtQuick.Controls 6.8
+import QtQuick.Controls.Basic 6.8
+
+TabButton {
+    leftPadding: 5
+    rightPadding: 5
+    implicitHeight: 36
+
+    contentItem: Text {
+        text: parent.text
+        font.family: Colors.fontFamily
+        font.pointSize: Colors.fontSize.base
+        opacity: enabled ? 1.0 : 0.3
+        color: Colors.text;
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        color: checked ? (parent.hovered ? Colors.secondaryAlt : Colors.secondary) : (parent.hovered ? Colors.primaryAlt : Colors.primary)
+        opacity: enabled ? 1 : 0.3
+        radius: 5
+    }
+}

QYRComponents/qmldir

@@ -1,4 +0,0 @@
-module QYRComponents
-
-Button 1.0 Button.qml
-singleton Colors 1.0 Colors.qml

ViewPlayer.qml

@@ -0,0 +1,81 @@
+import QtQuick 6.8
+import QtQuick.Controls 6.8
+import QtQuick.Controls.Basic 6.8
+import QtQuick.Layouts 6.8
+import QYRComponents 1.0
+
+ColumnLayout {
+    Layout.alignment: Qt.AlignVCenter
+    Layout.fillWidth: true
+
+    property string title: ""
+    property string streamURL: ""
+    property string metaURL: ""
+
+    Label {
+        Layout.fillWidth: true
+        Layout.bottomMargin: 20
+        text: title
+        heading: "h2"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    Label {
+        Layout.fillWidth: true
+        text: "Title: "
+        heading: "h3"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    Label {
+        Layout.fillWidth: true
+        text: "Artist: "
+        heading: "h3"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    Label {
+        Layout.fillWidth: true
+        text: "Genre: "
+        heading: "h3"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    Label {
+        Layout.fillWidth: true
+        text: "Bitrate: " + " kbps"
+        heading: "h3"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    Label {
+        Layout.fillWidth: true
+        text: "Listeners: "
+        heading: "h3"
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    RowLayout {
+        Layout.fillWidth: false
+        Layout.topMargin: 20
+        Layout.alignment: Qt.AlignHCenter
+        width: 220
+        
+        Button {
+            Layout.rightMargin: 5
+            text: "Play"
+        }
+
+        Slider {
+            Layout.fillWidth: true
+            Layout.leftMargin: 5
+            from: 0.1
+            to: 1.1
+            stepSize: 0.1
+        }
+    }
+
+    Item {
+        Layout.fillHeight: true
+    }
+}

ViewSettings.qml

@@ -0,0 +1,48 @@
+import QtQuick 6.8
+import QtQuick.Controls 6.8
+import QtQuick.Controls.Basic 6.8
+import QtQuick.Layouts 6.8
+import QYRComponents 1.0
+
+RowLayout {
+    // Layout.leftMargin: parent.width * 2
+    // Layout.rightMargin: parent.width * 2
+
+    TabBar {
+        id: settingsCategory
+        Layout.fillHeight: true
+
+        spacing: 10
+
+        contentItem: ListView {
+            model: settingsCategory.contentModel
+            currentIndex: settingsCategory.currentIndex
+
+            spacing: settingsCategory.spacing
+            orientation: ListView.Vertical
+            boundsBehavior: Flickable.StopAtBounds
+            flickableDirection: Flickable.AutoFlickIfNeeded
+            snapMode: ListView.SnapToItem
+
+            highlightMoveDuration: 0
+            highlightRangeMode: ListView.ApplyRange
+            preferredHighlightBegin: 40
+            preferredHighlightEnd: width - 40
+        }
+
+        TabButton {
+            text: qsTr("Appearance")
+            width: 284
+        }
+
+        TabButton {
+            text: qsTr("About")
+            width: 284
+        }
+    }
+
+    StackLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
+}