@sigmaott/base-next 1.0.6

package/src/components/Channel/ConfigTranscoder.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import { QueryKeys } from '@/enums'
+import { inputsApi, packageInputsApi } from '@/api'
+import type { MachineClusterStatusEnum, TranscoderStatusEnum } from '@/api-client-transcoders'
+import { useQueryComponentMachineClusterFindAll, useQueryMachineClusterFindAll, useQueryMachineFindAll } from '@/pages/input/components/useQueryMachine'
+import MapListMachine from '@/pages/input/components/others/MapListMachine.vue'
+import type { MachineConfigDto, MachineConfigDtoModeEnum, PackageInput, TranscodeInput } from '~/api-client'
+
+const props = withDefaults(defineProps<{
+  modelValue: MachineConfigDto
+  type: 'package' | 'transcode'
+  inputType?: 'ASSET' | 'INPUT'
+  inputId?: string
+}>(), {
+  modelValue: () => ({
+    mode: 'AUTO',
+    manualStrategyDeploy: 'LOWEST_RESOURCE',
+    renewInRestart: false,
+    machineType: 'SIGMA_MACHINE',
+    machineId: '',
+  }),
+  type: 'transcode',
+  inputType: 'INPUT',
+  inputId: '',
+})
+const emit = defineEmits(['change'])
+
+const form = useVModel(props, 'modelValue', emit)
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'MachineConfigDto')
+
+const { t } = useI18n()
+
+const statusMachine: Record<TranscoderStatusEnum, 'danger' | 'success' | 'info' | ''> = {
+  paused: '',
+  dead: 'danger',
+  running: 'success',
+  freezed: 'info',
+}
+
+const inputId = computed(() => {
+  return props.inputId
+})
+
+const params = reactive({
+  page: 1,
+  perPage: 100,
+  q: {
+    $and: [
+      { $or: [{}] },
+    ],
+  },
+})
+
+const { data: dataTranscodeInput, refetch: refetchTranscodeInput } = useQuery(
+  [QueryKeys.INPUT, inputId],
+  async () => {
+    return (await inputsApi.transcodeInputControllerGetInput({ inputId: inputId.value })).data
+  },
+  {
+    enabled: computed(() => props.type === 'transcode' && !!props.inputId),
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
+      replaceDataByInput(data)
+    },
+  },
+)
+
+const { data: dataPackageInput, refetch: refetchPackageInput } = useQuery(
+  [QueryKeys.INPUT, inputId],
+  async () => {
+    return (await packageInputsApi.packageInputControllerGetInput({ inputId: inputId.value })).data
+  },
+  {
+    enabled: computed(() => props.type === 'package' && !!props.inputId),
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
+      replaceDataByInput(data)
+    },
+  },
+)
+
+onActivated(() => {
+  if (props.type === 'package')
+    refetchPackageInput()
+  else
+    refetchTranscodeInput()
+})
+
+const { data: listMachine } = useQueryMachineFindAll({ ...params, q: { $and: [...params.q.$and, { $or: [{ status: 'running' }, { status: 'paused' }] }] } }, computed(() => form.value.machineType === 'SIGMA_MACHINE'))
+
+const { data: listClusters } = useQueryMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_MACHINE_CLUSTER'))
+
+const { data: listComponent } = useQueryComponentMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_COMPONENT_CLUSTER'))
+
+const machinesSelected = computed(() => {
+  if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE' && listMachine.value?.data) {
+    const _machine = listMachine.value?.data?.find(item => item.id === form.value.machineId)
+    return _machine ? [_machine] : []
+  }
+  else if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE_CLUSTER') {
+    return listClusters.value?.data?.find(item => item.id === form.value.machineId)?.machines?.map(item => item.machine) || []
+  }
+  else if (form.value.machineId && form.value.machineType === 'SIGMA_COMPONENT_CLUSTER') {
+    return listComponent.value?.data?.find(item => item.id === form.value.machineId)?.transcoder?.machines?.map(item => item.machine) || []
+  }
+  else { return [] }
+})
+
+watch(() => form.value, (val) => {
+  emit('change', val)
+}, { deep: true })
+
+const disabledField = computed(() => {
+  const baseOnMachine = props.type === 'package' ? dataPackageInput.value?.baseOnMachine : dataTranscodeInput.value?.baseOnMachine
+  return props.inputType === 'INPUT' && baseOnMachine
+})
+const MAP_STATUS_CLUSTER: Record<MachineClusterStatusEnum, 'success' | 'info' | 'warning' | 'danger'> = {
+  green: 'success',
+  yellow: 'warning',
+  red: 'danger',
+}
+
+function filterListMachineByType(_type: string, val: any[]) {
+  return val.filter(el => el?.machineType === _type)
+}
+
+const [modeValue, modeAttrs] = useElField<MachineConfigDtoModeEnum>('channelConfig.machineConfig.mode', [])
+const [machineTypeValue, machineTypeAttrs] = useElField<string>('channelConfig.machineConfig.machineType', [])
+const [machineIdValue, machineIdAttrs] = useElField<string>('channelConfig.machineConfig.machineId', [
+  {
+    required: true,
+    trigger: ['blur', 'change', 'focus'],
+    message: t('EventChannel.form.validate.selectMachine'),
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!form.value.machineId)
+        callback(new Error(t('Input.message.selectMachine')))
+      else callback()
+    },
+    trigger: ['blur', 'change', 'focus'],
+  },
+])
+
+const [renewInRestartValue, renewInRestartAttrs] = useElField<string>('channelConfig.machineConfig.renewInRestart', [])
+const [manualStrategyDeployValue, manualStrategyDeployAttrs] = useElField<string>('channelConfig.machineConfig.manualStrategyDeploy', [])
+
+function replaceDataByInput(params: PackageInput | TranscodeInput) {
+  if (params.baseOnMachine) {
+    modeValue.value = 'MANUAL'
+    machineTypeValue.value = params.machineConfig.machineType
+    machineIdValue.value = params.machineConfig.machineId
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-48px">
+    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
+      <el-form-item class="flex-1" label="Mode" v-bind="modeAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.mode')" :info="schemaObj.mode" />
+        </template>
+        <div>
+          <el-select v-model="modeValue" :disabled="disabledField" placeholder="">
+            <el-option v-for="item in ['AUTO', 'MANUAL']" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
+      </el-form-item>
+
+      <el-form-item
+        v-if="form.mode === 'MANUAL'" class="flex-1" :label="$t('channel.machineType')"
+        v-bind="machineTypeAttrs"
+      >
+        <template #label>
+          <SSInformationLabel :label="t('channel.machineType')" :info="schemaObj.machineType" />
+        </template>
+        <el-select
+          v-model="machineTypeValue" class="min-w-275px" :disabled="disabledField"
+          @change="machineIdValue = ''"
+        >
+          <el-option
+            v-for="item in ['SIGMA_MACHINE', 'SIGMA_MACHINE_CLUSTER', 'SIGMA_COMPONENT_CLUSTER']" :key="item"
+            :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+    </div>
+    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
+      <el-form-item class="flex-1" label="Renew Machine" v-bind="renewInRestartAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.renewMachine')" :info="schemaObj.renewInRestart" />
+        </template>
+        <el-switch v-model="renewInRestartValue" />
+      </el-form-item>
+
+      <el-form-item class="min-w-250px flex-1" v-bind="manualStrategyDeployAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.strategyDeploy')" :info="schemaObj.manualStrategyDeploy" />
+        </template>
+        <el-select v-model="manualStrategyDeployValue" placeholder="">
+          <el-option v-for="item in ['LOWEST_RESOURCE', 'SEQUENCE']" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+    </div>
+  </div>
+  <div>
+    <el-row v-if="form.mode === 'MANUAL'" :gutter="20">
+      <el-col :span="12">
+        <el-form-item :label="t('Input.label.machine')" v-bind="machineIdAttrs">
+          <el-select
+            v-model="machineIdValue" class="w-full" size="large" :disabled="disabledField"
+            :placeholder="t('channel.select')"
+          >
+            <template v-if="machineTypeValue === 'SIGMA_MACHINE'">
+              <el-option
+                v-for="item in listMachine?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="`${item.name}`" :value="item.id" :disabled="item.isDeleted"
+              >
+                <div>
+                  <div class="font-semibold">
+                    <div v-if="!item?.isDeleted">
+                      {{ item?.name }}
+                    </div>
+                    <div v-else>
+                      ID: {{ item?.id }}
+                    </div>
+                  </div>
+                  <div v-if="item.isDeleted" class="text-red-500">
+                    {{ t('Input.form.validate.existMachine') }}
+                  </div>
+                  <div v-else class="flex items-center justify-between gap-2">
+                    <div> Usage({{ item.percent }}%) </div>
+                    <div> Memory({{ Number(Number(item.ramUsage).toFixed(2)) + 0 }}%)</div>
+                    <el-tag :type="statusMachine[item.status!]">
+                      {{ item.status!.toUpperCase() }}
+                    </el-tag>
+                  </div>
+                </div>
+              </el-option>
+            </template>
+            <template v-else-if="machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'">
+              <el-option
+                v-for="item in listComponent?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
+              >
+                <div class="font-semibold">
+                  {{ item.name }}
+                </div>
+                <div class="max-w-740px flex justify-between gap-2">
+                  <div>Transcoder Live ({{ item.transcoder.machines?.length }})</div>
+                  <div>
+                    Packager Live ({{ filterListMachineByType('packager-live', item.packager.machines)?.length }})
+                  </div>
+                  <div>
+                    Packager Catchup ({{ filterListMachineByType('packager-catchup', item.packager.machines)?.length
+                    }})
+                  </div>
+                  <div>
+                    Packager Start Over ({{ filterListMachineByType('packager-startover',
+                                                                    item.packager.machines)?.length }})
+                  </div>
+                </div>
+              </el-option>
+            </template>
+            <template v-else>
+              <el-option
+                v-for="item in listClusters?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
+              >
+                <div>
+                  <div class="font-semibold">
+                    <div v-if="!item?.isDeleted">
+                      {{ item?.name }}
+                    </div>
+                    <div v-else>
+                      ID: {{ item?.id }}
+                    </div>
+                  </div>
+                  <div v-if="item.isDeleted" class="text-red-500">
+                    {{ t('Input.form.validate.existMachine') }}
+                  </div>
+                  <div v-else class="flex items-center justify-between">
+                    <div>Machines({{ item.machines.length }})</div>
+                    <el-tag :type="MAP_STATUS_CLUSTER[item.status]">
+                      {{ item.status.toUpperCase() }}
+                    </el-tag>
+                  </div>
+                </div>
+              </el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="Selected Machines List">
+          <template #label>
+            <div class="flex items-center gap-1">
+              <label class="ml-4">{{ t('EventChannel.form.label.selectMachine') }}</label>
+              <el-tooltip effect="dark" :content="t('channel.selectMachine')" placement="top">
+                <div class="i-ep:info-filled text-blue-500" />
+              </el-tooltip>
+            </div>
+          </template>
+          <draggable
+            v-if="machinesSelected.length > 0 && machineTypeValue !== 'SIGMA_COMPONENT_CLUSTER'"
+            v-model="machinesSelected" item-key="name" class="list-group ml-4 w-full" v-bind="{
+              animation: 200,
+              group: 'description',
+              disabled: true,
+              ghostClass: 'ghost',
+            }"
+          >
+            <template #item="{ element }">
+              <div class="w-300px cursor-move border rounded px-2 py-1">
+                <div>
+                  <div>
+                    <div class="flex justify-between font-semibold">
+                      <div v-if="!element?.isDeleted">
+                        {{ element?.machine }}
+                      </div>
+                      <div v-else>
+                        ID: {{ element?.id }}
+                      </div>
+                    </div>
+                    <div v-if="element.isDeleted" class="text-red-500">
+                      {{ t('Input.form.validate.existMachine') }}
+                    </div>
+                    <div v-else class="flex items-center justify-between gap-2">
+                      <div> Usage({{ element.percent }}%) </div>
+                      <div> Memmory({{ Number(Number(element.ramUsage).toFixed(2)) + 0 }}%)</div>
+                      <el-tag :type="statusMachine[element.status]">
+                        {{ element.status.toUpperCase() }}
+                      </el-tag>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <MapListMachine
+            v-else-if="machinesSelected.length > 0 && machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'"
+            :machine-id="form?.machineId" :create="true"
+          />
+          <BaseEmptyData v-else :empty-txt="t('EventChannel.message.noData')" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </div>
+</template>

package/src/components/Channel/ConfigWaterMarkAudio.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'AudioWatermarkDto')
+
+const { t } = useI18n()
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.audioWatermark.enable')
+const [presetValue, presetAttrs] = useElField<string>('channelConfig.audioWatermark.preset', () => enableValue.value
+  ? [
+      {
+        required: true,
+        message: t('SSConfig.preset_is_required'),
+        trigger: ['blur', 'change'],
+      },
+    ]
+  : [], { enabled: enableValue })
+const [valueValue, valueAttrs] = useElField<number>('channelConfig.audioWatermark.value', () => enableValue.value
+  ? [
+      {
+        required: true,
+        message: t('SSConfig.this_field_is_required'),
+        trigger: ['blur', 'change'],
+      },
+    ]
+  : [], { enabled: enableValue })
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-48px">
+    <el-form-item v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel label="Enable" :info="schemaObj.enable" />
+      </template>
+      <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item label="Preset" v-bind="presetAttrs">
+      <template #label>
+        <SSInformationLabel label="Preset" :info="schemaObj.preset" />
+      </template>
+      <el-select v-model="presetValue" placeholder="Select" :disabled="!enableValue" clearable class="!w-202px">
+        <el-option
+          v-for="item in ['AUTO', 'PRESET_1', 'PRESET_2', 'PRESET_3', 'PRESET_4', 'PRESET_5', 'PRESET_6', 'PRESET_7', 'PRESET_8', 'PRESET_9', 'PRESET_10']"
+          :key="item" :label="item" :value="item"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Value" v-bind="valueAttrs">
+      <template #label>
+        <SSInformationLabel label="Value" :info="schemaObj.value" />
+      </template>
+      <el-input-number v-model="valueValue" :min="0" :max="10000000" :precision="0" :disabled="!enableValue" />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/ConfigWatermark.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { randomStr } from '@antfu/utils'
+import type { WatermarkDto } from '~/api-client'
+
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+
+const [formFields, formFieldsAttrs, { remove, add }] = useElFieldArray<WatermarkDto>(prop.value)
+const { formErrors } = useElFormContext()
+
+const { t } = useI18n()
+
+const activeItem = ref('0')
+const resetWatermark = ref(randomStr())
+
+function removeTab(tab: any) {
+  ElMessageBox.confirm(t('SSConfig.message.confirmDeleteWatermark'), t('SSConfig.message.warning'), {
+    confirmButtonText: t('Actions.ok'),
+    cancelButtonText: t('Actions.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      const watermarkIdx = Number.parseInt(tab)
+      remove(formFields.value?.[watermarkIdx]?.id ?? formFields.value?.[watermarkIdx]?._id)
+      activeItem.value = '0'
+    })
+    .catch(() => { })
+}
+
+function addWatermark() {
+  add({
+    enable: true,
+    x: 0,
+    y: 0,
+    mediaScale: 1,
+    delay: 0,
+    assetId: '',
+    assetSrc: logoOnFastLink,
+    width: 120,
+    height: 88,
+  })
+}
+</script>
+
+<template>
+  <section>
+    <el-button v-if="formFields.length < 10" type="primary" @click="addWatermark">
+      <template #icon>
+        <div class="i-ep:plus" />
+      </template>
+      {{ t('Actions.add') }}
+    </el-button>
+    <div v-if="formFields.length" class="mt-12px flex flex-col gap-12px">
+      <el-tabs v-model="activeItem" type="card" closable @tab-remove="removeTab">
+        <el-tab-pane v-for="(watermark, idx) in formFields" :key="watermark.id" :name="`${idx}`">
+          <template #label>
+            <div class="flex items-center gap-4px">
+              <el-icon v-if="hasError(formErrors, [`channelConfig.watermark.${idx}`])">
+                <div class="i-ep:circle-close-filled text-danger" />
+              </el-icon>
+              <el-icon v-else>
+                <div class="i-ep:success-filled text-success" />
+              </el-icon>
+              <div :class="[hasError(formErrors, [`channelConfig.watermark.${idx}`]) ? 'text-danger' : '']">
+                {{ `Watermark ${idx + 1}` }}
+              </div>
+            </div>
+          </template>
+          <ChannelConfigWatermarkItem :prop="`channelConfig.watermark.${idx}`" />
+        </el-tab-pane>
+      </el-tabs>
+      <!-- <ChannelWatermarkPreview :key="resetWatermark" v-model:form-fields="formFields" v-model:active-item="activeItem" /> -->
+    </div>
+  </section>
+</template>

package/src/components/Channel/ConfigWatermarkEventChannel.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { WatermarkDto } from '~/api-client'
+
+const { modelValue: formFields } = defineModels<{
+  modelValue: WatermarkDto[]
+}>()
+
+const initialValues = ref({
+  watermark: formFields.value,
+})
+
+const { formRef, formValue, handleValidate, formErrors } = useElForm<any>({
+  initialValues,
+})
+
+defineExpose({
+  formRef,
+})
+
+const { t } = useI18n()
+
+const activeItem = ref('0')
+
+function removeTab(tab: any) {
+  ElMessageBox.confirm(t('EventChannel.message.confirmDeleteWatermark'), t('EventChannel.message.warning'), {
+    confirmButtonText: t('Actions.ok'),
+    cancelButtonText: t('Actions.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      const watermarkIdx = Number.parseInt(tab)
+      formFields.value.splice(watermarkIdx, 1)
+      activeItem.value = '0'
+    })
+    .catch(() => { })
+}
+
+function addWatermark() {
+  const sampleWatermark: WatermarkDto = {
+    enable: true,
+    x: 0,
+    y: 0,
+    mediaScale: 1,
+    delay: 0,
+    assetId: '',
+    assetSrc: logoOnFastLink,
+    width: 120,
+    height: 88,
+  }
+  formFields.value.push(sampleWatermark)
+}
+</script>
+
+<template>
+  <section>
+    <el-button v-if="formFields.length < 10" type="primary" @click="addWatermark">
+      <template #icon>
+        <div class="i-ep:plus" />
+      </template>
+      {{ t('Actions.add') }}
+    </el-button>
+
+    <el-form ref="formRef" label-position="top" :model="formValue" @validate="handleValidate">
+      <div v-if="formFields.length" class="mt-12px flex flex-col gap-12px">
+        <el-tabs v-model="activeItem" type="card" closable @tab-remove="removeTab">
+          <el-tab-pane v-for="(watermark, idx) in formFields" :key="idx" :name="`${idx}`">
+            <template #label>
+              <div class="flex items-center gap-4px">
+                <el-icon v-if="hasError(formErrors, [`watermark.${idx}`])">
+                  <div class="i-ep:circle-close-filled text-danger" />
+                </el-icon>
+                <el-icon v-else>
+                  <div class="i-ep:success-filled text-success" />
+                </el-icon>
+                <div :class="[hasError(formErrors, [`watermark.${idx}`]) ? 'text-danger' : '']">
+                  {{ `Watermark ${idx + 1}` }}
+                </div>
+              </div>
+            </template>
+            <ChannelConfigWatermarkItem :prop="`watermark.${idx}`" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-form>
+  </section>
+</template>