Declarative-camera facelift for mobile

After patch, you can use the camera in portrait and landscape mode on mobile devices.

Task-number: QTBUG-96077
Change-Id: Idd46498e1166bab09a27d182ce707d8bb4528c24
Reviewed-by: Lars Knoll <lars.knoll@qt.io>
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>

1 files changed, 143 insertions, 39 deletions

diff --git a/examples/multimedia/declarative-camera/VideoCaptureControls.qml b/examples/multimedia/declarative-camera/VideoCaptureControls.qml
index 7b8d19531..53682f88b 100644
--- a/examples/multimedia/declarative-camera/VideoCaptureControls.qml
+++ b/examples/multimedia/declarative-camera/VideoCaptureControls.qml
@@ -50,87 +50,96 @@
 
 import QtQuick
 import QtMultimedia
+import QtQuick.Layouts
 
 FocusScope {
+    id : captureControls
     property CaptureSession captureSession
     property bool previewAvailable : false
 
-    property int buttonsPanelWidth: buttonPaneShadow.width
+    property int buttonsmargin: 8
+    property int buttonsPanelWidth
+    property int buttonsPanelPortraitHeight
+    property int buttonsWidth
 
     signal previewSelected
     signal photoModeSelected
-    id : captureControls
 
     Rectangle {
         id: buttonPaneShadow
-        width: bottomColumn.width + 16
-        height: parent.height
-        anchors.top: parent.top
-        anchors.right: parent.right
         color: Qt.rgba(0.08, 0.08, 0.08, 1)
 
-        Column {
-            anchors {
-                right: parent.right
-                top: parent.top
-                margins: 8
-            }
-
+        GridLayout {
             id: buttonsColumn
-            spacing: 8
-
-            CameraButton {
-                text: "Record"
-                visible: captureSession.recorder.status !== MediaRecorder.RecordingStatus
-                onClicked: captureSession.recorder.record()
+            anchors.margins: buttonsmargin
+            flow: captureControls.state === "MobilePortrait"
+                  ? GridLayout.LeftToRight : GridLayout.TopToBottom
+            Item {
+                implicitWidth: buttonsWidth
+                height: 70
+                CameraButton {
+                    text: "Record"
+                    anchors.fill: parent
+                    visible: captureSession.recorder.status !== MediaRecorder.RecordingStatus
+                    onClicked: captureSession.recorder.record()
+                }
             }
 
-            CameraButton {
-                id: stopButton
-                text: "Stop"
-                visible: captureSession.recorder.status === MediaRecorder.RecordingStatus
-                onClicked: captureSession.recorder.stop()
+            Item {
+                implicitWidth: buttonsWidth
+                height: 70
+                CameraButton {
+                    id: stopButton
+                    text: "Stop"
+                    anchors.fill: parent
+                    visible: captureSession.recorder.status === MediaRecorder.RecordingStatus
+                    onClicked: captureSession.recorder.stop()
+                }
             }
 
-            CameraButton {
-                text: "View"
-                onClicked: captureControls.previewSelected()
-                //don't show View button during recording
-                visible: captureSession.recorder.actualLocation && !stopButton.visible
+            Item {
+                implicitWidth: buttonsWidth
+                height: 70
+                CameraButton {
+                    text: "View"
+                    anchors.fill: parent
+                    onClicked: captureControls.previewSelected()
+                    //don't show View button during recording
+                    visible: captureSession.recorder.actualLocation && !stopButton.visible
+                }
             }
         }
 
-        Column {
-            anchors {
-                bottom: parent.bottom
-                right: parent.right
-                margins: 8
-            }
-
+        GridLayout {
             id: bottomColumn
-            spacing: 8
+            anchors.margins: buttonsmargin
+            flow: captureControls.state === "MobilePortrait"
+                  ? GridLayout.LeftToRight : GridLayout.TopToBottom
 
             CameraListButton {
+                implicitWidth: buttonsWidth
                 onValueChanged: captureSession.camera.cameraDevice = value
+                state: captureControls.state
             }
 
             CameraButton {
                 text: "Switch to Photo"
+                implicitWidth: buttonsWidth
                 onClicked: captureControls.photoModeSelected()
             }
 
             CameraButton {
                 id: quitButton
                 text: "Quit"
+                implicitWidth: buttonsWidth
                 onClicked: Qt.quit()
             }
         }
     }
 
-
     ZoomControl {
         x : 0
-        y : 0
+        y : captureControls.state === "MobilePortrait" ? -buttonPaneShadow.height : 0
         width : 100
         height: parent.height
 
@@ -138,4 +147,99 @@ FocusScope {
         maximumZoom: captureSession.camera.maximumZoomFactor
         onZoomTo: captureSession.camera.zoomFactor = value
     }
+
+    states: [
+        State {
+            name: "MobilePortrait"
+            PropertyChanges {
+                target: buttonPaneShadow
+                width: parent.width
+                height: buttonsPanelPortraitHeight
+            }
+            PropertyChanges {
+                target: buttonsColumn
+                height: captureControls.buttonsPanelPortraitHeight / 2 - buttonsmargin
+            }
+            PropertyChanges {
+                target: bottomColumn
+                height: captureControls.buttonsPanelPortraitHeight / 2 - buttonsmargin
+            }
+            AnchorChanges {
+                target: buttonPaneShadow
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+            AnchorChanges {
+                target: buttonsColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+            }
+            AnchorChanges {
+                target: bottomColumn;
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+        },
+        State {
+            name: "MobileLandscape"
+            PropertyChanges {
+                target: buttonPaneShadow
+                width: buttonsPanelWidth
+                height: parent.height
+            }
+            PropertyChanges {
+                target: buttonsColumn
+                height: parent.height
+                width: buttonPaneShadow.width / 2
+            }
+            PropertyChanges {
+                target: bottomColumn
+                height: parent.height
+                width: buttonPaneShadow.width / 2
+            }
+            AnchorChanges {
+                target: buttonPaneShadow
+                anchors.top: parent.top
+                anchors.right: parent.right
+            }
+            AnchorChanges {
+                target: buttonsColumn;
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left;
+            }
+            AnchorChanges {
+                target: bottomColumn;
+                anchors.top: parent.top;
+                anchors.bottom: parent.bottom;
+                anchors.right: parent.right;
+            }
+        },
+        State {
+            name: "Other"
+            PropertyChanges {
+                target: buttonPaneShadow;
+                width: bottomColumn.width + 16;
+                height: parent.height;
+            }
+            AnchorChanges {
+                target: buttonPaneShadow;
+                anchors.top: parent.top;
+                anchors.right: parent.right;
+            }
+            AnchorChanges {
+                target: buttonsColumn;
+                anchors.top: parent.top
+                anchors.right: parent.right
+            }
+            AnchorChanges {
+                target: bottomColumn;
+                anchors.bottom: parent.bottom;
+                anchors.right: parent.right;
+            }
+        }
+    ]
 }