Tidy up frame rate display in video examples

* Use a Column element to position QML and video frame rate counters.
* When using small-screen layouts, hide frame rate counters when dialogs
  or menus are displayed.
* Do not display instantaneous frame rate.  If changes in this rate
  trigger a repaint, then the rate itself is changed.  If the repaint
  occurs in less time than the QElapsedTimer resolution, the displayed
  instantaneous rate is always zero.
* Add a label, so it is clear which is the QML repaint rate, and which
  is the video frame rate.

Change-Id: Ie58ab162ab44bd7f1c4b297eed929b9baa73552c
Reviewed-by: Jonas Rabbe <jonas.rabbe@nokia.com>

examples/video/qmlvideo/qml/qmlvideo/main.qml

@@ -69,16 +69,27 @@ Rectangle {
 
     Loader {
         id: performanceLoader
+
+        Connections {
+            target: inner
+            onVisibleChanged:
+                if (performanceLoader.item)
+                    performanceLoader.item.enabled = !inner.visible
+            ignoreUnknownSignals: true
+        }
+
         function init() {
             console.log("[qmlvideo] performanceLoader.init logging " + root.perfMonitorsLogging + " visible " + root.perfMonitorsVisible)
             var enabled = root.perfMonitorsLogging || root.perfMonitorsVisible
             source = enabled ? "../performancemonitor/PerformanceItem.qml" : ""
         }
+
         onLoaded: {
             item.parent = root
             item.anchors.fill = root
             item.logging = root.perfMonitorsLogging
             item.displayed = root.perfMonitorsVisible
+            item.enabled = false
             item.init()
         }
     }