@sigmaott/base-next 1.4.58 → 1.4.60

package/src/composables/useJobPreview.ts

@@ -1,11 +1,11 @@
-import { parseURL, withQuery } from 'ufo'
-import { ElNotification } from 'element-plus'
+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
+    SigmaManager: any;
+    shaka: any;
   }
 }
 
@@ -14,203 +14,215 @@ export function usePreviewLoader() {
 
   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 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
+  // const drmSrc = 'https://rs.sigmadrm.com/sdk/sigmaplayer/2.0.0/SigmaPlayer.min.js'
+  const drmSrc = "/scripts/SigmaPlayer.min.js";
+  let pendingPromise: Promise<any> | null = null;
 
   function promiseFinished() {
-    pendingPromise = null
+    pendingPromise = null;
   }
 
   function loadDrm() {
-    if (window.SigmaManager)
-      return Promise.resolve(window.SigmaManager)
+    if (window.SigmaManager) return Promise.resolve(window.SigmaManager);
 
-    if (pendingPromise)
-      return pendingPromise
+    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.',
+          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
+        });
+        throw error;
+      });
+    pendingPromise.then(promiseFinished).catch(promiseFinished);
+    return pendingPromise;
   }
 
-  const isLoaded = ref(false)
+  const isLoaded = ref(false);
 
   onMounted(async () => {
     try {
-      await loadDrm()
-      isLoaded.value = true
+      await loadDrm();
+      isLoaded.value = true;
+    } catch (error) {
+      console.error("Failed to load DRM script:", error);
+      isLoaded.value = false;
     }
-    catch (error) {
-      console.error('Failed to load DRM script:', error)
-      isLoaded.value = false
-    }
-  })
+  });
 
   //
-  const isLoaded2 = ref(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
+  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
+    pendingShakaPromise = null;
   }
   function loadShaka() {
-    if (window.shaka)
-      return Promise.resolve(window.shaka)
+    if (window.shaka) return Promise.resolve(window.shaka);
 
-    if (pendingShakaPromise)
-      return pendingShakaPromise
+    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.',
+          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
+        });
+        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
+      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
+  handleChannel?: (...rest: any) => void;
+  switchBlackout?: (...rest: any) => void;
 }
 
 const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
-  const { isLoaded, isLoaded2 } = usePreviewLoader()
+  const { isLoaded, isLoaded2 } = usePreviewLoader();
 
   const actions = ref<Required<ChannelActions>>({
     handleChannel: () => {},
     switchBlackout: () => {},
-  })
+  });
 
   const paramQueryPreview = ref({
-    channelId: '',
-    jobId: '',
-  })
-  const playVisible = ref(false)
+    channelId: "",
+    jobId: "",
+  });
+  const playVisible = ref(false);
 
-  const channelName = ref('')
-  const blackoutActive = ref('')
-  const srcPreview1 = ref('')
-  const srcPreview2 = ref('')
+  const channelName = ref("");
+  const blackoutActive = ref("");
+  const srcPreview1 = ref("");
+  const srcPreview2 = ref("");
 
-  const vttLink = ref(undefined)
+  const vttLink = ref(undefined);
   // new mode replace catchup | live
-  const playMode1 = ref('catchup')
-  const playMode2 = ref('catchup')
-  const catchupEnabled = ref(false)
+  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')]
+    return [
+      dayjs().subtract(1, "hour").format("HH:mm:ss"),
+      dayjs().format("HH:mm:ss"),
+    ];
   }
 
   function getTimeshiftTime() {
-    return 30
+    return 30;
   }
 
   function getDelayTime() {
-    return 30
+    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 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],
+    ["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,
+      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'
+        ? "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',
+        method: "GET",
         pathParams: {
           channelId: channelId.value,
           jobId: jobId.value,
         },
-      })
+      });
     },
     {
-      enabled: computed(() => (!!paramQueryPreview.value.channelId && !!paramQueryPreview.value.jobId)),
+      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)
+    const dateObject = dayjs(time, "HH:mm:ss");
+    return Math.floor(dateObject.valueOf() / 1000);
   }
 
   // TODO: update the logic for playMode
@@ -222,145 +234,166 @@ const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
     timeshiftTime,
     videoType,
   }: {
-    srcStr?: string
-    playMode: string
-    catchupTime?: string[]
-    delayTime?: number
-    timeshiftTime?: number
-    videoType?: string
+    srcStr?: string;
+    playMode: string;
+    catchupTime?: string[];
+    delayTime?: number;
+    timeshiftTime?: number;
+    videoType?: string;
   }) {
-    const ext = videoType === 'hls' ? '.m3u8' : '.mpd'
+    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
+        : data.value?.url;
 
-    const parsedSrc = parseURL((srcStr || originalSrc).replace('.m3u8', ext).replace('.mpd', ext))
+    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
+    const src =
+      parsedSrc.protocol && parsedSrc.host
+        ? `${parsedSrc.protocol}//${parsedSrc.host}${parsedSrc.pathname}`
+        : parsedSrc.pathname;
 
-    if (playMode === 'catchup') {
+    if (playMode === "catchup") {
       return withQuery(src, {
         start: convertToTimestamp(catchupTime[0]),
         stop: convertToTimestamp(catchupTime[1]),
-      })
-    }
-    else if (playMode === 'live') {
-      return src
-    }
-    else if (playMode === 'delay') {
+      });
+    } else if (playMode === "live") {
+      return src;
+    } else if (playMode === "delay") {
       return withQuery(src, {
         delay: delayTime,
-      })
-    }
-    else if (playMode === 'timeshift') {
+      });
+    } else if (playMode === "timeshift") {
       return withQuery(src, {
         timeshift: timeshiftTime,
-      })
+      });
     }
-    return src
+    return src;
   }
 
   function handleUpdateBlackoutMode(value: boolean) {
-    blackoutActive.value = value
+    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
+  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'
+    };
+
+    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', {
+    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: '',
+        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', {
+      });
+
+      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
+      });
+      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
+    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,
@@ -368,7 +401,7 @@ const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
       delayTime: delayTime1.value,
       timeshiftTime: timeshiftTime1.value,
       videoType: videoType1.value,
-    })
+    });
 
     srcPreview2.value = handleChangeSrc({
       playMode: playMode2.value,
@@ -376,15 +409,15 @@ const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
       delayTime: delayTime2.value,
       timeshiftTime: timeshiftTime2.value,
       videoType: videoType2.value,
-    })
+    });
 
-    playVisible.value = true
+    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')
+  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,
@@ -429,10 +462,7 @@ const [useJobPreview, useInjectJobPreview] = createInjectionState(() => {
     blackoutActive,
     actions,
     enableForensicWatermarkAB,
-  }
-})
+  };
+});
 
-export {
-  useJobPreview,
-  useInjectJobPreview,
-}
+export { useJobPreview, useInjectJobPreview };