@sigmaott/base-next 1.4.13 → 1.4.15

package/locales/en.yaml

@@ -488,7 +488,7 @@ fast_channel:
   no_input: No Input
   select_vod: Select VOD
 forensic:
-  enter_the_wm_in_hexadecimal_format_e_g_0x64: Enter the WM (in hexadecimal format, e.g. 0x64)
+  enter_the_wm_in_hexadecimal_format_e_g_0x64: WM value exceeds maximum length allowed by bit length.
   type_is_required: Type is required
   wm_is_required: wm is required
 form:

package/locales/vi.yaml

@@ -491,7 +491,7 @@ fast_channel:
   no_input: Không có đầu vào
   select_vod: Chọn VOD
 forensic:
-  enter_the_wm_in_hexadecimal_format_e_g_0x64: 'Nhập WM (ở định dạng thập lục phân, ví dụ: 0x64)'
+  enter_the_wm_in_hexadecimal_format_e_g_0x64: Giá trị WM vượt quá độ dài tối đa cho phép theo độ dài bit.
   type_is_required: Loại là bắt buộc
   wm_is_required: wm  là bắt buộc
 form:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sigmaott/base-next",
   "type": "module",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Channel/ConfigForensicWatermark.vue

@@ -1,35 +1,52 @@
 <script setup lang="ts">
+const showModel = ref(false)
+const formRef = ref()
+const { formRef: formForensicRef } = useElFormContext()
+const formPathValue = ref({
+  path: '',
+})
 const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ForensicWatermarkConfigDto')
-const { formRef: formRefForensicWatermark } = useElFormContext()
+
 const { t } = useI18n()
+const { formValue } = useElFormContext()
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent })
+const input = computed(() => transcodeInput.value || packageInput.value)
 
 const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
-const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.forensicWatermarkConfig.enable', [
-  // {
-  //   validator: (rule, value, callback) => {
-  //     if (value && encoderIdValue.value === -1)
-  //       callback(new Error(t('SSConfig.this_feature_is_only_supported_when_using_nvenc_please_switch_to_nvenc_or_disable_the_feature_to_continue')))
-  //     callback()
-  //   },
-  //   trigger: ['blur', 'change'],
-  // },
-])
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.forensicWatermarkConfig.enable', [])
+const [forensicValue] = useElField<boolean>('channelConfig.forensicWatermarkConfig', [])
+
+const [modelValue, modelAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.infoModel.path', [
+  {
+    required: true,
+    message: t('channel.model_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
 const [typeValue, typeAttrs] = useElField<string>('channelConfig.forensicWatermarkConfig.type', {
-  required: true,
   message: t('forensic.type_is_required'),
+  required: false,
 }, { enabled: enableValue })
 const [wmValue, wmAttrs] = useElField<string>('channelConfig.forensicWatermarkConfig.wm', [{
   message: t('forensic.wm_is_required'),
   required: true,
 }, {
   validator: (rule, value, callback) => {
-    if (!/^0x[a-fA-F0-9]{1,32}$/.test(value))
+    const bitLength = forensicValue.value?.infoModel?.bit || 32
+    const hexLimit = Math.ceil(bitLength / 4)
+
+    const regex = new RegExp(`^0x[a-fA-F0-9]{1,${hexLimit}}$`)
+    if (!regex.test(value))
       callback(new Error(t('forensic.enter_the_wm_in_hexadecimal_format_e_g_0x64')))
     else
       callback()
   },
   trigger: ['blur', 'change'],
 }], { enabled: enableValue })
+const [wmBValue] = useElField<string>('channelConfig.forensicWatermarkConfig.wmB', [])
 const [crcValue, crcAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.crc', {
   required: false,
 }, { enabled: enableValue })
@@ -43,16 +60,193 @@ const [bchValue, bchAttrs] = useElField<number>('channelConfig.forensicWatermark
   required: false,
 }, { enabled: enableValue })
 
-onMounted(() => {
-  formRefForensicWatermark.value.validateField('channelConfig.forensicWatermarkConfig.enable')
-})
+const loadPathEventMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/pte/load-forensic-watermark-models', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathPlayoutMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/ai-model/load-forensic-watermark-models', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const listConfigWatermark = ref([])
+const loadedPath = ref()
+async function onLoadPath() {
+  formRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
+        machineConfig: {
+          machineId: input.value?.machineConfig.machineId,
+          machineType: input.value?.machineConfig.machineType,
+          mode: input.value?.machineConfig.mode,
+          specMachineId: input.value?.machineConfig.specMachineId || undefined,
+        },
+        path: formPathValue.value.path,
+      })
+      console.log(rs)
+      loadedPath.value = formPathValue.value.path
+      ElMessage.success(t('base_library.load_path_successfully'))
+      if (rs?.length > 0) {
+        listConfigWatermark.value = rs
+      }
+      else {
+        listConfigWatermark.value = []
+      }
+
+      // showModel.value = false
+      // formPathValue.value.path = ''
+    }
+  })
+}
+
+function onShowModel() {
+  if (!input.value) {
+    ElMessage({
+      message: t('Transcoder.please_configure_the_input'),
+      type: 'warning',
+    })
+    return
+  }
+  showModel.value = true
+}
+
+const defaultTableForensic = ref([
+  {
+    type: 'a/b',
+    wm: '0xff',
+    alpha: 0.15,
+    crc: -1,
+    step: 3,
+    bch: 1,
+  },
+])
+
+async function handleSelectConfig(id: string) {
+  const config = listConfigWatermark.value.find(item => item.id === id)
+  console.log('🚀 ~ handleSelectConfig ~ config:', config)
+
+  if (config) {
+    forensicValue.value.model = config.model
+    forensicValue.value.name = config.name
+    forensicValue.value.bit = config.bit
+    forensicValue.value.id = config.id
+    forensicValue.value.infoModel = config
+
+    typeValue.value = defaultTableForensic.value[0].type
+    wmValue.value = config.wm || defaultTableForensic.value[0].wm
+    wmBValue.value = config.wmB || defaultTableForensic.value[0].wmB
+    alphaValue.value = config.alpha || defaultTableForensic.value[0].alpha
+    crcValue.value = config.crc || defaultTableForensic.value[0].crc
+    stepValue.value = config.step || defaultTableForensic.value[0].step
+    bchValue.value = config.bch || defaultTableForensic.value[0].bch
+
+    defaultTableForensic.value[0].wm = config.wm
+    defaultTableForensic.value[0].wmB = config.wmB
+    defaultTableForensic.value[0].alpha = config.alpha
+    defaultTableForensic.value[0].crc = config.crc
+    defaultTableForensic.value[0].step = config.step
+    defaultTableForensic.value[0].bch = config.bch
+
+    formPathValue.value.path = ''
+    loadedPath.value = ''
+    listConfigWatermark.value = []
+    showModel.value = false
+  }
+  else {
+    ElMessage.error($t('base_library.please_select_a_model'))
+    // ElMessage.error({
+    //   dangerouslyUseHTMLString: true,
+    //   message: $t('base_library.feature_mismatch_the_path_cannot_be_used_with_feature-name', ['<strong>Ads detect</strong>']),
+    // })
+  }
+  formForensicRef.value?.validateField('channelConfig.forensicWatermarkConfig.wm')
+}
+const currentRowId = ref()
+
+const optionsType = ref([
+  {
+    label: 'Normal',
+    value: 'normal',
+  },
+  {
+    label: 'A/B',
+    value: 'a/b',
+  },
+])
+const optionsCrc = ref([
+  {
+    label: -1,
+    value: -1,
+  },
+  {
+    label: 0,
+    value: 0,
+  },
+  {
+    label: 8,
+    value: 8,
+  },
+
+  {
+    label: 16,
+    value: 16,
+  },
+])
+const optionsStep = ref([
+  {
+    label: 1,
+    value: 1,
+  },
+  {
+    label: 2,
+    value: 2,
+  },
+  {
+    label: 3,
+    value: 3,
+  },
+])
+const optionsBch = ref([
+  {
+    label: 0,
+    value: 0,
+  },
+  {
+    label: 1,
+    value: 1,
+  },
+])
+
+function handleChangeType(value: string) {
+  if (value === 'a/b') {
+    wmValue.value = defaultTableForensic.value[0].wm
+    alphaValue.value = defaultTableForensic.value[0].alpha
+  }
+}
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-48px">
-    <el-form-item class="w-130px">
+  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
+    <el-form-item>
       <template #label>
-        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObj.enable" />
+        <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaObj.enable" />
       </template>
       <el-switch
         v-model="enableValue"
@@ -61,92 +255,218 @@ onMounted(() => {
         :disabled="encoderIdValue === -1 && !enableValue"
       />
     </el-form-item>
-    <el-form-item label="Type" v-bind="typeAttrs" class="min-w-80px flex-1">
-      <template #label>
-        <SSInformationLabel label="Type" :info="schemaObj.type" />
-      </template>
-      <el-select
-        v-model="typeValue"
+    <el-form-item v-bind="modelAttrs" class="w-80px">
+      <el-input v-model="modelValue" class="hidden" />
+      <el-button
+        class="w-full"
+        type="primary"
         :disabled="!enableValue"
+        @click="onShowModel"
       >
-        <el-option
-          v-for="item in ['normal', 'a/b']"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
+        {{ $t('transcode.load') }}
+      </el-button>
     </el-form-item>
-    <el-form-item v-bind="wmAttrs" class="flex-1/5">
-      <template #label>
-        <SSInformationLabel label="wm" :info="schemaObj.wm" />
-      </template>
-      <el-input
-        v-model.trim="wmValue"
-        placeholder="Hex (e.g. 0x64)"
-      />
-    </el-form-item>
-    <el-form-item label="crc" v-bind="crcAttrs" class="flex-1">
-      <template #label>
-        <SSInformationLabel label="crc" :info="schemaObj.crc" />
-      </template>
-      <el-select
-        v-model="crcValue"
-        :disabled="!enableValue"
-      >
-        <el-option
-          v-for="item in [-1, 0, 8, 16]"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
+    <el-form-item v-if="forensicValue?.infoModel?.path" label="Path Model">
+      <el-text>{{ forensicValue?.infoModel?.path }}</el-text>
     </el-form-item>
-    <el-form-item label="step" v-bind="stepAttrs" class="flex-1">
-      <template #label>
-        <SSInformationLabel label="step" :info="schemaObj.step" />
-      </template>
-      <el-select
-        v-model="stepValue"
-        placeholder="Select"
-        :disabled="!enableValue"
+  </div>
+  <template v-if="modelValue">
+    <div class="grid grid-cols-[2fr_2fr_2fr_2fr] gap-2">
+      <el-form-item label="Model" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Model" :info="schemaObj?.model" />
+        </template>
+        <SSTooltipEllipsis :content="forensicValue?.infoModel?.model" />
+      </el-form-item>
+      <el-form-item label="Name" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Name" :info="schemaObj?.action" />
+        </template>
+        <el-text>{{ forensicValue?.infoModel?.name }}</el-text>
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <SSInformationLabel label="Model ID" :info="schemaObj?.model" />
+        </template>
+        <el-text truncate>
+          {{ forensicValue?.infoModel?.id }}
+        </el-text>
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <SSInformationLabel label="Bit length" :info="schemaObj?.bit" />
+        </template>
+        <el-text truncate>
+          {{ forensicValue?.infoModel?.bit }}
+        </el-text>
+      </el-form-item>
+    </div>
+    <el-table :data="defaultTableForensic || []" border style="width: 100%">
+      <el-table-column prop="type" label="Type">
+        <template #header>
+          <SSInformationLabel label="Type" :info="schemaObj?.type" />
+        </template>
+        <template #default="{ row }">
+          <el-select
+            v-model="typeValue"
+            placeholder="Select"
+            :disabled="!enableValue"
+            @change="handleChangeType"
+          >
+            <el-option
+              v-for="item in optionsType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="wm" label="wm">
+        <template #header>
+          <SSInformationLabel label="wm" :info="schemaObj?.wm" />
+        </template>
+        <template #default="{ row }">
+          <el-form-item v-bind="wmAttrs" class="pt-2 [&_.el-form-item\_\_label]:hidden [&_.el-input-number]:!w-full">
+            <el-input
+              v-model.trim="wmValue"
+              :disabled="typeValue !== 'normal' || !enableValue"
+              :placeholder="t('forensic.enter_the_wm_in_hexadecimal_format_e_g_0x64')"
+            />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column prop="alpha" label="alpha">
+        <template #header>
+          <SSInformationLabel label="alpha" :info="schemaObj?.alpha" />
+        </template>
+        <template #default="{ row }">
+          <el-input-number
+            v-model="alphaValue"
+            controls-position="right"
+            :min="0.05"
+            :max="0.3"
+            :precision="2"
+            :step="0.01"
+            :disabled="typeValue !== 'normal' || !enableValue"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="crc" label="crc">
+        <template #header>
+          <SSInformationLabel label="crc" :info="schemaObj?.crc" />
+        </template>
+        <template #default="{ row }">
+          <el-select v-model="crcValue" placeholder="Select" :disabled="!enableValue">
+            <el-option
+              v-for="item in optionsCrc"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="step" label="step ">
+        <template #header>
+          <SSInformationLabel label="step" :info="schemaObj?.step" />
+        </template>
+        <template #default="{ row }">
+          <el-select v-model="stepValue" placeholder="Select" :disabled="!enableValue">
+            <el-option
+              v-for="item in optionsStep"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bch" label="bch">
+        <template #header>
+          <SSInformationLabel label="bch" :info="schemaObj?.bch" />
+        </template>
+        <template #default="{ row }">
+          <el-select v-model="bchValue" placeholder="Select" :disabled="!enableValue">
+            <el-option
+              v-for="item in optionsBch"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+  <el-dialog v-model="showModel" width="700" destroy-on-close>
+    <el-form
+      ref="formRef"
+      :model="formPathValue"
+      label-width="auto"
+      @submit.prevent
+    >
+      <el-form-item
+        prop="path"
+        :rules="[
+          {
+            required: true,
+            message: $t('transcode.please_input_path_model'),
+            trigger: ['blur', 'change'],
+          },
+        ]"
       >
-        <el-option
-          v-for="item in [1, 2, 3]"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="alpha" v-bind="alphaAttrs" class="flex-1">
-      <template #label>
-        <SSInformationLabel label="alpha" :info="schemaObj.alpha" />
-      </template>
-      <el-input-number
-        v-model="alphaValue"
-        :min="0.05"
-        :max="0.30"
-        :step="0.01"
-        :precision="2"
-        :disabled="!enableValue"
-      />
-    </el-form-item>
-    <el-form-item label="bch" v-bind="bchAttrs" class="flex-1">
-      <template #label>
-        <SSInformationLabel label="bch" :info="schemaObj.bch" />
-      </template>
-      <el-select
-        v-model="bchValue"
-        :disabled="!enableValue"
+        <template #label>
+          <SSInformationLabel :label="$t('transcode.path_model')" :info="schemaObj.model" />
+        </template>
+        <div class="w-full flex justify-between gap-2">
+          <el-input v-model="formPathValue.path" :placeholder="$t('example_path_to_model')" />
+          <el-button type="primary" @click="onLoadPath">
+            {{ $t('transcode.load') }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <div class="mt-4 text-14px text-#606266 font-bold dark:text-#CFD3DC">
+      {{ $t('library.model_list') }}
+    </div>
+    <div>
+      {{ $t('base_library.loaded_from') }}: <span class="font-bold">{{ loadedPath }}</span>
+    </div>
+    <el-radio-group v-model="currentRowId" class="w-full">
+      <el-table
+        row-key="id"
+        :current-row-key="currentRowId"
+        :data="listConfigWatermark"
+        border
+        :empty-text
+        @row-click="(row) => currentRowId = row.id"
       >
-        <el-option
-          v-for="item in [0, 1]"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
-    </el-form-item>
-  </div>
+        <el-table-column label="#" width="40">
+          <template #default="{ row }">
+            <el-radio :label="row.id">
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="Name" />
+        <el-table-column prop="path" label="Path" show-overflow-tooltip />
+        <el-table-column align="center" prop="bit" label="Bit length" />
+      </el-table>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :disabled="!currentRowId" type="primary" @click="handleSelectConfig(currentRowId)">
+          {{ $t('base_library.select') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
+
+<style scoped>
+.el-input-number {
+  width: 100%;
+}
+</style>