fix: 🐛 Video codec preset error

src/components/Preference/AudioCodecSelect/index.vue

@@ -1,11 +1,10 @@
 <template>
   <el-select
     v-bind="data.props || {}"
-    :model-value="modelValue"
+    v-model="selectValue"
     class="!w-full"
     :title="$t(data.placeholder)"
     :placeholder="$t(data.placeholder)"
-    @change="onChange"
   >
     <el-option
       v-for="(item, index) in options"
@@ -47,6 +46,17 @@ export default {
     options() {
       return this.deviceOptions.length ? this.deviceOptions : this.data.options
     },
+    selectValue: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:model-value', value)
+        const [decoder, encoder] = value.split(' & ')
+        this.preferenceData['--audio-codec'] = decoder
+        this.preferenceData['--audio-encoder'] = encoder
+      },
+    },
   },
   watch: {
     deviceScope: {
@@ -74,14 +84,6 @@ export default {
 
       console.log('AudioCodecSelect.deviceOptions', this.deviceOptions)
     },
-    onChange(value) {
-      // console.log('value', value)
-      this.$emit('update:model-value', value)
-
-      const [decoder, encoder] = value.split(' & ')
-      this.preferenceData['--audio-codec'] = decoder
-      this.preferenceData['--audio-encoder'] = encoder
-    },
   },
 }
 </script>

src/components/Preference/DisplaySelect/index.vue

@@ -5,7 +5,6 @@
     class="!w-full"
     :title="$t(data.placeholder)"
     :placeholder="$t(data.placeholder)"
-    @change="onChange"
   >
     <el-option
       v-for="(item, index) in options"
@@ -41,20 +40,22 @@ export default {
   data() {
     return {
       deviceOptions: [],
-      selectValue: '',
     }
   },
   computed: {
     options() {
       return this.deviceOptions.length ? this.deviceOptions : this.data.options
     },
-  },
-  watch: {
-    modelValue: {
-      handler(value) {
-        this.selectValue = value
+    selectValue: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:model-value', value)
       },
     },
+  },
+  watch: {
     deviceScope: {
       handler(value) {
         if (value === 'global') {
@@ -80,9 +81,6 @@ export default {
 
       console.log('DisplaySelect.deviceOptions', this.deviceOptions)
     },
-    onChange(value) {
-      this.$emit('update:model-value', value)
-    },
   },
 }
 </script>

src/components/Preference/LanguageSelect/index.vue

@@ -1,11 +1,10 @@
 <template>
   <el-select
     v-bind="data.props || {}"
-    v-model="locale"
+    v-model="inputValue"
     class="!w-full"
     :title="$t(data.placeholder)"
     :placeholder="$t(data.placeholder)"
-    @change="onChange"
   >
     <el-option
       v-for="(item, index) in data.options"
@@ -36,31 +35,26 @@ export default {
     },
   },
   emits: ['update:model-value'],
-  data() {
-    const { locale, availableLocales } = i18n.global
+  setup() {
     return {
-      locale,
-      options: availableLocales.map(item => ({
-        label: item,
-        value: item,
-      })),
+      locale: i18n.global.locale,
     }
   },
-  watch: {
-    'preferenceData.language': {
-      handler(value) {
-        if (!value) {
-          return
-        }
+  data() {
+    return {}
+  },
+  computed: {
+    inputValue: {
+      get() {
+        return this.modelValue || this.locale
+      },
+      set(value) {
         this.locale = value
+        this.$emit('update:model-value', value)
       },
     },
   },
-  methods: {
-    onChange(value) {
-      this.$emit('update:model-value', value)
-    },
-  },
+  methods: {},
 }
 </script>
 

src/components/Preference/PathInput/index.vue

@@ -6,7 +6,6 @@
     class="!w-full"
     :title="$t(data.placeholder)"
     :placeholder="$t(data.placeholder)"
-    @change="handleUpdate"
   >
     <template #append>
       <el-button
@@ -38,22 +37,19 @@ export default {
   },
   emits: ['update:model-value'],
   data() {
-    return {
-      pathValue: '',
-    }
+    return {}
   },
-  watch: {
-    modelValue: {
-      handler(value) {
-        this.pathValue = value
+  computed: {
+    pathValue: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:model-value', value)
       },
-      immediate: true,
     },
   },
   methods: {
-    handleUpdate(value) {
-      this.$emit('update:model-value', value)
-    },
     async handleSelect(options = {}) {
       const { properties, filters } = cloneDeep(options)
       try {
@@ -73,7 +69,7 @@ export default {
 
         const value = files[0]
 
-        this.handleUpdate(value)
+        this.pathValue = value
       }
       catch (error) {
         if (error.message) {

src/components/Preference/VideoCodecSelect/index.vue

@@ -1,11 +1,10 @@
 <template>
   <el-select
     v-bind="data.props || {}"
-    :model-value="modelValue"
+    v-model="selectValue"
     class="!w-full"
     :title="$t(data.placeholder)"
     :placeholder="$t(data.placeholder)"
-    @change="onChange"
   >
     <el-option
       v-for="(item, index) in options"
@@ -47,6 +46,17 @@ export default {
     options() {
       return this.deviceOptions.length ? this.deviceOptions : this.data.options
     },
+    selectValue: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:model-value', value)
+        const [decoder, encoder] = value.split(' & ')
+        this.preferenceData['--video-codec'] = decoder
+        this.preferenceData['--video-encoder'] = encoder
+      },
+    },
   },
   watch: {
     deviceScope: {
@@ -74,13 +84,6 @@ export default {
 
       console.log('VideoCodecSelect.deviceOptions', this.deviceOptions)
     },
-    onChange(value) {
-      this.$emit('update:model-value', value)
-
-      const [decoder, encoder] = value.split(' & ')
-      this.preferenceData['--video-codec'] = decoder
-      this.preferenceData['--video-encoder'] = encoder
-    },
   },
 }
 </script>

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

@@ -34,24 +34,24 @@ export default {
       placeholder: 'preferences.video.video-code.placeholder',
       options: [
         {
-          label: 'h265 & OMX.qcom.video.encoder.avc',
-          value: 'h265 & OMX.qcom.video.encoder.avc',
+          label: 'h264 & OMX.qcom.video.encoder.avc',
+          value: 'h264 & OMX.qcom.video.encoder.avc',
         },
         {
-          label: 'h265 & c2.android.avc.encoder',
-          value: 'h265 & c2.android.avc.encoder',
+          label: 'h264 & c2.android.avc.encoder',
+          value: 'h264 & c2.android.avc.encoder',
         },
         {
           label: 'h264 & OMX.google.h264.encoder',
           value: 'h264 & OMX.google.h264.encoder',
         },
         {
-          label: 'h264 & OMX.qcom.video.encoder.hevc',
-          value: 'h264 & OMX.qcom.video.encoder.hevc',
+          label: 'h265 & OMX.qcom.video.encoder.hevc',
+          value: 'h265 & OMX.qcom.video.encoder.hevc',
         },
         {
-          label: 'h264 & c2.android.hevc.encoder',
-          value: 'h264 & c2.android.hevc.encoder',
+          label: 'h265 & c2.android.hevc.encoder',
+          value: 'h265 & c2.android.hevc.encoder',
         },
       ],
     },