refactor: ♻️ Optimize recording

src/components/Device/index.vue

@@ -237,7 +237,7 @@ export default {
       return this.$store.preference.getData(...args)
     },
     scrcpyArgs(...args) {
-      return this.$store.preference.getScrcpyData(...args)
+      return this.$store.preference.getScrcpyArgs(...args)
     },
     handleRefresh() {
       this.getDeviceData({ resetResolve: true })
@@ -278,13 +278,12 @@ export default {
     getRecordPath(row) {
       const rowConfig = this.preferenceData(row.id)
       const basePath = rowConfig.savePath
-      const recordFormat = rowConfig['--record-format']
 
       const fileName = `${row.$remark ? `${row.$remark}-` : ''}${
         row.$name
       }-${this.$replaceIP(row.id)}-recording-${dayjs().format(
         'YYYY-MM-DD-HH-mm-ss',
-      )}.${recordFormat}`
+      )}`
 
       const joinValue = this.$path.join(basePath, fileName)
       const value = this.$path.normalize(joinValue)
@@ -304,7 +303,7 @@ export default {
             row.id
           }-🎥${this.$t('device.record.progress')}...`,
           savePath,
-          args: this.scrcpyArgs(row.id),
+          args: this.scrcpyArgs(row.id, { isRecord: true }),
           stdout: this.onStdout,
         })
 

src/components/Preference/AudioCodecSelect/index.vue

@@ -72,7 +72,7 @@ export default {
         }
       })
 
-      console.log('deviceOptions', this.deviceOptions)
+      console.log('AudioCodecSelect.deviceOptions', this.deviceOptions)
     },
     onChange(value) {
       // console.log('value', value)

src/components/Preference/DisplaySelect/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-select
+    v-bind="data.props || {}"
+    :model-value="modelValue"
+    class="!w-full"
+    :title="$t(data.placeholder)"
+    :placeholder="$t(data.placeholder)"
+    @change="onChange"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :label="$t(item.label)"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      value: '',
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    deviceScope: {
+      type: String,
+      value: '',
+    },
+    preferenceData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['update:model-value'],
+  data() {
+    return {
+      deviceOptions: [],
+    }
+  },
+  computed: {
+    options() {
+      return this.deviceOptions.length ? this.deviceOptions : this.data.options
+    },
+  },
+  watch: {
+    deviceScope: {
+      handler(value) {
+        if (value === 'global') {
+          this.deviceOptions = []
+          return
+        }
+
+        this.getDeviceOptions()
+      },
+    },
+  },
+  methods: {
+    async getDeviceOptions() {
+      const res = await this.$adb.display(this.deviceScope)
+
+      this.deviceOptions
+        = res?.map((item) => {
+          return {
+            label: item,
+            value: item,
+          }
+        }) || []
+
+      console.log('DisplaySelect.deviceOptions', this.deviceOptions)
+    },
+    onChange(value) {
+      this.$emit('update:model-value', value)
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Preference/VideoCodecSelect/index.vue

@@ -72,10 +72,9 @@ export default {
         }
       })
 
-      console.log('deviceOptions', this.deviceOptions)
+      console.log('VideoCodecSelect.deviceOptions', this.deviceOptions)
     },
     onChange(value) {
-      // console.log('value', value)
       this.$emit('update:model-value', value)
 
       const [decoder, encoder] = value.split(' & ')

src/components/Preference/index.vue

@@ -191,6 +191,7 @@ import LanguageSelect from './LanguageSelect/index.vue'
 import PathInput from './PathInput/index.vue'
 import VideoCodecSelect from './VideoCodecSelect/index.vue'
 import AudioCodecSelect from './AudioCodecSelect/index.vue'
+import DisplaySelect from './DisplaySelect/index.vue'
 import LoadingIcon from '@/components/Device/ControlBar/LoadingIcon/index.vue'
 import { usePreferenceStore } from '@/store/index.js'
 
@@ -200,6 +201,7 @@ export default {
     PathInput,
     VideoCodecSelect,
     AudioCodecSelect,
+    DisplaySelect,
   },
   setup() {
     const preferenceStore = usePreferenceStore()
@@ -255,7 +257,7 @@ export default {
         )
 
         if (someValue) {
-          return false
+          return
         }
 
         this.deviceScope = 'global'
@@ -270,8 +272,6 @@ export default {
       leading: false,
       trailing: true,
     })
-
-    this.getDisplay()
   },
   methods: {
     subModel(item) {
@@ -292,31 +292,8 @@ export default {
     onScopeChange(value) {
       this.$store.preference.setScope(value)
       this.preferenceData = this.$store.preference.data
-
-      if (value === 'global') {
-        this.$store.preference.resetModel()
-      }
-
-      this.getDisplay()
     },
 
-    async getDisplay() {
-      if (this.deviceScope === 'global') {
-        return false
-      }
-
-      const display = await this.$adb.display(this.deviceScope)
-
-      const displayOptions = display.map(item => ({
-        label: item,
-        value: item,
-      }))
-
-      this.$store.preference.setModel(
-        'video.children.display.options',
-        displayOptions,
-      )
-    },
     async handleImport() {
       try {
         await this.$electron.ipcRenderer.invoke('show-open-dialog', {
@@ -341,6 +318,7 @@ export default {
         }
       }
     },
+
     handleEdit() {
       this.$appStore.openInEditor()
     },

src/locales/languages/en_US.json

@@ -134,12 +134,12 @@
   "preferences.video.name": "Video",
   "preferences.video.resolution.name": "Resolution",
   "preferences.video.resolution.placeholder": "Default is device resolution e.g. 1920",
-  "preferences.video.bit.name": "Bit Rate",
+  "preferences.video.bit.name": "Video Bit Rate",
   "preferences.video.bit.placeholder": "Default 4M, equal to 4000000",
-  "preferences.video.refresh-rate.name": "Frame Rate",
-  "preferences.video.refresh-rate.placeholder": "Default 60",
   "preferences.video.video-code.name": "Video Codec",
   "preferences.video.video-code.placeholder": "Default H.264",
+  "preferences.video.refresh-rate.name": "Frame Rate",
+  "preferences.video.refresh-rate.placeholder": "Default 60",
   "preferences.video.screen-rotation.name": "Rotation",
   "preferences.video.screen-rotation.placeholder": "Default device rotation",
   "preferences.video.screen-cropping.name": "Crop",
@@ -150,8 +150,6 @@
   "preferences.video.video-buffer.placeholder": "Default 0ms",
   "preferences.video.receiver-buffer.name": "Receiver Buffer (v412)",
   "preferences.video.receiver-buffer.placeholder": "Default 0ms",
-  "preferences.video.disable.name": "Disable Video",
-  "preferences.video.disable.placeholder": "Disable video stream",
   "preferences.device.name": "Device",
   "preferences.device.show-touch.name": "Show Touches",
   "preferences.device.show-touch.placeholder": "Enable touch feedback dots",
@@ -178,9 +176,19 @@
   "preferences.record.name": "Recording",
   "preferences.record.format.name": "Format",
   "preferences.record.format.placeholder": "Default *.mp4",
+  "preferences.record.lock-video-orientation.name": "Video Direction",
+  "preferences.record.lock-video-orientation.placeholder": "Default Device Orientation",
+  "preferences.record.disable-video.name": "Disable video recording",
+  "preferences.record.disable-video.placeholder": "Video recording will be disabled when enabled",
+  "preferences.record.disable-audio.name": "Disable audio recording",
+  "preferences.record.disable-audio.placeholder": "Audio recording will be disabled when enabled",
+  "preferences.record.no-video-playback.name": "Disable video playback",
+  "preferences.record.no-video-playback.placeholder": "Video playback will be disabled during recording when enabled",
+  "preferences.record.no-video-playback.tips": "Note: Video will still be recorded, just playback disabled",
+  "preferences.record.no-audio-playback.name": "Disable audio playback",
+  "preferences.record.no-audio-playback.placeholder": "Audio playback will be disabled during recording when enabled",
+  "preferences.record.no-audio-playback.tips": "Note: Audio will still be recorded, just playback disabled",
   "preferences.audio.name": "Audio",
-  "preferences.audio.disable.name": "Disable Audio",
-  "preferences.audio.disable.placeholder": "Disable audio stream",
   "preferences.audio.audio-source.name": "Audio Source",
   "preferences.audio.audio-source.placeholder": "Default Device Audio Output",
   "preferences.audio.audio-source.tips": "Tip: Selecting 'Microphone' as the source will allow you to record audio.",

src/locales/languages/zh_CN.json

@@ -135,8 +135,8 @@
   "preferences.video.name": "视频控制",
   "preferences.video.resolution.name": "分辨率",
   "preferences.video.resolution.placeholder": "默认值为设备分辨率,如 1920",
-  "preferences.video.bit.name": "比特率",
-  "preferences.video.bit.placeholder": "默认值为 4M,等同于 4000000",
+  "preferences.video.bit.name": "视频比特率",
+  "preferences.video.bit.placeholder": "默认值为 8000000",
   "preferences.video.refresh-rate.name": "刷新率",
   "preferences.video.refresh-rate.placeholder": "默认值为 60",
   "preferences.video.video-code.name": "视频编码",
@@ -151,8 +151,6 @@
   "preferences.video.video-buffer.placeholder": "默认值为 0ms",
   "preferences.video.receiver-buffer.name": "接收器缓冲(v412)",
   "preferences.video.receiver-buffer.placeholder": "默认值为 0ms",
-  "preferences.video.disable.name": "禁用视频",
-  "preferences.video.disable.placeholder": "开启后将禁用视频",
   "preferences.device.name": "设备控制",
   "preferences.device.show-touch.name": "展示触摸点",
   "preferences.device.show-touch.placeholder": "开启后将打开开发者选项中的显示点按触摸反馈",
@@ -179,9 +177,19 @@
   "preferences.record.name": "音视频录制",
   "preferences.record.format.name": "录制视频格式",
   "preferences.record.format.placeholder": "默认为 *.mp4 格式",
+  "preferences.record.lock-video-orientation.name": "录制视频方向",
+  "preferences.record.lock-video-orientation.placeholder": "默认为设备默认方向",
+  "preferences.record.disable-video.name": "禁用视频录制",
+  "preferences.record.disable-video.placeholder": "开启后将禁用视频录制",
+  "preferences.record.disable-audio.name": "禁用音频录制",
+  "preferences.record.disable-audio.placeholder": "开启后将禁用音频录制",
+  "preferences.record.no-video-playback.name": "禁用视频播放",
+  "preferences.record.no-video-playback.placeholder": "开启后录制时将禁用视频播放",
+  "preferences.record.no-video-playback.tips": "注意：只是禁用了播放但是依然会录制视频",
+  "preferences.record.no-audio-playback.name": "禁用音频播放",
+  "preferences.record.no-audio-playback.placeholder": "开启后录制时将禁用音频播放",
+  "preferences.record.no-audio-playback.tips": "注意：只是禁用了播放但是依然会录制音频",
   "preferences.audio.name": "音频控制",
-  "preferences.audio.disable.name": "禁用音频",
-  "preferences.audio.disable.placeholder": "开启后将禁用音频功能",
   "preferences.audio.audio-source.name": "音频源",
   "preferences.audio.audio-source.placeholder": "默认为设备音频输出",
   "preferences.audio.audio-source.tips": "技巧：如果将来源设为麦克风将可以在录制时将声音录制下来",

src/store/preference/index.js

@@ -26,12 +26,19 @@ export const usePreferenceStore = defineStore({
       model: cloneDeep(model),
       data: { ...getDefaultData() },
       deviceScope,
-      scrcpyExcludeKeys: [
-        '--record-format',
+      excludeKeys: [
         '--video-code',
         '--audio-code',
         ...getOtherFields('scrcpy'),
       ],
+      recordKeys: [
+        '--record-format',
+        '--lock-video-orientation',
+        '--no-video',
+        '--no-audio',
+        '--no-video-playback',
+        '--no-audio-playback',
+      ],
     }
   },
   getters: {},
@@ -115,8 +122,9 @@ export const usePreferenceStore = defineStore({
       return value
     },
 
-    getScrcpyData(scope = this.deviceScope) {
+    getScrcpyArgs(scope = this.deviceScope, { isRecord = false } = {}) {
       const data = this.getData(scope)
+      // console.log('getScrcpyArgs.data', data)
 
       if (!data) {
         return ''
@@ -127,10 +135,17 @@ export const usePreferenceStore = defineStore({
           return arr
         }
 
-        if (this.scrcpyExcludeKeys.includes(key)) {
+        if (this.excludeKeys.includes(key)) {
           return arr
         }
 
+        if (!isRecord) {
+          console.log('isRecord')
+          if (this.recordKeys.includes(key)) {
+            return arr
+          }
+        }
+
         if (typeof value === 'boolean') {
           arr.push(key)
         }
@@ -143,7 +158,7 @@ export const usePreferenceStore = defineStore({
 
       const value = valueList.join(' ')
 
-      console.log('getScrcpyData.value', value)
+      console.log('getScrcpyArgs.value', value)
 
       return value
     },

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

@@ -71,12 +71,5 @@ export default {
       placeholder: 'preferences.audio.audio-output-buffer.placeholder',
       append: 'ms',
     },
-    noAudio: {
-      label: 'preferences.audio.disable.name',
-      field: '--no-audio',
-      type: 'Switch',
-      value: null,
-      placeholder: 'preferences.audio.disable.placeholder',
-    },
   },
 }

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

@@ -19,5 +19,48 @@ export default {
         },
       ],
     },
+    lockVideoOrientation: {
+      label: 'preferences.record.lock-video-orientation.name',
+      field: '--lock-video-orientation',
+      type: 'Select',
+      value: '',
+      placeholder: 'preferences.record.lock-video-orientation.placeholder',
+      options: [
+        { label: '0°', value: '0' },
+        { label: '-90°', value: '1' },
+        { label: '180°', value: '2' },
+        { label: '90°', value: '3' },
+      ],
+    },
+    // noVideo: {
+    //   label: 'preferences.record.disable-video.name',
+    //   field: '--no-video',
+    //   type: 'Switch',
+    //   value: null,
+    //   placeholder: 'preferences.record.disable-video.placeholder',
+    // },
+    noAudio: {
+      label: 'preferences.record.disable-audio.name',
+      field: '--no-audio',
+      type: 'Switch',
+      value: null,
+      placeholder: 'preferences.record.disable-audio.placeholder',
+    },
+    // noVideoPlayback: {
+    //   label: 'preferences.record.no-video-playback.name',
+    //   field: '--no-video-playback',
+    //   type: 'Switch',
+    //   value: null,
+    //   placeholder: 'preferences.record.no-video-playback.placeholder',
+    //   tips: 'preferences.record.no-video-playback.tips',
+    // },
+    noAudioPlayback: {
+      label: 'preferences.record.no-audio-playback.name',
+      field: '--no-audio-playback',
+      type: 'Switch',
+      value: null,
+      placeholder: 'preferences.record.no-audio-playback.placeholder',
+      tips: 'preferences.record.no-audio-playback.tips',
+    },
   },
 }

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

@@ -13,9 +13,10 @@ export default {
     videoBitRate: {
       label: 'preferences.video.bit.name',
       field: '--video-bit-rate',
-      type: 'Input',
+      type: 'Input.number',
       value: '',
       placeholder: 'preferences.video.bit.placeholder',
+      append: 'bps',
     },
     maxFps: {
       label: 'preferences.video.refresh-rate.name',
@@ -84,10 +85,10 @@ export default {
       value: '',
       placeholder: 'preferences.video.screen-cropping.placeholder',
     },
-    display: {
+    displayId: {
       label: 'preferences.video.multi-display.name',
       field: '--display-id',
-      type: 'Select',
+      type: 'DisplaySelect',
       value: '',
       placeholder: 'preferences.video.multi-display.placeholder',
       options: [
@@ -116,12 +117,5 @@ export default {
       placeholder: 'preferences.video.receiver-buffer.placeholder',
       append: 'ms',
     },
-    noVideo: {
-      label: 'preferences.video.disable.name',
-      field: '--no-video',
-      type: 'Switch',
-      value: null,
-      placeholder: 'preferences.video.disable.placeholder',
-    },
   },
 }