@sigmaott/base-next 1.0.6

package/src/components/Channel/PresetConfigItem.vue

@@ -0,0 +1,1957 @@
+<script lang="ts" setup>
+import { langOptions } from '@sigma-streaming/base/src/constants/languageCode'
+
+const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'CreatePresetDto')
+const { schemaObj: schemaSCTE35 } = useAsyncSchema('/api/transcode/api-docs-json', 'PresetScte35OverwriteDto')
+
+const { defaultMediaType, isPackage, prop, encoderOptions, videoCodecs, mode, isConfigEncoder, isShowType, scte35 } = definePropsRefs<{
+  defaultMediaType?: 'video' | 'audio' | 'data'
+  isPackage?: boolean
+  prop?: string
+  videoCodecs?: Record<string, string>
+  encoderOptions?: any
+  mode?: 'create' | 'edit' | 'clone'
+  isConfigEncoder?: boolean
+  isShowType?: boolean
+  scte35?: boolean
+}>()
+
+const { t } = useI18n()
+const { formRef } = useElFormContext()
+
+function getProp(key: string) {
+  return () => prop.value ? `${prop.value}.${key}` : key
+}
+
+const encoderIdValue = ref(inject('encoderIdValue'))
+const mappingEncoder = {
+  open_h264: 'OpenH264',
+  open_hevc: 'OpenHEVC',
+  nvenc: 'NVENC',
+  passthrough: 'Passthrough',
+}
+
+const triggerAction = ref(inject('triggerAction'))
+const optionsEncoder = computed(() => {
+  if (encoderOptions.value) {
+    return encoderOptions.value
+  }
+  const value = encoderIdValue.value
+
+  // TH1: encoderIdValue === -1
+  if ((value === -1 || value === 'cpu') && triggerAction.value !== 'edit') {
+    return [
+      { label: 'OpenH264', value: 'open_h264' },
+      { label: 'OpenHEVC', value: 'open_hevc' },
+      { label: 'Passthrough', value: 'passthrough' },
+    ]
+  }
+
+  // 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') {
+    return [
+      { label: 'OpenH264', value: 'open_h264' },
+      { label: 'OpenHEVC', value: 'open_hevc' },
+      { label: 'NVENC', value: 'nvenc' },
+      // { label: 'Aurora4', value: 'aurora4' },
+      { label: 'Passthrough', value: 'passthrough' },
+    ]
+  }
+
+  // Mặc định cho các giá trị khác (ví dụ: 0, 1, 2, 3,...)
+  return [
+    { label: 'NVENC', value: 'nvenc' },
+    { label: 'Passthrough', value: 'passthrough' },
+  ]
+})
+
+function findFirstMatchingEncoder(options) {
+  return options?.find(item =>
+    optionsEncoder.value?.some(option => option.value === item),
+  )
+}
+
+const profilesValue = ref(inject('profilesValue'))
+function areAllEncoderTypesSame(profiles, newEncoderType?: string) {
+  const encoderTypes = newEncoderType ? [newEncoderType] : []
+
+  for (const profile of profiles) {
+    for (const preset of profile.presets || []) {
+      if (preset.encoderType)
+        encoderTypes.push(preset.encoderType)
+    }
+  }
+
+  if (encoderTypes.length === 0)
+    return true
+
+  return encoderTypes?.filter(Boolean)?.every(type => type === encoderTypes[0])
+}
+
+const isVisibleRecommend = ref(false)
+const [typeValue, typeAttrs] = useElField<string>(getProp('type'), [
+  {
+    required: true,
+    message: t('library_preset.type_is_required'),
+  },
+])
+const [encoderValue, encoderAttrs] = useElField<string | undefined>(getProp('encoderType'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (_rule, value: string, callback: any) => {
+      const encoderTypes = profilesValue.value?.flatMap(profile =>
+        (profile.presets || []).map(preset => preset.encoderType),
+      )
+      const commonEncoder = findFirstMatchingEncoder(encoderTypes)
+
+      if (!value || value.trim().length === 0) {
+        callback(new Error(t('library_preset.preset_encoder_is_required')))
+      }
+      else if (!optionsEncoder.value.some(option => option.value === value)) {
+        callback(new Error(t('base_library.encoder_not_supported_please_select_encoder_again')))
+      }
+      else if (profilesValue.value && triggerAction.value !== 'edit' && value !== commonEncoder && !areAllEncoderTypesSame(profilesValue.value, value)) {
+        if (commonEncoder && encoderTypes.length > 0)
+          callback(new Error(t('base_libray.all_profiles_must_have_the_same_video_encoder_data_please_proceed_with_data_sync', [mappingEncoder[commonEncoder] ? `, ${$t('base_library.currently_is')} ${mappingEncoder[commonEncoder]}` : ''])))
+        else
+          callback(new Error($t('base_library.the_encoder_of_the_profile_that_was_previously_created_or_taken_from_the_template_is_not_supported_please_re-select_a_valid_encoder_outside_the_channel_configuration')))
+      }
+      else {
+        callback()
+      }
+      callback()
+    },
+  },
+])
+const [presetValue, presetAttrs] = useElField<string | undefined>(getProp('videoPreset'), [
+  {
+    required: true,
+    message: t('library_preset.preset_is_required'),
+  },
+])
+const [nameValue, nameAttrs] = useElField<string>(getProp('name'), [
+  {
+    required: true,
+    validator: nameValidatorLow(t('library_preset.name')),
+    trigger: ['blur', 'change'],
+  },
+])
+const [groupIdValue, groupIdAttrs] = useElField<string>(getProp('audioGroup'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!/^[\w-\s]*$/.test(value))
+        callback(new Error(t('library_preset.group_id')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [defaultPTEValue, defaultPTEAttrs] = useElField(getProp('pteEnabled'), [])
+const [vmafMaxValue, vmafMaxAttrs] = useElField(getProp('vmafMax'), [
+  {
+    trigger: ['blur', 'change'],
+    required: true,
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('base_libarry.please_input_vmafmax')))
+      else if (value < 89 || value > 96)
+        callback(new Error(t('base_library.vmafmax_must_not_be_less_than_89_and_greater_than_96')))
+      else
+        callback()
+    },
+  },
+], { enabled: defaultPTEValue })
+const [vmafMinValue, vmafMinAttrs] = useElField(getProp('vmafMin'), [
+  {
+    trigger: ['blur', 'change'],
+    required: true,
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('base_libarry.please_input_vmafmin')))
+      else if (value < 89 || value > 96)
+        callback(new Error(t('base_library.vmafmin_must_not_be_less_than_89_and_greater_than_96')))
+      else
+        callback()
+    },
+  },
+], { enabled: defaultPTEValue })
+const [vmafThresValue, vmafThresAttrs] = useElField(getProp('vmafThres'), [
+  {
+    required: true,
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('base_libarry.please_input_vmafthres')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], { enabled: defaultPTEValue })
+
+const [videoCodecValue, videoCodecAttrs] = useElField<string | undefined>(getProp('videoCodec'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('please_select_codec')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+const [audioCodecValue, audioCodecAttrs] = useElField<string | undefined>(getProp('audioCodec'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('please_select_codec')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+const [dataCodecValue, dataCodecAttrs] = useElField<string | undefined>(getProp('dataCodec'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('please_select_codec')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+
+const enableValid = computed(() => {
+  return !!(audioCodecValue.value !== 'copy') as boolean
+})
+const [descriptionValue, descriptionAttrs] = useElField<string>(getProp('description'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!/^[\w-\s]*$/.test(value))
+        callback(new Error(t('description.format_description')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [minrateValue, minrateAttrs] = useElField<number | undefined>(getProp('minrate'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (typeValue.value === 'video' && (convertStringToNumber(value || 0) < 64000))
+        callback(new Error($t('minrate_khong_duoc_lon_hon_bitrate')))
+      else if (typeValue.value === 'video' && (convertStringToNumber(value) < 64000))
+        callback(new Error($t('minrate_khong_duoc_lon_hon_bitrate')))
+      else
+        callback()
+    },
+  },
+])
+
+const [videoRateValue, videoRateAttrs] = useElField<number | undefined>(getProp('videoBitrate'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('library_preset.video_is_required')))
+      else if (convertStringToNumber(minrateValue.value || 0) >= convertStringToNumber(value))
+        callback(new Error($t('bitrate_khong_duoc_be_hon_minrate')))
+      else if (convertStringToNumber(value) > 60000000)
+        callback(new Error($t('bitrate_khong_duoc_lon_hon_60m')))
+      else
+        callback()
+    },
+  },
+])
+const [audioRateValue, audioRateAttrs] = useElField<number>(getProp('audioBitrate'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('library_preset.bitrate_is_required')))
+
+      else if (convertStringToNumber(value) < 32000 || convertStringToNumber(value) > 2000000)
+        callback(new Error($t('SSConfig.audiorate_khong_duoc_be_hon_minrate')))
+      else
+        callback()
+    },
+  },
+])
+const [maxrateValue, maxrateAttrs] = useElField<number | undefined>(getProp('maxrate'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (convertStringToNumber(value || 0) < 64000)
+        callback(new Error(t('base_library.maxrate_cannot_be_less_than_64000')))
+      else if (convertStringToNumber(videoRateValue.value || 0) > convertStringToNumber(value || 0))
+        callback(new Error($t('SSConfig.maxrate_khong_duoc_lon_hon_bitrate')))
+      else if (convertStringToNumber(value) > 60000000)
+        callback(new Error($t('SSConfig.maxrate_khong_duoc_lon_hon_60m')))
+      else
+        callback()
+    },
+  },
+])
+const [fpsValue, fpsAttrs] = useElField<number | undefined>(getProp('fps'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value) {
+        callback(new Error($t('SSConfig.fps_is_required')))
+      }
+      else if (convertStringToNumber(value) < 10 || convertStringToNumber(value) > 60) {
+        callback(new Error($t('SSConfig.fps_less_10_greater_60')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+const [widthValue, widthAttrs] = useElField<number | undefined>(getProp('width'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value && value !== 0) {
+        callback(new Error($t('SSConfig.width_is_required')))
+      }
+      else if (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 7680) {
+        callback(new Error($t('SSConfig.width_less_0_greater_7680')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+const [heightValue, heightAttrs] = useElField<number | undefined>(getProp('height'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value && value !== 0) {
+        callback(new Error($t('SSConfig.height_is_required')))
+      }
+      else if (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 4320) {
+        callback(new Error($t('SSConfig.height_less_0_greater_7680')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+
+const [aspectRatioModeValue, aspectRatioModeAttrs] = useElField<string>(getProp('aspectRatioMode'), [])
+const isRequiredAspect = computed(() => {
+  return aspectRatioModeValue.value === 'custom'
+})
+const [aspectRatioWidthValue, aspectRatioWidthAttrs] = useElField<number | undefined>(getProp('aspectRatioWidth'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 1000) {
+        callback(new Error($t('ratio_width_less_0_greater_1000')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+], { enabled: isRequiredAspect })
+const [aspectRatioHeightValue, aspectRatioHeightAttrs] = useElField<number | undefined>(getProp('aspectRatioHeight'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 1000) {
+        callback(new Error($t('ratio_height_less_0_greater_1000')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+], { enabled: isRequiredAspect })
+const [bframeValue, bframeAttrs] = useElField<number | undefined>(getProp('bframe'), [])
+const [pixelFormatValue, pixelFormatAttrs] = useElField<string | undefined>(getProp('pixelFormat'), [])
+const [scaleTypeValue, scaleTypeAttrs] = useElField<string | undefined>(getProp('scaleType'), [])
+const [scanTypeValue, scanTypeAttrs] = useElField<string | undefined>(getProp('scanType'), [])
+const [rateControlModeValue, rateControlModeAttrs] = useElField<string | undefined>(getProp('rateControlMode'), [])
+const [rcValue, rcAttrs] = useElField<string | undefined>(getProp('rc'), [])
+const [gopModeValue, gopModeAttrs] = useElField<string | undefined>(getProp('gopMode'), [])
+const [fixedGOPValue, fixedGOPAttrs] = useElField<boolean | undefined>(getProp('fixedGOP'), [])
+const isRequiredGopSize = computed(() => {
+  return gopModeValue.value === 'fixed_frame' || gopModeValue.value === 'fixed_second'
+})
+const [gopValue, gopAttrs] = useElField<string | undefined>(getProp('gopValue'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value && (gopModeValue.value === 'fixed_frame' || gopModeValue.value === 'fixed_second')) {
+        callback(new Error($t('SSConfig.gop_value_required')))
+      }
+      else if (gopModeValue.value === 'fixed_frame' && (convertStringToNumber(value) < 17 || convertStringToNumber(value) > 300)) {
+        callback(new Error($t('SSConfig.gopsize_cannot_be_less_than_17_and_greater_than_300')))
+      }
+      else if (gopModeValue.value === 'fixed_second' && (convertStringToNumber(value) < 1 || convertStringToNumber(value) > 16)) {
+        callback(new Error($t('SSConfig.second_cannot_be_less_than_17_and_greater_than_300')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+], {
+  enabled: isRequiredGopSize,
+})
+const [bufsizeValue, bufsizeAttrs] = useElField<number | undefined>(getProp('bufsize'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (convertStringToNumber(value) < 10000 || convertStringToNumber(value) > 60000000) {
+        callback(new Error($t('SSConfig.buffsize_cannot_be_less_than_64000_and_greater_than_60000000')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+const [hdrValue, hdrAttrs] = useElField<string | undefined>(getProp('hdr'), [])
+const [cqValue, cqAttrs] = useElField<number | undefined>(getProp('cq'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 51) {
+        callback(new Error($t('SSConfig.cbr_less_0_greater_51')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+
+// Audio
+const [sampleRateValue, sampleRateAttrs] = useElField<number | undefined>(getProp('sampleRate'), [])
+const [channelValue, channelAttrs] = useElField<number | undefined>(getProp('channel'), [
+  {
+    required: true,
+    message: t('library_preset.preset_channel'),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValid,
+})
+const [profileValue, profileAttrs] = useElField<string | undefined>(getProp('videoProfile'), [])
+const [audioProfileValue, audioProfileAttrs] = useElField<string | undefined>(getProp('audioProfile'), [])
+const [levelValue, levelAttrs] = useElField<string | undefined>(getProp('videoLevel'), [])
+const [volumeValue, volumeAttrs] = useElField<string | undefined>(getProp('volume'), [])
+const [languageValue, languageAttrs] = useElField<string | undefined>(getProp('language'), [])
+const [labelValue, labelAttrs] = useElField<string | undefined>(getProp('label'), [])
+const [defaultValue, defaultAttrs] = useElField<boolean | undefined>(getProp('audioDefault'), [])
+const [scte35OverwriteConfigValue] = useElField(getProp('scte35OverwriteConfig'), [])
+const isCopiedVideoCodec = computed(() => {
+  return videoCodecValue.value === 'copy'
+})
+
+const isCopiedAudioCodec = computed(() => {
+  return audioCodecValue.value === 'copy'
+})
+const isCreateChannel = ref(inject('isCreateChannel'))
+
+function fillAudio() {
+  typeValue.value = 'audio'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+
+  audioCodecValue.value = 'aac'
+  videoCodecValue.value = undefined
+  dataCodecValue.value = undefined
+  audioProfileValue.value = undefined
+  profileValue.value = undefined
+  levelValue.value = undefined
+  rcValue.value = undefined
+  audioRateValue.value = 32000
+  videoRateValue.value = undefined
+  sampleRateValue.value = 44100
+  groupIdValue.value = undefined
+  defaultValue.value = undefined
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  presetValue.value = undefined
+  fpsValue.value = undefined
+  widthValue.value = undefined
+  heightValue.value = undefined
+  pixelFormatValue.value = undefined
+  bframeValue.value = undefined
+  scaleTypeValue.value = undefined
+  scanTypeValue.value = undefined
+  gopModeValue.value = undefined
+  fixedGOPValue.value = undefined
+  rateControlModeValue.value = undefined
+  cqValue.value = undefined
+  channelValue.value = 2
+  volumeValue.value = undefined
+  languageValue.value = undefined
+  labelValue.value = undefined
+  defaultPTEValue.value = undefined
+  vmafMaxValue.value = undefined
+  vmafMinValue.value = undefined
+  vmafThresValue.value = undefined
+}
+
+function fillVideo() {
+  typeValue.value = 'video'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+  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'
+  videoRateValue.value = 4000000
+  rateControlModeValue.value = 'vbr'
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  sampleRateValue.value = undefined
+  fpsValue.value = 25
+  widthValue.value = 1920
+  heightValue.value = 1080
+  pixelFormatValue.value = undefined
+  bframeValue.value = undefined
+  scaleTypeValue.value = undefined
+  scanTypeValue.value = 'progressive'
+  cqValue.value = undefined
+  gopModeValue.value = 'auto'
+  gopValue.value = undefined
+  fixedGOPValue.value = undefined
+  hdrValue.value = undefined
+  rcValue.value = undefined
+  channelValue.value = undefined
+  profileValue.value = undefined
+  levelValue.value = undefined
+  volumeValue.value = undefined
+  defaultPTEValue.value = undefined
+  vmafMaxValue.value = undefined
+  vmafMinValue.value = undefined
+  vmafThresValue.value = undefined
+}
+
+function fillData() {
+  typeValue.value = 'data'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+  dataCodecValue.value = 'copy'
+  audioCodecValue.value = undefined
+  videoCodecValue.value = undefined
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  sampleRateValue.value = undefined
+  fpsValue.value = undefined
+  widthValue.value = undefined
+  heightValue.value = undefined
+  rcValue.value = undefined
+  pixelFormatValue.value = undefined
+  bframeValue.value = undefined
+  scaleTypeValue.value = undefined
+  cqValue.value = undefined
+  channelValue.value = undefined
+  profileValue.value = undefined
+  levelValue.value = undefined
+  volumeValue.value = undefined
+  fixedGOPValue.value = undefined
+  defaultPTEValue.value = undefined
+  vmafMaxValue.value = undefined
+  vmafMinValue.value = undefined
+  vmafThresValue.value = undefined
+}
+
+const configPte = ref(inject('configPte'))
+// disabled with PTE config
+const disabledWithPTEConfig = computed(() => {
+  return isCreateChannel.value && defaultPTEValue.value && encoderValue.value === 'nvenc' && configPte.value?.pte?.enable
+})
+
+async function handleChangeType(type: string) {
+  if (type === 'data')
+    fillData()
+
+  else if (type === 'audio')
+    fillAudio()
+
+  else if (type === 'video')
+    fillVideo()
+
+  if (type === 'video')
+    await formRef.value?.validateField('videoBitrate')
+  else if (type === 'audio')
+    await formRef.value?.validateField('audioBitrate')
+}
+
+function setUndefined(type: string, value: any) {
+  switch (type) {
+    case 'volume':
+      !value ? volumeValue.value = undefined : volumeValue.value = value
+      break
+    case 'hdr':
+      !value ? hdrValue.value = undefined : hdrValue.value = value
+      break
+    case 'pixel':
+      !value ? pixelFormatValue.value = undefined : pixelFormatValue.value = value
+      break
+    case 'scale':
+      !value ? scaleTypeValue.value = undefined : scaleTypeValue.value = value
+      break
+    case 'scan':
+      !value ? scanTypeValue.value = undefined : scanTypeValue.value = value
+      break
+    case 'profile':
+      !value ? profileValue.value = undefined : profileValue.value = value
+      break
+    case 'audioProfile':
+      !value ? audioProfileValue.value = undefined : audioProfileValue.value = value
+      break
+    case 'level':
+      !value ? levelValue.value = undefined : levelValue.value = value
+      break
+    case 'label':
+      !value ? labelValue.value = undefined : labelValue.value = value
+      break
+    case 'rateControlMode':
+      !value ? rateControlModeValue.value = undefined : rateControlModeValue.value = value
+      rcValue.value = undefined
+      break
+    case 'rc':
+      !value ? rcValue.value = undefined : rcValue.value = value
+      break
+  }
+}
+
+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: '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')
+      ? { H264: 'h264' }
+      : encoderValue.value === 'open_hevc'
+        ? { HEVC: 'hevc' }
+        : encoderValue.value === 'nvenc'
+          ? { H264: 'h264', HEVC: 'hevc' }
+          : { COPY: 'copy' },
+    audio: AUDIO_CODECS,
+    data: DATA_CODECS,
+  }[typeValue.value]
+})
+
+function defaultPTEConfig(_newValue) {
+  videoCodecValue.value = 'h264'
+  fixedGOPValue.value = false
+  if (_newValue) {
+    vmafMaxValue.value = 95
+    vmafMinValue.value = 91
+    vmafThresValue.value = 0.85
+  }
+}
+
+function getEncoderConfig(newEncoderType: string) {
+  const config = {
+    videoCodec: '',
+    videoPreset: '',
+    videoProfile: '',
+    videoLevel: '',
+    vmafMaxValue: undefined,
+    vmafMinValue: undefined,
+    vmafThresValue: undefined,
+  }
+
+  if (isPackage.value)
+    return config
+
+  switch (newEncoderType) {
+    case 'open_h264':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'veryfast'
+      break
+    case 'open_hevc':
+      config.videoCodec = 'hevc'
+      config.videoPreset = 'veryfast'
+      break
+    case 'nvenc':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'llhp'
+      if (isCreateChannel.value) {
+        config.vmafMaxValue = 95
+        config.vmafMinValue = 91
+        config.vmafThresValue = 0.85
+      }
+      break
+    case 'aurora4':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'veryfast'
+      break
+    case 'passthrough':
+      config.videoCodec = 'copy'
+      break
+  }
+
+  return config
+}
+
+function updateAllEncoderTypes(newEncoderType: string) {
+  const config = getEncoderConfig(newEncoderType)
+
+  return profilesValue.value?.map((_profile) => {
+    const updatedPresets = _profile?.presets?.map(preset => ({
+      ...preset,
+      encoderType: newEncoderType,
+      videoPreset: config.videoPreset,
+      videoProfile: config.videoProfile,
+      videoLevel: config.videoLevel,
+      videoCodec: config.videoCodec,
+    }))
+    return {
+      ..._profile,
+      presets: updatedPresets,
+    }
+  })
+}
+
+const isVod = ref(inject('isVod'))
+function handleChangeEncoder(newValue: string) {
+  const config = getEncoderConfig(newValue)
+  const isCheck = isVod.value ? !areAllEncoderTypesSame(profilesValue.value, newValue) : !areAllEncoderTypesSame(profilesValue.value)
+  if (profilesValue.value?.length > 0 && isCheck) {
+    ElMessageBox.alert(
+      $t('base_libray.less_than_strong_greater_than_all_profiles', [`<strong>${$t('base_libray.all_profiles_must_have_the_same_video_encoder_data')}</strong>`]),
+      $t('base_libray.encoder_sync'),
+      {
+        confirmButtonText: t('Actions.confirm'),
+        dangerouslyUseHTMLString: true,
+        showClose: false,
+        callback: () => {
+          profilesValue.value = updateAllEncoderTypes(newValue)
+          formRef.value.validate()
+        },
+      },
+    )
+  }
+  else {
+    formRef.value.validate()
+  }
+
+  defaultPTEValue.value = false
+
+  videoCodecValue.value = config.videoCodec
+  presetValue.value = config.videoPreset
+  profileValue.value = config.videoProfile
+  levelValue.value = config.videoLevel
+
+  vmafMaxValue.value = config.vmafMaxValue
+  vmafMinValue.value = config.vmafMinValue
+  vmafThresValue.value = config.vmafThresValue
+}
+
+function formatter(value: string) {
+  return value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+}
+
+function parser(value: string) {
+  return Number.parseInt(value.replace(/\D/g, '').replace(/\$\s?|(\.*)/g, ''))
+}
+
+const activeNames = ref(['general', 'aspect', 'frame', 'control', 'color', 'gop', 'codec', 'other', 'scte35', 'output_aspect', 'pte'])
+
+const optionsProfile = computed(() => {
+  return videoCodecValue.value === 'h264' ? ['baseline', 'main', 'high'] : videoCodecValue.value === 'hevc' ? ['main'] : []
+})
+const optionsLevel = computed(() => {
+  return videoCodecValue.value === 'h264' ? ['H264_LEVEL_5_2', 'H264_LEVEL_5_1', 'H264_LEVEL_5', 'H264_LEVEL_4_2', 'H264_LEVEL_4_1', 'H264_LEVEL_4', 'H264_LEVEL_3_2', 'H264_LEVEL_3_1', 'H264_LEVEL_3', 'H264_LEVEL_2_2', 'H264_LEVEL_2_1', 'H264_LEVEL_2', 'H264_LEVEL_1_3', 'H264_LEVEL_1_2', 'H264_LEVEL_1_1', 'H264_LEVEL_1'] : videoCodecValue.value === 'hevc' ? ['H265_LEVEL_6_2', 'H265_LEVEL_6_1', 'H265_LEVEL_6', 'H265_LEVEL_5_2', 'H265_LEVEL_5_1', 'H265_LEVEL_5', 'H265_LEVEL_4_1', 'H265_LEVEL_4', 'H265_LEVEL_3_1', 'H265_LEVEL_3', 'H265_LEVEL_2_1', 'H265_LEVEL_2', 'H265_LEVEL_1'] : []
+})
+const isDisabledGopSize = computed(() => {
+  return !!(gopModeValue.value === 'auto' || gopModeValue.value === 'from_source')
+})
+const isDisabledRc = computed(() => {
+  return !!(encoderValue.value !== 'nvenc') as boolean
+})
+
+const optionRc = computed(() => {
+  return rateControlModeValue.value === 'cbr' ? ['cbr_hq', 'cbr_hp'] : rateControlModeValue.value === 'vbr' ? ['vbr_hq', 'vbr_hp'] : []
+})
+
+const optionGopMode = [
+  { label: 'Auto', value: 'auto' },
+  { label: 'Source', value: 'from_source' },
+  { label: 'Seconds', value: 'fixed_second' },
+  { label: 'Frames', value: 'fixed_frame' },
+]
+
+function handleChangeVideoCodec() {
+  profileValue.value = ''
+  levelValue.value = ''
+}
+
+const optionScanType = [
+  { label: 'Progressive mode', value: 'progressive' },
+  { label: 'Interlaced mode', value: 'interlaced' },
+]
+
+const optionsLang = computed(() => {
+  return langOptions.value?.map(item => ({
+    label: `${item[0]} (${item[1]})`,
+    value: item[1],
+  }))
+})
+
+async function handleApplyConfig(_value) {
+  defaultPTEValue.value = true
+  nameValue.value = _value?.name
+  bframeValue.value = _value?.bframe
+  // encoderValue.value = _value?.encoder
+  pixelFormatValue.value = _value?.format
+  fpsValue.value = _value?.fps
+  maxrateValue.value = _value?.maxrate
+  profileValue.value = _value?.profile
+  presetValue.value = _value?.preset
+  videoCodecValue.value = 'h264'
+  fixedGOPValue.value = false
+
+  await formRef.value?.validate()
+}
+</script>
+
+<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-item name="general">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('channel_input.general_information') }}
+          </label>
+        </template>
+        <div class="flex gap-2">
+          <el-form-item class="w-full" v-bind="nameAttrs">
+            <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-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>
+          </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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item v-if="scte35 && dataCodecValue === 'copy'" name="scte35">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            Overwrite SCTE35
+          </label>
+        </template>
+
+        <div class="w-1/2 flex justify-between gap-2">
+          <el-form-item class="w-full">
+            <template #label>
+              <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaSCTE35.enabled" />
+            </template>
+            <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-form-item>
+
+          <el-form-item class="w-full" label="Delay">
+            <template #label>
+              <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-form-item>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </template>
+  <template v-else>
+    <div v-if="!typeValue && isShowType" class="flex gap-2">
+      <el-form-item class="flex-1" v-bind="nameAttrs">
+        <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-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>
+      </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-item v-if="typeValue" name="general">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.general_information') }}
+          </label>
+        </template>
+        <div class="flex flex-wrap gap-2">
+          <el-form-item class="w-586px" v-bind="nameAttrs">
+            <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-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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <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" />
+              </div>
+            </el-tooltip>
+          </label>
+        </template>
+        <div class="flex gap-2">
+          <el-form-item class="max-w-190px min-w-190px" label="Enable" v-bind="defaultPTEAttrs">
+            <template #label>
+              <SSInformationLabel label="Enable" :info="schemaObj.pteEnabled" />
+            </template>
+            <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-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-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-form-item>
+        </div>
+      </el-collapse-item>
+      <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
+          </label>
+        </template>
+
+        <div class="w-1/2 flex justify-between gap-2">
+          <el-form-item class="w-full">
+            <template #label>
+              <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaSCTE35.enabled" />
+            </template>
+            <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-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" />
+            </template>
+            <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>
+      <el-collapse-item v-if="typeValue && !isPackage && encoderValue !== 'passthrough'" name="codec">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.codec_detail') }}
+          </label>
+        </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">
+            <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-select>
+          </el-form-item>
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <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') }}
+          </label>
+        </template>
+
+        <div class="flex gap-2">
+          <el-form-item label="Aspect Ratio Mode" class="max-w-190px min-w-190px" v-bind="aspectRatioModeAttrs">
+            <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>
+          </el-form-item>
+
+          <el-form-item label="Aspect Ratio Width" class="max-w-190px min-w-190px" v-bind="aspectRatioWidthAttrs">
+            <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-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-form-item>
+        </div>
+      </el-collapse-item>
+      <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') }}
+          </label>
+        </template>
+        <div class="flex gap-2">
+          <el-form-item label="Width" class="max-w-190px min-w-190px" v-bind="widthAttrs">
+            <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-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-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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'" name="frame">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.frame_rate') }}
+          </label>
+        </template>
+
+        <div class="flex gap-2">
+          <el-form-item v-bind="fpsAttrs" label="FPS" class="max-w-190px min-w-190px">
+            <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-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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item v-if="typeValue && !isPackage && encoderValue !== 'passthrough'" name="control">
+        <template #title>
+          <label class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.rate_control') }}
+          </label>
+        </template>
+
+        <div v-if="typeValue === 'video'" class="flex flex-wrap gap-2">
+          <el-form-item label="Rate control mode" class="max-w-190px min-w-190px flex-1" v-bind="rateControlModeAttrs">
+            <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>
+          </el-form-item>
+
+          <el-form-item label="Constant quality" class="max-w-190px min-w-190px flex-1" v-bind="cqAttrs">
+            <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"
+              class="w-full [&_.el-input\_\_inner]:text-start"
+              :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>
+          </el-form-item>
+          <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-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-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-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-form-item>
+        </div>
+        <div v-if="typeValue === 'audio'" class="flex flex-wrap gap-2">
+          <el-form-item class="max-w-190px min-w-190px flex-1" v-bind="audioRateAttrs">
+            <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-form-item>
+
+          <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>
+          </el-form-item>
+          <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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'" name="color">
+        <template #title>
+          <label class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.color_space') }}
+          </label>
+        </template>
+
+        <div class="flex gap-2">
+          <el-form-item label="Hdr" class="max-w-190px min-w-190px" v-bind="hdrAttrs">
+            <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>
+          </el-form-item>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item v-if="typeValue === 'video' && !isPackage && encoderValue !== 'passthrough'" name="gop">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.gop_size') }}
+          </label>
+        </template>
+
+        <div class="flex gap-2">
+          <el-form-item label="Bframe" class="max-w-190px min-w-190px" v-bind="bframeAttrs">
+            <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-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>
+          </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-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-form-item>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item v-if="typeValue === 'audio'" name="other">
+        <template #title>
+          <label class="flex items-center gap-2 text-16px font-semibold">
+            {{ $t('SSConfig.other') }}
+          </label>
+        </template>
+
+        <div class="flex flex-wrap gap-2">
+          <el-form-item class="max-w-190px min-w-190px" v-bind="groupIdAttrs">
+            <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-form-item>
+          <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>
+          </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-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-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-form-item>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </template>
+  <DevOnly>
+    <el-button @click="fillVideo">
+      Fill Video
+    </el-button>
+    <el-button @click="fillAudio">
+      Fill Audio
+    </el-button>
+    <el-button @click="fillData">
+      Fill Data
+    </el-button>
+  </DevOnly>
+
+  <SSRecommendedConfigurationPTE v-if="isVisibleRecommend" v-model:visible="isVisibleRecommend" @apply-config="handleApplyConfig" />
+</template>