perf: ⚡️ Optimize the stability of options that need to dynamically o…

…btain parameters in preference settings
viarotel-org · Nov 5, 2024 · 39bbc98 · 39bbc98
1 parent 9800980
commit 39bbc98
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "1.25.4",
   "private": true,
-  "packageManager": "pnpm@9.4.0+sha1.9217c800d4ab947a7aee520242a7b70d64fc7638",
+  "packageManager": "pnpm@9.12.3",
   "description": "Scrcpy Powered by Electron",
   "author": "viarotel",
   "homepage": "https://github.com/viarotel-org/escrcpy",

diff --git a/...onents/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue b/...onents/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue
@@ -15,6 +15,7 @@
         v-bind="{
           collapseProps: { accordion: true },
           excludes: ['common'],
+          deviceScope: device.id,
         }"
       />
     </div>

diff --git a/src/components/Preference/components/PreferenceForm/components/SelectAudioCodec/index.vue b/src/components/Preference/components/PreferenceForm/components/SelectAudioCodec/index.vue
@@ -3,6 +3,7 @@
     v-bind="{ clearable: true, ...(data.props || {}) }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$scrcpy.getEncoders(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$scrcpy.getEncoders(deviceId)
 
       this.deviceOptions = res?.audio?.map((item) => {
         const value = `${item.decoder} & ${item.encoder}`

diff --git a/src/components/Preference/components/PreferenceForm/components/SelectDisplay/index.vue b/src/components/Preference/components/PreferenceForm/components/SelectDisplay/index.vue
@@ -6,6 +6,7 @@
     }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -18,6 +19,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$adb.display(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$adb.display(deviceId)
 
       this.deviceOptions
         = res?.map((item) => {

diff --git a/src/components/Preference/components/PreferenceForm/components/SelectVideoCodec/index.vue b/src/components/Preference/components/PreferenceForm/components/SelectVideoCodec/index.vue
@@ -3,6 +3,7 @@
     v-bind="{ clearable: true, ...(data.props || {}) }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$scrcpy.getEncoders(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$scrcpy.getEncoders(deviceId)
 
       this.deviceOptions = res?.video?.map((item) => {
         const value = `${item.decoder} & ${item.encoder}`

diff --git a/src/components/Preference/components/PreferenceForm/components/helper.js b/src/components/Preference/components/PreferenceForm/components/helper.js
@@ -0,0 +1,16 @@
+import { useDeviceStore } from '$/store/device/index.js'
+
+/**
+ * 获取设备ID
+ * @param {*} scope
+ * @returns
+ */
+export function getDeviceId(scope) {
+  let value = scope
+
+  if (value === 'global') {
+    value = useDeviceStore().list[0]?.id
+  }
+
+  return value
+}
diff --git a/src/store/preference/model/video/index.js b/src/store/preference/model/video/index.js
@@ -122,8 +122,6 @@ export default {
       placeholder: 'preferences.video.display.placeholder',
       options: [
         { label: '0', value: '0' },
-        { label: '1', value: '1' },
-        { label: '2', value: '2' },
       ],
       props: {
         filterable: true,