optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Log] IF-LGSP-LOG-001 / Live 시청 이력 (반영), IF-LGSP-LOG-005 / GNB 이력 (FULL 추가 반영)

Browse Source
This commit is contained in:
younghoon100.park
2024-06-13 19:38:52 +09:00
parent 2c19f2895e
commit 52a0fb0898
9 changed files with 252 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/src/actions/logActions.js
View File

@@ -71,11 +71,11 @@ export const getUrlByLogTpNo = (logTpNo) => {
return URLS.LOG_MY_PAGE_NOTICE;
// IF-LGSP-LOG-013 / 검색 이력
case LOG_TP_NO.SEACH:
case LOG_TP_NO.SEARCH:
return URLS.LOG_SEARCH;
// IF-LGSP-LOG-014 / 검색 결과 클릭 이력
case LOG_TP_NO.SEACH_CLICK:
case LOG_TP_NO.SEARCH_CLICK:
return URLS.LOG_SEARCH_CLICK;
// IF-LGSP-LOG-015 / Upcoming On/Off

46
com.twin.app.shoptime/src/hooks/useLogService.js
View File

@@ -50,27 +50,39 @@ export default function useLogService() {
*/
const sendLogLive = useCallback(
(params) => {
const { logTpNo } = params;
const {
logTpNo,
patncNm,
patnrId,
showId,
showNm,
watchEndDt,
watchStrtDt,
} = params;
if (
!logTpNo ||
!patncNm ||
!patnrId ||
!showId ||
!showNm ||
!watchEndDt ||
!watchStrtDt
) {
console.error("sendLogLive invalid params", params);
return;
}
const newParams = {
entryMenu: params.entryMenu ?? "",
lgCatCd: params.lgCatCd ?? "",
lgCatNm: params.lgCatNm ?? "",
logTpNo,
linkTpCd: params.linkTpCd ?? "",
nowMenu: params.nowMenu ?? "",
patncNm: params.patncNm ?? "",
patnrId: params.patnrId ?? "",
showId: params.showId ?? "",
showNm: params.showNm ?? "",
vdoTpNm: params.vdoTpNm ?? "",
watchEndDt: formatGMTString(params.watchEndDt) ?? "",
watchStrtDt: formatGMTString(params.watchStrtDt) ?? "",
...params,
entryMenu: entryMenuRef.current,
nowMenu: nowMenuRef.current,
watchEndDt: formatGMTString(new Date()),
};
dispatch(postLog(newParams));
},
[dispatch]
[dispatch, entryMenuRef, nowMenuRef]
);
// const sendLogVOD = () => {};
@@ -573,7 +585,7 @@ export default function useLogService() {
const newParams = {
...params,
entryMenu: entryMenuRef.current,
logTpNo: LOG_TP_NO.SEACH,
logTpNo: LOG_TP_NO.SEARCH,
nowMenu: nowMenuRef.current,
};
@@ -629,7 +641,7 @@ export default function useLogService() {
entryMenu: entryMenuRef.current,
keyword,
lgCatNm: params?.lgCatNm ?? "",
logTpNo: LOG_TP_NO.SEACH_CLICK,
logTpNo: LOG_TP_NO.SEARCH_CLICK,
nowMenu: nowMenuRef.current,
patncNm,
patnrId,

4
com.twin.app.shoptime/src/utils/Config.js
View File

@@ -96,9 +96,9 @@ export const LOG_TP_NO = {
CATEGORY: "280",
},
SEACH: "261",
SEARCH: "261",
SEACH_CLICK: "262",
SEARCH_CLICK: "262",
UPCOMING_FLAG: "271",

133
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -39,8 +39,10 @@ import VideoOverlayWithPhoneNumber from "../../components/VideoOverlayWithPhoneN
import Media from "../../components/VideoPlayer/Media";
import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
import useLogService from "../../hooks/useLogService";
import * as Config from "../../utils/Config";
import { panel_names } from "../../utils/Config";
import { formatGMTString } from "../../utils/helperMethods";
import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
import css from "./PlayerPanel.module.less";
@@ -77,6 +79,7 @@ const PlayerPanel = ({
spotlightId,
...props
}) => {
const { sendLogGNB, sendLogLive } = useLogService();
const dispatch = useDispatch();
const videoPlayer = useRef(null);
const [playListInfo, setPlayListInfo] = useState("");
@@ -89,6 +92,10 @@ const PlayerPanel = ({
const [selectedIndex, setSelectedIndex] = useState(0);
const [isUpdate, setIsUpdate] = useState(false);
const [isSubtitleActive, setIsSubtitleActive] = useState(true);
const [isModalLiveLogReady, setIsModalLiveLogReady] = useState(false);
const [isFullLiveLogReady, setIsFullLiveLogReady] = useState(false);
const [isItemDetailLiveLogReady, setIsItemDetailLiveLogReady] =
useState(false);
const panels = useSelector((state) => state.panels.panels);
const chatData = useSelector((state) => state.play.chatData);
@@ -118,10 +125,122 @@ const PlayerPanel = ({
const liveShowInfos = useSelector((state) => state.main.liveShowInfos);
const vodSubtitleData = useSelector((state) => state.play.subTitleBlobs);
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
const broadcast = useSelector((state) => state.common.broadcast);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
const currentLiveShowInfo = useRef(null);
const liveLogParamsRef = useRef(null);
const handleItemFocus = useCallback(
(menu) => {
sendLogGNB(menu);
},
[sendLogGNB]
);
const getLogTpNo = useCallback((nowMenu) => {
switch (nowMenu) {
case Config.LOG_MENU.HOME_TOP:
return Config.LOG_TP_NO.LIVE.HOME;
case Config.LOG_MENU.FEATURED_BRANDS_LIVE_CHANNELS:
return Config.LOG_TP_NO.LIVE.FEATURED_BRANDS;
case Config.LOG_MENU.FULL_SHOP_NOW:
case Config.LOG_MENU.FULL_YOU_MAY_LIKE:
case Config.LOG_MENU.FULL_LIVE_CHANNELS:
case Config.LOG_MENU.FULL_FEATURED_SHOWS:
return Config.LOG_TP_NO.LIVE.FULL;
default:
return Config.LOG_TP_NO.LIVE.HOME;
}
}, []);
useEffect(() => {
if (liveShowInfos && panelInfo?.chanId) {
let logTemplateNo;
if (isOnTop && panelInfo?.modal) {
logTemplateNo = getLogTpNo(nowMenu);
setIsModalLiveLogReady(true);
} //
else if (isOnTop && !panelInfo?.modal) {
logTemplateNo = Config.LOG_TP_NO.LIVE.FULL;
setIsFullLiveLogReady(true);
} //
else if (!isOnTop && !panelInfo?.modal) {
logTemplateNo = Config.LOG_TP_NO.LIVE.ITEM_DETAIL;
setIsItemDetailLiveLogReady(true);
}
currentLiveShowInfo.current = liveShowInfos //
.find(({ chanId }) => panelInfo?.chanId === chanId);
liveLogParamsRef.current = {
lgCatCd: currentLiveShowInfo.current?.catCd ?? "",
lgCatNm: currentLiveShowInfo.current?.catNm ?? "",
logTpNo: logTemplateNo,
linkTpCd: "",
patncNm: currentLiveShowInfo.current?.patncNm,
patnrId: currentLiveShowInfo.current?.patnrId,
showId: currentLiveShowInfo.current?.showId,
showNm: currentLiveShowInfo.current?.showNm,
vdoTpNm: currentLiveShowInfo.current?.vtctpYn
? currentLiveShowInfo.current.vtctpYn === "Y"
? "Vertical"
: "Horizontal"
: "",
// watchStrtDt: formatGMTString(new Date()),
};
}
}, [
getLogTpNo,
isOnTop,
liveShowInfos,
nowMenu,
panelInfo?.chanId,
panelInfo?.modal,
]);
useEffect(() => {
if (isModalLiveLogReady && isOnTop && panelInfo?.modal) {
// console.log("%c log if, modal, panelInfo", "background: lightblue");
let watchStrtDt = formatGMTString(new Date());
return () => {
sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
setIsModalLiveLogReady(false);
};
}
if (isFullLiveLogReady && isOnTop && !panelInfo?.modal) {
// console.log("%c log if, full, panelInfo", "background: #f8bdbd");
let watchStrtDt = formatGMTString(new Date());
return () => {
sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
setIsFullLiveLogReady(false);
};
}
if (isItemDetailLiveLogReady && !isOnTop && !panelInfo?.modal) {
// console.log("%c log if, item detail, panelInfo", "background: #ccf8bd");
let watchStrtDt = formatGMTString(new Date());
return () => {
sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
setIsItemDetailLiveLogReady(false);
};
}
}, [
isOnTop,
isFullLiveLogReady,
isItemDetailLiveLogReady,
isModalLiveLogReady,
panelInfo?.modal,
sendLogLive,
]);
const onClickBack = useCallback(
(ev, isEnd) => {
//modal로부터 Full 전환된 경우 다시 preview 모드로 돌아감.
@@ -280,7 +399,14 @@ const PlayerPanel = ({
})
);
}
}, [dispatch, panelInfo]);
}, [
dispatch,
panelInfo?.curationId,
panelInfo?.lgCatCd,
panelInfo?.patnrId,
panelInfo?.showId,
panelInfo?.shptmBanrTpNm,
]);
useEffect(() => {
if (!isInitialFocusOccurred) {
@@ -784,6 +910,7 @@ const PlayerPanel = ({
setSelectedIndex={setSelectedIndex}
liveChannelInfos={liveChannelInfos || liveShowInfos}
videoVerticalVisible={videoVerticalVisible}
handleItemFocus={handleItemFocus}
/>
)}
</Container>

38
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
View File

@@ -9,6 +9,7 @@ import TButtonTab, {
COLOR_TYPE,
LIST_TYPE,
} from "../../../components/TButtonTab/TButtonTab";
import { LOG_MENU } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./TabContainer.module.less";
import FeaturedShowContents from "./TabContents/FeaturedShowContents";
@@ -29,6 +30,7 @@ export default function TabContainer({
setSelectedIndex,
liveChannelInfos,
videoVerticalVisible,
handleItemFocus,
}) {
const [tab, setTab] = useState(0);
@@ -59,6 +61,34 @@ export default function TabContainer({
[tab]
);
useEffect(() => {
let nowMenu;
if (tab === 0) {
nowMenu = LOG_MENU.FULL_SHOP_NOW;
}
if (tab === 1) {
const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
nowMenu = isLive
? LOG_MENU.FULL_LIVE_CHANNELS
: LOG_MENU.FULL_FEATURED_SHOWS;
}
if (nowMenu) {
handleItemFocus(nowMenu);
}
}, [handleItemFocus, panelInfo?.shptmBanrTpNm, tab]);
const _handleItemFocus = useCallback(
(nowMenu) => {
if (handleItemFocus) {
handleItemFocus(nowMenu);
}
},
[handleItemFocus]
);
return (
<Container
className={classNames(
@@ -81,6 +111,7 @@ export default function TabContainer({
videoVerticalVisible={videoVerticalVisible}
panelInfo={panelInfo}
tabIndex={tab}
handleItemFocus={_handleItemFocus}
/>
)}
{panelInfo?.shptmBanrTpNm === "VOD" && tab === 1 && (
@@ -89,6 +120,7 @@ export default function TabContainer({
setSelectedIndex={setSelectedIndex}
videoVerticalVisible={videoVerticalVisible}
tabIndex={tab}
handleItemFocus={_handleItemFocus}
/>
)}
{panelInfo?.shptmBanrTpNm === "LIVE" && tab === 1 && liveChannelInfos && (
@@ -98,11 +130,15 @@ export default function TabContainer({
videoVerticalVisible={videoVerticalVisible}
liveInfos={playListInfo}
tabIndex={tab}
handleItemFocus={_handleItemFocus}
/>
)}
{shopNowInfo && shopNowInfo.length < 3 && tab === 0 && (
<YouMayLikeContents shopNowInfo={shopNowInfo} />
<YouMayLikeContents
shopNowInfo={shopNowInfo}
handleItemFocus={_handleItemFocus}
/>
)}
</Container>
);

15
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
View File

@@ -7,7 +7,7 @@ import Spotlight from "@enact/spotlight";
import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
import { updatePanel } from "../../../../actions/panelActions";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../../utils/Config";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
@@ -18,9 +18,19 @@ export default function FeaturedShowContents({
videoVerticalVisible,
setSelectedIndex,
tabIndex,
handleItemFocus,
}) {
const dispatch = useDispatch();
const handleFocus = useCallback(
() => () => {
if (handleItemFocus) {
handleItemFocus(LOG_MENU.FULL_FEATURED_SHOWS);
}
},
[handleItemFocus]
);
const renderItem = useCallback(
({ index, ...rest }) => {
const {
@@ -54,6 +64,7 @@ export default function FeaturedShowContents({
productName={showNm}
patnerName={patncNm}
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.featuredHorizontal}
spotlightId={`tabChannel-video-${index}`}
videoVerticalVisible={videoVerticalVisible}
@@ -61,7 +72,7 @@ export default function FeaturedShowContents({
/>
);
},
[featuredShowsInfos, videoVerticalVisible]
[featuredShowsInfos, videoVerticalVisible, handleFocus]
);
useEffect(() => {

15
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
View File

@@ -6,7 +6,7 @@ import Spotlight from "@enact/spotlight";
import { updatePanel } from "../../../../actions/panelActions";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../../utils/Config";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
import css from "./LiveChannelContents.module.less";
@@ -16,9 +16,19 @@ export default function LiveChannelContents({
selectedIndex,
setSelectedIndex,
tabIndex,
handleItemFocus,
}) {
const dispatch = useDispatch();
const handleFocus = useCallback(
() => () => {
if (handleItemFocus) {
handleItemFocus(LOG_MENU.FULL_LIVE_CHANNELS);
}
},
[handleItemFocus]
);
const renderItem = useCallback(
({ index, ...rest }) => {
const {
@@ -55,13 +65,14 @@ export default function LiveChannelContents({
productName={showNm}
patnerName={patncNm}
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.liveHorizontal}
spotlightId={`tabChannel-video-${index}`}
liveInfo={liveInfos[index]}
/>
);
},
[liveInfos, dispatch]
[liveInfos, dispatch, handleFocus]
);
return (

15
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
View File

@@ -11,7 +11,7 @@ import TItemCard, {
TYPES,
} from "../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../../utils/Config";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
import css from "./ShopNowContents.module.less";
@@ -24,6 +24,7 @@ export default function ShopNowContents({
videoVerticalVisible,
playListInfo,
tabIndex,
handleItemFocus,
}) {
const dispatch = useDispatch();
const [height, setHeight] = useState();
@@ -37,6 +38,15 @@ export default function ShopNowContents({
}
}, [shopNowInfo]);
const handleFocus = useCallback(
() => () => {
if (handleItemFocus) {
handleItemFocus(LOG_MENU.FULL_SHOP_NOW);
}
},
[handleItemFocus]
);
const renderItem = useCallback(
({ index, ...rest }) => {
const {
@@ -77,11 +87,12 @@ export default function ShopNowContents({
productName={prdtNm}
productId={prdtId}
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.horizontal}
/>
);
},
[shopNowInfo, videoVerticalVisible]
[shopNowInfo, videoVerticalVisible, handleFocus]
);
return (

16
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx
View File

@@ -5,11 +5,11 @@ import { useDispatch, useSelector } from "react-redux";
import { pushPanel } from "../../../../actions/panelActions";
import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../../utils/Config";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./YouMayLikeContents.module.less";
export default function YouMayLikeContents({ shopNowInfo }) {
export default function YouMayLikeContents({ shopNowInfo, handleItemFocus }) {
const dispatch = useDispatch();
const [height, setHeight] = useState(236);
const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
@@ -26,6 +26,15 @@ export default function YouMayLikeContents({ shopNowInfo }) {
}
}, [shopNowInfo, youmaylikeInfos]);
const handleFocus = useCallback(
() => () => {
if (handleItemFocus) {
handleItemFocus(LOG_MENU.FULL_YOU_MAY_LIKE);
}
},
[handleItemFocus]
);
const renderItem = useCallback(
({ index, ...rest }) => {
const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } =
@@ -53,11 +62,12 @@ export default function YouMayLikeContents({ shopNowInfo }) {
offerInfo={offerInfo}
productName={prdtNm}
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.horizontal}
/>
);
},
[youmaylikeInfos, height]
[youmaylikeInfos, height, handleFocus]
);
return (
<>