add mobile quality monitor

flutter/lib/models/model.dart

@@ -162,6 +162,8 @@ class FfiModel with ChangeNotifier {
         FFI.serverModel.onClientAuthorized(evt);
       } else if (name == 'on_client_remove') {
         FFI.serverModel.onClientRemove(evt);
+      } else if (name == 'update_quality_status') {
+        FFI.qualityMonitorModel.updateQualityStatus(evt);
       }
     };
     PlatformFFI.setEventCallback(cb);
@@ -655,6 +657,44 @@ class CursorModel with ChangeNotifier {
   }
 }
 
+class QualityMonitorData {
+  String? speed;
+  String? fps;
+  String? delay;
+  String? targetBitrate;
+  String? codecFormat;
+}
+
+class QualityMonitorModel with ChangeNotifier {
+  var _show = FFI.getByName('toggle_option', 'show-quality-monitor') == 'true';
+  final _data = QualityMonitorData();
+
+  bool get show => _show;
+  QualityMonitorData get data => _data;
+
+  checkShowQualityMonitor() {
+    final show =
+        FFI.getByName('toggle_option', 'show-quality-monitor') == 'true';
+    if (_show != show) {
+      _show = show;
+      notifyListeners();
+    }
+  }
+
+  updateQualityStatus(Map<String, dynamic> evt) {
+    try {
+      if ((evt["speed"] as String).isNotEmpty) _data.speed = evt["speed"];
+      if ((evt["fps"] as String).isNotEmpty) _data.fps = evt["fps"];
+      if ((evt["delay"] as String).isNotEmpty) _data.delay = evt["delay"];
+      if ((evt["target_bitrate"] as String).isNotEmpty)
+        _data.targetBitrate = evt["target_bitrate"];
+      if ((evt["codec_format"] as String).isNotEmpty)
+        _data.codecFormat = evt["codec_format"];
+      notifyListeners();
+    } catch (e) {}
+  }
+}
+
 enum MouseButtons { left, right, wheel }
 
 extension ToString on MouseButtons {
@@ -684,6 +724,7 @@ class FFI {
   static final serverModel = ServerModel();
   static final chatModel = ChatModel();
   static final fileModel = FileModel();
+  static final qualityMonitorModel = QualityMonitorModel();
 
   static String getId() {
     return getByName('remote_id');

flutter/lib/pages/remote_page.dart

@@ -592,6 +592,7 @@ class _RemotePageState extends State<RemotePage> {
         child: Stack(children: [
           ImagePaint(),
           CursorPaint(),
+          QualityMonitor(),
           getHelpTools(),
           SizedBox(
             width: 0,
@@ -948,6 +949,47 @@ class ImagePainter extends CustomPainter {
   }
 }
 
+class QualityMonitor extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => ChangeNotifierProvider.value(
+      value: FFI.qualityMonitorModel,
+      child: Consumer<QualityMonitorModel>(
+          builder: (context, qualityMonitorModel, child) => Positioned(
+              top: 10,
+              right: 10,
+              child: qualityMonitorModel.show
+                  ? Container(
+                      padding: EdgeInsets.all(8),
+                      color: MyTheme.canvasColor.withAlpha(120),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            "Speed: ${qualityMonitorModel.data.speed}",
+                            style: TextStyle(color: MyTheme.grayBg),
+                          ),
+                          Text(
+                            "FPS: ${qualityMonitorModel.data.fps}",
+                            style: TextStyle(color: MyTheme.grayBg),
+                          ),
+                          Text(
+                            "Delay: ${qualityMonitorModel.data.delay} ms",
+                            style: TextStyle(color: MyTheme.grayBg),
+                          ),
+                          Text(
+                            "Target Bitrate: ${qualityMonitorModel.data.targetBitrate}kb",
+                            style: TextStyle(color: MyTheme.grayBg),
+                          ),
+                          Text(
+                            "Codec: ${qualityMonitorModel.data.codecFormat}",
+                            style: TextStyle(color: MyTheme.grayBg),
+                          ),
+                        ],
+                      ),
+                    )
+                  : SizedBox.shrink())));
+}
+
 CheckboxListTile getToggle(
     void Function(void Function()) setState, option, name) {
   return CheckboxListTile(
@@ -956,6 +998,9 @@ CheckboxListTile getToggle(
         setState(() {
           FFI.setByName('toggle_option', option);
         });
+        if (option == "show-quality-monitor") {
+          FFI.qualityMonitorModel.checkShowQualityMonitor();
+        }
       },
       dense: true,
       title: Text(translate(name)));