@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/ConfigPte.vue

@@ -1,368 +1,368 @@
-<script setup lang="ts">
-const emit = defineEmits(['changeGlobalPte'])
-
-const showModel = ref(false)
-const formRef = ref()
-
-const { schemaObj: schemaObjAdsInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'AdsInfo')
-const { schemaObj: schemaObjAdsDetectConfigDTO } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'AdsDetectConfigDTO')
-
-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 { t } = useI18n()
-const recommendConfig = ref({
-  bframe: undefined,
-  cq_max: undefined,
-  cq_min: undefined,
-  encoder: 'undefined',
-  format: undefined,
-  fps: undefined,
-  lookahead: undefined,
-  maxrate: undefined,
-  model: undefined,
-  name: undefined,
-  preset: undefined,
-  profile: undefined,
-  result: undefined,
-  scale: undefined,
-  step: undefined,
-})
-const { formRef: formRefPte } = useElFormContext()
-const [pteValue] = useElField<boolean>('channelConfig.pte')
-const [inputsValue] = useElField<boolean>('inputs')
-const [machineConfigValue] = useElField<boolean>('channelConfig.machineConfig')
-const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
-const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.pte.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 [modelValue, modelAttrs] = useElField<string>('channelConfig.pte.path', [
-  {
-    required: true,
-    message: t('base_library.model_is_required'),
-    trigger: ['blur', 'change'],
-  },
-], { enabled: enableValue })
-const formPathValue = ref({
-  path: klona(modelValue.value),
-})
-
-onMounted(() => {
-  formRefPte.value.validateField('channelConfig.pte.enable')
-})
-const loadPathEventMutation = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $transcodeApi('/api/transcode/pte/pte-info-model', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-const loadPathPlayoutMutation = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $playoutApi('/api/playout/pte/pte-info-model', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-watchImmediate(modelValue, async () => {
-  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 (modelValue.value) {
-    const rs = modelValue.value
-      ? await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
-        machineConfig: {
-          machineId: serverConfig?.machineId,
-          machineType: serverConfig?.machineType,
-          mode: serverConfig?.mode,
-          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-        },
-        path: modelValue.value,
-      })
-      : ''
-    recommendConfig.value = rs
-  }
-})
-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 && pteValue.value?.enable) {
-      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
-        machineConfig: {
-          machineId: serverConfig?.machineId,
-          machineType: serverConfig?.machineType,
-          mode: serverConfig?.mode,
-          specMachineId: serverConfig?.specMachineId || undefined,
-        },
-        path: formPathValue.value.path,
-      })
-
-      console.log(rs)
-      recommendConfig.value = rs
-      modelValue.value = formPathValue.value.path
-
-      showModel.value = false
-    }
-  })
-}
-
-function onShowModel() {
-  if (!isPlayout.value && !isEvent.value) {
-    if (!input.value?.machineConfig?.machineId) {
-      ElMessage({
-        message: t('base_library.please_select_input'),
-        type: 'warning',
-      })
-      return
-    }
-    showModel.value = true
-  }
-  else {
-    if (isEvent.value && inputsValue.value?.main?.inputType === 'ASSET') {
-      showModel.value = true
-    }
-    else if (!machineConfigValue.value?.machineId) {
-      ElMessage({
-        message: t('base_library.please_select_server'),
-        type: 'warning',
-      })
-      return
-    }
-    showModel.value = true
-  }
-}
-
-function handleClose() {
-  formPathValue.value.path = modelValue.value
-  showModel.value = false
-}
-
-function formatNumber(number) {
-  return number?.toLocaleString('de-DE')
-}
-
-function handleChange(_newValue: boolean) {
-  if (_newValue) {
-    emit('changeGlobalPte')
-  }
-}
-</script>
-
-<template>
-  <DevOnly>
-    <VueJsonPretty :data="machineConfigValue" />
-  </DevOnly>
-  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
-    <el-form-item v-bind="enableAttrs">
-      <template #label>
-        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObjAdsInfo.enable" />
-      </template>
-      <el-switch
-        v-model="enableValue"
-        :active-value="true"
-        :inactive-value="false"
-        :disabled="encoderIdValue === -1 && !enableValue"
-        @change="handleChange"
-      />
-    </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="modelValue && enableValue" label="Path Model">
-      <el-text>{{ modelValue }}</el-text>
-    </el-form-item>
-  </div>
-  <div v-if="modelValue && enableValue && recommendConfig?.name">
-    <div class="text-base font-bold">
-      {{ $t('base_library.recommended_configuration') }}
-    </div>
-
-    <div class="grid grid-cols-5 px-4 py-2">
-      <div class="w-300px">
-        <div class="font-bold">
-          Path
-        </div>
-        <SSTooltipEllipsis :content="formPathValue.path || '-'" />
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Model
-        </div>
-        <div>{{ recommendConfig.model || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Name
-        </div>
-        <div>{{ recommendConfig.name || '-' }}</div>
-      </div>
-      <!-- <div class="w-300px">
-        <div class="font-bold">
-          Encoder
-        </div>
-        <div>{{ recommendConfig.encoder || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Codec
-        </div>
-        <div>{{ recommendConfig?.codec || '-' }}</div>
-      </div> -->
-      <div class="w-300px">
-        <div class="font-bold">
-          Profile
-        </div>
-        <div>{{ recommendConfig.profile || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Pixel format
-        </div>
-        <div>{{ recommendConfig.format || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Preset
-        </div>
-        <div>{{ recommendConfig.preset || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          FPS
-        </div>
-        <div>{{ recommendConfig.fps || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Maxrate
-        </div>
-        <div>{{ formatNumber(recommendConfig?.maxrate) || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Bframe
-        </div>
-        <div>{{ recommendConfig?.bframe || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Lookahead
-        </div>
-        <div>{{ recommendConfig.lookahead || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          cq_max
-        </div>
-        <div>{{ recommendConfig.cq_max || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          cq_min
-        </div>
-        <div>{{ recommendConfig.cq_min || '-' }}</div>
-      </div>
-      <div class="w-300px">
-        <div class="font-bold">
-          Step
-        </div>
-        <div>{{ recommendConfig.step || '-' }}</div>
-      </div>
-    </div>
-  </div>
-  <!-- </template> -->
-  <el-dialog
-    v-model="showModel"
-    width="500"
-    destroy-on-close
-    :before-close="handleClose"
-  >
-    <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="schemaObjAdsDetectConfigDTO.model" />
-        </template>
-        <el-input v-model="formPathValue.path" :placeholder="$t('SSConfig.example_path_to_model')" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="onLoadPath">
-          {{ $t('transcode.load') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
+<script setup lang="ts">
+const emit = defineEmits(['changeGlobalPte'])
+
+const showModel = ref(false)
+const formRef = ref()
+
+const { schemaObj: schemaObjAdsInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'AdsInfo')
+const { schemaObj: schemaObjAdsDetectConfigDTO } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'AdsDetectConfigDTO')
+
+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 { t } = useI18n()
+const recommendConfig = ref({
+  bframe: undefined,
+  cq_max: undefined,
+  cq_min: undefined,
+  encoder: 'undefined',
+  format: undefined,
+  fps: undefined,
+  lookahead: undefined,
+  maxrate: undefined,
+  model: undefined,
+  name: undefined,
+  preset: undefined,
+  profile: undefined,
+  result: undefined,
+  scale: undefined,
+  step: undefined,
+})
+const { formRef: formRefPte } = useElFormContext()
+const [pteValue] = useElField<boolean>('channelConfig.pte')
+const [inputsValue] = useElField<boolean>('inputs')
+const [machineConfigValue] = useElField<boolean>('channelConfig.machineConfig')
+const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.pte.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 [modelValue, modelAttrs] = useElField<string>('channelConfig.pte.path', [
+  {
+    required: true,
+    message: t('base_library.model_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+const formPathValue = ref({
+  path: klona(modelValue.value),
+})
+
+onMounted(() => {
+  formRefPte.value.validateField('channelConfig.pte.enable')
+})
+const loadPathEventMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+const loadPathPlayoutMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+watchImmediate(modelValue, async () => {
+  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 (modelValue.value) {
+    const rs = modelValue.value
+      ? await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
+        machineConfig: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+        },
+        path: modelValue.value,
+      })
+      : ''
+    recommendConfig.value = rs
+  }
+})
+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 && pteValue.value?.enable) {
+      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
+        machineConfig: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: serverConfig?.specMachineId || undefined,
+        },
+        path: formPathValue.value.path,
+      })
+
+      console.log(rs)
+      recommendConfig.value = rs
+      modelValue.value = formPathValue.value.path
+
+      showModel.value = false
+    }
+  })
+}
+
+function onShowModel() {
+  if (!isPlayout.value && !isEvent.value) {
+    if (!input.value?.machineConfig?.machineId) {
+      ElMessage({
+        message: t('base_library.please_select_input'),
+        type: 'warning',
+      })
+      return
+    }
+    showModel.value = true
+  }
+  else {
+    if (isEvent.value && inputsValue.value?.main?.inputType === 'ASSET') {
+      showModel.value = true
+    }
+    else if (!machineConfigValue.value?.machineId) {
+      ElMessage({
+        message: t('base_library.please_select_server'),
+        type: 'warning',
+      })
+      return
+    }
+    showModel.value = true
+  }
+}
+
+function handleClose() {
+  formPathValue.value.path = modelValue.value
+  showModel.value = false
+}
+
+function formatNumber(number) {
+  return number?.toLocaleString('de-DE')
+}
+
+function handleChange(_newValue: boolean) {
+  if (_newValue) {
+    emit('changeGlobalPte')
+  }
+}
+</script>
+
+<template>
+  <DevOnly>
+    <VueJsonPretty :data="machineConfigValue" />
+  </DevOnly>
+  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
+    <el-form-item v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObjAdsInfo.enable" />
+      </template>
+      <el-switch
+        v-model="enableValue"
+        :active-value="true"
+        :inactive-value="false"
+        :disabled="encoderIdValue === -1 && !enableValue"
+        @change="handleChange"
+      />
+    </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="modelValue && enableValue" label="Path Model">
+      <el-text>{{ modelValue }}</el-text>
+    </el-form-item>
+  </div>
+  <div v-if="modelValue && enableValue && recommendConfig?.name">
+    <div class="text-base font-bold">
+      {{ $t('base_library.recommended_configuration') }}
+    </div>
+
+    <div class="grid grid-cols-5 px-4 py-2">
+      <div class="w-300px">
+        <div class="font-bold">
+          Path
+        </div>
+        <SSTooltipEllipsis :content="formPathValue.path || '-'" />
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Model
+        </div>
+        <div>{{ recommendConfig.model || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Name
+        </div>
+        <div>{{ recommendConfig.name || '-' }}</div>
+      </div>
+      <!-- <div class="w-300px">
+        <div class="font-bold">
+          Encoder
+        </div>
+        <div>{{ recommendConfig.encoder || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Codec
+        </div>
+        <div>{{ recommendConfig?.codec || '-' }}</div>
+      </div> -->
+      <div class="w-300px">
+        <div class="font-bold">
+          Profile
+        </div>
+        <div>{{ recommendConfig.profile || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Pixel format
+        </div>
+        <div>{{ recommendConfig.format || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Preset
+        </div>
+        <div>{{ recommendConfig.preset || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          FPS
+        </div>
+        <div>{{ recommendConfig.fps || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Maxrate
+        </div>
+        <div>{{ formatNumber(recommendConfig?.maxrate) || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Bframe
+        </div>
+        <div>{{ recommendConfig?.bframe || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Lookahead
+        </div>
+        <div>{{ recommendConfig.lookahead || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          cq_max
+        </div>
+        <div>{{ recommendConfig.cq_max || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          cq_min
+        </div>
+        <div>{{ recommendConfig.cq_min || '-' }}</div>
+      </div>
+      <div class="w-300px">
+        <div class="font-bold">
+          Step
+        </div>
+        <div>{{ recommendConfig.step || '-' }}</div>
+      </div>
+    </div>
+  </div>
+  <!-- </template> -->
+  <el-dialog
+    v-model="showModel"
+    width="500"
+    destroy-on-close
+    :before-close="handleClose"
+  >
+    <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="schemaObjAdsDetectConfigDTO.model" />
+        </template>
+        <el-input v-model="formPathValue.path" :placeholder="$t('SSConfig.example_path_to_model')" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onLoadPath">
+          {{ $t('transcode.load') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>