[TrendingNowPanel] video preview focus issue

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}
             />
           </Container>
           <Container className={css.popularProductListContainer}>

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();

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}
                 />
               </Container>
             )}