@sigmaott/base-library-next 2.1.9

package/src/components/preset/ConfigItem.vue

@@ -0,0 +1,956 @@
+<script lang="ts" setup>
+import { langOptions } from '@sigma-streaming/base/src/constants/languageCode'
+
+const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'PresetDto')
+
+const { defaultMediaType, isPackage, prop, videoCodecs, encoderOptions, mode, isConfigEncoder, isShowType } = definePropsRefs<{
+  defaultMediaType?: 'video' | 'audio' | 'data'
+  isPackage?: boolean
+  prop?: string
+  videoCodecs?: Record<string, string>
+  encoderOptions?: any
+  mode?: 'create' | 'edit' | 'clone'
+  isConfigEncoder?: boolean
+  isShowType?: boolean
+}>()
+
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => prop.value ? `${prop.value}.${key}` : key
+}
+
+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,
+    message: t('library_preset.preset_encoder_is_required'),
+  },
+])
+const [presetValue, presetAttrs] = useElField<string | undefined>(getProp('preset'), [
+  {
+    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('audioGroupId'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!/^[\w-\s]*$/.test(value))
+        callback(new Error(t('library_preset.group_id')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [codecValue, codecAttrs] = useElField<string>(getProp('codec'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('please_select_codec')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+
+const enableValid = computed(() => {
+  return !!(codecValue.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>(getProp('minrate'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (typeValue.value === 'video' && (convertStringToNumber(value) < 64000))
+        callback(new Error($t('minrate_khong_duoc_lon_hon_bitrate')))
+      else
+        callback()
+    },
+  },
+])
+const [bitrateValue, bitrateAttrs] = useElField<number>(getProp('bitrate'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value && typeValue.value !== 'data')
+        callback(new Error(t(`library_preset.${typeValue.value}_is_required`)))
+      else if (typeValue.value === 'video' && (convertStringToNumber(minrateValue.value || 0) >= convertStringToNumber(value)))
+        callback(new Error($t('bitrate_khong_duoc_be_hon_minrate')))
+      else if (typeValue.value === 'audio' && (convertStringToNumber(value) < 64000 || convertStringToNumber(value) > 60000000))
+        callback(new Error($t('audiorate_khong_duoc_be_hon_minrate')))
+      else
+        callback()
+    },
+  },
+])
+
+const [maxrateValue, maxrateAttrs] = useElField<number>(getProp('maxrate'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (typeValue.value === 'video' && (convertStringToNumber(bitrateValue.value || 0) > convertStringToNumber(value || 0)))
+        callback(new Error($t('maxrate_khong_duoc_lon_hon_bitrate')))
+      else if (typeValue.value === 'video' && (convertStringToNumber(value) > 60000000))
+        callback(new Error($t('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 (convertStringToNumber(value) < 10 || convertStringToNumber(value) > 60) {
+        callback(new Error($t('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 (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 7680) {
+        callback(new Error($t('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 (convertStringToNumber(value) < 0 || convertStringToNumber(value) > 4320) {
+        callback(new Error($t('height_less_0_greater_7680')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+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 [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('cbr_less_0_greater_51')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+])
+const [interlacedValue, interlacedAttrs] = useElField<boolean | undefined>(getProp('interlaced'), [])
+const [cbrValue, cbrAttrs] = useElField<boolean | undefined>(getProp('cbr'), [])
+
+// 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('profile'), [])
+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('defaultAudio'), [])
+
+const isCopiedVideoCodec = computed(() => {
+  return codecValue.value === 'copy'
+})
+
+const isCopiedAudioCodec = computed(() => {
+  return codecValue.value === 'copy'
+})
+
+function fillAudio() {
+  typeValue.value = 'audio'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+
+  codecValue.value = 'aac'
+  bitrateValue.value = 64000
+  sampleRateValue.value = 44100
+  groupIdValue.value = undefined
+  defaultValue.value = undefined
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  fpsValue.value = undefined
+  widthValue.value = undefined
+  heightValue.value = undefined
+  pixelFormatValue.value = ''
+  bframeValue.value = undefined
+  scaleTypeValue.value = ''
+  cqValue.value = undefined
+  interlacedValue.value = false
+  cbrValue.value = false
+  channelValue.value = 2
+  profileValue.value = ''
+  volumeValue.value = ''
+  languageValue.value = ''
+  labelValue.value = ''
+}
+
+function fillVideo() {
+  typeValue.value = 'video'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+
+  codecValue.value = 'h264'
+  encoderValue.value = 'open_h264'
+  presetValue.value = 'veryfast'
+  bitrateValue.value = 4000000
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  sampleRateValue.value = undefined
+  fpsValue.value = 25
+  widthValue.value = 1920
+  heightValue.value = 1080
+  pixelFormatValue.value = ''
+  bframeValue.value = undefined
+  scaleTypeValue.value = ''
+  cqValue.value = undefined
+  interlacedValue.value = false
+  cbrValue.value = false
+  hdrValue.value = undefined
+  channelValue.value = undefined
+  profileValue.value = ''
+  volumeValue.value = ''
+}
+
+function fillData() {
+  typeValue.value = 'data'
+  nameValue.value = nameValue.value ?? ''
+  descriptionValue.value = descriptionValue.value ?? ''
+  codecValue.value = 'copy'
+  bitrateValue.value = undefined
+  minrateValue.value = undefined
+  maxrateValue.value = undefined
+  sampleRateValue.value = undefined
+  fpsValue.value = undefined
+  widthValue.value = undefined
+  heightValue.value = undefined
+  pixelFormatValue.value = undefined
+  bframeValue.value = undefined
+  scaleTypeValue.value = undefined
+  cqValue.value = undefined
+  interlacedValue.value = undefined
+  cbrValue.value = undefined
+  channelValue.value = undefined
+  profileValue.value = undefined
+  volumeValue.value = undefined
+}
+
+const { formRef } = useElFormContext()
+async function handleChangeType(type: string) {
+  if (type === 'data')
+    fillData()
+
+  else if (type === 'audio')
+    fillAudio()
+
+  else if (type === 'video')
+    fillVideo()
+
+  await formRef.value?.validateField('bitrate')
+}
+
+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 'profile':
+      !value ? profileValue.value = undefined : profileValue.value = value
+      break
+    case 'label':
+      !value ? labelValue.value = undefined : labelValue.value = value
+      break
+  }
+}
+
+const optionsEncoder = ref([
+  {
+    label: 'OpenH264',
+    value: 'open_h264',
+  },
+  {
+    label: 'OpenHEVC',
+    value: 'open_hevc',
+  },
+  {
+    label: 'NVENC',
+    value: 'nvenc',
+  },
+  // {
+  //   label: 'Aurora4',
+  //   value: 'aurora4',
+  // },
+  {
+    label: 'Passthrough',
+    value: 'passthrough',
+  },
+])
+
+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: videoCodecs.value || (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 handleChangeEncoder(newValue: string) {
+  switch (newValue) {
+    case 'open_h264':
+      if (!isPackage.value) {
+        codecValue.value = 'h264'
+        presetValue.value = 'veryfast'
+      }
+      break
+    case 'open_hevc':
+      if (!isPackage.value) {
+        codecValue.value = 'hevc'
+        presetValue.value = 'veryfast'
+      }
+      break
+    case 'nvenc':
+      if (!isPackage.value) {
+        codecValue.value = 'h264'
+        presetValue.value = 'llhq'
+      }
+      break
+    case 'aurora4':
+      if (!isPackage.value) {
+        codecValue.value = 'h264'
+        presetValue.value = 'veryfast'
+      }
+      break
+    case 'passthrough':
+      if (!isPackage.value) {
+        codecValue.value = 'copy'
+      }
+      break
+    default:
+  }
+}
+
+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 optionsLang = computed(() => {
+  return langOptions.value?.map(item => ({
+    label: `${item[0]} (${item[1]})`,
+    value: item[1],
+  }))
+})
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <div class="flex gap-2" :class="encoderValue === 'passthrough' ? 'w-68%' : 'w-50%'">
+      <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="isConfigEncoder && typeValue === 'video'" :class="encoderValue === 'passthrough' ? 'w-100%' : 'w-49%'" v-bind="encoderAttrs">
+        <template #label>
+          <SSInformationLabel :label="$t('library_preset.encoder')" :info="schemaObj.encoderType" />
+        </template>
+        <el-select
+          v-model="encoderValue"
+          :disabled="isPackage"
+          class="w-full"
+          @change="handleChangeEncoder"
+        >
+          <el-option
+            v-for="(e, idx) in optionsEncoder"
+            :key="e + idx"
+            :value="e.value"
+            :label="e.label"
+          />
+        </el-select>
+      </el-form-item>
+    </div>
+
+    <div class="flex justify-between gap-2" :class="encoderValue === 'passthrough' ? 'w-33.33%' : 'w-50%'">
+      <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="codecAttrs">
+        <template #label>
+          <SSInformationLabel label="Codec" :info="schemaObj.codec" />
+        </template>
+        <el-select
+          v-model="codecValue"
+          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>
+      <el-form-item v-if="isConfigEncoder && typeValue === 'video' && encoderValue !== 'passthrough' && !isPackage" class="w-full" v-bind="presetAttrs">
+        <template #label>
+          <SSInformationLabel label="Preset" :info="schemaObj.preset" />
+        </template>
+        <el-select v-model="presetValue" class="w-full" @change="handleChangeType">
+          <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' && encoderValue !== 'passthrough' && !isPackage" class="w-full" v-bind="bitrateAttrs">
+        <template #label>
+          <SSInformationLabel label="Bitrate" :info="schemaObj.bitrate" />
+        </template>
+        <el-input
+          v-model="bitrateValue"
+          class="w-full"
+          :disabled="isCopiedVideoCodec"
+          :formatter="formatter"
+          :parser="parser"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="typeValue === 'audio' && encoderValue !== 'passthrough' && !isPackage"
+        class="w-full"
+        label="Audio rate"
+        v-bind="bitrateAttrs"
+      >
+        <template #label>
+          <SSInformationLabel label="Audio rate" :info="schemaObj.bitrate" />
+        </template>
+        <el-input
+          v-model="bitrateValue"
+          class="w-full"
+          :disabled="isCopiedVideoCodec"
+          :formatter="formatter"
+          :parser="parser"
+        />
+      </el-form-item>
+      <el-form-item v-if="typeValue === 'audio' && isConfigEncoder && encoderValue !== 'passthrough'" class="w-full" 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>
+    </div>
+  </div>
+  <template v-if="typeValue === 'video' && encoderValue !== 'passthrough' && !isPackage">
+    <div class="flex gap-2">
+      <div class="w-50% flex gap-2">
+        <el-form-item v-bind="minrateAttrs" class="w-full">
+          <template #label>
+            <SSInformationLabel label="Minrate" :info="schemaObj.minrate" />
+          </template>
+          <el-input
+            v-model="minrateValue"
+            class="w-full"
+            :disabled="isCopiedVideoCodec"
+            :formatter="formatter"
+            :parser="parser"
+          />
+        </el-form-item>
+
+        <el-form-item v-bind="maxrateAttrs" class="w-full">
+          <template #label>
+            <SSInformationLabel label="Maxrate" :info="schemaObj.maxrate" />
+          </template>
+          <el-input
+            v-model="maxrateValue"
+            class="w-full"
+            :disabled="isCopiedVideoCodec"
+            :formatter="formatter"
+            :parser="parser"
+          />
+        </el-form-item>
+
+        <el-form-item v-bind="fpsAttrs" label="FPS" class="w-full">
+          <template #label>
+            <SSInformationLabel label="FPS" :info="schemaObj.fps" />
+          </template>
+          <el-input-number
+            v-model="fpsValue"
+            :min="10"
+            :max="60"
+            class="w-full [&_.el-input\_\_inner]:text-start"
+            :disabled="isCopiedVideoCodec"
+            :precision="0"
+            :controls="false"
+            step-strictly
+          />
+        </el-form-item>
+      </div>
+      <div class="w-50% flex gap-2">
+        <el-form-item label="Width" class="w-full" 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="w-full" 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="Hdr" class="w-full" 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>
+    </div>
+
+    <div class="flex gap-2">
+      <div class="w-50% flex gap-2">
+        <el-form-item label="Bframe" class="w-full" 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="Pixel format" class="w-full" 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 label="Scale Type" class="w-full" 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>
+      <div class="w-50% flex gap-2">
+        <el-form-item label="Constant quality" class="w-full" 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"
+            :min="0"
+            :max="51"
+          />
+        </el-form-item>
+
+        <el-form-item label="Interlaced mode" class="w-full" v-bind="interlacedAttrs">
+          <template #label>
+            <SSInformationLabel min-width="min-w-112px" label="Interlaced mode" :info="schemaObj.interlaced" />
+          </template>
+          <el-switch
+            v-model="interlacedValue"
+            :disabled="isCopiedVideoCodec"
+            :active-value="true"
+            :inactive-value="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="Constant birate mode" class="w-full" v-bind="cbrAttrs">
+          <template #label>
+            <SSInformationLabel min-width="min-w-148px" label="Constant birate mode" />
+          </template>
+          <el-switch
+            v-model="cbrValue"
+            :active-value="true"
+            :disabled="isCopiedVideoCodec"
+            :inactive-value="false"
+          />
+        </el-form-item>
+      </div>
+    </div>
+  </template>
+
+  <template v-if="typeValue === 'audio' && encoderValue !== 'passthrough'">
+    <div class="grid grid-cols-6 gap-2">
+      <el-form-item v-if="!isPackage" 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" 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>
+      <el-form-item v-if="!isPackage" label="Sample rate" v-bind="profileAttrs">
+        <template #label>
+          <SSInformationLabel label="Profile" :info="schemaObj.profile" />
+        </template>
+        <el-select
+          v-model="profileValue"
+          :disabled="isCopiedAudioCodec || codecValue !== 'aac'"
+          class="w-full"
+          default-first-option
+          clearable
+          @change="(value) => setUndefined('profile', 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="!isPackage" 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 :label="$t('profile.description')" 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 :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>
+    </div>
+    <el-form-item :label="$t('profile.default')" v-bind="defaultAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('profile.default')" :info="schemaObj.default" />
+      </template>
+      <el-switch
+        v-model="defaultValue"
+        :active-text="$t('profile.default')"
+      />
+    </el-form-item>
+  </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>
+</template>