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

[SHOPTIME-3648] Player / Featured Show / 방송 전환 시 현재 방송 배경 이미지가 아주 잠깐 노출됨

Browse Source 
원인 : Featured Show 선택시 해당 리스트를 재구성하는 과정에서 index 가
한번 더 변경되어 이전 Thumbnail url 을 로드함
대책 : Featured Show 인덱스 선택시 리스트 재구성하지 않도록 수정
This commit is contained in:
yonghyon
2024-10-21 14:06:13 +09:00
parent f5ab8bf6ff
commit 7806dc839a
9 changed files with 178 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/actions/mainActions.js
View File

@@ -381,7 +381,7 @@ export const getHomeFullVideoInfo =
dispatch({
type: types.GET_HOME_FULL_VIDEO_INFO,
payload: response.data.data,
payload: { data: response.data.data, lgCatCd },
});
};

18
com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo, useRef } from "react";
import React, { useCallback, useMemo, useRef, useEffect } from "react";
import ReactPlayer from "react-player";
@@ -65,10 +65,7 @@ export default function TReactPlayer({
} else if (
!Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")
) {
//youtube
if (typeof window && !window.PalmSystem) {
window.videoNode = videoNode;
}
videoNode.play = videoNode.playVideo;
videoNode.pause = videoNode.pauseVideo;
videoNode.seek = videoNode.seekTo;
@@ -141,6 +138,17 @@ export default function TReactPlayer({
return events;
}, [handleEvent, mediaEventsMap]);
useEffect(() => {
return () => {
const videoNode = playerRef.current?.getInternalPlayer();
if (videoNode) {
videoNode.pause();
videoNode.src = "";
videoNode.srcObject = null;
}
};
}, []);
return (
<ReactPlayer
ref={playerRef}

2
com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
View File

@@ -2157,7 +2157,6 @@ const VideoPlayerBase = class extends React.Component {
onBackButton,
panelInfo,
selectedIndex,
setSelectedIndex,
src,
width,
height,
@@ -2397,7 +2396,6 @@ const VideoPlayerBase = class extends React.Component {
selectedIndex={selectedIndex}
onClick={onBackButton}
panelInfo={panelInfo}
setSelectedIndex={setSelectedIndex}
setIsSubtitleActive={setIsSubtitleActive}
sideContentsVisible={sideContentsVisible}
setSideContentsVisible={setSideContentsVisible}

5
com.twin.app.shoptime/src/reducers/mainReducer.js
View File

@@ -5,6 +5,7 @@ const initialState = {
subCategoryData: {},
top20ShowData: {},
productData: null,
fullVideolgCatCd: "",
fullVideoData: {},
showDetailInfo: [],
showNowInfo: null,
@@ -139,9 +140,10 @@ export const mainReducer = (state = initialState, action) => {
};
}
case types.GET_HOME_FULL_VIDEO_INFO: {
const data = action.payload;
const { data, lgCatCd } = action.payload;
return {
...state,
fullVideolgCatCd: lgCatCd,
youmaylikeInfos: data.youmaylikeInfos,
liveChannelInfos: data.liveChannelInfos,
featuredShowsInfos: data.featuredShowsInfos,
@@ -174,6 +176,7 @@ export const mainReducer = (state = initialState, action) => {
case types.CLEAR_SHOPNOW_INFO:
return {
...state,
fullVideolgCatCd: "",
showDetailInfo: [],
showNowInfo: null,
fullVideoData: null,

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

@@ -29,7 +29,6 @@ export default function PlayerOverlayContents({
playListInfo,
captionEnable,
selectedIndex,
setSelectedIndex,
setIsSubtitleActive,
videoVerticalVisible,
sideContentsVisible,

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

@@ -236,6 +236,10 @@ const PlayerPanel = ({
"captionEnable",
(state) => state.common.appStatus.captionEnable
);
const fullVideolgCatCd = USE_SELECTOR(
"fullVideolgCatCd",
(state) => state.main.fullVideolgCatCd
);
const featuredShowsInfos = USE_SELECTOR(
"featuredShowsInfos",
(state) => state.main.featuredShowsInfos
@@ -564,7 +568,6 @@ const PlayerPanel = ({
nowMenu,
panelInfo?.linkTpCd,
panelInfo?.modal,
setLogStatus,
]);
// send VOD log
@@ -807,6 +810,22 @@ const PlayerPanel = ({
return false;
}, [playListInfo, selectedIndex]);
//todo for test
// const startVideoTest = useCallback(() => {
// dispatch(
// PanelActions.pushPanel({
// name: "playerpanel",
// panelInfo: {
// patnrId: "1",
// showId: "671231c7ac7fc0803e3f3095",
// shptmBanrTpNm: "VOD",
// },
// })
// );
// }, []);
// window.startVideoTest = startVideoTest;
const onClickBack = useCallback(
(ev, isEnd) => {
//modal로부터 Full 전환된 경우 다시 preview 모드로 돌아감.
@@ -922,39 +941,30 @@ const PlayerPanel = ({
videoPlayer.current = ref;
}, []);
/** for VOD */
const addPanelInfoToPlayList = useCallback(
(featuredShowsInfos) => {
if (Array.isArray(featuredShowsInfos)) {
const showId = showDetailInfo[0]?.showId;
const isDuplicate = featuredShowsInfos.some(
(show) => show.showId === showId
);
const index = featuredShowsInfos.findIndex(
(show) => show.showId === showId
);
if (isDuplicate) {
setPlayListInfo(featuredShowsInfos);
setSelectedIndex(index);
if (!isUpdate) {
setBackupInitialIndex(index);
setIsUpdate(true);
}
return;
}
if (!isUpdate) {
const updatedPlayListInfo = [
{ ...showDetailInfo[0] },
...(Array.isArray(featuredShowsInfos) ? featuredShowsInfos : []),
];
setPlayListInfo(updatedPlayListInfo);
setIsUpdate(true);
let newArray = [];
if (index > -1) {
// 인덱스를 찾은 경우 그대로
newArray = [...featuredShowsInfos];
setBackupInitialIndex(index);
} else {
// 인덱스를 찾지 못한 경우 showDetailInfo 를 제일 앞에 배치
newArray = [{ ...showDetailInfo[0] }, ...featuredShowsInfos];
setBackupInitialIndex(0);
}
setPlayListInfo(newArray);
}
},
[showDetailInfo]
[showDetailInfo, selectedIndex]
);
useEffect(() => {
@@ -984,21 +994,16 @@ const PlayerPanel = ({
}, [videoVerticalVisible, panelInfo.modal, isOnTop]);
useEffect(() => {
if (
panelInfo.patnrId &&
panelInfo.showId &&
panelInfo.shptmBanrTpNm !== "MEDIA"
) {
dispatch(
getMainCategoryShowDetail({
patnrId: panelInfo.patnrId,
showId: panelInfo.showId,
curationId: panelInfo.curationId,
})
);
}
if (panelInfo.shptmBanrTpNm === "LIVE") {
if (panelInfo.patnrId && panelInfo.showId) {
dispatch(
getMainCategoryShowDetail({
patnrId: panelInfo.patnrId,
showId: panelInfo.showId,
curationId: panelInfo.curationId,
})
);
}
dispatch(getMainLiveShow());
}
}, [
@@ -1014,17 +1019,29 @@ const PlayerPanel = ({
if (
panelInfo.shptmBanrTpNm === "VOD" &&
showDetailInfo &&
showDetailInfo.length > 0 &&
showDetailInfo[0]?.showCatCd &&
showDetailInfo.length > 0
fullVideolgCatCd !== showDetailInfo[0]?.showCatCd //기존에 호출했으면 안한다.
) {
dispatch(
getHomeFullVideoInfo({
lgCatCd: showDetailInfo[0]?.showCatCd,
lgCatCd: showDetailInfo[0].showCatCd,
})
);
}
}, [showDetailInfo, panelInfo.shptmBanrTpNm]);
if (
panelInfo.shptmBanrTpNm === "VOD" &&
showDetailInfo &&
showDetailInfo[0] &&
showDetailInfo[0].showId &&
showDetailInfo[0].patnrId
) {
setShopNowInfo(showDetailInfo[0].productInfos);
saveToLocalSettings(showDetailInfo[0].showId, showDetailInfo[0].patnrId);
}
}, [showDetailInfo]);
//LIVE
useEffect(() => {
if (
playListInfo &&
@@ -1105,11 +1122,19 @@ const PlayerPanel = ({
return;
}
// 화살표버튼 포커스
if (!panelInfo.modal && !videoVerticalVisible) {
const current = Spotlight.getCurrent();
let hasProperSpot = false;
if (current) {
const spotId = current.getAttribute("data-spotlight-id");
if (spotId && spotId.indexOf("tabChannel-video") >= 0) {
hasProperSpot = true;
}
}
if (!panelInfo.modal && !videoVerticalVisible && !hasProperSpot) {
Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
return;
}
//비디오 진입시 포커스
if (panelInfo.isIndicatorByClick && shopNowInfo?.length > 0) {
Spotlight.focus("playVideoShopNowBox");
@@ -1173,22 +1198,24 @@ const PlayerPanel = ({
panelInfo.shptmBanrTpNm,
]);
// get PlayListInfo
useEffect(() => {
if (panelInfo?.shptmBanrTpNm === "VOD") {
if (showDetailInfo && showDetailInfo.length > 0) {
if (featuredShowsInfos && featuredShowsInfos.length > 0) {
addPanelInfoToPlayList(featuredShowsInfos);
} else {
setPlayListInfo(showDetailInfo);
}
}
}
}, [featuredShowsInfos]);
// get PlayListInfo
useEffect(() => {
if (!panelInfo) return;
switch (panelInfo.shptmBanrTpNm) {
case "VOD":
if (showDetailInfo && showDetailInfo.length > 0) {
if (featuredShowsInfos && featuredShowsInfos.length > 0) {
addPanelInfoToPlayList(featuredShowsInfos);
} else {
setPlayListInfo(showDetailInfo);
}
setShopNowInfo(showDetailInfo[0].productInfos);
}
break;
case "LIVE": {
const playlist = liveShowInfos ? liveShowInfos : liveChannelInfos;
setPlayListInfo(playlist);
@@ -1565,8 +1592,8 @@ const PlayerPanel = ({
panelInfo.shptmBanrTpNm,
]);
const saveToLocalSettings = useCallback(() => {
if (panelInfo?.shptmBanrTpNm === "VOD") {
const saveToLocalSettings = useCallback(
(showId, patnrId) => {
let recentItems = [];
if (localRecentItems) {
recentItems = [...localRecentItems];
@@ -1579,7 +1606,7 @@ const PlayerPanel = ({
}/${currentDate.getDate()}`;
const existingProductIndex = recentItems.findIndex((item) => {
if (item.showId) return item.showId === panelInfo.showId;
if (item.showId) return item.showId === showId;
});
if (existingProductIndex !== -1) {
@@ -1587,8 +1614,8 @@ const PlayerPanel = ({
}
recentItems.push({
patnrId: panelInfo.patnrId,
showId: panelInfo.showId,
patnrId: patnrId,
showId: showId,
date: formattedDate,
expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
cntryCd: httpHeader["X-Device-Country"],
@@ -1600,8 +1627,9 @@ const PlayerPanel = ({
} else {
dispatch(changeLocalSettings({ recentItems }));
}
}
}, [panelInfo, httpHeader, localRecentItems, dispatch]);
},
[httpHeader, localRecentItems, dispatch]
);
const handleIndicatorDownClick = useCallback(() => {
let newIndex =
@@ -1614,22 +1642,32 @@ const PlayerPanel = ({
attempts++;
if (newIndex === initialIndex) break;
}
setSelectedIndex(newIndex);
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
chanId: playListInfo[newIndex].chanId,
patnrId: playListInfo[newIndex].patnrId,
showId: playListInfo[newIndex].showId,
// lgCatCd: playListInfo[newIndex].catCd,
shptmBanrTpNm: panelInfo?.shptmBanrTpNm,
isIndicatorByClick: true,
},
})
);
if (playListInfo[newIndex]?.showId) {
setSelectedIndex(newIndex);
if (panelInfo.shptmBanrTpNm === "VOD") {
dispatch(
getMainCategoryShowDetail({
patnrId: playListInfo[newIndex]?.patnrId,
showId: playListInfo[newIndex]?.showId,
curationId: playListInfo[newIndex]?.curationId,
})
);
Spotlight.focus("playVideoShopNowBox");
} else {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
chanId: playListInfo[newIndex].chanId,
patnrId: playListInfo[newIndex].patnrId,
showId: playListInfo[newIndex].showId,
shptmBanrTpNm: panelInfo?.shptmBanrTpNm,
isIndicatorByClick: true,
},
})
);
}
}
if (!sideContentsVisible) {
setPrevChannelIndex(selectedIndex);
}
@@ -1650,20 +1688,29 @@ const PlayerPanel = ({
if (playListInfo[newIndex]?.showId) {
setSelectedIndex(newIndex);
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
chanId: playListInfo[newIndex].chanId,
patnrId: playListInfo[newIndex].patnrId,
showId: playListInfo[newIndex].showId,
//lgCatCd: playListInfo[newIndex].catCd,
shptmBanrTpNm: panelInfo?.shptmBanrTpNm,
isIndicatorByClick: true,
},
})
);
if (panelInfo.shptmBanrTpNm === "VOD") {
dispatch(
getMainCategoryShowDetail({
patnrId: playListInfo[newIndex]?.patnrId,
showId: playListInfo[newIndex]?.showId,
curationId: playListInfo[newIndex]?.curationId,
})
);
Spotlight.focus("playVideoShopNowBox");
} else {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
chanId: playListInfo[newIndex].chanId,
patnrId: playListInfo[newIndex].patnrId,
showId: playListInfo[newIndex].showId,
shptmBanrTpNm: panelInfo?.shptmBanrTpNm,
isIndicatorByClick: true,
},
})
);
}
}
if (!sideContentsVisible) {
setPrevChannelIndex(selectedIndex);
@@ -1672,10 +1719,21 @@ const PlayerPanel = ({
}, [dispatch, playListInfo, selectedIndex, sideContentsVisible]);
useEffect(() => {
if (panelInfo && panelInfo.showId && panelInfo.patnrId) {
saveToLocalSettings();
} else return;
}, [panelInfo]);
if (
panelInfo.shptmBanrTpNm === "VOD" &&
panelInfo.patnrId &&
panelInfo.showId
) {
//VOD의 panelInfo.showId 가 변경된 최초 한번만 호출하고, FearchedShow 항목에서 선택시 또는 상하 indicator 선택시 호출한다.
dispatch(
getMainCategoryShowDetail({
patnrId: panelInfo.patnrId,
showId: panelInfo.showId,
curationId: panelInfo.curationId,
})
);
}
}, [panelInfo.showId]);
useEffect(() => {
return () => {
@@ -1794,7 +1852,6 @@ const PlayerPanel = ({
detailThemeProductImageLength={productImageLength}
playListInfo={playListInfo && playListInfo}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
setIsSubtitleActive={setIsSubtitleActive}
setSideContentsVisible={setSideContentsVisible}
sideContentsVisible={sideContentsVisible}
@@ -1869,7 +1926,6 @@ const PlayerPanel = ({
liveChannelInfos={liveChannelInfos || liveShowInfos}
videoVerticalVisible={videoVerticalVisible}
handleItemFocus={handleItemFocus}
featuredShowsInfos={featuredShowsInfos}
prevChannelIndex={prevChannelIndex}
currentTime={currentTime}
/>

1
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx
View File

@@ -32,7 +32,6 @@ export default function PlayerTabButton({
name: panel_names.PLAYER_PANEL,
panelInfo: {
isUpdatedByClick: false,
isIndicatorByClick: false,
},
})
);

4
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContainer.jsx
View File

@@ -29,7 +29,6 @@ export default function TabContainer({
setSelectedIndex,
liveChannelInfos,
videoVerticalVisible,
featuredShowsInfos,
handleItemFocus,
prevChannelIndex,
currentTime,
@@ -130,9 +129,10 @@ export default function TabContainer({
)}
{panelInfo?.shptmBanrTpNm === "VOD" && tab === 1 && (
<FeaturedShowContents
featuredShowsInfos={featuredShowsInfos}
featuredShowsInfos={playListInfo}
currentVideoInfo={playListInfo[selectedIndex]}
setSelectedIndex={setSelectedIndex}
selectedIndex={selectedIndex}
videoVerticalVisible={videoVerticalVisible}
currentVideoShowId={playListInfo[selectedIndex]?.showId}
tabIndex={tab}

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

@@ -12,6 +12,7 @@ import { $L, removeSpecificTags } from "../../../../utils/helperMethods";
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
import css from "./LiveChannelContents.module.less";
import { getMainCategoryShowDetail } from "../../../../actions/mainActions";
export default function FeaturedShowContents({
featuredShowsInfos,
@@ -19,6 +20,7 @@ export default function FeaturedShowContents({
currentVideoInfo,
currentVideoShowId,
setSelectedIndex,
selectedIndex,
tabIndex,
handleItemFocus,
}) {
@@ -51,18 +53,11 @@ export default function FeaturedShowContents({
return;
}
setSelectedIndex(index + 1);
setSelectedIndex(index);
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
patnrId,
showId,
lgCatCd,
shptmBanrTpNm: "VOD",
isUpdatedByClick: true,
},
getMainCategoryShowDetail({
patnrId: patnrId,
showId: showId,
})
);
};
@@ -103,7 +98,7 @@ export default function FeaturedShowContents({
useEffect(() => {
const timer = setTimeout(() => {
Spotlight.focus("featuredShows-video-0");
Spotlight.focus("tabChannel-video-" + selectedIndex);
});
return () => clearTimeout(timer);
@@ -120,7 +115,6 @@ export default function FeaturedShowContents({
itemWidth={videoVerticalVisible ? 540 : 600}
itemHeight={176}
spacing={12}
noScrollByWheel={false}
/>
) : (
<ListEmptyContents tabIndex={tabIndex} />