@sigmaott/base-next 1.0.6

package/src/components/Channel/ProfileConfigItem.vue

@@ -0,0 +1,829 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  changeNameModifier: [id: string]
+}>()
+
+const { prop, isPackage, videoCodecs, encoderOptions, isMediaLive, isBlockAddData, mode, isConfigEncoder, idx, scte35, defaultEncoderType } = definePropsRefs<{
+  prop?: string
+  isPackage?: boolean
+  videoCodecs?: Record<string, string>
+  encoderOptions?: any
+  defaultEncoderType?: string
+  isMediaLive?: boolean
+  isBlockAddData?: boolean
+  mode?: string
+  isConfigEncoder?: boolean
+  idx?: number
+  scte35?: boolean
+}>()
+
+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(videoData.value?.length > 0 ? '0' : audioData.value?.length > 0 ? '1' : dataData.value?.length > 0 ? '2' : '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}`
+}
+
+const encoderIdValue = ref(inject('encoderIdValue'))
+function addEmptyPreset(type: 'video' | 'audio' | 'data') {
+  const defaultPreset = {
+    video: isPackage.value
+      ? {
+          name: 'video',
+          type: 'video',
+          videoCodec: 'copy',
+        }
+      : isConfigEncoder.value
+        ? {
+            type: 'video',
+            name: '',
+            videoCodec: 'h264',
+            audioCodec: undefined,
+            dataCodec: undefined,
+            encoderType: defaultEncoderType.value ? defaultEncoderType.value : (encoderIdValue.value !== -1 && encoderIdValue.value !== null && encoderIdValue.value !== undefined && encoderIdValue.value !== '') ? 'nvenc' : 'open_h264',
+            videoPreset: (encoderIdValue.value !== -1 && encoderIdValue.value !== null && encoderIdValue.value !== undefined && encoderIdValue.value !== '') ? 'llhp' : 'veryfast',
+            option: undefined,
+            description: undefined,
+            videoBitrate: 4000000,
+            minrate: undefined,
+            maxrate: undefined,
+            sampleRate: undefined,
+            fps: 25,
+            width: 1920,
+            height: 1080,
+            pixelFormat: undefined,
+            bframe: undefined,
+            scaleType: undefined,
+            scanType: 'progressive',
+            rateControlMode: 'vbr',
+            rc: undefined,
+            bufsize: undefined,
+            cq: undefined,
+            hdr: undefined,
+            gopMode: 'auto',
+            gopValue: undefined,
+            fixedGOP: true,
+            cbr: false,
+            channel: undefined,
+            videoProfile: undefined,
+            videoLevel: undefined,
+            volume: undefined,
+            streamId: undefined,
+            streamIndex: undefined,
+            aspectRatioMode: 'auto',
+            aspectRatioWidth: 16,
+            aspectRatioHeight: 9,
+          }
+        : {
+            type: 'video',
+            name: '',
+            videoCodec: 'h264',
+            audioCodec: undefined,
+            dataCodec: undefined,
+            encoderType: undefined,
+            videoPreset: undefined,
+            option: undefined,
+            description: undefined,
+            videoBitrate: 4000000,
+            minrate: undefined,
+            maxrate: undefined,
+            sampleRate: undefined,
+            fps: 25,
+            width: 1920,
+            height: 1080,
+            pixelFormat: undefined,
+            bframe: undefined,
+            scaleType: undefined,
+            scanType: 'progressive',
+            rateControlMode: 'vbr',
+            rc: undefined,
+            bufsize: undefined,
+            cq: undefined,
+            hdr: undefined,
+            gopMode: 'auto',
+            gopValue: undefined,
+            fixedGOP: true,
+            cbr: false,
+            channel: undefined,
+            videoProfile: undefined,
+            videoLevel: undefined,
+            volume: undefined,
+            streamId: undefined,
+            streamIndex: undefined,
+            aspectRatioMode: 'auto',
+            aspectRatioWidth: 16,
+            aspectRatioHeight: 9,
+          },
+    audio: isPackage.value
+      ? {
+          name: 'audio',
+          type: 'audio',
+          audioCodec: 'copy',
+        }
+      : {
+          type: 'audio',
+          name: undefined,
+          videoCodec: undefined,
+          audioCodec: 'aac',
+          dataCodec: undefined,
+          audioGroupId: undefined,
+          audioDefault: undefined,
+          option: undefined,
+          description: undefined,
+          audioBitrate: 32000,
+          sampleRate: 44100,
+          fps: undefined,
+          width: undefined,
+          height: undefined,
+          pixelFormat: undefined,
+          bframe: undefined,
+          scaleType: undefined,
+          cq: undefined,
+          interlaced: false,
+          cbr: false,
+          channel: 2,
+          audioProfile: undefined,
+          volume: undefined,
+          streamId: undefined,
+          streamIndex: undefined,
+        },
+    data: {
+      type: 'data',
+      name: '',
+      dataCodec: 'copy',
+      option: undefined,
+      description: undefined,
+      scte35OverwriteConfig: {
+        enabled: false,
+        overwriteDuration: 30,
+        overwriteDelayTime: 0,
+      },
+    },
+  }
+
+  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,
+    audioCodec,
+    audioGroupId,
+    audioDefault,
+    audioBitrate,
+    sampleRate,
+    channel,
+    audioProfile,
+    volume,
+    id,
+    language,
+    label,
+  } = data
+  return emptyStr2Undefined({
+    id,
+    name,
+    option,
+    description,
+    type,
+    codec,
+    audioCodec,
+    audioGroupId,
+    audioDefault,
+    audioBitrate,
+    sampleRate,
+    channel,
+    audioProfile,
+    volume,
+    language,
+    label,
+  })
+}
+
+function serializeVideo(data: any) {
+  const {
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    videoCodec,
+    encoderType,
+    videoPreset,
+    videoBitrate,
+    minrate,
+    maxrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    hdr,
+    gopMode,
+    gopValue,
+    fixedGOP,
+    rc,
+    videoProfile,
+    videoLevel,
+    bufsize,
+    cbr,
+    bframe,
+    id,
+    aspectRatioMode,
+    aspectRatioWidth,
+    aspectRatioHeight,
+  } = data
+  return emptyStr2Undefined({
+    id,
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    videoCodec,
+    encoderType,
+    videoPreset,
+    minrate,
+    videoBitrate,
+    maxrate,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    hdr,
+    gopMode,
+    gopValue,
+    fixedGOP,
+    rc,
+    videoProfile,
+    videoLevel,
+    bufsize,
+    cbr,
+    bframe,
+    aspectRatioMode,
+    aspectRatioWidth,
+    aspectRatioHeight,
+  })
+}
+
+function serializeCopy(data: any) {
+  const {
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    dataCodec,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    interlaced,
+    cbr,
+    id,
+    scte35OverwriteConfig = {
+      enabled: false,
+      overwriteDuration: 30,
+      overwriteDelayTime: 0,
+    },
+  } = data
+  return emptyStr2Undefined({
+    name,
+    option,
+    description,
+    type,
+    fps,
+    codec,
+    dataCodec,
+    width,
+    height,
+    pixelFormat,
+    scaleType,
+    cq,
+    interlaced,
+    cbr,
+    id,
+    scte35OverwriteConfig,
+  })
+}
+
+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"
+          autocomplete="off"
+          :minlength="1"
+          :maxlength="50"
+          show-word-limit
+          clearable
+          :placeholder="$t('base_library.enter_profile_name')"
+          @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>
+
+      <slot name="sync" />
+    </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" />
+          <SSChannelPresetConfigItem
+            :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" />
+          <SSChannelPresetConfigItem
+            :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" />
+          <SSChannelPresetConfigItem
+            :is-config-encoder="isConfigEncoder"
+            :video-codecs="videoCodecs"
+            :prop="getProp(`presets.[${findIndexById(media.id)}]`)()"
+            :is-package="isPackage"
+            :default-media-type="media.type"
+            :scte35
+          />
+        </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>