perf: ♻️ Enhance recording stability

src/App.vue

@@ -100,8 +100,8 @@ async function showTips() {
   ElMessageBox.alert(
     `<div>
       ${window.t('dependencies.lack.content', {
-    name: '<a class="hover:underline text-primary-500" href="https://github.com/Genymobile/scrcpy" target="_blank">scrcpy</a>',
+        name: '<a class="hover:underline text-primary-500" href="https://github.com/Genymobile/scrcpy" target="_blank">scrcpy</a>',
-  })}
+      })}
     <div>`,
     window.t('dependencies.lack.title'),
     {

src/components/Device/components/ControlBar/Synergy/index.vue

@@ -81,7 +81,8 @@ export default {
           title: ({ displayId }) =>
             `${this.$store.device.getLabel(
               this.device,
-            )}-displayId-${displayId}`,
+              'synergy',
+            )}-${displayId}`,
           args: this.scrcpyParams(this.device.id),
         })
 

src/components/Device/components/MirrorAction/index.vue

@@ -43,7 +43,7 @@ export default {
 
       try {
         const mirroring = this.$scrcpy.mirror(row.id, {
-          title: this.$store.device.getLabel(row),
+          title: this.$store.device.getLabel(row, 'mirror'),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,

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

@@ -46,11 +46,9 @@ export default {
         },
       )}`
 
-      console.log('args', args)
-
       try {
         const mirroring = this.$scrcpy.mirror(row.id, {
-          title: this.$store.device.getLabel(row),
+          title: this.$store.device.getLabel(row, 'camera'),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,

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

@@ -51,7 +51,7 @@ export default {
 
       try {
         const mirroring = this.$scrcpy.mirror(row.id, {
-          title: this.$store.device.getLabel(row),
+          title: this.$store.device.getLabel(row, 'custom'),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,

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

@@ -18,7 +18,7 @@ const recordModel = {
     extname: config => config['--audio-record-format'] || 'opus',
   },
   camera: {
-    excludes: ['--video-source', '--turn-screen-off'],
+    excludes: ['--video-source', '--turn-screen-off', '--show-touches', '--no-power-on'],
     commands: ['--video-source=camera'],
     extname: config => config['--record-format'] || 'mp4',
   },
@@ -61,14 +61,13 @@ export default {
       const savePath = this.getRecordPath(row)
 
       let args = this.$store.preference.scrcpyParameter(row.id, {
-        isRecord: ['default', 'audio'].includes(this.recordType),
+        isRecord: true,
         isCamera: ['camera'].includes(this.recordType),
         excludes: [
           ...new Set([
             '--otg',
             '--mouse=aoa',
             '--keyboard=aoa',
-            '--show-touches',
             ...this.activeModel.excludes,
           ]),
         ],
@@ -115,10 +114,10 @@ export default {
 
       const extension = this.activeModel.extname(deviceConfig)
 
-      const fileName = this.$store.device.getLabel(
+      const fileName = `${this.$store.device.getLabel(
         row,
-        ({ time }) => `record-${time}.${extension}`,
+        'recorded',
-      )
+      )}.${extension}`
 
       const filePath = this.$path.join(savePath, fileName)
 

src/composables/useScreenshotAction/index.js

@@ -32,10 +32,10 @@ export function useScreenshotAction({ floating } = {}) {
       ).close
     }
 
-    const fileName = deviceStore.getLabel(
+    const fileName = `${deviceStore.getLabel(
       device,
-      ({ time }) => `screenshot-${time}.jpg`,
+      'screenshot',
-    )
+    )}.jpg`
 
     const deviceConfig = preferenceStore.getData(device.id)
     const savePath = window.nodePath.resolve(deviceConfig.savePath, fileName)

src/store/device/index.js

@@ -1,8 +1,9 @@
-import { t } from '$/locales/index.js'
+import { defineStore } from 'pinia'
+import dayjs from 'dayjs'
+import { capitalize } from 'lodash-es'
 import { isIPWithPort, replaceIP } from '$/utils/index.js'
 
-import dayjs from 'dayjs'
+import { name as packageName } from '$root/package.json'
-import { defineStore } from 'pinia'
 
 const $appStore = window.appStore
 
@@ -24,7 +25,7 @@ export const useDeviceStore = defineStore({
 
       return this.config
     },
-    getLabel(device, param) {
+    getLabel(device, params) {
       if (!device) {
         return ''
       }
@@ -33,22 +34,44 @@ export const useDeviceStore = defineStore({
         ? device
         : this.list.find(item => item.id === device)
 
-      const labels = [data.$remark, data.$name, replaceIP(data.id)]
+      const appName = capitalize(packageName)
 
-      const model = {
+      const deviceName = `${data.$remark || data.$name}${data.$wifi ? '(WIFI)' : ''}`
-        recording: `🎥${t('device.record.progress')}...`,
+
-        time: dayjs().format('YYYY_MM_DD_HH_mm_ss'),
+      const currentTime = dayjs().format('YYYYMMDDHHmmss')
+
+      let value = `${appName}-${deviceName}`
+
+      const createPreset = type => `${appName}${capitalize(type)}-${deviceName}`
+
+      const presets = {
+        ...[
+          'mirror',
+          'camera',
+          'custom',
+          'recording',
+          'synergy',
+        ]
+          .reduce((obj, type) => {
+            obj[type] = createPreset(type)
+            return obj
+          }, {}),
+        recorded: `Record-${deviceName}-${currentTime}`,
+        screenshot: `Screenshot-${deviceName}-${currentTime}`,
       }
 
-      if (typeof param === 'function') {
+      if (typeof params === 'function') {
-        labels.push(param(model))
+        value = params({
+          data,
+          appName,
+          deviceName,
+          currentTime,
+        })
       }
-      else if (param && typeof param === 'string') {
+      else if (params && typeof params === 'string') {
-        labels.push(model[param])
+        value = presets[params]
       }
 
-      const value = labels.filter(item => !!item).join('-')
-
       return value
     },
     setList(data) {