Refresh the 'Multimedia Player' example

Design of MultimediaPlayer example was refreshed.
New icons, colors, application structure were provided.
Some new functionalities were introduced to the sample:
playlist, shuffle, loop, dark mode.

Tested on Windows, Android Emulator, macOs, iOS emulator.

Change-Id: I38a8e203021edc97b70a4ab8f0d8d83c6d5ae45b
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>
(cherry picked from commit d7554ab7004552f50ed72794c29976ed4ea2137a)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

1 files changed, 84 insertions, 0 deletions

diff --git a/examples/demos/mediaplayer/SettingsInfo.qml b/examples/demos/mediaplayer/SettingsInfo.qml
new file mode 100644
index 000000000..8dbdc1444
--- /dev/null
+++ b/examples/demos/mediaplayer/SettingsInfo.qml
@@ -0,0 +1,84 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls.Fusion
+import QtMultimedia
+import Config
+
+Rectangle {
+    id: root
+    implicitWidth: 380
+    color: Config.mainColor
+    border.color: "lightgrey"
+    radius: 10
+
+    property alias tracksInfo: tracksInfo
+    property alias metadataInfo: metadataInfo
+    required property MediaPlayer mediaPlayer
+    required property int selectedAudioTrack
+    required property int selectedVideoTrack
+    required property int selectedSubtitleTrack
+
+    MouseArea {
+        anchors.fill: root
+        preventStealing: true
+    }
+
+    TabBar {
+        id: bar
+        width: root.width
+        contentHeight: 60
+
+        Repeater {
+            model: [qsTr("Metadata"), qsTr("Tracks"), qsTr("Theme")]
+
+            TabButton {
+                id: tab
+                required property int index
+                required property string modelData
+                property color shadowColor:  bar.currentIndex === index ? "#41CD52" : "black"
+                property color textColor:  bar.currentIndex === index ? "#41CD52" : Config.secondaryColor
+
+                background: Rectangle {
+                    opacity: 0.15
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: "transparent" }
+                        GradientStop { position: 0.5; color: "transparent" }
+                        GradientStop { position: 1.0; color: tab.shadowColor }
+                    }
+                }
+
+                contentItem: Label {
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    text: tab.modelData
+                    font.pixelSize: 20
+                    color: tab.textColor
+                }
+            }
+        }
+    }
+
+    StackLayout {
+        width: root.width
+        anchors.top: bar.bottom
+        anchors.bottom: root.bottom
+        currentIndex: bar.currentIndex
+
+        MetadataInfo { id: metadataInfo }
+
+        TracksInfo {
+            id: tracksInfo
+            mediaPlayer: root.mediaPlayer
+            selectedAudioTrack: root.selectedAudioTrack
+            selectedVideoTrack: root.selectedVideoTrack
+            selectedSubtitleTrack: root.selectedSubtitleTrack
+        }
+
+        ThemeInfo { id: themeInfo }
+    }
+}