Add QML for audio buttons and add pngs

.pngs were chosen because the .svgs were only available in black. Qt currently does not have an easy way of changing colors. The rest of the interface icons are white, so getting them in white was necessary.
2019-01-12 19:14:59 +01:00
parent ace455d3d3
commit 4829ce7c8a
7 changed files with 120 additions and 1 deletions
@@ -320,6 +320,124 @@ MyStackViewPage {
            }
        }

+        GroupBox {
+            id: mediaKeysGroupBox
+            Layout.fillWidth: true
+
+            label: MyText {
+                leftPadding: 10
+                text: "Media Control Keys"
+                bottomPadding: -10
+            }
+            background: Rectangle {
+                color: "transparent"
+                border.color: "#ffffff"
+                radius: 8
+            }
+
+            RowLayout {
+                property bool playButtonIsPlay: false
+                MyPushButton2 {
+                    id: previousSongButton
+                    Layout.preferredHeight: 50
+                    Layout.preferredWidth: 50
+                    contentItem: Image {
+                        source: "media_keys/outline_skip_previous_white_24dp.png"
+                        sourceSize.width: 50
+                        sourceSize.height: 50
+                        anchors.fill: parent
+                    }
+                    onClicked: {
+                        UtilitiesTabController.sendMediaPreviousSong()
+                    }
+
+                    background: Rectangle {
+                        opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0)
+                        color: "#406288"
+                        radius: 4
+                        anchors.fill: parent
+                    }
+                }
+                MyPushButton2 {
+                    id: stopSongButton
+                    Layout.preferredHeight: 50
+                    Layout.preferredWidth: 50
+
+                    contentItem: Image {
+                        source: "media_keys/outline_stop_white_24dp.png"
+                        sourceSize.width: 50
+                        sourceSize.height: 50
+                        anchors.fill: parent
+                    }
+                    onClicked: {
+                        UtilitiesTabController.sendMediaStopSong()
+                        playPauseSongButton.contentItem.source = "media_keys/outline_play_arrow_white_24dp.png"
+                        parent.playButtonIsPlay = true
+                    }
+
+                    background: Rectangle {
+                        opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0)
+                        color: "#406288"
+                        radius: 4
+                        anchors.fill: parent
+                    }
+                }
+                MyPushButton2 {
+                    id: playPauseSongButton
+                    Layout.preferredHeight: 50
+                    Layout.preferredWidth: 50
+                    contentItem: Image {
+                        // Assume that music is playing when people enter VR.
+                        source: "media_keys/outline_pause_white_24dp.png"
+                        sourceSize.width: 50
+                        sourceSize.height: 50
+
+                        anchors.fill: parent
+                    }
+                    onClicked: {
+                        UtilitiesTabController.sendMediaPausePlay()
+                        if (parent.playButtonIsPlay) {
+                            playPauseSongButton.contentItem.source = "media_keys/outline_pause_white_24dp.png"
+                            parent.playButtonIsPlay = false
+                        } else {
+                            playPauseSongButton.contentItem.source = "media_keys/outline_play_arrow_white_24dp.png"
+                            parent.playButtonIsPlay = true
+                        }
+
+                    }
+
+                    background: Rectangle {
+                        opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0)
+                        color: "#406288"
+                        radius: 4
+                        anchors.fill: parent
+                    }
+                }
+                MyPushButton2 {
+                    id: nextSongButton
+                    Layout.preferredHeight: 50
+                    Layout.preferredWidth: 50
+
+                    contentItem: Image {
+                        source: "media_keys/outline_skip_next_white_24dp.png"
+                        sourceSize.width: 50
+                        sourceSize.height: 50
+                        anchors.fill: parent
+                    }
+                    onClicked: {
+                        UtilitiesTabController.sendMediaNextSong()
+                    }
+
+                    background: Rectangle {
+                        opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0)
+                        color: "#406288"
+                        radius: 4
+                        anchors.fill: parent
+                    }
+                }
+            }
+        }
+
        Item {
            Layout.fillHeight: true
        }