[SHOPTIME-3535] 시청로그 중 오류 케이스 확인 요청

Changed files:
1. logActions.js
2. VideoPlayer.js
3. helperMethods.js
4. PlayerPanel.jsx

Detail note:
1. "sendLogLive", "sendLogVOD" 요청시 "getTimeDifferenceByMilliseconds" 함수 조건 추가
2.  "setIsVideoPaused" 프롭스 설정 및 If문 조건 추가
3. "getTimeDifferenceByMilliseconds" 함수 추가
4. "LIVE", "VOD", "MEDIA" 로그 생성 로직 변경

com.twin.app.shoptime/src/actions/logActions.js

@@ -1,7 +1,10 @@
 import { URLS } from "../api/apiConfig";
 import { TLogEvent } from "../api/TLogEvent";
 import { LOG_TP_NO } from "../utils/Config";
-import { formatGMTString } from "../utils/helperMethods";
+import {
+  formatGMTString,
+  getTimeDifferenceByMilliseconds,
+} from "../utils/helperMethods";
 import { types } from "./actionTypes";
 import { setSecondLayerInfo } from "./commonActions";
 
@@ -24,7 +27,7 @@ export const getUrlByLogTpNo = (logTpNo) => {
     case LOG_TP_NO.VOD.ITEM_DETAIL_MEDIA:
       return URLS.LOG_VOD;
 
-    // IF-LGSP-LOG-003 / Curations View 이력
+    // IF-LGSP-LOG-003 / Curation View 이력
     case LOG_TP_NO.CURATION.HOT_PICKS:
     case LOG_TP_NO.CURATION.SHOWROOM:
     case LOG_TP_NO.CURATION.ON_SALE:
@@ -225,7 +228,7 @@ export const sendLogLive = (params, callback) => (dispatch, getState) => {
     watchEndDt: params?.watchEndDt ?? formatGMTString(new Date()),
   };
 
-  if (newParams.watchEndDt !== watchStrtDt) {
+  if (getTimeDifferenceByMilliseconds(watchStrtDt, newParams.watchEndDt)) {
     dispatch(postLog(newParams));
 
     if (callback) {
@@ -290,7 +293,7 @@ export const sendLogVOD = (params, callback) => (dispatch, getState) => {
     watchEndDt: params?.watchEndDt ?? formatGMTString(new Date()),
   };
 
-  if (newParams.watchEndDt !== watchStrtDt) {
+  if (getTimeDifferenceByMilliseconds(watchStrtDt, newParams.watchEndDt)) {
     dispatch(postLog(newParams));
 
     if (callback) {

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js

@@ -2180,6 +2180,7 @@ const VideoPlayerBase = class extends React.Component {
       captionEnable,
       countryCode,
       setCurrentTime,
+      setIsVODPaused,
       ...mediaProps
     } = this.props;
 
@@ -2276,6 +2277,13 @@ const VideoPlayerBase = class extends React.Component {
       }
     };
 
+    if (
+      panelInfo?.shptmBanrTpNm === "VOD" ||
+      panelInfo?.shptmBanrTpNm === "MEDIA"
+    ) {
+      setIsVODPaused(this.state.paused);
+    }
+
     return (
       <RootContainer
         className={classNames(

com.twin.app.shoptime/src/utils/helperMethods.js

@@ -503,3 +503,24 @@ export const formatCurrencyValue = (
     ? `${sign}${currSign} ${formattedValue}`
     : `${sign}${formattedValue} ${currSign}`;
 };
+
+export const getTimeDifferenceByMilliseconds = (
+  startTimeString,
+  endTimeString,
+  threshold = 1000
+) => {
+  // dateTimePattern: YYYY-MM-DD HH:MM:SS
+  const dateTimePattern = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
+  const startMatches = startTimeString.match(dateTimePattern);
+  const endMatches = endTimeString.match(dateTimePattern);
+
+  if (!startMatches || !endMatches) {
+    return false;
+  }
+
+  const convertedStartTime = new Date(startTimeString.replace(/ /, "T") + "Z");
+  const convertedEndTime = new Date(endTimeString.replace(/ /, "T") + "Z");
+  const timeDifference = convertedEndTime - convertedStartTime;
+
+  return timeDifference > threshold;
+};

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -1,64 +1,53 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import { Job } from '@enact/core/util';
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
-import dummyVtt from '../../../assets/mock/video.vtt';
+import dummyVtt from "../../../assets/mock/video.vtt";
 import {
   changeAppStatus,
   changeLocalSettings,
   requestLiveSubtitle,
   sendBroadCast,
-} from '../../actions/commonActions';
-import {
-  sendLogGNB,
-  sendLogLive,
-  sendLogVOD,
-} from '../../actions/logActions';
+} from "../../actions/commonActions";
+import { sendLogGNB, sendLogLive, sendLogVOD } from "../../actions/logActions";
 import {
   clearShopNowInfo,
   getHomeFullVideoInfo,
   getMainCategoryShowDetail,
   getMainLiveShow,
   getMainLiveShowNowProduct,
-} from '../../actions/mainActions';
-import * as PanelActions from '../../actions/panelActions';
-import { updatePanel } from '../../actions/panelActions';
+} from "../../actions/mainActions";
+import * as PanelActions from "../../actions/panelActions";
+import { updatePanel } from "../../actions/panelActions";
 import {
   CLEAR_PLAYER_INFO,
   getChatLog,
   getSubTitle,
   startVideoPlayer,
-} from '../../actions/playActions';
-import { convertUtcToLocal } from '../../components/MediaPlayer/util';
-import TPanel from '../../components/TPanel/TPanel';
-import VideoOverlayWithPhoneNumber
-  from '../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber';
-import Media from '../../components/VideoPlayer/Media';
-import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
-import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
-import usePrevious from '../../hooks/usePrevious';
-import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';
-import * as Config from '../../utils/Config';
-import { panel_names } from '../../utils/Config';
-import { formatGMTString } from '../../utils/helperMethods';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat';
-import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
-import css from './PlayerPanel.module.less';
-import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
-import TabContainer from './PlayerTabContents/TabContainer';
+} from "../../actions/playActions";
+import { convertUtcToLocal } from "../../components/MediaPlayer/util";
+import TPanel from "../../components/TPanel/TPanel";
+import VideoOverlayWithPhoneNumber from "../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
+import Media from "../../components/VideoPlayer/Media";
+import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
+import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
+import usePrevious from "../../hooks/usePrevious";
+import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
+import * as Config from "../../utils/Config";
+import { panel_names } from "../../utils/Config";
+import { formatGMTString } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
+import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
+import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
+import css from "./PlayerPanel.module.less";
+import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton";
+import TabContainer from "./PlayerTabContents/TabContainer";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveld: true },
@@ -211,6 +200,7 @@ const PlayerPanel = ({
     isFullMediaLogReady: false,
     isDetailMediaReady: false,
   });
+  const [isVODPaused, setIsVODPaused] = USE_STATE("isVODPaused", false);
 
   const panels = USE_SELECTOR("panels", (state) => state.panels.panels);
   const chatData = USE_SELECTOR("chatData", (state) => state.play.chatData);
@@ -290,15 +280,39 @@ const PlayerPanel = ({
   const prevNowMenuRef = useRef(null);
   const watchInterval = useRef(null);
 
-  const currentLiveChanId = useMemo(() => {
-    return panelInfo?.chanId || "";
-  }, [panelInfo?.chanId]);
+  const currentLiveShowInfo = useMemo(() => {
+    if (liveShowInfos && liveShowInfos.length > 0) {
+      const panelInfoChanId = panelInfo?.chanId;
+      const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
 
-  const currentVodShowId = useMemo(() => {
-    if (showDetailInfo) {
-      return showDetailInfo[0]?.showId || "";
+      if (isLive) {
+        const liveShowInfo = liveShowInfos //
+          .find(({ chanId }) => panelInfoChanId === chanId);
+
+        return liveShowInfo;
       }
-  }, [showDetailInfo]);
+
+      return {};
+    }
+
+    return {};
+  }, [liveShowInfos, panelInfo?.chanId, panelInfo?.shptmBanrTpNm]);
+
+  const currentVODShowInfo = useMemo(() => {
+    if (showDetailInfo && showDetailInfo.length > 0) {
+      const isVOD = panelInfo?.shptmBanrTpNm === "VOD";
+
+      if (isVOD) {
+        const vodShowInfo = showDetailInfo[0];
+
+        return vodShowInfo;
+      }
+
+      return {};
+    }
+
+    return {};
+  }, [panelInfo?.shptmBanrTpNm, showDetailInfo]);
 
   useEffect(() => {
     if (!panelInfo?.modal && panelInfo?.shptmBanrTpNm === "MEDIA") {
@@ -309,13 +323,27 @@ const PlayerPanel = ({
     }
   }, [panelInfo?.modal, panelInfo?.shptmBanrTpNm]);
 
+  // creating live log params
   useEffect(() => {
-    // case live
-    if (
-      liveShowInfos &&
-      panelInfo?.chanId &&
-      panelInfo?.shptmBanrTpNm === "LIVE"
-    ) {
+    if (currentLiveShowInfo && Object.keys(currentLiveShowInfo).length > 0) {
+      if (currentLiveShowInfo.showId !== panelInfo?.showId) {
+        dispatch(
+          updatePanel({
+            name: panel_names.PLAYER_PANEL,
+            panelInfo: {
+              chanId: currentLiveShowInfo.chanId,
+              modalContainerId:
+                "spotlightId-" + removeDotAndColon(currentLiveShowInfo.showId),
+              patnrId: currentLiveShowInfo.patnrId,
+              showId: currentLiveShowInfo.showId,
+              showUrl: currentLiveShowInfo.showUrl,
+            },
+          })
+        );
+
+        return;
+      }
+
       let logTemplateNo;
 
       if (isOnTop && panelInfo?.modal) {
@@ -330,39 +358,156 @@ const PlayerPanel = ({
       //
       else if (!isOnTop && !panelInfo?.modal) {
         logTemplateNo = Config.LOG_TP_NO.LIVE.ITEM_DETAIL;
-        setLogStatus((status) => ({
-          ...status,
-          isDetailLiveLogReady: true,
-        }));
+        setLogStatus((status) => ({ ...status, isDetailLiveLogReady: true }));
       }
 
-      const currentLiveShowInfo = liveShowInfos //
-        .find(({ chanId }) => panelInfo?.chanId === chanId);
-
       liveLogParamsRef.current = {
         entryMenu: entryMenuRef.current,
-        lgCatCd: currentLiveShowInfo?.catCd ?? "",
-        lgCatNm: currentLiveShowInfo?.catNm ?? "",
+        lgCatCd: currentLiveShowInfo.catCd ?? "",
+        lgCatNm: currentLiveShowInfo.catNm ?? "",
         linkTpCd: panelInfo?.linkTpCd ?? "",
         logTpNo: logTemplateNo,
         nowMenu: nowMenuRef.current,
-        patncNm: currentLiveShowInfo?.patncNm,
-        patnrId: currentLiveShowInfo?.patnrId,
-        showId: currentLiveShowInfo?.showId,
-        showNm: currentLiveShowInfo?.showNm,
-        vdoTpNm: currentLiveShowInfo?.vtctpYn
+        patncNm: currentLiveShowInfo.patncNm,
+        patnrId: currentLiveShowInfo.patnrId,
+        showId: currentLiveShowInfo.showId,
+        showNm: currentLiveShowInfo.showNm,
+        vdoTpNm: currentLiveShowInfo.vtctpYn
           ? currentLiveShowInfo.vtctpYn === "Y"
             ? "Vertical"
             : "Horizontal"
           : "",
       };
     }
+  }, [
+    currentLiveShowInfo,
+    isOnTop,
+    nowMenu,
+    panelInfo?.linkTpCd,
+    panelInfo?.modal,
+    panelInfo?.showId,
+    setLogStatus,
+  ]);
 
-    // case vod
+  // send live log
+  useEffect(() => {
+    if (broadcast && Object.keys(broadcast).length === 0) {
+      // case: live, modal
       if (
-      panelInfo?.shptmBanrTpNm === "VOD" &&
-      showDetailInfo &&
-      showDetailInfo?.length > 0
+        logStatus.isModalLiveLogReady &&
+        isOnTop &&
+        panelInfo?.modal &&
+        liveLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...liveLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isModalLiveLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+
+      // case: live, full
+      if (
+        logStatus.isFullLiveLogReady &&
+        isOnTop &&
+        !panelInfo?.modal &&
+        liveLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...liveLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isFullLiveLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+
+      // case: live, item detail
+      if (
+        logStatus.isDetailLiveLogReady &&
+        !isOnTop &&
+        !panelInfo?.modal &&
+        liveLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...liveLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isDetailLiveLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+    }
+  }, [
+    broadcast,
+    isOnTop,
+    logStatus.isDetailLiveLogReady,
+    logStatus.isFullLiveLogReady,
+    logStatus.isModalLiveLogReady,
+    panelInfo?.modal,
+    panelInfo?.showId,
+    setLogStatus,
+  ]);
+
+  // creating VOD log params
+  useEffect(() => {
+    if (
+      currentVODShowInfo &&
+      Object.keys(currentVODShowInfo).length > 0 &&
+      !isVODPaused
     ) {
       let logTemplateNo;
 
@@ -381,29 +526,151 @@ const PlayerPanel = ({
         setLogStatus((status) => ({ ...status, isDetailVodLogReady: true }));
       }
 
-      const currentVodShowInfo = showDetailInfo[0];
-
       vodLogParamsRef.current = {
         entryMenu: entryMenuRef.current,
-        lgCatCd: currentVodShowInfo?.showCatCd ?? "",
-        lgCatNm: currentVodShowInfo?.showCatNm ?? "",
+        lgCatCd: currentVODShowInfo?.showCatCd ?? "",
+        lgCatNm: currentVODShowInfo?.showCatNm ?? "",
         logTpNo: logTemplateNo,
         linkTpCd: panelInfo?.linkTpCd ?? "",
         nowMenu: nowMenuRef.current,
-        patncNm: currentVodShowInfo?.patncNm,
-        patnrId: currentVodShowInfo?.patnrId,
-        showId: currentVodShowInfo?.showId,
-        showNm: currentVodShowInfo?.showNm,
-        vdoTpNm: currentVodShowInfo?.vtctpYn
-          ? currentVodShowInfo.vtctpYn === "Y"
+        patncNm: currentVODShowInfo?.patncNm,
+        patnrId: currentVODShowInfo?.patnrId,
+        showId: currentVODShowInfo?.showId,
+        showNm: currentVODShowInfo?.showNm,
+        vdoTpNm: currentVODShowInfo?.vtctpYn
+          ? currentVODShowInfo.vtctpYn === "Y"
             ? "Vertical"
             : "Horizontal"
           : "",
       };
     }
+  }, [
+    currentVODShowInfo,
+    isOnTop,
+    isVODPaused,
+    nowMenu,
+    panelInfo?.linkTpCd,
+    panelInfo?.modal,
+    setLogStatus,
+  ]);
 
-    // case media
-    if (panelInfo?.shptmBanrTpNm === "MEDIA" && isOnTop) {
+  // send VOD log
+  useEffect(() => {
+    if (broadcast && Object.keys(broadcast).length === 0 && !isVODPaused) {
+      // case: VOD, modal
+      if (
+        logStatus.isModalVodLogReady &&
+        isOnTop &&
+        panelInfo?.modal &&
+        vodLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...vodLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isModalVodLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+
+      // case: VOD, full
+      if (
+        logStatus.isFullVodLogReady &&
+        isOnTop &&
+        !panelInfo?.modal &&
+        vodLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...vodLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isFullVodLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+
+      // case: VOD, item detail
+      if (
+        logStatus.isDetailVodLogReady &&
+        !isOnTop &&
+        !panelInfo?.modal &&
+        vodLogParamsRef.current?.showId === panelInfo?.showId
+      ) {
+        let watchStrtDt = formatGMTString(new Date());
+
+        watchInterval.current = setInterval(() => {
+          let watchEndDt = formatGMTString(new Date());
+          let watchRecord = {
+            ...vodLogParamsRef.current,
+            watchStrtDt,
+            watchEndDt,
+          };
+          dispatch(changeLocalSettings({ watchRecord }));
+        }, 10000);
+
+        return () => {
+          setLogStatus((status) => ({
+            ...status,
+            isDetailVodLogReady: false,
+          }));
+          clearInterval(watchInterval.current);
+          dispatch(
+            sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
+        };
+      }
+    }
+  }, [
+    broadcast,
+    isOnTop,
+    isVODPaused,
+    logStatus.isDetailVodLogReady,
+    logStatus.isFullVodLogReady,
+    logStatus.isModalVodLogReady,
+    panelInfo?.modal,
+    panelInfo?.showId,
+    setLogStatus,
+  ]);
+
+  // creating media log params
+  useEffect(() => {
+    if (panelInfo?.shptmBanrTpNm === "MEDIA" && isOnTop && !isVODPaused) {
       let logTemplateNo;
 
       if (panelInfo?.modal) {
@@ -432,9 +699,8 @@ const PlayerPanel = ({
     }
   }, [
     isOnTop,
-    liveShowInfos,
+    isVODPaused,
     nowMenu,
-    panelInfo?.chanId,
     panelInfo?.lgCatCd,
     panelInfo?.lgCatNm,
     panelInfo?.linkTpCd,
@@ -443,219 +709,17 @@ const PlayerPanel = ({
     panelInfo?.patnrId,
     panelInfo?.prdtId,
     panelInfo?.prdtNm,
+    panelInfo?.showId,
+    panelInfo?.showNm,
     panelInfo?.shptmBanrTpNm,
-    panelInfo?.showUrl,
-    showDetailInfo,
+    setLogStatus,
   ]);
 
-  useEffect(() => {
-    // send log live
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isModalLiveLogReady &&
-      isOnTop &&
-      panelInfo?.modal
-    ) {
-      // log LIVE, modal
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...liveLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isModalLiveLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isFullLiveLogReady &&
-      isOnTop &&
-      !panelInfo?.modal
-    ) {
-      // log LIVE, full
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...liveLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isFullLiveLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isDetailLiveLogReady &&
-      !isOnTop &&
-      !panelInfo?.modal
-    ) {
-      // log LIVE, item detail
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...liveLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isDetailLiveLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
-    // send log vod
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isModalVodLogReady &&
-      isOnTop &&
-      panelInfo?.modal
-    ) {
-      // log VOD, modal
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...vodLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isModalVodLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isFullVodLogReady &&
-      isOnTop &&
-      !panelInfo?.modal
-    ) {
-      // log VOD, Full
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...vodLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isFullVodLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isDetailVodLogReady &&
-      !isOnTop &&
-      !panelInfo?.modal
-    ) {
-      // log VOD, item detail
-      let watchStrtDt = formatGMTString(new Date());
-
-      watchInterval.current = setInterval(() => {
-        let watchEndDt = formatGMTString(new Date());
-        let watchRecord = {
-          ...vodLogParamsRef.current,
-          watchStrtDt,
-          watchEndDt,
-        };
-        dispatch(changeLocalSettings({ watchRecord }));
-      }, 10000);
-
-      return () => {
-        dispatch(
-          sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
-        setLogStatus((status) => ({
-          ...status,
-          isDetailVodLogReady: false,
-        }));
-        clearInterval(watchInterval.current);
-      };
-    }
-
   // send log media
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isModalMediaLogReady &&
-      panelInfo?.modal
-    ) {
-      // log Media, modal
+  useEffect(() => {
+    if (broadcast && Object.keys(broadcast).length === 0 && !isVODPaused) {
+      // case: media, modal
+      if (logStatus.isModalMediaLogReady && panelInfo?.modal) {
         let watchStrtDt = formatGMTString(new Date());
 
         watchInterval.current = setInterval(() => {
@@ -669,25 +733,22 @@ const PlayerPanel = ({
         }, 10000);
 
         return () => {
-        dispatch(
-          sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
           setLogStatus((status) => ({
             ...status,
             isModalMediaLogReady: false,
           }));
           clearInterval(watchInterval.current);
+          dispatch(
+            sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () =>
+              dispatch(changeLocalSettings({ watchRecord: {} }))
+            )
+          );
         };
       }
+    }
 
-    if (
-      Object.keys(broadcast).length === 0 &&
-      logStatus.isFullMediaLogReady &&
-      !panelInfo?.modal
-    ) {
-      // log Media, Full
+    // case: media, full
+    if (logStatus.isFullMediaLogReady && !panelInfo?.modal) {
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -701,34 +762,25 @@ const PlayerPanel = ({
       }, 10000);
 
       return () => {
-        dispatch(
-          sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () =>
-            dispatch(changeLocalSettings({ watchRecord: {} }))
-          )
-        );
         setLogStatus((status) => ({
           ...status,
           isFullMediaLogReady: false,
         }));
         clearInterval(watchInterval.current);
+        dispatch(
+          sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () =>
+            dispatch(changeLocalSettings({ watchRecord: {} }))
+          )
+        );
       };
     }
   }, [
     broadcast,
-    currentLiveChanId,
-    currentVodShowId,
-    dispatch,
-    isOnTop,
-    logStatus.isDetailLiveLogReady,
-    logStatus.isDetailVodLogReady,
-    logStatus.isFullLiveLogReady,
+    isVODPaused,
     logStatus.isFullMediaLogReady,
-    logStatus.isFullVodLogReady,
-    logStatus.isModalLiveLogReady,
     logStatus.isModalMediaLogReady,
-    logStatus.isModalVodLogReady,
     panelInfo?.modal,
-    panelInfo?.showUrl,
+    setLogStatus,
   ]);
 
   const handleItemFocus = useCallback((menu) => {
@@ -1213,6 +1265,7 @@ const PlayerPanel = ({
 
   useEffect(() => {
     if (currentLiveTimeSeconds > liveTotalTime) {
+      setTimeout(() => {
         dispatch(getMainLiveShow());
         setShopNowInfo("");
         dispatch(
@@ -1220,6 +1273,7 @@ const PlayerPanel = ({
             lgCatCd: playListInfo[selectedIndex].showCatCd,
           })
         );
+      }, 3000);
     }
   }, [currentLiveTimeSeconds, liveTotalTime]);
 
@@ -1250,7 +1304,6 @@ const PlayerPanel = ({
       switch (type) {
         case "timeupdate": {
           setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime);
-
           break;
         }
         case "error": {
@@ -1734,6 +1787,7 @@ const PlayerPanel = ({
             sideContentsVisible={sideContentsVisible}
             videoVerticalVisible={videoVerticalVisible}
             setCurrentTime={setCurrentTime}
+            setIsVODPaused={setIsVODPaused}
           >
             {typeof window === "object" && window.PalmSystem && (
               <source