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

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

Browse Source
This commit is contained in:
dongyoungKo
2025-05-27 18:00:44 +09:00
parent a55bc49ef3
commit 460fae80fa
6 changed files with 71 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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) => {

4
com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js
View File

@@ -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,

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

@@ -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>

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

@@ -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,

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

@@ -49,11 +49,7 @@ export default function PlayerOverlayContents({
const backBtnRef = useRef(null);
useEffect(() => {
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}
/>
<div
className={classNames(
panelInfo?.shptmBanrTpNm === "LIVE" && css.liveIcon
)}
aria-label={panelInfo?.shptmBanrTpNm === "LIVE" && "Live Icon"}
className={classNames(type === "LIVE" && css.liveIcon)}
aria-label={type === "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>

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

@@ -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 = ({
<PlayerTabButton
setSideContentsVisible={setSideContentsVisible}
sideContentsVisible={sideContentsVisible}
videoType={panelInfo?.shptmBanrTpNm}
videoType={isShowType}
/>
)}