@sigmaott/base-next 1.0.6

package/src/components/Channel/InputPackageDetail.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+const { id, type, mode, channelMode, secondMode } = 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 pb-1">
+    <div class="min-w-84px flex justify-start">
+      <el-tag
+        :type="mode === 'primary' ? 'success' : 'warning'"
+        effect="dark"
+      >
+        {{ uppercaseFirst(mode) }}
+      </el-tag>
+    </div>
+    <div v-if="type === 'transcode'">
+      <SSTooltipEllipsis :content="mode === 'primary' ? inputDetail?.primary : inputDetail?.secondary" />
+    </div>
+    <div v-else-if="type === 'package'">
+      <SSTooltipEllipsis :content="mode === 'primary' ? inputDetail?.inputList?.[0]?.primary : inputDetail?.inputList?.[0]?.secondary" />
+    </div>
+    <el-popover
+      v-if="inputDetail?.inputList?.length > 1"
+      placement="bottom"
+      trigger="hover"
+      :width="300"
+    >
+      <template #reference>
+        <el-tag
+          type="info"
+          style="margin: 0 3px 5px 3px"
+        >
+          ...
+        </el-tag>
+      </template>
+      <el-scrollbar height="200px">
+        <template v-for="(item, index) in inputDetail?.inputList?.slice(0, inputDetail?.inputList?.length) || []" :key="item">
+          <div class="flex gap-1 pb-2 pr-2">
+            <div class="flex justify-start">
+              {{ index + 1 }}:
+            </div>
+            <div v-if="type === 'transcode'">
+              <SSTooltipEllipsis :content="mode === 'primary' ? inputDetail?.primary : inputDetail?.secondary" />
+            </div>
+            <div v-else-if="type === 'package'">
+              <SSTooltipEllipsis :content="mode === 'primary' ? inputDetail?.inputList?.[0]?.primary : inputDetail?.inputList?.[0]?.secondary" />
+            </div>
+          </div>
+        </template>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+
+  <div v-if="(inputDetail?.secondary || inputDetail?.inputList?.[0]?.secondary) && channelMode === 'active-active' && secondMode" class="flex gap-1">
+    <div class="min-w-84px flex justify-start">
+      <el-tag
+        :type="secondMode === 'primary' ? 'success' : 'warning'"
+        effect="dark"
+      >
+        {{ uppercaseFirst(secondMode) }}
+      </el-tag>
+    </div>
+    <div v-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>
+    <el-popover
+      v-if="inputDetail?.inputList?.length > 1"
+      placement="bottom"
+      trigger="hover"
+      :width="300"
+    >
+      <template #reference>
+        <el-tag
+          type="info"
+          style="margin: 0 3px 5px 3px"
+        >
+          ...
+        </el-tag>
+      </template>
+      <el-scrollbar height="200px">
+        <template v-for="(item, index) in inputDetail?.inputList?.slice(0, inputDetail?.inputList?.length) || []" :key="item">
+          <div class="flex gap-1 pb-2 pr-2">
+            <div class="flex justify-start">
+              {{ index + 1 }}:
+            </div>
+            <div v-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>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>

package/src/components/Channel/MediaProfileFormModal.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue: boolean
+  mode: 'create' | 'edit' | 'clone'
+  id?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'onRefresh'): void
+}>()
+const { t } = useI18n()
+const id = toRef(props, 'id')
+const mode = toRef(props, 'mode')
+
+const isPlayout = ref(inject('isPlayout'))
+
+const { data, isLoading, suspense } = useQuery({
+  queryKey: ['api/playout/profiles{id}', id],
+  queryFn: () => isPlayout.value
+    ? $playoutApi('api/playout/profiles/{id}', { pathParams: { id: id.value } })
+    : $transcodeApi('api/transcode/profiles/{id}', { pathParams: { id: id.value } }),
+  enabled: computed(() => !!id.value),
+},
+)
+
+if (id.value)
+  await suspense()
+
+const profileDetail = computed(() => {
+  return data?.value
+})
+
+const { modelValue: visible } = defineModels<{
+  modelValue: boolean
+}>()
+
+const modifyTitle = computed(() => {
+  if (props.mode === 'create')
+    return t('SSConfig.create_profile')
+  if (props.mode === 'edit')
+    return t('SSConfig.update_profile')
+  if (props.mode === 'clone')
+    return t('SSConfig.duplicate_profile')
+  return '-'
+})
+
+function handleCloseModifierForm() {
+  visible.value = false
+}
+
+function handleDoneAddProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+
+function handleDoneCloneProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+
+function handleDoneUpdateProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+</script>
+
+<template>
+  <SSChannelMediaProfileModify
+    v-if="visible"
+    v-model:visible="visible"
+    :mode="mode"
+    :modify-title="modifyTitle"
+    :item="props.mode !== 'create' ? profileDetail : null"
+    @added="handleDoneAddProfile"
+    @cloned="handleDoneCloneProfile"
+    @updated="handleDoneUpdateProfile"
+    @close="close"
+  />
+</template>

package/src/components/Channel/MediaProfileModify.vue

@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import { klona } from 'klona'
+import * as R from 'remeda'
+import type { CreateProfileDto } from '../../../base-library/src/api-client-library'
+
+const props = withDefaults(defineProps<{
+  mode: 'create' | 'edit' | 'clone' | 'custom' // why so much mode?
+  needSubmit: boolean
+  prop?: string
+  item?: CreateProfileDto | null
+  isPackage?: boolean
+  modifyTitle: string
+  visible: boolean
+}>(), { needSubmit: true, visible: false })
+
+const emit = defineEmits<{
+  close: []
+  added: []
+  submit: [profile: CreateProfileDto]
+  newCustom: [profile: CreateProfileDto]
+}>()
+
+const item = toRef(props, 'item')
+const visible = useVModel(props, 'visible')
+const activeMedia = ref()
+const initFields = ref<any>({
+  name: '',
+  video: [],
+  audio: [],
+  other: [],
+  presets: [],
+})
+const fields = ref(klona(initFields.value))
+const { t } = useI18n()
+
+// const { createProfileMutation, updateProfileMutation, isMutationLoading, _error } = useMediaProfileMutation()
+const queryClient = useQueryClient()
+const _error = ref()
+
+const isPlayout = ref(inject('isPlayout'))
+
+const createProfileMutation = useMutation(
+  async (createProfileDto: CreateProfileDto) =>
+    isPlayout.value
+      ? (await $playoutApi('api/playout/profiles', { body: createProfileDto, method: 'POST' })).data
+      : (await $transcodeApi('api/transcode/profiles', { body: createProfileDto, method: 'POST' })).data,
+  {
+    onSettled() {
+      queryClient.invalidateQueries([QueryKeys.MEDIA_LIVE_PROFILE])
+    },
+    onError: ({ response }) => {
+      _error.value = parseErrorMessage(response.data.errors || [])
+    },
+  },
+)
+
+const updateProfileMutation = useMutation(
+  async ({ id, updateProfileDto }: { id: string, updateProfileDto: UpdateProfileDto }) =>
+    isPlayout.value
+      ? (await $playoutApi('api/playout/profiles/{id}', { body: updateProfileDto, method: 'PATCH', pathParams: { id } })).data
+      : (await $transcodeApi('api/transcode/profiles/{id}', { body: updateProfileDto, method: 'PATCH', pathParams: { id } })).data,
+  {
+    onSettled() {
+      queryClient.invalidateQueries([QueryKeys.MEDIA_LIVE_PROFILE])
+    },
+    onError: ({ response }) => {
+      _error.value = parseErrorMessage(response.data.errors || [])
+    },
+  },
+)
+
+const isMutationLoading = computed(() =>
+  createProfileMutation.isLoading.value
+  || updateProfileMutation.isLoading.value,
+)
+
+function containsVideoAndAudio(_presets) {
+  const hasVideo = _presets.some(item => item.type === 'video')
+  const hasAudio = _presets.some(item => item.type === 'audio')
+  return hasVideo || hasAudio
+}
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, getAtrrs, submitLocks } = useElForm<any>({
+  initialValues: fields,
+  async onSubmit(values) {
+    if (containsVideoAndAudio(fields.value.presets)) {
+      if (props.mode === 'create') {
+        await createProfileMutation.mutateAsync(serializeData(fields.value))
+        ElMessage.success(t('library_profile.profile_added_successfully'))
+        handleReset()
+        formRef.value?.resetFields()
+      }
+
+      if (props.mode === 'edit') {
+        await updateProfileMutation.mutateAsync({
+          id: fields.value.id,
+          updateProfileDto: serializeData(fields.value),
+        })
+        ElMessage.success(t('library_profile.profile_updated_successfully'))
+      }
+
+      if (props.mode === 'clone') {
+        await createProfileMutation.mutateAsync(serializeData(fields.value))
+        ElMessage.success(t('library_profile.profile_cloned_successfully'))
+      }
+
+      if (props.mode === 'custom')
+        emit('newCustom', serializeData(fields.value))
+
+      emit('added')
+      emit('submit', serializeData(fields.value))
+    }
+    else {
+      ElMessage.error($t('library_profile.must_have_at_least_1_video_preset_and_1_audio_preset'))
+    }
+  },
+})
+
+watch(() => _error, () => {
+  formErrors.value = _error.value
+}, { deep: true })
+
+function getRandomFourDigitNumber() {
+  const min = 1000
+  const max = 9999
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+watchEffect(() => {
+  if (props.item) {
+    initFields.value = klona(item.value)
+    fields.value = klona(item.value)
+    activeMedia.value = 'media-0'
+  }
+  if (props.mode === 'custom' || props.mode === 'create')
+    formValue.value.name = `profile_${getRandomFourDigitNumber()}`
+})
+
+function handleReset() {
+  fields.value = klona(initFields.value)
+}
+
+function handleCancel() {
+  if (!R.equals(fields.value, initFields.value)) {
+    ElMessageBox.confirm(t('Input.message.handleConfirmClose'), t('Input.message.warning'), {
+      confirmButtonText: t('Actions.ok'),
+      cancelButtonText: t('Actions.cancel'),
+      type: 'warning',
+    })
+      .then(() => {
+        visible.value = false
+      })
+      .catch(() => {
+      // catch error
+      })
+  }
+  else {
+    visible.value = false
+  }
+}
+function serializeData(data: any) {
+  const { name, description, presets = [] } = data
+  const serializedPresets = presets.map((item) => {
+    return serializePreset(item)
+  })
+  return {
+    name,
+    description,
+    presets: serializedPresets,
+  }
+}
+provide('triggerAction', props.mode)
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    append-to-body
+    width="75%"
+    :title="modifyTitle"
+    destroy-on-close
+    :before-close="handleCancel"
+  >
+    <template #header>
+      <div class="text-18px font-semibold">
+        <span v-if="mode !== 'create' && mode !== 'custom'">{{ uppercaseFirst(mode === 'clone' ? $t('library.duplicate') : $t('library.edit')) }}
+          <span class="italic">{{ initFields?.name }}</span>
+        </span>
+        <span v-else>
+          {{ $t('SSConfig.create_profile') }}
+        </span>
+      </div>
+    </template>
+    <el-form
+      ref="formRef"
+      label-position="top"
+      label-width="80px"
+      :model="formValue"
+      @validate="handleValidate"
+    >
+      <SSChannelProfileConfigItem
+        v-model:activeMedia="activeMedia"
+        :is-package="isPackage"
+        :is-config-encoder="true"
+        :is-media-live="true"
+        :mode="mode"
+      >
+        <template #default>
+          <slot name="input" :fields="fields" :get-atrrs="getAtrrs" />
+        </template>
+        <template #mediaselection="{ exclusion, mediaType, selectItem }">
+          <ExistingPreset :media-type="mediaType" :exclusion="exclusion" @select-item="selectItem" />
+        </template>
+      </SSChannelProfileConfigItem>
+      <div v-if="needSubmit" class="mt-4 w-full flex justify-end">
+        <el-button
+          type="primary"
+          plain
+          :disabled="isMutationLoading"
+          @click="handleCancel"
+        >
+          {{ $t('library_action.cancel') }}
+        </el-button>
+        <el-button :loading="isMutationLoading" type="primary" @click="handleSubmit">
+          {{ $t('library_action.submit') }}
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>

package/src/components/Channel/MessageButtonGetHelp.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  message: string
+}>()
+
+const { microProps } = useMicroProps()
+const { t } = useI18n()
+
+function handleSendAiMessage() {
+  microProps.value.sendAiMessage({
+    message: `${t('main.handling_task_error_of_sigma_media_server')}: ${props.message}`,
+  })
+}
+</script>
+
+<template>
+  <el-button
+    type="primary"
+    plain
+    size="small"
+    @click="handleSendAiMessage"
+  >
+    <template #icon>
+      <div class="i-lucide:bot-message-square" />
+    </template>
+    <span>
+      {{ $t('actions.get_help') }}
+    </span>
+  </el-button>
+</template>

package/src/components/Channel/MessageTooltipAi.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  message: string
+}>()
+
+const { microProps } = useMicroProps()
+
+function handleSendAiMessage() {
+  microProps.value.sendAiMessage({
+    message: props.message,
+  })
+}
+</script>
+
+<template>
+  <el-tooltip placement="top">
+    <div class="line-clamp-1 flex-1">
+      {{ message }}
+    </div>
+    <template #content>
+      <div class="flex items-center gap-2">
+        <div class="max-h-200px max-w-240px overflow-auto">
+          {{ message }}
+        </div>
+        <SSChannelMessageButtonGetHelp :message="message" />
+      </div>
+    </template>
+  </el-tooltip>
+</template>