@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/ProfileDetailsList.vue

@@ -1,160 +1,160 @@
-<script lang="ts" setup>
-import type { components } from '#nuxt-api-party/transcodeApi'
-
-const { profiles } = defineProps<{
-  profiles: components['schemas']['ProfileDto'][]
-}>()
-
-const { t } = useI18n()
-
-function handleAddProfile(action: string) {
-  emit('addProfile', action)
-}
-
-function filterMediaByType(profile: any, type: 'audio' | 'video' | 'data') {
-  return profile?.presets?.filter((item: any) => item.type === type) ?? []
-}
-</script>
-
-<template>
-  <el-table stripe resizable border :data="profiles" class="">
-    <el-table-column align="center" width="50" label="#">
-      <template #default="scope">
-        <span>{{ scope.$index + 1 }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column label="Name" prop="name" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
-      <template #default="scope">
-        {{ scope.row.name }}
-      </template>
-    </el-table-column>
-    <el-table-column label="Name Modifier" prop="nameModifier" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
-      <template #default="scope">
-        {{ scope.row.nameModifier }}
-      </template>
-    </el-table-column>
-    <el-table-column label="Video" prop="video" min-width="500">
-      <template #default="scope">
-        <div v-if="scope.row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-          No Item
-        </div>
-        <div v-else>
-          <SharedMediaInfoViewer v-for="(item, idx) in filterMediaByType(scope.row, 'video')" :key="idx" :media="item" class="w-full justify-center" />
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column label="Audio" prop="audio" min-width="300">
-      <template #default="scope">
-        <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-          No Item
-        </div>
-        <div v-else class="flex gap-2px">
-          <template v-for="(item) in filterMediaByType(scope.row, 'audio')?.slice(0, 2) || []" :key="item.id">
-            <div v-if="filterMediaByType(scope.row, 'audio')?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
-              <div class="i-ep:headset min-w-14px text-primary" />
-              <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-            </div>
-            <el-popover
-              v-else
-              placement="bottom"
-              trigger="hover"
-              :width="500"
-            >
-              <template #reference>
-                <div class="item-list-row max-w-100px flex items-center gap-1">
-                  <div class="i-ep:headset min-w-14px text-primary" />
-                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                </div>
-              </template>
-              <el-scrollbar>
-                <SharedMediaInfoViewer
-                  v-for="(i, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
-                  :media="i"
-                />
-              </el-scrollbar>
-            </el-popover>
-          </template>
-          <el-popover
-            v-if="filterMediaByType(scope.row, 'audio')?.length > 2"
-            placement="bottom"
-            trigger="hover"
-            :width="500"
-          >
-            <template #reference>
-              <span class="item-list-row">
-                ...
-              </span>
-            </template>
-            <el-scrollbar height="200px">
-              <SharedMediaInfoViewer
-                v-for="(i, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
-                :media="i"
-              />
-            </el-scrollbar>
-          </el-popover>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column label="Data" prop="data" min-width="300">
-      <template #default="scope">
-        <div v-if="filterMediaByType(scope.row, 'data')?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-          No Item
-        </div>
-        <div v-else class="flex gap-2px">
-          <template v-for="(item) in filterMediaByType(scope.row, 'data')?.slice(0, 2) || []" :key="item.id">
-            <div v-if="scope.row.data?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
-              <div class="i-ep:menu min-w-14px text-primary" />
-              <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-            </div>
-            <el-popover
-              v-else
-              placement="bottom"
-              trigger="hover"
-              :width="500"
-            >
-              <template #reference>
-                <div class="item-list-row max-w-100px flex items-center gap-1">
-                  <div class="i-ep:menu min-w-14px text-primary" />
-                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-                </div>
-              </template>
-              <el-scrollbar>
-                <SharedMediaInfoViewer
-                  v-for="(i, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
-                  :media="i"
-                />
-              </el-scrollbar>
-            </el-popover>
-          </template>
-          <el-popover
-            v-if="filterMediaByType(scope.row, 'data')?.length > 2"
-            placement="bottom"
-            trigger="hover"
-            :width="500"
-          >
-            <template #reference>
-              <span class="item-list-row">
-                ...
-              </span>
-            </template>
-            <el-scrollbar height="200px">
-              <SharedMediaInfoViewer
-                v-for="(i, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
-                :media="i"
-              />
-            </el-scrollbar>
-          </el-popover>
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<style scoped>
-.item-list-row {
-  padding: 5px;
-  position: relative;
-  border: 1px solid rgba(64, 158, 255, 0.4);
-  border-radius: 4px;
-}
-</style>
+<script lang="ts" setup>
+import type { components } from '#nuxt-api-party/transcodeApi'
+
+const { profiles } = defineProps<{
+  profiles: components['schemas']['ProfileDto'][]
+}>()
+
+const { t } = useI18n()
+
+function handleAddProfile(action: string) {
+  emit('addProfile', action)
+}
+
+function filterMediaByType(profile: any, type: 'audio' | 'video' | 'data') {
+  return profile?.presets?.filter((item: any) => item.type === type) ?? []
+}
+</script>
+
+<template>
+  <el-table stripe resizable border :data="profiles" class="">
+    <el-table-column align="center" width="50" label="#">
+      <template #default="scope">
+        <span>{{ scope.$index + 1 }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="Name" prop="name" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+      <template #default="scope">
+        {{ scope.row.name }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Name Modifier" prop="nameModifier" min-width="200" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+      <template #default="scope">
+        {{ scope.row.nameModifier }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Video" prop="video" min-width="500">
+      <template #default="scope">
+        <div v-if="scope.row?.video?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else>
+          <SharedMediaInfoViewer v-for="(item, idx) in filterMediaByType(scope.row, 'video')" :key="idx" :media="item" class="w-full justify-center" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="Audio" prop="audio" min-width="300">
+      <template #default="scope">
+        <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else class="flex gap-2px">
+          <template v-for="(item) in filterMediaByType(scope.row, 'audio')?.slice(0, 2) || []" :key="item.id">
+            <div v-if="filterMediaByType(scope.row, 'audio')?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
+              <div class="i-ep:headset min-w-14px text-primary" />
+              <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+            </div>
+            <el-popover
+              v-else
+              placement="bottom"
+              trigger="hover"
+              :width="500"
+            >
+              <template #reference>
+                <div class="item-list-row max-w-100px flex items-center gap-1">
+                  <div class="i-ep:headset min-w-14px text-primary" />
+                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                </div>
+              </template>
+              <el-scrollbar>
+                <SharedMediaInfoViewer
+                  v-for="(i, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </template>
+          <el-popover
+            v-if="filterMediaByType(scope.row, 'audio')?.length > 2"
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <span class="item-list-row">
+                ...
+              </span>
+            </template>
+            <el-scrollbar height="200px">
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in filterMediaByType(scope.row, 'audio') || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="Data" prop="data" min-width="300">
+      <template #default="scope">
+        <div v-if="filterMediaByType(scope.row, 'data')?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+          No Item
+        </div>
+        <div v-else class="flex gap-2px">
+          <template v-for="(item) in filterMediaByType(scope.row, 'data')?.slice(0, 2) || []" :key="item.id">
+            <div v-if="scope.row.data?.length > 2" class="item-list-row max-w-100px flex items-center gap-1">
+              <div class="i-ep:menu min-w-14px text-primary" />
+              <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+            </div>
+            <el-popover
+              v-else
+              placement="bottom"
+              trigger="hover"
+              :width="500"
+            >
+              <template #reference>
+                <div class="item-list-row max-w-100px flex items-center gap-1">
+                  <div class="i-ep:menu min-w-14px text-primary" />
+                  <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+                </div>
+              </template>
+              <el-scrollbar>
+                <SharedMediaInfoViewer
+                  v-for="(i, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                  :media="i"
+                />
+              </el-scrollbar>
+            </el-popover>
+          </template>
+          <el-popover
+            v-if="filterMediaByType(scope.row, 'data')?.length > 2"
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <span class="item-list-row">
+                ...
+              </span>
+            </template>
+            <el-scrollbar height="200px">
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in filterMediaByType(scope.row, 'data') || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+</style>

package/src/components/Channel/ProfileForm.vue

@@ -1,134 +1,134 @@
-<script lang="ts" setup>
-import type { ProfileDto } from '~/api-client'
-
-const emit = defineEmits<{
-  removeProfile: []
-  syncInput: []
-}>()
-
-const { idx } = definePropsRefs<{
-  idx?: number
-}>()
-
-const isPlayout = ref(inject('isPlayout'))
-const [profile] = useElField<ProfileDto>(() => `profiles.${idx.value}`)
-
-const activeNames = ref(['modifier', 'info', 'watermark'])
-
-const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ProfileDto')
-const { t } = useI18n()
-
-function getProp(key: string) {
-  return () => `profiles[${idx.value}].${key}`
-}
-
-const [nameModifierValue, nameModifierAttrs] = useElField<string>(getProp('nameModifier'), [
-  { required: true, message: t('channel.name_modifier_is_required'), trigger: ['blur', 'change'] },
-  {
-    trigger: ['blur', 'change'],
-    validator: nameValidatorLow(t('channel.name_modifier')),
-  },
-])
-
-async function handleRemove() {
-  ElMessageBox.confirm(
-    t('channel.are_you_sure_to_delete_this_profile'),
-    'Warning',
-    {
-      type: 'warning',
-    },
-  )
-    .then(() => {
-      emit('removeProfile')
-    })
-}
-
-const activeMedia = ref()
-
-watchImmediate(profile, () => {
-  if (profile.value)
-    activeMedia.value = 'media-0'
-})
-
-function handleChangeNameModifier(name: string) {
-  nameModifierValue.value = name
-}
-</script>
-
-<template>
-  <div>
-    <div class="mb-2 flex justify-between">
-      <el-text class="">
-        <span class="text-base font-bold">
-          {{ profile.name }}
-        </span>
-      </el-text>
-
-      <el-button type="danger" title="Delete" @click="handleRemove">
-        <template #icon>
-          <div class="i-ep:delete" />
-        </template>
-      </el-button>
-    </div>
-    <el-collapse
-      v-model="activeNames"
-      class="[&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
-    >
-      <el-collapse-item name="modifier">
-        <template #title>
-          <label for="" class="flex items-center gap-2 text-lg font-semibold">
-            <el-icon class="">
-              <div class="i-ep:menu" />
-            </el-icon>
-            {{ 'Modifier and Information' }}
-          </label>
-        </template>
-        <SSChannelProfileConfigItem
-          v-model:active-media="activeMedia"
-          :is-media-live="true"
-          :prop="`profiles[${idx}]`"
-          :is-package="false"
-          :is-config-encoder="true"
-          :idx="idx"
-          :video-codecs="VIDEO_CODECS"
-          scte35
-          @change-name-modifier="handleChangeNameModifier"
-        >
-          <template #information>
-            <el-form-item class="h-80px" label="Name modifier" v-bind="nameModifierAttrs">
-              <template #label>
-                <SSInformationLabel label="Name modifier" :info="schemaObj.nameModifier" />
-              </template>
-              <el-input
-                v-model="nameModifierValue"
-                :placeholder="$t('channel.replaced_name')"
-                :minlength="1"
-                :maxlength="50"
-                show-word-limit
-              />
-            </el-form-item>
-          </template>
-          <template #mediaselection="{ exclusion, mediaType, selectItem }">
-            <ExistingPreset :media-type="mediaType" :exclusion="exclusion" @select-item="selectItem" />
-          </template>
-
-          <template #preset="{ prop, mediaType }">
-            <SSChannelPresetConfigItemPId :prop="prop" :media-type="mediaType" :idx="idx" />
-          </template>
-        </SSChannelProfileConfigItem>
-      </el-collapse-item>
-      <!-- v-if="!isPackage" -->
-      <el-collapse-item name="watermark">
-        <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_profile.watermark') }}
-          </label>
-        </template>
-        <SSChannelConfigWatermarkItem :prop="getProp('watermark')()" />
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
+<script lang="ts" setup>
+import type { ProfileDto } from '~/api-client'
+
+const emit = defineEmits<{
+  removeProfile: []
+  syncInput: []
+}>()
+
+const { idx } = definePropsRefs<{
+  idx?: number
+}>()
+
+const isPlayout = ref(inject('isPlayout'))
+const [profile] = useElField<ProfileDto>(() => `profiles.${idx.value}`)
+
+const activeNames = ref(['modifier', 'info', 'watermark'])
+
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'ProfileDto')
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => `profiles[${idx.value}].${key}`
+}
+
+const [nameModifierValue, nameModifierAttrs] = useElField<string>(getProp('nameModifier'), [
+  { required: true, message: t('channel.name_modifier_is_required'), trigger: ['blur', 'change'] },
+  {
+    trigger: ['blur', 'change'],
+    validator: nameValidatorLow(t('channel.name_modifier')),
+  },
+])
+
+async function handleRemove() {
+  ElMessageBox.confirm(
+    t('channel.are_you_sure_to_delete_this_profile'),
+    'Warning',
+    {
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('removeProfile')
+    })
+}
+
+const activeMedia = ref()
+
+watchImmediate(profile, () => {
+  if (profile.value)
+    activeMedia.value = 'media-0'
+})
+
+function handleChangeNameModifier(name: string) {
+  nameModifierValue.value = name
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-2 flex justify-between">
+      <el-text class="">
+        <span class="text-base font-bold">
+          {{ profile.name }}
+        </span>
+      </el-text>
+
+      <el-button type="danger" title="Delete" @click="handleRemove">
+        <template #icon>
+          <div class="i-ep:delete" />
+        </template>
+      </el-button>
+    </div>
+    <el-collapse
+      v-model="activeNames"
+      class="[&_.el-collapse-item\_\_header]:(text-16px) ![&_.el-collapse-item\_\_header]:font-600"
+    >
+      <el-collapse-item name="modifier">
+        <template #title>
+          <label for="" class="flex items-center gap-2 text-lg font-semibold">
+            <el-icon class="">
+              <div class="i-ep:menu" />
+            </el-icon>
+            {{ 'Modifier and Information' }}
+          </label>
+        </template>
+        <SSChannelProfileConfigItem
+          v-model:active-media="activeMedia"
+          :is-media-live="true"
+          :prop="`profiles[${idx}]`"
+          :is-package="false"
+          :is-config-encoder="true"
+          :idx="idx"
+          :video-codecs="VIDEO_CODECS"
+          scte35
+          @change-name-modifier="handleChangeNameModifier"
+        >
+          <template #information>
+            <el-form-item class="h-80px" label="Name modifier" v-bind="nameModifierAttrs">
+              <template #label>
+                <SSInformationLabel label="Name modifier" :info="schemaObj.nameModifier" />
+              </template>
+              <el-input
+                v-model="nameModifierValue"
+                :placeholder="$t('channel.replaced_name')"
+                :minlength="1"
+                :maxlength="50"
+                show-word-limit
+              />
+            </el-form-item>
+          </template>
+          <template #mediaselection="{ exclusion, mediaType, selectItem }">
+            <ExistingPreset :media-type="mediaType" :exclusion="exclusion" @select-item="selectItem" />
+          </template>
+
+          <template #preset="{ prop, mediaType }">
+            <SSChannelPresetConfigItemPId :prop="prop" :media-type="mediaType" :idx="idx" />
+          </template>
+        </SSChannelProfileConfigItem>
+      </el-collapse-item>
+      <!-- v-if="!isPackage" -->
+      <el-collapse-item name="watermark">
+        <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_profile.watermark') }}
+          </label>
+        </template>
+        <SSChannelConfigWatermarkItem :prop="getProp('watermark')()" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>