@sigmaott/base-next 1.0.6

package/src/components/Asset/VideoPreviewWrapper.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+const props = defineProps<{
+  show: boolean
+}>()
+
+const {
+  vttLink,
+  playVisible,
+  isHls1,
+  isDash1,
+  isHls2,
+  isDash2,
+  serverId,
+  isSigmaMediaServer,
+  handleChangeSrc,
+  srcPreview1,
+  srcPreview2,
+  playMode1,
+  playMode2,
+  catchupTime1,
+  catchupTime2,
+  delayTime1,
+  delayTime2,
+  timeshiftTime1,
+  timeshiftTime2,
+  videoType1,
+  videoType2,
+  nameOutput,
+  typeOutput,
+  drm1,
+  drm2,
+} = useInjectJobPreview()
+
+const src1 = ref(srcPreview1.value)
+const src2 = ref(srcPreview2.value)
+
+const _playMode1 = ref(playMode1.value)
+const _playMode2 = ref(playMode2.value)
+
+const _catchupTime1 = ref(catchupTime1.value)
+const _catchupTime2 = ref(catchupTime2.value)
+
+const _delayTime1 = ref(delayTime1.value)
+const _delayTime2 = ref(delayTime2.value)
+
+const _timeshiftTime1 = ref(timeshiftTime1.value)
+const _timeshiftTime2 = ref(timeshiftTime2.value)
+
+const _videoType1 = ref(videoType1.value)
+const _videoType2 = ref(videoType2.value)
+
+const _drm1 = ref(drm1.value)
+const _drm2 = ref(drm2.value)
+
+function handleReload1() {
+  playMode1.value = _playMode1.value
+  catchupTime1.value = _catchupTime1.value
+  delayTime1.value = _delayTime1.value || 30
+  timeshiftTime1.value = _timeshiftTime1.value || 30
+  videoType1.value = _videoType1.value
+  drm1.value = _drm1.value
+  playVisible.value = false
+
+  srcPreview1.value = handleChangeSrc({
+    srcStr: src1.value,
+    playMode: _playMode1.value,
+    catchupTime: _catchupTime1.value,
+    delayTime: _delayTime1.value,
+    timeshiftTime: _timeshiftTime1.value,
+    videoType: _videoType1.value,
+  })
+  nextTick(() => {
+    playVisible.value = true
+  })
+}
+
+function handleReload2() {
+  playMode2.value = _playMode2.value
+  catchupTime2.value = _catchupTime2.value
+  delayTime2.value = _delayTime2.value || 30
+  timeshiftTime2.value = _timeshiftTime2.value || 30
+  videoType2.value = _videoType2.value
+  drm2.value = _drm2.value
+  playVisible.value = false
+
+  srcPreview2.value = handleChangeSrc({
+    srcStr: src2.value,
+    playMode: _playMode2.value,
+    catchupTime: _catchupTime2.value,
+    delayTime: _delayTime2.value,
+    timeshiftTime: _timeshiftTime2.value,
+    videoType: _videoType2.value,
+  })
+
+  nextTick(() => {
+    playVisible.value = true
+  })
+}
+
+const delayShow = ref(false)
+const loadingShow = ref(false)
+
+watchImmediate(() => props.show, async (val) => {
+  if (val) {
+    loadingShow.value = true
+    await nextTick()
+    setTimeout(() => {
+      delayShow.value = true
+      loadingShow.value = false
+    }, 1500)
+  }
+})
+</script>
+
+<template>
+  <div class="grid gap-2 divide-x" :class="{ 'grid-cols-2': show }">
+    <SSAssetVideoPreviewNew
+      v-if="playVisible"
+      v-model:src="src1"
+      :vtt="vttLink"
+      :is-hls="isHls1"
+      :is-dash="isDash1"
+      :play-mode="playMode1"
+      :drm="drm1"
+      @config-route="() => isSigmaMediaServer
+        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
+        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
+    >
+      <SSAssetVideoPreviewConfig
+        v-model:src="src1"
+        v-model:drm="_drm1"
+        v-model:play-mode="_playMode1"
+        v-model:catchup-time="_catchupTime1"
+        v-model:delay-time="_delayTime1"
+        v-model:timeshift-time="_timeshiftTime1"
+        v-model:video-type="_videoType1"
+        :name-output="nameOutput"
+        :type-output="typeOutput"
+        @reload="handleReload1"
+      >
+        <div class="flex items-center justify-center">
+          <div class="text-sm font-semibold">
+            <div v-if="playMode1 === 'catchup'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ catchupTime1?.[0] }} - {{ catchupTime1?.[1] }} </span>
+            </div>
+            <div v-if="playMode1 === 'live'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
+            </div>
+            <div v-if="playMode1 === 'delay'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime1 }} {{ $t('base.seconds') }}</span>
+            </div>
+            <div v-if="playMode1 === 'timeshift'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime1 }} {{ $t('base.seconds') }}</span>
+            </div>
+          </div>
+        </div>
+      </SSAssetVideoPreviewConfig>
+    </SSAssetVideoPreviewNew>
+
+    <div v-if="loadingShow" class="flex flex-col items-center justify-center">
+      <el-skeleton class="h-full w-full" />
+      <el-skeleton class="h-full w-full" />
+    </div>
+    <SSAssetVideoPreviewNew
+      v-else-if="playVisible && delayShow && show"
+      v-model:src="src2"
+      class="pl-2"
+      :vtt="vttLink"
+      :is-hls="isHls2"
+      :is-dash="isDash2"
+      :play-mode="playMode2"
+      :drm="drm2"
+      @config-route="() => isSigmaMediaServer
+        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
+        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
+    >
+      <SSAssetVideoPreviewConfig
+        v-model:src="src2"
+        v-model:drm="_drm2"
+        v-model:play-mode="_playMode2"
+        v-model:catchup-time="_catchupTime2"
+        v-model:delay-time="_delayTime2"
+        v-model:timeshift-time="_timeshiftTime2"
+        v-model:video-type="_videoType2"
+        :name-output="nameOutput"
+        :type-output="typeOutput"
+        @reload="handleReload2"
+      >
+        <div class="flex items-center justify-center">
+          <div class="text-sm font-semibold">
+            <div v-if="playMode2 === 'catchup'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ _catchupTime2?.[0] }} - {{ _catchupTime2?.[1] }} </span>
+            </div>
+            <div v-if="playMode2 === 'live'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
+            </div>
+            <div v-if="playMode2 === 'delay'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime2 }} {{ $t('base.seconds') }}</span>
+            </div>
+            <div v-if="playMode2 === 'timeshift'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime2 }} {{ $t('base.seconds') }}</span>
+            </div>
+          </div>
+        </div>
+      </SSAssetVideoPreviewConfig>
+    </SSAssetVideoPreviewNew>
+  </div>
+</template>

package/src/components/Asset/asset-context.ts

@@ -0,0 +1,24 @@
+export const useSharedAssetFilters = createSharedComposable(() => {
+  const params = reactive({
+    page: 1,
+    perPage: 10,
+  })
+  const searchState = ref<string>()
+  const searchType = ref('image')
+  const searchCategory = ref<string | undefined>()
+
+  const paramQ = reactive({
+    q: { $and: [{ name: undefined }, {}] },
+  })
+
+  const searchPlayListId = ref<string >()
+
+  return {
+    searchState,
+    params,
+    searchType,
+    searchCategory,
+    paramQ,
+    searchPlayListId,
+  }
+})

package/src/components/Asset/usePickerStore.ts

@@ -0,0 +1,55 @@
+import { createInjectionState } from '@vueuse/core'
+import type { AxiosInstance } from 'axios'
+
+interface Options {
+  assetDomain?: string
+  axiosInstance: AxiosInstance
+}
+
+const [useProvidePickerStore, useStore] = createInjectionState((options: Options) => {
+  // state
+  const assetDomain = ref(options.assetDomain || '')
+  // getters
+
+  // actions
+
+  return {
+    assetDomain,
+    axiosInstance: options.axiosInstance,
+  }
+})
+
+export { useProvidePickerStore }
+
+export function usePickerStore() {
+  const store = useStore()
+  if (store == null)
+    throw new Error('Please call `useProvidePickerStore` on the appropriate parent component')
+  return store
+}
+
+// List
+interface AssetOptions {
+  selectable?: boolean
+}
+
+const [useProvideAssetStore, useStoreAsset] = createInjectionState((options: AssetOptions) => {
+  // state
+  const selectable = ref(options.selectable || false)
+  // getters
+
+  // actions
+
+  return {
+    selectable,
+  }
+})
+
+export { useProvideAssetStore }
+
+export function useAssetStore() {
+  const store = useStoreAsset()
+  if (store == null)
+    throw new Error('Please call `useProvideAssetStore` on the appropriate parent component')
+  return store
+}

package/src/components/AuthLayout/AuthLayoutSimple.vue

@@ -0,0 +1,150 @@
+<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'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  asideWidth?: number
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  reverse?: boolean
+}>(), { routes: () => [] })
+
+const { locale } = useI18n()
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+
+useProvideLayoutStore(props)
+
+syncRef(locale, __LANGUAGE__)
+
+function handleCommand(lang: string) {
+  locale.value = lang
+  window.location.reload()
+}
+
+const containerRef = ref()
+const route = useRoute()
+
+watch(() => route.path, () => {
+  containerRef.value.scrollTo(0, 0)
+})
+
+const { isDark } = useLayoutStore()
+</script>
+
+<template>
+  <el-config-provider :locale="localeConfig" :z-index="4000">
+    <div
+      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
+      dark="bg-$el-fill-color-extra-light"
+      :style="{
+        backgroundImage: `url('${(isDark ? '/login-bg-sigma-dark.png' : '/login-bg-sigma.png')}')`,
+      }"
+    >
+      <div
+        v-if="!reverse"
+        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
+      >
+        <!-- <el-dropdown trigger="click" @command="handleCommand">
+          <el-button text>
+            <el-icon size="22px">
+              <div class="i-carbon:language" />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
+                English
+              </el-dropdown-item>
+              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
+                Tiếng Việt
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown> -->
+        <SSSwitchDark />
+      </div>
+      <div
+        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
+        dark="bg-$el-mask-color"
+        :class="[reverse ? 'flex-row-reverse' : '']"
+      >
+        <div class="login-left">
+          <div
+            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
+            dark="text-primary"
+          >
+            <span>
+              <img src="/login-sigma-logo.png" alt="LS" class="h-52px w-52px">
+            </span>
+            <div>
+              <svg
+                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
+                  fill="currentColor"
+                />
+              </svg>
+
+              <div class="flex items-center gap-0.75">
+                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
+                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
+              </div>
+            </div>
+          </div>
+          <img src="/login-img-sigma.png" alt="login" class="w-750px!">
+        </div>
+
+        <el-scrollbar
+          ref="containerRef"
+          v-bind="$attrs"
+          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
+        >
+          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
+            <slot />
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+</i18n>

package/src/components/AuthLayout/index.vue

@@ -0,0 +1,151 @@
+<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'
+
+const props = withDefaults(defineProps<{
+  asideWidth?: number
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  reverse?: boolean
+}>(), { routes: () => [] })
+
+const { locale } = useI18n()
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+
+useProvideLayoutStore(props)
+
+syncRef(locale, __LANGUAGE__)
+
+function handleCommand(lang: string) {
+  locale.value = lang
+  window.location.reload()
+}
+
+const containerRef = ref()
+const route = useRoute()
+
+watch(() => route.path, () => {
+  containerRef.value.scrollTo(0, 0)
+})
+
+const { isDark } = useLayoutStore()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <el-config-provider :locale="localeConfig" :z-index="4000">
+    <div
+      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
+      dark="bg-$el-fill-color-extra-light"
+      :style="{
+        backgroundImage: `url('${(isDark ? $config.public.loginBgDark : $config.public.loginBg) ?? '/login_bg.svg'}')`,
+      }"
+    >
+      <div
+        v-if="!reverse"
+        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
+      >
+        <el-dropdown trigger="click" @command="handleCommand">
+          <el-button text>
+            <el-icon size="22px">
+              <div class="i-carbon:language" />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
+                English
+              </el-dropdown-item>
+              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
+                Tiếng Việt
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <SSSwitchDark />
+      </div>
+      <div
+        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
+        dark="bg-$el-mask-color"
+        :class="[reverse ? 'flex-row-reverse' : '']"
+      >
+        <div class="login-left">
+          <div
+            v-if="$config.public.logoSigmaText && !$config.public.modeVtvHub"
+            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
+            dark="text-primary"
+          >
+            <span>
+              <img :src="$config.public.logo" alt="LS" class="h-52px w-52px">
+            </span>
+            <div>
+              <svg
+                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
+                  fill="currentColor"
+                />
+              </svg>
+
+              <div class="flex items-center gap-0.75">
+                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
+                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
+              </div>
+            </div>
+          </div>
+          <img :src="$config.public.loginImg ?? '/login_left0.png'" alt="login" :class="!$config.public.modeVtvHub ? 'w-750px!' : 'w-750px!'">
+        </div>
+
+        <el-scrollbar
+          ref="containerRef"
+          v-bind="$attrs"
+          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
+        >
+          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
+            <slot />
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+</i18n>

package/src/components/AutoRefresh/AutoRefresh.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { useRefresh } from './useRefresh'
+
+const props = withDefaults(defineProps<{
+  enabled?: boolean
+  disabled?: boolean
+  duration?: number
+  isLoading?: boolean
+  isError?: boolean
+  updatedAt?: number
+}>(), { enabled: false, disabled: false })
+
+const emit = defineEmits(['onRefresh'])
+
+const { enabled: _enabled, duration } = useVModels(props, emit, { defaultValue: { enabled: true }, passive: true })
+const { state } = useRefresh(props)
+
+function handleSetTimeRefresh(value: number) {
+  state.initDurationLabel = value
+  state.initDuration = value
+  duration.value = value
+  state.initEnabled = value !== 0
+  _enabled.value = value !== 0
+}
+watch([() => state.initDuration, () => state.initDurationLabel, () => state.initEnabled], () => {
+  if (state.initDuration === state.initDurationLabel && state.initEnabled)
+    emit('onRefresh')
+})
+
+function isDurationSelected(value: number) {
+  return state.initDurationLabel === value && state.initEnabled
+}
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center gap-2 text-sm">
+    <el-dropdown class="[&_.el-tooltip\_\_trigger]:outline-none" placement="top-end" @command="handleSetTimeRefresh">
+      <div class="flex items-center gap-2">
+        <div class="text-14px font-bold">
+          <span v-if="state.initEnabled"> ({{ state.initDuration ? state.initDuration : duration }}s)</span>
+          <!-- <span v-else>{{ t('autoRefreshOff') }}</span> -->
+        </div>
+        <div class="i-carbon:settings text-lg text-blue-500" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-if="!disabled" :command="0">
+            <div class="flex items-center gap-1" :class="state.initDurationLabel === 0 || !_enabled ? 'text-blue' : ''">
+              {{ t('off') }}
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item
+            v-for="(time, idx) in state.timeRefreshMap"
+            :key="idx"
+            :label="time"
+            :command="time"
+          >
+            <div class="flex items-center gap-1" :class="isDurationSelected(time) ? 'text-blue' : ''">
+              <div class="mr-1">
+                {{ t('autoRefresh') }} {{ time }}s
+              </div>
+            </div>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <!-- <el-button v-if="props.updatedAt" circle @click="emit('onRefresh')"> -->
+    <!-- </el-button> -->
+    <div class="i-ep:refresh cursor-pointer text-lg text-blue-500" :class="{ 'animate-spin': isLoading }" @click="emit('onRefresh')" />
+    <div v-if="props.updatedAt" class="min-w-140px text-sm">
+      {{ formatDateTime(props.updatedAt) }}
+    </div>
+    <div v-if="isError" class="min-w-110px text-sm text-error">
+      {{ $t('general.loading_failed') }}
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  autoRefresh: Refresh after
+  autoRefreshOff: Refresh
+  duration: Duration
+  off: Off
+vi:
+  autoRefresh: Làm mới sau
+  autoRefreshOff: Làm mới dữ liệu
+  duration: Thời gian
+  off: Tắt
+</i18n>