diff --git a/com.twin.app.shoptime/src/actions/mainActions.js b/com.twin.app.shoptime/src/actions/mainActions.js index 33d6baaa..c0ffde5f 100644 --- a/com.twin.app.shoptime/src/actions/mainActions.js +++ b/com.twin.app.shoptime/src/actions/mainActions.js @@ -1,8 +1,11 @@ - import { URLS } from "../api/apiConfig"; import { TAxios } from "../api/TAxios"; import { convertUtcToLocal } from "../components/MediaPlayer/util"; -import { CATEGORY_DATA_MAX_RESULTS_LIMIT, LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from "../utils/Config"; +import { + CATEGORY_DATA_MAX_RESULTS_LIMIT, + LOG_CONTEXT_NAME, + LOG_MESSAGE_ID, +} from "../utils/Config"; import * as HelperMethods from "../utils/helperMethods"; import { types } from "./actionTypes"; import { @@ -11,9 +14,9 @@ import { deleteReservation, } from "./commonActions"; - +//IF-LGSP-007 export const getMainLiveShow = (props) => (dispatch, getState) => { - + const { vodIncFlag } = props; const onSuccess = (response) => { console.log("@@ getMainLiveShow onSuccess", response.data); @@ -32,7 +35,7 @@ export const getMainLiveShow = (props) => (dispatch, getState) => { getState, "get", URLS.GET_MAIN_LIVE_SHOW, - {}, + { vodIncFlag }, {}, onSuccess, onFail @@ -117,7 +120,7 @@ export const getMainCategoryDetail = (props) => (dispatch, getState) => { const onSuccess = (response) => { console.log("getMainCategoryDetail onSuccess ", response.data); - + dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data, @@ -143,7 +146,6 @@ export const getMainCategoryDetail = (props) => (dispatch, getState) => { ); }; - // 영상 상세 보기 조회 LF-LGSP-047 export const getMainCategoryShowDetail = (props) => (dispatch, getState) => { const { patnrId, showId, curationId } = props; @@ -154,7 +156,6 @@ export const getMainCategoryShowDetail = (props) => (dispatch, getState) => { type: types.GET_MAIN_CATEGORY_SHOW_DETAIL, payload: response.data.data, }); - }; const onFail = (error) => { @@ -391,13 +392,15 @@ export const getHomeFullVideoInfo = ({ lgCatCd }) => (dispatch, getState) => { const onSuccess = (response) => { - console.log("getHomeFullVideoInfo onSuccess", response.data.data.showInfos); + console.log( + "getHomeFullVideoInfo onSuccess", + response.data.data.showInfos + ); dispatch({ type: types.GET_HOME_FULL_VIDEO_INFO, payload: { data: response.data.data, lgCatCd }, }); - }; const onFail = (error) => { @@ -422,12 +425,11 @@ export const getMainLiveShowNowProduct = (dispatch, getState) => { const onSuccess = (response) => { console.log("getMainLiveShowNowProduct onSuccess", response.data); - + dispatch({ type: types.GET_MAIN_LIVE_SHOW_NOW_PRODUCT, payload: response.data.data, }); - }; const onFail = (error) => { diff --git a/com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js b/com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js index 2160c9ea..ab465ca9 100644 --- a/com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js +++ b/com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js @@ -342,8 +342,8 @@ const MediaControlsBase = kind({ spotlightId, onActionGuideClick, videoVerticalVisible, - panelInfo, countryCode, + type, ...rest }) => { delete rest.onClose; @@ -367,7 +367,7 @@ const MediaControlsBase = kind({ return ( - {panelInfo?.shptmBanrTpNm !== "LIVE" && ( + {type !== "LIVE" && ( )} @@ -2490,20 +2491,23 @@ const VideoPlayerBase = class extends React.Component { videoVerticalVisible && css.videoVertical )} > - {this.state.mediaSliderVisible ? ( + {this.state.mediaSliderVisible && type ? ( ) : null} - {this.state.mediaSliderVisible ? ( + {this.state.mediaSliderVisible && type ? ( diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx index bbca3c2d..c921cd27 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx @@ -152,7 +152,7 @@ export default memo(function PlayerItemCard({

- {liveInfo && ( + {liveInfo && liveInfo[selectedIndex]?.showType === "live" && (
{ - if ( - panelInfo?.shptmBanrTpNm === "MEDIA" && - !panelInfo.modal && - backBtnRef.current - ) { + if (type === "MEDIA" && !panelInfo.modal && backBtnRef.current) { Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON); } }, [panelInfo?.shptmBanrTpNm, panelInfo.modal, backBtnRef.current]); @@ -109,7 +105,7 @@ export default function PlayerOverlayContents({ const onSpotlightMoveSlider = useCallback( (e) => { - if (panelInfo?.shptmBanrTpNm === "VOD") { + if (type === "VOD") { e.stopPropagation(); Spotlight.focus(SpotlightIds.PLAYER_SLIDER); @@ -129,11 +125,7 @@ export default function PlayerOverlayContents({ }; const currentSideButtonStatus = useMemo(() => { - if ( - panelInfo?.shptmBanrTpNm !== "MEDIA" && - !panelInfo?.modal && - !sideContentsVisible - ) { + if (type !== "MEDIA" && !panelInfo?.modal && !sideContentsVisible) { return true; } return false; @@ -194,7 +186,7 @@ export default function PlayerOverlayContents({ playListInfo.length < 2 && onSpotlightMoveBackButton } - videoType={panelInfo?.shptmBanrTpNm} + videoType={type} /> )} @@ -223,10 +215,8 @@ export default function PlayerOverlayContents({ ref={backBtnRef} />
{partnerName && ( @@ -251,7 +241,7 @@ export default function PlayerOverlayContents({
- {panelInfo.shptmBanrTpNm === "VOD" && disclaimer && ( + {type === "VOD" && disclaimer && (

{disclaimer}

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 77d842fe..a47af591 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -1059,7 +1059,7 @@ const PlayerPanel = ({ }) ); } - dispatch(getMainLiveShow()); + dispatch(getMainLiveShow({ vodIncFlag: "Y" })); } }, [ dispatch, @@ -1220,8 +1220,29 @@ const PlayerPanel = ({ switch (panelInfo.shptmBanrTpNm) { case "LIVE": { - const playlist = liveShowInfos ? liveShowInfos : liveChannelInfos; - setPlayListInfo(playlist); + const playlist = liveShowInfos ?? liveChannelInfos; + + if (!Array.isArray(playlist)) return; + + const modifiedList = []; + + playlist.forEach((item) => { + if (item.showType === "vod" && Array.isArray(item.vodInfos)) { + const mergedVodInfos = item.vodInfos.map((vod) => ({ + ...vod, + patnrId: item.patnrId, + patncNm: item.patncNm, + patncLogoPath: item.patncLogoPath, + showType: "vod", + })); + + modifiedList.push(...mergedVodInfos); + } else { + modifiedList.push(item); + } + }); + + setPlayListInfo(modifiedList); if (showNowInfos?.prdtChgYn === "N") { return; @@ -1895,6 +1916,17 @@ const PlayerPanel = ({ panelInfo?.qrCurrentItem, ]); + const isShowType = useMemo(() => { + if (["VOD", "MEDIA"].includes(panelInfo.shptmBanrTpNm)) { + return panelInfo.shptmBanrTpNm; + } + + const showType = playListInfo?.[selectedIndex]?.showType; + if (showType === "live") return panelInfo.shptmBanrTpNm; + if (showType === "vod") return "VOD"; + + return panelInfo.shptmBanrTpNm; + }, [panelInfo.shptmBanrTpNm, playListInfo, selectedIndex]); const clearTimer = useCallback(() => { clearTimeout(timerId.current); timerId.current = null; @@ -2084,7 +2116,7 @@ const PlayerPanel = ({ currentLiveTimeSeconds={currentLiveTimeSeconds} countryCode={countryCode} // VideoOverlay props - type={panelInfo?.shptmBanrTpNm} + type={isShowType} panelInfo={panelInfo} captionEnable={captionEnable} orderPhnNo={orderPhoneNumber} @@ -2133,7 +2165,7 @@ const PlayerPanel = ({ )}