Fix mediaplayer QML example's layout and icons

The play control buttons were overlaying the rate seekbar and
have wrong layout on both portrait and landscape.

Also make sure QtSvg is added to the project because mute/unmute
button is an svg image and it's not being loaded properly without
the fix.

Pick-to: 6.2
Change-Id: I98e26273ca5a2496d624c378d868ac497dd19741
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>

4 files changed, 28 insertions, 15 deletions

diff --git a/examples/multimedia/video/mediaplayer/AudioControl.qml b/examples/multimedia/video/mediaplayer/AudioControl.qml
index a3f911b89..7e504bc5c 100644
--- a/examples/multimedia/video/mediaplayer/AudioControl.qml
+++ b/examples/multimedia/video/mediaplayer/AudioControl.qml
@@ -60,7 +60,6 @@ Item {
     property bool muted: false
     property real volume: volumeSlider.value/100.
 
-    implicitWidth: 150
     implicitHeight: buttons.height
 
     RowLayout {
diff --git a/examples/multimedia/video/mediaplayer/CMakeLists.txt b/examples/multimedia/video/mediaplayer/CMakeLists.txt
index 8626c2e22..9522da30e 100644
--- a/examples/multimedia/video/mediaplayer/CMakeLists.txt
+++ b/examples/multimedia/video/mediaplayer/CMakeLists.txt
@@ -24,7 +24,7 @@ set(CMAKE_CXX_STANDARD_REQUIRED ON)
 #    endif()
 #endif()
 
-find_package(Qt6 COMPONENTS Core Quick QuickControls2 REQUIRED)
+find_package(Qt6 COMPONENTS Core Quick QuickControls2 Svg REQUIRED)
 
 set(PROJECT_SOURCES
         main.cpp
@@ -42,4 +42,4 @@ qt6_add_resources(mediaplayer "mediaplayer"
 target_compile_definitions(mediaplayer
   PRIVATE $<$<OR:$<CONFIG:Debug>,$<CONFIG:RelWithDebInfo>>:QT_QML_DEBUG>)
 target_link_libraries(mediaplayer
-  PRIVATE Qt6::Core Qt6::Quick Qt6::QuickControls2)
+  PRIVATE Qt6::Core Qt6::Quick Qt6::QuickControls2 Qt6::Svg)
diff --git a/examples/multimedia/video/mediaplayer/PlaybackControl.qml b/examples/multimedia/video/mediaplayer/PlaybackControl.qml
index 8809bff57..08bb0e70b 100644
--- a/examples/multimedia/video/mediaplayer/PlaybackControl.qml
+++ b/examples/multimedia/video/mediaplayer/PlaybackControl.qml
@@ -61,7 +61,8 @@ Item {
     property alias muted: audio.muted
     property alias volume: audio.volume
 
-    implicitHeight: 80
+    height: frame.height
+
     opacity: 1
 
     Behavior on opacity { NumberAnimation { duration: 300 }}
@@ -86,7 +87,10 @@ Item {
     }
 
     Frame {
-        anchors.fill: parent
+        id: frame
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
 
         background: Rectangle {
             color: "white"
@@ -103,21 +107,27 @@ Item {
                 mediaPlayer: root.mediaPlayer
             }
 
-            Item {
+            RowLayout {
                 id: playerButtons
 
                 Layout.fillWidth: true
-                Layout.fillHeight: true
 
                 PlaybackRateControl {
-                    anchors.left: parent.left
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
+                    Layout.minimumWidth: 100
+                    Layout.maximumWidth: 150
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
                     mediaPlayer: root.mediaPlayer
                 }
 
+                Item {
+                    Layout.fillWidth: true
+                }
+
                 RowLayout {
-                    anchors.centerIn: parent
+                    Layout.alignment: Qt.AlignCenter
+                    id: controlButtons
+
                     RoundButton {
                         id: pauseButton
                         radius: 50.0
@@ -140,11 +150,15 @@ Item {
                     }
                 }
 
+                Item {
+                    Layout.fillWidth: true
+                }
+
                 AudioControl {
                     id: audio
-                    anchors.right: parent.right
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
+                    Layout.minimumWidth: 100
+                    Layout.maximumWidth: 150
+                    Layout.fillWidth: true
                     mediaPlayer: root.mediaPlayer
                 }
             }
diff --git a/examples/multimedia/video/mediaplayer/PlaybackRateControl.qml b/examples/multimedia/video/mediaplayer/PlaybackRateControl.qml
index 24596538c..99c151a77 100644
--- a/examples/multimedia/video/mediaplayer/PlaybackRateControl.qml
+++ b/examples/multimedia/video/mediaplayer/PlaybackRateControl.qml
@@ -63,7 +63,7 @@ Item {
 
         Slider {
             id: slider
-            Layout.minimumWidth: 50
+            Layout.fillWidth: true
             snapMode: Slider.SnapOnRelease
             enabled: true
             from: 0.5