@sigmaott/base-next 1.0.6

package/src/components/Channel/ConfigBlackout.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import service from '@/api/axios'
+import { ASSET_DEV_URL } from '@/constants'
+
+const { t } = useI18n()
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'BlackoutSlateDto')
+
+const assetSrc = ref('')
+
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.blackout.enable')
+const [assetIdValue, assetIdAttrs] = useElField<string>('channelConfig.blackout.assetId', [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    asyncValidator: (rule, value) => {
+      return new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error(t('SSConfig.form.validate.requireBlackout')))
+        }
+        else {
+          $libraryApi('api/library/assets/{id}', { pathParams: { id: value } })
+            .then(resolve).catch(() => {
+              reject(new Error(t('SSConfig.asset_not_found')))
+            })
+        }
+      })
+    },
+  },
+], { enabled: enableValue })
+
+function deleteAsset() {
+  ElMessageBox.confirm(t('SSConfig.message.confirmDeleteAsset'), t('SSConfig.message.warning'), {
+    confirmButtonText: t('Actions.ok'),
+    cancelButtonText: t('Actions.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      assetIdValue.value = ''
+      assetSrc.value = ''
+    })
+}
+</script>
+
+<template>
+  <section>
+    <el-row :gutter="12">
+      <el-col :span="4">
+        <el-form-item v-bind="enableAttrs">
+          <template #label>
+            <SSInformationLabel :label="$t('SSConfig.enable_label')" :info="schemaObj.enable" />
+          </template>
+          <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="20">
+        <el-form-item
+          :required="enableValue"
+          :show-message="enableValue"
+          v-bind="assetIdAttrs"
+          l
+          class="![&_.el-form-item\_\_error]:ml-2"
+        >
+          <template #label>
+            <SSInformationLabel label="Asset" :info="schemaObj.assetId" />
+          </template>
+          <SSAssetPicker
+            v-model="assetIdValue"
+            v-model:asset-src="assetSrc"
+            :disabled="!enableValue"
+            :limit="['image', 'video']"
+            :axios-instance="service"
+            :asset-domain="ASSET_DEV_URL"
+          />
+          <Transition v-if="enableValue" name="el-zoom-in-center">
+            <template v-if="assetIdValue">
+              <div class="flex p-4">
+                <SSAssetPreview :src="assetSrc" type="image" />
+                <el-button
+                  type="danger"
+                  :disabled="!enableValue"
+                  circle
+                  plain
+                  size="default"
+                  class="translate-[calc(-50%)]"
+                  @click="deleteAsset()"
+                >
+                  <template #icon>
+                    <div class="i-ep:close" />
+                  </template>
+                </el-button>
+              </div>
+            </template>
+          </Transition>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </section>
+</template>

package/src/components/Channel/ConfigCensorship.vue

@@ -0,0 +1,387 @@
+<script setup lang="ts">
+const showModel = ref(false)
+const formRef = ref()
+const formPathValue = ref({
+  path: '',
+})
+
+const { formValue } = useElFormContext()
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const { formRef: formRefCensorship } = useElFormContext()
+const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent })
+const input = computed(() => transcodeInput.value || packageInput.value)
+
+const { schemaObj: schemaObjCensorshipInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipInfo')
+const { schemaObj: schemaObjCensorshipConfigInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipConfigDTO')
+
+const { t } = useI18n()
+
+const [censorshipValue, censorshipAttrs] = useElField<boolean>('channelConfig.censorship')
+const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.censorship.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 [machineConfigValue] = useElField<boolean>('channelConfig.machineConfig')
+const [modelValue, modelAttrs] = useElField<number>('channelConfig.censorship.model', [
+  {
+    required: true,
+    message: t('channel.model_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [scoreValue, scoreAttrs] = useElField<number>('channelConfig.censorship.score', [], { enabled: enableValue })
+
+onMounted(() => {
+  formRefCensorship.value.validateField('channelConfig.censorship.enable')
+})
+
+const loadPathEventMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/channel-configs/load-ads', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathPlayoutMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/channel-configs/load-ads', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const listSrcImagePath = ref()
+
+const listIconPath = computed(() => {
+  return censorshipValue.value?.data?.map(item => item?.imagePath)
+})
+
+watch([listIconPath, input], async (val) => {
+  if (val?.[0]?.length > 0 && val?.[1]) {
+    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
+
+    const data = await Promise.all(promisesImage)
+    listSrcImagePath.value = data.map(item => item.data)
+  }
+}, { deep: true, immediate: true })
+
+function getPromiseBase64(arrPath: string[]) {
+  let serverConfig
+
+  if (isPlayout.value || isEvent.value) {
+    serverConfig = {
+      machineId: machineConfigValue.value?.machineId,
+      machineType: machineConfigValue.value?.machineType,
+      mode: machineConfigValue.value?.mode,
+    }
+  }
+  else {
+    serverConfig = {
+      machineId: input.value?.machineConfig?.machineId,
+      machineType: input.value?.machineConfig?.machineType,
+      mode: input.value?.machineConfig?.mode,
+      specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+    }
+  }
+  return arrPath.map(async (item) => {
+    return isEvent.value
+      ? await $transcodeApi('/api/transcode/channel-configs/read-file', {
+        body: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+          path: item,
+          base: 'base64',
+        },
+        method: 'POST',
+      })
+      : await $playoutApi('/api/playout/channel-configs/read-file', {
+        body: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+          path: item,
+          base: 'base64',
+        },
+        method: 'POST',
+      })
+  })
+}
+
+const listConfigAds = ref([])
+const loadedPath = ref()
+async function onLoadPath() {
+  formRef.value.validate(async (valid: boolean) => {
+    let serverConfig
+
+    if (isPlayout.value || isEvent.value) {
+      serverConfig = {
+        machineId: machineConfigValue.value?.machineId,
+        machineType: machineConfigValue.value?.machineType,
+        mode: machineConfigValue.value?.mode,
+      }
+    }
+    else {
+      serverConfig = {
+        machineId: input.value?.machineConfig?.machineId,
+        machineType: input.value?.machineConfig?.machineType,
+        mode: input.value?.machineConfig?.mode,
+        specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+      }
+    }
+    if (valid) {
+      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
+        machineConfig: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.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?.results?.length > 0) {
+        listConfigAds.value = rs.results.filter(item => item.action === 'detect').map(item => ({ ...item, id: genUUID() }))
+      }
+      else {
+        listConfigAds.value = []
+      }
+    }
+  })
+}
+
+function onShowModel() {
+  if (!input.value) {
+    ElMessage({
+      message: t('Transcode.please_configure_the_input'),
+      type: 'warning',
+    })
+    return
+  }
+  showModel.value = true
+}
+
+const selectedConfig = ref()
+async function handleSelectConfig(config) {
+  if (config && config.action === 'detect') {
+    censorshipValue.value.action = config.action
+    censorshipValue.value.type = config.type
+    censorshipValue.value.score = config.score
+    censorshipValue.value.pathModel = formPathValue.value.path
+    modelValue.value = config.path
+    censorshipValue.value.data = config.items.map((item) => {
+      if (config.action === 'detect') {
+        return {
+          ...item,
+          enable: true,
+          imagePath: item.icon,
+        }
+      }
+    })
+
+    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
+    const data = await Promise.all(promisesImage)
+    listSrcImagePath.value = data.map(item => item.data)
+
+    showModel.value = false
+    formPathValue.value.path = ''
+    loadedPath.value = ''
+    listConfigAds.value = []
+  }
+  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>']),
+    // })
+  }
+}
+const currentRowId = ref()
+</script>
+
+<template>
+  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
+    <el-form-item v-bind="enableAttrs" class="w-130px">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObjCensorshipInfo.enable" />
+      </template>
+      <el-switch
+        v-model="enableValue"
+        :active-value="true"
+        :inactive-value="false"
+        :disabled="encoderIdValue === -1 && !enableValue"
+      />
+    </el-form-item>
+    <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"
+      >
+        {{ $t('transcode.load') }}
+      </el-button>
+    </el-form-item>
+    <el-form-item v-if="censorshipValue?.pathModel" label="Path Model">
+      <el-text>{{ censorshipValue?.pathModel }}</el-text>
+    </el-form-item>
+  </div>
+  <template v-if="censorshipValue?.model">
+    <div class="grid grid-cols-[2fr_2fr_4fr_8fr] gap-2">
+      <el-form-item label="Type" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Type" :info="schemaObjCensorshipInfo.type" />
+        </template>
+        <el-text>{{ censorshipValue?.type }}</el-text>
+      </el-form-item>
+      <el-form-item label="Action" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Action" :info="schemaObjCensorshipInfo.action" />
+        </template>
+        <el-text>{{ censorshipValue?.action }}</el-text>
+      </el-form-item>
+      <el-form-item label="Score" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Score" :info="schemaObjCensorshipConfigInfo.score" />
+        </template>
+        <el-input-number
+          v-model="scoreValue"
+          controls-position="right"
+          :min="0"
+          :max="1"
+          :precision="2"
+          :step="0.05"
+          :disabled="!enableValue"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <SSInformationLabel label="Model" :info="schemaObjCensorshipInfo.model" />
+        </template>
+        <el-text truncate>
+          {{ censorshipValue?.model }}
+        </el-text>
+      </el-form-item>
+    </div>
+    <el-table :data="censorshipValue?.data || []" border style="width: 100%">
+      <el-table-column prop="enable" label="On/off item" align="center">
+        <template #default="{ row }">
+          <el-switch
+            v-model="row.enable"
+            :disabled="!enableValue"
+            :active-value="true"
+            :inactive-value="false"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="ID" min-width="90">
+        <template #default="{ row, $index }">
+          <div class="flex items-center">
+            <el-avatar
+              class="mr-3"
+              :size="32"
+              :src="listSrcImagePath?.[$index]"
+            />
+            <span class="text-large font-600"> {{ row.id }} </span>
+          </div>
+        </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'],
+          },
+        ]"
+      >
+        <template #label>
+          <SSInformationLabel :label="$t('transcode.path_model')" :info="schemaObjCensorshipConfigInfo.model" />
+        </template>
+        <div class="w-full flex justify-between gap-2">
+          <el-input v-model="formPathValue.path" :placeholder="$t('base_library.example_path_to_model')" />
+          <el-button type="primary" @click="onLoadPath">
+            {{ $t('SSConfig.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="listConfigAds"
+        border
+      >
+        <template #empty>
+          {{ loadedPath ? $t('base_library.no_model_not_found') : $t('base.no_data') }}
+        </template>
+        <el-table-column
+          label="#"
+          width="55"
+        >
+          <template #default="{ row }">
+            <el-radio :label="row.id" @click="selectedConfig = row">
+            &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>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :disabled="!currentRowId" type="primary" @click="handleSelectConfig(selectedConfig)">
+          {{ $t('base_library.select') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

package/src/components/Channel/ConfigForensicWatermark.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ForensicWatermarkConfigDto')
+const { formRef: formRefForensicWatermark } = useElFormContext()
+const { t } = useI18n()
+
+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 [typeValue, typeAttrs] = useElField<string>('channelConfig.forensicWatermarkConfig.type', {
+  required: true,
+  message: t('forensic.type_is_required'),
+}, { 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))
+      callback(new Error(t('forensic.enter_the_wm_in_hexadecimal_format_e_g_0x64')))
+    else
+      callback()
+  },
+  trigger: ['blur', 'change'],
+}], { enabled: enableValue })
+const [crcValue, crcAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.crc', {
+  required: false,
+}, { enabled: enableValue })
+const [stepValue, stepAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.step', {
+  required: false,
+}, { enabled: enableValue })
+const [alphaValue, alphaAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.alpha', {
+  required: false,
+}, { enabled: enableValue })
+const [bchValue, bchAttrs] = useElField<number>('channelConfig.forensicWatermarkConfig.bch', {
+  required: false,
+}, { enabled: enableValue })
+
+onMounted(() => {
+  formRefForensicWatermark.value.validateField('channelConfig.forensicWatermarkConfig.enable')
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-48px">
+    <el-form-item v-bind="enableAttrs" class="w-130px">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObj.enable" />
+      </template>
+      <el-switch
+        v-model="enableValue"
+        :active-value="true"
+        :inactive-value="false"
+        :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"
+        :disabled="!enableValue"
+      >
+        <el-option
+          v-for="item in ['normal', 'a/b']"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+    </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>
+    <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"
+      >
+        <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"
+      >
+        <el-option
+          v-for="item in [0, 1]"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+    </el-form-item>
+  </div>
+</template>