live > vod(핑크퐁) 클릭시 vod channel 리스트 추가 및 자동재생

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -6,7 +6,12 @@ import Spotlight from "@enact/spotlight";
 
 import { updatePanel } from "../../../../actions/panelActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from "../../../../utils/Config";
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MENU,
+  LOG_MESSAGE_ID,
+  panel_names,
+} from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
 import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
 import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
@@ -22,10 +27,12 @@ export default function LiveChannelContents({
   tabIndex,
   handleItemFocus,
   tabTitle,
-  panelInfo
+  panelInfo,
+  isFilteredByPatnr19,
 }) {
   const dispatch = useDispatch();
   const isClickBlocked = useRef(false);
+  const scrollToRef = useRef(null);
   const handleFocus = useCallback(
     () => () => {
       if (handleItemFocus) {
@@ -35,6 +42,18 @@ export default function LiveChannelContents({
     [handleItemFocus]
   );
 
+  // cbScrollTo 콜백으로 scrollTo 함수 받기
+  const handleScrollTo = useCallback((scrollToFn) => {
+    scrollToRef.current = scrollToFn;
+  }, []);
+
+  // VOD Channel로 전환될 때 스크롤을 최상단으로 이동
+  useEffect(() => {
+    if (isFilteredByPatnr19 && scrollToRef.current) {
+      scrollToRef.current({ index: 0, animate: false, focus: false });
+    }
+  }, [isFilteredByPatnr19]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const {
@@ -63,8 +82,8 @@ export default function LiveChannelContents({
           category: catNm,
           partner: patncNm,
           contextName: LOG_CONTEXT_NAME.SHOW,
-          messageId: LOG_MESSAGE_ID.CONTENTCLICK
-        }
+          messageId: LOG_MESSAGE_ID.CONTENTCLICK,
+        };
         dispatch(sendLogTotalRecommend(params));
         //중복클릭방지
         if (isClickBlocked.current) {
@@ -122,6 +141,7 @@ export default function LiveChannelContents({
           startDt={strtDt}
           endDt={endDt}
           currentTime={currentTime}
+          currentVideoVisible={currentVideoShowId === liveInfos[index].showId}
         />
       );
     },
@@ -140,6 +160,7 @@ export default function LiveChannelContents({
       <div className={css.container}>
         {liveInfos && liveInfos.length > 0 ? (
           <TVirtualGridList
+            cbScrollTo={handleScrollTo}
             dataSize={liveInfos.length}
             direction="vertical"
             renderItem={renderItem}