@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/RecommendedConfigurationPTE.vue

@@ -1,238 +1,238 @@
-<script setup lang="ts">
-const props = defineProps<{
-  isTranscode?: boolean
-  visible: boolean
-}>()
-const emit = defineEmits(['applyConfig'])
-
-const visible = useVModel(props, 'visible')
-
-const configPte = ref(inject('configPte'))
-
-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 loadPathMutationVod = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $vodApi('/api/vod/ai-model/pte-info-model', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-const loadPathMutationPlayout = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $playoutApi('/api/playout/pte/pte-info-model', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-const loadPathMutationTranscode = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $transcodeApi('/api/transcode/pte/pte-info-model', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-const isEvent = ref(inject('isEvent'))
-const isPlayout = ref(inject('isPlayout'))
-const loadPathMutation = (isEvent.value || props?.isTranscode) ? loadPathMutationTranscode : isPlayout.value ? loadPathMutationPlayout : loadPathMutationVod
-
-onMounted(async () => {
-  if (configPte.value?.pte?.path) {
-    const rs = await loadPathMutation.mutateAsync({
-      machineConfig: {
-        machineId: configPte.value?.machineId,
-        machineType: configPte.value?.machineType || 'SIGMA_MACHINE',
-        mode: 'AUTO',
-        //   specMachineId: configPte.value?.specMachineId || true,
-      },
-      path: configPte.value?.pte?.path,
-    })
-
-    recommendConfig.value = rs
-  }
-})
-function handleApply(params: type) {
-  ElMessageBox.confirm(
-    $t('base_library.when_performing_this_action_the_system_will_automatically_enable_the_pte_config_are_you_sure_you_want_to_apply_the_recommended_configuration'),
-    $t('base_library.apply_recommended_config'),
-    {
-      confirmButtonText: $t('Actions.confirm'),
-      cancelButtonText: $t('Actions.cancel'),
-      type: 'warning',
-    },
-  )
-    .then(() => {
-      emit('applyConfig', recommendConfig.value)
-      visible.value = false
-    })
-    .catch(() => {
-
-    })
-}
-
-function formatNumber(number) {
-  return number?.toLocaleString('de-DE')
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    title="Recommended Configuration"
-    width="1200"
-    destroy-on-close
-  >
-    <template #header>
-      <div class="text-xl font-bold">
-        {{ $t('base_library.recommended_configuration') }}
-      </div>
-    </template>
-    <div class="text-sm">
-      {{ $t('base_library.supports_users_in_optimizing_pte_settings_when_encoding_video_we_propose_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') }}
-    </div>
-    <DevOnly>
-      <VueJsonPretty :data="recommendConfig" />
-    </DevOnly>
-    <el-card class="mt-4">
-      <div>
-        <div class="text-lg 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 class="w-200px" :content="configPte?.pte?.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>
-    </el-card>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="handleApply">
-          {{ $t('base_library.apply_config') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
+<script setup lang="ts">
+const props = defineProps<{
+  isTranscode?: boolean
+  visible: boolean
+}>()
+const emit = defineEmits(['applyConfig'])
+
+const visible = useVModel(props, 'visible')
+
+const configPte = ref(inject('configPte'))
+
+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 loadPathMutationVod = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $vodApi('/api/vod/ai-model/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathMutationPlayout = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathMutationTranscode = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const loadPathMutation = (isEvent.value || props?.isTranscode) ? loadPathMutationTranscode : isPlayout.value ? loadPathMutationPlayout : loadPathMutationVod
+
+onMounted(async () => {
+  if (configPte.value?.pte?.path) {
+    const rs = await loadPathMutation.mutateAsync({
+      machineConfig: {
+        machineId: configPte.value?.machineId,
+        machineType: configPte.value?.machineType || 'SIGMA_MACHINE',
+        mode: 'AUTO',
+        //   specMachineId: configPte.value?.specMachineId || true,
+      },
+      path: configPte.value?.pte?.path,
+    })
+
+    recommendConfig.value = rs
+  }
+})
+function handleApply(params: type) {
+  ElMessageBox.confirm(
+    $t('base_library.when_performing_this_action_the_system_will_automatically_enable_the_pte_config_are_you_sure_you_want_to_apply_the_recommended_configuration'),
+    $t('base_library.apply_recommended_config'),
+    {
+      confirmButtonText: $t('Actions.confirm'),
+      cancelButtonText: $t('Actions.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('applyConfig', recommendConfig.value)
+      visible.value = false
+    })
+    .catch(() => {
+
+    })
+}
+
+function formatNumber(number) {
+  return number?.toLocaleString('de-DE')
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="Recommended Configuration"
+    width="1200"
+    destroy-on-close
+  >
+    <template #header>
+      <div class="text-xl font-bold">
+        {{ $t('base_library.recommended_configuration') }}
+      </div>
+    </template>
+    <div class="text-sm">
+      {{ $t('base_library.supports_users_in_optimizing_pte_settings_when_encoding_video_we_propose_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') }}
+    </div>
+    <DevOnly>
+      <VueJsonPretty :data="recommendConfig" />
+    </DevOnly>
+    <el-card class="mt-4">
+      <div>
+        <div class="text-lg 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 class="w-200px" :content="configPte?.pte?.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>
+    </el-card>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleApply">
+          {{ $t('base_library.apply_config') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>