feat: add landscape and portrait support on touchpad

ayonshafiul · Jul 15, 2024 · 6d9ec3b · 6d9ec3b
1 parent 1ba8c1c
commit 6d9ec3b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 42 deletions.
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">Peyara Remote Mouse</string>
+    <string name="app_name">Peyara</string>
 </resources>
diff --git a/components/LandscapeTouchpad.js b/components/LandscapeTouchpad.js
@@ -6,13 +6,16 @@ import {GestureDetector} from 'react-native-gesture-handler';
 import colors from '../assets/constants/colors';
 import {useNavigation} from '@react-navigation/native';
 import {useGlobalStore} from '../store/useGlobalStore';
+import RoundKey from './RoundKey';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 export default function LandscapeTouchpad({
   composed,
   scrollGesture,
   scrollWheelStyles,
   sendLeftClick,
   sendRightClick,
+  hideTopControlsAfterDelay,
 }) {
   const setShowBottomBar = useGlobalStore(state => state.setShowBottomBar);
 
@@ -47,6 +50,11 @@ export default function LandscapeTouchpad({
         <TouchableOpacity style={styles.clickBtn} onPress={sendLeftClick} />
         <TouchableOpacity style={styles.clickBtn} onPress={sendRightClick} />
       </View>
+      <RoundKey
+        containerStyle={styles.settings}
+        onPress={hideTopControlsAfterDelay}>
+        <MaterialIcons name={'settings'} size={24} color={colors.WHITE} />
+      </RoundKey>
     </>
   );
 }
@@ -101,23 +109,28 @@ const styles = StyleSheet.create({
   },
   clicksWrapper: {
     position: 'absolute',
-    top: 40,
+    top: 20,
     left: 0,
-    bottom: 40,
-    width: 38,
-
+    bottom: 20,
+    width: 24,
     justifyContent: 'space-between',
   },
   clickBtn: {
     height: '49.6%',
     borderRadius: 4,
     backgroundColor: colors.WHITE,
-    opacity: 0.05,
+    opacity: 0.1,
     justifyContent: 'center',
     alignItems: 'center',
   },
   clickBtnText: {
     fontFamily: 'Raleway-Thin',
     color: colors.WHITE,
   },
+  settings: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    opacity: 0.6,
+  },
 });
diff --git a/components/RoundKey.js b/components/RoundKey.js
@@ -1,9 +1,11 @@
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import React from 'react';
 
-export default function RoundKey({onPress = null, children}) {
+export default function RoundKey({onPress = null, children, containerStyle}) {
   return (
-    <TouchableOpacity onPress={onPress} style={styles.keysContainer}>
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.keysContainer, containerStyle]}>
       {children}
     </TouchableOpacity>
   );

diff --git a/screens/Touchpad.js b/screens/Touchpad.js
@@ -98,6 +98,7 @@ notifee.onBackgroundEvent(eventHandler);
 
 const DRAG_START_THRESHOLD_IN_MS = 200;
 const MAX_TRANSLATE_Y = 180;
+let hideControlsTimer;
 
 export default function Touchpad({navigation, route}) {
   const setShowBottomBar = useGlobalStore(state => state.setShowBottomBar);
@@ -109,6 +110,7 @@ export default function Touchpad({navigation, route}) {
   const responseRate = getResponseRateSettings();
   const isFocused = useIsFocused();
 
+  const [showTopControls, setShowTopControls] = useState(true);
   const [showRemoteStream, setShowRemoteStream] = useState(false);
   const [remoteStream, setRemoteStream] = useState(null);
 
@@ -139,6 +141,29 @@ export default function Touchpad({navigation, route}) {
   const isDraggingRef = useRef(false);
   const pendingLeftClick = useRef(false);
 
+  const hideTopControlsAfterDelay = () => {
+    setShowTopControls(true);
+    clearTimeout(hideControlsTimer);
+    hideControlsTimer = setTimeout(() => {
+      setShowTopControls(false);
+    }, 3000);
+  };
+
+  const setPortraitMode = () => {
+    clearTimeout(hideControlsTimer);
+    setShowRemoteStream(false);
+    setShowTopControls(true);
+    Orientation.lockToPortrait();
+    setShowBottomBar(true);
+  };
+
+  const setLandscapeMode = () => {
+    setShowRemoteStream(true);
+    Orientation.lockToLandscapeLeft();
+    hideTopControlsAfterDelay();
+    keyboardModalRef.current?.dismiss();
+  };
+
   useEffect(() => {
     (async function requestUserPermission() {
       const settings = await notifee.requestPermission();
@@ -248,9 +273,7 @@ export default function Touchpad({navigation, route}) {
 
       socket.on('stop-screen-share', () => {
         console.log('stop');
-        setShowRemoteStream(false);
-        Orientation.lockToPortrait();
-        setShowBottomBar(true);
+        setPortraitMode();
       });
 
       /// webrtc handlers
@@ -300,15 +323,12 @@ export default function Touchpad({navigation, route}) {
           console.log(event, ' event', peerConnection.connectionState);
           switch (peerConnection.connectionState) {
             case 'connected':
-              setShowRemoteStream(true);
-              Orientation.lockToLandscapeLeft();
+              setLandscapeMode();
               break;
             case 'closed':
             case 'failed':
             case 'disconnected':
-              setShowRemoteStream(false);
-              Orientation.lockToPortrait();
-              setShowBottomBar(true);
+              setPortraitMode();
               break;
           }
         });
@@ -333,10 +353,8 @@ export default function Touchpad({navigation, route}) {
     if (socket) {
       socket?.disconnect();
       peerConnection?.close();
-      setShowRemoteStream(false);
-      setShowBottomBar(true);
-      Orientation.lockToPortrait();
       keyboardModalRef?.current?.dismiss();
+      setPortraitMode();
     }
   };
   const openHelp = () => {
@@ -592,29 +610,43 @@ export default function Touchpad({navigation, route}) {
 
       {status === 'Connected' && (
         <>
-          <View style={styles.keysConatiner}>
-            <RoundKey onPress={focusToggle}>
-              <MaterialIcons
-                name="keyboard-hide"
-                size={24}
-                color={colors.WHITE}
-              />
-            </RoundKey>
-            <RoundKey onPress={showControls}>
-              <MaterialIcons
-                name="control-camera"
-                size={24}
-                color={colors.WHITE}
-              />
-            </RoundKey>
-
-            <RoundKey onPress={openHelp}>
-              <MaterialIcons name="help" size={24} color={colors.WHITE} />
-            </RoundKey>
-            <RoundKey onPress={disconnectSocket}>
-              <MaterialIcons name="close" size={24} color={colors.WHITE} />
-            </RoundKey>
-          </View>
+          {showTopControls && (
+            <View style={styles.keysConatiner}>
+              <RoundKey onPress={focusToggle}>
+                <MaterialIcons
+                  name="keyboard-hide"
+                  size={24}
+                  color={colors.WHITE}
+                />
+              </RoundKey>
+              <RoundKey onPress={showControls}>
+                <MaterialIcons
+                  name="control-camera"
+                  size={24}
+                  color={colors.WHITE}
+                />
+              </RoundKey>
+
+              <RoundKey
+                onPress={showRemoteStream ? setPortraitMode : setLandscapeMode}>
+                <MaterialIcons
+                  name={
+                    showRemoteStream
+                      ? 'stay-primary-portrait'
+                      : 'stay-primary-landscape'
+                  }
+                  size={24}
+                  color={colors.WHITE}
+                />
+              </RoundKey>
+              <RoundKey onPress={openHelp}>
+                <MaterialIcons name="help" size={24} color={colors.WHITE} />
+              </RoundKey>
+              <RoundKey onPress={disconnectSocket}>
+                <MaterialIcons name="close" size={24} color={colors.WHITE} />
+              </RoundKey>
+            </View>
+          )}
 
           {/* Hidden Input for Keyboard */}
           {showTextInput && (
@@ -675,6 +707,7 @@ export default function Touchpad({navigation, route}) {
               scrollWheelStyles={scrollWheelStyles}
               sendLeftClick={sendLeftClick}
               sendRightClick={sendRightClick}
+              hideTopControlsAfterDelay={hideTopControlsAfterDelay}
             />
           ) : (
             <PortraitTouchpad