diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx index 6d997a82..a6b5c3c3 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx @@ -21,6 +21,7 @@ export default function PopularShowIndicator({ selectedIndex, handleItemFocus, handleItemClick, + isOnTop, }) { const { thumbnailUrl960, @@ -79,6 +80,7 @@ export default function PopularShowIndicator({ handleItemClick={_handleItemClick} handleItemFocus={_handleItemFocus} patncNm={patncNm} + isOnTop={isOnTop} /> diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx index fcb94417..5c9006eb 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx @@ -1,9 +1,10 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; import classNames from "classnames"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { Job } from "@enact/core/util"; +import Spotlight from "@enact/spotlight"; import Spottable from "@enact/spotlight/Spottable"; import { Marquee } from "@enact/ui/Marquee"; @@ -47,10 +48,27 @@ export default function PopularVideoCard({ handleItemFocus, patncNm, handleItemClick, + isOnTop, }) { const dispatch = useDispatch(); const [isFocused, setIsFocused] = useState(false); const videoFocusTimeoutJob = useRef(new Job((func) => func(), 1000)); + const isFullScreenModeActivedRef = useRef(false); + + const cursorVisible = useSelector( + (state) => state.common.appStatus.cursorVisible + ); + + useEffect(() => { + if (isFullScreenModeActivedRef.current && isOnTop) { + setTimeout(() => { + if (cursorVisible || Spotlight.getPointerMode()) { + dispatch(finishVideoPreview()); + isFullScreenModeActivedRef.current = false; + } + }); + } + }, [cursorVisible, isOnTop]); useEffect(() => { const videoFocusTimeoutJobValue = videoFocusTimeoutJob.current; @@ -72,6 +90,8 @@ export default function PopularVideoCard({ modalClassName: css.videoModal, }) ); + + isFullScreenModeActivedRef.current = true; }); return () => videoFocusTimeoutJobValue.stop(); diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx index 9f88fb7b..0e63e040 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx @@ -26,10 +26,10 @@ import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPag import usePrevious from "../../hooks/usePrevious"; import useScrollReset from "../../hooks/useScrollReset"; import useScrollTo from "../../hooks/useScrollTo"; +import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate"; import { LOG_MENU, panel_names } from "../../utils/Config"; import { $L, scaleH } from "../../utils/helperMethods"; import PopularShowIndicator from "./PopularShow/PopularShowIndicator"; -import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate"; import css from "./TrendingNowPanel.module.less"; const Container = SpotlightContainerDecorator( @@ -325,6 +325,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => { selectedIndex={selectedIndex} handleItemFocus={handleItemFocus} handleItemClick={handleItemClick} + isOnTop={isOnTop} /> )}