Implement an opportunity to select window in the recorder example

Also, added an opportunity to show and hide
videosources in the combobox

Change-Id: I34c9150557e9a53e47e1ef891307768eb3480cd4
Reviewed-by: Artem Dyomin <artem.dyomin@qt.io>
(cherry picked from commit 7ad5c7afc0167717f361ac0bedd3614ed27a10e1)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

3 files changed, 96 insertions, 14 deletions

diff --git a/examples/multimedia/video/recorder/Controls.qml b/examples/multimedia/video/recorder/Controls.qml
index 3c04cef83..a733b4dec 100644
--- a/examples/multimedia/video/recorder/Controls.qml
+++ b/examples/multimedia/video/recorder/Controls.qml
@@ -16,6 +16,7 @@ Row {
     property alias audioInput: audioInputSelect.selected
     property alias camera: videoSourceSelect.selectedCamera
     property alias screenCapture: videoSourceSelect.selectedScreenCapture
+    property alias windowCapture: videoSourceSelect.selectedWindowCapture
 
     spacing: Style.interSpacing * Style.ratio
 
diff --git a/examples/multimedia/video/recorder/VideoSourceSelect.qml b/examples/multimedia/video/recorder/VideoSourceSelect.qml
index f6aae4cd1..f51275f29 100644
--- a/examples/multimedia/video/recorder/VideoSourceSelect.qml
+++ b/examples/multimedia/video/recorder/VideoSourceSelect.qml
@@ -10,11 +10,25 @@ Row {
     height: Style.height
     property Camera selectedCamera: cameraAvailable ? camera : null
     property ScreenCapture selectedScreenCapture: screenAvailable ? screenCapture : null
-    property bool cameraAvailable: (comboBox.currentValue.type === 'camera') && cameraSwitch.checked
-    property bool screenAvailable: (comboBox.currentValue.type === 'screen') && cameraSwitch.checked
+    property WindowCapture selectedWindowCapture: windowAvailable ? windowCapture : null
+
+    property bool sourceAvailable: typeof comboBox.currentValue !== 'undefined' &&
+                                   comboBox.currentValue.type !== 'toggler' &&
+                                   videoSourceSwitch.checked
+
+    property bool cameraAvailable: sourceAvailable && comboBox.currentValue.type === 'camera'
+    property bool screenAvailable: sourceAvailable && comboBox.currentValue.type === 'screen'
+    property bool windowAvailable: sourceAvailable && comboBox.currentValue.type === 'window'
+
     Component.onCompleted: {
         videoSourceModel.populate()
-        comboBox.currentIndex = 0
+
+        for (var i = 0; i < videoSourceModel.count; i++) {
+            if (videoSourceModel.get(i).value.type !== 'toggler') {
+                comboBox.currentIndex = i
+                break
+            }
+        }
     }
 
     Camera {
@@ -27,29 +41,58 @@ Row {
         active: screenAvailable
     }
 
+    WindowCapture {
+        id: windowCapture
+        active: windowAvailable
+    }
+
     MediaDevices { id: mediaDevices }
 
     Switch {
-        id: cameraSwitch
+        id: videoSourceSwitch
         anchors.verticalCenter: parent.verticalCenter
         checked: true
     }
 
     ListModel {
         id: videoSourceModel
-        property var cameras: mediaDevices.videoInputs
-        property var screens: Application.screens
+        property var enabledSources: {
+            'camera': true,
+            'screen': true,
+            'window': false
+        }
+
+        function toggleEnabledSource(type) {
+            enabledSources[type] = !enabledSources[type]
+            populate()
+        }
+
+        function appendItem(text, value) {
+            append({ text: text, value: value})
+        }
+
+        function appendToggler(name, sourceType) {
+            appendItem((enabledSources[sourceType] ? "- Hide " : "+ Show ") + name,
+                       { type: 'toggler', 'sourceType': sourceType })
+        }
 
         function populate() {
-            videoSourceModel.clear()
+            clear()
+
+            appendToggler('Cameras', 'camera')
+            if (enabledSources['camera'])
+                for (var camera of mediaDevices.videoInputs)
+                    appendItem(camera.description, { type: 'camera', camera: camera })
 
-            for (var camera of cameras)
-                videoSourceModel.append({ text: camera.description, value:
-                                        { type: 'camera', camera: camera } })
+            appendToggler('Screens', 'screen')
+            if (enabledSources['screen'])
+                for (var screen of Application.screens)
+                    appendItem(screen.name, { type: 'screen', screen: screen })
 
-            for (var screen of screens)
-                videoSourceModel.append({ text: screen.name,
-                                          value: { type: 'screen', screen: screen }})
+            appendToggler('Windows', 'window')
+            if (enabledSources['window'])
+                for (var window of windowCapture.capturableWindows())
+                    appendItem(window.description, { type: 'window', window: window })
         }
     }
 
@@ -59,15 +102,52 @@ Row {
         height: Style.height
         background: StyleRectangle { anchors.fill: parent }
         model: videoSourceModel
-        displayText: typeof currentValue === 'undefined' ? "Unavailable" : currentText
+        displayText: typeof currentValue === 'undefined' ||
+                     currentValue.type === 'toggler' ? "Unavailable" : currentText
         font.pointSize: Style.fontSize
         textRole: "text"
         valueRole: "value"
         onCurrentValueChanged: {
+            if (typeof currentValue === 'undefined')
+                return
             if (currentValue.type === 'screen')
                 screenCapture.screen = currentValue.screen
             else if (currentValue.type === 'camera')
                 camera.cameraDevice = currentValue.camera
+            else if (currentValue.type === 'window')
+                windowCapture.window = currentValue.window
+            else if (currentValue.type === 'toggler')
+                model.toggleEnabledSource(currentValue.sourceType)
         }
+
+        delegate: ItemDelegate {
+            property bool isToggler: value.type === 'toggler'
+            text: model[comboBox.textRole]
+            width: comboBox.width
+            height: comboBox.height
+            highlighted: comboBox.highlightedIndex === index && !isToggler
+            font.italic: isToggler
+            font.underline: isToggler
+            font.bold: comboBox.currentIndex === index && !isToggler ||
+                       isToggler && comboBox.highlightedIndex === index
+            palette.text: isToggler ? 'blue' : comboBox.palette.text
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    if (isToggler)
+                        videoSourceModel.toggleEnabledSource(value.sourceType)
+                    else {
+                        comboBox.currentIndex = index
+                        comboBox.popup.close()
+                    }
+                }
+            }
+
+            required property var value
+            required property int index
+            required property var model
+        }
+
     }
 }
diff --git a/examples/multimedia/video/recorder/main.qml b/examples/multimedia/video/recorder/main.qml
index b2d3b1ec2..c7812eaa2 100644
--- a/examples/multimedia/video/recorder/main.qml
+++ b/examples/multimedia/video/recorder/main.qml
@@ -36,6 +36,7 @@ Window {
         audioInput: controls.audioInput
         camera: controls.camera
         screenCapture: controls.screenCapture
+        windowCapture: controls.windowCapture
         videoOutput: videoOutput
     }