Added volume slider and mute bbutton to audio player, closed #45

artemis.qrc

@@ -12,6 +12,7 @@
         <file>images/icons/player_play.svg</file>
         <file>images/icons/player_stop.svg</file>
         <file>images/icons/player_loop.svg</file>
+        <file>images/icons/player_mute.svg</file>
         <file>images/icons/save.svg</file>
         <file>images/icons/delete.svg</file>
         <file>images/icons/add.svg</file>

images/icons/player_mute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M671-177q-11 7-22 13t-23 11q-15 7-30.5 0T574-176q-6-15 1.5-29.5T598-227q7-3 13-6.5t12-7.5L480-368v111q0 27-24.5 37.5T412-228L280-360H160q-17 0-28.5-11.5T120-400v-160q0-17 11.5-28.5T160-600h88L84-764q-11-11-11-28t11-28q11-11 28-11t28 11l680 680q11 11 11 28t-11 28q-11 11-28 11t-28-11l-93-93Zm89-304q0-83-44-151.5T598-735q-15-7-22-21.5t-2-29.5q6-16 21.5-23t31.5 0q97 43 155 131t58 197q0 33-6 65.5T817-353q-8 22-24.5 27.5t-30.5.5q-14-5-22.5-18t-.5-30q11-26 16-52.5t5-55.5ZM591-623q33 21 51 63t18 80v10q0 5-1 10-2 13-14 17t-22-6l-51-51q-6-6-9-13.5t-3-15.5v-77q0-12 10.5-17.5t20.5.5Zm-201-59q-6-6-6-14t6-14l22-22q19-19 43.5-8.5T480-703v63q0 14-12 19t-22-5l-56-56Z"/></svg>

ui/Artemis.qml

@@ -215,9 +215,8 @@ Window {
 
     Page {
         anchors.fill: parent
-        leftPadding: 5
+        leftPadding: 10
-        rightPadding: 5
+        bottomPadding: 10
-        bottomPadding: 5
 
         header: MenuBar {
             id: topBar
@@ -359,16 +358,18 @@ Window {
 
         RowLayout {
             anchors.fill: parent
-            spacing: 20
+            spacing: 10
 
             ColumnLayout {
                 Layout.maximumWidth: 250
 
                 TextField {
                     id: textFieldSearch
+                    Layout.preferredHeight: 39
+                    Layout.topMargin: 5
                     enabled: false
                     Layout.fillWidth: true
-                    Layout.topMargin: 10
+
                     placeholderText: qsTr("Search")
                     onTextChanged: {
                         refreshList()
@@ -417,16 +418,14 @@ Window {
 
                 TabBar {
                     id: tabBar
-                    width: parent.width
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                     Layout.fillWidth: true
 
                     TabButton {
-                        text: qsTr("Signal")
+                        text: qsTr("SIGNAL")
                     }
 
                     TabButton {
-                        text: qsTr("Filter")
+                        text: qsTr("FILTERS")
                     }
                 }
 
@@ -448,6 +447,7 @@ Window {
                         }
                     }
                 }
+
             }
         }
     }

ui/FilterPage.qml

@@ -213,6 +213,8 @@ Page {
 
     ColumnLayout {
         anchors.fill: parent
+        anchors.rightMargin: 10
+        anchors.topMargin: 10
 
         GridLayout {
             rows: 2

ui/Preferences.qml

@@ -67,10 +67,10 @@ Window {
 
         ColumnLayout {
             anchors.fill: parent
-            anchors.rightMargin: 15
+            anchors.rightMargin: 10
-            anchors.leftMargin: 15
+            anchors.leftMargin: 10
-            anchors.bottomMargin: 15
+            anchors.bottomMargin: 10
-            anchors.topMargin: 15
+            anchors.topMargin: 10
 
             RowLayout {
                 Layout.fillWidth: true

ui/SignalPage.qml

@@ -168,6 +168,8 @@ Page {
 
     ColumnLayout {
         anchors.fill: parent
+        anchors.rightMargin: 10
+        anchors.topMargin: 10
 
         Label {
             id: signalName

ui/SpaceWeatherAuroraPage.qml

@@ -34,10 +34,10 @@ Page {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.rightMargin: 20
+        anchors.rightMargin: 10
-        anchors.leftMargin: 20
+        anchors.leftMargin: 10
-        anchors.bottomMargin: 20
+        anchors.bottomMargin: 10
-        anchors.topMargin: 20
+        anchors.topMargin: 10
 
         Image {
             id: imageBox

ui/SpaceWeatherCurrentPage.qml

@@ -79,10 +79,10 @@ Page {
 
         RowLayout {
             anchors.fill: parent
-            anchors.rightMargin: 20
+            anchors.rightMargin: 10
-            anchors.leftMargin: 20
+            anchors.leftMargin: 10
-            anchors.bottomMargin: 20
+            anchors.bottomMargin: 10
-            anchors.topMargin: 20
+            anchors.topMargin: 10
 
             ColumnLayout {
                 Layout.fillHeight: true

ui/SpaceWeatherDRAPPage.qml

@@ -38,10 +38,10 @@ Page {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.rightMargin: 20
+        anchors.rightMargin: 10
-        anchors.leftMargin: 20
+        anchors.leftMargin: 10
-        anchors.bottomMargin: 20
+        anchors.bottomMargin: 10
-        anchors.topMargin: 20
+        anchors.topMargin: 10
 
         Image {
             id: imageBox

ui/SpaceWeatherForecastPage.qml

@@ -120,10 +120,10 @@ Page {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.rightMargin: 20
+        anchors.rightMargin: 10
-        anchors.leftMargin: 20
+        anchors.leftMargin: 10
-        anchors.bottomMargin: 20
+        anchors.bottomMargin: 10
-        anchors.topMargin: 20
+        anchors.topMargin: 10
 
         ColumnLayout {
             Layout.fillHeight: true

ui/components/AudioPlayer.qml

@@ -7,8 +7,8 @@ import QtMultimedia
 
 
 Item {
-    width: 200
+    width: 180
-    height: 80
+    height: 132
 
     property bool loop: false
 
@@ -28,7 +28,7 @@ Item {
         buttonPause.enabled = true
         buttonStop.enabled = true
         buttonLoop.enabled = true
-        playerPosition.enabled = player.seekable
+        positionSlider.enabled = player.seekable
         player.play()
     }
 
@@ -65,10 +65,12 @@ Item {
         buttonPause.enabled = false
         buttonStop.enabled = false
         buttonLoop.enabled = false
-        playerPosition.enabled = false
+        positionSlider.enabled = false
     }
 
     ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
         RowLayout {
             spacing: 0
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
@@ -83,6 +85,10 @@ Item {
                 onClicked: playSound()
             }
 
+            Item {
+                Layout.fillWidth: true
+            }
+
             RoundButton {
                 id: buttonPause
                 icon.color: Material.foreground
@@ -93,6 +99,10 @@ Item {
                 onClicked: pauseSound()
             }
 
+            Item {
+                Layout.fillWidth: true
+            }
+
             RoundButton {
                 id: buttonStop
                 icon.color: Material.foreground
@@ -103,6 +113,10 @@ Item {
                 onClicked: stopSound()
             }
 
+            Item {
+                Layout.fillWidth: true
+            }
+
             RoundButton {
                 id: buttonLoop
                 icon.color: Material.foreground
@@ -122,21 +136,43 @@ Item {
             }
         }
 
-        Slider {
+        RowLayout {
-            id: playerPosition
+            Slider {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                id: positionSlider
-            Layout.preferredHeight: 20
+                Layout.preferredHeight: 20
-            enabled: player.seekable
+                enabled: player.seekable
-            value: player.duration > 0 ? player.position / player.duration : 0
+                value: player.duration > 0 ? player.position / player.duration : 0
-            onMoved: {
+                Layout.fillWidth: true
-                player.position = player.duration * playerPosition.position
+                onMoved: {
+                    player.position = player.duration * positionSlider.position
+                }
+            }
+        }
+
+        RowLayout {
+            Slider {
+                id: volumeSlider
+                Layout.preferredHeight: 20
+                value: 0.5
+                Layout.fillWidth: true
+            }
+
+            RoundButton {
+                id: buttonMute
+                icon.color: Material.foreground
+                icon.source: "qrc:/images/icons/player_mute.svg"
+                display: AbstractButton.IconOnly
+                enabled: true
+                flat: true
+                onClicked: {
+                    volumeSlider.value = 0
+                }
             }
         }
 
         MediaPlayer {
             id: player
             audioOutput: audioOutput
-
             onPlaybackStateChanged: {
                 if (player.playbackState === MediaPlayer.StoppedState) {
                     if (loop) {
@@ -150,7 +186,7 @@ Item {
 
         AudioOutput {
             id: audioOutput
-            //volume: volumeSlider.value
+            volume: volumeSlider.value
         }
     }
 }