@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/TargetPreset.vue

@@ -1,541 +1,541 @@
-<script lang="ts" setup>
-const { idx } = definePropsRefs<{
-  idx: number
-}>()
-
-function getProp(target?: string) {
-  return () => target ? `targets[${idx.value}].${target}` : `targets[${idx.value}]`
-}
-const { t } = useI18n()
-const [targetsValue] = useElFieldArray<TargetDto>(() => `targets.${idx.value}`)
-const [profiles] = useElFieldArray<ProfileDto[]>(() => 'profiles')
-
-const [enableValue] = useElField<boolean>(getProp('data.catchup.enable'), [])
-const [startOverValue] = useElField<boolean>(getProp('data.startOver.enable'), [])
-const [splitValue] = useElField<boolean>(getProp('data.manifest.split'), [])
-const [containerTypeValue] = useElField<string>(getProp('data.manifest.containerType'), [])
-const [profileValue, profileAttrs, { remove }] = useElFieldArray<TargetProfileDto[]>(() => `targets.${idx.value}.profiles`, [{
-  required: true,
-  trigger: ['change'],
-  validator: (rule, value, callback) => {
-    if (!value || value?.length === 0)
-      callback(new Error(t('EventChannel.form.validate.requireProfile')))
-    else
-      callback()
-  },
-}], {
-  defaultValue: [],
-})
-
-const { schemaItem } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
-
-const multipleTableRef = ref<any>()
-const tableSelected = ref<Array[]>([])
-const selectedProfiles = ref<TargetProfileDto[]>(profileValue.value)
-
-const selectedProfilesNew = ref<TargetProfileDto[]>([])
-const keepSelectedProfiles = ref<any[]>([])
-
-function reCheckProfile() {
-  if (keepSelectedProfiles.value?.length > 0) {
-    tableSelected.value.forEach((row) => {
-      const isSelected = keepSelectedProfiles.value.some(item => item.id === row.id)
-      multipleTableRef.value?.toggleRowSelection(row, isSelected)
-    })
-  }
-  else if (selectedProfiles.value?.length > 0) {
-    tableSelected.value.forEach((row) => {
-      const isSelected = selectedProfiles.value.some(item => item.id === row.id)
-      multipleTableRef.value?.toggleRowSelection(row, isSelected)
-    })
-  }
-}
-
-const isAllowEditingTarget = inject('isAllowEditingTarget')
-const { formErrors } = useElFormContext()
-function handleSelectionChange(profile) {
-  // if (isMultiplex.value && profile.length === tableSelected.value.length && profile.length > 1) {
-  //   multipleTableRef.value.clearSelection()
-  //   return
-  // }
-  if (!isAllowEditingTarget.value)
-    return
-  selectedProfilesNew.value = profile
-
-  const uniqueProfiles = (profileValue.value || []).filter(item => !profile?.some(el => el.id === item.id))
-  const index = profileValue.value?.findIndex(item => item.id === uniqueProfiles[0]?.id)
-
-  nextTick(() => {
-    if (index !== -1) {
-      formErrors.value?.targets?.[idx.value]?.profiles?.splice(index, 1)
-      cleanEmptyObjectAndArray(formErrors.value)
-    }
-  })
-  submitSelect()
-}
-whenever(multipleTableRef, () => {
-  nextTick(() => {
-    reCheckProfile()
-  })
-})
-
-// watchDeep(profiles, () => {
-//   // NOTE: check if profile was deleted base on profile id
-//   // TODO: check the case when edit profile, we dont have the id
-//   profileValue.value = profileValue.value.filter((item) => {
-//     return profiles.value.find(profile => profile.id === item.id)
-//   })
-// })
-
-// SECTION: preset dialog
-
-const isSigmaMultiDrmProviderKey = computed(() => {
-  return targetsValue.value?.data?.drm?.enable
-    // && targetsValue.value?.data?.drm?.multiKey
-    && targetsValue.value?.data?.drm?.keyProvider === 'sigma-multi-drm'
-})
-
-const multiKeyEnum = computed(() => {
-  return schemaItem?.properties?.multiKey?.enum || []
-})
-
-const isRTMPFormat = computed(() => {
-  return targetsValue.value.data.format === 'rtmp'
-})
-
-const isUDPFormat = computed(() => {
-  return targetsValue.value.data.format === 'udp'
-})
-
-const isHlsDash = computed(() => {
-  return ['hls', 'dash', 'hls-dash'].includes(targetsValue.value.data.format)
-})
-
-const isMabr = computed(() => {
-  return ['mabr'].includes(targetsValue.value.data.format)
-})
-
-const isMultiplex = computed(() => {
-  return targetsValue.value.data.format === 'multiplex'
-})
-
-const isHls = computed(() => {
-  return targetsValue.value.data.format === 'hls'
-})
-
-const typeTarget = computed(() => {
-  return targetsValue.value.data.format as string
-})
-
-watch(isSigmaMultiDrmProviderKey.value, () => {
-  if (!isSigmaMultiDrmProviderKey.value && profileValue.value) {
-    profileValue.value = profileValue.value.map((item) => {
-      return {
-        ...item,
-        multiKey: undefined,
-      }
-    })
-  }
-})
-const { formRef } = useElFormContext()
-
-// function destroySelectedProfile(id, index) {
-//   selectedProfiles.value.splice(index, 1)
-//   remove(id)
-//   profileValue.value.forEach((_, _idx) => {
-//     formRef.value.validateField(`targets.${idx.value}.profiles.${_idx}.programId`)
-//   })
-// }
-
-function updateSelectProfile() {
-  const matchingProfiles = profileValue.value?.filter(item1 => selectedProfilesNew.value?.some(item2 => item1.id === item2.id))
-  const notMatchingProfiles = selectedProfilesNew.value?.filter(newItem => !profileValue.value?.some(oldItem => newItem.id === oldItem.id))
-
-  return [...matchingProfiles, ...notMatchingProfiles]
-}
-function submitSelect() {
-  if (isAllowEditingTarget.value)
-    profileValue.value = updateSelectProfile()
-}
-
-watch(() => enableValue, () => {
-  tableSelected.value.forEach((item, idx) => {
-    item.catchup = enableValue.value
-    handleChangeMode(idx, 'storage')
-  })
-}, { deep: true })
-watch(() => startOverValue, () => {
-  tableSelected.value.forEach((item, idx) => {
-    item.startOver = startOverValue.value
-    handleChangeMode(idx, 'startOver')
-  })
-}, { deep: true })
-
-function changeNetworkInterface(scope: any, idx: number) {
-  profileValue.value[idx].networkInterface = scope
-}
-
-watch(profiles, () => {
-  let existingProfile
-  tableSelected.value = profiles.value?.map((item) => {
-    existingProfile = profileValue.value?.find(el => el.id === item.id)
-
-    if (existingProfile) {
-      return {
-        ...item,
-        catchup: existingProfile?.catchup || false,
-        audioGroup: existingProfile?.audioGroup || [],
-        startOver: existingProfile?.startOver || false,
-        multiKey: existingProfile?.multiKey || undefined,
-        uri: existingProfile?.uri || undefined,
-        networkInterface: existingProfile?.networkInterface || undefined,
-        programId: existingProfile?.programId || undefined,
-        data: item.presets.filter(p => p.type === 'data'),
-        video: item.presets.filter(p => p.type === 'video'),
-        audio: item.presets.filter(p => p.type === 'audio'),
-      }
-    }
-    else {
-      return {
-        ...item,
-        catchup: false,
-        startOver: false,
-        audioGroup: [],
-        multiKey: undefined,
-        uri: undefined,
-        networkInterface: undefined,
-        programId: undefined,
-        data: item.presets.filter(p => p.type === 'data'),
-        video: item.presets.filter(p => p.type === 'video'),
-        audio: item.presets.filter(p => p.type === 'audio'),
-      }
-    }
-  })
-
-  isAllowEditingTarget.value ? selectedProfiles.value = tableSelected.value : selectedProfiles.value = profileValue.value
-  handleSelectionChange(selectedProfiles.value)
-
-  nextTick(() => {
-    reCheckProfile()
-  })
-}, { deep: true, immediate: true })
-
-function handleChangeMode(idx: number, type: string) {
-  if (profileValue.value?.length > 0 && profileValue.value?.[idx]) {
-    if (type === 'storage')
-      profileValue.value[idx].catchup = tableSelected.value?.[idx]?.catchup || false
-    else
-      profileValue.value[idx].startOver = tableSelected.value?.[idx]?.startOver || false
-  }
-}
-
-function disabledChangeMode(id: string) {
-  const isExist = profileValue.value?.find(item => item.id === id)
-  return !isExist
-}
-
-function findIndexProfile(id: string) {
-  const index = profileValue.value?.findIndex(profile => profile.id === id)
-
-  return index
-}
-
-function handleChangeUri(newUri: string, idx: number) {
-  tableSelected.value[idx].uri = newUri
-}
-function handleEdit() {
-  isAllowEditingTarget.value = true
-}
-
-function handleChangeMultikey(value, id) {
-  targetsValue.value?.profiles?.forEach((_p) => {
-    if (_p.id === id) {
-      _p.multiKey = value
-    }
-  })
-}
-
-const TargetProfileDtoMultiKeyEnum = [
-  'SD',
-  'HD',
-  'FHD',
-  '2K',
-  '4K',
-  '8K',
-]
-// function selectableProfile(row) {
-//   return !(isMultiplex.value && profileValue.value?.length > 0 && !profileValue.value?.find(item => item.id === row.id))
-// }
-</script>
-
-<template>
-  <section @mouseover="handleEdit">
-    <el-form-item v-bind="profileAttrs" class="mb-4" />
-
-    <section class="mb-3">
-      <el-table
-        ref="multipleTableRef"
-        class=""
-        :data="tableSelected"
-        stripe
-        border
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <!-- <el-table-column align="center" width="50" type="index" label="#" /> -->
-        <el-table-column label="Name" prop="name">
-          <template #default="{ row }">
-            <SSTooltipEllipsis :content="row.name" :line-clamp="1" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-if="isMultiplex || isUDPFormat"
-          align="center"
-          label="Program ID"
-          min-width="150"
-          prop="programId"
-        >
-          <template #header>
-            <span>Program ID</span><span v-if="!isUDPFormat" class="ml-1 text-[--el-color-danger]">*</span>
-          </template>
-          <template #default="{ row }">
-            <SSChannelTargetProfileProgram
-              :enabled="!isUDPFormat"
-              :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`"
-              :disabled="disabledChangeMode(row.id)"
-              :profiles="profileValue"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column v-if="isHlsDash || isMabr" width="250" label="Multi Keys">
-          <template #default="{ row }">
-            <el-select
-              v-model="row.multiKey"
-              class="w-full"
-              clearable
-              size="default"
-              :disabled="!isSigmaMultiDrmProviderKey || disabledChangeMode(row.id)"
-              @change="handleChangeMultikey(row.multiKey, row.id)"
-            >
-              <el-option
-                v-for="(item, idx) in TargetProfileDtoMultiKeyEnum"
-                :key="idx"
-                :value="item"
-                :label="item"
-              />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="isHlsDash || isMabr" width="150" label="Catchup">
-          <template #default="scope">
-            <el-switch
-              v-model="scope.row.catchup"
-              :disabled="!targetsValue?.data?.catchup?.enable || disabledChangeMode(scope.row.id)"
-              :active-value="true"
-              :inactive-value="false"
-              active-text="Enable"
-              @change="handleChangeMode(scope.$index, 'storage')"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column v-if="isHlsDash || isMabr" width="150" label="Startover">
-          <template #default="scope">
-            <el-switch
-              v-model="scope.row.startOver"
-              :disabled="!targetsValue.data?.startOver?.enable || disabledChangeMode(scope.row.id)"
-              :active-value="true"
-              :inactive-value="false"
-              active-text="Enable"
-              @change="handleChangeMode(scope.$index, 'startOver')"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column v-if="isHls" width="300" label="Audio Group ID">
-          <template #default="{ $index, row }">
-            <SSChannelTargetProfileAudioGroup :disabled="!splitValue && containerTypeValue !== 'fmp4'" :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-if="(isRTMPFormat || isUDPFormat)"
-          label="URI"
-          min-width="250"
-          prop="uri"
-        >
-          <template #header>
-            <span>URI</span><span class="ml-1 text-[--el-color-danger]">*</span>
-          </template>
-          <template #default="{ $index, row }">
-            <SSChannelTargetProfileURI
-              class="mt-8px"
-              :disabled="!(isRTMPFormat || isUDPFormat) || disabledChangeMode(row.id)"
-              :type="typeTarget"
-              :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`"
-              @change-value="handleChangeUri($event, $index)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-if="!isMultiplex && !isHls && !isHlsDash"
-          label="Network Interface"
-          min-width="250"
-          prop="networkInterface"
-        >
-          <template #default="scope">
-            <SSChannelTargetNetworkInterface v-model:value="scope.row.networkInterface" :disabled="!isUDPFormat || disabledChangeMode(scope.row.id)" @change-network-interface="changeNetworkInterface($event, findIndexProfile(scope.row.id))" />
-          </template>
-        </el-table-column>
-        <el-table-column label="Video" width="515" prop="video">
-          <template #default="{ row }">
-            <div v-if="row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-              {{ $t('library_profile.no_item') }}
-            </div>
-            <div v-else>
-              <SharedMediaInfoViewer
-                v-for="(item, idx) in row?.video || []"
-                :key="idx"
-                :media="item"
-                class="w-96% justify-center"
-              />
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="Audio" min-width="300" prop="audio">
-          <template #default="{ row }">
-            <div v-if="row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-              {{ $t('library_profile.no_item') }}
-            </div>
-            <div v-else class="flex gap-2px">
-              <template v-for="(item) in row.audio?.slice(0, 2) || []" :key="item.id">
-                <div v-if="row?.audio?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
-                  <div class="i-ep:headset min-w-14px text-primary" />
-                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                </div>
-                <el-popover
-                  v-else
-                  placement="bottom"
-                  trigger="hover"
-                  :width="500"
-                >
-                  <template #reference>
-                    <div class="item-list-row max-w-100px flex items-center gap-1">
-                      <div class="i-ep:headset min-w-14px text-primary" />
-                      <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                    </div>
-                  </template>
-                  <el-scrollbar>
-                    <SharedMediaInfoViewer
-                      v-for="(i, index) in row.audio || []"
-                      :key="index"
-                      class="w-96% justify-center"
-                      :media="i"
-                    />
-                  </el-scrollbar>
-                </el-popover>
-              </template>
-              <el-popover
-                v-if="row.audio?.length > 2"
-                placement="bottom"
-                trigger="hover"
-                :width="500"
-              >
-                <template #reference>
-                  <span class="item-list-row">
-                    ...
-                  </span>
-                </template>
-                <el-scrollbar height="200px">
-                  <SharedMediaInfoViewer
-                    v-for="(i, index) in row?.audio || []"
-                    :key="index"
-                    class="w-96% justify-center"
-                    :media="i"
-                  />
-                </el-scrollbar>
-              </el-popover>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="Data" min-width="300" prop="data">
-          <template #default="{ row }">
-            <div v-if="row?.data?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-              {{ $t('library_profile.no_item') }}
-            </div>
-            <div v-else class="flex gap-2px">
-              <template v-for="(item) in row.data?.slice(0, 2) || []" :key="item.id">
-                <div v-if="row?.data?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
-                  <div class="i-ep:menu min-w-14px text-primary" />
-                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                </div>
-                <el-popover
-                  v-else
-                  placement="bottom"
-                  trigger="hover"
-                  :width="500"
-                >
-                  <template #reference>
-                    <div class="item-list-row max-w-100px flex items-center gap-1">
-                      <div class="i-ep:menu min-w-14px text-primary" />
-                      <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                    </div>
-                  </template>
-                  <el-scrollbar>
-                    <SharedMediaInfoViewer
-                      v-for="(i, index) in row?.data || []"
-                      :key="index"
-                      class="w-96% justify-center"
-                      :media="i"
-                    />
-                  </el-scrollbar>
-                </el-popover>
-              </template>
-              <el-popover
-                v-if="row?.data?.length > 2"
-                placement="bottom"
-                trigger="hover"
-                :width="500"
-              >
-                <template #reference>
-                  <span class="item-list-row">
-                    ...
-                  </span>
-                </template>
-                <el-scrollbar height="200px">
-                  <SharedMediaInfoViewer
-                    v-for="(i, index) in row?.data || []"
-                    :key="index"
-                    class="w-96% justify-center"
-                    :media="i"
-                  />
-                </el-scrollbar>
-              </el-popover>
-            </div>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column align="center" label="Action" width="100" fixed="right">
-          <template #default="{ row, $index }">
-            <el-tooltip content="Delete">
-              <el-button type="danger" @click="destroySelectedProfile(row.id, $index)">
-                <template #icon>
-                  <div class="i-ep:delete" />
-                </template>
-              </el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column> -->
-      </el-table>
-    </section>
-  </section>
-</template>
-
-<style scoped>
-.item-list-row {
-  padding: 5px;
-  position: relative;
-  border: 1px solid rgba(64, 158, 255, 0.4);
-  border-radius: 4px;
-}
-
-.el-table-column--selection {
-  display: none !important;
-}
-</style>
+<script lang="ts" setup>
+const { idx } = definePropsRefs<{
+  idx: number
+}>()
+
+function getProp(target?: string) {
+  return () => target ? `targets[${idx.value}].${target}` : `targets[${idx.value}]`
+}
+const { t } = useI18n()
+const [targetsValue] = useElFieldArray<TargetDto>(() => `targets.${idx.value}`)
+const [profiles] = useElFieldArray<ProfileDto[]>(() => 'profiles')
+
+const [enableValue] = useElField<boolean>(getProp('data.catchup.enable'), [])
+const [startOverValue] = useElField<boolean>(getProp('data.startOver.enable'), [])
+const [splitValue] = useElField<boolean>(getProp('data.manifest.split'), [])
+const [containerTypeValue] = useElField<string>(getProp('data.manifest.containerType'), [])
+const [profileValue, profileAttrs, { remove }] = useElFieldArray<TargetProfileDto[]>(() => `targets.${idx.value}.profiles`, [{
+  required: true,
+  trigger: ['change'],
+  validator: (rule, value, callback) => {
+    if (!value || value?.length === 0)
+      callback(new Error(t('EventChannel.form.validate.requireProfile')))
+    else
+      callback()
+  },
+}], {
+  defaultValue: [],
+})
+
+const { schemaItem } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
+
+const multipleTableRef = ref<any>()
+const tableSelected = ref<Array[]>([])
+const selectedProfiles = ref<TargetProfileDto[]>(profileValue.value)
+
+const selectedProfilesNew = ref<TargetProfileDto[]>([])
+const keepSelectedProfiles = ref<any[]>([])
+
+function reCheckProfile() {
+  if (keepSelectedProfiles.value?.length > 0) {
+    tableSelected.value.forEach((row) => {
+      const isSelected = keepSelectedProfiles.value.some(item => item.id === row.id)
+      multipleTableRef.value?.toggleRowSelection(row, isSelected)
+    })
+  }
+  else if (selectedProfiles.value?.length > 0) {
+    tableSelected.value.forEach((row) => {
+      const isSelected = selectedProfiles.value.some(item => item.id === row.id)
+      multipleTableRef.value?.toggleRowSelection(row, isSelected)
+    })
+  }
+}
+
+const isAllowEditingTarget = inject('isAllowEditingTarget')
+const { formErrors } = useElFormContext()
+function handleSelectionChange(profile) {
+  // if (isMultiplex.value && profile.length === tableSelected.value.length && profile.length > 1) {
+  //   multipleTableRef.value.clearSelection()
+  //   return
+  // }
+  if (!isAllowEditingTarget.value)
+    return
+  selectedProfilesNew.value = profile
+
+  const uniqueProfiles = (profileValue.value || []).filter(item => !profile?.some(el => el.id === item.id))
+  const index = profileValue.value?.findIndex(item => item.id === uniqueProfiles[0]?.id)
+
+  nextTick(() => {
+    if (index !== -1) {
+      formErrors.value?.targets?.[idx.value]?.profiles?.splice(index, 1)
+      cleanEmptyObjectAndArray(formErrors.value)
+    }
+  })
+  submitSelect()
+}
+whenever(multipleTableRef, () => {
+  nextTick(() => {
+    reCheckProfile()
+  })
+})
+
+// watchDeep(profiles, () => {
+//   // NOTE: check if profile was deleted base on profile id
+//   // TODO: check the case when edit profile, we dont have the id
+//   profileValue.value = profileValue.value.filter((item) => {
+//     return profiles.value.find(profile => profile.id === item.id)
+//   })
+// })
+
+// SECTION: preset dialog
+
+const isSigmaMultiDrmProviderKey = computed(() => {
+  return targetsValue.value?.data?.drm?.enable
+    // && targetsValue.value?.data?.drm?.multiKey
+    && targetsValue.value?.data?.drm?.keyProvider === 'sigma-multi-drm'
+})
+
+const multiKeyEnum = computed(() => {
+  return schemaItem?.properties?.multiKey?.enum || []
+})
+
+const isRTMPFormat = computed(() => {
+  return targetsValue.value.data.format === 'rtmp'
+})
+
+const isUDPFormat = computed(() => {
+  return targetsValue.value.data.format === 'udp'
+})
+
+const isHlsDash = computed(() => {
+  return ['hls', 'dash', 'hls-dash'].includes(targetsValue.value.data.format)
+})
+
+const isMabr = computed(() => {
+  return ['mabr'].includes(targetsValue.value.data.format)
+})
+
+const isMultiplex = computed(() => {
+  return targetsValue.value.data.format === 'multiplex'
+})
+
+const isHls = computed(() => {
+  return targetsValue.value.data.format === 'hls'
+})
+
+const typeTarget = computed(() => {
+  return targetsValue.value.data.format as string
+})
+
+watch(isSigmaMultiDrmProviderKey.value, () => {
+  if (!isSigmaMultiDrmProviderKey.value && profileValue.value) {
+    profileValue.value = profileValue.value.map((item) => {
+      return {
+        ...item,
+        multiKey: undefined,
+      }
+    })
+  }
+})
+const { formRef } = useElFormContext()
+
+// function destroySelectedProfile(id, index) {
+//   selectedProfiles.value.splice(index, 1)
+//   remove(id)
+//   profileValue.value.forEach((_, _idx) => {
+//     formRef.value.validateField(`targets.${idx.value}.profiles.${_idx}.programId`)
+//   })
+// }
+
+function updateSelectProfile() {
+  const matchingProfiles = profileValue.value?.filter(item1 => selectedProfilesNew.value?.some(item2 => item1.id === item2.id))
+  const notMatchingProfiles = selectedProfilesNew.value?.filter(newItem => !profileValue.value?.some(oldItem => newItem.id === oldItem.id))
+
+  return [...matchingProfiles, ...notMatchingProfiles]
+}
+function submitSelect() {
+  if (isAllowEditingTarget.value)
+    profileValue.value = updateSelectProfile()
+}
+
+watch(() => enableValue, () => {
+  tableSelected.value.forEach((item, idx) => {
+    item.catchup = enableValue.value
+    handleChangeMode(idx, 'storage')
+  })
+}, { deep: true })
+watch(() => startOverValue, () => {
+  tableSelected.value.forEach((item, idx) => {
+    item.startOver = startOverValue.value
+    handleChangeMode(idx, 'startOver')
+  })
+}, { deep: true })
+
+function changeNetworkInterface(scope: any, idx: number) {
+  profileValue.value[idx].networkInterface = scope
+}
+
+watch(profiles, () => {
+  let existingProfile
+  tableSelected.value = profiles.value?.map((item) => {
+    existingProfile = profileValue.value?.find(el => el.id === item.id)
+
+    if (existingProfile) {
+      return {
+        ...item,
+        catchup: existingProfile?.catchup || false,
+        audioGroup: existingProfile?.audioGroup || [],
+        startOver: existingProfile?.startOver || false,
+        multiKey: existingProfile?.multiKey || undefined,
+        uri: existingProfile?.uri || undefined,
+        networkInterface: existingProfile?.networkInterface || undefined,
+        programId: existingProfile?.programId || undefined,
+        data: item.presets.filter(p => p.type === 'data'),
+        video: item.presets.filter(p => p.type === 'video'),
+        audio: item.presets.filter(p => p.type === 'audio'),
+      }
+    }
+    else {
+      return {
+        ...item,
+        catchup: false,
+        startOver: false,
+        audioGroup: [],
+        multiKey: undefined,
+        uri: undefined,
+        networkInterface: undefined,
+        programId: undefined,
+        data: item.presets.filter(p => p.type === 'data'),
+        video: item.presets.filter(p => p.type === 'video'),
+        audio: item.presets.filter(p => p.type === 'audio'),
+      }
+    }
+  })
+
+  isAllowEditingTarget.value ? selectedProfiles.value = tableSelected.value : selectedProfiles.value = profileValue.value
+  handleSelectionChange(selectedProfiles.value)
+
+  nextTick(() => {
+    reCheckProfile()
+  })
+}, { deep: true, immediate: true })
+
+function handleChangeMode(idx: number, type: string) {
+  if (profileValue.value?.length > 0 && profileValue.value?.[idx]) {
+    if (type === 'storage')
+      profileValue.value[idx].catchup = tableSelected.value?.[idx]?.catchup || false
+    else
+      profileValue.value[idx].startOver = tableSelected.value?.[idx]?.startOver || false
+  }
+}
+
+function disabledChangeMode(id: string) {
+  const isExist = profileValue.value?.find(item => item.id === id)
+  return !isExist
+}
+
+function findIndexProfile(id: string) {
+  const index = profileValue.value?.findIndex(profile => profile.id === id)
+
+  return index
+}
+
+function handleChangeUri(newUri: string, idx: number) {
+  tableSelected.value[idx].uri = newUri
+}
+function handleEdit() {
+  isAllowEditingTarget.value = true
+}
+
+function handleChangeMultikey(value, id) {
+  targetsValue.value?.profiles?.forEach((_p) => {
+    if (_p.id === id) {
+      _p.multiKey = value
+    }
+  })
+}
+
+const TargetProfileDtoMultiKeyEnum = [
+  'SD',
+  'HD',
+  'FHD',
+  '2K',
+  '4K',
+  '8K',
+]
+// function selectableProfile(row) {
+//   return !(isMultiplex.value && profileValue.value?.length > 0 && !profileValue.value?.find(item => item.id === row.id))
+// }
+</script>
+
+<template>
+  <section @mouseover="handleEdit">
+    <el-form-item v-bind="profileAttrs" class="mb-4" />
+
+    <section class="mb-3">
+      <el-table
+        ref="multipleTableRef"
+        class=""
+        :data="tableSelected"
+        stripe
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <!-- <el-table-column align="center" width="50" type="index" label="#" /> -->
+        <el-table-column label="Name" prop="name">
+          <template #default="{ row }">
+            <SSTooltipEllipsis :content="row.name" :line-clamp="1" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="isMultiplex || isUDPFormat"
+          align="center"
+          label="Program ID"
+          min-width="150"
+          prop="programId"
+        >
+          <template #header>
+            <span>Program ID</span><span v-if="!isUDPFormat" class="ml-1 text-[--el-color-danger]">*</span>
+          </template>
+          <template #default="{ row }">
+            <SSChannelTargetProfileProgram
+              :enabled="!isUDPFormat"
+              :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`"
+              :disabled="disabledChangeMode(row.id)"
+              :profiles="profileValue"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column v-if="isHlsDash || isMabr" width="250" label="Multi Keys">
+          <template #default="{ row }">
+            <el-select
+              v-model="row.multiKey"
+              class="w-full"
+              clearable
+              size="default"
+              :disabled="!isSigmaMultiDrmProviderKey || disabledChangeMode(row.id)"
+              @change="handleChangeMultikey(row.multiKey, row.id)"
+            >
+              <el-option
+                v-for="(item, idx) in TargetProfileDtoMultiKeyEnum"
+                :key="idx"
+                :value="item"
+                :label="item"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="isHlsDash || isMabr" width="150" label="Catchup">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.catchup"
+              :disabled="!targetsValue?.data?.catchup?.enable || disabledChangeMode(scope.row.id)"
+              :active-value="true"
+              :inactive-value="false"
+              active-text="Enable"
+              @change="handleChangeMode(scope.$index, 'storage')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column v-if="isHlsDash || isMabr" width="150" label="Startover">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.startOver"
+              :disabled="!targetsValue.data?.startOver?.enable || disabledChangeMode(scope.row.id)"
+              :active-value="true"
+              :inactive-value="false"
+              active-text="Enable"
+              @change="handleChangeMode(scope.$index, 'startOver')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column v-if="isHls" width="300" label="Audio Group ID">
+          <template #default="{ $index, row }">
+            <SSChannelTargetProfileAudioGroup :disabled="!splitValue && containerTypeValue !== 'fmp4'" :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="(isRTMPFormat || isUDPFormat)"
+          label="URI"
+          min-width="250"
+          prop="uri"
+        >
+          <template #header>
+            <span>URI</span><span class="ml-1 text-[--el-color-danger]">*</span>
+          </template>
+          <template #default="{ $index, row }">
+            <SSChannelTargetProfileURI
+              class="mt-8px"
+              :disabled="!(isRTMPFormat || isUDPFormat) || disabledChangeMode(row.id)"
+              :type="typeTarget"
+              :prop="`targets.${idx}.profiles.${findIndexProfile(row.id)}`"
+              @change-value="handleChangeUri($event, $index)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="!isMultiplex && !isHls && !isHlsDash"
+          label="Network Interface"
+          min-width="250"
+          prop="networkInterface"
+        >
+          <template #default="scope">
+            <SSChannelTargetNetworkInterface v-model:value="scope.row.networkInterface" :disabled="!isUDPFormat || disabledChangeMode(scope.row.id)" @change-network-interface="changeNetworkInterface($event, findIndexProfile(scope.row.id))" />
+          </template>
+        </el-table-column>
+        <el-table-column label="Video" width="515" prop="video">
+          <template #default="{ row }">
+            <div v-if="row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+              {{ $t('library_profile.no_item') }}
+            </div>
+            <div v-else>
+              <SharedMediaInfoViewer
+                v-for="(item, idx) in row?.video || []"
+                :key="idx"
+                :media="item"
+                class="w-96% justify-center"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="Audio" min-width="300" prop="audio">
+          <template #default="{ row }">
+            <div v-if="row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+              {{ $t('library_profile.no_item') }}
+            </div>
+            <div v-else class="flex gap-2px">
+              <template v-for="(item) in row.audio?.slice(0, 2) || []" :key="item.id">
+                <div v-if="row?.audio?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
+                  <div class="i-ep:headset min-w-14px text-primary" />
+                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                </div>
+                <el-popover
+                  v-else
+                  placement="bottom"
+                  trigger="hover"
+                  :width="500"
+                >
+                  <template #reference>
+                    <div class="item-list-row max-w-100px flex items-center gap-1">
+                      <div class="i-ep:headset min-w-14px text-primary" />
+                      <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                    </div>
+                  </template>
+                  <el-scrollbar>
+                    <SharedMediaInfoViewer
+                      v-for="(i, index) in row.audio || []"
+                      :key="index"
+                      class="w-96% justify-center"
+                      :media="i"
+                    />
+                  </el-scrollbar>
+                </el-popover>
+              </template>
+              <el-popover
+                v-if="row.audio?.length > 2"
+                placement="bottom"
+                trigger="hover"
+                :width="500"
+              >
+                <template #reference>
+                  <span class="item-list-row">
+                    ...
+                  </span>
+                </template>
+                <el-scrollbar height="200px">
+                  <SharedMediaInfoViewer
+                    v-for="(i, index) in row?.audio || []"
+                    :key="index"
+                    class="w-96% justify-center"
+                    :media="i"
+                  />
+                </el-scrollbar>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="Data" min-width="300" prop="data">
+          <template #default="{ row }">
+            <div v-if="row?.data?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+              {{ $t('library_profile.no_item') }}
+            </div>
+            <div v-else class="flex gap-2px">
+              <template v-for="(item) in row.data?.slice(0, 2) || []" :key="item.id">
+                <div v-if="row?.data?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
+                  <div class="i-ep:menu min-w-14px text-primary" />
+                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                </div>
+                <el-popover
+                  v-else
+                  placement="bottom"
+                  trigger="hover"
+                  :width="500"
+                >
+                  <template #reference>
+                    <div class="item-list-row max-w-100px flex items-center gap-1">
+                      <div class="i-ep:menu min-w-14px text-primary" />
+                      <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                    </div>
+                  </template>
+                  <el-scrollbar>
+                    <SharedMediaInfoViewer
+                      v-for="(i, index) in row?.data || []"
+                      :key="index"
+                      class="w-96% justify-center"
+                      :media="i"
+                    />
+                  </el-scrollbar>
+                </el-popover>
+              </template>
+              <el-popover
+                v-if="row?.data?.length > 2"
+                placement="bottom"
+                trigger="hover"
+                :width="500"
+              >
+                <template #reference>
+                  <span class="item-list-row">
+                    ...
+                  </span>
+                </template>
+                <el-scrollbar height="200px">
+                  <SharedMediaInfoViewer
+                    v-for="(i, index) in row?.data || []"
+                    :key="index"
+                    class="w-96% justify-center"
+                    :media="i"
+                  />
+                </el-scrollbar>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" label="Action" width="100" fixed="right">
+          <template #default="{ row, $index }">
+            <el-tooltip content="Delete">
+              <el-button type="danger" @click="destroySelectedProfile(row.id, $index)">
+                <template #icon>
+                  <div class="i-ep:delete" />
+                </template>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column> -->
+      </el-table>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+
+.el-table-column--selection {
+  display: none !important;
+}
+</style>