@sigmaott/base-next 1.0.6

package/src/components/Channel/TargetSrtOutput.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const { prop, idx } = definePropsRefs<{
+  prop: string
+  idx: number
+}>()
+
+function getProp(key?: string) {
+  return () => key ? `${prop.value}.${key}` : prop.value
+}
+const [outputValue, outputAttrs, { add, remove }] = useElFieldArray(getProp(), [], {
+  defaultValue: [],
+})
+
+function addOutput() {
+  add({
+    uri: '',
+    profiles: [],
+  })
+}
+onBeforeMount(() => {
+  if (outputValue.value.length === 0)
+    addOutput()
+})
+</script>
+
+<template>
+  <div class="flex justify-end">
+    <el-button type="primary" :disabled="outputValue.length >= 10" plain @click="addOutput">
+      {{ $t('SSConfig.add_ouput') }}
+    </el-button>
+  </div>
+  <el-row v-for="(item, index) in outputValue" :key="item.id || index" class="grid grid-cols-[1fr_11fr_11fr_1fr] gap-2">
+    <SSChannelTargetSrtOutputItem :prop="getProp(`${index}`)()" :disabled-remove="outputValue.length <= 1" :idx="index" @remove="remove(item.id || index)" />
+  </el-row>
+</template>

package/src/components/Channel/TargetSrtOutputItem.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import isIP from 'validator/lib/isIP'
+import isURL from 'validator/es/lib/isURL'
+import type { ProfileDto, TargetProfileDto } from '~/api-client'
+
+const emit = defineEmits<{
+  remove: []
+}>()
+const { t } = useI18n()
+const { prop, idx, disabledRemove } = definePropsRefs<{
+  prop: string
+  idx: number
+  disabledRemove: boolean
+}>()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const [uriValue, uriAttrs] = useElField<string>(getProp('uri'), [{
+  required: true,
+  trigger: ['blur', 'change'],
+  validator: (rule, value, callback) => {
+    if (!value)
+      callback(new Error(t('SSConfig.form.validate.primary')))
+    else if (!isProtocolURLValid(value, 'srt'))
+    // else if (!isURL(value, { protocols: ['srt'], require_protocol: true }))
+      callback(new Error(t('SSConfig.invalid_url')))
+    else
+      callback()
+  },
+}])
+const [profilesValue, profilesAttrs] = useElField<string>(getProp('profiles'), [
+  {
+    required: true,
+    message: t('SSConfig.please_select_profile'),
+    type: 'array',
+  },
+])
+const [profiles] = useElFieldArray<ProfileDto[]>(() => 'profiles')
+const profilesListId = computed(() => profiles.value.map(profile => profile.id))
+watch(profilesListId, (val) => {
+  profilesValue.value = profilesValue.value.filter(item => val.includes(item))
+})
+</script>
+
+<template>
+  <el-form-item :label="idx === 0 ? 'No.' : ''">
+    {{ idx + 1 }}
+  </el-form-item>
+  <el-form-item v-bind="uriAttrs" :label="idx === 0 ? 'URI' : ''">
+    <el-input
+      v-model="uriValue"
+      :placeholder="`${$t('SSConfig.placeholder.enter')} URI (protocols: srt://)`"
+      show-word-limit
+      :maxlength="2048"
+    />
+  </el-form-item>
+  <el-form-item v-bind="profilesAttrs" :label="idx === 0 ? $t('SSConfig.label.profiles') : ''">
+    <el-select
+      v-model="profilesValue"
+      :placeholder="$t('SSConfig.label.selectProfile')"
+      multiple
+      collapse-tags
+      collapse-tags-tooltip
+      clearable
+    >
+      <el-option
+        v-for="item in profiles"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item :label="idx === 0 ? '&nbsp;' : ''">
+    <el-button type="danger" :disabled="disabledRemove" @click="emit('remove')">
+      <template #icon>
+        <div class="i-ep:delete" />
+      </template>
+    </el-button>
+  </el-form-item>
+</template>

package/src/components/Channel/TargetStartover.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { TargetProfileDto } from '~/api-client'
+
+const { prop, idx } = definePropsRefs<{
+  prop: string
+  idx: number
+}>()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'StartOverDto')
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+
+const [cacheTimeValue, cacheTimeAttrs] = useElField<number>(getProp('timeCache'), [], { defaultValue: 24 })
+const [profileValue] = useElField<TargetProfileDto[]>(() => `targets.${idx.value}.profiles`)
+function handleChangeStartover(params: boolean) {
+  if (profileValue.value.length)
+    profileValue.value = profileValue.value.map(item => ({ ...item, startOver: params }))
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-5">
+    <el-form-item v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaObj?.enable" />
+      </template>
+      <el-switch v-model="enableValue" @change="handleChangeStartover" />
+    </el-form-item>
+    <el-form-item label="Cache time" v-bind="cacheTimeAttrs">
+      <template #label>
+        <SSInformationLabel label="Cache time" :info="schemaObj?.timeCache" />
+      </template>
+      <el-input-number v-model="cacheTimeValue" :disabled="!enableValue" :min="6" :max="720" step-strictly placeholder="Cache time" />
+    </el-form-item>
+  </div>
+  <ChannelTargetDestination :prop="getProp('destination')()" :enabled="enableValue" />
+</template>

package/src/components/Channel/WarningName.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  name: string
+  warnings?: {
+    enabled: boolean
+    message: string
+    scope: string
+  }[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
+</script>
+
+<template>
+  <div class="min-w-0 flex items-center gap-1">
+    <el-tooltip :disabled="disabledTooltip" placement="top">
+      <span class="line-clamp-1 cursor-pointer text-primary underline" @click="emit('click')" @mouseenter="mouseEnter">
+        {{ name }}
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-240px overflow-auto">
+          {{ name }}
+        </div>
+      </template>
+    </el-tooltip>
+    <el-tooltip v-if="warnings?.enabled" placement="top">
+      <span>
+        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-320px overflow-auto" v-html="warnings?.message" />
+      </template>
+    </el-tooltip>
+  </div>
+</template>

package/src/components/Channel/WarningOutput.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  output: any[]
+  warning?: string
+}>()
+</script>
+
+<template>
+  <div class="min-w-0 flex items-center gap-1">
+    <el-popover
+      v-if="output?.length > 0"
+      placement="top"
+      effect="dark"
+      :width="300"
+    >
+      <template #reference>
+        <div class="truncate">
+          {{ output[0] }}
+        </div>
+      </template>
+      <div v-for="item in output" :key="item" class="mt-1 flex gap-2">
+        <div class="truncate">
+          {{ item }}
+        </div>
+        <SSIconCopyButton :value="`${item}`" />
+      </div>
+    </el-popover>
+    <el-tooltip v-if="warning" placement="top">
+      <span>
+        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-320px overflow-auto" v-html="warning" />
+      </template>
+    </el-tooltip>
+    <div v-else>
+      -
+    </div>
+  </div>
+</template>

package/src/components/CollapseTagsTooltip/CollapseTagsTooltip.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  tags: string[]
+  limit?: number
+  isClose?: boolean
+  limitText?: number
+  maxWidthPopup?: number
+  maxHeight?: number
+}>(), {
+  limit: 3,
+  limitText: 15,
+  isClose: false,
+  maxWidthPopup: 300,
+  maxHeight: 300,
+})
+
+const emit = defineEmits(['deleteTag'])
+const _tags = useVModel(props, 'tags')
+
+const popupStyle = computed(() => {
+  return {
+    maxWidth: `${props.maxWidthPopup}px`,
+    width: 'auto',
+  }
+})
+const listTagShow = computed(() => {
+  return _tags.value.slice(0, props.limit)
+})
+
+const listTagCollapse = computed(() => {
+  return _tags.value.slice(props.limit)
+})
+
+function isDisableTooltip(tag: string) {
+  return tag.toString().length < props.limitText
+}
+
+function handleClose(tag: string | { label: string, value: string }) {
+  emit('deleteTag', tag)
+}
+
+function ellipseTextTag(tag: string) {
+  return tag.toString().length < props.limitText ? tag : `${tag.substring(0, props.limitText)}...`
+}
+</script>
+
+<template>
+  <div class="max-h-150px flex flex-wrap gap-1 overflow-auto">
+    <template v-for="tag in listTagShow" :key="tag">
+      <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
+        <el-tag :closable="isClose" @close="handleClose(tag)">
+          <slot name="contentTag" :tag="tag">
+            {{ ellipseTextTag(tag) }}
+          </slot>
+        </el-tag>
+        <template #content>
+          <slot name="contentTooltip" :content="tag">
+            {{ tag }}
+          </slot>
+        </template>
+      </el-tooltip>
+    </template>
+    <el-popover trigger="hover" placement="top" :popper-style="popupStyle">
+      <template #reference>
+        <el-tag v-if="listTagCollapse.length">
+          ...
+        </el-tag>
+      </template>
+      <div class="grid grid-cols-2 max-h-150px gap-1 overflow-auto p-2">
+        <template v-for="tag in listTagCollapse" :key="tag">
+          <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
+            <el-tag :closable="isClose" @close="handleClose(tag)">
+              <slot name="contentTag" :tag="tag">
+                {{ ellipseTextTag(tag) }}
+              </slot>
+            </el-tag>
+            <template #content>
+              <slot name="contentTooltip" :content="tag">
+                {{ tag }}
+              </slot>
+            </template>
+          </el-tooltip>
+        </template>
+      </div>
+    </el-popover>
+  </div>
+</template>

package/src/components/CollapseTagsTooltip/index.ts

@@ -0,0 +1 @@
+export { default as SSCollapseTagsTooltip } from './CollapseTagsTooltip.vue'

package/src/components/CopyButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+import type { ButtonType } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  value: string
+  type?: ButtonType
+  circle?: boolean
+  noText?: boolean
+}>(), {
+  type: 'default',
+  circle: true,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value.ref, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} ${props.noText ? '' : ` (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`}`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(e.text)
+  })
+})
+</script>
+
+<template>
+  <el-button ref="copyRef" v-bind="$attrs" :circle="props.circle" :type="props.type" class="copy-btn">
+    <el-icon :size="16">
+      <div class="i-ep:copy-document" />
+    </el-icon>
+  </el-button>
+</template>
+
+<i18n lang="yaml">
+en:
+  Copy: Copied
+vi:
+  Copy: Đã sao chép
+</i18n>

package/src/components/CopyText.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+import type { ButtonType } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  value: string
+  showTooltip?: boolean
+}>(), {
+  showTooltip: true,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} (${e.text})`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(e.text)
+  })
+})
+</script>
+
+<template>
+  <span ref="copyRef" v-bind="$attrs" class="cursor-pointer">
+    <SSTooltipEllipsis :content="value" />
+  </span>
+</template>
+
+<i18n lang="yaml">
+en:
+  Copy: Copied
+vi:
+  Copy: Đã sao chép
+</i18n>

package/src/components/CopyTextButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import ClipboardJS from 'clipboard'
+
+const props = defineProps<{
+  value: string
+}>()
+
+const copyRef = ref()
+
+onMounted(() => {
+  const textValue = props.value
+
+  const clipboard = new ClipboardJS(copyRef.value, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(textValue.toString().length < 40 ? textValue : `${textValue.substring(0, 40)}...`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error('Copy failed')
+  })
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <el-tooltip
+    placement="top"
+    effect="dark"
+    :content="t('Actions.copy')"
+  >
+    <div v-bind="$attrs" ref="copyRef" class="w-full cursor-pointer truncate text-sm text-blue hover:text-blue-3">
+      {{ value }}
+    </div>
+  </el-tooltip>
+</template>

package/src/components/DefaultLayout/DefaultLayout.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import '../../assets/global.css'
+import type { RouteRecordRaw } from 'vue-router'
+import viVN from 'element-plus/es/locale/lang/vi'
+import enEN from 'element-plus/es/locale/lang/en'
+import HelpPanel from '../HelpPanel.vue'
+import GlobalASide from './GlobalASide.vue'
+import GlobalHeader from './GlobalHeader.vue'
+import GlobalFooter from './GlobalFooter.vue'
+
+const props = withDefaults(defineProps<{
+  namespace?: string
+  asideWidth?: number
+  name?: string
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  padding?: number
+  layoutMode?: 'vertical' | 'horizontal'
+  version?: string
+}>(), { namespace: 'el', padding: 12 })
+
+const ns = toRef(props, 'namespace')
+const { locale } = useI18n({
+  useScope: 'global',
+})
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+viVNCustom.el.pagination.goto = 'Nhảy tới trang'
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+const _layoutMode = useVModel(props, 'layoutMode', undefined, { defaultValue: 'vertical', passive: true })
+
+const layoutMode = isSubApp ? microState.value?.meta?.layoutMode : _layoutMode
+
+const showAside = computed(() => layoutMode?.value === 'vertical')
+
+useProvideLayoutStore({
+  ...toRefs(props),
+  layoutMode,
+})
+
+const { microProps } = useSyncMicroApp()
+
+// Chunk error
+
+useNuxtApp().hook('app:chunkError', () => {
+  window.parent.location.reload()
+})
+</script>
+
+<template>
+  <NuxtLoadingIndicator />
+  <el-config-provider :locale="localeConfig" :namespace="ns">
+    <el-container class="h-full w-full">
+      <GlobalASide v-if="showAside">
+        <template #logo>
+          <slot name="logo" />
+        </template>
+        <template #header>
+          <slot name="aside-header" />
+        </template>
+        <template #extra>
+          <slot name="extra" />
+        </template>
+        <template #footer>
+          <slot name="aside-footer" />
+        </template>
+      </GlobalASide>
+      <el-container>
+        <slot name="notification" />
+        <el-header v-if="!showAside && microProps?.header !== false" :style="`--${ns}-header-padding: 0px;`">
+          <GlobalHeader>
+            <template #logo>
+              <slot name="logo" />
+            </template>
+            <template #extra>
+              <slot name="extra" />
+            </template>
+          </GlobalHeader>
+        </el-header>
+        <el-main
+          id="main-container"
+          class="bg-fill"
+          :style="{
+            [`--${ns}-main-padding`]: `${padding}px`,
+          }"
+        >
+          <slot />
+        </el-main>
+      </el-container>
+    </el-container>
+    <HelpPanel />
+  </el-config-provider>
+</template>
+
+<style>
+.el-notification__content {
+  text-align: left !important;
+}
+
+.el-table .cell {
+  word-break: break-word !important;
+}
+
+.scroll-custom-app::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  /* background-color: #F5F5F5; */
+}
+
+.scroll-custom-app::-webkit-scrollbar-thumb {
+  background-color: #f4f4f8d3;
+  border-radius: 10px;
+  transition: all 0.2s ease-in-out;
+}
+</style>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+  '403':
+    messsage_mutation: Your account is currently view-only and does not have editing permissions
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+  '403':
+    messsage_mutation: Tài khoản của bạn hiện ở chế độ chỉ xem và không có quyền chỉnh sửa
+</i18n>

package/src/components/DefaultLayout/GlobalASide.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import Logo from './Logo.vue'
+import Menu from './Menu.vue'
+
+const { asideWidth, asideCollapsed, backgroundColor, toggleAside, backgroundColorLogo, rightMenu, isDark } = useLayoutStore()
+const yearNow = new Date().getFullYear()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <el-aside
+    width="auto"
+    class="relative z-11 h-full flex flex-col transition-all duration-300 ease !of-x-hidden"
+    :style="{
+      backgroundColor,
+      width: asideCollapsed ? '64px' : `${asideWidth}px`,
+    }"
+  >
+    <Logo>
+      <template #logo>
+        <slot name="logo" />
+      </template>
+    </Logo>
+    <slot name="header" />
+    <div class="relative flex-grow">
+      <div class="absolute inset-0 of-hidden">
+        <el-scrollbar :style="{ backgroundColor }">
+          <slot name="content">
+            <Menu>
+              <template #default>
+                <slot name="extra" />
+              </template>
+            </menu>
+          </slot>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <slot name="footer" />
+    <div class="flex flex-col justify-between">
+      <div v-if="rightMenu" class="flex flex-grow">
+        <!-- <RightMenu /> -->
+      </div>
+
+      <button
+        class="flex items-center justify-center py-6px"
+        :style="{ backgroundColor: backgroundColorLogo }"
+        @click="toggleAside()"
+      >
+        <el-icon :size="22">
+          <div v-if="asideCollapsed" class="i-ep:expand text-white" />
+          <div v-else class="i-ep:fold text-white" />
+        </el-icon>
+      </button>
+
+      <div
+        :style="{ backgroundColor: backgroundColorLogo }"
+        class="flex items-center justify-center gap-12px py-6px"
+      >
+        <button class="h-22px w-22px text-white" @click="toggleDark()">
+          <el-icon class="i-ep:sunny dark:i-ep:moon text-18px" />
+        </button>
+
+        <div v-if="!asideCollapsed" class="text-center text-xs text-white font-500">
+          <span v-if="!asideCollapsed">
+            Sigma Streaming {{ yearNow }}
+          </span>
+          <span>
+            ©
+          </span>
+        </div>
+      </div>
+    </div>
+  </el-aside>
+</template>

package/src/components/DefaultLayout/GlobalFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { backgroundColorLogo, version } = useLayoutStore()
+
+const yearNow = new Date().getFullYear()
+</script>
+
+<template>
+  <div
+    class="h-full flex cursor-default items-center justify-center !border-border" :style="{
+      backgroundColor: backgroundColorLogo,
+    }"
+  >
+    <span class="text-sm font-500 text-white"> {{ yearNow }} © By Sigma Streaming (v{{ version }}-{{ getBuildTime() }}).</span>
+  </div>
+</template>