[FeaturedBrandsPanel] issue fix, SHOPTIME-2761

Detail Note:

1. modify `propsAreEqual` function in FeaturedBrandsPanel.jsx
2. add `finishVideoPreview` when PlayerPanel changes to modal case in air mouse mode

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -640,6 +640,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
                         brandChanInfo={brandChanInfo}
                         brandChannelCnt={brandChannelCnt}
                         handleItemFocus={handleItemFocus}
+                        isOnTop={isOnTop}
                         order={idx + 1}
                         panelInfo={panelInfo}
                         spotlightId={TEMPLATE_CODE_CONF.LIVE_CHANNELS}
@@ -866,6 +867,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
     fromQuickMenu,
     handleItemFocus,
     hasQuickMenu,
+    isOnTop,
     panelInfo,
     selectedCatCd,
     selectedCatCdLv1,
@@ -874,7 +876,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
     selectedPatncNm,
     selectedPatnrId,
     selectedSeriesId,
-    shouldRenderComponent,
     sortedBrandLayoutInfo,
   ]);
 
@@ -959,10 +960,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
 const propsAreEqual = (prev, next) => {
   const keys = Object.keys(prev);
   const nextKeys = Object.keys(next);
-  if (!next.isOnTop) {
-    //ignore event on background
-    return true;
-  }
+  // if (!next.isOnTop) {
+  //   //ignore event on background
+  //   return true;
+  // }
   if (keys.length !== nextKeys.length) {
     return false;
   }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx

@@ -28,6 +28,7 @@ export default memo(function LiveChannels({
   brandChanInfo,
   brandChannelCnt,
   handleItemFocus,
+  isOnTop,
   order,
   panelInfo,
   selectedPatnrId,
@@ -159,6 +160,7 @@ export default memo(function LiveChannels({
                         brandChanInfoItem={brandChanInfoItem}
                         contentsIndex={contentsIndex}
                         handleItemFocus={_handleItemFocus}
+                        isOnTop={isOnTop}
                         key={"live-channels-vertical-contents-" + contentsIndex}
                         selectedPatnrId={selectedPatnrId}
                       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useRef, useState } from "react";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
@@ -36,23 +36,25 @@ export default memo(function LiveChannelsVerticalContents({
   brandChanInfoItem,
   contentsIndex,
   handleItemFocus,
+  isOnTop,
   selectedPatnrId,
 }) {
   const dispatch = useDispatch();
 
+  const cursorVisible = useSelector(
+    (state) => state.common.appStatus.cursorVisible
+  );
   const [isFocused, setIsFocused] = useState(false);
 
+  const isFullScreenModeActivedRef = useRef(false);
   const videoFocusTimeoutJob = useRef(new Job((func) => func(), 1000));
 
   const {
-    brandProductInfo,
+    brandProductInfo, //
     chanId,
-    // chanNm,
     patnrId,
     showId,
-    // showNm,
     showUrl,
-    // vtctpYn,
   } = brandChanInfoItem;
 
   useEffect(() => {
@@ -72,6 +74,17 @@ export default memo(function LiveChannelsVerticalContents({
     }
   }, [brandProductInfo, contentsIndex, selectedPatnrId]);
 
+  useEffect(() => {
+    if (isFullScreenModeActivedRef.current && isOnTop) {
+      setTimeout(() => {
+        if (cursorVisible || Spotlight.getPointerMode()) {
+          dispatch(finishVideoPreview());
+          isFullScreenModeActivedRef.current = false;
+        }
+      });
+    }
+  }, [cursorVisible, isOnTop]);
+
   useEffect(() => {
     const videoFocusTimeoutJobValue = videoFocusTimeoutJob.current;
 
@@ -134,6 +147,8 @@ export default memo(function LiveChannelsVerticalContents({
           shptmBanrTpNm: "LIVE",
         })
       );
+
+      isFullScreenModeActivedRef.current = true;
     }
 
     videoFocusTimeoutJob.current.stop();