[251026] feat: HomeBanner Video AutoStart
🕐 커밋 시간: 2025. 10. 26. 22:48:04 📊 변경 통계: • 총 파일: 5개 • 추가: +58줄 • 삭제: -2975줄 📝 수정된 파일: ~ com.twin.app.shoptime/.gitignore ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx 🗑️ 삭제된 파일: - com.twin.app.shoptime/2025-10-26-focus-1px-to-recovery.txt - com.twin.app.shoptime/shopperHouseResponse.txt 🔧 주요 변경 내용: • 소규모 기능 개선 • 코드 정리 및 최적화 Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
1
com.twin.app.shoptime/.gitignore
vendored
1
com.twin.app.shoptime/.gitignore
vendored
@@ -17,3 +17,4 @@ srcBackup
|
||||
# com.lgshop.app_*.ipk
|
||||
.docs
|
||||
nul
|
||||
.txt
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,41 +0,0 @@
|
||||
HTTP/1.1 200 OK
|
||||
X-Server-Time: 1284366813334
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
“retCode”: 0,
|
||||
“retMsg”: “Success”
|
||||
"data": {
|
||||
"result": {
|
||||
"time": "25 ms",
|
||||
"results": [
|
||||
{
|
||||
"docs": [
|
||||
{
|
||||
"dcPrice": "$ 69.99",
|
||||
"thumbnail": "https://media.us.lg.com/transform/ecomm-PDPGallery-1100x730/e9b7c49b-66ed-45d4-8890-dd32c91a2053/TV-accessories_WS25XA_gallery-01_3000x3000",
|
||||
"reviewGrade": "",
|
||||
"partnerName": "LGE",
|
||||
"partnerLogo": "http://aic-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/us_obs_logo_60x60.png",
|
||||
"price": "$ 69.99",
|
||||
"contentId": "V3_8001_Tv Search_PD_9_WS25XA",
|
||||
"title": "StandbyME 2 Carry Strap & Wall-Mount Holder",
|
||||
"soldout": "N",
|
||||
"rankInfo": 1,
|
||||
"euEnrgLblInfos": [ ]
|
||||
}
|
||||
],
|
||||
"total_count": 100,
|
||||
"type": "item",
|
||||
"hit_count": 100,
|
||||
"searchId": "SEARCH_uCS3z1N0QgtRXjsyhDCpA0R80",
|
||||
"sortingType": "LG_RECOMMENDED",
|
||||
"rangeType": “SIMILAR",
|
||||
"createdAt": “2025-09-23 13:23:11",
|
||||
"relativeQuerys": [
|
||||
"What are some luxury skincare products",
|
||||
"What are some luxury skincare products"
|
||||
]
|
||||
}
|
||||
],
|
||||
"htt
|
||||
@@ -4,6 +4,7 @@ import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
@@ -41,6 +42,7 @@ import {
|
||||
releasePlayControl,
|
||||
requestPlayControl,
|
||||
startVideoPlayer,
|
||||
startVideoPlayerNew,
|
||||
} from '../../../actions/playActions';
|
||||
import CustomImage from '../../../components/CustomImage/CustomImage';
|
||||
// import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
|
||||
@@ -49,7 +51,6 @@ import TNewPopUp from '../../../components/TPopUp/TNewPopUp';
|
||||
import {
|
||||
useFocusHistory,
|
||||
} from '../../../hooks/useFocusHistory/useFocusHistory';
|
||||
import { useVideoPlay } from '../../../hooks/useVideoPlay/useVideoPlay';
|
||||
import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
|
||||
import { panel_names } from '../../../utils/Config';
|
||||
import { $L } from '../../../utils/helperMethods';
|
||||
@@ -99,12 +100,6 @@ export default function HomeBanner({
|
||||
logPrefix: "[HomeBanner-Focus]",
|
||||
});
|
||||
|
||||
// 🔽 useVideoPlay - 동영상 재생 제어
|
||||
const videoPlay = useVideoPlay({
|
||||
enableLogging: true,
|
||||
logPrefix: "[HomeBanner-VideoPlay]",
|
||||
});
|
||||
|
||||
// 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
|
||||
const { playByTransition, cleanup } = useVideoMove({
|
||||
enableLogging: true,
|
||||
@@ -148,6 +143,9 @@ export default function HomeBanner({
|
||||
(state) => state.common.optionalTermsPopupFlow
|
||||
);
|
||||
|
||||
// 🔽 초기 비디오 재생 플래그 (1회만 실행되도록)
|
||||
const isInitialVideoPlayRef = useRef(false);
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// 팝업표시 상태
|
||||
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] =
|
||||
@@ -378,6 +376,51 @@ export default function HomeBanner({
|
||||
return null;
|
||||
}, [bannerDataList]);
|
||||
|
||||
// 🔽 초기 비디오 자동 재생 (렌더링 완료 후)
|
||||
useEffect(() => {
|
||||
// 조건 체크
|
||||
if (!bannerDataList || isInitialVideoPlayRef.current || !defaultFocus) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 한 번만 실행
|
||||
isInitialVideoPlayRef.current = true;
|
||||
|
||||
// defaultFocus에서 배너 인덱스 추출 (예: "banner0" -> 0)
|
||||
const bannerIndex = parseInt(defaultFocus.replace('banner', ''));
|
||||
const targetBannerData = bannerDataList[bannerIndex];
|
||||
|
||||
if (!targetBannerData) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 비디오 재생 가능한 배너 찾기
|
||||
let videoData = null;
|
||||
if (targetBannerData.shptmDspyTpNm === 'Random') {
|
||||
videoData = targetBannerData.bannerDetailInfos?.[targetBannerData.randomIndex];
|
||||
} else {
|
||||
videoData = targetBannerData.bannerDetailInfos?.[0];
|
||||
}
|
||||
|
||||
if (videoData && (videoData.shptmBanrTpNm === 'LIVE' || videoData.shptmBanrTpNm === 'VOD')) {
|
||||
console.log('[HomeBanner] 초기 비디오 자동 재생:', defaultFocus);
|
||||
|
||||
dispatch(
|
||||
startVideoPlayerNew({
|
||||
bannerId: defaultFocus,
|
||||
showUrl: videoData.showUrl,
|
||||
patnrId: videoData.patnrId,
|
||||
showId: videoData.showId,
|
||||
shptmBanrTpNm: videoData.shptmBanrTpNm,
|
||||
lgCatCd: videoData.lgCatCd,
|
||||
chanId: videoData.brdcChnlId,
|
||||
modal: true,
|
||||
modalContainerId: defaultFocus,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [bannerDataList, defaultFocus, dispatch]);
|
||||
|
||||
// 약관 동의 및 선택 약관 팝업 처리 (TV 환경 최적화)
|
||||
useEffect(() => {
|
||||
if (termsLoading) {
|
||||
|
||||
@@ -463,7 +463,11 @@ const HomePanel = ({ isOnTop }) => {
|
||||
setTimeout(() => {
|
||||
Spotlight.resume();
|
||||
setFirstSpot(true);
|
||||
if (Spotlight.getPointerMode()) {
|
||||
// 비디오가 1px로 축소된 상태가 아닐 때만 finishVideoPreview 호출
|
||||
const isVideoShrunk = panels.some(
|
||||
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.shouldShrinkTo1px
|
||||
);
|
||||
if (Spotlight.getPointerMode() && !isVideoShrunk) {
|
||||
dispatch(finishVideoPreview());
|
||||
}
|
||||
if (panelInfo.currentCatCd) {
|
||||
@@ -480,7 +484,7 @@ const HomePanel = ({ isOnTop }) => {
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
[panelInfo, firstSpot, enterThroughGNB, defaultFocus, cbChangePageRef, dispatch, isOnTop]
|
||||
[panelInfo, firstSpot, enterThroughGNB, defaultFocus, cbChangePageRef, dispatch, isOnTop, panels]
|
||||
);
|
||||
|
||||
const bestSellerLoaded = useCallback(() => {
|
||||
|
||||
Reference in New Issue
Block a user