perf: ✨ Support for custom startup mirroring

.vscode/settings.json

@@ -30,7 +30,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "i18n-ally.localesPaths": ["src/locales/index.js", "src/locales/languages"],
-  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.sourceLanguage": "zh-CN",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.extract.ignored": [
     "Switch",

README-CN.md

@@ -84,6 +84,7 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 - 录制
 - OTG
 - 摄像
+- 灵活启动
 
 ### 设备交互栏
 
@@ -204,11 +205,12 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 16. 支持使用内置终端执行自定义命令 ✅
 17. 支持设备自动执行镜像 ✅
 18. 支持常用批量功能 ✅
-19. 支持更多批量处理功能 🚧
-20. 支持对设备进行分组 🚧
-21. 添加文件传输助手功能 🚧
-22. 支持通过界面从设备下载选中的文件 🚧
-23. 添加对游戏的增强功能，如游戏键位映射 🚧
+19. 支持灵活启动镜像 ✅
+20. 支持更多批量处理功能 🚧
+21. 支持对设备进行分组 🚧
+22. 添加文件传输助手功能 🚧
+23. 支持通过界面从设备下载选中的文件 🚧
+24. 添加对游戏的增强功能，如游戏键位映射 🚧
 
 ## 常见问题
 

README.md

@@ -82,6 +82,7 @@ Refer to [scrcpy/doc/shortcuts](https://github.com/Genymobile/scrcpy/blob/master
 - Recording
 - OTG
 - Camera
+- Custom
 
 ### Device Interaction Bar
 
@@ -202,11 +203,12 @@ Refer to [scrcpy/doc/shortcuts](https://github.com/Genymobile/scrcpy/blob/master
 16. Support to use built-in terminals to execute custom commands ✅
 17. Supports automatic execution of mirror on devices ✅
 18. Support common batch processing function ✅
-19. Support more batch processing functions 🚧
-20. Support the device to group 🚧
-21. Add file transmission assistant function 🚧
-22. Support GUI-based selective file downloads from devices 🚧
-23. Add game enhancement features such as game keyboard mapping 🚧
+19. Support for custom startup mirroring ✅
+20. Support more batch processing functions 🚧
+21. Support the device to group 🚧
+22. Add file transmission assistant function 🚧
+23. Support GUI-based selective file downloads from devices 🚧
+24. Add game enhancement features such as game keyboard mapping 🚧
 
 ## FAQ
 

src/components/Device/components/MoreDropdown/components/Camera/index.vue

@@ -45,6 +45,8 @@ export default {
         },
       )}`
 
+      console.log('args', args)
+
       try {
         const mirroring = this.$scrcpy.mirror(row.id, {
           title: this.$store.device.getLabel(row),

src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <TemplatePromise v-slot="{ resolve, reject }">
+    <el-dialog
+      v-model="visible"
+      :title="$t('device.actions.more.custom.name')"
+      class="w-11/12 el-dialog-flex el-dialog-beautify"
+      append-to-body
+      destroy-on-close
+      @close="close(reject)"
+    >
+      <div class="h-full overflow-auto -mx-2 pr-2">
+        <PreferenceForm
+          ref="preferenceFormRef"
+          v-model="preferenceData"
+          tag="el-collapse-item"
+          v-bind="{
+            collapseProps: { accordion: true },
+            excludes: ['common'],
+          }"
+        />
+      </div>
+
+      <template #footer>
+        <el-button @click="close(reject)">
+          取消
+        </el-button>
+        <el-button type="primary" @click="submit(resolve)">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+  </TemplatePromise>
+</template>
+
+<script setup>
+import { createTemplatePromise } from '@vueuse/core'
+
+import { nextTick } from 'vue'
+import { usePreferenceStore } from '$/store/index.js'
+
+import PreferenceForm from '$/components/Preference/components/PreferenceForm/index.vue'
+
+const TemplatePromise = createTemplatePromise()
+
+const preferenceStore = usePreferenceStore()
+
+const visible = ref(false)
+
+const preferenceFormRef = ref(null)
+
+const preferenceData = ref({
+  ...getDefaultData(),
+})
+
+const collapseValue = ref([])
+
+const device = ref(null)
+
+async function open(row) {
+  device.value = row
+  visible.value = true
+
+  return TemplatePromise.start()
+}
+
+async function submit(resolve) {
+  const data = await preferenceFormRef.value.generateCommand()
+
+  visible.value = false
+
+  resolve(data)
+}
+
+async function close(reject) {
+  visible.value = false
+
+  await nextTick()
+
+  preferenceData.value = { ...getDefaultData() }
+
+  reject(new Error('User cancel operation'))
+}
+
+function getDefaultData() {
+  return preferenceStore.getDefaultData('global', () => void 0)
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<style></style>

src/components/Device/components/MoreDropdown/components/Custom/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <slot :loading="loading" :trigger="handleClick" />
+
+  <DeployDialog ref="deployDialogRef" />
+</template>
+
+<script>
+import DeployDialog from './components/DeployDialog/index.vue'
+import { sleep } from '$/utils'
+
+export default {
+  components: {
+    DeployDialog,
+  },
+  props: {
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.row
+
+      this.loading = true
+
+      let args = ''
+
+      try {
+        args = await this.$refs.deployDialogRef.open(row)
+      }
+      catch (error) {
+        this.loading = false
+        this.$message.warning(error.message)
+        return false
+      }
+
+      /** TODO */
+      const isCamera = ['--camera-facing'].some(key => args.includes(key))
+      if (isCamera) {
+        args += ' --video-source=camera'
+      }
+
+      this.toggleRowExpansion(row, true)
+
+      try {
+        const mirroring = this.$scrcpy.mirror(row.id, {
+          title: this.$store.device.getLabel(row),
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        await mirroring
+      }
+      catch (error) {
+        console.error('mirror.args', args)
+        console.error('mirror.error', error)
+
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+      }
+    },
+    onStdout() {},
+    onStderr() {},
+  },
+}
+</script>
+
+<style></style>

src/components/Device/components/MoreDropdown/index.vue

@@ -41,17 +41,20 @@
 import Record from './components/Record/index.vue'
 import Otg from './components/Otg/index.vue'
 import Camera from './components/Camera/index.vue'
+import Custom from './components/Custom/index.vue'
 
 export default {
   components: {
     Record,
     Otg,
     Camera,
+    Custom,
   },
   props: {
     ...Record.props,
     ...Otg.props,
     ...Camera.props,
+    ...Custom.props,
   },
   data() {
     return {
@@ -68,6 +71,10 @@ export default {
           label: 'device.actions.more.camera.name',
           component: 'Camera',
         },
+        {
+          label: 'device.actions.more.custom.name',
+          component: 'Custom',
+        },
       ],
     }
   },

src/components/Preference/components/PreferenceForm/components/Input/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-input
+    class="!w-full"
+    v-bind="{
+      clearable: true,
+      ...(data.props || {}),
+    }"
+  >
+    <template v-if="data.append" #append>
+      {{ data.append }}
+    </template>
+  </el-input>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Preference/components/PreferenceForm/components/InputNumber/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-input
+    class="!w-full"
+    v-bind="{
+      type: 'number',
+      clearable: true,
+      ...(data.props || {}),
+    }"
+  >
+    <template v-if="data.append" #append>
+      {{ data.append }}
+    </template>
+  </el-input>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Preference/components/PathInput/index.vue → src/components/Preference/components/PreferenceForm/components/InputPath/index.vue

@@ -1,11 +1,11 @@
 <template>
   <el-input
-    v-bind="data.props || {}"
+    v-bind="{
+      clearable: true,
+      ...(data.props || {}),
+    }"
     v-model="pathValue"
-    clearable
     class="!w-full"
-    :title="$t(data.placeholder)"
-    :placeholder="$t(data.placeholder)"
   >
     <template #append>
       <el-button

src/components/Preference/components/PreferenceForm/components/Select/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-select
+    v-bind="{
+      clearable: true,
+      ...(data.props || {}),
+    }"
+    class="!w-full"
+  >
+    <el-option
+      v-for="(item, index) in data.options"
+      :key="index"
+      :label="$t(item.label)"
+      :value="item.value"
+      :title="$t(item.placeholder || item.label)"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Preference/components/AudioCodecSelect/index.vue → src/components/Preference/components/PreferenceForm/components/SelectAudioCodec/index.vue

@@ -1,10 +1,8 @@
 <template>
   <el-select
-    v-bind="data.props || {}"
+    v-bind="{ ...(data.props || {}) }"
     v-model="selectValue"
     class="!w-full"
-    :title="$t(data.placeholder)"
-    :placeholder="$t(data.placeholder)"
   >
     <el-option
       v-for="(item, index) in options"