라이브 채널 리스트에 VOD 채널 추가 로직

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
@@ -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) => {
@@ -427,7 +430,6 @@ export const getMainLiveShowNowProduct =
         type: types.GET_MAIN_LIVE_SHOW_NOW_PRODUCT,
         payload: response.data.data,
       });
-
     };
 
     const onFail = (error) => {

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 (
       <OuterContainer {...rest} id={id} spotlightId={spotlightId}>
-        {panelInfo?.shptmBanrTpNm !== "LIVE" && (
+        {type !== "LIVE" && (
           <Container
             className={classNames(
               css.mediaControls,

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

@@ -2331,6 +2331,7 @@ const VideoPlayerBase = class extends React.Component {
         showCallToOrderHide && css.callToOrderHide
       );
     };
+
     return (
       <RootContainer
         className={classNames(
@@ -2394,7 +2395,7 @@ const VideoPlayerBase = class extends React.Component {
         {isQRCodeVisible && (
           <PlayerOverlayQRCode
             qrCurrentItem={qrCurrentItem}
-            type={panelInfo?.shptmBanrTpNm}
+            type={type}
             modalScale={modalScale}
           />
         )}
@@ -2490,20 +2491,23 @@ const VideoPlayerBase = class extends React.Component {
                     videoVerticalVisible && css.videoVertical
                   )}
                 >
-                  {this.state.mediaSliderVisible ? (
+                  {this.state.mediaSliderVisible && type ? (
                     <Times
                       noCurrentTime
                       total={
-                        type === "LIVE" ? liveTotalTime : this.state.duration
+                        panelInfo.shptmBanrTpNm === "LIVE"
+                          ? liveTotalTime
+                          : this.state.duration
                       }
                       formatter={durFmt}
+                      type={type}
                     />
                   ) : null}
-                  {this.state.mediaSliderVisible ? (
+                  {this.state.mediaSliderVisible && type ? (
                     <Times
                       noTotalTime
                       current={
-                        type === "LIVE"
+                        panelInfo.shptmBanrTpNm === "LIVE"
                           ? currentLiveTimeSeconds
                           : this.state.currentTime
                       }
@@ -2555,7 +2559,7 @@ const VideoPlayerBase = class extends React.Component {
                   !this.state.mediaControlsVisible || spotlightDisabled
                 }
                 visible={this.state.mediaControlsVisible}
-                panelInfo={panelInfo}
+                type={type}
               />
             </ControlsContainer>
           </div>

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

@@ -152,7 +152,7 @@ export default memo(function PlayerItemCard({
         </div>
 
         <h3 dangerouslySetInnerHTML={productName()} className={css.title} />
-        {liveInfo && (
+        {liveInfo && liveInfo[selectedIndex]?.showType === "live" && (
           <div
             className={classNames(
               css.progressBarWrap,

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

@@ -49,11 +49,7 @@ export default function PlayerOverlayContents({
   const backBtnRef = useRef(null);
 
   useEffect(() => {
-    if (
+    if (type === "MEDIA" && !panelInfo.modal && backBtnRef.current) {
-      panelInfo?.shptmBanrTpNm === "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 (
+    if (type !== "MEDIA" && !panelInfo?.modal && !sideContentsVisible) {
-      panelInfo?.shptmBanrTpNm !== "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}
           />
           <div
-            className={classNames(
+            className={classNames(type === "LIVE" && css.liveIcon)}
-              panelInfo?.shptmBanrTpNm === "LIVE" && css.liveIcon
+            aria-label={type === "LIVE" && "Live Icon"}
-            )}
-            aria-label={panelInfo?.shptmBanrTpNm === "LIVE" && "Live Icon"}
           />
 
           {partnerName && (
@@ -251,7 +241,7 @@ export default function PlayerOverlayContents({
           </Marquee>
         </div>
       </Container>
-      {panelInfo.shptmBanrTpNm === "VOD" && disclaimer && (
+      {type === "VOD" && disclaimer && (
         <div className={css.disclaimer}>
           <span className={css.icon} />
           <h3 aria-label={disclaimer}>{disclaimer}</h3>

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;
+        const playlist = liveShowInfos ?? liveChannelInfos;
-        setPlayListInfo(playlist);
+
+        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 = ({
           <PlayerTabButton
             setSideContentsVisible={setSideContentsVisible}
             sideContentsVisible={sideContentsVisible}
-            videoType={panelInfo?.shptmBanrTpNm}
+            videoType={isShowType}
           />
         )}