@sigmaott/base-next 1.4.41 → 1.4.45

package/src/components/Channel/PresetConfigItem.vue

@@ -24,9 +24,11 @@ function getProp(key: string) {
 }
 
 const encoderIdValue = ref(inject('encoderIdValue'))
+const encoderTypeValue = ref(inject('encoderTypeValue'))
 const mappingEncoder = {
   open_h264: 'OpenH264',
   open_hevc: 'OpenHEVC',
+  netint: 'NETINT',
   nvenc: 'NVENC',
   passthrough: 'Passthrough',
 }
@@ -38,8 +40,8 @@ const optionsEncoder = computed(() => {
   }
   const value = encoderIdValue.value
 
-  // TH1: encoderIdValue === -1
-  if ((value === -1 || value === 'cpu') && triggerAction.value !== 'edit') {
+  // TH1: encoderTypeValue === 'SOFTWARE'
+  if ((encoderTypeValue.value === 'SOFTWARE' || value === 'cpu') && triggerAction.value !== 'edit') {
     return [
       { label: 'OpenH264', value: 'open_h264' },
       { label: 'OpenHEVC', value: 'open_hevc' },
@@ -47,16 +49,23 @@ const optionsEncoder = computed(() => {
     ]
   }
 
-  // TH2: encoderIdValue là null, undefined, '' hoặc bất kỳ giá trị nào khác
-  if (value === null || value === undefined || value === '' || triggerAction.value === 'edit') {
+  // TH2: encoderTypeValue là null, undefined, '' hoặc bất kỳ giá trị nào khác
+  if (encoderTypeValue.value === null || encoderTypeValue.value === undefined || encoderTypeValue.value === '' || triggerAction.value === 'edit') {
     return [
       { label: 'OpenH264', value: 'open_h264' },
       { label: 'OpenHEVC', value: 'open_hevc' },
       { label: 'NVENC', value: 'nvenc' },
+      { label: 'NETINT', value: 'netint' },
       // { label: 'Aurora4', value: 'aurora4' },
       { label: 'Passthrough', value: 'passthrough' },
     ]
   }
+  // TH3: encoderTypeValue là NETINT
+  if (encoderTypeValue.value === 'NETINT') {
+    return [
+      { label: 'NETINT', value: 'netint' },
+    ]
+  }
 
   // Mặc định cho các giá trị khác (ví dụ: 0, 1, 2, 3,...)
   return [
@@ -523,8 +532,8 @@ function fillVideo() {
   audioCodecValue.value = undefined
   videoCodecValue.value = 'h264'
   dataCodecValue.value = undefined
-  encoderValue.value = (encoderIdValue.value !== -1 && encoderIdValue.value !== null && encoderIdValue.value !== undefined && encoderIdValue.value !== '') ? 'nvenc' : 'open_h264'
-  presetValue.value = (encoderIdValue.value !== -1 && encoderIdValue.value !== null && encoderIdValue.value !== undefined && encoderIdValue.value !== '') ? 'llhp' : 'veryfast'
+  encoderValue.value = encoderTypeValue.value === 'SOFTWARE' ? 'open_h264' : encoderTypeValue.value === 'NETINT' ? 'netint' : 'nvenc'
+  presetValue.value = encoderTypeValue.value === 'SOFTWARE' ? 'veryfast' : encoderTypeValue.value === 'NETINT' ? 'medium' : 'llhp'
   videoRateValue.value = 4000000
   rateControlModeValue.value = 'vbr'
   minrateValue.value = undefined
@@ -544,7 +553,7 @@ function fillVideo() {
   hdrValue.value = undefined
   rcValue.value = undefined
   channelValue.value = undefined
-  profileValue.value = undefined
+  profileValue.value = encoderTypeValue.value === 'NETINT' ? 'main' : undefined
   levelValue.value = undefined
   volumeValue.value = undefined
   defaultPTEValue.value = undefined
@@ -646,74 +655,74 @@ function setUndefined(type: string, value: any) {
 const optionsPreset = computed(() => {
   return encoderValue.value === 'nvenc'
     ? [
-        {
-          label: 'SLOW',
-          value: 'slow',
-        },
-        {
-          label: 'MEDIUM',
-          value: 'medium',
-        },
-        {
-          label: 'FAST',
-          value: 'fast',
-        },
-        {
-          label: 'HP',
-          value: 'hp',
-        },
-        {
-          label: 'HQ',
-          value: 'hq',
-        },
-        {
-          label: 'BD',
-          value: 'bd',
-        },
-        {
-          label: 'LL',
-          value: 'll',
-        },
-        {
-          label: 'LLHQ',
-          value: 'llhq',
-        },
-        {
-          label: 'LLHP',
-          value: 'llhp',
-        },
-      ]
+      {
+        label: 'SLOW',
+        value: 'slow',
+      },
+      {
+        label: 'MEDIUM',
+        value: 'medium',
+      },
+      {
+        label: 'FAST',
+        value: 'fast',
+      },
+      {
+        label: 'HP',
+        value: 'hp',
+      },
+      {
+        label: 'HQ',
+        value: 'hq',
+      },
+      {
+        label: 'BD',
+        value: 'bd',
+      },
+      {
+        label: 'LL',
+        value: 'll',
+      },
+      {
+        label: 'LLHQ',
+        value: 'llhq',
+      },
+      {
+        label: 'LLHP',
+        value: 'llhp',
+      },
+    ]
     : [
-        {
-          label: 'MEDIUM',
-          value: 'medium',
-        },
-        {
-          label: 'FAST',
-          value: 'fast',
-        },
-        {
-          label: 'FASTER',
-          value: 'faster',
-        },
-        {
-          label: 'VERYFAST',
-          value: 'veryfast',
-        },
-        {
-          label: 'SUPERFAST',
-          value: 'superfast',
-        },
-        {
-          label: 'ULTRAFAST',
-          value: 'ultrafast',
-        },
-      ]
+      {
+        label: 'MEDIUM',
+        value: 'medium',
+      },
+      {
+        label: 'FAST',
+        value: 'fast',
+      },
+      {
+        label: 'FASTER',
+        value: 'faster',
+      },
+      {
+        label: 'VERYFAST',
+        value: 'veryfast',
+      },
+      {
+        label: 'SUPERFAST',
+        value: 'superfast',
+      },
+      {
+        label: 'ULTRAFAST',
+        value: 'ultrafast',
+      },
+    ]
 })
 
 const codecSelection = computed(() => {
   return {
-    video: (encoderValue.value === 'open_h264' || encoderValue.value === 'aurora4')
+    video: (encoderValue.value === 'open_h264' || encoderValue.value === 'aurora4' || encoderValue.value === 'netint')
       ? { H264: 'h264' }
       : encoderValue.value === 'open_hevc'
         ? { HEVC: 'hevc' }
@@ -903,10 +912,8 @@ async function handleApplyConfig(_value) {
 
 <template>
   <template v-if="typeValue === 'data'">
-    <el-collapse
-      v-model="activeNames"
-      class="[&_.el-collapse-item\_\_content]:pb-0 [&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
-    >
+    <el-collapse v-model="activeNames"
+      class="[&_.el-collapse-item\_\_content]:pb-0 [&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600">
       <el-collapse-item name="general">
         <template #title>
           <label for="" class="flex items-center gap-2 text-16px font-semibold">
@@ -918,50 +925,26 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel :label="$t('general.name')" :info="schemaObj.name" />
             </template>
-            <el-input
-              v-model="nameValue"
-              :placeholder="$t('library_preset.enter_name')"
-              autocomplete="off"
-              clearable
-              :minlength="1"
-              :maxlength="50"
-              show-word-limit
-            />
+            <el-input v-model="nameValue" :placeholder="$t('library_preset.enter_name')" autocomplete="off" clearable
+              :minlength="1" :maxlength="50" show-word-limit />
           </el-form-item>
           <el-form-item v-if="isShowType" class="w-full" v-bind="typeAttrs">
             <template #label>
               <SSInformationLabel :label="$t('library_preset.type')" :info="schemaObj.type" />
             </template>
-            <el-select
-              v-model="typeValue"
-              class="w-full"
-              :disabled="!!defaultMediaType || mode === 'edit'"
-              @change="handleChangeType"
-            >
-              <el-option
-                v-for="(type, idx) in ['video', 'audio', 'data']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="typeValue" class="w-full" :disabled="!!defaultMediaType || mode === 'edit'"
+              @change="handleChangeType">
+              <el-option v-for="(type, idx) in ['video', 'audio', 'data']" :key="type + idx" :value="type"
+                :label="type" />
             </el-select>
           </el-form-item>
           <el-form-item class="w-full" label="Codec" v-bind="dataCodecAttrs">
             <template #label>
               <SSInformationLabel label="Codec" :info="schemaObj.dataCodec" />
             </template>
-            <el-select
-              v-model="dataCodecValue"
-              class="w-full"
-              default-first-option
-              :disabled="isPackage && typeValue !== 'data'"
-            >
-              <el-option
-                v-for="(type, idx) in codecSelection"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="dataCodecValue" class="w-full" default-first-option
+              :disabled="isPackage && typeValue !== 'data'">
+              <el-option v-for="(type, idx) in codecSelection" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
@@ -978,36 +961,23 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaSCTE35.enabled" />
             </template>
-            <el-switch
-              v-model="scte35OverwriteConfigValue.enabled"
-            />
+            <el-switch v-model="scte35OverwriteConfigValue.enabled" />
           </el-form-item>
           <el-form-item class="w-full">
             <template #label>
               <SSInformationLabel :label="$t('fast_channel.duration')" :info="schemaSCTE35.overwriteDuration" />
             </template>
-            <el-input-number
-              v-model="scte35OverwriteConfigValue.overwriteDuration"
-              :disabled="!scte35OverwriteConfigValue.enabled"
-              :min="1"
-              :max="180"
-              :precision="0"
-              class="w-full"
-            />
+            <el-input-number v-model="scte35OverwriteConfigValue.overwriteDuration"
+              :disabled="!scte35OverwriteConfigValue.enabled" :min="1" :max="180" :precision="0" class="w-full" />
           </el-form-item>
 
           <el-form-item class="w-full" label="Delay">
             <template #label>
-              <SSInformationLabel :label="$t('EventChannel.form.label.delay')" :info="schemaSCTE35.overwriteDelayTime" />
+              <SSInformationLabel :label="$t('EventChannel.form.label.delay')"
+                :info="schemaSCTE35.overwriteDelayTime" />
             </template>
-            <el-input-number
-              v-model="scte35OverwriteConfigValue.overwriteDelayTime"
-              :disabled="!scte35OverwriteConfigValue.enabled"
-              :min="0"
-              :max="60"
-              :precision="0"
-              class="w-full"
-            />
+            <el-input-number v-model="scte35OverwriteConfigValue.overwriteDelayTime"
+              :disabled="!scte35OverwriteConfigValue.enabled" :min="0" :max="60" :precision="0" class="w-full" />
           </el-form-item>
         </div>
       </el-collapse-item>
@@ -1019,40 +989,22 @@ async function handleApplyConfig(_value) {
         <template #label>
           <SSInformationLabel :label="$t('general.name')" :info="schemaObj.name" />
         </template>
-        <el-input
-          v-model="nameValue"
-          :placeholder="$t('library_preset.enter_name')"
-          autocomplete="off"
-          clearable
-          :minlength="1"
-          :maxlength="50"
-          show-word-limit
-        />
+        <el-input v-model="nameValue" :placeholder="$t('library_preset.enter_name')" autocomplete="off" clearable
+          :minlength="1" :maxlength="50" show-word-limit />
       </el-form-item>
       <el-form-item v-if="isShowType" class="flex-1" v-bind="typeAttrs">
         <template #label>
           <SSInformationLabel :label="$t('library_preset.type')" :info="schemaObj.type" />
         </template>
-        <el-select
-          v-model="typeValue"
-          class="w-full"
-          :disabled="!!defaultMediaType || mode === 'edit'"
-          @change="handleChangeType"
-        >
-          <el-option
-            v-for="(type, idx) in ['video', 'audio', 'data']"
-            :key="type + idx"
-            :value="type"
-            :label="type"
-          />
+        <el-select v-model="typeValue" class="w-full" :disabled="!!defaultMediaType || mode === 'edit'"
+          @change="handleChangeType">
+          <el-option v-for="(type, idx) in ['video', 'audio', 'data']" :key="type + idx" :value="type" :label="type" />
         </el-select>
       </el-form-item>
     </div>
 
-    <el-collapse
-      v-model="activeNames"
-      class="[&_.el-collapse-item\_\_content]:pb-0 [&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
-    >
+    <el-collapse v-model="activeNames"
+      class="[&_.el-collapse-item\_\_content]:pb-0 [&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600">
       <el-collapse-item v-if="typeValue" name="general">
         <template #title>
           <label for="" class="flex items-center gap-2 text-16px font-semibold">
@@ -1064,137 +1016,75 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel :label="$t('general.name')" :info="schemaObj.name" />
             </template>
-            <el-input
-              v-model="nameValue"
-              :placeholder="$t('library_preset.enter_name')"
-              autocomplete="off"
-              clearable
-              :minlength="1"
-              :maxlength="50"
-              show-word-limit
-            />
+            <el-input v-model="nameValue" :placeholder="$t('library_preset.enter_name')" autocomplete="off" clearable
+              :minlength="1" :maxlength="50" show-word-limit />
           </el-form-item>
           <el-form-item v-if="isShowType" class="max-w-190px min-w-190px" v-bind="typeAttrs">
             <template #label>
               <SSInformationLabel :label="$t('library_preset.type')" :info="schemaObj.type" />
             </template>
-            <el-select
-              v-model="typeValue"
-              class="w-full"
-              :disabled="!!defaultMediaType || mode === 'edit'"
-              @change="handleChangeType"
-            >
-              <el-option
-                v-for="(type, idx) in ['video', 'audio', 'data']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="typeValue" class="w-full" :disabled="!!defaultMediaType || mode === 'edit'"
+              @change="handleChangeType">
+              <el-option v-for="(type, idx) in ['video', 'audio', 'data']" :key="type + idx" :value="type"
+                :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="isConfigEncoder && typeValue === 'video'" class="[&_.el-form-item\_\_content]:block" v-bind="encoderAttrs">
+          <el-form-item v-if="isConfigEncoder && typeValue === 'video'" class="[&_.el-form-item\_\_content]:block"
+            v-bind="encoderAttrs">
             <template #label>
               <SSInformationLabel :label="$t('library_preset.encoder')" :info="schemaObj.encoderType" />
             </template>
-            <el-select
-              v-model="encoderValue"
-              :disabled="isPackage"
-              class="max-w-190px min-w-190px"
-              @change="handleChangeEncoder"
-            >
-              <el-option
-                v-for="(e, idx) in optionsEncoder"
-                :key="e + idx"
-                :value="e.value"
-                :label="e.label"
-              />
+            <el-select v-model="encoderValue" :disabled="isPackage" class="max-w-190px min-w-190px"
+              @change="handleChangeEncoder">
+              <el-option v-for="(e, idx) in optionsEncoder" :key="e + idx" :value="e.value" :label="e.label" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'video'"
-            class="max-w-190px min-w-190px"
-            label="Codec"
-            v-bind="videoCodecAttrs"
-          >
+          <el-form-item v-if="typeValue === 'video'" class="max-w-190px min-w-190px" label="Codec"
+            v-bind="videoCodecAttrs">
             <template #label>
               <SSInformationLabel label="Codec" :info="schemaObj.videoCodec" />
             </template>
-            <el-select
-              v-model="videoCodecValue"
-              class="max-w-190px min-w-190px"
-              default-first-option
-              :disabled="(isPackage && typeValue !== 'data' || disabledWithPTEConfig)"
-              @change="handleChangeVideoCodec"
-            >
-              <el-option
-                v-for="(type, idx) in codecSelection"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="videoCodecValue" class="max-w-190px min-w-190px" default-first-option
+              :disabled="(isPackage && typeValue !== 'data' || disabledWithPTEConfig)" @change="handleChangeVideoCodec">
+              <el-option v-for="(type, idx) in codecSelection" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
 
-          <el-form-item
-            v-if="typeValue === 'audio'"
-            class="max-w-190px min-w-190px"
-            label="Codec"
-            v-bind="audioCodecAttrs"
-          >
+          <el-form-item v-if="typeValue === 'audio'" class="max-w-190px min-w-190px" label="Codec"
+            v-bind="audioCodecAttrs">
             <template #label>
               <SSInformationLabel label="Codec" :info="schemaObj.audioCodec" />
             </template>
-            <el-select
-              v-model="audioCodecValue"
-              class="max-w-190px min-w-190px"
-              default-first-option
-              :disabled="isPackage"
-            >
-              <el-option
-                v-for="(type, idx) in codecSelection"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="audioCodecValue" class="max-w-190px min-w-190px" default-first-option
+              :disabled="isPackage">
+              <el-option v-for="(type, idx) in codecSelection" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'data'"
-            class="max-w-190px min-w-190px"
-            label="Codec"
-            v-bind="dataCodecAttrs"
-          >
+          <el-form-item v-if="typeValue === 'data'" class="max-w-190px min-w-190px" label="Codec"
+            v-bind="dataCodecAttrs">
             <template #label>
               <SSInformationLabel label="Codec" :info="schemaObj.dataCodec" />
             </template>
-            <el-select
-              v-model="dataCodecValue"
-              class="max-w-190px min-w-190px"
-              default-first-option
-              :disabled="isPackage"
-            >
-              <el-option
-                v-for="(type, idx) in codecSelection"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="dataCodecValue" class="max-w-190px min-w-190px" default-first-option
+              :disabled="isPackage">
+              <el-option v-for="(type, idx) in codecSelection" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="typeValue === 'video' && encoderValue === 'nvenc' && isCreateChannel && encoderValue !== 'passthrough' && configPte?.pte?.enable" name="pte">
+      <el-collapse-item
+        v-if="typeValue === 'video' && encoderValue === 'nvenc' && isCreateChannel && encoderValue !== 'passthrough' && configPte?.pte?.enable"
+        name="pte">
         <template #title>
           <label class="flex items-center gap-2 text-16px font-semibold">
-            PTE Config <span class="text-13px font-normal">({{ $t('base_library.used_in_video_encoding_with_ai-based_quality_assessment_to_optimize_efficiency_while_maintaining_visual_quality') }})</span>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="Recommended Configuration"
-              placement="top"
-            >
-              <div v-if="configPte?.pte?.path" class="h-20px w-20px flex items-center justify-center rounded-full bg-primary">
-                <div class="i-carbon:thumbs-up-filled mb-1px cursor-pointer text-light" @click.prevent.stop="isVisibleRecommend = true" />
+            PTE Config <span class="text-13px font-normal">({{
+              $t('base_library.used_in_video_encoding_with_ai-based_quality_assessment_to_optimize_efficiency_while_maintaining_visual_quality')
+            }})</span>
+            <el-tooltip class="box-item" effect="dark" content="Recommended Configuration" placement="top">
+              <div v-if="configPte?.pte?.path"
+                class="h-20px w-20px flex items-center justify-center rounded-full bg-primary">
+                <div class="i-carbon:thumbs-up-filled mb-1px cursor-pointer text-light"
+                  @click.prevent.stop="isVisibleRecommend = true" />
               </div>
             </el-tooltip>
           </label>
@@ -1204,57 +1094,35 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Enable" :info="schemaObj.pteEnabled" />
             </template>
-            <el-switch
-              v-model="defaultPTEValue"
-              :disabled="!configPte?.pte?.enable"
-              @change="defaultPTEConfig"
-            />
+            <el-switch v-model="defaultPTEValue" :disabled="!configPte?.pte?.enable" @change="defaultPTEConfig" />
           </el-form-item>
           <el-form-item label="vmafMax" class="max-w-190px min-w-190px" v-bind="vmafMaxAttrs">
             <template #label>
               <SSInformationLabel label="vmafMax" :info="schemaObj.vmafMax" />
             </template>
-            <el-input-number
-              v-model="vmafMaxValue"
-              :disabled="!defaultPTEValue"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :controls="false"
-              :precision="2"
-              :max="96"
-              :min="vmafMinValue || 89"
-            />
+            <el-input-number v-model="vmafMaxValue" :disabled="!defaultPTEValue"
+              class="w-full [&_.el-input\_\_inner]:text-start" :controls="false" :precision="2" :max="96"
+              :min="vmafMinValue || 89" />
           </el-form-item>
           <el-form-item label="vmafMin" class="max-w-190px min-w-190px" v-bind="vmafMinAttrs">
             <template #label>
               <SSInformationLabel label="vmafMin" :info="schemaObj.vmafMin" />
             </template>
-            <el-input-number
-              v-model="vmafMinValue"
-              :disabled="!defaultPTEValue"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :controls="false"
-              :precision="2"
-              :max="vmafMaxValue || 96"
-              :min="89"
-            />
+            <el-input-number v-model="vmafMinValue" :disabled="!defaultPTEValue"
+              class="w-full [&_.el-input\_\_inner]:text-start" :controls="false" :precision="2"
+              :max="vmafMaxValue || 96" :min="89" />
           </el-form-item>
           <el-form-item label="vmafThres" class="max-w-190px min-w-190px" v-bind="vmafThresAttrs">
             <template #label>
               <SSInformationLabel label="vmafThres" :info="schemaObj.vmafThres" />
             </template>
-            <el-input-number
-              v-model="vmafThresValue"
-              :disabled="!defaultPTEValue"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :controls="false"
-              :max="1"
-              :min="0.5"
-              :precision="2"
-            />
+            <el-input-number v-model="vmafThresValue" :disabled="!defaultPTEValue"
+              class="w-full [&_.el-input\_\_inner]:text-start" :controls="false" :max="1" :min="0.5" :precision="2" />
           </el-form-item>
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="scte35 && ['copy', 'scte35'].includes(dataCodecValue) && encoderValue !== 'passthrough'" name="scte35">
+      <el-collapse-item v-if="scte35 && ['copy', 'scte35'].includes(dataCodecValue) && encoderValue !== 'passthrough'"
+        name="scte35">
         <template #title>
           <label for="" class="flex items-center gap-2 text-16px font-semibold">
             Overwrite SCTE35
@@ -1266,36 +1134,23 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaSCTE35.enabled" />
             </template>
-            <el-switch
-              v-model="scte35OverwriteConfigValue.enabled"
-            />
+            <el-switch v-model="scte35OverwriteConfigValue.enabled" />
           </el-form-item>
           <el-form-item class="w-full">
             <template #label>
               <SSInformationLabel :label="$t('fast_channel.duration')" :info="schemaSCTE35.overwriteDuration" />
             </template>
-            <el-input-number
-              v-model="scte35OverwriteConfigValue.overwriteDuration"
-              :disabled="!scte35OverwriteConfigValue.enabled"
-              :min="1"
-              :max="180"
-              :precision="0"
-              class="w-full"
-            />
+            <el-input-number v-model="scte35OverwriteConfigValue.overwriteDuration"
+              :disabled="!scte35OverwriteConfigValue.enabled" :min="1" :max="180" :precision="0" class="w-full" />
           </el-form-item>
 
           <el-form-item class="w-full" :label="$t('EventChannel.form.label.delay')">
             <template #label>
-              <SSInformationLabel :label="$t('EventChannel.form.label.delay')" :info="schemaSCTE35.overwriteDelayTime" />
+              <SSInformationLabel :label="$t('EventChannel.form.label.delay')"
+                :info="schemaSCTE35.overwriteDelayTime" />
             </template>
-            <el-input-number
-              v-model="scte35OverwriteConfigValue.overwriteDelayTime"
-              :disabled="!scte35OverwriteConfigValue.enabled"
-              :min="0"
-              :max="60"
-              :precision="0"
-              class="w-full"
-            />
+            <el-input-number v-model="scte35OverwriteConfigValue.overwriteDelayTime"
+              :disabled="!scte35OverwriteConfigValue.enabled" :min="0" :max="60" :precision="0" class="w-full" />
           </el-form-item>
         </div>
       </el-collapse-item>
@@ -1307,121 +1162,60 @@ async function handleApplyConfig(_value) {
         </template>
 
         <div class="flex flex-wrap gap-2">
-          <el-form-item v-if="isConfigEncoder && typeValue === 'video' && encoderValue !== 'passthrough' && !isPackage" class="max-w-190px min-w-190px" v-bind="presetAttrs">
+          <el-form-item v-if="isConfigEncoder && typeValue === 'video' && encoderValue !== 'passthrough' && !isPackage"
+            class="max-w-190px min-w-190px" v-bind="presetAttrs">
             <template #label>
               <SSInformationLabel label="Preset" :info="schemaObj.videoPreset" />
             </template>
             <el-select v-model="presetValue" class="w-full">
-              <el-option
-                v-for="(e) in optionsPreset"
-                :key="e.value"
-                :value="e.value"
-                :label="e.label"
-              />
+              <el-option v-for="(e) in optionsPreset" :key="e.value" :value="e.value" :label="e.label" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'video'"
-            label="Pixel format"
-            class="max-w-190px min-w-190px"
-            v-bind="pixelFormatAttrs"
-          >
+          <el-form-item v-if="typeValue === 'video'" label="Pixel format" class="max-w-190px min-w-190px"
+            v-bind="pixelFormatAttrs">
             <template #label>
               <SSInformationLabel label="Pixel format" :info="schemaObj.pixelFormat" />
             </template>
-            <el-select
-              v-model="pixelFormatValue"
-              :disabled="isCopiedVideoCodec"
-              class="w-full"
-              clearable
-              @change="(value) => setUndefined('pixel', value)"
-            >
-              <el-option
-                v-for="(type, idx) in ['yuv420p', 'yuv444p', 'yuv420p10le', 'yuv444p10le']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="pixelFormatValue" :disabled="isCopiedVideoCodec" class="w-full" clearable
+              @change="(value) => setUndefined('pixel', value)">
+              <el-option v-for="(type, idx) in ['yuv420p', 'yuv444p', 'yuv420p10le', 'yuv444p10le']" :key="type + idx"
+                :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'video'"
-            class="max-w-190px min-w-190px"
-            label="Profile"
-            v-bind="profileAttrs"
-          >
+          <el-form-item v-if="typeValue === 'video'" class="max-w-190px min-w-190px" label="Profile"
+            v-bind="profileAttrs">
             <template #label>
               <SSInformationLabel label="Profile" :info="schemaObj.videoProfile" />
             </template>
-            <el-select
-              v-model="profileValue"
-              :disabled="isCopiedVideoCodec"
-              class="w-full"
-              default-first-option
-              clearable
-              @change="(value) => setUndefined('profile', value)"
-            >
-              <el-option
-                v-for="(type, idx) in optionsProfile"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="profileValue" :disabled="isCopiedVideoCodec" class="w-full" default-first-option
+              clearable @change="(value) => setUndefined('profile', value)">
+              <el-option v-for="(type, idx) in optionsProfile" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'audio'"
-            class="max-w-190px min-w-190px"
-            label="Profile"
-            v-bind="audioProfileAttrs"
-          >
+          <el-form-item v-if="typeValue === 'audio'" class="max-w-190px min-w-190px" label="Profile"
+            v-bind="audioProfileAttrs">
             <template #label>
               <SSInformationLabel label="Profile" :info="schemaObj.audioProfile" />
             </template>
-            <el-select
-              v-model="audioProfileValue"
-              :disabled="isCopiedVideoCodec"
-              class="w-full"
-              default-first-option
-              clearable
-              @change="(value) => setUndefined('audioProfile', value)"
-            >
-              <el-option
-                v-for="(type, idx) in ['aac_low', 'aac_he', 'aac_he_v2', 'aac_main', 'aac_ld', 'aac_eld']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="audioProfileValue" :disabled="isCopiedVideoCodec" class="w-full" default-first-option
+              clearable @change="(value) => setUndefined('audioProfile', value)">
+              <el-option v-for="(type, idx) in ['aac_low', 'aac_he', 'aac_he_v2', 'aac_main', 'aac_ld', 'aac_eld']"
+                :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="typeValue === 'video'"
-            class="max-w-190px min-w-190px"
-            label="Level"
-            v-bind="levelAttrs"
-          >
+          <el-form-item v-if="typeValue === 'video'" class="max-w-190px min-w-190px" label="Level" v-bind="levelAttrs">
             <template #label>
               <SSInformationLabel label="Level" :info="schemaObj.videoLevel" />
             </template>
-            <el-select
-              v-model="levelValue"
-              :disabled="isCopiedVideoCodec"
-              class="w-full"
-              default-first-option
-              clearable
-              @change="(value) => setUndefined('level', value)"
-            >
-              <el-option
-                v-for="(type, idx) in optionsLevel"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="levelValue" :disabled="isCopiedVideoCodec" class="w-full" default-first-option clearable
+              @change="(value) => setUndefined('level', value)">
+              <el-option v-for="(type, idx) in optionsLevel" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'" title="Detail Information" name="output_aspect">
+      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'"
+        title="Detail Information" name="output_aspect">
         <template #title>
           <label class="flex items-center gap-2 text-16px font-semibold">
             {{ $t('SSConfig.aspect_ratio') }}
@@ -1433,19 +1227,10 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Aspect Ratio Mode" :info="schemaObj.aspectRatioMode" />
             </template>
-            <el-select
-              v-model="aspectRatioModeValue"
-              class="w-full"
-              :disabled="isCopiedVideoCodec"
-            >
-              <el-option
-                v-for="(type, idx) in [
-                  'auto', 'custom', 'source',
-                ]"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="aspectRatioModeValue" class="w-full" :disabled="isCopiedVideoCodec">
+              <el-option v-for="(type, idx) in [
+                'auto', 'custom', 'source',
+              ]" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
 
@@ -1453,35 +1238,22 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Aspect Ratio Width" :info="schemaObj.aspectRatioWidth" />
             </template>
-            <el-input-number
-              v-model="aspectRatioWidthValue"
-              :min="1"
-              :max="1000"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="aspectRatioModeValue !== 'custom'"
-              :precision="0"
-              :controls="false"
-              step-strictly
-            />
+            <el-input-number v-model="aspectRatioWidthValue" :min="1" :max="1000"
+              class="w-full [&_.el-input\_\_inner]:text-start" :disabled="aspectRatioModeValue !== 'custom'"
+              :precision="0" :controls="false" step-strictly />
           </el-form-item>
           <el-form-item label="Aspect Ratio Height" class="max-w-190px min-w-190px" v-bind="aspectRatioHeightAttrs">
             <template #label>
               <SSInformationLabel label="Aspect Ratio Height" :info="schemaObj.aspectRatioHeight" />
             </template>
-            <el-input-number
-              v-model="aspectRatioHeightValue"
-              :min="1"
-              :max="1000"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="aspectRatioModeValue !== 'custom'"
-              :precision="0"
-              :controls="false"
-              step-strictly
-            />
+            <el-input-number v-model="aspectRatioHeightValue" :min="1" :max="1000"
+              class="w-full [&_.el-input\_\_inner]:text-start" :disabled="aspectRatioModeValue !== 'custom'"
+              :precision="0" :controls="false" step-strictly />
           </el-form-item>
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'" title="Detail Information" name="aspect">
+      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'"
+        title="Detail Information" name="aspect">
         <template #title>
           <label class="flex items-center gap-2 text-16px font-semibold">
             {{ $t('Channel.output_aspect_ratio') }}
@@ -1492,57 +1264,31 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Width" :info="schemaObj.width" />
             </template>
-            <el-input-number
-              v-model="widthValue"
-              :min="0"
-              :max="7680"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="isCopiedVideoCodec"
-              :precision="0"
-              :controls="false"
-              step-strictly
-            />
+            <el-input-number v-model="widthValue" :min="0" :max="7680" class="w-full [&_.el-input\_\_inner]:text-start"
+              :disabled="isCopiedVideoCodec" :precision="0" :controls="false" step-strictly />
           </el-form-item>
 
           <el-form-item label="Height" class="max-w-190px min-w-190px" v-bind="heightAttrs">
             <template #label>
               <SSInformationLabel label="Height" :info="schemaObj.height" />
             </template>
-            <el-input-number
-              v-model="heightValue"
-              :min="0"
-              :max="4320"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="isCopiedVideoCodec"
-              :precision="0"
-              :controls="false"
-              step-strictly
-            />
+            <el-input-number v-model="heightValue" :min="0" :max="4320" class="w-full [&_.el-input\_\_inner]:text-start"
+              :disabled="isCopiedVideoCodec" :precision="0" :controls="false" step-strictly />
           </el-form-item>
           <el-form-item label="Scale Type" class="max-w-190px min-w-190px" v-bind="scaleTypeAttrs">
             <template #label>
               <SSInformationLabel label="Scale Type" :info="schemaObj.scaleType" />
             </template>
-            <el-select
-              v-model="scaleTypeValue"
-              class="w-full"
-              :disabled="isCopiedVideoCodec"
-              clearable
-              @change="(value) => setUndefined('scale', value)"
-            >
-              <el-option
-                v-for="(type, idx) in [
-                  'fitWidth',
-                  'fitHeight',
-                  'fitInside',
-                  'fitCrop',
-                  'fitBoth',
-                  'source',
-                ]"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="scaleTypeValue" class="w-full" :disabled="isCopiedVideoCodec" clearable
+              @change="(value) => setUndefined('scale', value)">
+              <el-option v-for="(type, idx) in [
+                'fitWidth',
+                'fitHeight',
+                'fitInside',
+                'fitCrop',
+                'fitBoth',
+                'source',
+              ]" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
@@ -1560,32 +1306,16 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="FPS" :info="schemaObj.fps" />
             </template>
-            <el-input-number
-              v-model="fpsValue"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="isCopiedVideoCodec"
-              :precision="0"
-              :controls="false"
-              step-strictly
-            />
+            <el-input-number v-model="fpsValue" class="w-full [&_.el-input\_\_inner]:text-start"
+              :disabled="isCopiedVideoCodec" :precision="0" :controls="false" step-strictly />
           </el-form-item>
           <el-form-item label="Scan Type" class="max-w-190px min-w-190px" v-bind="scanTypeAttrs">
             <template #label>
               <SSInformationLabel label="Scan Type" :info="schemaObj.scanType" />
             </template>
-            <el-select
-              v-model="scanTypeValue"
-              class="w-full"
-              :disabled="isCopiedVideoCodec"
-              clearable
-              @change="(value) => setUndefined('scan', value)"
-            >
-              <el-option
-                v-for="(type) in optionScanType"
-                :key="type.value"
-                :value="type.value"
-                :label="type.value"
-              />
+            <el-select v-model="scanTypeValue" class="w-full" :disabled="isCopiedVideoCodec" clearable
+              @change="(value) => setUndefined('scan', value)">
+              <el-option v-for="(type) in optionScanType" :key="type.value" :value="type.value" :label="type.value" />
             </el-select>
           </el-form-item>
         </div>
@@ -1602,22 +1332,12 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Rate control mode" :info="schemaObj.rateControlMode" />
             </template>
-            <el-select
-              v-model="rateControlModeValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              clearable
-              @change="(value) => setUndefined('rateControlMode', value)"
-            >
-              <el-option
-                v-for="(type, idx) in [
-                  'cbr',
-                  'vbr',
-                ]"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="rateControlModeValue" class="max-w-190px min-w-190px flex-1"
+              :disabled="isCopiedVideoCodec" clearable @change="(value) => setUndefined('rateControlMode', value)">
+              <el-option v-for="(type, idx) in [
+                'cbr',
+                'vbr',
+              ]" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
 
@@ -1625,83 +1345,48 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Constant quality" min-width="min-w-112px" :info="schemaObj.cq" />
             </template>
-            <el-input-number
-              v-model="cqValue"
-              :controls="false"
-              :precision="0"
+            <el-input-number v-model="cqValue" :controls="false" :precision="0"
               class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="isCopiedVideoCodec || rateControlModeValue !== 'vbr'"
-              :min="0"
-              :max="51"
-            />
+              :disabled="isCopiedVideoCodec || rateControlModeValue !== 'vbr'" :min="0" :max="51" />
           </el-form-item>
           <el-form-item label="RC" class="max-w-190px min-w-190px flex-1" v-bind="rcAttrs">
             <template #label>
               <SSInformationLabel label="RC" :info="schemaObj.rc" />
             </template>
-            <el-select
-              v-model="rcValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec || isDisabledRc"
-              clearable
-              @change="(value) => setUndefined('rc', value)"
-            >
-              <el-option
-                v-for="(type, idx) in optionRc"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="rcValue" class="max-w-190px min-w-190px flex-1"
+              :disabled="isCopiedVideoCodec || isDisabledRc" clearable @change="(value) => setUndefined('rc', value)">
+              <el-option v-for="(type, idx) in optionRc" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="encoderValue !== 'passthrough' && !isPackage" class="max-w-190px min-w-190px flex-1" v-bind="videoRateAttrs">
+          <el-form-item v-if="encoderValue !== 'passthrough' && !isPackage" class="max-w-190px min-w-190px flex-1"
+            v-bind="videoRateAttrs">
             <template #label>
               <SSInformationLabel label="Bitrate" :info="schemaObj.videoBitrate" />
             </template>
-            <el-input
-              v-model="videoRateValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="videoRateValue" class="max-w-190px min-w-190px flex-1" :disabled="isCopiedVideoCodec"
+              :formatter="formatter" :parser="parser" />
           </el-form-item>
           <el-form-item v-bind="minrateAttrs" class="max-w-190px min-w-190px flex-1">
             <template #label>
               <SSInformationLabel label="Minrate" :info="schemaObj.minrate" />
             </template>
-            <el-input
-              v-model="minrateValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="minrateValue" class="max-w-190px min-w-190px flex-1" :disabled="isCopiedVideoCodec"
+              :formatter="formatter" :parser="parser" />
           </el-form-item>
 
           <el-form-item v-bind="maxrateAttrs" class="max-w-190px min-w-190px flex-1">
             <template #label>
               <SSInformationLabel label="Maxrate" :info="schemaObj.maxrate" />
             </template>
-            <el-input
-              v-model="maxrateValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="maxrateValue" class="max-w-190px min-w-190px flex-1" :disabled="isCopiedVideoCodec"
+              :formatter="formatter" :parser="parser" />
           </el-form-item>
           <el-form-item v-bind="bufsizeAttrs" class="max-w-190px min-w-190px flex-1">
             <template #label>
               <SSInformationLabel label="Bufsize" :info="schemaObj.bufsize" />
             </template>
-            <el-input
-              v-model="bufsizeValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="bufsizeValue" class="max-w-190px min-w-190px flex-1" :disabled="isCopiedVideoCodec"
+              :formatter="formatter" :parser="parser" />
           </el-form-item>
         </div>
         <div v-if="typeValue === 'audio'" class="flex flex-wrap gap-2">
@@ -1709,58 +1394,25 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Bitrate" :info="schemaObj.audioBitrate" />
             </template>
-            <el-input
-              v-model="audioRateValue"
-              class="max-w-190px min-w-190px flex-1"
-              :disabled="isCopiedVideoCodec"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="audioRateValue" class="max-w-190px min-w-190px flex-1" :disabled="isCopiedVideoCodec"
+              :formatter="formatter" :parser="parser" />
           </el-form-item>
 
-          <el-form-item
-            v-if="!isPackage"
-            class="max-w-190px min-w-190px flex-1"
-            label="Sample rate"
-            v-bind="sampleRateAttrs"
-          >
+          <el-form-item v-if="!isPackage" class="max-w-190px min-w-190px flex-1" label="Sample rate"
+            v-bind="sampleRateAttrs">
             <template #label>
               <SSInformationLabel label="Sample rate" :info="schemaObj.sampleRate" />
             </template>
-            <el-select
-              v-model="sampleRateValue"
-              :disabled="isCopiedAudioCodec"
-              class="w-full"
-              default-first-option
-            >
-              <el-option
-                v-for="(type, idx) in [44100, 48000]"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="sampleRateValue" :disabled="isCopiedAudioCodec" class="w-full" default-first-option>
+              <el-option v-for="(type, idx) in [44100, 48000]" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="!isPackage"
-            class="max-w-190px min-w-190px flex-1"
-            label="Channel"
-            v-bind="channelAttrs"
-          >
+          <el-form-item v-if="!isPackage" class="max-w-190px min-w-190px flex-1" label="Channel" v-bind="channelAttrs">
             <template #label>
               <SSInformationLabel label="Channel" :info="schemaObj.channel" />
             </template>
-            <el-select
-              v-model="channelValue"
-              :disabled="isCopiedAudioCodec"
-              class="w-full"
-            >
-              <el-option
-                v-for="(type, idx) in [1, 2, 6]"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="channelValue" :disabled="isCopiedAudioCodec" class="w-full">
+              <el-option v-for="(type, idx) in [1, 2, 6]" :key="type + idx" :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
@@ -1777,18 +1429,10 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Hdr" :info="schemaObj.hdr" />
             </template>
-            <el-select
-              v-model="hdrValue"
-              :disabled="isCopiedVideoCodec"
-              clearable
-              @change="(value) => setUndefined('hdr', value)"
-            >
-              <el-option
-                v-for="(type, idx) in ['COPY', 'NONE', 'HDR10', 'HLG10', 'PQ10']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="hdrValue" :disabled="isCopiedVideoCodec" clearable
+              @change="(value) => setUndefined('hdr', value)">
+              <el-option v-for="(type, idx) in ['COPY', 'NONE', 'HDR10', 'HLG10', 'PQ10']" :key="type + idx"
+                :value="type" :label="type" />
             </el-select>
           </el-form-item>
         </div>
@@ -1806,55 +1450,31 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel label="Bframe" :info="schemaObj.bframe" />
             </template>
-            <el-input-number
-              v-model="bframeValue"
-              class="w-full [&_.el-input\_\_inner]:text-start"
-              :disabled="isCopiedVideoCodec"
-              :controls="false"
-              :precision="1"
-              :step="0.1"
-              :max="3"
-              :min="0"
-            />
+            <el-input-number v-model="bframeValue" class="w-full [&_.el-input\_\_inner]:text-start"
+              :disabled="isCopiedVideoCodec" :controls="false" :precision="1" :step="0.1" :max="3" :min="0" />
           </el-form-item>
           <el-form-item label="Gop structure mode" class="max-w-190px min-w-190px" v-bind="gopModeAttrs">
             <template #label>
               <SSInformationLabel label="Gop structure mode" :info="schemaObj.gopMode" />
             </template>
-            <el-select
-              v-model="gopModeValue"
-              class="w-full"
-              :disabled="isCopiedVideoCodec"
-              clearable
-              @change="gopValue = undefined"
-            >
-              <el-option
-                v-for="(type, idx) in optionGopMode"
-                :key="type + idx"
-                :value="type.value"
-                :label="type.label"
-              />
+            <el-select v-model="gopModeValue" class="w-full" :disabled="isCopiedVideoCodec" clearable
+              @change="gopValue = undefined">
+              <el-option v-for="(type, idx) in optionGopMode" :key="type + idx" :value="type.value"
+                :label="type.label" />
             </el-select>
           </el-form-item>
           <el-form-item label="Gop size" class="max-w-190px min-w-190px" v-bind="gopAttrs">
             <template #label>
               <SSInformationLabel label="Gop size" :info="schemaObj.gopMode" />
             </template>
-            <el-input
-              v-model="gopValue"
-              :disabled="isCopiedVideoCodec || isDisabledGopSize"
-              :formatter="formatter"
-              :parser="parser"
-            />
+            <el-input v-model="gopValue" :disabled="isCopiedVideoCodec || isDisabledGopSize" :formatter="formatter"
+              :parser="parser" />
           </el-form-item>
           <el-form-item label="FixedGOP" class="max-w-190px min-w-190px" v-bind="fixedGOPAttrs">
             <template #label>
               <SSInformationLabel label="FixedGOP" :info="schemaObj.fixedGOP" />
             </template>
-            <el-switch
-              v-model="fixedGOPValue"
-              :disabled="disabledWithPTEConfig"
-            />
+            <el-switch v-model="fixedGOPValue" :disabled="disabledWithPTEConfig" />
           </el-form-item>
         </div>
       </el-collapse-item>
@@ -1870,72 +1490,38 @@ async function handleApplyConfig(_value) {
             <template #label>
               <SSInformationLabel :label="$t('general.groupId')" :info="schemaObj.name" />
             </template>
-            <el-input
-              v-model="groupIdValue"
-              :placeholder="$t('library_preset.enter_group_id')"
-              autocomplete="off"
-              clearable
-              :maxlength="50"
-              show-word-limit
-            />
+            <el-input v-model="groupIdValue" :placeholder="$t('library_preset.enter_group_id')" autocomplete="off"
+              clearable :maxlength="50" show-word-limit />
           </el-form-item>
-          <el-form-item
-            v-if="!isPackage"
-            class="max-w-190px min-w-190px"
-            label="Volume"
-            v-bind="volumeAttrs"
-          >
+          <el-form-item v-if="!isPackage" class="max-w-190px min-w-190px" label="Volume" v-bind="volumeAttrs">
             <template #label>
               <SSInformationLabel label="Volume" :info="schemaObj.volume" />
             </template>
-            <el-select
-              v-model="volumeValue"
-              :disabled="isCopiedAudioCodec"
-              class="w-full"
-              default-first-option
-              clearable
-              @change="(value) => setUndefined('volume', value)"
-            >
-              <el-option
-                v-for="(type, idx) in ['+5dB', '-10dB', '0.5', '2', 'loudnorm']"
-                :key="type + idx"
-                :value="type"
-                :label="type"
-              />
+            <el-select v-model="volumeValue" :disabled="isCopiedAudioCodec" class="w-full" default-first-option
+              clearable @change="(value) => setUndefined('volume', value)">
+              <el-option v-for="(type, idx) in ['+5dB', '-10dB', '0.5', '2', 'loudnorm']" :key="type + idx"
+                :value="type" :label="type" />
             </el-select>
           </el-form-item>
           <el-form-item class="max-w-190px min-w-190px" :label="$t('profile.language')" v-bind="languageAttrs">
             <template #label>
               <SSInformationLabel :label="$t('profile.language')" :info="schemaObj.language" />
             </template>
-            <el-select-v2
-              v-model="languageValue"
-              :options="optionsLang"
-              placeholder="Select"
-            />
+            <el-select-v2 v-model="languageValue" :options="optionsLang" placeholder="Select" />
           </el-form-item>
           <el-form-item class="max-w-190px min-w-190px" :label="$t('profile.label')" v-bind="labelAttrs">
             <template #label>
               <SSInformationLabel :label="$t('profile.label')" :info="schemaObj.label" />
             </template>
-            <el-input
-              v-model="labelValue"
-              :disabled="isCopiedAudioCodec && !isPackage"
-              :placeholder="$t('profile.placeholder_label')"
-              autocomplete="off"
-              clearable
-              show-word-limit
-              maxlength="50"
-              @change="(value) => setUndefined('label', value)"
-            />
+            <el-input v-model="labelValue" :disabled="isCopiedAudioCodec && !isPackage"
+              :placeholder="$t('profile.placeholder_label')" autocomplete="off" clearable show-word-limit maxlength="50"
+              @change="(value) => setUndefined('label', value)" />
           </el-form-item>
           <el-form-item class="max-w-190px min-w-190px" :label="$t('profile.default')" v-bind="defaultAttrs">
             <template #label>
               <SSInformationLabel :label="$t('profile.default')" :info="schemaObj.audioDefault" />
             </template>
-            <el-switch
-              v-model="defaultValue"
-            />
+            <el-switch v-model="defaultValue" />
           </el-form-item>
         </div>
       </el-collapse-item>
@@ -1953,5 +1539,6 @@ async function handleApplyConfig(_value) {
     </el-button>
   </DevOnly>
 
-  <SSRecommendedConfigurationPTE v-if="isVisibleRecommend" v-model:visible="isVisibleRecommend" @apply-config="handleApplyConfig" />
+  <SSRecommendedConfigurationPTE v-if="isVisibleRecommend" v-model:visible="isVisibleRecommend"
+    @apply-config="handleApplyConfig" />
 </template>