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

[251120] fix: PlayerPanel tabIndex=2 focus done

Browse Source 
🕐 커밋 시간: 2025. 11. 20. 16:17:48

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +77줄
  • 삭제: -20줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선
This commit is contained in:
hyeon soo noh
2025-11-20 16:17:49 +09:00
parent 90481f787d
commit bbcc4eddd1
3 changed files with 77 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -193,25 +193,25 @@ function PlayerOverlayContents({
[tabIndexV2]
);
// Back Button arrow down 전용 핸들러 - tabIndex에 따라 다르게 포커스 설정
// Back Button arrow down 전용 핸들러 - tabIndex에 따라 다른 포커스
const handleBackButtonDown = useCallback(
(e) => {
e.stopPropagation();
e.preventDefault();
if (tabContainerVersion === 2 && belowContentsVisible) {
console.log(`[handleBackButtonDown] tabIndexV2: ${tabIndexV2}`);
if (tabIndexV2 === 0) {
// tabIndexV2가 0일 때 ShopNow 닫기 버튼으로 포커스
const result = Spotlight.focus('shownow_close_button');
console.log(`[handleBackButtonDown] tabIndexV2=0, focus result:`, result);
} else if (tabIndexV2 === 1) {
const result = Spotlight.focus('below-tab-live-channel-button');
console.log(`[handleBackButtonDown] tabIndexV2=1, focus result:`, result);
// tabIndexV2가 1일 때 below-tab-live-channel-button으로 포커스
Spotlight.focus('below-tab-live-channel-button');
} else if (tabIndexV2 === 2) {
const result = Spotlight.focus('live-channel-next-button');
// const result = Spotlight.focus('below-tab-shop-now-button');
console.log(`[handleBackButtonDown] tabIndexV2=2, focus result:`, result);
// tabIndexV2가 2일 때 LiveChannelNext로 포커스
Spotlight.focus('live-channel-next-button');
} else {
// 그 외에는 기존 로직 사용
onSpotlightMoveMediaButton(e);
}
} else {
onSpotlightMoveMediaButton(e);
@@ -350,10 +350,40 @@ function PlayerOverlayContents({
)}
onClick={handleSubtitleOnClick}
spotlightId="player-subtitlebutton"
onSpotlightUp={onSpotlightMoveBackButton}
onSpotlightLeft={onSpotlightMoveBackButton}
onSpotlightRight={onSpotlightMoveMediaButton}
onSpotlightDown={onSpotlightMoveMediaButton}
onSpotlightUp={(e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 ShopNowButton으로 포커스
if (tabContainerVersion === 2 && tabIndexV2 === 2) {
Spotlight.focus('below-tab-shop-now-button');
} else {
onSpotlightMoveBackButton();
}
}}
onSpotlightLeft={(e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 LiveChannelNext로 포커스
if (tabContainerVersion === 2 && tabIndexV2 === 2) {
Spotlight.focus('live-channel-next-button');
}
}}
onSpotlightRight={(e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 LiveChannelNext로 포커스
if (tabContainerVersion === 2 && tabIndexV2 === 2) {
Spotlight.focus('live-channel-next-button');
}
}}
onSpotlightDown={(e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 ShopNowButton으로 포커스
if (tabContainerVersion === 2 && tabIndexV2 === 2) {
Spotlight.focus('below-tab-shop-now-button');
}
}}
aria-label="Caption"
/>
</div>
@@ -364,7 +394,14 @@ function PlayerOverlayContents({
className={css.backIcon}
spotlightId="player-back-button"
onSpotlightDown={handleBackButtonDown}
onSpotlightRight={onSpotlightMoveSubtitleButton}
onSpotlightRight={(e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 ShopNowButton으로 포커스
if (tabContainerVersion === 2 && tabIndexV2 === 2) {
Spotlight.focus('below-tab-shop-now-button');
}
}}
onSpotlightUp={onSpotlightMoveSubtitleButton}
aria-label="Video Player Close"
ref={backBtnRef}

18
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
View File

@@ -23,9 +23,19 @@ export default function LiveChannelNext({
const handleSpotlightUp = (e) => {
e.stopPropagation();
e.preventDefault();
if (!Spotlight.focus('player-subtitlebutton')) {
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
}
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
};
const handleSpotlightDown = (e) => {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('player-subtitlebutton');
};
const handleSpotlightRight = (e) => {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('player-subtitlebutton');
};
return (
@@ -35,6 +45,8 @@ export default function LiveChannelNext({
onClick={onClick}
spotlightId={spotlightId}
onSpotlightUp={handleSpotlightUp}
onSpotlightDown={handleSpotlightDown}
onSpotlightRight={handleSpotlightRight}
>
<div className={css.logoWrapper}>
<div className={css.logoBackground} style={{ background: backgroundColor }}>

14
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx
View File

@@ -12,9 +12,16 @@ export default function ShopNowButton({ onClick }) {
const handleSpotlightUp = (e) => {
e.stopPropagation();
e.preventDefault();
if (!Spotlight.focus('player-subtitlebutton')) {
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
}
// tabIndexV2가 2일 때만 Back 버튼으로 포커스
// 이 속성은 부모 컴포넌트에서 props로 받아야 하지만, 일단 Back 버튼으로 직접 이동
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
};
const handleSpotlightDown = (e) => {
e.stopPropagation();
e.preventDefault();
// tabIndexV2가 2일 때만 CC 버튼으로 내려가기
Spotlight.focus('player-subtitlebutton');
};
return (
<div className={css.container}>
@@ -23,6 +30,7 @@ export default function ShopNowButton({ onClick }) {
onClick={onClick}
spotlightId="below-tab-shop-now-button"
onSpotlightUp={handleSpotlightUp}
onSpotlightDown={handleSpotlightDown}
>
<span className={css.buttonText}>SHOP NOW</span>
</SpottableDiv>