title: QML Video element randomly disappears on Label text change
body: <p>I'm working on an app which is supposed to display a camera stream from a webcam. It's a single-page app which only shows a <code>Video</code> QML element showing the stream (which currently is a simple <code>.avi</code> file) and a <code>Label</code> element indicating the current connection state from an MQTT connection.</p>
  <p>Here's the code:</p>
  <pre><code>import QtQuick 2.15
  import QtQuick.Window 2.15
  import QtQuick.Controls 2.1
  import QtQuick.Layouts 1.1
  import QtMultimedia 5.12
  import MqttClient 1.0
  
  Window {
      width: 360
      height: 640
      visible: true
      title: qsTr(&quot;Doorbell&quot;)
  
      MqttClient {
          id: client
  
          // TODO
          property string _host: &quot;localhost&quot;
          property string _port: &quot;1883&quot;
          property string _topic: &quot;my/topic&quot;
  
          hostname: _host
          port: _port
  
          Component.onCompleted: {
              connectToHost()
          }
  
          onConnected: {
              subscribe(_topic)
          }
  
          onMessageReceived: {
              video.play()
          }
  
          Component.onDestruction: {
              disconnectFromHost()
          }
      }
  
      GridLayout {
          anchors.fill: parent
          anchors.margins: 10
          columns: 2
  
          Video {
              id: video
              objectName: &quot;vplayer&quot;
              width: parent.width
              height: 300
              Layout.columnSpan: 2
              autoPlay: false
              source: &quot;file:///path/to/my/test.avi&quot;
  
              onErrorChanged: {
                  console.log(&quot;error: &quot; + video.errorString)
              }
  
              MouseArea {
                  anchors.fill: parent
                  onClicked: {
                      video.muted = !video.muted
                  }
              }
  
              focus: true
  
              Image {
                  id: muteIndicator
                  source: &quot;mute_white.png&quot;
  
                  width: 64
                  height: width
  
                  visible: video.muted
  
                  anchors.centerIn: parent
              }
          }
  
          Label {
              function stateToString(value) {
                  if (value === 0)
                      return &quot;Disconnected&quot;
                  else if (value === 1)
                      return &quot;Connecting&quot;
                  else if (value === 2)
                      return &quot;Connected&quot;
                  else
                      return &quot;Unknown&quot;
              }
  
              Layout.columnSpan: 2
              Layout.fillWidth: true
  
              text: stateToString(client.state) + &quot;(&quot; + client.state + &quot;)&quot;
          }
      }
  }
  </code></pre>
  <p>Here's a screenshot:</p>
  <p><a href="https://i.stack.imgur.com/aN0yQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aN0yQ.png" alt="working screenshot" /></a></p>
  <p>Here's the clue:
  I tried removing the Label and replacing it with a simple rectangle indicator (red or green) to show if the connection is currently active.</p>
  <p>However, when replacing the <code>text</code> content of the <code>Label</code> element, the <code>Video</code> element completely disappears.</p>
  <p>What I've tried:</p>
  <ul>
  <li>removing the <code>stateToString(client.state) + &quot;(&quot; + client.state + &quot;)&quot;</code> part and replacing it with <code>text: &quot;Connected(2)&quot;</code></li>
  <li>replacing <code>stateToString(...</code> with an empty string (<code>text: &quot;&quot;</code>)</li>
  <li>replacing the content of <code>stateToString(...)</code> with <code>return &quot;Connected(2)&quot;</code></li>
  <li>and a lot of different more seemingly completely useless things</li>
  </ul>
  <p>Example code:</p>
  <pre><code>// ...
  
  Label {
      function stateToString(value) {
          if (value === 0)
              return &quot;Disconnected&quot;
          else if (value === 1)
              return &quot;Connecting&quot;
          else if (value === 2)
              return &quot;Connected&quot;
          else
              return &quot;Unknown&quot;
      }
  
      Layout.columnSpan: 2
      Layout.fillWidth: true
  
      text: &quot;Connected(2)&quot;
      //          enabled: client.state === MqttClient.Connected
  }
  
  // ...
  </code></pre>
  <p>Unless I set <code>text</code> <strong>to the exact value</strong> <code>stateToString(client.state) + &quot;(&quot; + client.state + &quot;)&quot;</code> or at least <code>stateToString(client.state)</code>, the <code>Video</code> element will <strong>always</strong> disappear in the QML view:</p>
  <p><a href="https://i.stack.imgur.com/n3g62.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3g62.png" alt="non-working example" /></a></p>
  <p>I have no idea of what might be the reason for this.</p>
  <p>Any help is greatly appreciated, thanks.</p>