@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/MediaProfileModify.vue

@@ -1,229 +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>
+<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

@@ -1,30 +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>
+<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

@@ -1,29 +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>
+<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>