feat(Device): remove screen size input

src/components/Device.vue

@@ -21,7 +21,6 @@ import {
 } from "../invoke";
 import {
   NH4,
-  NP,
   NInput,
   NInputNumber,
   NButton,
@@ -30,7 +29,6 @@ import {
   NEmpty,
   NTooltip,
   NFlex,
-  NFormItem,
   NIcon,
   NSpin,
   NScrollbar,
@@ -42,7 +40,6 @@ import {
 } from "naive-ui";
 import { CloseCircle, InformationCircle, Refresh } from "@vicons/ionicons5";
 import { UnlistenFn, listen } from "@tauri-apps/api/event";
-import { Store } from "@tauri-apps/plugin-store";
 import { shutdown } from "../frontcommand/scrcpyMaskCmd";
 import { useGlobalStore } from "../store/global";
 import { useI18n } from "vue-i18n";
@@ -57,10 +54,9 @@ const port = ref(27183);
 const wireless_address = ref("");
 const ws_address = ref("");
 
-const localStore = new Store("store.bin");
-
 //#region listener
 let deviceWaitForMetadataTask: ((deviceName: string) => void) | null = null;
+let deviceWaitForScreenSizeTask: ((w: number, h: number) => void) | null = null;
 
 let unlisten: UnlistenFn | undefined;
 onMounted(async () => {
@@ -77,6 +73,15 @@ onMounted(async () => {
         case "ClipboardSetAck":
           console.log("ClipboardSetAck", payload.sequence);
           break;
+        case "DeviceRotation":
+          if (deviceWaitForScreenSizeTask) {
+            deviceWaitForScreenSizeTask(payload.width, payload.height);
+          } else {
+            store.screenSizeW = payload.width;
+            store.screenSizeH = payload.height;
+            message.info("设备旋转");
+          }
+          break;
         default:
           console.log("Unknown reply", payload);
           break;
@@ -216,24 +221,12 @@ async function deviceControl() {
     port.value = 27183;
   }
 
-  if (!(store.screenSizeW > 0) || !(store.screenSizeH > 0)) {
-    message.error(t("pages.Device.deviceControl.inputScreenSize"));
-    store.screenSizeW = 0;
-    store.screenSizeH = 0;
-    store.hideLoading();
-    return;
-  }
-
   if (store.controledDevice) {
     message.error(t("pages.Device.deviceControl.closeCurDevice"));
     store.hideLoading();
     return;
   }
 
-  localStore.set("screenSize", {
-    sizeW: store.screenSizeW,
-    sizeH: store.screenSizeH,
-  });
   message.info(t("pages.Device.deviceControl.controlInfo"));
 
   const device = devices.value[rowIndex];
@@ -263,11 +256,26 @@ async function deviceControl() {
       deviceName,
       deviceID: device.id,
     };
-    nextTick(() => {
-      deviceWaitForMetadataTask = null;
-      clearTimeout(id);
-      store.hideLoading();
-    });
+    deviceWaitForMetadataTask = null;
+    if (!deviceWaitForScreenSizeTask) {
+      nextTick(() => {
+        clearTimeout(id);
+        store.hideLoading();
+      });
+    }
+  };
+
+  // add cb for screen size
+  deviceWaitForScreenSizeTask = (w: number, h: number) => {
+    store.screenSizeW = w;
+    store.screenSizeH = h;
+    deviceWaitForScreenSizeTask = null;
+    if (!deviceWaitForMetadataTask) {
+      nextTick(() => {
+        clearTimeout(id);
+        store.hideLoading();
+      });
+    }
   };
 }
 
@@ -373,26 +381,6 @@ function closeWS() {
             $t("pages.Device.wsConnect")
           }}</NButton>
         </NInputGroup>
-        <NH4 prefix="bar">{{ $t("pages.Device.deviceSize.title") }}</NH4>
-        <NFlex justify="left" align="center">
-          <NFormItem :label="$t('pages.Device.deviceSize.width')">
-            <NInputNumber
-              v-model:value="store.screenSizeW"
-              :placeholder="$t('pages.Device.deviceSize.widthPlaceholder')"
-              :min="0"
-              :disabled="store.controledDevice !== null"
-            />
-          </NFormItem>
-          <NFormItem :label="$t('pages.Device.deviceSize.height')">
-            <NInputNumber
-              v-model:value="store.screenSizeH"
-              :placeholder="$t('pages.Device.deviceSize.heightPlaceholder')"
-              :min="0"
-              :disabled="store.controledDevice !== null"
-            />
-          </NFormItem>
-        </NFlex>
-        <NP>{{ $t("pages.Device.deviceSize.tip") }}</NP>
         <NH4 prefix="bar">{{ $t("pages.Device.controledDevice") }}</NH4>
         <div class="controled-device-list">
           <NEmpty

src/i18n/en-US.json

@@ -14,9 +14,8 @@
         "screen": "Get screen size"
       },
       "deviceControl": {
-        "inputScreenSize": "Please enter the screen size of the current control device correctly",
         "closeCurDevice": "Please close the current control device first",
-        "controlInfo": "The screen size has been saved and the control service is starting. Please keep the device screen on.",
+        "controlInfo": "The control service is starting. Please keep the device screen on.",
         "connectTimeout": "Device connection timeout"
       },
       "deviceGetScreenSize": "Device screen size: ",
@@ -25,14 +24,7 @@
       "wireless": "Wireless connection",
       "wirelessPlaceholder": "Wireless connection address",
       "connect": "Connect",
-      "deviceSize": {
-        "title": "Device screen size",
-        "width": "Width",
-        "widthPlaceholder": "Screen width",
-        "height": "Height",
-        "heightPlaceholder": "Screen height",
-        "tip": "Tip: Please enter the screen size of the current control device correctly. This is a necessary parameter to successfully send touch events."
-      },
+      "deviceSize": {},
       "controledDevice": "Controlled device",
       "availableDevice": "Available devices",
       "noControledDevice": "No Controled Device",

src/i18n/zh-CN.json

@@ -13,9 +13,8 @@
         "screen": "获取屏幕尺寸"
       },
       "deviceControl": {
-        "inputScreenSize": "请正确输入当前控制设备的屏幕尺寸",
         "closeCurDevice": "请先关闭当前控制设备",
-        "controlInfo": "屏幕尺寸已保存，正在启动控制服务，请保持设备亮屏",
+        "controlInfo": "正在启动控制服务，请保持设备亮屏",
         "connectTimeout": "设备连接超时"
       },
       "deviceGetScreenSize": "设备屏幕尺寸为:",
@@ -25,14 +24,7 @@
       "wireless": "无线连接",
       "wirelessPlaceholder": "无线连接地址",
       "connect": "连接",
-      "deviceSize": {
-        "title": "设备屏幕尺寸",
-        "width": "宽度",
-        "widthPlaceholder": "屏幕宽度",
-        "heightPlaceholder": "屏幕高度",
-        "height": "高度",
-        "tip": "提示：请正确输入当前控制设备的屏幕尺寸，这是成功发送触摸事件的必要参数"
-      },
+      "deviceSize": {},
       "controledDevice": "受控设备",
       "noControledDevice": "无受控设备",
       "availableDevice": "可用设备",

src/store/global.ts

@@ -71,9 +71,10 @@ export const useGlobalStore = defineStore("global", () => {
 
   const externalControlled = ref(false);
 
-  // persistent storage
   const screenSizeW: Ref<number> = ref(0);
   const screenSizeH: Ref<number> = ref(0);
+
+  // persistent storage
   const keyMappingConfigList: Ref<KeyMappingConfig[]> = ref([]);
   const curKeyMappingIndex = ref(0);
   const maskButton = ref({
@@ -84,14 +85,14 @@ export const useGlobalStore = defineStore("global", () => {
 
   return {
     // persistent storage
-    screenSizeW,
-    screenSizeH,
     keyMappingConfigList,
     curKeyMappingIndex,
     maskButton,
     checkUpdateAtStart,
     externalControlled,
     // in-memory storage
+    screenSizeW,
+    screenSizeH,
     showLoading,
     hideLoading,
     showLoadingRef,