@sigmaott/base-next 1.4.0 → 1.4.2

package/src/composables/useJobPreview.ts

@@ -1,438 +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,
-}
+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,
+}