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.

Change-Id: I98e26273ca5a2496d624c378d868ac497dd19741
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>
(cherry picked from commit 671396809fd866e0e3d7793f8fd635b0ad33bed7)
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>

7 files changed, 35 insertions, 17 deletions

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 3f90e7064..08c092e2b 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -11,7 +11,7 @@ project(QtMultimedia
 )
 
 find_package(Qt6 ${PROJECT_VERSION} CONFIG REQUIRED COMPONENTS BuildInternals Core)
-find_package(Qt6 ${PROJECT_VERSION} QUIET CONFIG OPTIONAL_COMPONENTS Gui Network Widgets Quick Qml QuickTest QuickControls2)
+find_package(Qt6 ${PROJECT_VERSION} QUIET CONFIG OPTIONAL_COMPONENTS Gui Network Svg Widgets Quick Qml QuickTest QuickControls2)
 
 if(NOT TARGET Qt::Gui)
     message(NOTICE "Skipping the build as the condition \"TARGET Qt::Gui\" is not met.")
diff --git a/dependencies.yaml b/dependencies.yaml
index b622b3881..345def755 100644
--- a/dependencies.yaml
+++ b/dependencies.yaml
@@ -8,3 +8,6 @@ dependencies:
   ../qtshadertools:
     ref: be7e2cb95b8ea61a29b9f34fc066203952726ec9
     required: true
+  ../qtsvg:
+    ref: 68acdcd9ed7d52073408606b4cc86ecc819e7130
+    required: false
diff --git a/examples/multimedia/video/CMakeLists.txt b/examples/multimedia/video/CMakeLists.txt
index 6174726c0..e5bc20ba9 100644
--- a/examples/multimedia/video/CMakeLists.txt
+++ b/examples/multimedia/video/CMakeLists.txt
@@ -3,7 +3,9 @@
 add_subdirectory(qmlvideo)
 add_subdirectory(qmlvideofx)
 if(TARGET Qt::QuickControls2)
-    add_subdirectory(mediaplayer)
+    if(TARGET Qt::Svg)
+        add_subdirectory(mediaplayer)
+    endif()
     add_subdirectory(recorder)
 endif()
 if(ANDROID)
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 6744d2b6d..ee2ba6ed4 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 }}
@@ -90,7 +91,10 @@ Item {
     }
 
     Frame {
-        anchors.fill: parent
+        id: frame
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
 
         background: Rectangle {
             color: "white"
@@ -107,21 +111,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
@@ -144,11 +154,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