@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/PresetConfigItem.vue

@@ -1,1957 +1,1957 @@
-<script lang="ts" setup>
-import { langOptions } from '../../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>
+<script lang="ts" setup>
+import { langOptions } from '../../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>