@sigmaott/base-next 1.0.6

package/src/components/Channel/TargetOutputMultiplex.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
+const { schemaObj: schemaManifest } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ManifestDto')
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [uriValue, uriAttrs] = useElField<string>(getProp('uri'), [
+  {
+    required: true,
+    message: t('Input.form.validate.primary'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isProtocolURLValid(value, 'udp'))
+        // if (!isURL(value, { protocols: ['udp'], require_protocol: true }))
+        callback(new Error(t('transcode.invalid_url')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+
+const [networkInterfaceValue, networkInterfaceAttrs] = useElField<string>(getProp('networkInterface'), [])
+
+const [muxRateValue, muxRateAttrs] = useElField<number>(getProp('manifest.muxrate'), [{
+  required: true,
+  message: t('EventChannel.form.validate.require'),
+  trigger: ['blur', 'change'],
+}])
+const [rangeLatencyValue, rangeLatencyAttrs] = useElField<number>(getProp('manifest.rangeLatency'), [])
+const [bufferValue, bufferAttrs] = useElField<number>(getProp('manifest.buffer'), [
+  {
+    validator: (rule, value, callback) => {
+      if (rangeLatencyValue.value < bufferValue.value)
+        callback(new Error(t('Target.buffer_small_rangelatency')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [targetLatencyValue, targetLatencyAttrs] = useElField<number>(getProp('manifest.targetLatency'), [
+  {
+    validator: (rule, value, callback) => {
+      if (rangeLatencyValue.value > targetLatencyValue.value)
+        callback(new Error(t('Target.targetlatency_bigger_rangelatency')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [ppmValue, ppmAttrs] = useElField<number>(getProp('manifest.ppm'), [])
+const [pcrValue, pcrAttrs] = useElField<number>(getProp('manifest.pcr'), [])
+const [patValue, patAttrs] = useElField<number>(getProp('manifest.pat'), [])
+const [sdtValue, sdtAttrs] = useElField<number>(getProp('manifest.sdt'), [])
+const [dropLatencyValue, dropLatencyAttrs] = useElField<number>(getProp('manifest.dropLatency'), [])
+const [muxCbrValue, muxCbrAttrs] = useElField<boolean>(getProp('manifest.muxCbr'), [])
+
+function autoSetValue(type: string, value: number) {
+  if (type === 'buffer') {
+    if (value > rangeLatencyValue.value)
+      bufferValue.value = rangeLatencyValue.value
+  }
+  else if (type === 'target') {
+    if (value < rangeLatencyValue.value)
+      rangeLatencyValue.value = targetLatencyValue.value
+    if (value < bufferValue.value)
+      bufferValue.value = value
+  }
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <el-form-item label="URI" v-bind="uriAttrs">
+      <template #label>
+        <SSInformationLabel label="URI" :info="schemaObj.uri" />
+      </template>
+      <el-input
+        v-model="uriValue"
+        :placeholder="`${$t('EventChannel.placeholder.enter')} URI (protocols: udp://)`"
+        maxlength="2048"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="Network Interface" v-bind="networkInterfaceAttrs">
+      <template #label>
+        <SSInformationLabel label="Network Interface" :info="schemaObj.networkInterface" />
+      </template>
+      <SSChannelTargetNetworkInterface v-model:value="networkInterfaceValue" />
+    </el-form-item>
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item v-bind="muxRateAttrs">
+      <template #label>
+        <SSInformationLabel label="Mux rate" :info="schemaManifest.muxrate" />
+      </template>
+      <el-input-number
+        v-model="muxRateValue"
+        class="w-full"
+        :min="1000000"
+        :max="10000000000"
+        :step="1"
+        step-strictly
+      />
+    </el-form-item>
+    <el-form-item v-bind="bufferAttrs">
+      <template #label>
+        <SSInformationLabel label="Buffer" :info="schemaManifest.buffer" />
+      </template>
+      <el-input-number
+        v-model="bufferValue"
+        class="w-full"
+        :min="0"
+        :max="2"
+        :precision="1"
+        :step="0.1"
+        step-strictly
+        @change="(newValue) => autoSetValue('buffer', newValue)"
+      />
+    </el-form-item>
+    <el-form-item v-bind="rangeLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="RangeLatency" :info="schemaManifest.rangeLatency" />
+      </template>
+      <el-input-number
+        v-model="rangeLatencyValue"
+        class="w-full"
+        :min="bufferValue"
+        :max="targetLatencyValue"
+        :precision="1"
+        :step="0.1"
+        step-strictly
+        @change="(newValue) => autoSetValue('range', newValue)"
+      />
+    </el-form-item>
+    <el-form-item v-bind="targetLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="TargetLatency" :info="schemaManifest.targetLatency" />
+      </template>
+      <el-input-number
+        v-model="targetLatencyValue"
+        class="w-full"
+        :min="0.5"
+        :max="5"
+        :precision="1"
+        :step="0.5"
+        step-strictly
+        @change="(newValue) => autoSetValue('target', newValue)"
+      />
+    </el-form-item>
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item v-bind="ppmAttrs">
+      <template #label>
+        <SSInformationLabel label="PPM" :info="schemaManifest.ppm" />
+      </template>
+      <el-input-number
+        v-model="ppmValue"
+        class="w-full"
+        :min="0"
+        :max="10000"
+        :step="1"
+        step-strictly
+      />
+    </el-form-item>
+    <el-form-item v-bind="pcrAttrs">
+      <template #label>
+        <SSInformationLabel label="PCR" :info="schemaManifest.pcr" />
+      </template>
+      <el-input-number
+        v-model="pcrValue"
+        class="w-full"
+        :min="20"
+        :max="100"
+        :step="1"
+        step-strictly
+      />
+    </el-form-item>
+    <el-form-item v-bind="patAttrs">
+      <template #label>
+        <SSInformationLabel label="PAT/PMT" :info="schemaManifest.pat" />
+      </template>
+      <el-input-number
+        v-model="patValue"
+        class="w-full"
+        :min="0.1"
+        :max="0.5"
+        :precision="2"
+        :step="0.1"
+      />
+    </el-form-item>
+    <el-form-item v-bind="sdtAttrs">
+      <template #label>
+        <SSInformationLabel label="SDT" :info="schemaManifest.sdt" />
+      </template>
+      <el-input-number
+        v-model="sdtValue"
+        class="w-full"
+        :min="0"
+        :max="2"
+        :step="0.1"
+        :precision="2"
+      />
+    </el-form-item>
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item v-bind="dropLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="Drop Latency" :info="schemaManifest.dropLatency" />
+      </template>
+      <el-input-number
+        v-model="dropLatencyValue"
+        class="w-full"
+        :min="2.50"
+        :max="14.00"
+        :step="0.10"
+        :precision="2"
+      />
+    </el-form-item>
+    <el-form-item v-bind="muxCbrAttrs">
+      <template #label>
+        <SSInformationLabel label="MuxCbr" :info="schemaManifest.muxCbr" />
+      </template>
+      <el-switch v-model="muxCbrValue" />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/TargetOutputType.vue

@@ -0,0 +1,201 @@
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { uppercaseFirst } from '@/utils/filters'
+
+const emit = defineEmits(['submit', 'cancel'])
+const { t } = useI18n()
+const selectionForm = ref<FormInstance>()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
+
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      message: t('SSConfig.message.require-name-target'),
+      trigger: ['blur', 'change'],
+    },
+    { min: 1, max: 200, message: t('SSConfig.form.validate.length', { min: 1, max: 200 }), trigger: ['blur', 'change'] },
+    {
+      validator: (rule, value, callback) => {
+        if (!/^[\w-]*$/.test(value))
+          callback(new Error(t('SSConfig.form.validate.formatName')))
+        else
+          callback()
+      },
+      trigger: ['blur', 'change'],
+    },
+  ],
+  nameModifier: [
+    {
+      validator: (rule, value, callback) => {
+        if (!/^[\w-]*$/.test(value))
+          callback(new Error(t('SSConfig.form.validate.formatName')))
+        else
+          callback()
+      },
+      trigger: ['blur', 'change'],
+    },
+  ],
+})
+const fields = reactive({ output: 'hls', name: '', nameModifier: '' })
+const {
+  current,
+  isLast,
+  goToNext,
+  goToPrevious,
+} = useStepper([
+  'step-select-output',
+  'step-config-name',
+])
+
+const availableFormats = [
+  {
+    label: 'Hls',
+    value: 'hls',
+    des: t('SSConfig.http_live_streaming'),
+    tooltip: t('SSConfig.apple_protocol_for_streaming_live'),
+  },
+  {
+    label: 'Dash',
+    value: 'dash',
+    des: t('SSConfig.dynamic_adaptive_streaming_over_http'),
+    tooltip: t('SSConfig.mpeg_standard_for_adaptive_bitrate_streaming_over_http'),
+  },
+  {
+    label: 'Udp Multicast',
+    value: 'udp',
+    tooltip: t('SSConfig.network_protocol_for_efficient_multi-recipient_data_delivery'),
+  },
+  {
+    label: 'Rtmp',
+    value: 'rtmp',
+    des: t('SSConfig.real-time_messaging_protocol'),
+    tooltip: t('SSConfig.adobe_protocol_for_low-latency_video_and_audio_streaming'),
+  },
+  {
+    label: 'Mss',
+    value: 'mss',
+    des: t('SSConfig.microsoft_smooth_streaming'),
+    tooltip: t('SSConfig.microsoft_technology_for_adaptive_streaming_of_video'),
+  },
+  {
+    label: 'Hds',
+    value: 'hds',
+    des: t('SSConfig.http_dynamic_streaming'),
+    tooltip: t('SSConfig.adobe_protocol_for_adaptive_bitrate_streaming_via_http'),
+  },
+  {
+    label: 'Hls-dash',
+    value: 'hls-dash',
+    des: '',
+    tooltip: t('SSConfig.combined_use_of_hls_and_dash_for_broader_compatibility'),
+  },
+  {
+    label: 'Multiplex',
+    value: 'multiplex',
+    des: '',
+    tooltip: t('SSConfig.technique_for_transmitting_multiple_signals_over_one_medium'),
+  },
+  {
+    label: 'Dash-Mabr',
+    value: 'mabr',
+    des: t('SSConfig.dash_multicast_adaptive_bitrate'),
+    tooltip: t('SSConfig.enhances_dash_with_multicast_for_scalable_live_streaming'),
+  },
+  {
+    label: 'SRT',
+    value: 'srt',
+    des: t('transcode.secure_reliable_transport'),
+    tooltip: t('SSConfig.transcode.secure_low-latency_streaming_protocol'),
+  },
+]
+function onSubmit() {
+  if (isLast.value) {
+    selectionForm?.value?.validate((valid) => {
+      if (valid) {
+        emit('submit', { type: fields.output, name: fields.name, nameModifier: fields.nameModifier })
+      }
+      else {
+        ElMessage.error('Data is invalid')
+        return false
+      }
+    })
+  }
+  else {
+    goToNext()
+  }
+}
+function onCancel() {
+  if (isLast.value) {
+    goToPrevious()
+  }
+  else {
+    selectionForm?.value?.resetFields()
+    emit('cancel')
+  }
+}
+</script>
+
+<template>
+  <section>
+    <el-form ref="selectionForm" :model="fields" size="default" label-position="top" :rules="rules">
+      <el-form-item v-if="current === 'step-select-output'" prop="output">
+        <el-radio-group v-model="fields.output" size="large" class="output-radio flex flex-col gap-2">
+          <el-radio v-for="(item) in availableFormats" :key="item.value" :label="item.value" border>
+            <div class="leading-normal">
+              <span class="font-bold">{{ uppercaseFirst(item.label) }}</span>
+              &nbsp;
+              <span class="text-helper">{{ item.des }}</span>
+              <p class="text-xs">
+                {{ item?.tooltip }}
+              </p>
+            </div>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <template v-else>
+        <el-form-item :label="$t('SSConfig.label.name')" prop="name">
+          <template #label>
+            <SSInformationLabel :label="$t('SSConfig.label.name')" :info="schemaObj.name" />
+          </template>
+          <el-input
+            v-model.trim="fields.name" :placeholder="t('SSConfig.placeholder.enterName')" maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="fields.output !== 'multiplex'" :label="$t('SSConfig.label.name-modifier')" prop="nameModifier">
+          <template #label>
+            <SSInformationLabel :label="$t('SSConfig.label.name-modifier')" :info="schemaObj.nameModifier" />
+          </template>
+          <el-input
+            v-model.trim="fields.nameModifier" :placeholder="t('SSConfig.placeholder.enterName')"
+            maxlength="50" show-word-limit
+          />
+        </el-form-item>
+      </template>
+      <el-form-item class="float-right">
+        <el-button plain @click="onCancel">
+          {{ t('Actions.cancel') }}
+        </el-button>
+        <el-button plain type="primary" :disabled="!fields.output" @click="onSubmit">
+          {{ t('Actions.submit') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.el-radio-group.output-radio {
+  width: 100%;
+
+  .el-radio {
+    width: 100%;
+    margin: 0 0 12px 0 !important;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

package/src/components/Channel/TargetOutputUdp.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import isURL from 'validator/es/lib/isURL'
+
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
+const { schemaObj: schemaManifest } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ManifestDto')
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [dvbEnabledValue, dvbEnabledAttrs] = useElField<number>(getProp('manifest.dvbEnabled'), [])
+const [rangeLatencyValue, rangeLatencyAttrs] = useElField<number>(getProp('manifest.rangeLatency'), [], { enabled: dvbEnabledValue })
+const [bufferValue, bufferAttrs] = useElField<number>(getProp('manifest.buffer'), [
+  {
+    validator: (rule, value, callback) => {
+      if (rangeLatencyValue.value < bufferValue.value)
+        callback(new Error(t('Target.buffer_small_rangelatency')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], { enabled: dvbEnabledValue })
+const [targetLatencyValue, targetLatencyAttrs] = useElField<number>(getProp('manifest.targetLatency'), [
+  {
+    validator: (rule, value, callback) => {
+      if (rangeLatencyValue.value > targetLatencyValue.value)
+        callback(new Error(t('Target.targetlatency_bigger_rangelatency')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], { enabled: dvbEnabledValue })
+const [ppmValue, ppmAttrs] = useElField<number>(getProp('manifest.ppm'), [], { enabled: dvbEnabledValue })
+const [pcrValue, pcrAttrs] = useElField<number>(getProp('manifest.pcr'), [], { enabled: dvbEnabledValue })
+const [patValue, patAttrs] = useElField<number>(getProp('manifest.pat'), [], { enabled: dvbEnabledValue })
+const [sdtValue, sdtAttrs] = useElField<number>(getProp('manifest.sdt'), [], { enabled: dvbEnabledValue })
+const [dropLatencyValue, dropLatencyAttrs] = useElField<number>(getProp('manifest.dropLatency'), [], { enabled: dvbEnabledValue })
+const [muxCbrValue, muxCbrAttrs] = useElField<boolean>(getProp('manifest.muxCbr'), [], { enabled: dvbEnabledValue })
+
+function autoSetValue(type: string, value: number) {
+  if (type === 'buffer') {
+    if (value > rangeLatencyValue.value)
+      bufferValue.value = rangeLatencyValue.value
+  }
+  else if (type === 'target') {
+    if (value < rangeLatencyValue.value)
+      rangeLatencyValue.value = targetLatencyValue.value
+    if (value < bufferValue.value)
+      bufferValue.value = value
+  }
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item :label="t('EventChannel.form.label.enable')" v-bind="dvbEnabledAttrs" :required="dvbEnabledValue">
+      <template #label>
+        <SSInformationLabel :label="t('EventChannel.form.label.enable')" :info="schemaObj.dvbEnabled" />
+      </template>
+      <el-switch v-model="dvbEnabledValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item v-bind="bufferAttrs">
+      <template #label>
+        <SSInformationLabel label="Buffer" :info="schemaManifest.buffer" />
+      </template>
+      <el-input-number
+        v-model="bufferValue"
+        class="w-full"
+        :min="0"
+        :max="2"
+        :precision="1"
+        :step="0.1"
+        step-strictly
+        :disabled="!dvbEnabledValue"
+        @change="(newValue) => autoSetValue('buffer', newValue)"
+      />
+    </el-form-item>
+    <el-form-item v-bind="rangeLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="RangeLatency" :info="schemaManifest.rangeLatency" />
+      </template>
+      <el-input-number
+        v-model="rangeLatencyValue"
+        class="w-full"
+        :min="bufferValue"
+        :max="targetLatencyValue"
+        :precision="1"
+        :step="0.1"
+        step-strictly
+        :disabled="!dvbEnabledValue"
+        @change="(newValue) => autoSetValue('range', newValue)"
+      />
+    </el-form-item>
+    <el-form-item v-bind="targetLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="TargetLatency" :info="schemaManifest.targetLatency" />
+      </template>
+      <el-input-number
+        v-model="targetLatencyValue"
+        class="w-full"
+        :min="0.5"
+        :max="5"
+        :precision="1"
+        :step="0.5"
+        step-strictly
+        :disabled="!dvbEnabledValue"
+        @change="(newValue) => autoSetValue('target', newValue)"
+      />
+    </el-form-item>
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item v-bind="ppmAttrs">
+      <template #label>
+        <SSInformationLabel label="PPM" :info="schemaManifest.ppm" />
+      </template>
+      <el-input-number
+        v-model="ppmValue"
+        class="w-full"
+        :min="0"
+        :max="10000"
+        :step="1"
+        :disabled="!dvbEnabledValue"
+        step-strictly
+      />
+    </el-form-item>
+    <el-form-item v-bind="pcrAttrs">
+      <template #label>
+        <SSInformationLabel label="PCR" :info="schemaManifest.pcr" />
+      </template>
+      <el-input-number
+        v-model="pcrValue"
+        class="w-full"
+        :min="20"
+        :max="100"
+        :step="1"
+        :disabled="!dvbEnabledValue"
+        step-strictly
+      />
+    </el-form-item>
+    <el-form-item v-bind="patAttrs">
+      <template #label>
+        <SSInformationLabel label="PAT/PMT" :info="schemaManifest.pat" />
+      </template>
+      <el-input-number
+        v-model="patValue"
+        class="w-full"
+        :min="0.1"
+        :max="0.5"
+        :precision="2"
+        :step="0.1"
+        :disabled="!dvbEnabledValue"
+      />
+    </el-form-item>
+    <el-form-item v-bind="sdtAttrs">
+      <template #label>
+        <SSInformationLabel label="SDT" :info="schemaManifest.sdt" />
+      </template>
+      <el-input-number
+        v-model="sdtValue"
+        class="w-full"
+        :min="0"
+        :max="2"
+        :step="0.1"
+        :precision="2"
+        :disabled="!dvbEnabledValue"
+      />
+    </el-form-item>
+  </div>
+  <div class="grid grid-cols-4 gap-2">
+    <el-form-item v-bind="dropLatencyAttrs">
+      <template #label>
+        <SSInformationLabel label="Drop Latency" :info="schemaManifest.dropLatency" />
+      </template>
+      <el-input-number
+        v-model="dropLatencyValue"
+        class="w-full"
+        :min="2.50"
+        :max="14.00"
+        :step="0.10"
+        :precision="2"
+        :disabled="!dvbEnabledValue"
+      />
+    </el-form-item>
+    <el-form-item v-bind="muxCbrAttrs">
+      <template #label>
+        <SSInformationLabel label="MuxCbr" :info="schemaManifest.muxCbr" />
+      </template>
+      <el-switch
+        v-model="muxCbrValue"
+        :disabled="!dvbEnabledValue"
+      />
+    </el-form-item>
+  </div>
+</template>