@sigmaott/base-next 1.0.6

package/src/components/Channel/ConfigForm.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+// import ChannelConfigInformation from './ConfigInformation.vue'
+// import ChannelConfigWatermark from './ConfigWatermark.vue'
+// import ChannelConfigWaterMarkAudio from './ConfigWaterMarkAudio.vue'
+// import ChannelConfigBlackout from './ConfigBlackout.vue'
+// import ChannelConfigOptions from './ConfigOptions.vue'
+// import ChannelConfigScte from './ConfigScte.vue'
+
+const { modelValue: form, isTranscode } = defineModels<{
+  modelValue: any
+  isTranscode?: boolean
+}>()
+
+const activeNames = ref(['information', 'transcoder', 'nameModifier', 'interactive', 'watermark', 'audioWatermark', 'blackout', 'option', 'scte', 'pte', 'signal', 'Forensic'])
+
+const [profilesValue] = useElField('profiles', [])
+function handleChangeGlobalPte() {
+  profilesValue.value?.forEach((profile) => {
+    profile.presets.forEach((preset) => {
+      if (preset.type === 'video' && preset.pteEnabled === true) {
+        preset.videoCodec = 'h264'
+        preset.fixedGOP = false
+      }
+    })
+  })
+}
+</script>
+
+<template>
+  <el-collapse
+    v-model="activeNames"
+    class="[&_.el-collapse-item\_\_content]:pb-16px [&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
+  >
+    <el-collapse-item title="Information" name="information">
+      <LazySSChannelConfigInformation />
+    </el-collapse-item>
+    <el-collapse-item title="Watermark" name="watermark">
+      <LazySSChannelConfigWatermark prop="channelConfig.watermark" />
+    </el-collapse-item>
+    <el-collapse-item title=" Audio Watermark" name="audioWatermark">
+      <LazySSChannelConfigWaterMarkAudio />
+    </el-collapse-item>
+    <el-collapse-item title="Signal Loss" name="signal">
+      <SSChannelSignalLoss />
+    </el-collapse-item>
+    <el-collapse-item title="Blackout" name="blackout">
+      <template #title>
+        <div class="flex flex-col items-start leading-4">
+          Blackout
+          <el-text truncate class="text-helper">
+            ({{ $t('base_library.blackout_is_disabled_with_input_redundancy_the_channel') }})
+          </el-text>
+        </div>
+      </template>
+      <LazySSChannelConfigBlackout />
+    </el-collapse-item>
+    <el-collapse-item title="Options" name="option">
+      <LazySSChannelConfigOptions />
+    </el-collapse-item>
+    <!-- <el-collapse-item title="Ads detect" name="scte">
+      <template #title>
+        <div class="flex flex-col items-start leading-4">
+          Ads detect
+          <el-text truncate class="text-helper">
+            ({{ $t('Transcode.ai-based_detection_insertion_scte-35') }})
+          </el-text>
+        </div>
+      </template>
+      <LazySSChannelConfigScte />
+    </el-collapse-item>
+
+    <el-collapse-item title="Model PTE config" name="pte">
+      <template #title>
+        <div class="flex flex-col items-start leading-4">
+          Model PTE config
+          <el-text class="break_work text-helper text-start">
+            ({{ $t('base_libray.recommends_a_set_of_predefined_configuration_values_based_on_ai-driven_assessments_to_balance_video_quality_and_encoding_efficiency_ensuring_high_image_quality_while_maintaining_optimal_performance') }})
+          </el-text>
+        </div>
+      </template>
+      <LazySSChannelConfigPte @change-global-pte="handleChangeGlobalPte" />
+    </el-collapse-item>
+
+    <el-collapse-item name="Forensic">
+      <template #title>
+        <div class="flex flex-col items-start leading-4">
+          Forensic Watermark
+          <el-text class="break_work text-helper text-start">
+            (DASH-IF Forensic A/B Watermarking An interoperable watermarking integration schema)
+          </el-text>
+        </div>
+      </template>
+      <LazySSChannelConfigForensicWatermark />
+    </el-collapse-item> -->
+  </el-collapse>
+</template>
+
+<style scoped>
+.break_work {
+  word-break: break-word !important;
+}
+</style>

package/src/components/Channel/ConfigInformation.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus'
+
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CreateChannelDto')
+const { schemaObj: schemaObjConfig } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ChannelConfigDto')
+const route = useRoute()
+
+const rules = reactive<FormRules>({
+  name: [
+    {
+      required: true,
+      validator: nameValidator(t('SSConfig.channel_name')),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  description: [
+    {
+      validator: (rule, value, callback) => {
+        if (!/^[\w-\s]*$/.test(value))
+          callback(new Error(t('SSConfig.form.validate.formatDescription')))
+        else
+          callback()
+      },
+      trigger: ['blur', 'change'],
+    },
+  ],
+  machineIds: [
+    { required: true, message: t('SSConfig.form.validate.requireTranscoder'), trigger: ['blur', 'change'] },
+  ],
+  tags: [
+    {
+      validator: tagValidator(35),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  channelMode: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.channel_mode'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+})
+const [inputsValue] = useElField<any>('inputs', [])
+const action = computed(() => {
+  return route?.query?.action as string
+})
+
+const channelModeOptions = ref([
+  {
+    label: 'Active-Standby',
+    value: 'active-standby',
+  },
+  {
+    label: 'Active-Active',
+    value: 'active-active',
+  },
+])
+const channelType = ref(inject('channelType'))
+watch(() => inputsValue, async () => {
+  if (inputsValue.value?.length > 0) {
+    const inputDetail = await $transcodeApi(`/api/transcode/${channelType.value}-inputs/{inputId}`, {
+      pathParams: { inputId: inputsValue.value?.[0]?.id },
+      method: 'GET',
+      headers: { noNotify: true },
+    })
+    const { channelMode, machineConfig } = inputDetail
+
+    if (channelMode === 'active-active') {
+      channelModeOptions.value = [
+        {
+          label: 'Active-Active',
+          value: 'active-active',
+        },
+        {
+          label: 'Active-Standby',
+          value: 'active-standby',
+        },
+      ]
+    }
+  }
+}, { deep: true, immediate: true })
+
+const [nameValue, nameAttrs] = useElField<string>('name', rules.name)
+const [descriptionValue, descriptionAttrs] = useElField<string>('description', rules.description)
+const [tagsValue, tagsAttrs] = useElField<string>('tags', rules.tags)
+const [channelModeValue, channelModeAttrs] = useElField<string>('channelConfig.channelMode', rules.channelMode)
+
+const SPECIAL_CHARACTERS_NAME_NO_DASH_UNDERLINE_SLASH = /[`!@#$%^&*()+=[\]{};':"\\|,<>?~\s.]/
+const WORD_NO_CONTAINT_ACCENTED_CHARACTERS_SLASH = /^[\w/-]*$/
+
+const [nameModifierValue, nameModifierAttrs] = useElField<string>('channelConfig.nameModifier', [
+  { required: true, message: t('SSConfig.name_modifier_is_required'), trigger: ['blur', 'change'] },
+  {
+    trigger: ['blur', 'change'],
+    validator:
+    (_rule, value: string, callback: any) => {
+      if (!value || value.trim().length === 0)
+        callback(new Error($t('base.please_input_name', { name: $t('SSConfig.name_modifier') })))
+      else if (SPECIAL_CHARACTERS_NAME_NO_DASH_UNDERLINE_SLASH.test(value))
+        callback(new Error($t('base.name_can_not_contain_special_characters', { name: $t('SSConfig.name_modifier') })))
+      else if (!WORD_NO_CONTAINT_ACCENTED_CHARACTERS_SLASH.test(value))
+        callback(new Error($t('base.name_cannot_contain_accented_characters', { name: $t('SSConfig.name_modifier') })))
+      else if (!/^.{1,50}$/.test(value))
+        callback(new Error($t('base.the_name_should_not_exceed_50_characters', { name: $t('SSConfig.name_modifier') })))
+      else
+        callback()
+    },
+  },
+])
+function onBlurDescription() {
+  descriptionValue.value = descriptionValue.value.trim()
+}
+</script>
+
+<template>
+  <section>
+    <div class="flex gap-2">
+      <el-form-item class="flex-1" v-bind="nameAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('SSConfig.label.name')" :info="schemaObj.name" />
+        </template>
+        <el-input
+          v-model.trim="nameValue"
+          :placeholder="t('SSConfig.placeholder.enterName')"
+          :minlength="1"
+          :maxlength="50"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item class="flex-1" v-bind="nameModifierAttrs">
+        <template #label>
+          <SSInformationLabel label="Name modifier" :info="schemaObjConfig.nameModifier" />
+        </template>
+        <el-input
+          v-model="nameModifierValue"
+          :placeholder="$t('SSConfig.replaced_name')"
+          :minlength="1"
+          :maxlength="50"
+          show-word-limit
+        />
+      </el-form-item>
+    </div>
+    <el-form-item label="Description" v-bind="descriptionAttrs">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.label.description')" :info="schemaObj.description" />
+      </template>
+      <el-input
+        v-model="descriptionValue"
+        :placeholder="t('SSConfig.placeholder.enterDescription')"
+        type="textarea"
+        :minlength="1"
+        maxlength="200"
+        show-word-limit
+        @blur="onBlurDescription"
+      />
+    </el-form-item>
+    <el-form-item v-bind="tagsAttrs">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.label.tags')" :info="schemaObj.tags" />
+      </template>
+      <el-scrollbar max-height="128px" always class="w-full">
+        <SSInputTags v-model="tagsValue" :max-item="100" />
+      </el-scrollbar>
+    </el-form-item>
+    <div class="flex gap-2">
+      <el-form-item v-bind="channelModeAttrs" class="flex-1">
+        <template #label>
+          <SSInformationLabel :label="t('SSConfig.label.channel_mode')" />
+        </template>
+        <el-scrollbar max-height="128px" always class="w-full">
+          <el-select
+            v-model="channelModeValue"
+            :placeholder="t('EventChannel.placeholder.select')"
+            class="w-full"
+            :disabled="true"
+          >
+            <el-option
+              v-for="item in channelModeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-scrollbar>
+      </el-form-item>
+      <div class="flex-1" />
+    </div>
+  </section>
+</template>

package/src/components/Channel/ConfigInteraction.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.interactive.enable')
+</script>
+
+<template>
+  <section>
+    <el-form-item :label="$t('EventChannel.form.label.enable')" v-bind="enableAttrs">
+      <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+  </section>
+</template>

package/src/components/Channel/ConfigNameModifier.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+const [nameModifierValue, nameModifierAttrs] = useElField<string>('channelConfig.nameModifier', [
+  { required: true, message: t('channel.name_modifier_is_required'), trigger: ['blur', 'change'] },
+])
+</script>
+
+<template>
+  <el-form-item label="Name modifier" v-bind="nameModifierAttrs">
+    <el-input
+      v-model="nameModifierValue" :placeholder="$t('channel.replaced_name')" :minlength="1"
+      :maxlength="50" show-word-limit
+    />
+  </el-form-item>
+</template>

package/src/components/Channel/ConfigOptionItem.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { Check, Plus } from '@element-plus/icons-vue'
+
+const props = defineProps<{
+  mode?: 'add' | 'edit'
+  initialKey?: string
+  initialValue?: string
+  add: (key: string, value: string) => boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: [oldKey: string, newKey: string, newValue: string]
+}>()
+
+const { t } = useI18n()
+
+const formRef = ref<FormInstance>()
+const form = reactive({
+  key: props.initialKey || '',
+  value: props.initialValue || '',
+})
+
+const rules: FormRules = {
+  key: [
+    { required: true, message: t('Channel.form.validate.requiredKey'), trigger: 'blur' },
+    {
+      pattern: /^[a-z]+$/i,
+      message: t('transcode.key_includes_valid_characters_a-z_a-z'),
+      trigger: 'blur',
+    },
+  ],
+  value: [
+    { required: true, message: t('Channel.form.validate.requiredValue'), trigger: 'blur' },
+    {
+      pattern: /^[\w-]{0,200}$/,
+      message: t('transcode.value_includes_valid_characters_a-z_a-z_0-9_-'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+async function handleSubmit(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const success = props.add(form.key, form.value)
+      if (success) {
+        form.key = ''
+        form.value = ''
+        formEl.resetFields()
+      }
+    }
+  })
+}
+
+function handleKeyInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = input.value.replace(/[^a-z]/gi, '')
+  form.key = input.value
+}
+
+function handleValueInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = input.value.replace(/[^\w-]/g, '')
+  form.value = input.value
+}
+</script>
+
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+  >
+    <div class="flex items-start gap-2">
+      <el-form-item prop="key" class="w-full">
+        <el-input
+          v-model.trim="form.key"
+          :placeholder="$t('Channel.form.validate.requiredKey')"
+          maxlength="50"
+          show-word-limit
+          class="w-full"
+        />
+      </el-form-item>
+      <el-form-item prop="value" class="w-full">
+        <el-input
+          v-model.trim="form.value"
+          :placeholder="$t('Channel.form.validate.requiredValue')"
+          maxlength="200"
+          show-word-limit
+          class="w-full"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :disabled="props.disabled"
+          type="primary"
+          :icon="props.mode === 'edit' ? Check : Plus"
+          @click="handleSubmit(formRef)"
+        >
+          {{ props.mode === 'edit' ? $t('Actions.edit') : $t('Actions.add') }}
+        </el-button>
+      </el-form-item>
+    </div>
+  </el-form>
+</template>
+
+<style scoped>
+</style>

package/src/components/Channel/ConfigOptions.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { Delete, Edit } from '@element-plus/icons-vue'
+import type { FormRules } from 'element-plus'
+import ConfigOptionItem from './ConfigOptionItem.vue'
+
+const [optionValue, optionAttrs] = useElField('channelConfig.option', {})
+
+const formRef = ref<FormInstance>()
+const { t } = useI18n()
+const editDialogVisible = ref(false)
+const editingKey = ref('')
+const editForm = reactive({
+  key: '',
+  value: '',
+})
+
+const rules: FormRules = {
+  key: [
+    { required: true, message: t('Channel.form.validate.requiredKey'), trigger: 'blur' },
+    {
+      pattern: /^[a-z]+$/i,
+      message: t('transcode.key_includes_valid_characters_a-z_a-z'),
+      trigger: 'blur',
+    },
+  ],
+  value: [
+    { required: true, message: t('Channel.form.validate.requiredValue'), trigger: 'blur' },
+    {
+      pattern: /^[\w-]{0,200}$/,
+      message: t('transcode.value_includes_valid_characters_a-z_a-z_0-9_-'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+function handleAdd(key: string, value: string) {
+  if (optionValue.value[key]) {
+    ElMessage.error(t('transcode.key_already_exists'))
+    return false
+  }
+  optionValue.value = { [key]: value, ...optionValue.value }
+  return true
+}
+
+function openEditDialog(key: string, value: string) {
+  editingKey.value = key
+  editForm.key = key
+  editForm.value = value
+  editDialogVisible.value = true
+}
+
+function editObjectKeyValue(obj: any, oldKey: string, newKey: string, newValue: string) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) =>
+      key === oldKey ? [newKey, newValue] : [key, value],
+    ),
+  )
+}
+
+async function handleEdit(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (editingKey.value !== editForm.key && optionValue.value[editForm.key]) {
+        ElMessage.error(t('transcode.key_already_exists'))
+        return
+      }
+      optionValue.value = editObjectKeyValue({ ...optionValue.value }, editingKey.value, editForm.key, editForm.value)
+      editDialogVisible.value = false
+    }
+  })
+}
+
+function handleKeyInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = input.value.replace(/[^a-z]/gi, '')
+  editForm.key = input.value
+}
+
+function handleValueInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = input.value.replace(/[^\w-]/g, '')
+  editForm.value = input.value
+}
+
+function handleDelete(key: string) {
+  ElMessageBox.confirm(
+    t('transcode.are_you_sure_you_want_to_delete_this_option'),
+    t('SSConfig.message.warning'),
+    {
+      confirmButtonText: 'Xóa',
+      cancelButtonText: 'Hủy',
+      type: 'warning',
+    },
+  ).then(() => {
+    const newOptions = { ...optionValue.value }
+    delete newOptions[key]
+    optionValue.value = newOptions
+  }).catch(() => {})
+}
+
+const optionEntries = computed(() => Object.entries(optionValue.value))
+</script>
+
+<template>
+  <section>
+    <ConfigOptionItem :add="handleAdd" :disabled="optionEntries?.length >= 20" />
+
+    <el-table :data="optionEntries" class="mt-4">
+      <el-table-column label="No." type="index" width="50" />
+      <el-table-column label="Key" prop="0" />
+      <el-table-column label="Value" prop="1" />
+      <el-table-column width="160">
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            circle
+            class="mr-2"
+            @click="() => openEditDialog(row[0], row[1])"
+          >
+            <el-icon><Edit /></el-icon>
+          </el-button>
+          <el-button
+            type="danger"
+            circle
+            @click="() => handleDelete(row[0])"
+          >
+            <el-icon><Delete /></el-icon>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      v-model="editDialogVisible"
+      :title="$t('transcode.edit_option')"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="editForm"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="Key" prop="key">
+          <el-input
+            v-model="editForm.key"
+            :placeholder="$t('Channel.form.validate.requiredKey')"
+            maxlength="50"
+            show-word-limit
+            @input="handleKeyInput"
+          />
+        </el-form-item>
+
+        <el-form-item label="Value" prop="value">
+          <el-input
+            v-model="editForm.value"
+            :placeholder="$t('Channel.form.validate.requiredValue')"
+            maxlength="200"
+            show-word-limit
+            @input="handleValueInput"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="formRef?.resetFields(), editDialogVisible = false">
+          {{ $t('Actions.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="handleEdit(formRef)">
+          {{ $t('Actions.save') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<style scoped>
+</style>