Improve QML Recorder example

Changed QML and added some cases just for mobile. Tested mostly on
android.
Hid metadata adding feature on mobile since it is not implemented.

Task-number: QTBUG-96077
Change-Id: I524767232561bef7716830ed0f9360e7c0662f0f
Reviewed-by: Lars Knoll <lars.knoll@qt.io>
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>
(cherry picked from commit f52141f1cf85f84e0b2a93d9c4e88723cf1d622a)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

9 files changed, 95 insertions, 57 deletions

diff --git a/examples/multimedia/video/recorder/AudioInputSelect.qml b/examples/multimedia/video/recorder/AudioInputSelect.qml
index 5295b56f4..f0def4f91 100644
--- a/examples/multimedia/video/recorder/AudioInputSelect.qml
+++ b/examples/multimedia/video/recorder/AudioInputSelect.qml
@@ -62,15 +62,16 @@ Row {
 
     AudioInput { id: audioInput; muted: false }
 
-    Switch { id: audioSwitch }
+    Switch { id: audioSwitch; height: Style.height; }
 
     ComboBox {
         id: comboBox
         width: Style.widthLong
-        height: parent.height
+        height: Style.height
         background: StyleRectangle { anchors.fill: parent }
         model: mediaDevices.audioInputs
         textRole: "description"
+        font.pointSize: Style.fontSize
         displayText: typeof currentValue === 'undefined' ? "unavailable" : currentValue.description
         onCurrentValueChanged: if (typeof comboBox.currentValue !== 'undefined') audioInput.device = currentValue
     }
diff --git a/examples/multimedia/video/recorder/CameraSelect.qml b/examples/multimedia/video/recorder/CameraSelect.qml
index 982a44a8b..8aa8bc2ac 100644
--- a/examples/multimedia/video/recorder/CameraSelect.qml
+++ b/examples/multimedia/video/recorder/CameraSelect.qml
@@ -54,7 +54,7 @@ import QtMultimedia
 
 Row {
     id: root
-
+    height: Style.height
     property Camera selected: available ? camera : null
     property bool available: (typeof comboBox.currentValue !== 'undefined') && cameraSwitch.checked
 
@@ -65,15 +65,19 @@ Row {
 
     MediaDevices { id: mediaDevices }
 
-    Switch { id: cameraSwitch }
+    Switch {
+        id: cameraSwitch
+        anchors.verticalCenter: parent.verticalCenter
+        }
 
     ComboBox {
         id: comboBox
         width: Style.widthLong
-        height: parent.height
+        height: Style.height
         background: StyleRectangle { anchors.fill: parent }
         model: mediaDevices.videoInputs
         displayText: typeof currentValue === 'undefined' ? "Unavailable" : currentValue.description
+        font.pointSize: Style.fontSize
         textRole: "description"
         onCurrentValueChanged: if (typeof comboBox.currentValue !== 'undefined') camera.cameraDevice = currentValue
     }
diff --git a/examples/multimedia/video/recorder/Controls.qml b/examples/multimedia/video/recorder/Controls.qml
index ff810181f..baaad0ddf 100644
--- a/examples/multimedia/video/recorder/Controls.qml
+++ b/examples/multimedia/video/recorder/Controls.qml
@@ -53,9 +53,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtMultimedia
 
-RowLayout {
+Row {
     id: root
-
     required property MediaRecorder recorder
 
     property bool settingsVisible: false
@@ -64,6 +63,8 @@ RowLayout {
     property alias audioInput: audioInputSelect.selected
     property alias camera: cameraSelect.selected
 
+    spacing: Style.interSpacing * Style.ratio
+
     Column {
         id: inputControls
         spacing: Style.intraSpacing
@@ -72,11 +73,6 @@ RowLayout {
         AudioInputSelect { id: audioInputSelect }
     }
 
-    Item {
-        // Position RecordButton in the center
-        Layout.minimumWidth: root.width / 2 - inputControls.width - recordButton.width / 2
-    }
-
     Column {
         width: recordButton.width
         RecordButton {
@@ -87,28 +83,28 @@ RowLayout {
         Text {
             id: recordingTime
             anchors.horizontalCenter: parent.horizontalCenter
+            font.pointSize: Style.fontSize
         }
     }
 
-    Item {
-        Layout.fillWidth: true
-    }
-
     Column {
+        id: optionButtons
         spacing: Style.intraSpacing
         Button {
             height: Style.height
-            width: Style.widthShort
+            width: Style.widthMedium
             background: StyleRectangle { anchors.fill: parent }
             onClicked: root.capturesVisible = !root.capturesVisible
             text: "Captures"
+            font.pointSize: Style.fontSize
         }
         Button {
             height: Style.height
-            width: Style.widthShort
+            width: Style.widthMedium
             background: StyleRectangle { anchors.fill: parent }
-            onClicked: root.settingsVisible = !root.settingsVisible
+            onClicked: settingsVisible = !settingsVisible
             text: "Settings"
+            font.pointSize: Style.fontSize
         }
     }
 
diff --git a/examples/multimedia/video/recorder/Playback.qml b/examples/multimedia/video/recorder/Playback.qml
index 921e53ac2..9ae49d4d3 100644
--- a/examples/multimedia/video/recorder/Playback.qml
+++ b/examples/multimedia/video/recorder/Playback.qml
@@ -60,6 +60,10 @@ Item {
 
     function playUrl(url) {
         root.active = true
+        if (!videoOutput) {
+            console.log("videooutput is null")
+        }
+
         mediaPlayer.videoOutput = videoOutput
         mediaPlayer.audioOutput = audioOutput
         mediaPlayer.source = url
diff --git a/examples/multimedia/video/recorder/RecordButton.qml b/examples/multimedia/video/recorder/RecordButton.qml
index d83fd0ffa..44d8d48d1 100644
--- a/examples/multimedia/video/recorder/RecordButton.qml
+++ b/examples/multimedia/video/recorder/RecordButton.qml
@@ -59,7 +59,7 @@ Item {
 
     required property bool recording
 
-    property int outerRadius: 25
+    property int outerRadius: Style.height
     property int innerRadius: mouse.pressedButtons === Qt.LeftButton ? outerRadius - 6 : outerRadius - 5
 
     signal clicked
diff --git a/examples/multimedia/video/recorder/SettingsMetaData.qml b/examples/multimedia/video/recorder/SettingsMetaData.qml
index 618995022..74db5bc2e 100644
--- a/examples/multimedia/video/recorder/SettingsMetaData.qml
+++ b/examples/multimedia/video/recorder/SettingsMetaData.qml
@@ -78,8 +78,9 @@ ColumnLayout {
         spacing: Style.intraSpacing
         ComboBox {
             id: metaDataType
-            width: (Style.widthLong + Style.widthShort)/2
-            height: parent.height
+            width: Style.widthMedium
+            height: Style.height
+            font.pointSize: Style.fontSize
             model: ListModel {
                 ListElement { text: "Title"; value: MetaData.Title }
                 ListElement { text: "Author"; value: MetaData.Author }
@@ -99,7 +100,7 @@ ColumnLayout {
             }
             textRole: "text"
             valueRole: "value"
-            background: StyleRectangle { width: metaDataType.width }
+            background: StyleRectangle { anchors.fill: parent; width: metaDataType.width }
         }
         Item {
             width: Style.widthMedium
@@ -108,19 +109,24 @@ ColumnLayout {
             TextInput {
                 id: textInput
                 anchors.fill: parent
+                anchors.bottom: parent.bottom
                 anchors.margins: 4
+                font.pointSize: Style.fontSize
                 clip: true
                 onAccepted: {
                     recorder.metaData.insert(metaDataType.currentValue, text)
                     recorder.metaDataChanged()
                     text = ""
+                    textInput.deselect()
                 }
             }
         }
         Button {
-            width: Style.widthTiny
+            width: Style.widthShort
             height: Style.height
             text: "add"
+            font.pointSize: Style.fontSize
+
             background: StyleRectangle { anchors.fill: parent }
             onClicked: textInput.accepted()
         }
@@ -146,25 +152,32 @@ ColumnLayout {
                 width: Style.widthShort
                 height: Style.height
                 text: r.text
+                font.pointSize: Style.fontSize
+
                 horizontalAlignment: Text.AlignRight
                 verticalAlignment: Text.AlignVCenter
             }
             Item {
                 width: Style.widthMedium
                 height: Style.height
+
                 StyleRectangle { anchors.fill: parent }
                 TextInput {
                     anchors.fill: parent
                     anchors.margins: 4
+                    anchors.bottom: parent.bottom
+                    font.pointSize: Style.fontSize
                     clip: true
                     text: recorder.metaData.stringValue(r.value)
                     onAccepted: recorder.metaData.insert(r.value, text)
+
                 }
             }
             Button {
-                width: Style.widthTiny
+                width: Style.widthShort
                 height: Style.height
                 text: "del"
+                font.pointSize: Style.fontSize
                 background: StyleRectangle { anchors.fill: parent }
                 onClicked: { recorder.metaData.remove(r.value); recorder.metaDataChanged() }
             }
diff --git a/examples/multimedia/video/recorder/Style.qml b/examples/multimedia/video/recorder/Style.qml
index 8e1136e92..f00a3c9f1 100644
--- a/examples/multimedia/video/recorder/Style.qml
+++ b/examples/multimedia/video/recorder/Style.qml
@@ -52,11 +52,27 @@ pragma Singleton
 import QtQuick
 
 QtObject {
+
+    function isMobile() {
+        return Qt.platform.os === "android" || Qt.platform.os === "ios";
+    }
+
+    function calculateRatio(windowWidth, windowHeight) {
+        var refWidth = 800.;
+        Style.ratio = windowWidth/refWidth;
+    }
+
+    property real ratio : 1
+
+    property real screenWidth: isMobile()? 400 : 800
+    property real screenHeigth: isMobile()? 900 : 600
+
     property real height: 25
-    property real widthTiny: 40
-    property real widthShort: 80
-    property real widthMedium: 160
-    property real widthLong: 240
+    property real widthTiny: 40*ratio
+    property real widthShort: 80*ratio
+    property real widthMedium: 160*ratio
+    property real widthLong: 220*ratio
     property real intraSpacing: 5
     property real interSpacing: 15
+    property real fontSize: 11
 }
diff --git a/examples/multimedia/video/recorder/StyleParameter.qml b/examples/multimedia/video/recorder/StyleParameter.qml
index d797a0130..2a6c3ddb3 100644
--- a/examples/multimedia/video/recorder/StyleParameter.qml
+++ b/examples/multimedia/video/recorder/StyleParameter.qml
@@ -69,17 +69,19 @@ Row {
         horizontalAlignment: Text.AlignRight
         verticalAlignment: Text.AlignVCenter
         color: root.enabled ? "black" : "gray"
+        font.pointSize: Style.fontSize
     }
 
     ComboBox {
         id: comboBox
         height: Style.height
-        width: Style.widthMedium
+        width: Style.widthLong
         enabled: root.enabled
 
         displayText: currentText
         textRole: "text"
         valueRole: "value"
+        font.pointSize: Style.fontSize
 
         background: StyleRectangle { anchors.fill: parent }
         onActivated: root.activated(currentValue)
diff --git a/examples/multimedia/video/recorder/main.qml b/examples/multimedia/video/recorder/main.qml
index 13ef0cd84..42158cf6e 100644
--- a/examples/multimedia/video/recorder/main.qml
+++ b/examples/multimedia/video/recorder/main.qml
@@ -51,14 +51,19 @@
 import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
+import QtQuick.Layouts
 import QtMultimedia
 
 Window {
     id: root
-    width: 800
-    height: 600
     visible: true
     title: "Media recorder"
+    width: Style.screenWidth
+    height: Style.screenHeigth
+
+    onWidthChanged:{
+        Style.calculateRatio(root.width, root.height)
+    }
 
     VideoOutput {
         id: videoOutput
@@ -127,12 +132,15 @@ Window {
 
     Frame {
         id: controlsFrame
+
         anchors {
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
-        height: controlsAndSettings.height
+
+        height: controls.height + Style.interSpacing * 2 + (settingsEncoder.visible? settingsEncoder.height : 0) +(settingsMetaData.visible? settingsMetaData.height : 0)
+
         background: Rectangle {
             anchors.fill: parent
             color: "white"
@@ -141,43 +149,37 @@ Window {
 
         Behavior on height { NumberAnimation { duration: 100 } }
 
-        Column {
-            id: controlsAndSettings
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-            padding: Style.interSpacing
-            spacing: Style.interSpacing
-
-            property real widthWithPadding: width - padding * 2
+        ColumnLayout {
+            anchors.fill: parent
 
             Controls {
+                Layout.alignment: Qt.AlignHCenter
                 id: controls
-                width: parent.widthWithPadding
                 recorder: recorder
             }
 
             StyleRectangle {
+                Layout.alignment: Qt.AlignHCenter
                 visible: controls.settingsVisible
-                width: parent.widthWithPadding
+                width: controls.width
                 height: 1
             }
 
-            Row {
-                visible: controls.settingsVisible
-                width: parent.widthWithPadding
-                spacing: Style.interSpacing
-
-                SettingsEncoder {
-                    recorder: recorder
-                }
+            SettingsEncoder {
 
-                SettingsMetaData {
-                    height: parent.height
-                    recorder: recorder
-                }
+                id:settingsEncoder
+                Layout.alignment: Qt.AlignHCenter
+                visible: controls.settingsVisible
+                padding: Style.interSpacing
+                recorder: recorder
             }
+
+            SettingsMetaData {
+                id: settingsMetaData
+                Layout.alignment: Qt.AlignHCenter
+                visible: !Style.isMobile() && controls.settingsVisible
+                recorder: recorder
+           }
         }
     }
 }