@sigmaott/base-next 1.0.6

package/src/components/Channel/ProfileDetailsList.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { components } from '#nuxt-api-party/transcodeApi'
+
+const { profiles } = defineProps<{
+  profiles: components['schemas']['ProfileDto'][]
+}>()
+
+const { t } = useI18n()
+
+function handleAddProfile(action: string) {
+  emit('addProfile', action)
+}
+
+function filterMediaByType(profile: any, type: 'audio' | 'video' | 'data') {
+  return profile?.presets?.filter((item: any) => item.type === type) ?? []
+}
+</script>
+
+<template>
+  <el-table stripe resizable border :data="profiles" class="">
+    <el-table-column align="center" width="50" label="#">
+      <template #default="scope">
+        <span>{{ scope.$index + 1 }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="Name" prop="name" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+      <template #default="scope">
+        {{ scope.row.name }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Name Modifier" prop="nameModifier" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+      <template #default="scope">
+        {{ scope.row.nameModifier }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Video" prop="video" min-width="500">
+      <template #default="scope">
+        <div v-if="scope.row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else>
+          <SharedMediaInfoViewer v-for="(item, idx) in filterMediaByType(scope.row, 'video')" :key="idx" :media="item" class="w-full justify-center" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="Audio" prop="audio" min-width="300">
+      <template #default="scope">
+        <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else class="flex gap-2px">
+          <template v-for="(item) in filterMediaByType(scope.row, 'audio')?.slice(0, 2) || []" :key="item.id">
+            <div v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </template>
+          <el-popover
+            v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="Data" prop="data" min-width="300">
+      <template #default="scope">
+        <div v-if="filterMediaByType(scope.row, 'data')?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else class="flex gap-2px">
+          <template v-for="(item) in filterMediaByType(scope.row, 'data')?.slice(0, 2) || []" :key="item.id">
+            <div v-if="scope.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, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </template>
+          <el-popover
+            v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+</style>

package/src/components/Channel/ProfileForm.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { ProfileDto } from '~/api-client'
+
+const emit = defineEmits<{
+  removeProfile: []
+  syncInput: []
+}>()
+
+const { idx } = definePropsRefs<{
+  idx?: number
+}>()
+
+const isPlayout = ref(inject('isPlayout'))
+const [profile] = useElField<ProfileDto>(() => `profiles.${idx.value}`)
+
+const activeNames = ref(['modifier', 'info', 'watermark'])
+
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ProfileDto')
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => `profiles[${idx.value}].${key}`
+}
+
+const [nameModifierValue, nameModifierAttrs] = useElField<string>(getProp('nameModifier'), [
+  { required: true, message: t('channel.name_modifier_is_required'), trigger: ['blur', 'change'] },
+  {
+    trigger: ['blur', 'change'],
+    validator: nameValidatorLow(t('channel.name_modifier')),
+  },
+])
+
+async function handleRemove() {
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_delete_this_profile'),
+    'Warning',
+    {
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('removeProfile')
+    })
+}
+
+const activeMedia = ref()
+
+watchImmediate(profile, () => {
+  if (profile.value)
+    activeMedia.value = 'media-0'
+})
+
+function handleChangeNameModifier(name: string) {
+  nameModifierValue.value = name
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 flex justify-between">
+      <el-text class="">
+        <span class="text-base font-bold">
+          {{ profile.name }}
+        </span>
+      </el-text>
+
+      <el-button type="danger" title="Delete" @click="handleRemove">
+        <template #icon>
+          <div class="i-ep:delete" />
+        </template>
+      </el-button>
+    </div>
+    <el-collapse
+      v-model="activeNames"
+      class="[&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
+    >
+      <el-collapse-item name="modifier">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-lg font-semibold">
+            <el-icon class="">
+              <div class="i-ep:menu" />
+            </el-icon>
+            {{ 'Modifier and Information' }}
+          </label>
+        </template>
+        <SSChannelProfileConfigItem
+          v-model:active-media="activeMedia"
+          :is-media-live="true"
+          :prop="`profiles[${idx}]`"
+          :is-package="false"
+          :is-config-encoder="true"
+          :idx="idx"
+          :video-codecs="VIDEO_CODECS"
+          scte35
+          @change-name-modifier="handleChangeNameModifier"
+        >
+          <template #information>
+            <el-form-item class="h-80px" label="Name modifier" v-bind="nameModifierAttrs">
+              <template #label>
+                <SSInformationLabel label="Name modifier" :info="schemaObj.nameModifier" />
+              </template>
+              <el-input
+                v-model="nameModifierValue"
+                :placeholder="$t('channel.replaced_name')"
+                :minlength="1"
+                :maxlength="50"
+                show-word-limit
+              />
+            </el-form-item>
+          </template>
+          <template #mediaselection="{ exclusion, mediaType, selectItem }">
+            <ExistingPreset :media-type="mediaType" :exclusion="exclusion" @select-item="selectItem" />
+          </template>
+
+          <template #preset="{ prop, mediaType }">
+            <SSChannelPresetConfigItemPId :prop="prop" :media-type="mediaType" :idx="idx" />
+          </template>
+        </SSChannelProfileConfigItem>
+      </el-collapse-item>
+      <!-- v-if="!isPackage" -->
+      <el-collapse-item name="watermark">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-lg font-semibold">
+            <el-icon class="">
+              <div class="i-ep:menu" />
+            </el-icon>
+            {{ $t('channel_profile.watermark') }}
+          </label>
+        </template>
+        <SSChannelConfigWatermarkItem :prop="getProp('watermark')()" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>

package/src/components/Channel/ProfileList.vue

@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  addProfile: any
+  deleteProfile: any
+}>()
+
+const { isTranscode } = defineModels<{
+  isTranscode: boolean
+}>()
+
+function destroy(idx: number) {
+  emit('deleteProfile', idx)
+}
+
+const { t } = useI18n()
+const [profilesValue, profilesAttrs] = useElFieldArray<any[]>('profiles', [{
+  validator: (rule, value, callback) => {
+    if (value.length === 0)
+      callback(new Error(t('EventChannel.form.validate.requireProfile')))
+    else
+      callback()
+  },
+}])
+
+const { formRef } = useElFormContext()
+watch(() => profilesValue.value.length, () => {
+  nextTick(() => {
+    formRef.value.validateField('profiles')
+  })
+}, { flush: 'post' })
+
+function handleAddProfile(action: string) {
+  emit('addProfile', action)
+}
+
+function filterMediaByType(profile: any, type: 'audio' | 'video' | 'data') {
+  return profile?.presets?.filter((item: any) => item.type === type) ?? []
+}
+</script>
+
+<template>
+  <div>
+    <el-text class="">
+      <span class="mb-2 text-16px font-bold">
+        {{ $t('EventChannel.label.profile') }}
+      </span>
+    </el-text>
+    <div>
+      <el-form-item v-bind="profilesAttrs" />
+    </div>
+    <div>
+      <div v-if="!profilesValue.length">
+        <el-empty>
+          <el-dropdown v-if="isTranscode" placement="bottom-start" trigger="click">
+            <el-button type="primary">
+              {{ $t('channel.profile') }}
+            </el-button>
+
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="handleAddProfile('add')">
+                  {{ t('new_profile') }}
+                </el-dropdown-item>
+                <el-dropdown-item @click="handleAddProfile('select')">
+                  {{ t('transcode.template') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <!-- <el-button v-if="!isTranscode" type="primary" @click="handleAddProfile('select')">
+            {{ $t('channel.profile') }}
+          </el-button> -->
+        </el-empty>
+      </div>
+    </div>
+    <el-table v-if="profilesValue.length" stripe resizable border :data="profilesValue" class="">
+      <el-table-column align="center" width="50" label="#">
+        <template #default="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Name" prop="name" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+        <template #default="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Name Modifier" prop="nameModifier" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+        <template #default="scope">
+          {{ scope.row.nameModifier }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Video" prop="video" min-width="500">
+        <template #default="scope">
+          <div v-if="scope.row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+            No Item
+          </div>
+          <div v-else>
+            <SharedMediaInfoViewer v-for="(item, idx) in filterMediaByType(scope.row, 'video')" :key="idx" :media="item" class="w-full justify-center" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="Audio" prop="audio" min-width="300">
+        <template #default="scope">
+          <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+            No Item
+          </div>
+          <div v-else class="flex gap-2px">
+            <template v-for="(item) in filterMediaByType(scope.row, 'audio')?.slice(0, 2) || []" :key="item.id">
+              <div v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                    :media="i"
+                  />
+                </el-scrollbar>
+              </el-popover>
+            </template>
+            <el-popover
+              v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="Data" prop="data" min-width="300">
+        <template #default="scope">
+          <div v-if="filterMediaByType(scope.row, 'data')?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+            No Item
+          </div>
+          <div v-else class="flex gap-2px">
+            <template v-for="(item) in filterMediaByType(scope.row, 'data')?.slice(0, 2) || []" :key="item.id">
+              <div v-if="scope.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, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                    :media="i"
+                  />
+                </el-scrollbar>
+              </el-popover>
+            </template>
+            <el-popover
+              v-if="filterMediaByType(scope.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, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="Action" align="center" width="100">
+        <template #default="scope">
+          <el-tooltip content="Delete">
+            <el-button size="default" type="danger" @click="destroy(scope.$index)">
+              <template #icon>
+                <div class="i-ep:delete" />
+              </template>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+</style>

package/src/components/Channel/SelectServer.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { klona } from 'klona'
+
+const { prop, disabled, title } = definePropsRefs<{
+  prop: string
+  disabled?: boolean
+  title?: string
+}>()
+
+const { t } = useI18n()
+function getProp(path: string) {
+  return () => prop.value ? `${prop.value}.${path}` : path
+}
+const [channelModeValue, channelModeAttrs] = useElField<string>(getProp('channelMode'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.validate.required')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+// const [setupTypeValue, setupTypeAttrs] = useElField<string | undefined>(getProp('setupType'), [
+//   {
+//     validator: (rule, value, callback) => {
+//       if (!value && channelModeValue.value !== 'active-standby')
+//         callback(new Error(t('SSConfig.validate.required')))
+//       else
+//         callback()
+//     },
+//     trigger: ['blur', 'change'],
+//     required: true,
+//   },
+// ])
+const [machineConfig] = useElField<string | undefined>(getProp('machineConfig'), [])
+
+const isPlayout = ref(inject('isPlayout'))
+const channelModeOptions = computed(() => {
+  return isPlayout.value
+    ? [
+        {
+          label: 'Active-Standby',
+          value: 'active-standby',
+        },
+      ]
+    : [
+        {
+          label: 'Active-Active',
+          value: 'active-active',
+        },
+        {
+          label: 'Active-Standby',
+          value: 'active-standby',
+        },
+      ]
+})
+
+const modeOptions = [
+  {
+    label: 'MANUAL',
+    value: 'MANUAL',
+  },
+  {
+    label: 'AUTO',
+    value: 'AUTO',
+  },
+]
+// const channelSetupTypeOptions = [
+//   {
+//     label: 'Clustered Pair',
+//     value: 'clusteredPair',
+//   },
+//   {
+//     label: 'Dual-Source Integration',
+//     value: 'dualSourceIntegration',
+//   },
+// ]
+
+function handleChangeChannelMode(_value: string) {
+  if (_value === 'active-active') {
+    machineConfig.value.mode = 'AUTO'
+    machineConfig.value.machineType = 'SIGMA_MACHINE_CLUSTER'
+    machineConfig.value.machineId = ''
+  }
+  else {
+    machineConfig.value.machineId = ''
+    machineConfig.value.machineType = 'SIGMA_MACHINE'
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="grid grid-cols-3 gap-2">
+      <el-form-item class="flex-1" v-bind="channelModeAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('SSConfig.label.channel_mode')" :information="schemaItem?.properties?.channelMode?.description" />
+        </template>
+        <el-select
+          v-model="channelModeValue"
+          :placeholder="t('SSConfig.placeholder.select')"
+          class="w-full"
+          :disabled
+          @change="handleChangeChannelMode"
+        >
+          <el-option
+            v-for="item in channelModeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- <div class="flex-1" /> -->
+      <!-- <el-form-item :required="channelModeValue === 'active-active'" class="flex-1" v-bind="setupTypeAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('SSConfig.label.setup_type')" :information="schemaItem?.properties?.setupType?.description" />
+        </template>
+        <el-select
+          v-model="setupTypeValue"
+          :placeholder="t('SSConfig.placeholder.select')"
+          :disabled="channelModeValue === 'active-standby'"
+          class="w-full"
+        >
+          <el-option v-for="item in channelSetupTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item> -->
+      <SSServerConfig :prop="getProp('machineConfig')()" :disabled />
+    </div>
+  </div>
+</template>