diff --git a/com.twin.app.shoptime/src/actions/logActions.js b/com.twin.app.shoptime/src/actions/logActions.js index df41eb1c..3a884b31 100644 --- a/com.twin.app.shoptime/src/actions/logActions.js +++ b/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) { diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index 8894be44..fea5ade3 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/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 ( { + // 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; +}; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index e8278087..434fb5e8 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/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; + } + + return {}; } - }, [showDetailInfo]); + + 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 ( + 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 ( - panelInfo?.shptmBanrTpNm === "VOD" && - showDetailInfo && - showDetailInfo?.length > 0 + 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,46 @@ const PlayerPanel = ({ panelInfo?.patnrId, panelInfo?.prdtId, panelInfo?.prdtNm, + panelInfo?.showId, + panelInfo?.showNm, panelInfo?.shptmBanrTpNm, - panelInfo?.showUrl, - showDetailInfo, + setLogStatus, ]); + // send log media useEffect(() => { - // send log live - if ( - Object.keys(broadcast).length === 0 && - logStatus.isModalLiveLogReady && - isOnTop && - panelInfo?.modal - ) { - // log LIVE, modal - let watchStrtDt = formatGMTString(new Date()); + if (broadcast && Object.keys(broadcast).length === 0 && !isVODPaused) { + // case: media, modal + if (logStatus.isModalMediaLogReady && panelInfo?.modal) { + let watchStrtDt = formatGMTString(new Date()); - watchInterval.current = setInterval(() => { - let watchEndDt = formatGMTString(new Date()); - let watchRecord = { - ...liveLogParamsRef.current, - watchStrtDt, - watchEndDt, + watchInterval.current = setInterval(() => { + let watchEndDt = formatGMTString(new Date()); + let watchRecord = { + ...mediaLogParamsRef.current, + watchStrtDt, + watchEndDt, + }; + dispatch(changeLocalSettings({ watchRecord })); + }, 10000); + + return () => { + setLogStatus((status) => ({ + ...status, + isModalMediaLogReady: false, + })); + clearInterval(watchInterval.current); + dispatch( + sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () => + dispatch(changeLocalSettings({ watchRecord: {} })) + ) + ); }; - 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 + // case: media, full + if (logStatus.isFullMediaLogReady && !panelInfo?.modal) { let watchStrtDt = formatGMTString(new Date()); watchInterval.current = setInterval(() => { @@ -669,66 +762,25 @@ const PlayerPanel = ({ }, 10000); return () => { - dispatch( - sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt }, () => - dispatch(changeLocalSettings({ watchRecord: {} })) - ) - ); - setLogStatus((status) => ({ - ...status, - isModalMediaLogReady: false, - })); - clearInterval(watchInterval.current); - }; - } - - if ( - Object.keys(broadcast).length === 0 && - logStatus.isFullMediaLogReady && - !panelInfo?.modal - ) { - // log Media, Full - let watchStrtDt = formatGMTString(new Date()); - - watchInterval.current = setInterval(() => { - let watchEndDt = formatGMTString(new Date()); - let watchRecord = { - ...mediaLogParamsRef.current, - watchStrtDt, - watchEndDt, - }; - dispatch(changeLocalSettings({ watchRecord })); - }, 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,13 +1265,15 @@ const PlayerPanel = ({ useEffect(() => { if (currentLiveTimeSeconds > liveTotalTime) { - dispatch(getMainLiveShow()); - setShopNowInfo(""); - dispatch( - getHomeFullVideoInfo({ - lgCatCd: playListInfo[selectedIndex].showCatCd, - }) - ); + setTimeout(() => { + dispatch(getMainLiveShow()); + setShopNowInfo(""); + dispatch( + getHomeFullVideoInfo({ + 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 && (