@sigmaott/base-next 1.0.6

package/src/composables/useGetInputDetail.ts

@@ -0,0 +1,36 @@
+interface ChannelOptions {
+  isTranscode?: MaybeRefOrGetter<boolean>
+  isPackage?: MaybeRefOrGetter<boolean>
+  isPlayout?: MaybeRefOrGetter<boolean>
+  isEvent?: MaybeRefOrGetter<boolean>
+  formValue: Ref<any>
+}
+
+export function useGetInputDetail(options: ChannelOptions) {
+  const isTranscode = resolveRef(options.isTranscode)
+  const isPlayout = resolveRef(options.isPlayout)
+  const isEvent = resolveRef(options.isEvent)
+  const isPackage = resolveRef(options.isPackage)
+  const formValue = resolveRef(options.formValue)
+
+  const id = computed(() => {
+    return (isTranscode.value || isPackage.value) ? formValue.value?.inputs?.[0]?.id : isEvent.value ? formValue.value?.inputs?.main?.inputId : ''
+  })
+
+  const { data: transcodeInput, isFetching: isFetchingTranscodeInput, refetch: refetchTranscodeInput } = useQuery({
+    queryKey: ['input-detail', id],
+    queryFn: () => $transcodeApi('api/transcode/transcode-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id.value }, headers: { noNotify: true } }),
+    enabled: computed(() => isTranscode.value && !!id.value),
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  })
+  const { data: packageInput, suspense: packageSuspense, isFetching: isFetchingPackageInput, refetch: refetchPackageInput } = useQuery({
+    queryKey: ['input-detail', id],
+    queryFn: () => $transcodeApi('api/transcode/package-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id.value }, headers: { noNotify: true } }),
+    enabled: computed(() => isPackage.value && !!id.value),
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  })
+
+  return { transcodeInput, packageInput }
+}

package/src/composables/useGetServerAddLicense.ts

@@ -0,0 +1,21 @@
+export async function useGetServerAddLicense() {
+  const isPermission = computed(() => {
+    return Boolean(APP_DETAIL_STORAGE.value?.[1]?.group?.permission?.find(item => item.apiGroupId === 'machine'))
+  })
+
+  const { data: serverAddLicense, isLoading, suspense, refetch } = useQuery(
+    ['getServerAddLicense'],
+    async () => await $machineApi('api/machine/sigma-machines/license-recommended/get-one', {
+      method: 'GET',
+    }),
+    {
+      enabled: computed(() => !!isPermission.value),
+      refetchOnWindowFocus: true,
+    },
+  )
+
+  await suspense()
+  syncRef(serverAddLicense, SERVER_ADD_LICENSE, { direction: 'ltr' })
+
+  return { serverAddLicense, refetch }
+}

package/src/composables/useJobPreview.ts

@@ -0,0 +1,438 @@
+import { parseURL, withQuery } from 'ufo'
+import { ElNotification } from 'element-plus'
+
+// Extend Window interface to include SigmaManager and shaka
+declare global {
+  interface Window {
+    SigmaManager: any
+    shaka: any
+  }
+}
+
+export function usePreviewLoader() {
+  // PLAYER
+
+  function loadScript(src: string): Promise<Event> {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.async = true
+      script.src = src
+      script.onload = resolve
+      script.onerror = reject
+      document.body.appendChild(script)
+    })
+  }
+
+  const drmSrc = 'https://rs.sigmadrm.com/sdk/sigmaplayer/2.0.0/SigmaPlayer.min.js'
+  let pendingPromise: Promise<any> | null = null
+
+  function promiseFinished() {
+    pendingPromise = null
+  }
+
+  function loadDrm() {
+    if (window.SigmaManager)
+      return Promise.resolve(window.SigmaManager)
+
+    if (pendingPromise)
+      return pendingPromise
+
+    pendingPromise = loadScript(drmSrc)
+      .then(() => window.SigmaManager)
+      .catch((error) => {
+        ElNotification.error({
+          title: 'Script Loading Error',
+          message: 'Failed to load SigmaPlayer script. Please check your internet connection and try again.',
+          duration: 5000,
+        })
+        throw error
+      })
+    pendingPromise.then(promiseFinished).catch(promiseFinished)
+    return pendingPromise
+  }
+
+  const isLoaded = ref(false)
+
+  onMounted(async () => {
+    try {
+      await loadDrm()
+      isLoaded.value = true
+    }
+    catch (error) {
+      console.error('Failed to load DRM script:', error)
+      isLoaded.value = false
+    }
+  })
+
+  //
+  const isLoaded2 = ref(false)
+
+  const shakaSrc = 'https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.4/shaka-player.compiled.js'
+  let pendingShakaPromise: Promise<any> | null = null
+
+  function promiseFinishedShaka() {
+    pendingShakaPromise = null
+  }
+  function loadShaka() {
+    if (window.shaka)
+      return Promise.resolve(window.shaka)
+
+    if (pendingShakaPromise)
+      return pendingShakaPromise
+
+    pendingShakaPromise = loadScript(shakaSrc)
+      .then(() => window.shaka)
+      .catch((error) => {
+        ElNotification.error({
+          title: 'Script Loading Error',
+          message: 'Failed to load Shaka Player script. Please check your internet connection and try again.',
+          duration: 5000,
+        })
+        throw error
+      })
+    pendingShakaPromise.then(promiseFinishedShaka).catch(promiseFinishedShaka)
+    return pendingShakaPromise
+  }
+
+  onMounted(async () => {
+    try {
+      await loadShaka()
+      isLoaded2.value = true
+    }
+    catch (error) {
+      console.error('Failed to load Shaka script:', error)
+      isLoaded2.value = false
+    }
+  })
+
+  return {
+    isLoaded,
+    isLoaded2,
+  }
+  // END PLAYER
+}
+
+interface ChannelActions {
+  handleChannel?: (...rest: any) => void
+  switchBlackout?: (...rest: any) => void
+}
+
+const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
+  const { isLoaded, isLoaded2 } = usePreviewLoader()
+
+  const actions = ref<Required<ChannelActions>>({
+    handleChannel: () => {},
+    switchBlackout: () => {},
+  })
+
+  const paramQueryPreview = ref({
+    channelId: '',
+    jobId: '',
+  })
+  const playVisible = ref(false)
+
+  const channelName = ref('')
+  const blackoutActive = ref('')
+  const srcPreview1 = ref('')
+  const srcPreview2 = ref('')
+
+  const vttLink = ref(undefined)
+  // new mode replace catchup | live
+  const playMode1 = ref('catchup')
+  const playMode2 = ref('catchup')
+  const catchupEnabled = ref(false)
+  function getCatchupTime() {
+    return [dayjs().subtract(1, 'hour').format('HH:mm:ss'), dayjs().format('HH:mm:ss')]
+  }
+
+  function getTimeshiftTime() {
+    return 30
+  }
+
+  function getDelayTime() {
+    return 30
+  }
+
+  const catchupTime1 = ref(getCatchupTime())
+  const catchupTime2 = ref(getCatchupTime())
+  const delayTime1 = ref(getDelayTime())
+  const delayTime2 = ref(getDelayTime())
+  const timeshiftTime1 = ref(getTimeshiftTime())
+  const timeshiftTime2 = ref(getTimeshiftTime())
+  const typeOutput = ref('hls')
+  const nameOutput = ref('')
+  const drm1 = ref()
+  const drm2 = ref()
+  const drmCredentials = ref('')
+  const videoType1 = ref(typeOutput.value === 'hls-dash' ? 'hls' : typeOutput.value)
+  const videoType2 = ref(typeOutput.value === 'hls-dash' ? 'hls' : typeOutput.value)
+  const channelType = ref('transcode')
+  const isEventChannel = computed(() => channelType.value === 'event')
+  const enableForensicWatermarkAB = ref(false)
+
+  const isSigmaMediaServer = ref(false)
+  const serverId = ref('')
+
+  const channelId = computed(() => paramQueryPreview.value.channelId)
+  const jobId = computed(() => paramQueryPreview.value.jobId)
+
+  const { data, refetch } = useQuery(
+    ['preview-job', isEventChannel, channelId, jobId],
+    async () => {
+      if (channelType.value === 'playout') {
+        return await $playoutApi('api/playout/fast-channels/{id}/jobs/{jobId}/actions/get-preview', {
+          method: 'GET',
+          pathParams: {
+            id: channelId.value,
+            jobId: jobId.value,
+          },
+        })
+      }
+
+      const endpoint = isEventChannel.value
+        ? 'api/transcode/event-channels/{channelId}/jobs/{jobId}/actions/get-preview'
+        : 'api/transcode/channels/{channelId}/jobs/{jobId}/actions/get-preview'
+      return await $transcodeApi(endpoint, {
+        method: 'GET',
+        pathParams: {
+          channelId: channelId.value,
+          jobId: jobId.value,
+        },
+      })
+    },
+    {
+      enabled: computed(() => (!!paramQueryPreview.value.channelId && !!paramQueryPreview.value.jobId)),
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    },
+  )
+
+  // hh:mm:ss to timestamp
+  function convertToTimestamp(time: string) {
+    const dateObject = dayjs(time, 'HH:mm:ss')
+    return Math.floor(dateObject.valueOf() / 1000)
+  }
+
+  // TODO: update the logic for playMode
+  function handleChangeSrc({
+    srcStr,
+    playMode,
+    catchupTime,
+    delayTime,
+    timeshiftTime,
+    videoType,
+  }: {
+    srcStr?: string
+    playMode: string
+    catchupTime?: string[]
+    delayTime?: number
+    timeshiftTime?: number
+    videoType?: string
+  }) {
+    const ext = videoType === 'hls' ? '.m3u8' : '.mpd'
+    const originalSrc = isEventChannel.value
+      ? data.value.url
+      : Array.isArray(data.value?.url)
+        ? data.value?.url?.find((item: string) => item.includes(ext))
+        : data.value?.url
+
+    const parsedSrc = parseURL((srcStr || originalSrc).replace('.m3u8', ext).replace('.mpd', ext))
+
+    const src = parsedSrc.protocol && parsedSrc.host
+      ? `${parsedSrc.protocol}//${parsedSrc.host}${parsedSrc.pathname}`
+      : parsedSrc.pathname
+
+    if (playMode === 'catchup') {
+      return withQuery(src, {
+        start: convertToTimestamp(catchupTime[0]),
+        stop: convertToTimestamp(catchupTime[1]),
+      })
+    }
+    else if (playMode === 'live') {
+      return src
+    }
+    else if (playMode === 'delay') {
+      return withQuery(src, {
+        delay: delayTime,
+      })
+    }
+    else if (playMode === 'timeshift') {
+      return withQuery(src, {
+        timeshift: timeshiftTime,
+      })
+    }
+    return src
+  }
+
+  function handleUpdateBlackoutMode(value: boolean) {
+    blackoutActive.value = value
+  }
+
+  async function handlePlayback(payload: {
+    channelId: string
+    jobId: string
+    type: string
+    channelName: string
+    blackoutActive: boolean
+    typeOutput?: string
+    nameOutput?: string
+    drm?: any
+    channelType?: string
+    catchupEnabled?: boolean
+    enableForensicWatermarkAB?: boolean
+  }, actionsObj: ChannelActions = {}) {
+    paramQueryPreview.value.jobId = payload.jobId
+    paramQueryPreview.value.channelId = payload.channelId
+    channelType.value = payload.channelType ?? ''
+    channelName.value = payload.channelName
+    blackoutActive.value = payload.blackoutActive
+    console.log('🚀 ~ const[useJobPreview,useInjectJobPreview]=createInjectionState ~ payload:', payload)
+    enableForensicWatermarkAB.value = payload.enableForensicWatermarkAB
+
+    actions.value = {
+      handleChannel: actionsObj.handleChannel || (() => {}),
+      switchBlackout: actionsObj.switchBlackout || (() => {}),
+    }
+
+    const data = await refetch()
+    serverId.value = data.data?.machineConfig?.machineId
+    isSigmaMediaServer.value = data.data?.machineConfig?.machineType === 'SIGMA_MACHINE'
+
+    catchupTime1.value = getCatchupTime()
+    catchupTime2.value = getCatchupTime()
+    delayTime1.value = getDelayTime()
+    delayTime2.value = getDelayTime()
+    timeshiftTime1.value = getTimeshiftTime()
+    timeshiftTime2.value = getTimeshiftTime()
+
+    const ext = (payload.typeOutput === 'hls-dash' ? 'hls' : payload.typeOutput) === 'hls' ? '.m3u8' : '.mpd'
+
+    catchupEnabled.value = payload.catchupEnabled
+    if (payload.type === 'catchup') {
+      playMode1.value = 'catchup'
+      playMode2.value = 'catchup'
+    }
+    else if (payload.type === 'package') {
+      playMode1.value = 'live'
+      playMode2.value = 'live'
+    }
+
+    // SESSION: drm
+    drm1.value = {
+      ...payload.drm,
+      sessionId: '',
+      userId: '',
+      appId: '',
+      merchantId: '',
+    } || undefined
+    drm2.value = {
+      ...payload.drm,
+      sessionId: '',
+      userId: '',
+      appId: '',
+      merchantId: '',
+    } || undefined
+
+    const keyProviderValue = payload.drm?.keyProvider === 'drmtoday' ? 'DRM_TODAY' : 'SIGMA'
+
+    if (channelType.value === 'playout' && payload.drm?.enable) {
+      const res = await $playoutApi('/api/playout/drm-credentials', {
+        page: 1,
+        perPage: 10,
+        q: '',
+        sort: '',
+        provider: keyProviderValue,
+      })
+
+      drmCredentials.value = res.data?.find(item => item.id === payload.drm?.drmManagementId)?.name
+    }
+    else if ((channelType.value === 'transcode' || channelType.value === 'package' || channelType.value === 'event') && payload.drm?.enable) {
+      const res = await $transcodeApi('/api/transcode/drm-credentials', {
+        page: 1,
+        perPage: 1000,
+        provider: keyProviderValue,
+      })
+      drmCredentials.value = res.data?.find(item => item.id === payload.drm?.drmManagementId)?.name
+    }
+    // END SESSION: drm
+
+    typeOutput.value = payload.typeOutput ?? ''
+    nameOutput.value = payload.nameOutput ?? ''
+    typeOutput.value = payload.typeOutput ?? ''
+    nameOutput.value = payload.nameOutput ?? ''
+    videoType1.value = videoType2.value = typeOutput.value === 'hls-dash' ? 'hls' : typeOutput.value
+
+    srcPreview1.value = handleChangeSrc({
+      playMode: playMode1.value,
+      catchupTime: catchupTime1.value,
+      delayTime: delayTime1.value,
+      timeshiftTime: timeshiftTime1.value,
+      videoType: videoType1.value,
+    })
+
+    srcPreview2.value = handleChangeSrc({
+      playMode: playMode2.value,
+      catchupTime: catchupTime2.value,
+      delayTime: delayTime2.value,
+      timeshiftTime: timeshiftTime2.value,
+      videoType: videoType2.value,
+    })
+
+    playVisible.value = true
+  }
+
+  const isHls1 = computed(() => videoType1.value === 'hls')
+  const isDash1 = computed(() => videoType1.value === 'dash')
+  const isHls2 = computed(() => videoType2.value === 'hls')
+  const isDash2 = computed(() => videoType2.value === 'dash')
+
+  return {
+    paramQueryPreview,
+    data,
+    refetch,
+    srcPreview1,
+    srcPreview2,
+    catchupTime1,
+    catchupTime2,
+    delayTime1,
+    delayTime2,
+    timeshiftTime1,
+    timeshiftTime2,
+    handlePlayback,
+    handleChangeSrc,
+    handleUpdateBlackoutMode,
+    vttLink,
+    playVisible,
+    playMode1,
+    playMode2,
+    //
+    nameOutput,
+    typeOutput,
+    drm1,
+    drm2,
+    drmCredentials,
+    //
+    videoType1,
+    videoType2,
+    isHls1,
+    isDash1,
+    isHls2,
+    isDash2,
+    channelType,
+    isSigmaMediaServer,
+    serverId,
+    isLoaded,
+    isLoaded2,
+    catchupEnabled,
+    channelId,
+    channelName,
+    blackoutActive,
+    actions,
+    enableForensicWatermarkAB,
+  }
+})
+
+export {
+  useJobPreview,
+  useInjectJobPreview,
+}

package/src/composables/useLayoutStore.ts

@@ -0,0 +1,106 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { createInjectionState, useStorage, useToggle } from '@vueuse/core'
+import { StorageKeys } from '../enums'
+import { __IS_DARK__, __LANGUAGE__ } from '../constants/storage'
+
+interface LayoutOptions {
+  namespace: Ref<string>
+  asideWidth: Ref<number>
+  name: Ref<string>
+  routes: Ref<RouteRecordRaw[]>
+  logoSrc: Ref<string>
+  backgroundColor: Ref<string>
+  backgroundColorLogo: Ref<string>
+  layoutMode: Ref<'vertical' | 'horizontal'>
+  version: Ref<string>
+}
+
+const [useProvideLayoutStore, useLayoutStoreRaw] = createInjectionState((options: Partial<LayoutOptions>) => {
+  // state
+
+  const isDark = useDark()
+  syncRef(isDark, __IS_DARK__)
+  const { locale: lang } = useI18n({ useScope: 'global' })
+  syncRef(lang, __LANGUAGE__)
+
+  const sideBarLoading = ref(false)
+  const namespace = ref(options.namespace?.value || 'el')
+  const title = ref(options.name?.value || ' Sigma')
+  const logoSrc = ref(options.logoSrc?.value || '/logo.png')
+  const backgroundColor = ref(options.backgroundColor?.value || '#1d1e1f')
+  const backgroundColorLogo = ref(options.backgroundColorLogo?.value || '#141414')
+  const showAside = computed(() => options.layoutMode?.value === 'vertical')
+  // aside
+  const asideWidth = ref(options.asideWidth?.value || 200)
+
+  // getters
+  // const asideStyles = computed(() => {
+  //   return asideCollapsed.value ? '' : `width: ${asideWidth.value}px;`
+  // })
+
+  // actions
+  const toggleAside = useToggle(asideCollapsed)
+
+  const wujieProps = window.$wujie?.props
+
+  const rightMenu = computed(() => {
+    return wujieProps?.rightMenu !== false
+  })
+
+  const textColor = computed(() => {
+    return showAside.value
+      ? 'rgba(255, 255, 255, 1.0)'
+      : isDark.value
+        ? 'rgba(255, 255, 255, 1.0)'
+        : 'rgba(0, 0, 0, 1.0)'
+  })
+
+  const route = useRoute()
+
+  const activeMenu = computed(() => {
+    const path = route.path
+    const params = route.params
+    // remove params from path
+    const values = Object.values(params)
+    let newPath = path
+    values.forEach((value) => {
+      newPath = newPath.replace(`/${value}`, '')
+    })
+
+    return newPath
+  })
+
+  return {
+    routes: options.routes!,
+    namespace,
+    asideWidth,
+    // asideStyles,
+    asideCollapsed,
+    toggleAside,
+    title,
+    logoSrc,
+    isDark,
+    backgroundColor,
+    backgroundColorLogo,
+    __LANGUAGE__,
+    lang,
+    showAside,
+    layoutMode: options.layoutMode,
+    sideBarLoading,
+    rightMenu,
+    version: options.version,
+    textColor,
+    activeMenu,
+  }
+})
+
+export { useProvideLayoutStore }
+
+export function useLayoutStore() {
+  const layoutStore = useLayoutStoreRaw()
+  if (layoutStore == null)
+    throw new Error('Please call `useProvideLayoutStore` on the appropriate parent component')
+  return layoutStore
+}

package/src/composables/usePermission.ts

@@ -0,0 +1,5 @@
+export function getPermission(micro: string) {
+  const permission = APP_DETAIL_STORAGE.value?.[1]?.group?.permission?.find(item => item.apiGroupId === micro)
+  const isFullPermission = !!(permission && permission?.mode === 'FULL') as boolean
+  return { isFullPermission }
+}

package/src/composables/usePickerStore.ts

@@ -0,0 +1,53 @@
+import { createInjectionState } from '@vueuse/core'
+import type { AxiosInstance } from 'axios'
+
+interface Options {
+  assetDomain?: string
+}
+
+const [useProvidePickerStore, useStore] = createInjectionState((options: Options) => {
+  // state
+  const assetDomain = ref(options.assetDomain || '')
+  // getters
+
+  // actions
+
+  return {
+    assetDomain,
+  }
+})
+
+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
+}