@sigmaott/base-library-next 2.2.5 → 2.2.7

package/src/components/profile/ConfigItem.vue

@@ -1,765 +1,765 @@
-<script lang="ts" setup>
-import type { CreatePresetDto } from '@/api-client-library'
-
-const emit = defineEmits<{
-  changeNameModifier: [id: string]
-}>()
-
-const { prop, isPackage, videoCodecs, encoderOptions, isMediaLive, isBlockAddData, mode, isConfigEncoder, idx } = definePropsRefs<{
-  prop?: string
-  isPackage?: boolean
-  videoCodecs?: Record<string, string>
-  encoderOptions?: any
-  isMediaLive?: boolean
-  isBlockAddData?: boolean
-  mode?: string
-  isConfigEncoder?: boolean
-  idx?: number
-}>()
-
-const { activeMedia } = defineModels<{
-  activeMedia: string
-}>()
-
-const { t } = useI18n()
-function getProp(key: string) {
-  return () => prop.value ? `${prop.value}.${key}` : key
-}
-const creatingMedia = ref<'video' | 'audio' | 'data'>('video')
-const isShowMediaSelection = ref(false)
-const [nameValue, nameAttrs] = useElField<string>(getProp('name'), [
-  {
-    required: true,
-    validator: nameValidatorLow(t('profile.profile_name')),
-    trigger: ['blur', 'change'],
-  },
-])
-
-const [presetsValue, presetsAttrs, { add, remove }] = useElFieldArray<CreatePresetDto[]>(getProp('presets'), [
-  {
-    required: true,
-    validator: (rule, value, callback) => {
-      if (value?.length === 0)
-        callback(new Error(t('profile.preset_required')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-  },
-])
-
-function filterPresetsByType(type: string) {
-  return presetsValue.value?.filter(preset => preset.type === type) || []
-}
-
-function findIndexById(id: string) {
-  const index = presetsValue.value?.findIndex(preset => preset.id === id)
-  return index
-}
-const videoData = computed(() => {
-  return filterPresetsByType('video') || []
-})
-const audioData = computed(() => {
-  return filterPresetsByType('audio') || []
-})
-const dataData = computed(() => {
-  return filterPresetsByType('data') || []
-})
-
-const mediaSelectionTitle = computed(() => {
-  if (creatingMedia.value === 'video')
-    return 'Add video'
-  if (creatingMedia.value === 'audio')
-    return 'Add audio'
-  if (creatingMedia.value === 'data')
-    return 'Add data'
-  return 'Adding media'
-})
-
-const videos = computed(() => {
-  const _videos: any = []
-  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
-    const tmp = presetsValue.value[i]
-    if (tmp.type === 'video')
-      _videos.push(tmp)
-  }
-  return _videos
-})
-
-const audios = computed(() => {
-  const _audios: any = []
-  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
-    const tmp = presetsValue.value[i]
-    if (tmp.type === 'audio')
-      _audios.push(tmp)
-  }
-  return _audios
-})
-
-const data = computed(() => {
-  const _data: any = []
-  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
-    const tmp = presetsValue.value[i]
-    if (tmp.type === 'data')
-      _data.push(tmp)
-  }
-  return _data
-})
-
-const canAddVideo = computed(() => {
-  return videos.value.length < 1
-})
-
-const canAddAudio = computed(() => {
-  return audios.value.length < 10
-})
-
-const canAddData = computed(() => {
-  return data.value.length < 10
-})
-
-function getTabsNameIdx(name: string): number {
-  const dataSplit = name.split('-')
-  const idx = Number(dataSplit[dataSplit.length - 1])
-  return idx
-}
-
-const activeMediaIdx = computed(() => {
-  let idx
-  if (activeMedia.value)
-    idx = getTabsNameIdx(activeMedia.value)
-  return idx
-})
-
-function addPreset(type: 'video' | 'audio' | 'data') {
-  creatingMedia.value = type
-  isShowMediaSelection.value = true
-}
-
-const activeTab = ref('0')
-function activeTabChange(type: string) {
-  activeTab.value = type === 'video' ? '0' : type === 'audio' ? '1' : '2'
-  if (type === 'video')
-    activeMedia.value = `media-${videoData.value.length - 1}`
-  else if (type === 'audio')
-    activeMedia.value = `media-${audioData.value.length - 1}`
-  else
-    activeMedia.value = `media-${dataData.value.length - 1}`
-}
-
-function addEmptyPreset(type: 'video' | 'audio' | 'data') {
-  const defaultPreset = {
-    video: isPackage.value
-      ? {
-          name: 'video',
-          type: 'video',
-          codec: 'copy',
-        }
-      : isConfigEncoder.value
-        ? {
-            type: 'video',
-            name: '',
-            codec: 'h264',
-            encoderType: 'open_h264',
-            preset: 'veryfast',
-            option: '',
-            description: '',
-            bitrate: 4000000,
-            minrate: undefined,
-            maxrate: undefined,
-            sampleRate: undefined,
-            fps: 25,
-            width: 1920,
-            height: 1080,
-            pixelFormat: undefined,
-            bframe: undefined,
-            scaleType: undefined,
-            cq: undefined,
-            hdr: undefined,
-            interlaced: false,
-            cbr: false,
-            channel: undefined,
-            profile: undefined,
-            volume: undefined,
-            streamId: '',
-            streamIndex: undefined,
-          }
-        : {
-            type: 'video',
-            name: '',
-            codec: 'h264',
-            encoderType: undefined,
-            preset: undefined,
-            option: '',
-            description: '',
-            bitrate: 4000000,
-            minrate: undefined,
-            maxrate: undefined,
-            sampleRate: undefined,
-            fps: 25,
-            width: 1920,
-            height: 1080,
-            pixelFormat: undefined,
-            bframe: undefined,
-            scaleType: undefined,
-            cq: undefined,
-            hdr: undefined,
-            interlaced: false,
-            cbr: false,
-            channel: undefined,
-            profile: undefined,
-            volume: undefined,
-            streamId: '',
-            streamIndex: undefined,
-          },
-    audio: isPackage.value
-      ? {
-          name: 'audio',
-          type: 'audio',
-          codec: 'copy',
-        }
-      : {
-          type: 'audio',
-          name: '',
-          codec: 'aac',
-          audioGroupId: undefined,
-          defaultAudio: undefined,
-          option: '',
-          description: '',
-          bitrate: 64000,
-          sampleRate: 44100,
-          fps: undefined,
-          width: undefined,
-          height: undefined,
-          pixelFormat: undefined,
-          bframe: undefined,
-          scaleType: undefined,
-          cq: undefined,
-          interlaced: false,
-          cbr: false,
-          channel: 2,
-          profile: undefined,
-          volume: undefined,
-          streamId: '',
-          streamIndex: undefined,
-        },
-    data: {
-      type: 'data',
-      name: '',
-      codec: 'copy',
-      option: '',
-      description: '',
-    },
-  }
-
-  if ((type === 'audio' && canAddAudio.value) || (type === 'data' && canAddData.value) || (type === 'video' && canAddVideo.value)) {
-    presetsValue.value.push({
-      name: type === 'video' ? `media-${videoData.value.length + 1}` : type === 'audio' ? `media-${audioData.value.length + 1}` : `media-${dataData.value.length + 1}`,
-      ...defaultPreset[type],
-      id: genUUID(),
-    })
-  }
-
-  activeTabChange(type)
-}
-
-function serializeAudio(data: any) {
-  const {
-    name,
-    option,
-    description,
-    type,
-    codec,
-    audioGroupId,
-    defaultAudio,
-    bitrate,
-    sampleRate,
-    channel,
-    profile,
-    volume,
-    id,
-    language,
-    label,
-  } = data
-  return emptyStr2Undefined({
-    id,
-    name,
-    option,
-    description,
-    type,
-    codec,
-    audioGroupId,
-    defaultAudio,
-    bitrate,
-    sampleRate,
-    channel,
-    profile,
-    volume,
-    language,
-    label,
-  })
-}
-
-function serializeVideo(data: any) {
-  const {
-    name,
-    option,
-    description,
-    type,
-    fps,
-    codec,
-    encoderType,
-    preset,
-    bitrate,
-    minrate,
-    maxrate,
-    width,
-    height,
-    pixelFormat,
-    scaleType,
-    cq,
-    hdr,
-    interlaced,
-    cbr,
-    bframe,
-    id,
-  } = data
-  return emptyStr2Undefined({
-    id,
-    name,
-    option,
-    description,
-    type,
-    fps,
-    codec,
-    encoderType,
-    preset,
-    minrate,
-    bitrate,
-    maxrate,
-    width,
-    height,
-    pixelFormat,
-    scaleType,
-    cq,
-    hdr,
-    interlaced,
-    cbr,
-    bframe,
-  })
-}
-
-function serializeCopy(data: any) {
-  const {
-    name,
-    option,
-    description,
-    type,
-    fps,
-    codec,
-    bitrate,
-    width,
-    height,
-    pixelFormat,
-    scaleType,
-    cq,
-    interlaced,
-    cbr,
-    id,
-  } = data
-  return emptyStr2Undefined({
-    name,
-    option,
-    description,
-    type,
-    fps,
-    codec,
-    bitrate,
-    width,
-    height,
-    pixelFormat,
-    scaleType,
-    cq,
-    interlaced,
-    cbr,
-    id,
-  })
-}
-
-function showNewActiveMedia(type: string) {
-  // const activeItem = `media-${presetsValue.value.length - 1}`
-  // activeMedia.value = activeItem
-
-  activeTab.value = type === 'video' ? '0' : type === 'audio' ? '1' : '2'
-  if (type === 'video')
-    activeMedia.value = `media-${videoData.value.length}`
-  else if (type === 'audio')
-    activeMedia.value = `media-${audioData.value.length}`
-  else
-    activeMedia.value = `media-${dataData.value.length}`
-}
-
-function addMedia(data: any) {
-  if (!canAddVideo.value && data.type === 'video') {
-    ElMessage.warning('Can not add video. Only one video')
-  }
-  else {
-    if ((data.type === 'audio' && canAddAudio.value) || (data.type === 'data' && canAddData.value) || (data.type === 'video' && canAddVideo.value))
-      pushPreset(data)
-
-    activeTabChange(data.type)
-    isShowMediaSelection.value = false
-  }
-}
-
-function pushPreset(data?: any) {
-  let serializeData = data
-  if (data.type === 'video')
-    serializeData = serializeVideo(data)
-  else if (data.type === 'audio')
-    serializeData = serializeAudio(data)
-  else if (data.type === 'data')
-    serializeData = serializeCopy(data)
-  presetsValue.value.push(serializeData)
-  showNewActiveMedia(data.type)
-}
-
-function setActiveMedia(type: string) {
-  const activeItem = type === 'video' ? `media-${videoData.value.length - 1}` : type === 'audio' ? `media-${audioData.value.length - 1}` : `media-${dataData.value.length - 1}`
-  activeMedia.value = activeItem
-}
-
-function handleDestroyMedia(name: any, type: string) {
-  ElMessageBox.confirm(t('library_profile.are_you_sure_to_remove_media'), t('library_profile.warning'), {
-    confirmButtonText: t('library_profile.ok'),
-    cancelButtonText: t('library_action.cancel'),
-    type: 'warning',
-  })
-    .then(() => {
-      const presetIndex = getTabsNameIdx(name)
-      const removeId = type === 'video' ? videoData.value[presetIndex]?.id : type === 'audio' ? audioData.value[presetIndex]?.id : dataData.value[presetIndex]?.id
-
-      remove(removeId)
-
-      if (presetsValue.value.length > 0 && activeMediaIdx.value)
-        setActiveMedia(type)
-    })
-}
-
-function showErrorArray(error) {
-  if (typeof error === 'string')
-    return error
-  return undefined
-}
-
-function handleChangeName(name: string) {
-  emit('changeNameModifier', name)
-}
-
-function tabChange(_tab: string) {
-  activeMedia.value = 'media-0'
-}
-
-onMounted(() => {
-  if (mode.value === 'create' || mode.value === 'custom') {
-    addEmptyPreset('video')
-  }
-})
-
-const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'CreateProfileDto')
-const isBlockEdit = inject('isBlockEdit')
-
-const { formErrors, formRef } = useElFormContext()
-
-const isVideoError = computed(() => {
-  const _errors = presetsValue.value?.map((_item, _idx) => {
-    return {
-      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
-      type: _item?.type,
-    }
-  })
-
-  return _errors?.some(item => (item.isError === true && item.type === 'video'))
-})
-
-const isAudioError = computed(() => {
-  const _errors = presetsValue.value?.map((_item, _idx) => {
-    return {
-      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
-      type: _item?.type,
-    }
-  })
-
-  return _errors?.some(item => (item.isError === true && item.type === 'audio'))
-})
-const isDataError = computed(() => {
-  const _errors = presetsValue.value?.map((_item, _idx) => {
-    return {
-      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
-      type: _item?.type,
-    }
-  })
-
-  return _errors?.some(item => (item.isError === true && item.type === 'data'))
-})
-</script>
-
-<template>
-  <div class="flex items-center gap-5">
-    <slot name="name">
-      <el-form-item class="h-80px max-w-50% [&_.el-form-item\_\_error]:relative" v-bind="nameAttrs">
-        <template #label>
-          <SSInformationLabel :label="$t('profile.name')" :info="schemaObj.name" />
-        </template>
-        <el-input
-          v-model.trim="nameValue"
-          placeholder=""
-          autocomplete="off"
-          :minlength="1"
-          :maxlength="50"
-          show-word-limit
-          clearable
-          @change="handleChangeName"
-        />
-      </el-form-item>
-      <slot name="information" />
-    </slot>
-  </div>
-  <slot v-bind="{ canAddVideo, showNewActiveMedia, canAddAudio, canAddData, addEmptyPreset }" name="action">
-    <div class="flex gap-2">
-      <el-form-item>
-        <el-tooltip :disabled="canAddVideo" :content="t('base_library.can_add_only_1_video')">
-          <el-dropdown placement="bottom-start" trigger="click">
-            <el-button type="primary" plain :disabled="!canAddVideo">
-              <template #icon>
-                <div class="i-ep:plus" />
-              </template>
-              Video
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="addEmptyPreset('video')">
-                  New Preset
-                </el-dropdown-item>
-                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('video')">
-                  Existing Preset
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item>
-        <el-tooltip :disabled="canAddAudio" :content="t('base_library.can_only_create_10_audio')">
-          <el-dropdown placement="bottom-start" trigger="click">
-            <el-button type="warning" plain :disabled="!canAddAudio">
-              <template #icon>
-                <div class="i-ep:plus" />
-              </template>
-              Audio
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="addEmptyPreset('audio')">
-                  New Preset
-                </el-dropdown-item>
-                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('audio')">
-                  Existing Preset
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item>
-        <el-tooltip :disabled="canAddData" :content="t('base_library.can_only_create_10_data')">
-          <el-dropdown placement="bottom-start" trigger="click">
-            <el-button plain :disabled="!canAddData">
-              <template #icon>
-                <div class="i-ep:plus" />
-              </template>
-              Data
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="addEmptyPreset('data')">
-                  New Preset
-                </el-dropdown-item>
-                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('data')">
-                  Existing Preset
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-tooltip>
-      </el-form-item>
-    </div>
-  </slot>
-
-  <el-divider content-position="left" class="my-10px flex items-center [&_.el-divider\_\_text.is-left]:translate-y-0">
-    <el-form-item v-bind="{ ...presetsAttrs, error: showErrorArray(presetsAttrs.error) }" class="w-200px !m-0 [&_.el-form-item\_\_content]:block">
-      <!-- {{ $t('library_profile.list_of_media') }} -->
-    </el-form-item>
-  </el-divider>
-  <el-tabs
-    v-model="activeTab"
-    tab-position="left"
-    class="demo-tabs [&_.el-tabs\_\_content]:p-10px"
-    @tab-change="tabChange"
-  >
-    <el-tab-pane label="Video">
-      <template #label>
-        <div :class="isVideoError ? 'text-error' : ''">
-          Video ({{ videoData.length }})
-        </div>
-      </template>
-      <el-tabs
-        v-show="videoData.length > 0"
-        v-model="activeMedia"
-        tab-position="top"
-        type="border-card"
-        closable
-        @tab-remove="(name) => handleDestroyMedia(name, 'video')"
-      >
-        <el-tab-pane
-          v-for="(media, _idx) in videoData"
-          :key="`media-${_idx}`"
-          :label="media.name"
-          :name="`media-${_idx}`"
-          lazy
-          class=""
-        >
-          <template #label>
-            <span
-              class="inline-flex items-center text-primary"
-              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${_idx}`]) || hasError(formErrors?.presets, [`${_idx}`]) ? '!text-error' : ''"
-            >
-              <el-icon>
-                <div class="i-ep:video-camera-filled" />
-              </el-icon>&nbsp;
-              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${_idx}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
-            </span>
-          </template>
-          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
-          <PresetConfigItem
-            :is-config-encoder="isConfigEncoder"
-            :encoder-options="encoderOptions"
-            :video-codecs="videoCodecs"
-            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
-            :is-package="isPackage"
-            :default-media-type="media.type"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </el-tab-pane>
-    <el-tab-pane label="Audio">
-      <template #label>
-        <div :class="isAudioError ? 'text-error' : ''">
-          Audio ({{ audioData.length }})
-        </div>
-      </template>
-      <el-tabs
-        v-show="audioData.length > 0"
-        v-model="activeMedia"
-        tab-position="top"
-        type="border-card"
-        closable
-        @tab-remove="(name) => handleDestroyMedia(name, 'audio')"
-      >
-        <el-tab-pane
-          v-for="(media, _idx) in audioData"
-          :key="`media-${_idx}`"
-          :label="media.name"
-          :name="`media-${_idx}`"
-          lazy
-          class=""
-        >
-          <template #label>
-            <span
-              class="inline-flex items-center text-warning"
-              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''"
-            >
-              <el-icon>
-                <div class="i-ep:headset" />
-              </el-icon>&nbsp;
-              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
-            </span>
-          </template>
-          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
-          <PresetConfigItem
-            :is-config-encoder="isConfigEncoder"
-            :video-codecs="videoCodecs"
-            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
-            :is-package="isPackage"
-            :default-media-type="media.type"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </el-tab-pane>
-    <el-tab-pane v-if="!isBlockAddData" label="Data">
-      <template #label>
-        <div :class="isDataError ? 'text-error' : ''">
-          Data ({{ dataData.length }})
-        </div>
-      </template>
-      <el-tabs
-        v-show="dataData.length > 0"
-        v-model="activeMedia"
-        tab-position="top"
-        type="border-card"
-        closable
-        @tab-remove="(name) => handleDestroyMedia(name, 'data')"
-      >
-        <el-tab-pane
-          v-for="(media, _idx) in dataData"
-          :key="`media-${_idx}`"
-          :label="media.name"
-          :name="`media-${_idx}`"
-          lazy
-          class=""
-        >
-          <template #label>
-            <span
-              class="inline-flex items-center"
-              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''"
-            >
-              <el-icon class="data-icon border">
-                <div class="i-ep:menu" />
-              </el-icon>&nbsp;
-              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
-            </span>
-          </template>
-          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
-          <PresetConfigItem
-            :is-config-encoder="isConfigEncoder"
-            :video-codecs="videoCodecs"
-            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
-            :is-package="isPackage"
-            :default-media-type="media.type"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </el-tab-pane>
-  </el-tabs>
-
-  <el-dialog
-    v-model="isShowMediaSelection"
-    append-to-body
-    width="85%"
-    :title="mediaSelectionTitle"
-  >
-    <slot
-      v-if="isMediaLive"
-      name="mediaselection"
-      :media-type="creatingMedia"
-      :exclusion="['profiles']"
-      :select-item="addMedia"
-    />
-    <MediaSelection
-      v-else
-      :media-type="creatingMedia"
-      :exclusion="['profiles']"
-      @select-item="addMedia"
-    />
-  </el-dialog>
-</template>
+<script lang="ts" setup>
+import type { CreatePresetDto } from '@/api-client-library'
+
+const emit = defineEmits<{
+  changeNameModifier: [id: string]
+}>()
+
+const { prop, isPackage, videoCodecs, encoderOptions, isMediaLive, isBlockAddData, mode, isConfigEncoder, idx } = definePropsRefs<{
+  prop?: string
+  isPackage?: boolean
+  videoCodecs?: Record<string, string>
+  encoderOptions?: any
+  isMediaLive?: boolean
+  isBlockAddData?: boolean
+  mode?: string
+  isConfigEncoder?: boolean
+  idx?: number
+}>()
+
+const { activeMedia } = defineModels<{
+  activeMedia: string
+}>()
+
+const { t } = useI18n()
+function getProp(key: string) {
+  return () => prop.value ? `${prop.value}.${key}` : key
+}
+const creatingMedia = ref<'video' | 'audio' | 'data'>('video')
+const isShowMediaSelection = ref(false)
+const [nameValue, nameAttrs] = useElField<string>(getProp('name'), [
+  {
+    required: true,
+    validator: nameValidatorLow(t('profile.profile_name')),
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [presetsValue, presetsAttrs, { add, remove }] = useElFieldArray<CreatePresetDto[]>(getProp('presets'), [
+  {
+    required: true,
+    validator: (rule, value, callback) => {
+      if (value?.length === 0)
+        callback(new Error(t('profile.preset_required')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+
+function filterPresetsByType(type: string) {
+  return presetsValue.value?.filter(preset => preset.type === type) || []
+}
+
+function findIndexById(id: string) {
+  const index = presetsValue.value?.findIndex(preset => preset.id === id)
+  return index
+}
+const videoData = computed(() => {
+  return filterPresetsByType('video') || []
+})
+const audioData = computed(() => {
+  return filterPresetsByType('audio') || []
+})
+const dataData = computed(() => {
+  return filterPresetsByType('data') || []
+})
+
+const mediaSelectionTitle = computed(() => {
+  if (creatingMedia.value === 'video')
+    return 'Add video'
+  if (creatingMedia.value === 'audio')
+    return 'Add audio'
+  if (creatingMedia.value === 'data')
+    return 'Add data'
+  return 'Adding media'
+})
+
+const videos = computed(() => {
+  const _videos: any = []
+  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
+    const tmp = presetsValue.value[i]
+    if (tmp.type === 'video')
+      _videos.push(tmp)
+  }
+  return _videos
+})
+
+const audios = computed(() => {
+  const _audios: any = []
+  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
+    const tmp = presetsValue.value[i]
+    if (tmp.type === 'audio')
+      _audios.push(tmp)
+  }
+  return _audios
+})
+
+const data = computed(() => {
+  const _data: any = []
+  for (let i = presetsValue.value.length - 1; i >= 0; i--) {
+    const tmp = presetsValue.value[i]
+    if (tmp.type === 'data')
+      _data.push(tmp)
+  }
+  return _data
+})
+
+const canAddVideo = computed(() => {
+  return videos.value.length < 1
+})
+
+const canAddAudio = computed(() => {
+  return audios.value.length < 10
+})
+
+const canAddData = computed(() => {
+  return data.value.length < 10
+})
+
+function getTabsNameIdx(name: string): number {
+  const dataSplit = name.split('-')
+  const idx = Number(dataSplit[dataSplit.length - 1])
+  return idx
+}
+
+const activeMediaIdx = computed(() => {
+  let idx
+  if (activeMedia.value)
+    idx = getTabsNameIdx(activeMedia.value)
+  return idx
+})
+
+function addPreset(type: 'video' | 'audio' | 'data') {
+  creatingMedia.value = type
+  isShowMediaSelection.value = true
+}
+
+const activeTab = ref('0')
+function activeTabChange(type: string) {
+  activeTab.value = type === 'video' ? '0' : type === 'audio' ? '1' : '2'
+  if (type === 'video')
+    activeMedia.value = `media-${videoData.value.length - 1}`
+  else if (type === 'audio')
+    activeMedia.value = `media-${audioData.value.length - 1}`
+  else
+    activeMedia.value = `media-${dataData.value.length - 1}`
+}
+
+function addEmptyPreset(type: 'video' | 'audio' | 'data') {
+  const defaultPreset = {
+    video: isPackage.value
+      ? {
+          name: 'video',
+          type: 'video',
+          codec: 'copy',
+        }
+      : isConfigEncoder.value
+        ? {
+            type: 'video',
+            name: '',
+            codec: 'h264',
+            encoderType: 'open_h264',
+            preset: 'veryfast',
+            option: '',
+            description: '',
+            bitrate: 4000000,
+            minrate: undefined,
+            maxrate: undefined,
+            sampleRate: undefined,
+            fps: 25,
+            width: 1920,
+            height: 1080,
+            pixelFormat: undefined,
+            bframe: undefined,
+            scaleType: undefined,
+            cq: undefined,
+            hdr: undefined,
+            interlaced: false,
+            cbr: false,
+            channel: undefined,
+            profile: undefined,
+            volume: undefined,
+            streamId: '',
+            streamIndex: undefined,
+          }
+        : {
+            type: 'video',
+            name: '',
+            codec: 'h264',
+            encoderType: undefined,
+            preset: undefined,
+            option: '',
+            description: '',
+            bitrate: 4000000,
+            minrate: undefined,
+            maxrate: undefined,
+            sampleRate: undefined,
+            fps: 25,
+            width: 1920,
+            height: 1080,
+            pixelFormat: undefined,
+            bframe: undefined,
+            scaleType: undefined,
+            cq: undefined,
+            hdr: undefined,
+            interlaced: false,
+            cbr: false,
+            channel: undefined,
+            profile: undefined,
+            volume: undefined,
+            streamId: '',
+            streamIndex: undefined,
+          },
+    audio: isPackage.value
+      ? {
+          name: 'audio',
+          type: 'audio',
+          codec: 'copy',
+        }
+      : {
+          type: 'audio',
+          name: '',
+          codec: 'aac',
+          audioGroupId: undefined,
+          defaultAudio: undefined,
+          option: '',
+          description: '',
+          bitrate: 64000,
+          sampleRate: 44100,
+          fps: undefined,
+          width: undefined,
+          height: undefined,
+          pixelFormat: undefined,
+          bframe: undefined,
+          scaleType: undefined,
+          cq: undefined,
+          interlaced: false,
+          cbr: false,
+          channel: 2,
+          profile: undefined,
+          volume: undefined,
+          streamId: '',
+          streamIndex: undefined,
+        },
+    data: {
+      type: 'data',
+      name: '',
+      codec: 'copy',
+      option: '',
+      description: '',
+    },
+  }
+
+  if ((type === 'audio' && canAddAudio.value) || (type === 'data' && canAddData.value) || (type === 'video' && canAddVideo.value)) {
+    presetsValue.value.push({
+      name: type === 'video' ? `media-${videoData.value.length + 1}` : type === 'audio' ? `media-${audioData.value.length + 1}` : `media-${dataData.value.length + 1}`,
+      ...defaultPreset[type],
+      id: genUUID(),
+    })
+  }
+
+  activeTabChange(type)
+}
+
+function serializeAudio(data: any) {
+  const {
+    name,
+    option,
+    description,
+    type,
+    codec,
+    audioGroupId,
+    defaultAudio,
+    bitrate,
+    sampleRate,
+    channel,
+    profile,
+    volume,
+    id,
+    language,
+    label,
+  } = data
+  return emptyStr2Undefined({
+    id,
+    name,
+    option,
+    description,
+    type,
+    codec,
+    audioGroupId,
+    defaultAudio,
+    bitrate,
+    sampleRate,
+    channel,
+    profile,
+    volume,
+    language,
+    label,
+  })
+}
+
+function serializeVideo(data: any) {
+  const {
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    encoderType,
+    preset,
+    bitrate,
+    minrate,
+    maxrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    hdr,
+    interlaced,
+    cbr,
+    bframe,
+    id,
+  } = data
+  return emptyStr2Undefined({
+    id,
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    encoderType,
+    preset,
+    minrate,
+    bitrate,
+    maxrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    hdr,
+    interlaced,
+    cbr,
+    bframe,
+  })
+}
+
+function serializeCopy(data: any) {
+  const {
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    bitrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    interlaced,
+    cbr,
+    id,
+  } = data
+  return emptyStr2Undefined({
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    bitrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    interlaced,
+    cbr,
+    id,
+  })
+}
+
+function showNewActiveMedia(type: string) {
+  // const activeItem = `media-${presetsValue.value.length - 1}`
+  // activeMedia.value = activeItem
+
+  activeTab.value = type === 'video' ? '0' : type === 'audio' ? '1' : '2'
+  if (type === 'video')
+    activeMedia.value = `media-${videoData.value.length}`
+  else if (type === 'audio')
+    activeMedia.value = `media-${audioData.value.length}`
+  else
+    activeMedia.value = `media-${dataData.value.length}`
+}
+
+function addMedia(data: any) {
+  if (!canAddVideo.value && data.type === 'video') {
+    ElMessage.warning('Can not add video. Only one video')
+  }
+  else {
+    if ((data.type === 'audio' && canAddAudio.value) || (data.type === 'data' && canAddData.value) || (data.type === 'video' && canAddVideo.value))
+      pushPreset(data)
+
+    activeTabChange(data.type)
+    isShowMediaSelection.value = false
+  }
+}
+
+function pushPreset(data?: any) {
+  let serializeData = data
+  if (data.type === 'video')
+    serializeData = serializeVideo(data)
+  else if (data.type === 'audio')
+    serializeData = serializeAudio(data)
+  else if (data.type === 'data')
+    serializeData = serializeCopy(data)
+  presetsValue.value.push(serializeData)
+  showNewActiveMedia(data.type)
+}
+
+function setActiveMedia(type: string) {
+  const activeItem = type === 'video' ? `media-${videoData.value.length - 1}` : type === 'audio' ? `media-${audioData.value.length - 1}` : `media-${dataData.value.length - 1}`
+  activeMedia.value = activeItem
+}
+
+function handleDestroyMedia(name: any, type: string) {
+  ElMessageBox.confirm(t('library_profile.are_you_sure_to_remove_media'), t('library_profile.warning'), {
+    confirmButtonText: t('library_profile.ok'),
+    cancelButtonText: t('library_action.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      const presetIndex = getTabsNameIdx(name)
+      const removeId = type === 'video' ? videoData.value[presetIndex]?.id : type === 'audio' ? audioData.value[presetIndex]?.id : dataData.value[presetIndex]?.id
+
+      remove(removeId)
+
+      if (presetsValue.value.length > 0 && activeMediaIdx.value)
+        setActiveMedia(type)
+    })
+}
+
+function showErrorArray(error) {
+  if (typeof error === 'string')
+    return error
+  return undefined
+}
+
+function handleChangeName(name: string) {
+  emit('changeNameModifier', name)
+}
+
+function tabChange(_tab: string) {
+  activeMedia.value = 'media-0'
+}
+
+onMounted(() => {
+  if (mode.value === 'create' || mode.value === 'custom') {
+    addEmptyPreset('video')
+  }
+})
+
+const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'CreateProfileDto')
+const isBlockEdit = inject('isBlockEdit')
+
+const { formErrors, formRef } = useElFormContext()
+
+const isVideoError = computed(() => {
+  const _errors = presetsValue.value?.map((_item, _idx) => {
+    return {
+      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
+      type: _item?.type,
+    }
+  })
+
+  return _errors?.some(item => (item.isError === true && item.type === 'video'))
+})
+
+const isAudioError = computed(() => {
+  const _errors = presetsValue.value?.map((_item, _idx) => {
+    return {
+      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
+      type: _item?.type,
+    }
+  })
+
+  return _errors?.some(item => (item.isError === true && item.type === 'audio'))
+})
+const isDataError = computed(() => {
+  const _errors = presetsValue.value?.map((_item, _idx) => {
+    return {
+      isError: hasError(formErrors?.value?.profiles?.[idx.value]?.presets, [`${_idx}`]) || hasError(formErrors?.value?.presets, [`${_idx}`]),
+      type: _item?.type,
+    }
+  })
+
+  return _errors?.some(item => (item.isError === true && item.type === 'data'))
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-5">
+    <slot name="name">
+      <el-form-item class="h-80px max-w-50% [&_.el-form-item\_\_error]:relative" v-bind="nameAttrs">
+        <template #label>
+          <SSInformationLabel :label="$t('profile.name')" :info="schemaObj.name" />
+        </template>
+        <el-input
+          v-model.trim="nameValue"
+          placeholder=""
+          autocomplete="off"
+          :minlength="1"
+          :maxlength="50"
+          show-word-limit
+          clearable
+          @change="handleChangeName"
+        />
+      </el-form-item>
+      <slot name="information" />
+    </slot>
+  </div>
+  <slot v-bind="{ canAddVideo, showNewActiveMedia, canAddAudio, canAddData, addEmptyPreset }" name="action">
+    <div class="flex gap-2">
+      <el-form-item>
+        <el-tooltip :disabled="canAddVideo" :content="t('base_library.can_add_only_1_video')">
+          <el-dropdown placement="bottom-start" trigger="click">
+            <el-button type="primary" plain :disabled="!canAddVideo">
+              <template #icon>
+                <div class="i-ep:plus" />
+              </template>
+              Video
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="addEmptyPreset('video')">
+                  New Preset
+                </el-dropdown-item>
+                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('video')">
+                  Existing Preset
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item>
+        <el-tooltip :disabled="canAddAudio" :content="t('base_library.can_only_create_10_audio')">
+          <el-dropdown placement="bottom-start" trigger="click">
+            <el-button type="warning" plain :disabled="!canAddAudio">
+              <template #icon>
+                <div class="i-ep:plus" />
+              </template>
+              Audio
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="addEmptyPreset('audio')">
+                  New Preset
+                </el-dropdown-item>
+                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('audio')">
+                  Existing Preset
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item>
+        <el-tooltip :disabled="canAddData" :content="t('base_library.can_only_create_10_data')">
+          <el-dropdown placement="bottom-start" trigger="click">
+            <el-button plain :disabled="!canAddData">
+              <template #icon>
+                <div class="i-ep:plus" />
+              </template>
+              Data
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="addEmptyPreset('data')">
+                  New Preset
+                </el-dropdown-item>
+                <el-dropdown-item v-if="!isBlockEdit" @click="addPreset('data')">
+                  Existing Preset
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-tooltip>
+      </el-form-item>
+    </div>
+  </slot>
+
+  <el-divider content-position="left" class="my-10px flex items-center [&_.el-divider\_\_text.is-left]:translate-y-0">
+    <el-form-item v-bind="{ ...presetsAttrs, error: showErrorArray(presetsAttrs.error) }" class="w-200px !m-0 [&_.el-form-item\_\_content]:block">
+      <!-- {{ $t('library_profile.list_of_media') }} -->
+    </el-form-item>
+  </el-divider>
+  <el-tabs
+    v-model="activeTab"
+    tab-position="left"
+    class="demo-tabs [&_.el-tabs\_\_content]:p-10px"
+    @tab-change="tabChange"
+  >
+    <el-tab-pane label="Video">
+      <template #label>
+        <div :class="isVideoError ? 'text-error' : ''">
+          Video ({{ videoData.length }})
+        </div>
+      </template>
+      <el-tabs
+        v-show="videoData.length > 0"
+        v-model="activeMedia"
+        tab-position="top"
+        type="border-card"
+        closable
+        @tab-remove="(name) => handleDestroyMedia(name, 'video')"
+      >
+        <el-tab-pane
+          v-for="(media, _idx) in videoData"
+          :key="`media-${_idx}`"
+          :label="media.name"
+          :name="`media-${_idx}`"
+          lazy
+          class=""
+        >
+          <template #label>
+            <span
+              class="inline-flex items-center text-primary"
+              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${_idx}`]) || hasError(formErrors?.presets, [`${_idx}`]) ? '!text-error' : ''"
+            >
+              <el-icon>
+                <div class="i-ep:video-camera-filled" />
+              </el-icon>&nbsp;
+              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${_idx}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
+            </span>
+          </template>
+          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
+          <PresetConfigItem
+            :is-config-encoder="isConfigEncoder"
+            :encoder-options="encoderOptions"
+            :video-codecs="videoCodecs"
+            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
+            :is-package="isPackage"
+            :default-media-type="media.type"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-tab-pane>
+    <el-tab-pane label="Audio">
+      <template #label>
+        <div :class="isAudioError ? 'text-error' : ''">
+          Audio ({{ audioData.length }})
+        </div>
+      </template>
+      <el-tabs
+        v-show="audioData.length > 0"
+        v-model="activeMedia"
+        tab-position="top"
+        type="border-card"
+        closable
+        @tab-remove="(name) => handleDestroyMedia(name, 'audio')"
+      >
+        <el-tab-pane
+          v-for="(media, _idx) in audioData"
+          :key="`media-${_idx}`"
+          :label="media.name"
+          :name="`media-${_idx}`"
+          lazy
+          class=""
+        >
+          <template #label>
+            <span
+              class="inline-flex items-center text-warning"
+              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''"
+            >
+              <el-icon>
+                <div class="i-ep:headset" />
+              </el-icon>&nbsp;
+              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
+            </span>
+          </template>
+          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
+          <PresetConfigItem
+            :is-config-encoder="isConfigEncoder"
+            :video-codecs="videoCodecs"
+            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
+            :is-package="isPackage"
+            :default-media-type="media.type"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-tab-pane>
+    <el-tab-pane v-if="!isBlockAddData" label="Data">
+      <template #label>
+        <div :class="isDataError ? 'text-error' : ''">
+          Data ({{ dataData.length }})
+        </div>
+      </template>
+      <el-tabs
+        v-show="dataData.length > 0"
+        v-model="activeMedia"
+        tab-position="top"
+        type="border-card"
+        closable
+        @tab-remove="(name) => handleDestroyMedia(name, 'data')"
+      >
+        <el-tab-pane
+          v-for="(media, _idx) in dataData"
+          :key="`media-${_idx}`"
+          :label="media.name"
+          :name="`media-${_idx}`"
+          lazy
+          class=""
+        >
+          <template #label>
+            <span
+              class="inline-flex items-center"
+              :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''"
+            >
+              <el-icon class="data-icon border">
+                <div class="i-ep:menu" />
+              </el-icon>&nbsp;
+              <span :title="media.name" class="block max-w-75px truncate" :class="hasError(formErrors?.profiles?.[idx]?.presets, [`${findIndexById(media.id)}`]) || hasError(formErrors?.presets, [`${findIndexById(media.id)}`]) ? '!text-error' : ''">{{ media.name }}</span>
+            </span>
+          </template>
+          <slot name="preset" :prop="getProp(`presets.[${findIndexById(media.id)}]`)()" :media-type="media.type" />
+          <PresetConfigItem
+            :is-config-encoder="isConfigEncoder"
+            :video-codecs="videoCodecs"
+            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
+            :is-package="isPackage"
+            :default-media-type="media.type"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-tab-pane>
+  </el-tabs>
+
+  <el-dialog
+    v-model="isShowMediaSelection"
+    append-to-body
+    width="85%"
+    :title="mediaSelectionTitle"
+  >
+    <slot
+      v-if="isMediaLive"
+      name="mediaselection"
+      :media-type="creatingMedia"
+      :exclusion="['profiles']"
+      :select-item="addMedia"
+    />
+    <MediaSelection
+      v-else
+      :media-type="creatingMedia"
+      :exclusion="['profiles']"
+      @select-item="addMedia"
+    />
+  </el-dialog>
+</template>