Refactor QML Camera example orientation and control layout state logic

In QML Camera example, the state of the photo/video controls that
determines the layout those controls was updated by the setState
function. This function was called on camera UI width change, and
initially only because of stillControls.state being bound to the
function. The videoControls.state was then bound to stillControls.state.
This caused qmllint warnings (unqualified access to setState() and info
message because setState() doesn't return a value) and log spamming
whenever the window width changed.

The orientation and control layout state logic is now encapsulated in a
separate Item "controlLayout", and the stillControls and videoControls
objects both bind to the state and buttonsWidth properties of this new
Item. Additionally the message about state change is logged only when
the state actually changes.

Documentation is also updated to display the correct part of the code
in the section that mentions the control layout.

Task-number: QTBUG-113682
Pick-to: 6.5
Change-Id: I99e5c0c3d3bb369dd985cd06fdb51d687ef24f1f
Reviewed-by: Jøger Hansegård <joger.hansegard@qt.io>
Reviewed-by: Artem Dyomin <artem.dyomin@qt.io>
Reviewed-by: Nicholas Bennett <nicholas.bennett@qt.io>
(cherry picked from commit 2785589db4447d3ea421ba59130d6be4e6574b6b)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

2 files changed, 42 insertions, 26 deletions

diff --git a/examples/multimedia/declarative-camera/declarative-camera.qml b/examples/multimedia/declarative-camera/declarative-camera.qml
index ce827d80a..d3b0767e9 100644
--- a/examples/multimedia/declarative-camera/declarative-camera.qml
+++ b/examples/multimedia/declarative-camera/declarative-camera.qml
@@ -16,24 +16,6 @@ Rectangle {
     property int buttonsPanelLandscapeWidth: 328
     property int buttonsPanelPortraitHeight: 180
 
-    onWidthChanged: {
-        setState()
-    }
-    function setState() {
-        if (Qt.platform.os === "android" || Qt.platform.os === "ios") {
-            if (Screen.desktopAvailableWidth < Screen.desktopAvailableHeight) {
-                stillControls.state = "MobilePortrait";
-            } else {
-                stillControls.state  = "MobileLandscape";
-            }
-        } else {
-            stillControls.state = "Other";
-        }
-        console.log("State: " + stillControls.state);
-        stillControls.buttonsWidth = (stillControls.state === "MobilePortrait")
-                ? Screen.desktopAvailableWidth/3.4 : 144
-    }
-
     states: [
         State {
             name: "PhotoCapture"
@@ -108,10 +90,38 @@ Rectangle {
         //        autoOrientation: true
     }
 
+    Item {
+        id: controlLayout
+
+        readonly property bool isMobile: Qt.platform.os === "android" || Qt.platform.os === "ios"
+        readonly property bool isLandscape: Screen.desktopAvailableWidth >= Screen.desktopAvailableHeight
+        property int buttonsWidth: state === "MobilePortrait" ? Screen.desktopAvailableWidth / 3.4 : 114
+
+        states: [
+            State {
+                name: "MobileLandscape"
+                when: controlLayout.isMobile && controlLayout.isLandscape
+            },
+            State {
+                name: "MobilePortrait"
+                when: controlLayout.isMobile && !controlLayout.isLandscape
+            },
+            State {
+                name: "Other"
+                when: !controlLayout.isMobile
+            }
+        ]
+
+        onStateChanged: {
+            console.log("State: " + controlLayout.state)
+        }
+    }
+
     PhotoCaptureControls {
         id: stillControls
-        state: setState()
+        state: controlLayout.state
         anchors.fill: parent
+        buttonsWidth: controlLayout.buttonsWidth
         buttonsPanelPortraitHeight: cameraUI.buttonsPanelPortraitHeight
         buttonsPanelWidth: cameraUI.buttonsPanelLandscapeWidth
         captureSession: captureSession
@@ -123,9 +133,9 @@ Rectangle {
 
     VideoCaptureControls {
         id: videoControls
-        state: stillControls.state
+        state: controlLayout.state
         anchors.fill: parent
-        buttonsWidth: stillControls.buttonsWidth
+        buttonsWidth: controlLayout.buttonsWidth
         buttonsPanelPortraitHeight: cameraUI.buttonsPanelPortraitHeight
         buttonsPanelWidth: cameraUI.buttonsPanelLandscapeWidth
         captureSession: captureSession
diff --git a/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc b/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc
index b22c80234..633592aad 100644
--- a/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc
+++ b/examples/multimedia/declarative-camera/doc/src/declarative-camera.qdoc
@@ -26,13 +26,19 @@ controls.
 
 \section1 Using screen orientation to select layout
 
-In \c declarative-camera.qml we handle detecting the orientation we're in and
-select the appropriate layout while also catering for the limitations of small
-screen mobile devices like so:
+The orientation and control layout state logic is encapsulated in a separate
+Item, \c controlLayout like so:
 
 \quotefromfile declarative-camera/declarative-camera.qml
-\skipto Rectangle {
-\printto states: [
+\skipto Item {
+\printto PhotoCaptureControls {
+
+The \c stillControls and \c videoControls objects both bind to the \c state
+and \c buttonsWidth properties of this Item, as shown in \c stillControls:
+
+\printto VideoCaptureControls {
+
+To support debugging, a message about layout state change is logged.
 
 Here is the portrait layout: