@sigmaott/base-next 1.0.6

package/src/components/Channel/TargetList.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  addTarget: []
+  removeTarget: [string]
+}>()
+const { t } = useI18n()
+const [targetsValue, targetsAttrs] = useElFieldArray<any[]>('targets', [{
+  validator: (rule, value, callback) => {
+    if (value.length === 0)
+      callback(new Error(t('channel.please_select_target')))
+    else
+      callback()
+  },
+}])
+const { formRef } = useElFormContext()
+
+watch(() => targetsValue.value?.length, () => {
+  nextTick(() => {
+    formRef.value.validateField('targets')
+  })
+}, { flush: 'post' })
+
+async function handleRemove(idx: string) {
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_delete_this_target'),
+    'Warning',
+    {
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('removeTarget', idx)
+    })
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <el-text class="">
+      <span class="mb-2 text-16px font-bold">
+        {{ $t('Channel.label.targets') }}
+      </span>
+    </el-text>
+    <div>
+      <el-form-item v-bind="targetsAttrs" />
+    </div>
+    <div>
+      <div v-if="!targetsValue?.length">
+        <el-empty>
+          <el-button type="primary" @click="emit('addTarget')">
+            {{ $t('channel.add_target') }}
+          </el-button>
+        </el-empty>
+      </div>
+      <div v-else class="w-full">
+        <el-table v-if="targetsValue?.length" class="w-full" stripe show-overflow-tooltip border :data="targetsValue">
+          <el-table-column type="index" min-width="50" label="#" />
+          <el-table-column label="Name" prop="name" min-width="140">
+            <template #default="scope">
+              {{ scope.row.data.name }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Name modifier" min-width="140" prop="nameModifier">
+            <template #default="scope">
+              {{ scope.row.data.nameModifier }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Format" prop="format" width="80">
+            <template #default="scope">
+              {{ scope.row.data.format }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Status" prop="enable" width="80">
+            <template #default="scope">
+              {{ scope.row?.enable ? 'Enable' : 'Disable' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Manifest" prop="manifest" min-width="350">
+            <template #default="{ row }">
+              <div class="border-item">
+                <ul class="inline-flex flex-wrap" style="vertical-align: bottom">
+                  <li v-if="row.data.format !== 'dash' && row.data.format !== 'mabr'" title="Container type">
+                    <el-icon><div class="i-ep:takeaway-box text-indigo-500" /></el-icon>&nbsp;<span>{{
+                      (row?.data?.manifest?.containerType) || '-'
+                    }}</span>
+                  </li>
+                  <span v-if="row.data.format !== 'dash' && row.data.format !== 'mabr'" class="text-gray-400">&nbsp;|&nbsp;</span>
+                  <li title="TS">
+                    <el-icon><div class="i-ep:menu text-pink-600" /></el-icon>&nbsp;<span>
+                      {{ (row?.data?.manifest?.ts) || '-' }}</span>
+                  </li>
+                  <span class="text-gray-400">&nbsp;|&nbsp;</span>
+                  <li title="Segment counter">
+                    <el-icon><div class="i-ep:scale-to-original text-gray-400" /></el-icon>&nbsp;<span>
+                      {{ (row?.data?.manifest?.count) || '-' }}<small>(s)</small></span>
+                  </li>
+                  <span v-if="row.data.format !== 'dash' && row.data.format " class="text-gray-400">&nbsp;|&nbsp;</span>
+                  <li v-if="row.data.format !== 'dash' && row.data.format " title="Enable Time">
+                    <el-icon
+                      :title="row?.data?.manifest?.enableTime ? 'On' : 'Off'"
+                      :class="row?.data?.manifest?.enableTime ? 'text-success' : 'text-gray-400'"
+                      name="switch-button"
+                    >
+                      <div class="i-ep:switch-button font-semibold" :class="row?.data?.manifest?.enableTime ? 'text-success' : 'text-gray-400'" />
+                    </el-icon>&nbsp;<span>Enable time </span>
+                  </li>
+                  <span v-if="row.data.format !== 'dash' && row.data.format !== 'mabr' && row.data.format !== 'hls'" class="text-gray-400">&nbsp;|&nbsp;</span>
+                  <li v-if="row.data.format !== 'dash' && row.data.format !== 'mabr' && row.data.format !== 'hls'" title="Playlist">
+                    <el-icon
+                      :title="row?.data?.manifest?.appendList ? 'On' : 'Off'"
+                      :class="row?.data?.manifest?.appendList ? 'text-success' : 'text-gray-400'"
+                      name="switch-button"
+                    >
+                      <div class="i-ep:switch-button font-semibold" :class="row?.data?.manifest?.appendList ? 'text-success' : 'text-gray-400'" />
+                    </el-icon>&nbsp;<span>Playlist </span>
+                  </li>
+                  <span class="text-gray-400">&nbsp;|&nbsp;</span>
+                  <li title="Time offset">
+                    <el-icon><div class="i-carbon:timer text-blue-600" /></el-icon>&nbsp;<span>
+                      {{ (row?.data?.manifest?.timeOffset) || '-' }}</span>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="DRM" prop="drm" width="80">
+            <template #default="scope">
+              {{ scope.row?.data?.drm?.enable ? 'Enable' : 'Disable' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Low Latency" prop="lowLatency" width="120">
+            <template #default="scope">
+              {{ scope.row?.data?.lowLatency?.enable ? 'Enable' : 'Disable' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Catchup" prop="catchup" width="100">
+            <template #default="scope">
+              {{ scope.row?.data?.catchup?.enable ? 'Enable' : 'Disable' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Startover" prop="startOver" width="100">
+            <template #default="scope">
+              {{ scope.row?.data?.startOver?.enable ? 'Enable' : 'Disable' }}
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Action" prop="catchup" width="80" align="center">
+            <template #default="{ row }">
+              <el-button type="danger" title="Delete" @click="handleRemove(row.id)">
+                <template #icon>
+                  <div class="i-ep:delete" />
+                </template>
+              </el-button>
+            </template>
+          </el-table-column> -->
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Channel/TargetLowLatency.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus'
+
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'LowLatencyDto')
+
+const rules = reactive<FormRules>({
+  containerType: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  chunkedType: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  ts: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  count: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+})
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [formatValue] = useElField<string>(getProp('format'), [])
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('lowLatency.enable'), [])
+const [chunkedTypeValue, chunkedTypeAttrs] = useElField<string>(getProp('lowLatency.chunkedType'), rules.chunkedType)
+const [chunkedValue, chunkedAttrs] = useElField<number>(getProp('lowLatency.chunked'), [
+])
+const [maxLatencyValue, maxLatencyAttrs] = useElField<number>(getProp('lowLatency.maxLatency'), [])
+const [minLatencyValue, minLatencyAttrs] = useElField<number>(getProp('lowLatency.minLatency'), [])
+const [targetLatencyValue, targetLatencyAttrs] = useElField<number>(getProp('lowLatency.targetLatency'), [])
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-10">
+    <el-form-item label="Enable" :required="enableValue" v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel
+          :label="t('SSConfig.form.label.enable')"
+          :info="schemaObj.enable"
+        />
+      </template>
+      <el-switch v-model="enableValue" :disabled="formatValue === 'mabr'" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item label="Chunked Type" :required="enableValue" v-bind="chunkedTypeAttrs">
+      <template #label>
+        <SSInformationLabel label="Chunked Type" :info="schemaObj.chunkedType" />
+      </template>
+      <el-select v-model="chunkedTypeValue" :disabled="!enableValue" class="w-full">
+        <el-option
+          v-for="chunkedType in ['fragment', 'range']" :key="chunkedType"
+          :value="chunkedType" :label="chunkedType"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Chunked" v-bind="chunkedAttrs">
+      <template #label>
+        <SSInformationLabel label="Chunked" :info="schemaObj.chunked" />
+      </template>
+      <el-input-number v-model="chunkedValue" :disabled="!enableValue" :step="0.1" :min="0.1" :max="50" step-strictly />
+    </el-form-item>
+    <el-form-item label="Target latency" v-bind="targetLatencyAttrs">
+      <template #label>
+        <SSInformationLabel
+          label="Target latency"
+          :info="schemaObj.targetLatency"
+        />
+      </template>
+      <el-input-number
+        v-model="targetLatencyValue" :disabled="!enableValue" :step="0.1" :max="30" :min="1" step-strictly
+      />
+    </el-form-item>
+    <el-form-item label="Min Latency" v-bind="minLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="Min latency" :info="schemaObj.minLatency" />
+      </template>
+      <el-input-number v-model="minLatencyValue" :disabled="!enableValue" :step="0.1" :max="30" step-strictly :min="1" />
+    </el-form-item>
+    <el-form-item label="Max latency" v-bind="maxLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="Max latency" :info="schemaObj.maxLatency" />
+      </template>
+      <el-input-number v-model="maxLatencyValue" :disabled="!enableValue" :step="0.1" :max="30" step-strictly :min="1" />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/TargetMabrOutput.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+const { prop, idx } = definePropsRefs<{
+  prop: string
+  idx: number
+}>()
+
+function getProp(key?: string) {
+  return () => key ? `${prop.value}.${key}` : prop.value
+}
+const [outputValue, outputAttrs, { add, remove }] = useElFieldArray(getProp(), [])
+
+function addOutput() {
+  add({
+    ip: '',
+    networkInterface: '',
+    profiles: [],
+    port: 20,
+  })
+}
+onBeforeMount(() => {
+  if (outputValue.value.length === 0)
+    addOutput()
+})
+</script>
+
+<template>
+  <div class="flex justify-end">
+    <el-button type="primary" :disabled="outputValue.length >= 10" plain @click="addOutput">
+      {{ $t('SSConfig.add_ouput') }}
+    </el-button>
+  </div>
+  <div class="grid grid-cols-[1fr_5fr_5fr_5fr_5fr_1fr] gap-2">
+    <el-text tag="b">
+      No.
+    </el-text>
+    <el-text tag="b">
+      IP <el-text type="danger">
+        *
+      </el-text>
+    </el-text>
+    <el-text tag="b">
+      Port <el-text type="danger">
+        *
+      </el-text>
+    </el-text>
+    <el-text tag="b">
+      Network interface
+    </el-text>
+    <el-text tag="b">
+      {{ $t('EventChannel.label.profile') }} <el-text type="danger">
+        *
+      </el-text>
+    </el-text>
+  </div>
+  <div v-for="(item, index) in outputValue" :key="item.id" class="grid grid-cols-[1fr_5fr_5fr_5fr_5fr_1fr] gap-2">
+    <SSChannelTargetMabrOutputItem :prop="getProp(`${index}`)()" :disabled-remove="outputValue.length <= 1" :idx="index" @remove="remove(item.id)" />
+  </div>
+</template>

package/src/components/Channel/TargetMabrOutputItem.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import isIP from 'validator/lib/isIP'
+import type { ProfileDto, TargetProfileDto } from '~/api-client'
+
+const emit = defineEmits<{
+  remove: []
+}>()
+const { t } = useI18n()
+const { prop, idx, disabledRemove } = definePropsRefs<{
+  prop: string
+  idx: number
+  disabledRemove: boolean
+}>()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [ipValue, ipAttrs] = useElField<string>(getProp('ip'), [{
+  required: true,
+  trigger: ['blur', 'change'],
+  validator: (rule, value, callback) => {
+    if (!value)
+      callback(new Error(t('SSConfig.please_input_ip')))
+    else if (!isIP(value))
+      callback(new Error(t('SSConfig.invalid_ip')))
+    else
+      callback()
+  },
+}])
+
+const [portValue, portAttrs] = useElField<number>(getProp('port'), [{
+  required: true,
+  trigger: ['blur', 'change'],
+}])
+const [networkInterfaceValue, networkInterfaceAttrs] = useElField<string>(getProp('networkInterface'), [{
+  trigger: ['blur', 'change'],
+}])
+const [profilesValue, profilesAttrs] = useElField<string>(getProp('profiles'), [
+  {
+    required: true,
+    message: t('SSConfig.please_select_profile'),
+    type: 'array',
+  },
+])
+const [profiles] = useElFieldArray<ProfileDto[]>(() => 'profiles')
+
+const profilesListId = computed(() => profiles.value.map(profile => profile.id))
+watch(profilesListId, (val) => {
+  profilesValue.value = profilesValue.value.filter(item => val.includes(item))
+})
+</script>
+
+<template>
+  <el-form-item>
+    {{ idx + 1 }}
+  </el-form-item>
+  <el-form-item v-bind="ipAttrs">
+    <el-input v-model="ipValue" :placeholder="t('SSConfig.please_input_ip')" />
+  </el-form-item>
+  <el-form-item v-bind="portAttrs">
+    <el-input-number v-model="portValue" :min="1" :max="65535" :step="1" step-strictly class="w-full" />
+  </el-form-item>
+  <el-form-item v-bind="networkInterfaceAttrs">
+    <SSChannelTargetNetworkInterface v-model:value="networkInterfaceValue" />
+  </el-form-item>
+  <el-form-item v-bind="profilesAttrs">
+    <el-select
+      v-model="profilesValue"
+      :placeholder="$t('SSConfig.label.selectProfile')"
+      multiple
+      collapse-tags
+      collapse-tags-tooltip
+      clearable
+    >
+      <el-option
+        v-for="item in profiles"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="danger" :disabled="disabledRemove" @click="emit('remove')">
+      <template #icon>
+        <div class="i-ep:delete" />
+      </template>
+    </el-button>
+  </el-form-item>
+</template>

package/src/components/Channel/TargetManifest.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ManifestDto')
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [containerTypeValue, containerTypeAttrs] = useElField<string>(getProp('manifest.containerType'), [
+  {
+    required: true,
+    message: t('SSConfig.form.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [tsValue, tsAttrs] = useElField<number>(getProp('manifest.ts'), [
+  {
+    required: true,
+    message: t('SSConfig.form.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+])
+const [timeOffsetValue, timeOffsetAttrs] = useElField<number>(getProp('manifest.timeOffset'), [
+])
+
+const [countValue, countAttrs] = useElField<number>(getProp('manifest.count'), [
+  {
+    required: true,
+    message: t('SSConfig.form.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [appendListValue, appendListAttrs] = useElField<boolean>(getProp('manifest.appendList'), [])
+const [enableTimeValue, enableTimeAttrs] = useElField<string>(getProp('manifest.enableTime'), [])
+const [formatValue] = useElField<string>(getProp('format'), [])
+const [splitValue] = useElField<boolean>(getProp('manifest.split'), [])
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-x-5">
+    <el-form-item v-if="formatValue !== 'dash' && formatValue !== 'mabr'" label="Container" v-bind="containerTypeAttrs">
+      <template #label>
+        <SSInformationLabel label="Container" :info="schemaObj.containerType" />
+      </template>
+      <el-select v-model="containerTypeValue" class="w-full">
+        <el-option
+          v-for="(container, idx) in ['fmp4', 'mpeg-ts']" :key="container + idx"
+          :value="container" :label="container"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="TS" v-bind="tsAttrs" class="[&_.el-form-item\_\_content]:block">
+      <template #label>
+        <SSInformationLabel label="TS" :info="schemaObj.ts" />
+      </template>
+      <el-input-number v-model="tsValue" :min="2" :max="10" :step="1" step-strictly />
+    </el-form-item>
+    <el-form-item v-bind="countAttrs">
+      <template #label>
+        <SSInformationLabel label="Counter" :info="schemaObj.count" />
+      </template>
+      <el-input-number v-model="countValue" :min="1" :max="50" :step="1" step-strictly />
+    </el-form-item>
+    <el-form-item v-if="formatValue !== 'dash' && formatValue !== 'mabr'" label="Time" v-bind="enableTimeAttrs">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.form.label.time')" :info="schemaObj.enableTime" />
+      </template>
+      <el-switch v-model="enableTimeValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item v-if="formatValue !== 'dash' && formatValue !== 'mabr' && formatValue !== 'hls' " v-bind="appendListAttrs">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.form.label.playlist')" :info="schemaObj.appendList" />
+      </template>
+      <el-switch v-model="appendListValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item :label="$t('SSConfig.time_offset')" v-bind="timeOffsetAttrs" class="[&_.el-form-item\_\_content]:block">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.time_offset')" :info="schemaObj.timeOffsetAttrs" />
+      </template>
+      <el-input-number v-model="timeOffsetValue" :min="0" :max="100" :step="1" step-strictly />
+    </el-form-item>
+    <el-form-item v-if="formatValue === 'hls' && containerTypeValue === 'mpeg-ts'" label="Time" v-bind="enableTimeAttrs">
+      <template #label>
+        <SSInformationLabel label="Split" :info="schemaObj.split" />
+      </template>
+      <el-switch v-model="splitValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/TargetNetworkInterface.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value?: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits(['changeNetworkInterface'])
+const { t } = useI18n()
+
+const { machineIds } = useServerConfigStore()
+
+const params_machine = reactive({
+  id: { $in: machineIds.value },
+})
+
+const params = reactive({
+  q: JSON.stringify(params_machine),
+  sort: '',
+})
+const addressIPList = ref<Array<typeNetworkInterface>>([])
+
+const networkValue = useVModel(props, 'value')
+watch(() => machineIds.value, () => {
+  params_machine.id.$in = machineIds.value
+  params.q = JSON.stringify(params_machine)
+
+  // if (!machineIds.value.length) {
+  //   addressIPList.value = []
+  //   networkValue.value = ''
+  // }
+})
+
+watch(() => addressIPList.value, () => {
+  if (!addressIPList.value.length)
+    networkValue.value = ''
+}, { deep: true })
+
+interface typeNetworkInterface {
+  name: string
+  netmask: string
+}
+
+function filterListApi(Arr: any[]) {
+  const newArr = []
+
+  Arr.forEach((el) => {
+    newArr.push(el?.network)
+  })
+
+  const commonElements = newArr?.reduce((acc, arr) =>
+    acc.filter(element => arr.some(e => e?.name === element?.name)), newArr[0])
+
+  const result = commonElements.filter((element: { name: string, netmask: string }) =>
+    newArr.every(arr => arr.some((e: { name: string, netmask: string }) => e?.name === element?.name)))
+
+  return result ?? []
+}
+
+useQuery(['QueryKeys.MACHINES', params], async () =>
+  (await $machineApi('/api/machine/sigma-machines', {
+    method: 'GET',
+  })), {
+  enabled: computed(() => !!machineIds.value),
+  onSuccess: (listNetworkInterface) => {
+    addressIPList.value = filterListApi(listNetworkInterface.data)
+  },
+})
+
+function changeIPaddress(data: string) {
+  emit('changeNetworkInterface', data)
+}
+</script>
+
+<template>
+  <el-select
+    v-model="networkValue"
+    class="w-full"
+    clearable
+    filterable
+    :placeholder="placeholder"
+    @change="changeIPaddress"
+  >
+    <el-option
+      v-for="item in addressIPList"
+      :key="item?.name"
+      :label="`${item?.name} - ${item?.netmask}`"
+      :value="item?.name"
+    >
+      <div class="flex gap-4">
+        <span v-if="item?.name">name: {{ item?.name }}</span>-
+        <span v-if="item?.netmask">netmask: {{ item?.netmask }}</span>
+      </div>
+    </el-option>
+  </el-select>
+</template>