@sigmaott/base-next 1.0.6

package/src/components/Channel/TargetDrm.vue

@@ -0,0 +1,518 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus'
+import { get, set, unset } from 'lodash-unified'
+import isUUID from 'validator/es/lib/isUUID'
+import { v4 as uuidv4 } from 'uuid'
+import { QueryKeys } from '@/enums'
+
+const { prop, format } = definePropsRefs<{
+  prop: string
+  format?: string
+}>()
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const isPlayout = ref(inject('isPlayout'))
+const drmDtoFilterEnum = [
+  'static',
+  'sigma-drm-v1',
+  'sigma-drm',
+  'sigma-multi-drm',
+  'drmtoday',
+  'cpix',
+]
+const rules = reactive<FormRules>({
+  enable: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  keyProvider: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  drmManagementId: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.requrieDrm'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  assetId: [
+    {
+      required: true,
+      message: t('SSConfig.assetId'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  key: [],
+  keyId: [],
+  keyUri: [],
+  keyRotationTime: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+})
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'DrmDto')
+
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+const [multiKeyValue, multiKeyAttrs] = useElField<boolean>(getProp('multiKey'), [], { enabled: enableValue })
+const [keyProviderValue, keyProviderAttrs] = useElField<string>(getProp('keyProvider'), rules.keyProviderValue, { enabled: enableValue })
+const [drmManagementIdValue, drmManagementIdAttrs] = useElField<string>(getProp('drmManagementId'), rules.drmManagementId, { enabled: enableValue })
+const [assetIdValue, assetIdAttrs] = useElField<string>(getProp('assetId'), rules.assetId, { enabled: enableValue })
+const [keyValue, keyAttrs] = useElField<string>(getProp('key'), [
+  {
+    required: true,
+    trigger: ['blur'],
+    validator: (rule, value, callback) => {
+      if (!value || value?.length === 0)
+        callback(new Error(t('SSConfig.form.validate.requiredKey')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyIdValue, keyIdAttrs] = useElField<string>(getProp('keyId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredKeyId')))
+      else if (!isUUID(value, 4))
+        callback(new Error(t('SSConfig.form.validate.formatUUID', { field: 'KeyId' })))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyUriValue, keyUriAttrs] = useElField<string>(getProp('keyUri'), [
+  {
+    required: true,
+    trigger: ['blur'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredKeyUri')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyRotationTimeValue, keyRotationTimeAttrs] = useElField<number>(getProp('keyRotationTime'), [], { enabled: enableValue })
+const [filterValue, filterAttrs] = useElField<string>(getProp('filter'), [], { enabled: enableValue })
+const [endpointValue, endpointAttrs] = useElField<string>(getProp('endpoint'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredEndpoint')))
+      else if (!isProtocolURLValid(value, 'http(s)'))
+        callback(new Error($t('SSConfig.form.validate.requiredUriKeyIdTranscode')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [contentIdValue, contentIdAttrs] = useElField<string>(getProp('contentId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredContentId')))
+      else if (!/^[\w-]*$/.test(value))
+        callback(new Error(t('SSConfig.form.validate.formatContentId')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [drmSystemValue, drmSystemIdAttrs] = useElField<string[]>(getProp('systems'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value.length)
+        callback(new Error(t('SSConfig.form.validate.requiredDrmSystem')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [headersValue, headersAttrs, { remove, add }] = useElFieldArray<Array<{ key: string, value: string }>>(getProp('headers'), [], { enabled: enableValue })
+const [environmentValue, environmentAttrs] = useElField<string>(getProp('environment'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredEnvironment')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+
+watch(() => keyProviderValue.value, () => {
+  if (keyProviderValue.value === 'cpix') {
+    drmSystemValue.value = ['widevine', 'playready', 'fairplay']
+    if (!headersValue.value?.length)
+      add()
+  }
+})
+
+function handleDeleteHeader(id: any) {
+  remove(id)
+}
+
+const isStaticKeyProvider = computed(() => {
+  return keyProviderValue.value === 'static'
+})
+const isSigmaDrmMultlProvider = computed(() => {
+  return keyProviderValue.value === 'sigma-multi-drm'
+})
+const isDrmToday = computed(() => {
+  return keyProviderValue.value === 'drmtoday'
+})
+const isSigmaDrm = computed(() => {
+  return keyProviderValue.value === 'sigma-drm'
+})
+const isDrmCpix = computed(() => {
+  return keyProviderValue.value === 'cpix'
+})
+const optionKeyProviders = computed(() => {
+  return format.value === 'udp'
+    ? ['sigma-drm']
+    : ['static', 'sigma-drm-v1', 'sigma-drm', 'sigma-multi-drm', 'drmtoday', 'cpix']
+})
+const params = reactive({
+  page: 1,
+  perPage: 10,
+  q: '',
+  sort: '',
+})
+const qFilter = useQueryParams(toRef(params, 'q'), {
+  $and: [{}, { provider: keyProviderValue.value === 'drmtoday' ? 'DRM_TODAY' : 'SIGMA' }],
+})
+
+const keyPlayout = computed(() => {
+  return isPlayout.value ? 'playout' : 'transcode'
+})
+
+const { data: drmOptions, refetch, isFetching } = useQuery({
+  queryKey: [`/api/${keyPlayout.value}/drm-credentials`, params, qFilter],
+  queryFn: () => isPlayout.value
+    ? $playoutApi('/api/playout/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } })
+    : $transcodeApi('/api/transcode/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } }),
+  enabled: computed(() => !!qFilter.value.$and[1].provider),
+  refetchOnWindowFocus: false,
+  onSuccess: (data) => {
+    if (drmManagementIdValue.value && !data?.data?.find(item => item.id === drmManagementIdValue.value))
+      drmManagementIdValue.value = ''
+  },
+})
+
+const { formErrors } = useElFormContext()
+
+watch(() => isDrmToday.value, (val) => {
+  qFilter.value.$and[1].provider = val ? 'DRM_TODAY' : 'SIGMA'
+  if (drmManagementIdValue.value)
+    drmManagementIdValue.value = ''
+})
+const { microProps } = useMicroProps()
+function addDRM() {
+  microProps.value.openMicroApp('product/transcode', 'transcode', `/templates/drm?mode=create&type=${qFilter.value.$and[1].provider}`)
+}
+
+watch(keyProviderValue, () => {
+  set(formErrors.value, prop.value, {})
+})
+
+function remoteMethod(query: string) {
+  const newQ = klona({ ...qFilter.value })
+  if (query)
+    newQ.$and[0].name = { $regex: query, $options: 'i' }
+
+  else
+    newQ.$and[0].name = undefined
+
+  qFilter.value = newQ
+}
+function genUuidAuto() {
+  keyIdValue.value = uuidv4()
+}
+</script>
+
+<template>
+  <div>
+    <el-row :gutter="5">
+      <el-col :span="12">
+        <el-form-item :label="t('SSConfig.form.label.enable')" v-bind="enableAttrs" :required="enableValue">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.enable')" :info="schemaObj.enable" />
+          </template>
+          <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="Key provider" v-bind="keyProviderAttrs">
+          <template #label>
+            <SSInformationLabel label="Key provider" :info="schemaObj.keyProvider" />
+          </template>
+          <el-select v-model="keyProviderValue" default-first-option :disabled="!enableValue">
+            <el-option v-for="(item, idx) in optionKeyProviders" :key="idx" :value="item" :label="item" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="isStaticKeyProvider" :gutter="5">
+      <el-col :span="8">
+        <el-form-item :label="t('SSConfig.form.label.key')" v-bind="keyAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.key')" :info="schemaObj.key" />
+          </template>
+          <el-input
+            v-model="keyValue" :placeholder="t('SSConfig.form.label.key')" maxlength="1000" show-word-limit
+            :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
+          <template #label>
+            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
+          </template>
+          <div class="w-full flex gap-1">
+            <el-input
+              v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
+              :disabled="!enableValue"
+            />
+            <el-button @click="genUuidAuto">
+              <template #icon>
+                <div class="i-carbon:arrows-horizontal" />
+              </template>
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item :label="`${t('SSConfig.form.label.key')} URI`" v-bind="keyUriAttrs">
+          <template #label>
+            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} URI`" :info="schemaObj.keyUri" />
+          </template>
+          <el-input
+            v-model="keyUriValue" :placeholder="`${t('SSConfig.form.label.key')} URI`" maxlength="2048"
+            show-word-limit :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="!isStaticKeyProvider && !isDrmCpix" :gutter="5">
+      <el-col :span="(isSigmaDrm || isDrmToday) ? 6 : 12">
+        <el-form-item label="Asset ID" v-bind="assetIdAttrs">
+          <template #label>
+            <SSInformationLabel label="Asset ID" :info="schemaObj.assetId" />
+          </template>
+          <el-input
+            v-model="assetIdValue" placeholder="Asset ID" :minlength="1" maxlength="100" show-word-limit
+            :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-if="isSigmaDrm || isDrmToday || isSigmaDrmMultlProvider" :span="isSigmaDrmMultlProvider ? 12 : 6">
+        <el-form-item label="Environment" v-bind="environmentAttrs">
+          <template #label>
+            <SSInformationLabel label="Environment" :info="schemaObj.environment" />
+          </template>
+          <el-select v-model="environmentValue" class="w-full" default-first-option :disabled="!enableValue">
+            <el-option
+              v-for="(item, idx) in ['test', 'staging', 'production']" :key="idx" :value="item"
+              :label="uppercaseFirst(item)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col v-if="!isDrmCpix" :span="12">
+        <el-form-item :label="t('SSconfig.drm.title')" v-bind="drmManagementIdAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSconfig.drm.title')" :info="schemaObj.drmManagementId" />
+          </template>
+          <div class="w-full flex gap-1">
+            <el-select
+              v-model="drmManagementIdValue" :placeholder="t('SSConfig.placeholder.selectDrm')"
+              class="w-full" :disabled="!enableValue" filterable remote reserve-keyword remote-show-suffix
+              :remote-method="remoteMethod" :loading="isFetching" :clearable="true"
+              popper-class="[&_.el-select-group\_\_title]:(font-bold text-base text-truncate)"
+            >
+              <el-option-group v-for="group in drmOptions?.data || []" :key="group.name" :label="group.name">
+                <el-option :key="group.id" :value="group.id" :label="group.name" class="h-auto">
+                  <div>
+                    <div class="leading-normal">
+                      MerchantID: {{ group?.data?.merchantId }}
+                    </div>
+                    <div v-if="!isDrmToday" class="leading-normal">
+                      AppID: {{ group?.data?.appId }}
+                    </div>
+                    <div v-if="!isDrmToday" class="leading-normal">
+                      Email: {{ group?.data?.email }}
+                    </div>
+                    <div v-if="isDrmToday" class="leading-normal">
+                      {{ t('SSConfig.label.username') }}: {{ group?.data?.username }}
+                    </div>
+                  </div>
+                </el-option>
+              </el-option-group>
+              <template #empty>
+                <div class="m-2 flex items-center justify-between gap-2">
+                  <div class="text-sm">
+                    {{ t('SSConfig.message.noData') }}
+                  </div>
+                  <el-button @click="addDRM()">
+                    <template #icon>
+                      <div class="i-ep:plus" />
+                    </template>
+                    {{ t('Actions.add') }}
+                  </el-button>
+                </div>
+              </template>
+            </el-select>
+
+            <el-button @click="refetch()">
+              <div class="i-carbon:renew" :class="{ 'animate-spin': isFetching }" />
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col v-if="isSigmaDrmMultlProvider && !isDrmToday" :span="12">
+        <el-form-item label="Filter" v-bind="filterAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.filter')" :info="schemaObj.filter" />
+          </template>
+          <el-select
+            v-model="filterValue" class="w-full" default-first-option clearable multiple
+            :disabled="!enableValue"
+          >
+            <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <!-- <el-col v-if="isSigmaDrmMultlProvider || isDrmToday" :span="12">
+        <el-form-item
+          label="Key Rotation Time"
+          v-bind="keyRotationTimeAttrs"
+          class="w-full"
+        >
+          <template #label>
+            <SSInformationLabel label="Key Rotation Time" :info="schemaObj.keyRotationTime" />
+          </template>
+          <el-input-number
+            v-model="keyRotationTimeValue"
+            placeholder="Key Rotation Time"
+            :min="1"
+            :max="43200"
+            :step="0.1"
+            :precision="1"
+            class="w-full"
+          />
+        </el-form-item>
+      </el-col> -->
+    </el-row>
+    <el-row v-if="isDrmCpix" :gutter="5">
+      <el-col :span="24">
+        <el-form-item :label="t('SSConfig.form.label.endpoint')" v-bind="endpointAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.endpoint')" :info="schemaObj.endpoint" />
+          </template>
+          <el-input
+            v-model="endpointValue" :placeholder="t('SSConfig.form.label.placeholder_endpoint')" maxlength="2048"
+            show-word-limit :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <div class="flex gap-8">
+          <div class="flex-1">
+            <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
+              </template>
+              <div class="w-full flex gap-1">
+                <el-input
+                  v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
+                  :disabled="!enableValue"
+                />
+                <el-button @click="genUuidAuto">
+                  <template #icon>
+                    <div class="i-carbon:arrows-horizontal" />
+                  </template>
+                </el-button>
+              </div>
+            </el-form-item>
+            <el-form-item :label="`${t('SSConfig.form.label.content')} ID`" v-bind="contentIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="`${t('SSConfig.form.label.content')} ID`" :info="schemaObj.contentId" />
+              </template>
+              <el-input
+                v-model="contentIdValue" :placeholder="`${t('SSConfig.form.label.content')} ID`" :maxlength="64"
+                show-word-limit :disabled="!enableValue"
+              />
+            </el-form-item>
+            <el-form-item :label="t('SSConfig.form.label.DrmSystem')" v-bind="drmSystemIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="t('SSConfig.form.label.DrmSystem')" :info="schemaObj.systems" />
+              </template>
+              <el-select
+                v-model="drmSystemValue" class="w-full" default-first-option clearable multiple
+                :disabled="!enableValue" :placeholder="t('SSConfig.form.label.DrmSystem')"
+              >
+                <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="flex-1">
+            <el-form-item :label="t('SSConfig.form.label.Header')" v-bind="headersAttrs">
+              <template #label>
+                <SSInformationLabel :label="t('SSConfig.form.label.Header')" :info="schemaObj.headers" />
+                <el-button v-if="headersValue?.length < 10" class="ml-4" type="primary" size="small" @click="add">
+                  {{ t('Actions.add') }}
+                </el-button>
+              </template>
+              <div class="w-full">
+                <div v-if="headersValue?.length > 0" class="flex gap-8">
+                  <div class="w-40%">
+                    Key <span class="text-error">*</span>
+                  </div>
+                  <div class="w-60%">
+                    Value <span class="text-error">*</span>
+                  </div>
+                </div>
+                <div v-for="(item, idx) in (headersValue || [])" :key="item?._id" class="flex gap-8 pb-2">
+                  <SSChannelHeaderItem
+                    v-model:disabled="enableValue" :prop="prop" :index="idx"
+                    @delete="handleDeleteHeader(item?._id)"
+                  />
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>

package/src/components/Channel/TargetForm.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { ProfileDto } from '~/api-client'
+
+const emit = defineEmits<{
+  removeTarget: [idx: number]
+}>()
+const { idx } = defineModels<{
+  idx: number
+}>()
+
+function getProp(target?: string) {
+  return () => target ? `targets[${idx.value}].${target}` : `targets[${idx.value}]`
+}
+
+const [form] = useElField<ProfileDto>(getProp())
+
+const activeNames = ref(['data', 'output', 'manifest', 'drm', 'low-latency', 'catchup', 'startOver', 'profile', 'mabr', 'srt'])
+const isHlsAndDash = computed(() => {
+  return ['hls', 'dash', 'hls-dash'].includes(form.value?.data.format)
+})
+const isMabr = computed(() => {
+  return ['mabr'].includes(form.value?.data.format)
+})
+const isMultiplex = computed(() => {
+  return form.value?.data.format === 'multiplex'
+})
+const isSrt = computed(() => {
+  return form.value?.data.format === 'srt'
+})
+const isUdp = computed(() => {
+  return form.value?.data.format === 'udp'
+})
+
+const { t } = useI18n()
+
+async function handleRemove() {
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_delete_this_target'),
+    'Warning',
+    {
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('removeTarget', idx.value)
+    })
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 flex justify-between">
+      <el-text class="">
+        <span class="text-16px font-bold">
+          {{ `${idx + 1}_${form?.data.format}` }}
+        </span>
+      </el-text>
+
+      <div class="flex items-center gap-4">
+        <el-switch
+          v-model="form.enable"
+          width="80"
+          style="--el-switch-off-color: #E6A23C"
+          inline-prompt
+          active-text="Enable"
+          inactive-text="Disable"
+        />
+        <el-button type="danger" title="Delete" @click="handleRemove">
+          <template #icon>
+            <div class="i-ep:delete" />
+          </template>
+        </el-button>
+      </div>
+    </div>
+    <el-collapse
+      v-model="activeNames"
+      class="[&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
+    >
+      <el-collapse-item title="Data" name="data">
+        <SSChannelTargetDataInfo :prop="getProp('data')()" />
+      </el-collapse-item>
+      <el-collapse-item v-if="isUdp" title="DVB output option" name="output">
+        <SSChannelTargetOutputUdp :prop="getProp('data')()" />
+      </el-collapse-item>
+      <el-collapse-item v-if="isMultiplex" title="Output" name="output">
+        <SSChannelTargetOutputMultiplex :prop="getProp('data')()" />
+      </el-collapse-item>
+      <el-collapse-item v-else title="Manifest" name="manifest">
+        <SSChannelTargetManifest :prop="getProp('data')()" />
+      </el-collapse-item>
+      <el-collapse-item v-if="isSrt" title="SRT Output" name="srt">
+        <template #title>
+          <el-text truncate class="text-16px font-600">
+            SRT Output
+            <el-text truncate class="text-helper">
+              &nbsp;({{ $t('SSConfig.the_number_of_outputs_that_can_be_generated_ranges_from_1_to_10') }})
+            </el-text>
+          </el-text>
+        </template>
+        <SSChannelTargetSrtOutput :prop="getProp('data.srtOutput')()" :idx="idx" />
+      </el-collapse-item>
+      <el-collapse-item v-if="isUdp || isMultiplex" title="DRM" name="drm">
+        <SSChannelTargetDrm :prop="getProp('data.drm')()" format="udp" />
+      </el-collapse-item>
+
+      <template v-if="isHlsAndDash || isMabr">
+        <el-collapse-item title="DRM" name="drm">
+          <SSChannelTargetDrm :prop="getProp('data.drm')()" />
+        </el-collapse-item>
+        <el-collapse-item title="Low Latency" name="low-latency">
+          <SSChannelTargetLowLatency :prop="getProp('data')()" />
+        </el-collapse-item>
+        <el-collapse-item title="Catchup & Trickplay" name="catchup">
+          <SSChannelTargetCatchup :idx="idx" :prop="getProp('data.catchup')()" />
+        </el-collapse-item>
+        <el-collapse-item title="Startover" name="startOver">
+          <SSChannelTargetStartover :idx="idx" :prop="getProp('data.startOver')()" />
+        </el-collapse-item>
+        <el-collapse-item v-if="isMabr" title="Mabr Output" name="mabr">
+          <template #title>
+            <el-text truncate class="text-16px font-600">
+              Mabr Output
+              <el-text truncate class="text-helper">
+                &nbsp;({{ $t('SSConfig.the_number_of_outputs_that_can_be_generated_ranges_from_1_to_10') }})
+              </el-text>
+            </el-text>
+          </template>
+          <SSChannelTargetMabrOutput :idx="idx" :prop="getProp('data.mabr')()" />
+        </el-collapse-item>
+      </template>
+      <el-collapse-item v-if="!isSrt" title="Profile" name="profile">
+        <SSChannelTargetPreset :idx="idx" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>