@sigmaott/base-next 1.0.6

package/src/components/DefaultLayout/GlobalHeader.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import Menu from './Menu.vue'
+import Logo from './Logo.vue'
+import RightMenu from './RightMenu.vue'
+
+const { microProps } = useMicroProps()
+
+const hideMenu = computed(() => {
+  return microProps.value?.hideMenu
+})
+
+const rightMenu = computed(() => {
+  return microProps.value?.rightMenu !== false
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_1fr] w-full gap-4 of-hidden bg-fill-blank px-2 shadow">
+    <Logo>
+      <template #logo>
+        <slot name="logo" />
+      </template>
+    </Logo>
+    <div class="relative">
+      <div class="absolute inset-0">
+        <Menu v-if="!hideMenu">
+          <template #default>
+            <slot name="extra" />
+          </template>
+        </Menu>
+      </div>
+    </div>
+    <div v-if="rightMenu" class="flex-grow">
+      <RightMenu />
+    </div>
+  </div>
+</template>
+
+<style>
+.el-custom.el-menu-item.is-active {
+  border-bottom: 0px;
+}
+</style>

package/src/components/DefaultLayout/Logo.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const { asideCollapsed, title, version, backgroundColorLogo, showAside, layoutMode } = useLayoutStore()
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div
+    id="tour-1"
+    class="min-h-60px flex items-center gap-2 px-1 py-2"
+    :style="{
+      backgroundColor: showAside ? backgroundColorLogo : 'transparent',
+    }"
+    :class="[showAside ? 'max-w-200px' : '']"
+  >
+    <slot name="logo">
+      <img :src="config.public.logo ?? '/logo.png'" class="h-40px w-40px">
+    </slot>
+
+    <div v-if="!asideCollapsed || !showAside">
+      <p
+        class="font-bold"
+        :class="showAside ? ' text-white' : 'sigma-layout-title text-18px'"
+        :style="{
+          fontSize: showAside ? config.public.titleFontSize || '22px' : undefined,
+        }"
+      >
+        {{ title }}
+      </p>
+
+      <p class="text-xs font-500" :class="showAside ? 'text-text-secondary' : 'text-text-secondary'">
+        v{{ version }}-{{ getBuildTime() }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/DefaultLayout/Menu.vue

@@ -0,0 +1,464 @@
+<script lang="ts" setup>
+import HexagonPro from '../HexagonPro.vue'
+
+const route = useRoute()
+const isFree = computed(() => {
+  return APP_DETAIL_STORAGE?.value?.[0]?.edition === 'free' && APP_DETAIL_STORAGE?.value?.[0]?.status === 'active'
+})
+const injectedTotalAlertsValue = injectLocal<number | undefined>('totalAlerts')
+
+const totalAlerts = computed(() => {
+  return injectedTotalAlertsValue?.value ?? ALERTS_TRANSCODE_STORAGE.value.total ?? 0
+})
+
+function getPathRoute() {
+  const path = route.path
+  const params = route.params
+  // remove params from path
+  const keys = Object.keys(params)
+  let newPath = path
+  keys.forEach((key) => {
+    newPath = newPath.replace(`:${key}()`, params[key])
+  })
+
+  return newPath
+}
+
+const activeMenu = ref(getPathRoute())
+
+const {
+  asideCollapsed,
+  routes,
+  textColor,
+  showAside,
+  layoutMode,
+  sideBarLoading,
+  backgroundColor,
+} = useLayoutStore()
+
+const groupedRoutes = computed(() => {
+  const data = [...toRaw(routes.value)]
+
+  routes.value.forEach((item) => {
+    // whenever and item has children loop through them then remove it from the array first level
+    if (item.children) {
+      item.children.forEach((child) => {
+        // check the data has the same path as the child if it does then remove it from the list
+        const item = data.find(route => route.name === child.name)
+        if (item)
+          data.splice(data.indexOf(item), 1)
+      })
+    }
+  })
+
+  return data
+})
+
+const pages = computed(() => transformRouteToMenu(groupedRoutes.value, isSubApp))
+
+const { t } = useI18n({ useScope: 'global' })
+
+function replacePathWithParam(path: string) {
+  const params = route.params
+  const keys = Object.keys(params)
+  let newPath = path
+  keys.forEach((key) => {
+    newPath = newPath.replace(`:${key}()`, params[key])
+  })
+
+  return newPath
+}
+const router = useRouter()
+
+const { open } = useShowSubscriptionInfo()
+
+const curPath = computed(() => {
+  const lastSlashIndex = activeMenu.value.lastIndexOf('/')
+  return activeMenu.value.substring(lastSlashIndex + 1)
+})
+
+// route blocked on free-app
+const definedBlockFreeApp: { [key: string]: string } = isSubApp
+  ? {
+      'library': 'library',
+      'monitor': 'monitor',
+      'cluster': 'cluster',
+      'clusters': 'clusters',
+      'minigame': 'minigame',
+      'ssai': 'ssai',
+      'lrm': 'lrm',
+      'transcode': 'transcode',
+      'presets': 'presets',
+      'profiles': 'profiles',
+      'event': 'event',
+      'vod': 'vod',
+      'interactive': 'interactive',
+      // 'livestream': 'livestream',
+      'members': 'members',
+      'group': 'group',
+      'audit-log': 'audit-log',
+    }
+  : {
+      'library': 'library',
+      'monitor': 'monitor',
+      'cluster': 'cluster',
+      'clusters': 'clusters',
+      'minigame': 'minigame',
+      'ssai': 'ssai',
+      'lrm': 'lrm',
+      'presets': 'presets',
+      'profiles': 'profiles',
+      'event': 'event',
+      'vod': 'vod',
+      'interactive': 'interactive',
+      // 'livestream': 'livestream',
+      'members': 'members',
+      'group': 'group',
+      'audit-log': 'audit-log',
+    }
+
+const routeBlockedOnNoCard: any = {
+  ssai: 'ssai',
+}
+
+const blockGoToPage: { [key: string]: string } = {
+  sigma_machine_cluster: 'Cluster Server',
+  sigma_vod_cluster: 'Cluster Server',
+  component_machine_cluster: 'Cluster',
+  app_ssai: 'SSAI',
+  app_lrm: 'LRM',
+  app_interactive: 'interactive',
+  // app_livestream: 'Livestream',
+  media_vod: 'Media VOD',
+  // media_live: 'Media Live',
+  transcode_templates: 'Transcode Templates',
+  app_library: 'Asset Library',
+  management_members: 'Members',
+  management_group: 'Group',
+  server_monitor: 'Monitor',
+  audit_log: 'Audit logs',
+  app_minigame: 'Minigame',
+  transcode_channels: 'Transcode Channels',
+  transcode_profiles: 'Profiles',
+  transcode_presets: 'Presets',
+  event_channels: 'Event Channels',
+  app_vast_control: 'Vast Control',
+}
+
+const { rightMenu } = useLayoutStore()
+
+const { openNoCardWarning } = useNoCardWarning()
+const { navigateWithCache } = useRouterHistory()
+
+const isEmptyPayment = computed(() => {
+  return !!(PAYMENT_METHOD_STORAGE.value?.paymentMethod === 'empty') as boolean
+})
+// useGetServerAddLicense()
+// const visible = ref(false)
+// watch(() => SERVER_ADD_LICENSE.value, () => {
+//   if (!SERVER_ADD_LICENSE.value)
+//     visible.value = false
+// })
+function handleSelect(key: string, _keyPath: string[]) {
+  activeMenu.value = key
+  // visible.value = (activeMenu.value?.substring(activeMenu.value?.lastIndexOf('/') + 1) === 'interactive' && !!SERVER_ADD_LICENSE.value)
+
+  // phần này là áp dụng cho app Pro-Active và chưa có thẻ ạ
+  // || (noCard.value && routeBlockedOnNoCard[curPath.value] && isPro.value)
+  if (isEmptyPayment.value && routeBlockedOnNoCard[curPath.value]) {
+    openNoCardWarning()
+  }
+  else if (isFree.value) {
+    if (!definedBlockFreeApp[curPath.value]) {
+      router.push({ path: key })
+    }
+    else {
+      if (!rightMenu.value)
+        window?.$wujie.props.open()
+      else
+        open()
+    }
+  }
+  else {
+    if (key.includes('statistic')) {
+      navigateWithCache({ path: key })
+    }
+    else {
+      router.push({ path: key })
+    }
+  }
+
+  nextTick(() => {
+    if (definedBlockFreeApp[curPath.value] && isFree.value)
+      activeMenu.value = getPathRoute()
+  })
+}
+
+watch(() => route.query.history, () => {
+  if (route.query?.history)
+    activeMenu.value = getPathRoute()
+}, {
+  immediate: true,
+})
+
+router.afterEach((to, from) => {
+  nextTick(() => {
+    setTimeout(() => {
+      activeMenu.value = getPathRoute()
+    })
+  })
+})
+
+const config = useRuntimeConfig()
+const { microProps } = useMicroProps()
+
+const menuSubtitle = computed(() => {
+  return isSubApp ? microProps.value?.menuSubtitle : config.public.menuSubtitle
+})
+
+function redirect(microPath: string, microName: string, subPath: string) {
+  const url = withQuery(joinURL(window.location.origin, config.app.baseURL, 'apps', APP_ID_STORAGE.value, microPath), {
+    [microName]: ensurePrefix('/', subPath),
+  })
+  window.open(url, '_blank')
+}
+// function handleRedirect() {
+//   redirect('machine', 'machine', `/server/list?serverId=${SERVER_ADD_LICENSE.value?.id}`)
+// }
+// function filterServerName() {
+//   redirect('machine', 'machine', `/server/list?serverName=${SERVER_ADD_LICENSE.value?.name}`)
+// }
+
+// watch(() => SERVER_ADD_LICENSE.value, () => {
+//   if (!SERVER_ADD_LICENSE.value)
+//     visible.value = false
+// })
+</script>
+
+<template>
+  <!-- <SSDialogWarningAddLicense v-if="visible" v-model:visible="visible" @show-dialog-warning="handleRedirect">
+    <template #description>
+      {{ $t('your_application_currently_has_a_server') }} <span class="cursor-pointer text-primary" @click="filterServerName">{{ SERVER_ADD_LICENSE?.name }}</span> {{ $t('expired_license_a_license_for_the_server') }}
+    </template>
+  </SSDialogWarningAddLicense> -->
+  <el-menu
+    v-loading="sideBarLoading"
+    element-loading-background="rgba(20, 20, 20, 0.6)"
+    :mode="layoutMode"
+    class="[--el-menu-base-level-padding:12px] h-full max-w-full flex-1 !border-b-none !border-r-none"
+    :default-active="activeMenu"
+    :collapse="asideCollapsed && showAside"
+    :unique-opened="true"
+    :background-color="layoutMode === 'vertical' ? backgroundColor : 'transparent'"
+    :text-color="textColor"
+    :collapse-transition="false"
+    :default-openeds="[replacePathWithParam('/apps/:appId()/product')]"
+    @select="handleSelect"
+  >
+    <template v-for="page in pages" :key="page.path">
+      <template v-if="page.children?.length">
+        <el-sub-menu v-show="!sideBarLoading" :id="page.meta.id" :index="replacePathWithParam(page.path)">
+          <template #title>
+            <el-icon class="!text-22px">
+              <div :class="page.meta?.icon" />
+            </el-icon>
+            <span class="w-full flex items-center gap-2 font-600">
+              <span class="min-w-72px">{{ page.meta?.key ? t(page.meta?.key) : page.meta?.title }}</span>
+            </span>
+          </template>
+          <el-menu-item
+            v-for="child in page.children"
+            :id="child.meta.id"
+            :key="replacePathWithParam(child.path)"
+            :index="replacePathWithParam(child.path)"
+          >
+            <el-icon>
+              <div :class="child.meta?.icon" />
+            </el-icon>
+            <template #title>
+              <div class="flex flex-col gap-1 leading-none">
+                <span class="flex items-center gap-2">
+                  <span class="font-600">{{ child.meta?.key ? t(child.meta?.key) : child.meta?.title }}</span>
+                  <HexagonPro v-if="isFree && blockGoToPage[child.meta?.key]" />
+                </span>
+                <span v-if="menuSubtitle" class="text-12px font-600">
+                  {{ child.meta?.subtitle ? t(child.meta?.subtitle) : '' }}
+                </span>
+              </div>
+            </template>
+          </el-menu-item>
+        </el-sub-menu>
+      </template>
+      <template v-else>
+        <el-menu-item v-show="!sideBarLoading" :id="page.meta.id" :index="replacePathWithParam(page.path)">
+          <el-icon>
+            <div class="text-22px" :class="page.meta?.icon" />
+          </el-icon>
+          <template #title>
+            <div
+              class="w-full flex items-center gap-1"
+              :class="(blockGoToPage[page.meta?.key] && isFree) ? 'min-w-90px' : ''"
+            >
+              <span v-if="page.meta?.title !== 'Alerts'" class="font-600">
+                {{ page.meta?.key ? t(page.meta?.key) : page.meta?.title }}
+              </span>
+              <el-badge
+                v-else
+                :value="totalAlerts"
+                :max="1000"
+                class="item"
+              >
+                <span class="font-600">{{ page.meta?.key ? t(page.meta?.key) : page.meta?.title }}</span>
+              </el-badge>
+              <component :is="HexagonPro" v-if="blockGoToPage[page.meta?.key] && isFree" />
+            </div>
+          </template>
+        </el-menu-item>
+      </template>
+    </template>
+    <slot />
+  </el-menu>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  Login: Login
+  LRM:
+    channels: Channels
+  Machine:
+    Machines: Server
+    Monitor: Monitor
+    Transcoder: Transcoder
+    Packager: Packager
+    sigmaLiveServer:
+      list: Sigma Live Server
+      community: Community Server
+      cluster: Cluster Server
+    ComponentMachine: Component Server
+    componentMachine:
+      list: Component Server
+      cluster: Cluster
+    sigmaVODServer:
+      list: Sigma VOD Server
+      community: Community Server
+      cluster: Cluster Server
+    sigmaMediaServer:
+      list: Sigma Media Server
+    sigmaMediaCluster:
+      list: Cluster Server
+  SSAI:
+    channels: Endpoint
+    adsList: ADS List
+    Statistic: Statistic
+    statistic:
+      dataReport: Data report
+      eventChart: Event chart
+      fillRate: Fill rate
+      monitorSystem: Monitor system
+  media_vod: Media VOD
+  media_live: Media Live
+  audit_log: Audit logs
+  sigma_machine_cluster: Cluster Server
+  sigma_media_cluster: Cluster Server
+  app_minigame: Minigame
+  app_interactive: Interactive
+  app_livestream: Livestream
+  app_lrm: LRM
+  app_ssai: SSAI
+  app_library: Asset Library
+  transcode_templates: Transcode Templates
+  server_monitor: Monitor
+  management_members: Members
+  management_group: Group
+  sigma_vod_cluster: Cluster Server
+  component_machine_cluster: Cluster Server
+  app_hub: VTV Hub
+  hub_distributors: Distributors
+  hub_distributed_channels: Distributed channels
+  hub_connection_info: Connection Information
+  hub_documents: Documentation
+  playout: Playout
+  transcode_channels: Transcode Channels
+  transcode_profiles: Profiles
+  transcode_presets: Presets
+  event_channels: Event Channels
+  app_vast_control: Vast Control
+  your_application_currently_has_a_server: Your application currently has a server
+  expired_license_a_license_for_the_server: >-
+    that does not have a license or has an expired license. Please add a license
+    for the server.
+vi:
+  Login: Đăng nhập
+  LRM:
+    channels: Danh sách Kênh
+  Machine:
+    Machines: Danh sách Máy Chủ
+    Monitor: Giám sát
+    Transcoder: Transcoder
+    Packager: Packager
+    MultiType: Multi type
+    sigmaLiveServer:
+      list: Sigma Live Server
+      community: Community Server
+      cluster: Cluster Server
+    ComponentMachine: Component Server
+    componentMachine:
+      list: Component Server
+      cluster: Cụm
+    sigmaVODServer:
+      list: Sigma VOD Server
+      community: Community Server
+      cluster: Cluster Server
+    sigmaMediaServer:
+      list: Sigma Media Server
+    sigmaMediaCluster:
+      list: Cluster Server
+  SSAI:
+    channels: Endpoint
+    adsList: Danh sách Quảng cáo
+    Statistic: Thống kê
+    statistic:
+      dataReport: Báo cáo dữ liệu
+      eventChart: Biểu đồ sự kiện
+      fillRate: Tỷ lệ hiển thị
+      monitorSystem: Giám sát hệ thống
+  media_vod: Media VOD
+  media_live: Media Live
+  audit_log: Audit logs
+  sigma_machine_cluster: Cluster Server
+  sigma_media_cluster: Cluster Server
+  app_minigame: Minigame
+  app_interactive: Interactive
+  app_livestream: Livestream
+  app_lrm: LRM
+  app_ssai: SSAI
+  app_library: Asset Library
+  transcode_templates: Transcode Templates
+  server_monitor: Monitor
+  management_members: Members
+  management_group: Group
+  sigma_vod_cluster: Cluster Server
+  component_machine_cluster: Cluster
+  app_hub: VTV Hub
+  hub_distributors: Nhà phân phối
+  hub_distributed_channels: Kênh phân phối
+  hub_connection_info: Thông tin kết nối
+  hub_documents: Tài liệu
+  playout: Playout
+  transcode_channels: Transcode Channels
+  transcode_profiles: Profiles
+  transcode_presets: Presets
+  event_channels: Event Channels
+  app_vast_control: Vast Control
+  your_application_currently_has_a_server: Ứng dụng của bạn hiện có một máy chủ
+  expired_license_a_license_for_the_server: |-
+    không có giấy phép hoặc giấy phép đã hết hạn.
+    Vui lòng thêm giấy phép cho máy chủ.
+</i18n>
+
+<style scoped>
+:deep(.el-badge__content.is-fixed) {
+  top: 6px;
+  right: 16px;
+}
+</style>

package/src/components/DefaultLayout/RightMenu.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+const [visibleSetting, toggleSetting] = useToggle()
+const { asideCollapsed, backgroundColorLogo, isDark, lang, showAside, layoutMode } = useLayoutStore()
+const toggleDark = useToggle(isDark)
+const settings = reactive({ layoutMode, lang })
+
+const menuItemStyle = computed(() => {
+  return !showAside.value
+    ? 'height: var(--ep-menu-item-height,var(--el-menu-item-height));'
+    : ''
+})
+
+const { t } = useI18n()
+
+function handleUpdateLange(newVal: string) {
+  ElMessageBox.confirm(t('confirm_lang_change'), t('warning'), {
+    type: 'warning',
+  })
+    .then(() => {
+      settings.lang = newVal
+      window.location.reload()
+    })
+    .catch(() => {})
+}
+</script>
+
+<template>
+  <el-menu
+    class="h-32px w-full" :class="[showAside ? 'justify-between' : 'h-full justify-end']"
+    :background-color="showAside ? backgroundColorLogo : undefined"
+    :text-color="showAside ? 'rgba(255, 255, 255, 1.0)' : undefined" :collapse-transition="false" mode="horizontal"
+    style="--el-menu-border-color: transparent;"
+  >
+    <el-menu-item key="theme" :style="menuItemStyle" class="!px-4" index="theme" @click="toggleDark()">
+      <el-icon :size="22">
+        <div class="i-ep:sunny text-18px dark:i-ep:moon" />
+      </el-icon>
+      <span v-if="asideCollapsed">Theme</span>
+    </el-menu-item>
+    <el-menu-item key="settings" :style="menuItemStyle" class="!px-4" index="settings" @click="toggleSetting">
+      <el-icon :size="22">
+        <div class="i-carbon:settings text-18px" />
+      </el-icon>
+      <span v-if="asideCollapsed">Settings</span>
+
+      <el-drawer v-model="visibleSetting" append-to-body :title="t('Settings')">
+        <el-form :model="settings" label-width="120px">
+          <el-form-item :label="t('LayoutMode')">
+            <el-select v-model="settings.layoutMode">
+              <el-option :label="t('Horizontal')" value="horizontal" />
+              <el-option :label="t('Vertical')" value="vertical" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('Language')">
+            <el-select :model-value="settings.lang" @update:model-value="handleUpdateLange">
+              <el-option :label="t('Vietnamese')" value="vi" />
+              <el-option :label="t('English')" value="en" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="">
+            <!-- <el-button @click="toggleSetting(false)">Close</el-button> -->
+            <!-- <el-button type="primary" @click="saveSetting">Confirm</el-button> -->
+          </span>
+        </template>
+      </el-drawer>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<i18n lang="yaml">
+en:
+  Settings: Settings
+  LayoutMode: Layout Mode
+  Language: Language
+  Horizontal: Horizontal
+  Vertical: Vertical
+  Vietnamese: Vietnamese
+  English: English
+  confirm_lang_change: Are you sure you want to change the language? The app had to be reloaded after this action.
+  warning: Warning
+vi:
+  Settings: Cài đặt
+  LayoutMode: Bố cục màn hình
+  Language: Ngôn ngữ
+  Horizontal: Chiều ngang
+  Vertical: Chiều dọc
+  Vietnamese: Tiếng Việt
+  English: English
+  confirm_lang_change: Bạn có chắc chắn muốn thay đổi ngôn ngữ? Ứng dụng sẽ phải được tải lại sau hành động này.
+  warning: Cảnh báo
+</i18n>

package/src/components/DialogWarningAddLicense.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+  server: any
+}>()
+
+const emit = defineEmits(['showDialogWarning'])
+
+const { t } = useI18n()
+const queryClient = useQueryClient()
+const visible = useVModel(props, 'visible')
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="Notification"
+    width="500"
+    align-center
+  >
+    <template #header>
+      <div class="text-xl font-bold">
+        {{ $t('notification') }}
+      </div>
+    </template>
+    <slot name="description" />
+    <template #footer>
+      <div class="flex justify-center">
+        <el-button type="primary" @click="emit('showDialogWarning')">
+          {{ $t('add_license') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

package/src/components/Epg/Epg.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import SideBar from './components/SideBar.vue'
+import Loader from './components/Loader.vue'
+import { useEpgStore } from './store'
+
+const { width, height, isSidebar, isTimeline, isLoading, containerRef } = useEpgStore()
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :style="{ width: width ? `${width}px` : '100%', height: height ? `${height}px` : '100%' }"
+  >
+    <div class="relative h-full w-full flex flex-col overflow-hidden rounded">
+      <SideBar v-if="isSidebar && isTimeline" />
+      <template v-if="isLoading">
+        <slot name="loader">
+          <Loader />
+        </slot>
+      </template>
+      <slot />
+    </div>
+  </div>
+</template>