Merge pull request #5486 from bluerobotics/pr-blink-record-btn

Make recording status more obvious

src/FlightDisplay/FlightDisplayView.qml

@@ -44,6 +44,7 @@ QGCView {
     property var    _rallyPointController:  _planMasterController.rallyPointController
     property var    _activeVehicle:         QGroundControl.multiVehicleManager.activeVehicle
     property var    _videoReceiver:         QGroundControl.videoManager.videoReceiver
+    property bool   _recordingVideo:        _videoReceiver && _videoReceiver.recording
     property bool   _mainIsMap:             QGroundControl.videoManager.hasVideo ? QGroundControl.loadBoolGlobalSetting(_mainIsMapKey,  true) : true
     property bool   _isPipVisible:          QGroundControl.videoManager.hasVideo ? QGroundControl.loadBoolGlobalSetting(_PIPVisibleKey, true) : false
     property real   _savedZoomLevel:        0
@@ -374,12 +375,22 @@ QGCView {
             visible:            _videoReceiver && _videoReceiver.videoRunning && QGroundControl.settingsManager.videoSettings.showRecControl.rawValue
             opacity:            0.75
 
+            readonly property string recordBtnBackground: "BackgroundName"
+
             Rectangle {
+                id:                 recordBtnBackground
                 anchors.top:        parent.top
                 anchors.bottom:     parent.bottom
                 width:              height
-                radius:             QGroundControl.videoManager && _videoReceiver && _videoReceiver.recording ? 0 : height
+                radius:             _recordingVideo ? 0 : height
                 color:              "red"
+
+                SequentialAnimation on visible {
+                    running:        _recordingVideo
+                    loops:          Animation.Infinite
+                    PropertyAnimation { to: false; duration: 1000 }
+                    PropertyAnimation { to: true;  duration: 1000 }
+                }
             }
 
             QGCColoredImage {
@@ -389,13 +400,24 @@ QGCView {
                 width:                      height * 0.625
                 sourceSize.width:           width
                 source:                     "/qmlimages/CameraIcon.svg"
+                visible:                    recordBtnBackground.visible
                 fillMode:                   Image.PreserveAspectFit
                 color:                      "white"
             }
 
             MouseArea {
                 anchors.fill:   parent
-                onClicked:      _videoReceiver && _videoReceiver.recording ? _videoReceiver.stopRecording() : _videoReceiver.startRecording()
+                onClicked: {
+                    if (_videoReceiver) {
+                        if (_recordingVideo) {
+                            _videoReceiver.stopRecording()
+                            // reset blinking animation
+                            recordBtnBackground.visible = true
+                        } else {
+                            _videoReceiver.startRecording()
+                        }
+                    }
+                }
             }
         }