perf: ♻️ Optimize OTG

src/components/Preference/__composables__/OTG/index.js

@@ -0,0 +1,31 @@
+import { watchEffect } from 'vue'
+
+export function useOTG(data) {
+  watchEffect(() => {
+    if (data.value['--hid-keyboard'] || data.value['--hid-mouse']) {
+      data.value['--otg'] = true
+    }
+    else {
+      data.value['--otg'] = false
+    }
+  })
+
+  watchEffect(() => {
+    if (!data.value['--otg']) {
+      data.value['--hid-keyboard'] = false
+      data.value['--hid-mouse'] = false
+    }
+  })
+
+  watchEffect(() => {
+    if (data.value['--hid-keyboard']) {
+      data.value['--hid-mouse'] = false
+    }
+  })
+
+  watchEffect(() => {
+    if (data.value['--hid-mouse']) {
+      data.value['--hid-keyboard'] = false
+    }
+  })
+}

src/components/Preference/index.vue

@@ -205,20 +205,27 @@
 
 <script>
 import { cloneDeep, debounce } from 'lodash-es'
+import { ref } from 'vue'
 import LanguageSelect from './LanguageSelect/index.vue'
-import { usePreferenceStore } from '@/store/index.js'
+import { useOTG } from './__composables__/OTG/index.js'
 import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
+import { usePreferenceStore } from '@/store/index.js'
 
 export default {
   components: {
     LanguageSelect,
   },
-  data() {
+  setup() {
     const preferenceStore = usePreferenceStore()
 
+    const preferenceData = ref(preferenceStore.data)
+    const deviceScope = ref(preferenceStore.deviceScope)
+
+    useOTG(preferenceData)
+
     return {
-      preferenceData: preferenceStore.data,
-      deviceScope: preferenceStore.deviceScope,
+      preferenceData,
+      deviceScope,
     }
   },
   computed: {

src/locales/languages/en_US.json

@@ -189,14 +189,14 @@
   "preferences.audio.disable.placeholder": "Disable audio stream",
   "preferences.otg.name": "OTG",
   "preferences.otg.enable.name": "Enable OTG",
-  "preferences.otg.enable.placeholder": "Turn on or off OTG",
-  "preferences.otg.enable.tips": "Enabling this will allow mouse and keyboard when connected via OTG",
-  "preferences.otg.hid-keyboard.name": "Use Keyboard",
-  "preferences.otg.hid-keyboard.placeholder": "Turn on or off keyboard OTG",
-  "preferences.otg.hid-keyboard.tips": "Enabling this option alone will disable mouse OTG, which can be enabled at the same time as the mouse option",
-  "preferences.otg.hid-mouse.name": "Use Mouse",
-  "preferences.otg.hid-mouse.placeholder": "Turn on or off mouse OTG",
-  "preferences.otg.hid-mouse.tips": "Enabling this option alone will disable keyboard OTG, which can be enabled at the same time as the keyboard option",
+  "preferences.otg.enable.placeholder": "Enable or disable OTG",
+  "preferences.otg.enable.tips": "Enables using physical keyboard and mouse with Android device",
+  "preferences.otg.only-keyboard.name": "Keyboard only",
+  "preferences.otg.only-keyboard.placeholder": "Enable keyboard-only OTG",
+  "preferences.otg.only-keyboard.tips": "Note: This disables mouse OTG",
+  "preferences.otg.only-mouse.name": "Mouse only",
+  "preferences.otg.only-mouse.placeholder": "Enable or disable mouse-only OTG",
+  "preferences.otg.only-mouse.tips": "Note: This disables keyboard OTG",
   "about.name": "About",
   "about.description": "📱 Graphical Scrcpy to display and control Android, devices powered by Electron.",
   "about.update": "Check for Updates",

src/locales/languages/zh_CN.json

@@ -190,13 +190,13 @@
   "preferences.otg.name": "OTG 控制",
   "preferences.otg.enable.name": "启用 OTG",
   "preferences.otg.enable.placeholder": "开启或关闭 OTG 功能",
-  "preferences.otg.enable.tips": "开启后可以使用物理键盘和鼠标控制安卓设备，注意：仅启用该选项将同时启用鼠标和键盘 OTG 功能",
-  "preferences.otg.hid-keyboard.name": "启用键盘",
-  "preferences.otg.hid-keyboard.placeholder": "开启或关闭键盘的 OTG 功能",
-  "preferences.otg.hid-keyboard.tips": "注意：仅启用该选项将禁用鼠标的 OTG 功能，它可以和启用鼠标选项同时开启",
-  "preferences.otg.hid-mouse.name": "启用鼠标",
-  "preferences.otg.hid-mouse.placeholder": "开启或关闭鼠标的 OTG 功能",
-  "preferences.otg.hid-mouse.tips": "注意：仅启用该选项将禁用键盘的 OTG 功能，它可以和启用键盘选项同时开启",
+  "preferences.otg.enable.tips": "开启后可以同时使用物理键盘和鼠标控制安卓设备",
+  "preferences.otg.only-keyboard.name": "仅键盘",
+  "preferences.otg.only-keyboard.placeholder": "开启仅键盘的 OTG 功能",
+  "preferences.otg.only-keyboard.tips": "注意：仅启用该选项将禁用鼠标的 OTG 功能",
+  "preferences.otg.only-mouse.name": "仅鼠标",
+  "preferences.otg.only-mouse.placeholder": "开启或关闭仅鼠标的 OTG 功能",
+  "preferences.otg.only-mouse.tips": "注意：仅启用该选项将禁用键盘的 OTG 功能",
   "about.name": "关于",
   "about.description": "📱 使用图形化的 Scrcpy 显示和控制您的 Android 设备,由 Electron 驱动",
   "about.update": "检查并更新",

src/store/preference/index.js

@@ -114,30 +114,30 @@ export const usePreferenceStore = defineStore({
         return ''
       }
 
-      const value = Object.entries(data)
-        .reduce((arr, [key, value]) => {
-          if (!value) {
-            return arr
-          }
-
-          if (this.scrcpyExcludeKeys.includes(key)) {
-            return arr
-          }
-
-          if (typeof value === 'boolean') {
-            arr.push(key)
-          }
-          else {
-            arr.push(`${key}=${value}`)
-          }
-
+      const value = Object.entries(data).reduce((arr, [key, value]) => {
+        if (!value) {
           return arr
-        }, [])
-        .join(' ')
+        }
 
-      console.log('getScrcpyData.value', value)
+        if (this.scrcpyExcludeKeys.includes(key)) {
+          return arr
+        }
 
-      return value
+        if (typeof value === 'boolean') {
+          arr.push(key)
+        }
+        else {
+          arr.push(`${key}=${value}`)
+        }
+
+        return arr
+      }, [])
+
+      const joinValue = value.join(' ')
+
+      console.log('getScrcpyData.joinValue', joinValue)
+
+      return joinValue
     },
     getModel(path) {
       const value = get(this.model, path)

src/store/preference/model/otg/index.js

@@ -12,20 +12,20 @@ export default {
       tips: 'preferences.otg.enable.tips',
     },
     hidKeyboard: {
-      label: 'preferences.otg.hid-keyboard.name',
+      label: 'preferences.otg.only-keyboard.name',
       field: '--hid-keyboard',
       type: 'Switch',
       value: null,
-      placeholder: 'preferences.otg.hid-keyboard.placeholder',
-      tips: 'preferences.otg.hid-keyboard.tips',
+      placeholder: 'preferences.otg.only-keyboard.placeholder',
+      tips: 'preferences.otg.only-keyboard.tips',
     },
     hidMouse: {
-      label: 'preferences.otg.hid-mouse.name',
+      label: 'preferences.otg.only-mouse.name',
       field: '--hid-mouse',
       type: 'Switch',
       value: null,
-      placeholder: 'preferences.otg.hid-mouse.placeholder',
-      tips: 'preferences.otg.hid-mouse.tips',
+      placeholder: 'preferences.otg.only-mouse.placeholder',
+      tips: 'preferences.otg.only-mouse.tips',
     },
   },
 }