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

[TV앱테스트]Hot Picks / Theme 9 / 동시에 두군데 포커스 표시

Browse Source 
[CLM] https://harmony.lge.com:8443/issue/browse/SHOPTIME-2335
 
[DESC]
 - 되돌아 오거나 블러시에 포커싱해제처리
This commit is contained in:
junghoon86.park
2024-05-22 16:19:06 +09:00
parent 6edee52b9a
commit d351c4c2ee
4 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
View File

@@ -13,6 +13,7 @@ import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import usePrevious from "../../../../hooks/usePrevious";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV.module.less";
@@ -40,7 +41,9 @@ export default function TCFV({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const [videoFocused, setVideoFocused] = useState(false);
const videoFocusedRef = usePrevious(videoFocused);
const playingJob = useRef(new Job((func) => func(), 1000));
@@ -108,19 +111,19 @@ export default function TCFV({
);
const modalClassNameChange = useCallback(() => {
if (focused) {
if (videoFocusedRef.current) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
const onVideoFocus = useCallback(() => {
setVideoFocused(true);
}, []);
const onVideoBlur = useCallback(() => {
setVideoFocused(false);
}, []);
useEffect(() => {
@@ -138,7 +141,7 @@ export default function TCFV({
shptmBanrTpNm: "MEDIA",
modal: true,
modalContainerId: videoSpotName, //to calc width, height, left, top
modalClassName: css.videoModal,
modalClassName: modalClassNameChange(),
spotlightDisable: true,
})
);
@@ -162,7 +165,7 @@ export default function TCFV({
},
})
);
}, [focused, dispatch, modalClassNameChange]);
}, [videoFocused, dispatch, modalClassNameChange]);
return (
<>
@@ -194,8 +197,8 @@ export default function TCFV({
onClick={handleVideoClick}
className={css.videoBox}
spotlightId={videoSpotName}
onFocus={onFocus}
onBlur={onBlur}
onFocus={onVideoFocus}
onBlur={onVideoBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>

26
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
View File

@@ -12,6 +12,7 @@ import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import usePrevious from "../../../../hooks/usePrevious";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV_2.module.less";
@@ -35,7 +36,8 @@ export default function TCFV_2({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const [videoFocused, setVideoFocused] = useState(false);
const videoFocusedRef = usePrevious(videoFocused);
const playingJob = useRef(new Job((func) => func(), 1000));
@@ -111,19 +113,19 @@ export default function TCFV_2({
);
const modalClassNameChange = useCallback(() => {
if (focused) {
if (videoFocusedRef.current) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
const onVideoFocus = useCallback(() => {
setVideoFocused(true);
}, []);
const onVideoBlur = useCallback(() => {
setVideoFocused(false);
}, []);
useEffect(() => {
@@ -141,7 +143,7 @@ export default function TCFV_2({
shptmBanrTpNm: "MEDIA",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
modalClassName: modalClassNameChange(),
spotlightDisable: true,
})
);
@@ -164,7 +166,7 @@ export default function TCFV_2({
},
})
);
}, [focused, dispatch, modalClassNameChange]);
}, [videoFocused, dispatch]);
return (
<>
{data &&
@@ -201,8 +203,8 @@ export default function TCFV_2({
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
onFocus={onVideoFocus}
onBlur={onVideoBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>

27
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
View File

@@ -12,6 +12,7 @@ import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import usePrevious from "../../../../hooks/usePrevious";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV_3.module.less";
@@ -39,7 +40,9 @@ export default function TCFV_3({
const playingJob = useRef(new Job((func) => func(), 1000));
const [focused, setFocused] = useState(false);
const [videoFocused, setVideoFocused] = useState(false);
const videoFocusedRef = usePrevious(videoFocused);
const spotName = "hotpicks-data-spot" + orders;
@@ -113,19 +116,19 @@ export default function TCFV_3({
);
const modalClassNameChange = useCallback(() => {
if (focused) {
if (videoFocusedRef.current) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
const onVideoFocus = useCallback(() => {
setVideoFocused(true);
}, []);
const onVideoBlur = useCallback(() => {
setVideoFocused(false);
}, []);
useEffect(() => {
@@ -143,7 +146,7 @@ export default function TCFV_3({
shptmBanrTpNm: "MEDIA",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
modalClassName: modalClassNameChange(),
spotlightDisable: true,
})
);
@@ -166,7 +169,7 @@ export default function TCFV_3({
},
})
);
}, [focused, dispatch, modalClassNameChange]);
}, [videoFocused, dispatch]);
return (
<>
{data &&
@@ -190,8 +193,8 @@ export default function TCFV_3({
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
onFocus={onVideoFocus}
onBlur={onVideoBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponentDiv>

27
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
View File

@@ -12,6 +12,7 @@ import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import usePrevious from "../../../../hooks/usePrevious";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV_4.module.less";
@@ -36,8 +37,8 @@ export default function TCFV_4({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const [videoFocused, setVideoFocused] = useState(false);
const videoFocusedRef = usePrevious(videoFocused);
const playingJob = useRef(new Job((func) => func(), 1000));
const spotName = "hotpicks-data-spot" + orders;
@@ -114,19 +115,19 @@ export default function TCFV_4({
);
const modalClassNameChange = useCallback(() => {
if (focused) {
if (videoFocusedRef.current) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
const onVideoFocus = useCallback(() => {
setVideoFocused(true);
}, []);
const onVideoBlur = useCallback(() => {
setVideoFocused(false);
}, []);
useEffect(() => {
@@ -144,7 +145,7 @@ export default function TCFV_4({
shptmBanrTpNm: "MEDIA",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
modalClassName: modalClassNameChange(),
spotlightDisable: true,
})
);
@@ -167,7 +168,7 @@ export default function TCFV_4({
},
})
);
}, [focused, dispatch, modalClassNameChange]);
}, [videoFocused, dispatch]);
return (
<>
@@ -200,8 +201,8 @@ export default function TCFV_4({
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
onFocus={onVideoFocus}
onBlur={onVideoBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>