@sigmaott/base-next 1.0.6

package/src/components/Channel/AdvancedForm.vue

@@ -0,0 +1,542 @@
+<script lang="ts" setup>
+import * as R from 'remeda'
+// import ChannelConfigForm from './ConfigForm.vue'
+// import ChannelTargetOutputType from './TargetOutputType.vue'
+// import ChannelTargetForm from './TargetForm.vue'
+// import ChannelTargetList from './TargetList.vue'
+// import ChannelMediaProfileModify from './MediaProfileModify.vue'
+import type { components } from '#nuxt-api-party/transcodeApi'
+
+const emit = defineEmits<{
+  submit: [payload: components['schemas']['CreateChannelDto']]
+  back: []
+}>()
+
+const { defaultValue: channelValueDefault } = definePropsRefs<{
+  defaultValue: components['schemas']['CreateChannelDto']
+}>()
+
+const { t } = useI18n()
+const isCreateQuick = ref(true)
+
+const initialValues = ref({
+  ...klona(channelValueDefault.value),
+  channelConfig: {
+    ...klona(channelValueDefault.value.channelConfig),
+    nameModifier: channelValueDefault.value.channelConfig.nameModifier || channelValueDefault.value.name,
+  },
+})
+
+const { getOutputDefault } = useParamsChannelDefault()
+
+// // SECTION: form
+// const isEditMode = computed(() => !!channelId.value && action.value !== 'clone')
+// const submitCommand = ref('')
+// const { addMutation, editMutation, addQuickMutation } = useChannelMutation()
+
+// function normalizeChannel(value: CreateChannelDto) {
+//   // handle source index
+//   value.profiles = value?.profiles?.map(profile => ({
+//     ...profile,
+//     presets: profile.presets?.map(preset => ({ ...preset, sourceIndex: profile.sourceIndex })),
+//   }))
+
+//   value.channelConfig.watermark = value?.channelConfig?.watermark?.map((item) => {
+//     delete item._id
+//     return item
+//   })
+//   return value
+// }
+
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, register, registerArray } = useElForm<components['schemas']['CreateChannelDto']>({
+  initialValues,
+  async onSubmit(values) {
+    emit('submit', values)
+  },
+})
+const serverConfig = computed(() => {
+  return formValue.value.channelConfig.machineConfig
+})
+useProvideServerConfigStore(serverConfig)
+
+const [targetsValue, targetsAttrs, { remove }] = registerArray<any[]>(getProp('targets'), [])
+const [profilesValue, profilesAttrs, { remove: removeP, add: addP }] = registerArray<any[]>(getProp('profiles'), [])
+const selectProfiles = ref<TargetProfileDto[]>(profilesValue.value || [])
+provide('profilesValue', profilesValue)
+
+const [encoderIdValue] = registerArray<any[]>(getProp('channelConfig.machineConfig.encoderId'), [])
+provide('encoderIdValue', encoderIdValue)
+
+const activeName = ref('configs')
+const activeItem = ref(null)
+const activeIndex = ref(-1)
+
+// // SECTION: server
+
+// // SECTION: profile
+const isShowProfileSetList = ref(false)
+
+// target output
+const isShowOutputSetList = ref(false)
+
+onBeforeRouteLeave((to, from, next) => {
+  const pass = to.query.pass
+  if (pass) {
+    next()
+    return
+  }
+
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_leave_the_whole_data_will_be_lost'),
+    'Warning',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      next()
+    })
+})
+
+const isBlockEdit = ref(false)
+provide('isBlockEdit', isBlockEdit)
+
+const sampleWatermark = {
+  enable: false,
+  x: 0,
+  y: 0,
+  mediaScale: 1,
+  delay: 0,
+  assetId: '',
+  assetSrc: logoOnFastLink,
+  width: 120,
+  height: 88,
+}
+
+function addCustomProfile(profile: any) {
+  profile.nameModifier = profile.name
+  addP({ ...profile, watermark: klona(sampleWatermark) })
+
+  selectProfiles.value = profilesValue.value
+
+  activeName.value = 'profile-item'
+  activeItem.value = profile
+  activeIndex.value = formValue.value.profiles.length - 1
+  isShowProfileSetList.value = false
+}
+
+function addMultipleSelectProfile(profile: any) {
+  const idsNotIn = profilesValue.value.filter(item => !selectProfiles.value.some(el => el.id === item.id)).map(item => item.id)
+
+  idsNotIn.map(el => removeP(el))
+  selectProfiles.value.forEach((item) => {
+    const exists = profilesValue.value.some(el => el.id === item.id)
+    if (!exists) {
+      item.nameModifier = item.name
+      addP({ ...item, watermark: klona(sampleWatermark) })
+    }
+  })
+
+  activeName.value = 'profile-item'
+  activeItem.value = profile
+  activeIndex.value = formValue.value.profiles.length - 1
+}
+
+function selectProfile(profile: any) {
+  selectProfiles.value = profile
+
+  if (selectProfiles.value?.length)
+    addMultipleSelectProfile(profile)
+}
+
+function selectTarget(output: TargetDataDtoFormatEnum) {
+  isShowOutputSetList.value = false
+  // TODO: please check the edit case
+  const outputDefault = { ...getOutputDefault(output), id: genUUID() }
+  formValue.value.targets.push(outputDefault)
+
+  activeName.value = 'target-item'
+  activeItem.value = outputDefault
+  activeIndex.value = formValue.value.targets.length - 1
+}
+
+const isShowModifierForm = ref(false)
+
+const isAllowEditingTarget = ref(false)
+provide('isAllowEditingTarget', isAllowEditingTarget)
+const dataSource = computed(() => {
+  return [
+    {
+      id: 'configs',
+      label: 'Config',
+      active: activeName.value === 'configs',
+      icon: 'i-carbon:settings',
+      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
+    },
+    {
+      id: 'ai',
+      label: 'AI Advanced Config',
+      active: activeName.value === 'ai',
+      icon: 'i-carbon:ai-launch',
+      error: hasError(formErrors.value, ['name', 'channelConfig']) ? 'Config error' : '',
+    },
+    {
+      id: 'profiles',
+      label: 'Profiles',
+      active: activeName.value === 'profiles',
+      addable: (() => {
+        if (formValue.value.profiles.length < 10)
+          return true
+        else return false
+      })(),
+      addOption: true,
+      onClick: () => {
+      },
+      icon: 'i-ep:set-up',
+      error: hasError(formErrors.value, ['profiles']) ? 'Profile error' : '',
+      children: formValue.value.profiles?.map((item, idx) => {
+        return {
+          id: 'profile-item',
+          label: item.name,
+          item,
+          idx,
+          deletable: true,
+          error: hasError(formErrors.value?.profiles, [`${idx}`]) ? 'Error' : '',
+          active: activeName.value === 'profile-item' && activeItem.value?.id === item.id,
+        }
+      }),
+    },
+    {
+      id: 'targets',
+      label: 'Targets',
+      icon: 'i-ep:finished',
+      addable: formValue.value?.targets?.length < 10,
+      onClick: () => {
+        if (formValue.value.targets.length < 10)
+          isShowOutputSetList.value = true
+      },
+      active: activeName.value === 'targets',
+      error: hasError(formErrors.value, ['targets']) ? 'Target error' : '',
+      children: formValue.value.targets?.map((item, idx) => {
+        return {
+          id: 'target-item',
+          enable: !item.enable,
+          label: `${idx + 1}_${item.data?.format}`,
+          item,
+          idx,
+          deletable: true,
+          error: hasError(formErrors.value.targets, [`${idx}`]) ? 'Error' : '',
+          active: activeName.value === 'target-item' && activeItem.value?.id === item.id,
+        }
+      }),
+    },
+  ]
+})
+
+function addProfile(action: string) {
+  if (action === 'select')
+    isShowProfileSetList.value = true
+  else
+    isShowModifierForm.value = true
+}
+
+function handleNodeClick(data: any) {
+  activeName.value = data.id
+  activeItem.value = data.item
+  activeIndex.value = data.idx
+}
+
+function handleRemoveProfile(id: string) {
+  isAllowEditingTarget.value = true
+  formValue.value.profiles = formValue.value.profiles.filter(item => item.id !== id)
+  activeName.value = 'profiles'
+  activeItem.value = null
+  activeIndex.value = -1
+  const index = formValue.value.profiles?.findIndex(item => item.id === id)
+  if (index !== -1) {
+    formErrors.value?.profiles?.splice(index, 1)
+    cleanEmptyObjectAndArray(formErrors.value)
+  }
+
+  selectProfiles.value = formValue.value.profiles
+  // selectProfile(profilesValue.value)
+}
+
+function getProp(path: string) {
+  return () => path
+}
+
+function handleRemoveOutput(id: string) {
+  activeName.value = 'targets'
+  activeItem.value = null
+  activeIndex.value = -1
+  remove(id)
+}
+
+function handleCommand(command: string) {
+  submitCommand.value = command
+  handleSubmit()
+}
+
+function deleteProfile(idx: number) {
+  ElMessageBox.confirm(
+    t('SSConfig.are_you_sure_you_want_to_delete'),
+    'Warning',
+    {
+      confirmButtonText: t('Actions.confirm'),
+      cancelButtonText: t('Actions.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      isAllowEditingTarget.value = true
+      formValue.value.profiles.splice(idx, 1)
+      selectProfiles.value = formValue.value.profiles
+      // selectProfile(profilesValue.value)
+    })
+}
+
+function onBack() {
+  if (!R.equals(formValue.value, channelValueDefault.value)) {
+    ElMessageBox.confirm(
+      t('channel.are_you_sure_you_want_to_go_back_this_will_discard_any_unsaved_changes'),
+      'Warning',
+      {
+        confirmButtonText: t('Actions.confirm'),
+        cancelButtonText: t('Actions.cancel'),
+        type: 'warning',
+      },
+    )
+      .then(() => {
+        emit('back')
+      })
+  }
+  else {
+    emit('back')
+  }
+}
+
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const [pteValue] = register('channelConfig.pte')
+const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent, isPlayout })
+const configPte = computed(() => {
+  if (!isPlayout.value) {
+    return {
+      machineId: transcodeInput.value?.machineConfig?.machineId,
+      machineType: transcodeInput.value?.machineConfig?.machineType,
+      pte: pteValue.value,
+    }
+  }
+  else {
+    return {
+      machineId: formValue.value?.channelConfig?.machineConfig?.machineId,
+      machineType: formValue.value?.channelConfig?.machineConfig?.machineType,
+      pte: pteValue.value,
+    }
+  }
+})
+provide('configPte', configPte)
+</script>
+
+<template>
+  <el-scrollbar class="[&_.el-scrollbar\_\_view]:flex-1">
+    <div class="min-h-[calc(100%-40px)] flex gap-24px">
+      <div class="relative w-200px pr-12px">
+        <div class="sticky top-0">
+          <el-tree
+            class="w-200px [&_.el-tree-node\_\_content]:h-[var(--el-tree-height,36px)]"
+            :data="dataSource"
+            default-expand-all
+            :expand-on-click-node="false"
+            :props="{
+              class: (data, node) => {
+                if (data.error) {
+                  return 'error-item'
+                }
+                if (data.active) {
+                  return 'active-item'
+                }
+              },
+            }"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ node, data }">
+              <div class="w-full flex flex-col">
+                <div class="group flex flex-1 items-center justify-between pr-8px text-14px">
+                  <div class="flex items-center gap-6px">
+                    <el-icon :size="18" :class="data.icon" />
+                    <div
+                      class="min-w-120px flex justify-between text-16px font-semibold"
+                      :class="{ 'font-bold': data.active, 'opacity-40': data.id === 'target-item' && data.enable }"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                  <el-dropdown v-if="data.addOption && data.addable" placement="bottom-start" trigger="click">
+                    <el-button
+                      type="primary"
+                      plain
+                      circle
+                      size="small"
+                      @click.stop="data.onClick(data)"
+                    >
+                      <template #icon>
+                        <div class="i-ep:plus" />
+                      </template>
+                    </el-button>
+
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          @click="() => {
+                            isShowModifierForm = true
+                            isAllowEditingTarget = true
+                          }"
+                        >
+                          {{ t('SSConfig.new_profile') }}
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          @click="() => {
+                            isShowProfileSetList = true
+                            isAllowEditingTarget = true
+                          }"
+                        >
+                          {{ t('SSConfig.template') }}
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    v-else-if="!data.addOption && data.addable"
+                    type="primary"
+                    plain
+                    circle
+                    size="small"
+                    @click.stop="() => {
+                      data.onClick(data)
+                      isAllowEditingTarget = true
+                    }"
+                  >
+                    <template #icon>
+                      <div class="i-ep:plus" />
+                    </template>
+                  </el-button>
+                  <el-button
+                    v-else-if="data.changable"
+                    type="primary"
+                    circle
+                    plain
+                    size="small"
+                    @click.stop="() => {
+                      data.onClickChange(data)
+                      isAllowEditingTarget = true
+                    }"
+                  >
+                    <template #icon>
+                      <div class="i-ep:switch" />
+                    </template>
+                  </el-button>
+                </div>
+                <span class="text-12px text-danger">{{ data.error }}</span>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+      <el-card class="mr-12px w-full">
+        <el-form
+          ref="formRef"
+          :model="formValue"
+          label-width="120px"
+          label-position="top"
+          class="mr-12px w-full"
+          @validate="handleValidate"
+        >
+          <SSChannelConfigForm v-show="activeName === 'configs'" v-model="formValue" />
+          <SSChannelAIConfig v-show="activeName === 'ai'" v-model="formValue" />
+          <LazySSChannelProfileList
+            v-show="activeName === 'profiles'"
+            @add-profile="addProfile"
+            @delete-profile="deleteProfile"
+          />
+          <template v-for="(profile, idx) in formValue.profiles" :key="profile.id">
+            <LazySSChannelProfileForm
+              v-show="activeName === 'profile-item' && activeItem && activeIndex === idx"
+              :idx="idx"
+              @remove-profile="handleRemoveProfile(profile.id)"
+            />
+          </template>
+
+          <LazySSChannelTargetList
+            v-show="activeName === 'targets'"
+            @add-target="isShowOutputSetList = true"
+            @remove-target="handleRemoveOutput"
+          />
+          <template v-for="(_target, idx) in targetsValue" :key="_target.id">
+            <LazySSChannelTargetForm
+              v-show="activeName === 'target-item' && activeItem && activeIndex === idx"
+              :idx="idx"
+              @remove-target="handleRemoveOutput(_target.id)"
+            />
+          </template>
+        </el-form>
+      </el-card>
+    </div>
+    <DevOnly>
+      <VueJsonPretty :data="formValue" />
+    </DevOnly>
+  </el-scrollbar>
+  <div class="flex items-center justify-end border-t-1px border-$el-fill-color-light pt-4">
+    <el-button @click="onBack">
+      {{ $t('Actions.back') }}
+    </el-button>
+    <el-button type="primary" @click="handleSubmit">
+      {{ $t('general.save') }}
+    </el-button>
+  </div>
+
+  <!-- SECTION: Profile dialog -->
+  <SSChannelMultipleSelectProfile
+    v-model:selected-profiles="selectProfiles"
+    :is-show-profile-set-list="isShowProfileSetList"
+    @select-multiple-profile="selectProfile"
+    @close="isShowProfileSetList = false"
+  />
+
+  <!-- SECTION: Targets: Output -->
+  <el-dialog
+    v-model="isShowOutputSetList"
+    :title="t('EventChannel.form.label.selectOutput')"
+    width="500px"
+    align-center
+    destroy-on-close
+    append-to-body
+  >
+    <SSChannelTargetOutputType @submit="selectTarget" @cancel="isShowOutputSetList = false" />
+  </el-dialog>
+
+  <!-- Add new profile -->
+  <SSChannelMediaProfileModify
+    v-if="isShowModifierForm"
+    v-model:visible="isShowModifierForm"
+    modify-title="Create Profile"
+    mode="custom"
+    @new-custom="addCustomProfile"
+    @close="isShowModifierForm = false"
+    @added="isShowModifierForm = false"
+  />
+</template>
+
+<style lang="scss">
+.active-item > .el-tree-node__content {
+  @apply text-primary bg-$el-fill-color-light rounded-1;
+}
+
+.error-item > .el-tree-node__content {
+  @apply text-danger bg-$el-color-danger-light-7 rounded-1;
+  --el-tree-height: 52px;
+}
+</style>

package/src/components/Channel/ChannelListGrid.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+const { item, checked, isSelect = true } = defineProps<{
+  item: any
+  checked?: boolean
+  isSelect?: boolean
+}>()
+
+const emit = defineEmits(['delete', 'edit', 'clone', 'start', 'stop', 'restart', 'update:checked', 'detail', 'viewLogs'])
+const { t } = useI18n()
+const statusChannel2Color = {
+  init: 'primary',
+  stop: 'warning',
+  error: 'danger',
+  ended: 'info',
+  running: 'success',
+  start_error: 'danger',
+  live: 'success',
+}
+</script>
+
+<template>
+  <el-card
+    body-class="p-0"
+    class="relative flex flex-col overflow-hidden transition-all duration-300 hover:-translate-y-0.5"
+    :class="{ 'border-[--el-color-primary]!': checked }"
+  >
+    <el-tag :type="statusChannel2Color[item.status]" effect="dark" class="absolute left-0 top-2 z-30 ml-3 mt-1">
+      {{ uppercaseFirst(item.status) }}
+    </el-tag>
+
+    <el-checkbox
+      v-if="isSelect"
+      :model-value="checked"
+      size="large"
+      class="absolute right-3 top-0 z-30"
+      @update:model-value="() => emit('update:checked')"
+    />
+    <!-- <div class="h-auto overflow-hidden"> -->
+    <div class="relative h-44 overflow-hidden">
+      <el-image
+        :src="item.thumbUrl"
+        alt=""
+        class="h-full w-full"
+      >
+        <template #error>
+          <div class="image-slot">
+            <el-icon><div class="i-carbon:image" /></el-icon>
+          </div>
+        </template>
+      </el-image>
+    </div>
+    <!-- </div> -->
+
+    <div class="flex justify-between gap-2 px-3 py-1" :class="{ 'bg-[--el-color-primary]!': checked }">
+      <el-text
+        truncate
+        tag="b"
+        size="small"
+        class="cursor-pointer hover:text-primary hover:underline"
+        :class="{ 'text-white!': checked }"
+        @click="emit('detail')"
+      >
+        {{ item.name }}
+      </el-text>
+      <slot name="action">
+        <el-dropdown>
+          <el-button size="small" circle>
+            <template #icon>
+              <div class="i-ri:more-2-fill" />
+            </template>
+          </el-button>
+
+          <template #dropdown>
+            <el-dropdown-menu :show-timeout="100">
+              <el-dropdown-item
+                class="flex justify-center"
+              >
+                <slot name="prefix-action" />
+              </el-dropdown-item>
+              <el-dropdown-item
+                class="flex justify-center"
+                @click="emit('edit')"
+              >
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:edit" />
+                  {{ t('Actions.edit') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="item?.status === 'live' || item?.status === 'done'"
+                class="flex justify-center"
+                @click="emit('start')"
+              >
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:switch-button" />
+                  {{ t('Actions.start') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="item?.status === 'stop'"
+                class="flex justify-around"
+                @click="emit('stop')"
+              >
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:video-pause" />
+                  {{ t('Actions.stop') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item class="flex justify-around" @click="emit('restart')">
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:refresh" />
+                  {{ t('Actions.restart') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item class="flex justify-around" @click="emit('clone')">
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:document-copy" />
+                  {{ t('Actions.clone') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item class="flex justify-around" @click="emit('delete')">
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-ep:delete" />
+                  {{ t('Actions.delete') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item class="flex justify-around" @click="emit('viewLogs')">
+                <div class="w-full flex items-center gap-2">
+                  <div class="i-carbon:data-view-alt" /> {{ $t('Transcode.view_server_logs') }}
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </slot>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+</style>