@sigmaott/base-next 1.0.6

package/src/components/Channel/TargetPreset.vue

@@ -0,0 +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>

package/src/components/Channel/TargetProfileAudioGroup.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const emit = defineEmits(['changeValue'])
+
+const { prop, disabled } = definePropsRefs<{
+  prop: string
+  disabled?: boolean
+}>()
+
+function getProp(target: string) {
+  return () => `${prop.value}.${target}`
+}
+
+const { t: $t } = useI18n()
+
+const [audioGroupValue, audioGroupAttrs] = useElField<string>(getProp('audioGroup'), [
+  {
+    validator: tagValidator(35),
+    trigger: ['blur', 'change'],
+  },
+])
+</script>
+
+<template>
+  <el-form-item v-bind="audioGroupAttrs">
+    <SSInputTags v-model="audioGroupValue" :disabled="disabled" :max-item="10" />
+  </el-form-item>
+</template>

package/src/components/Channel/TargetProfileProgram.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { isNil } from 'remeda'
+
+const { prop, profiles, disabled, enabled } = definePropsRefs<{
+  prop: string
+  profiles: any[]
+  disabled: boolean
+  enabled: boolean
+}>()
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [programIdValue, programIdAttrs] = useElField<number>(getProp('programId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (disabled.value) {
+        callback()
+        return
+      }
+
+      if (!value && enabled.value)
+        callback(new Error($t('SSConfig.form.validate.require')))
+      else if (isNil(value) && enabled.value)
+        callback(new Error(t('SSConfig.form.validate.requireProfile')))
+      else if (profiles.value?.filter(item => item.programId === value)?.length > 1 && value)
+        callback(new Error(t('SSConfig.message.the_program_id_already_exists')))
+      else
+        callback()
+    },
+  },
+])
+</script>
+
+<template>
+  <el-form-item v-bind="programIdAttrs">
+    <el-input-number v-model="programIdValue" :disabled="disabled" :min="32" :max="9000" :step="1" step-strictly />
+  </el-form-item>
+</template>

package/src/components/Channel/TargetProfileURI.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import isURL from 'validator/es/lib/isURL'
+
+const emit = defineEmits(['changeValue'])
+
+const { prop, type, disabled } = definePropsRefs<{
+  prop: string
+  type: string
+  disabled?: boolean
+}>()
+
+function getProp(target: string) {
+  return () => `${prop.value}.${target}`
+}
+const protocolsUri = computed(() => {
+  switch (type.value) {
+    case 'rtmp':
+      return {
+        protocol: 'rtmp(s)',
+        defaults: ['rtmp', 'rtmps'],
+      }
+
+    case 'udp':
+      return {
+        protocol: 'udp',
+        defaults: ['udp'],
+      }
+
+    default:
+      return {
+        protocol: '',
+        defaults: undefined,
+      }
+  }
+})
+
+const { t: $t } = useI18n()
+
+const [uriValue, uriAttrs] = useElField<string>(getProp('uri'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (disabled.value) {
+        callback()
+        return
+      }
+      if (!value)
+        callback(new Error($t('Input.form.validate.primary')))
+      else if (!isProtocolURLValid(value, protocolsUri.value.protocol))
+      // else if (!isURL(value, { protocols: protocolsUri.value.protocol, require_protocol: true }))
+        callback(new Error($t('transcode.invalid_url')))
+      else
+        callback()
+    },
+  },
+], { enable: computed(() => !disabled.value) })
+
+function changeUri(newUri: string) {
+  emit('changeValue', newUri)
+}
+</script>
+
+<template>
+  <el-form-item v-bind="uriAttrs">
+    <el-input v-model="uriValue" :disabled="disabled" :placeholder="`${$t('EventChannel.placeholder.enter')} URI (protocols: ${type}://)`" size="default" @change="changeUri" />
+  </el-form-item>
+</template>