@sigmaott/base-next 1.0.6

package/src/components/Channel/ConfigWatermarkItem.vue

@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import service from '@/api/axios'
+
+const { prop, isHiddenPlaylist } = definePropsRefs<{
+  prop: string
+  isHiddenPlaylist?: boolean
+}>()
+
+const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'WatermarkDto')
+provide('isHiddenPlaylist', isHiddenPlaylist.value)
+
+function getProp(key: string) {
+  return () => prop.value ? `${prop.value}.${key}` : ''
+}
+const { t } = useI18n()
+
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+
+const [delayValue, delayAttrs] = useElField<number>(getProp('delay'), [
+  {
+    required: true,
+    message: $t('Watermark.delay_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [xValue, xAttrs] = useElField<number>(getProp('x'), [
+  {
+    required: true,
+    message: $t('Watermark.x_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [yValue, yAttrs] = useElField<number>(getProp('y'), [
+  {
+    required: true,
+    message: $t('Watermark.y_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [assetIdValue, assetIdAttrs] = useElField<string>(getProp('assetId'), [
+  {
+    required: true,
+    trigger: ['change'],
+    asyncValidator: (rule, value) => {
+      return new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error(t('watermark.please_select_the_watermark')))
+        }
+        else {
+          $libraryApi('api/library/assets/{id}', { pathParams: { id: value } })
+            .then(resolve).catch(() => {
+              reject(new Error(t('asset_not_found')))
+            })
+        }
+      })
+    },
+  },
+], {
+  enabled: enableValue,
+})
+
+const [widthValue] = useElField<number>(getProp('width'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [heightValue] = useElField<number>(getProp('height'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [mediaScaleValue, mediaScaleAttr] = useElField<number>(getProp('mediaScale'), [
+  {
+
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (value > 10 || value < 0.1)
+        callback(new Error(t('library.the_media_scale_must_be_between')))
+      return callback()
+    },
+  },
+], {
+  enabled: enableValue,
+})
+
+const assetSrc = ref('https://i.ibb.co/0QvpcB3/on-fast.png')
+const limit = ref(['image'])
+const { data } = useAssetDetail(() => assetIdValue.value)
+
+function handleRemove() {
+  ElMessageBox.confirm(t('base_library.are_you_sure_to_remove_watermark_asset'), t('general.warning'), {
+    confirmButtonText: t('Actions.confirm'),
+    cancelButtonText: t('Actions.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      assetIdValue.value = ''
+      assetSrc.value = ''
+    })
+}
+
+const yRevert = computed({
+  get: () => {
+    return 1080 - yValue.value
+  },
+  set: (value: number) => {
+    yValue.value = 1080 - value
+  },
+})
+
+watch(mediaScaleValue, () => {
+  if (!data.value || !mediaScaleValue.value)
+    return
+  // update width and height
+  widthValue.value = data.value?.metadata?.width * mediaScaleValue.value
+  heightValue.value = data.value?.metadata?.height * mediaScaleValue.value
+})
+
+watchImmediate(data, () => {
+  if (!data.value)
+    return
+  const w = data.value?.metadata?.width
+  const h = data.value?.metadata?.height
+  const defaultScale = h > 1080 || w > 1920 ? 0.1 : 1
+  mediaScaleValue.value = mediaScaleValue.value || defaultScale
+  widthValue.value = w * mediaScaleValue.value
+  heightValue.value = h * mediaScaleValue.value
+})
+
+const imageStyles = computed(() => {
+  return {
+    top: `${yValue.value / 3}px`,
+    left: `${xValue.value / 3}px`,
+    height: `${heightValue.value / 3}px`,
+    width: `${widthValue.value / 3}px`,
+  }
+})
+
+function handleChangeEnable(newValue: boolean) {
+  if (newValue && !xValue.value) {
+    xValue.value = 0,
+    yValue.value = 0
+    mediaScaleValue.value = 1
+    delayValue.value = 0
+    widthValue.value = 120
+    heightValue.value = 88
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap gap-x-48px">
+      <el-form-item v-bind="enableAttrs">
+        <template #label>
+          <SSInformationLabel :label="$t('watermark.enable_label')" :info="schemaObj.enable" />
+        </template>
+        <el-switch v-model="enableValue" @change="handleChangeEnable" />
+      </el-form-item>
+      <el-form-item v-bind="delayAttrs">
+        <template #label>
+          <SSInformationLabel :label="`${$t('watermark.delay')} (s)`" :info="schemaObj.delay" />
+        </template>
+        <el-input-number v-model="delayValue" :disabled="!enableValue" :min="0" :max="120" :step="1" step-strictly />
+      </el-form-item>
+      <el-form-item v-bind="xAttrs">
+        <template #label>
+          <SSInformationLabel label="X" :info="schemaObj.x" />
+        </template>
+        <el-input-number v-model="xValue" :disabled="!enableValue" :min="0" :max="1920" />
+      </el-form-item>
+      <el-form-item v-bind="yAttrs">
+        <template #label>
+          <SSInformationLabel label="Y" :info="schemaObj.y" />
+        </template>
+        <el-input-number v-model="yValue" :disabled="!enableValue" :min="0" :max="1080" />
+      </el-form-item>
+
+      <el-form-item label="Media scale" v-bind="mediaScaleAttr" class="w-400px">
+        <template #label>
+          <SSInformationLabel label="Media scale" :info="schemaObj.mediaScale" />
+        </template>
+        <el-slider v-model="mediaScaleValue" :step="0.01" :disabled="!enableValue" :min="0.1" :max="10"
+          class="[&_.el-slider\_\_bar]:!bg-transparent" show-input />
+      </el-form-item>
+    </div>
+    <el-form-item v-bind="assetIdAttrs" class="block [&_.el-form-item\_\_error]:(ml-2)">
+      <template #label>
+        <SSInformationLabel label="Asset" :info="schemaObj.assetId" />
+      </template>
+
+      <SSAssetPicker v-model="assetIdValue" :asset-src="assetSrc" :disabled="!enableValue" :axios-instance="service"
+        :limit="limit" :asset-domain="ASSET_DEV_URL" />
+      <div class="relative">
+        <el-image v-if="data?.uri" fit="scale-down" class="ml-4 h-50px w-50px" :src="data.uri" />
+        <el-button v-if="assetIdValue && enableValue" size="small" class="absolute right-[-8px] top-0" type="danger"
+          circle plain @click="handleRemove">
+          <template #icon>
+            <div class="i-carbon:close" />
+          </template>
+        </el-button>
+      </div>
+    </el-form-item>
+    <div v-if="enableValue" class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] mt-6">
+      <div class="col-start-2 pb-18px">
+        <el-slider v-model="xValue" :disabled="!enableValue" class="[&_.el-slider\_\_bar]:!bg-transparent" :min="0"
+          :max="1920" />
+      </div>
+      <div class="col-start-1 flex justify-end pr-18px">
+        <el-slider v-model="yRevert" vertical :min="0" :max="1080" :format-tooltip="(value) => `${1080 - value}`"
+          class="[&_.el-slider\_\_bar]:!bg-transparent" :disabled="!enableValue" />
+      </div>
+      <div class="relative col-start-2 mx-auto h-360px w-640px of-hidden rounded-10px ring-18px ring-gray-300">
+        <div class="absolute right-0 top-0 text-9px font-bold leading-12px -translate-y-full">
+          <el-text>
+            Full HD: <span>1920 x 1080</span>
+          </el-text>
+        </div>
+        <div class="absolute h-full w-full bg-#000">
+          <el-image v-if="data?.uri" :src="data.uri" :style="imageStyles" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Channel/HeaderItem.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const emit = defineEmits(['delete'])
+
+const { t } = useI18n()
+
+const { prop, index, disabled } = definePropsRefs<{
+  prop: string
+  index: number
+  disabled: boolean
+}>()
+
+function getProp(key: string) {
+  return () => `${prop.value}.headers[${index.value}].${key}`
+}
+
+const [keyValue, keyAttrs] = useElField<string>(getProp('key'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('Channel.form.validate.requiredKey')))
+      else
+        callback()
+    },
+  },
+], { enabled: disabled })
+const [value, valueAttrs] = useElField<string>(getProp('value'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('Channel.form.validate.requiredValue')))
+      else
+        callback()
+    },
+  },
+], { enabled: disabled })
+
+function handleDelete(idx: number) {
+  emit('delete', idx)
+}
+</script>
+
+<template>
+  <div class="w-40% gap-2">
+    <el-form-item v-bind="keyAttrs">
+      <el-input
+        v-model="keyValue"
+        placeholder="Key Header"
+        :disabled="!disabled"
+        :maxlength="200"
+        show-word-limit
+      />
+    </el-form-item>
+  </div>
+  <div class="w-60% flex gap-2">
+    <el-form-item v-bind="valueAttrs" class="w-full">
+      <el-input
+        v-model="value"
+        placeholder="Value Header"
+        :maxlength="1000"
+        class="!w-full"
+        :disabled="!disabled"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-button type="danger" @click="handleDelete(index)">
+      <template #icon>
+        <div class="i-ep:delete" />
+      </template>
+    </el-button>
+  </div>
+</template>

package/src/components/Channel/InputDetail.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const { id, type, mode, secondMode, channelMode } = defineProps<{
+  id: string
+  type: string
+  mode: string
+  secondMode: string
+  channelMode: string
+}>()
+
+const { data: transcodeInput, isFetching: isFetchingTranscodeInput, refetch: refetchTranscodeInput } = useQuery(
+  [QueryKeys.TRANSCODE_INPUT_DETAIL, id],
+  () => $transcodeApi('/api/transcode/transcode-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id } }),
+  {
+    enabled: computed(() => type === 'transcode' && !!id),
+  },
+)
+
+const { data: packageInput, suspense: packageSuspense, isFetching: isFetchingPackageInput, refetch: refetchPackageInput } = useQuery(
+  [QueryKeys.TRANSCODE_INPUT_DETAIL, id],
+  () => $transcodeApi('/api/transcode/package-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id } }),
+  {
+    enabled: computed(() => type === 'package' && !!id),
+  },
+)
+
+const inputDetail = computed(() => {
+  return type === 'transcode' ? transcodeInput.value : packageInput.value
+})
+</script>
+
+<template>
+  <div class="flex gap-1 text-start">
+    <div class="min-w-84px">
+      <el-tag
+        :type="mode === 'primary' ? 'success' : 'warning'"
+        effect="dark"
+      >
+        {{ uppercaseFirst(mode) }}
+      </el-tag>
+    </div>
+
+    <InfoInputSDI v-if="inputDetail?.type === 'SDI'" :input="inputDetail" />
+    <div v-else-if="type === 'transcode'">
+      <SSTooltipEllipsis :content="mode === 'primary' ? inputDetail?.primary : inputDetail?.secondary" />
+    </div>
+    <div v-else-if="type === 'package'">
+      <SSTooltipEllipsis v-if="mode === 'primary'" :content="mode === 'primary' ? inputDetail?.inputList?.[0]?.primary : inputDetail?.inputList?.[0]?.secondary" />
+    </div>
+  </div>
+  <div v-if="inputDetail?.secondary && channelMode === 'active-active' && secondMode" class="flex gap-1 text-start">
+    <div class="min-w-84px">
+      <el-tag
+        :type="secondMode === 'primary' ? 'success' : 'warning'"
+        effect="dark"
+      >
+        {{ uppercaseFirst(secondMode) }}
+      </el-tag>
+    </div>
+
+    <InfoInputSDI v-if="inputDetail?.type === 'SDI'" :input="inputDetail" />
+    <div v-else-if="type === 'transcode'">
+      <SSTooltipEllipsis :content="secondMode === 'primary' ? inputDetail?.primary : inputDetail?.secondary" />
+    </div>
+    <div v-else-if="type === 'package'">
+      <SSTooltipEllipsis :content="secondMode === 'primary' ? inputDetail?.inputList?.[0]?.primary : inputDetail?.inputList?.[0]?.secondary" />
+    </div>
+  </div>
+</template>

package/src/components/Channel/InputForm.vue

@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import MachineInfo from '@/pages/input/components/others/MachineInfo.vue'
+import MapListMachine from '@/pages/input/components/others/MapListMachine.vue'
+import SourceInfoTranscode from '@/pages/input/components/others/SourceInfoTranscode.vue'
+import SourceInfoPackage from '@/pages/input/components/others/SourceInfoPackage.vue'
+
+const emit = defineEmits<{
+  switchInput: [id: string]
+}>()
+
+const { id } = definePropsRefs<{
+  id?: string
+}>()
+
+const { isTranscode, transcodeInput, packageInput, refetchTranscodeInput, refetchPackageInput, isFetchingPackageInput, isFetchingTranscodeInput } = useChannelStore()
+
+const activeNames = ref(['general', 'detail'])
+
+const input = computed(() => transcodeInput.value || packageInput.value)
+
+const { t } = useI18n()
+
+async function handleRemove() {
+  emit('switchInput', id.value!)
+}
+
+async function handleGetInfo() {
+  if (isTranscode.value)
+    await refetchTranscodeInput()
+  else
+    await refetchPackageInput()
+  ElMessage({
+    type: 'success',
+    message: t('Input.message.get_information_of_input_successfully'),
+  })
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 flex justify-between">
+      <div>
+        <el-text class="mr-2">
+          <span class="text-16px">
+            {{ t('description_input') }} {{ input?.name }}
+          </span>
+        </el-text>
+        <el-button type="primary" :title="t('Input.get_information')" @click="handleGetInfo">
+          <div
+            class="i-ep:refresh text-lg"
+            :class="{ 'animate-spin': isFetchingTranscodeInput || isFetchingPackageInput }"
+          />
+        </el-button>
+      </div>
+      <div>
+        <el-button type="primary" title="Switch" @click="handleRemove">
+          <template #icon>
+            <div class="i-ep:switch" />
+          </template>
+        </el-button>
+      </div>
+    </div>
+    <el-collapse
+      v-model="activeNames"
+      class="[&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
+    >
+      <template v-if="id">
+        <el-collapse-item v-if="input" name="general">
+          <template #title>
+            <label for="" class="flex items-center gap-2 text-lg font-semibold">
+              <el-icon class="">
+                <div class="i-ep:menu" />
+              </el-icon>
+              {{ $t('channel_input.general_information') }}
+            </label>
+          </template>
+          <div class="grid grid-cols-3 gap-x-6 gap-y-1">
+            <div class="mb-1 min-w-0">
+              <div><b class="el-text block font-extrabold">{{ t('description_name') }}</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ input.name }}
+                </div>
+              </div>
+            </div>
+            <div class="mb-1 min-w-0 border-l-2 pl-5">
+              <div><b class="el-text block font-extrabold">{{ t('description_type') }}</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ input.type }}
+                </div>
+              </div>
+            </div>
+            <div class="mb-1 min-w-0 border-l-2 pl-5">
+              <div><b class="el-text block font-extrabold">{{ t('description_class') }}</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ uppercaseFirst(input?.class) }}
+                </div>
+              </div>
+            </div>
+            <div class="mb-1 min-w-0">
+              <div><b class="el-text block font-extrabold">{{ t('transcode_description') }}</b></div>
+              <div>
+                <SSTooltipEllipsis :content="input?.description" class="el-text" />
+              </div>
+            </div>
+            <div class="mb-1 min-w-0 border-l-2 pl-5">
+              <div><b class="el-text block font-extrabold">{{ t('Input.label.channel_mode') }}</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ uppercaseFirst(input?.channelMode) }}
+                </div>
+              </div>
+            </div>
+            <!-- <div v-if="!isTranscode && input.type === 'UDP'" class="mb-1 min-w-0 border-l-2 pl-5">
+              <div><b class="el-text block font-extrabold">Primary Network Interface</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ input?.primaryNetworkInterface }}
+                </div>
+              </div>
+            </div>
+            <div v-if="!isTranscode && input.type === 'UDP'" class="mb-1 min-w-0 border-l-2 pl-5">
+              <div><b class="el-text block font-extrabold">Secondary Network Interface</b></div>
+              <div>
+                <div class="el-text is-truncated cursor-pointer">
+                  {{ input.secondaryNetworkInterface }}
+                </div>
+              </div>
+            </div> -->
+          </div>
+
+          <div class="mt-5 w-full">
+            <el-text class="text-16px font-bold">
+              {{ $t('channel_input.base_on_machine') }}
+            </el-text>
+            <div v-if="input.baseOnMachine" class="flex flex-wrap items-center justify-self-auto gap-2">
+              <div
+                v-if="input?.machineConfig?.machineType === 'SIGMA_MACHINE_CLUSTER' || input?.machineConfig?.machineType === 'SIGMA_MACHINE'"
+                class="grid grid-cols-1 w-full gap-2"
+              >
+                <InputServerInfo :source="input" :is-show-detail-server="true" />
+              </div>
+              <div v-else-if="input?.machineConfig?.machineType === 'SIGMA_COMPONENT_CLUSTER'" class="grid-cols-2">
+                <MapListMachine :machine-id="input.machineConfig?.machineId" />
+              </div>
+            </div>
+            <BaseEmptyData v-else />
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item title="Detail Information" name="detail">
+          <template #title>
+            <label for="" class="flex items-center gap-2 text-lg font-semibold">
+              <el-icon class="">
+                <div class="i-ep:menu" />
+              </el-icon>
+              {{ $t('Channel.detail') }}
+            </label>
+          </template>
+          <div v-if="input">
+            <!-- <el-scrollbar max-height="300px" class="pb-2"> -->
+            <SourceInfoTranscode v-if="isTranscode" :input="input" />
+            <SourceInfoPackage v-else :input="input" />
+            <!-- </el-scrollbar> -->
+          </div>
+        </el-collapse-item>
+      </template>
+      <template v-else>
+        <el-empty :description="$t('channel_input.no-input')" />
+      </template>
+    </el-collapse>
+  </div>
+</template>

package/src/components/Channel/InputList.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  addInput: []
+}>()
+
+const { t } = useI18n()
+const [inputsValue, inputsAttrs] = useElField<any[]>('inputs', [{
+  validator: (rule, value, callback) => {
+    if (value?.length === 0)
+      callback(new Error(t('channel.please_select_at_least_one_input')))
+    else
+      callback()
+  },
+}])
+
+const { formRef } = useElFormContext()
+
+watch(() => inputsValue.value?.length, () => {
+  formRef.value.validateField('inputs')
+}, { flush: 'post' })
+
+function handleAddInput() {
+  emit('addInput')
+}
+</script>
+
+<template>
+  <div>
+    <el-form-item v-bind="inputsAttrs" />
+    <div v-if="!inputsValue?.length">
+      <el-empty>
+        <el-button type="primary" @click="handleAddInput">
+          {{ $t('channel.add_input') }}
+        </el-button>
+      </el-empty>
+    </div>
+  </div>
+</template>