update overlay,add android to android actions

lib/models/chat_model.dart

@@ -2,8 +2,8 @@ import 'dart:convert';
 
 import 'package:dash_chat/dash_chat.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hbb/pages/chat_page.dart';
 
+import '../widgets/overlay.dart';
 import 'model.dart';
 
 class ChatModel with ChangeNotifier {
@@ -47,7 +47,7 @@ class ChatModel with ChangeNotifier {
   receive(int id, String text) {
     if (text.isEmpty) return;
     // first message show overlay icon
-    if (iconOverlayEntry == null) {
+    if (chatIconOverlayEntry == null) {
       showChatIconOverlay();
     }
     late final chatUser;

lib/models/model.dart

@@ -13,6 +13,7 @@ import 'package:tuple/tuple.dart';
 import 'dart:async';
 import '../common.dart';
 import '../widgets/dialog.dart';
+import '../widgets/overlay.dart';
 import 'native_model.dart' if (dart.library.html) 'web_model.dart';
 
 typedef HandleMsgBox = void Function(Map<String, dynamic> evt, String id);
@@ -26,20 +27,25 @@ class FfiModel with ChangeNotifier {
   final _permissions = Map<String, bool>();
   bool? _secure;
   bool? _direct;
+  bool _touchMode = false;
   Timer? _timer;
   var _reconnects = 1;
 
-  get permissions => _permissions;
+  Map<String, bool> get permissions => _permissions;
 
-  get display => _display;
+  Display get display => _display;
 
-  get secure => _secure;
+  bool? get secure => _secure;
 
-  get direct => _direct;
+  bool? get direct => _direct;
 
-  get pi => _pi;
+  PeerInfo get pi => _pi;
 
-  get inputBlocked => _inputBlocked;
+  bool get inputBlocked => _inputBlocked;
+
+  bool get touchMode => _touchMode;
+
+  bool get isPeerAndroid => _pi.platform == "Android";
 
   set inputBlocked(v) {
     _inputBlocked = v;
@@ -54,6 +60,13 @@ class FfiModel with ChangeNotifier {
     await PlatformFFI.init();
   }
 
+  void toggleTouchMode() {
+    if (!isPeerAndroid) {
+      _touchMode = !_touchMode;
+      notifyListeners();
+    }
+  }
+
   void updatePermission(Map<String, dynamic> evt) {
     evt.forEach((k, v) {
       if (k == 'name') return;
@@ -229,6 +242,17 @@ class FfiModel with ChangeNotifier {
     _pi.sasEnabled = evt['sas_enabled'] == "true";
     _pi.currentDisplay = int.parse(evt['current_display']);
 
+    if (isPeerAndroid) {
+      _touchMode = true;
+      FFI.setByName('peer_option', '{"name": "view-style", "value": "shrink"}');
+      FFI.canvasModel.updateViewStyle();
+      if (FFI.ffiModel.permissions['keyboard'] != false) {
+        showMobileActionsOverlay();
+      }
+    } else {
+      _touchMode = FFI.getByName('peer_option', "touch-mode") != '';
+    }
+
     if (evt['is_file_transfer'] == "true") {
       FFI.fileModel.onReady();
     } else {

lib/pages/chat_page.dart

@@ -1,5 +1,4 @@
 import 'package:dash_chat/dash_chat.dart';
-import 'package:draggable_float_widget/draggable_float_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hbb/common.dart';
 import 'package:flutter_hbb/models/chat_model.dart';
@@ -7,9 +6,6 @@ import 'package:provider/provider.dart';
 import '../models/model.dart';
 import 'home_page.dart';
 
-OverlayEntry? iconOverlayEntry;
-OverlayEntry? windowOverlayEntry;
-
 ChatPage chatPage = ChatPage();
 
 class ChatPage extends StatelessWidget implements PageShape {
@@ -83,225 +79,3 @@ class ChatPage extends StatelessWidget implements PageShape {
             })));
   }
 }
-
-showChatIconOverlay({Offset offset = const Offset(200, 50)}) {
-  if (iconOverlayEntry != null) {
-    iconOverlayEntry!.remove();
-  }
-  if (globalKey.currentState == null || globalKey.currentState!.overlay == null)
-    return;
-  final globalOverlayState = globalKey.currentState!.overlay!;
-
-  final overlay = OverlayEntry(builder: (context) {
-    return DraggableFloatWidget(
-        config: DraggableFloatWidgetBaseConfig(
-          initPositionYInTop: false,
-          initPositionYMarginBorder: 100,
-          borderTopContainTopBar: true,
-        ),
-        child: FloatingActionButton(
-            onPressed: () {
-              if (windowOverlayEntry == null) {
-                showChatWindowOverlay();
-              } else {
-                hideChatWindowOverlay();
-              }
-            },
-            child: Icon(Icons.message)));
-  });
-  globalOverlayState.insert(overlay);
-  iconOverlayEntry = overlay;
-  debugPrint("created");
-}
-
-hideChatIconOverlay() {
-  if (iconOverlayEntry != null) {
-    iconOverlayEntry!.remove();
-    iconOverlayEntry = null;
-  }
-}
-
-final FocusNode _focusNode = FocusNode();
-
-showChatWindowOverlay() {
-  if (windowOverlayEntry != null) return;
-  if (globalKey.currentState == null || globalKey.currentState!.overlay == null)
-    return;
-  final globalOverlayState = globalKey.currentState!.overlay!;
-
-  final overlay = OverlayEntry(builder: (context) {
-    return ChatWindowOverlay();
-  });
-  _focusNode.requestFocus();
-  globalOverlayState.insert(overlay);
-  windowOverlayEntry = overlay;
-  debugPrint("chatEntry created");
-}
-
-hideChatWindowOverlay() {
-  if (windowOverlayEntry != null) {
-    windowOverlayEntry!.remove();
-    windowOverlayEntry = null;
-    return;
-  }
-}
-
-toggleChatOverlay() {
-  if (iconOverlayEntry == null || windowOverlayEntry == null) {
-    FFI.invokeMethod("enable_soft_keyboard", true);
-    showChatIconOverlay();
-    showChatWindowOverlay();
-  } else {
-    hideChatIconOverlay();
-    hideChatWindowOverlay();
-  }
-}
-
-class ChatWindowOverlay extends StatefulWidget {
-  final double windowWidth = 250;
-  final double windowHeight = 350;
-
-  @override
-  State<StatefulWidget> createState() => _ChatWindowOverlayState();
-}
-
-class _ChatWindowOverlayState extends State<ChatWindowOverlay> {
-  Offset _o = Offset(20, 80);
-  bool _keyboardVisible = false;
-  double _saveHeight = 0;
-  double _lastBottomHeight = 0;
-
-  changeOffset(Offset offset) {
-    final size = MediaQuery.of(context).size;
-    debugPrint("parent size:$size");
-    double x = 0;
-    double y = 0;
-
-    if (_o.dx + offset.dx + widget.windowWidth > size.width) {
-      x = size.width - widget.windowWidth;
-    } else if (_o.dx + offset.dx < 0) {
-      x = 0;
-    } else {
-      x = _o.dx + offset.dx;
-    }
-
-    if (_o.dy + offset.dy + widget.windowHeight > size.height) {
-      y = size.height - widget.windowHeight;
-    } else if (_o.dy + offset.dy < 0) {
-      y = 0;
-    } else {
-      y = _o.dy + offset.dy;
-    }
-    setState(() {
-      _o = Offset(x, y);
-    });
-  }
-
-  checkScreenSize() {}
-
-  checkKeyboard() {
-    final bottomHeight = MediaQuery.of(context).viewInsets.bottom;
-    final currentVisible = bottomHeight != 0;
-
-    debugPrint(bottomHeight.toString() + currentVisible.toString());
-    // save
-    if (!_keyboardVisible && currentVisible) {
-      _saveHeight = _o.dy;
-      debugPrint("on save $_saveHeight");
-    }
-
-    // reset
-    if (_lastBottomHeight > 0 && bottomHeight == 0) {
-      debugPrint("on reset");
-      _o = Offset(_o.dx, _saveHeight);
-    }
-
-    // onKeyboardVisible
-    if (_keyboardVisible && currentVisible) {
-      final sumHeight = bottomHeight + widget.windowHeight;
-      final contextHeight = MediaQuery.of(context).size.height;
-      debugPrint(
-          "prepare update sumHeight:$sumHeight,contextHeight:$contextHeight");
-      if (sumHeight + _o.dy > contextHeight) {
-        final y = contextHeight - sumHeight;
-        debugPrint("on update");
-        _o = Offset(_o.dx, y);
-      }
-    }
-
-    _keyboardVisible = currentVisible;
-    _lastBottomHeight = bottomHeight;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    checkKeyboard();
-    checkScreenSize();
-    return Positioned(
-        top: _o.dy,
-        left: _o.dx,
-        width: widget.windowWidth,
-        height: widget.windowHeight,
-        child: isIOS
-            ? chatPage
-            : Scaffold(
-                resizeToAvoidBottomInset: false,
-                appBar: CustomAppBar(
-                  onPanUpdate: (d) => changeOffset(d.delta),
-                  appBar: Container(
-                    color: MyTheme.accent50,
-                    height: 50,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        Padding(
-                            padding: EdgeInsets.symmetric(horizontal: 15),
-                            child: Text(
-                              translate("Chat"),
-                              style: TextStyle(
-                                  color: Colors.white,
-                                  fontFamily: 'WorkSans',
-                                  fontWeight: FontWeight.bold,
-                                  fontSize: 20),
-                            )),
-                        Row(
-                          crossAxisAlignment: CrossAxisAlignment.center,
-                          children: [
-                            IconButton(
-                                onPressed: () {
-                                  hideChatWindowOverlay();
-                                },
-                                icon: Icon(Icons.keyboard_arrow_down)),
-                            IconButton(
-                                onPressed: () {
-                                  hideChatWindowOverlay();
-                                  hideChatIconOverlay();
-                                },
-                                icon: Icon(Icons.close))
-                          ],
-                        )
-                      ],
-                    ),
-                  ),
-                ),
-                body: chatPage,
-              ));
-  }
-}
-
-class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
-  final GestureDragUpdateCallback onPanUpdate;
-  final Widget appBar;
-
-  const CustomAppBar(
-      {Key? key, required this.onPanUpdate, required this.appBar})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(onPanUpdate: onPanUpdate, child: appBar);
-  }
-
-  @override
-  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
-}

lib/pages/home_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter_hbb/pages/chat_page.dart';
 import 'package:flutter_hbb/pages/server_page.dart';
 import 'package:flutter_hbb/pages/settings_page.dart';
 import '../common.dart';
+import '../widgets/overlay.dart';
 import 'connection_page.dart';
 
 abstract class PageShape extends Widget {

lib/pages/remote_page.dart

@@ -12,7 +12,7 @@ import '../common.dart';
 import '../widgets/gestures.dart';
 import '../models/model.dart';
 import '../widgets/dialog.dart';
-import 'chat_page.dart';
+import '../widgets/overlay.dart';
 
 final initText = '\1' * 1024;
 
@@ -38,7 +38,6 @@ class _RemotePageState extends State<RemotePage> {
   final FocusNode _mobileFocusNode = FocusNode();
   final FocusNode _physicalFocusNode = FocusNode();
   var _showEdit = false;
-  var _touchMode = false;
   var _isPhysicalKeyboard = false;
 
   @override
@@ -52,13 +51,13 @@ class _RemotePageState extends State<RemotePage> {
           Timer.periodic(Duration(milliseconds: 30), (timer) => interval());
     });
     Wakelock.enable();
-    _touchMode = FFI.getByName('peer_option', "touch-mode") != '';
     _physicalFocusNode.requestFocus();
     FFI.listenToMouse(true);
   }
 
   @override
   void dispose() {
+    hideMobileActionsOverlay();
     FFI.listenToMouse(false);
     FFI.invokeMethod("enable_soft_keyboard", true);
     _mobileFocusNode.dispose();
@@ -91,7 +90,9 @@ class _RemotePageState extends State<RemotePage> {
         if (v < 100) {
           SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
               overlays: []);
-          FFI.invokeMethod("enable_soft_keyboard", false);
+          if (chatWindowOverlayEntry == null) {
+            FFI.invokeMethod("enable_soft_keyboard", false);
+          }
         }
       });
     }
@@ -243,14 +244,14 @@ class _RemotePageState extends State<RemotePage> {
                           }
                         });
                       }),
-              bottomNavigationBar:
+              bottomNavigationBar: _showBar && pi.displays.length > 0
-                  _showBar && pi.displays != null ? getBottomAppBar() : null,
+                  ? getBottomAppBar(keyboard)
+                  : null,
               body: Overlay(
                 initialEntries: [
                   OverlayEntry(builder: (context) {
                     return Container(
                         color: Colors.black,
-                        // child: getRawPointerAndKeyBody(keyboard));
                         child: isDesktop
                             ? getBodyForDesktopWithListener(keyboard)
                             : SafeArea(
@@ -367,7 +368,7 @@ class _RemotePageState extends State<RemotePage> {
                     child: child))));
   }
 
-  Widget getBottomAppBar() {
+  Widget getBottomAppBar(bool keyboard) {
     return BottomAppBar(
       elevation: 10,
       color: MyTheme.accent,
@@ -402,12 +403,27 @@ class _RemotePageState extends State<RemotePage> {
                               color: Colors.white,
                               icon: Icon(Icons.keyboard),
                               onPressed: openKeyboard),
-                          IconButton(
+                          FFI.ffiModel.isPeerAndroid
-                            color: Colors.white,
+                              ? (keyboard
-                            icon: Icon(
+                                  ? IconButton(
-                                _touchMode ? Icons.touch_app : Icons.mouse),
+                                      color: Colors.white,
-                            onPressed: changeTouchMode,
+                                      icon: Icon(Icons.build),
-                          )
+                                      onPressed: () {
+                                        if (mobileActionsOverlayEntry == null) {
+                                          showMobileActionsOverlay();
+                                        } else {
+                                          hideMobileActionsOverlay();
+                                        }
+                                      },
+                                    )
+                                  : SizedBox.shrink())
+                              : IconButton(
+                                  color: Colors.white,
+                                  icon: Icon(FFI.ffiModel.touchMode
+                                      ? Icons.touch_app
+                                      : Icons.mouse),
+                                  onPressed: changeTouchMode,
+                                )
                         ]) +
                   (isWeb
                       ? []
@@ -454,10 +470,11 @@ class _RemotePageState extends State<RemotePage> {
   ///   HoldDrag -> left drag
 
   Widget getBodyForMobileWithGesture() {
+    final touchMode = FFI.ffiModel.touchMode;
     return getMixinGestureDetector(
         child: getBodyForMobile(),
         onTapUp: (d) {
-          if (_touchMode) {
+          if (touchMode) {
             FFI.cursorModel.touch(
                 d.localPosition.dx, d.localPosition.dy, MouseButtons.left);
           } else {
@@ -465,7 +482,7 @@ class _RemotePageState extends State<RemotePage> {
           }
         },
         onDoubleTapDown: (d) {
-          if (_touchMode) {
+          if (touchMode) {
             FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy);
           }
         },
@@ -474,7 +491,7 @@ class _RemotePageState extends State<RemotePage> {
           FFI.tap(MouseButtons.left);
         },
         onLongPressDown: (d) {
-          if (_touchMode) {
+          if (touchMode) {
             FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy);
           }
         },
@@ -482,36 +499,36 @@ class _RemotePageState extends State<RemotePage> {
           FFI.tap(MouseButtons.right);
         },
         onDoubleFinerTap: (d) {
-          if (!_touchMode) {
+          if (!touchMode) {
             FFI.tap(MouseButtons.right);
           }
         },
         onHoldDragStart: (d) {
-          if (!_touchMode) {
+          if (!touchMode) {
             FFI.sendMouse('down', MouseButtons.left);
           }
         },
         onHoldDragUpdate: (d) {
-          if (!_touchMode) {
+          if (!touchMode) {
-            FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, _touchMode);
+            FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, touchMode);
           }
         },
         onHoldDragEnd: (_) {
-          if (!_touchMode) {
+          if (!touchMode) {
             FFI.sendMouse('up', MouseButtons.left);
           }
         },
         onOneFingerPanStart: (d) {
-          if (_touchMode) {
+          if (touchMode) {
             FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy);
             FFI.sendMouse('down', MouseButtons.left);
           }
         },
         onOneFingerPanUpdate: (d) {
-          FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, _touchMode);
+          FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, touchMode);
         },
         onOneFingerPanEnd: (d) {
-          if (_touchMode) {
+          if (touchMode) {
             FFI.sendMouse('up', MouseButtons.left);
           }
         },
@@ -689,10 +706,10 @@ class _RemotePageState extends State<RemotePage> {
               return SingleChildScrollView(
                   padding: EdgeInsets.symmetric(vertical: 10),
                   child: GestureHelp(
-                      touchMode: _touchMode,
+                      touchMode: FFI.ffiModel.touchMode,
                       onTouchModeChange: (t) {
-                        setState(() => _touchMode = t);
+                        FFI.ffiModel.toggleTouchMode();
-                        final v = _touchMode ? 'Y' : '';
+                        final v = FFI.ffiModel.touchMode ? 'Y' : '';
                         FFI.setByName('peer_option',
                             '{"name": "touch-mode", "value": "$v"}');
                       }));

lib/pages/server_page.dart

@@ -319,22 +319,27 @@ class ConnectionManager extends StatelessWidget {
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        clientInfo(entry.value),
+                        Expanded(child: clientInfo(entry.value)),
-                        entry.value.isFileTransfer || !entry.value.authorized
+                        Expanded(
-                            ? SizedBox.shrink()
+                            flex: -1,
-                            : IconButton(
+                            child: entry.value.isFileTransfer ||
-                                onPressed: () {
+                                    !entry.value.authorized
-                                  FFI.chatModel.changeCurrentID(entry.value.id);
+                                ? SizedBox.shrink()
-                                  final bar = navigationBarKey.currentWidget;
+                                : IconButton(
-                                  if (bar != null) {
+                                    onPressed: () {
-                                    bar as BottomNavigationBar;
+                                      FFI.chatModel
-                                    bar.onTap!(1);
+                                          .changeCurrentID(entry.value.id);
-                                  }
+                                      final bar =
-                                },
+                                          navigationBarKey.currentWidget;
-                                icon: Icon(
+                                      if (bar != null) {
-                                  Icons.chat,
+                                        bar as BottomNavigationBar;
-                                  color: MyTheme.accent80,
+                                        bar.onTap!(1);
-                                ))
+                                      }
+                                    },
+                                    icon: Icon(
+                                      Icons.chat,
+                                      color: MyTheme.accent80,
+                                    )))
                       ],
                     ),
                     entry.value.authorized
@@ -432,19 +437,24 @@ Widget clientInfo(Client client) {
       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
         Row(
           children: [
-            CircleAvatar(
+            Expanded(
-                child: Text(client.name[0]), backgroundColor: MyTheme.border),
+                flex: -1,
-            SizedBox(width: 12),
+                child: Padding(
-            Column(
+                    padding: EdgeInsets.only(right: 12),
-                crossAxisAlignment: CrossAxisAlignment.start,
+                    child: CircleAvatar(
-                mainAxisAlignment: MainAxisAlignment.center,
+                        child: Text(client.name[0]),
-                children: [
+                        backgroundColor: MyTheme.border))),
+            Expanded(
+                child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
                   Text(client.name,
-                      style: TextStyle(color: MyTheme.idColor, fontSize: 20)),
+                      style: TextStyle(color: MyTheme.idColor, fontSize: 18)),
                   SizedBox(width: 8),
                   Text(client.peerId,
                       style: TextStyle(color: MyTheme.idColor, fontSize: 10))
-                ])
+                ]))
           ],
         ),
       ]));