Fix capture view in recorder example

Once the capture view had played back a video, it would never move the
video output back to the camera, rendering the app unusable for recording
until restarted.

Fix this by giving the player its own video output, and properly hiding it
when not in use.

Pick-to: 6.2 6.2.0
Change-Id: I19bc88b0c6a8bf20dd4d3846a5c843d11ee7f8cb
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>

2 files changed, 22 insertions, 19 deletions

diff --git a/examples/multimedia/video/recorder/Playback.qml b/examples/multimedia/video/recorder/Playback.qml
index 9ae49d4d3..fdcfd1723 100644
--- a/examples/multimedia/video/recorder/Playback.qml
+++ b/examples/multimedia/video/recorder/Playback.qml
@@ -55,31 +55,36 @@ import QtQuick.Controls
 Item {
     id: root
 
-    required property VideoOutput videoOutput
     property bool active: false
+    property bool playing: false
+    visible: active && playing
 
     function playUrl(url) {
-        root.active = true
-        if (!videoOutput) {
-            console.log("videooutput is null")
-        }
-
-        mediaPlayer.videoOutput = videoOutput
-        mediaPlayer.audioOutput = audioOutput
+        playing = true
         mediaPlayer.source = url
         mediaPlayer.play()
     }
 
     function stop() {
+        playing = false
         mediaPlayer.stop()
-        mediaPlayer.videoOutput = null
-        mediaPlayer.audioOutput = null
-        root.active = false
     }
 
-    AudioOutput { id: audioOutput }
+    onActiveChanged: function() {
+        if (!active)
+            stop();
+    }
 
-    MediaPlayer { id: mediaPlayer }
+    VideoOutput {
+        anchors.fill: parent
+        id: videoOutput
+    }
+
+    MediaPlayer {
+        id: mediaPlayer
+        videoOutput: videoOutput
+        audioOutput: AudioOutput {}
+    }
 
     HoverHandler { id: hover }
 
diff --git a/examples/multimedia/video/recorder/main.qml b/examples/multimedia/video/recorder/main.qml
index 42158cf6e..6e32dfc80 100644
--- a/examples/multimedia/video/recorder/main.qml
+++ b/examples/multimedia/video/recorder/main.qml
@@ -68,6 +68,7 @@ Window {
     VideoOutput {
         id: videoOutput
         anchors.fill: parent
+        visible: !playback.playing
     }
 
     Popup {
@@ -81,7 +82,7 @@ Window {
         recorder: recorder
         audioInput: controls.audioInput
         camera: controls.camera
-        videoOutput: playback.active ? null : videoOutput
+        videoOutput: videoOutput
     }
 
     MediaRecorder {
@@ -100,13 +101,10 @@ Window {
     Playback {
         id: playback
         anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            bottom: controls.capturesVisible ? mediaListFrame.top : controlsFrame.top
+            fill: parent
             margins: 50
         }
-        videoOutput: videoOutput
+        active: controls.capturesVisible
     }
 
     Frame {