[playerpanel] TabButton in overlay && chat tabcontents error

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js

@@ -723,7 +723,7 @@ const VideoPlayerBase = class extends React.Component {
   static contextType = FloatingLayerContext;
 
   static defaultProps = {
-    // autoCloseTimeout: 5000,
+    autoCloseTimeout: 10000,
     feedbackHideDelay: 3000,
     initialJumpDelay: 400,
     jumpBy: 30,
@@ -2067,6 +2067,9 @@ const VideoPlayerBase = class extends React.Component {
       thumbnailUrl,
       type,
       isYoutube,
+      sideContentsVisible,
+      setSideContentsVisible,
+
       ...mediaProps
     } = this.props;
 
@@ -2187,6 +2190,8 @@ const VideoPlayerBase = class extends React.Component {
                 panelInfo={panelInfo}
                 setSelectedIndex={setSelectedIndex}
                 setIsSubtitleActive={setIsSubtitleActive}
+                sideContentsVisible={sideContentsVisible}
+                setSideContentsVisible={setSideContentsVisible}
                 type={type}
               />
             </div>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx

@@ -1,22 +1,19 @@
-import React, {
+import React, { useCallback, useEffect, useMemo } from "react";
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
 
-import { useDispatch } from 'react-redux';
+import { useDispatch } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from "@enact/spotlight/Spottable";
-import Spottable from '@enact/spotlight/Spottable';
+import Marquee from "@enact/ui/Marquee";
-import Marquee from '@enact/ui/Marquee';
 
-import { updatePanel } from '../../../actions/panelActions';
+import { updatePanel } from "../../../actions/panelActions";
-import { panel_names } from '../../../utils/Config';
+import { panel_names } from "../../../utils/Config";
-import { $L } from '../../../utils/helperMethods';
+import { $L } from "../../../utils/helperMethods";
-import { SpotlightIds } from '../../../utils/SpotlightIds';
+import { SpotlightIds } from "../../../utils/SpotlightIds";
-import css from './PlayerOverlayContents.module.less';
+import PlayerTabButton from "../PlayerTabContents/TabButton/PlayerTabButton";
+import TabContainer from "../PlayerTabContents/TabContaienr";
+import css from "./PlayerOverlayContents.module.less";
 
 const SpottableBtn = Spottable("button");
 
@@ -32,6 +29,8 @@ export default function PlayerOverlayContents({
   onClick,
   setSelectedIndex,
   setIsSubtitleActive,
+  sideContentsVisible,
+  setSideContentsVisible,
   type,
 }) {
   const dispatch = useDispatch();
@@ -42,7 +41,10 @@ export default function PlayerOverlayContents({
     }
   };
 
-  const handleSubtitleOnClick = () => {
+  const handleSubtitleOnClick = (e) => {
+    // e.stopPropagation();
+    // e.preventDefault();
+
     setIsSubtitleActive((prev) => !prev);
   };
 
@@ -124,6 +126,16 @@ export default function PlayerOverlayContents({
     },
     [panelInfo]
   );
+  const currentSideButtonStatus = useMemo(() => {
+    if (
+      panelInfo?.shptmBanrTpNm !== "MEDIA" &&
+      !panelInfo?.modal &&
+      !sideContentsVisible
+    ) {
+      return true;
+    }
+    return false;
+  }, [panelInfo, sideContentsVisible]);
 
   return (
     <>
@@ -151,6 +163,14 @@ export default function PlayerOverlayContents({
               onSpotlightRight={onSpotlightMoveSlider}
             />
           </div>
+
+          {currentSideButtonStatus && (
+            <PlayerTabButton
+              setSideContentsVisible={setSideContentsVisible}
+              sideContentsVisible={sideContentsVisible}
+            />
+          )}
+
           <div className={css.videoButtonContainer}>
             <SpottableBtn
               className={css.subtitleButton}

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

@@ -62,11 +62,12 @@ const PlayerPanel = ({
   const [playListInfo, setPlayListInfo] = useState("");
   const [shopNowInfo, setShopNowInfo] = useState();
   const [modalStyle, setModalStyle] = useState({});
-  const [sideOpen, setSideOpen] = useState(true);
+  const [sideContentsVisible, setSideContentsVisible] = useState(true);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isUpdate, setIsUpdate] = useState(false);
   const [currentTime, setCurrentTime] = useState();
-  const [isSubtitleActive, setIsSubtitleActive] = useState(false);
+  const [isChatVisible, setIsChatVisible] = useState(true);
+  const [isSubtitleActive, setIsSubtitleActive] = useState(true);
   const panels = useSelector((state) => state.panels.panels);
   const chatData = useSelector((state) => state.play.chatData);
   const showDetailInfo = useSelector((state) => state.main.showDetailInfo);
@@ -149,10 +150,10 @@ const PlayerPanel = ({
   );
 
   const autoCloseVideoOverlay = useMemo(() => {
-    if (!sideOpen && panelInfo.modal === false) {
+    if (!sideContentsVisible && panelInfo.modal === false) {
-      return 3000;
+      return 10000;
     }
-  }, [sideOpen, panelInfo]);
+  }, [sideContentsVisible, panelInfo]);
 
   const mediainfoHandler = useCallback(
     (ev) => {
@@ -190,7 +191,7 @@ const PlayerPanel = ({
     window.addEventListener("click", handleAction);
     window.addEventListener("keydown", handleAction);
 
-    sideCotnentsTimer = setTimeout(() => setSideOpen(false), 10000);
+    sideCotnentsTimer = setTimeout(() => setSideContentsVisible(false), 10000);
 
     return () => {
       window.removeEventListener("click", handleAction);
@@ -306,12 +307,6 @@ const PlayerPanel = ({
     }
   }, [isActive]);
 
-  // useEffect(() => {
-  //   if (!panelInfo.modal) {
-  //     Spotlight.focus("videoPlayer");
-  //   }
-  // }, [panelInfo.modal]);
-
   useEffect(() => {
     if (panelInfo.modal && panelInfo.modalContainerId) {
       const node = document.querySelector(
@@ -388,6 +383,20 @@ const PlayerPanel = ({
     return true;
   }, [currentPlayingUrl, currentSubtTitleUrl, currentSubtitleBlob]);
 
+  const chatVisible = useMemo(() => {
+    if (playListInfo && chatData && !panelInfo.modal && isChatVisible) {
+      return true;
+    }
+    return false;
+  }, [playListInfo, chatData, panelInfo.modal, isChatVisible]);
+
+  const isQRCodeVisible = useMemo(() => {
+    if (playListInfo && shopNowInfo && !panelInfo.modal) {
+      return true;
+    }
+    return false;
+  }, [playListInfo, shopNowInfo, panelInfo.modal]);
+
   useEffect(() => {
     if (currentSubtTitleUrl) {
       dispatch(getSubTitle({ showSubtitleUrl: currentSubtTitleUrl }));
@@ -411,6 +420,27 @@ const PlayerPanel = ({
     }
   }, [currentSubtitleBlob, isSubtitleActive]);
 
+  useEffect(() => {
+    if (!panelInfo.modal) {
+      Spotlight.focus("videoPlayer");
+    }
+  }, [panelInfo.modal]);
+
+  const currentSideButtonStatus = useMemo(() => {
+    if (
+      panelInfo?.shptmBanrTpNm !== "MEDIA" &&
+      !panelInfo?.modal &&
+      sideContentsVisible
+    ) {
+      return true;
+    }
+    return false;
+  }, [panelInfo, sideContentsVisible]);
+
+  useEffect(() => {
+    Spotlight.focus("player-tab-arrow");
+  }, [sideContentsVisible]);
+
   return (
     <TPanel
       isTabActivated={false}
@@ -428,32 +458,36 @@ const PlayerPanel = ({
           <VideoPlayer
             setApiProvider={getPlayer}
             disabled={panelInfo.modal}
-            onEnded={onClickBack} // 플레이어가 끝날때 호출
+            onEnded={onClickBack}
-            noAutoPlay={cannotPlay} // 오토플레이
+            noAutoPlay={cannotPlay}
-            autoCloseTimeout={autoCloseVideoOverlay} // 컨트롤 버튼 숨기는 시간
+            autoCloseTimeout={autoCloseVideoOverlay}
-            playListInfo={playListInfo && playListInfo} // 비디오 데이터
+            stopAutoCloseTimeout={sideContentsVisible}
-            onBackButton={onClickBack} // 뒤로가기 버튼
+            onBackButton={onClickBack}
-            panelInfo={panelInfo} // 패널정보 (라이브,VOD)
+            spotlightDisabled={sideContentsVisible || panelInfo.modal}
-            spotlightDisabled={sideOpen || panelInfo.modal}
             onLoadedData={mediainfoHandler}
             onLoadedMetadata={mediainfoHandler}
             onDurationChange={mediainfoHandler}
             onTimeUpdate={mediainfoHandler}
+            isYoutube={isYoutube}
             src={currentPlayingUrl}
             style={panelInfo.modal ? modalStyle : {}}
             modalClassName={panelInfo.modal && panelInfo.modalClassName}
             reactPlayerConfig={reactPlayerSubtitleConfig}
             thumbnailUrl={playListInfo[selectedIndex]?.thumbnailUrl}
-            type={panelInfo?.shptmBanrTpNm}
-            setSelectedIndex={setSelectedIndex} // 선택한 인덱스 Set
-            selectedIndex={selectedIndex} // 선택한 인덱스
-            setIsSubtitleActive={setIsSubtitleActive}
-            isYoutube={isYoutube}
             videoComponent={
               (typeof window === "object" && !window.PalmSystem) || isYoutube
                 ? TReactPlayer
                 : Media
             }
+            // VideoOverlay props
+            type={panelInfo?.shptmBanrTpNm}
+            panelInfo={panelInfo}
+            playListInfo={playListInfo && playListInfo}
+            selectedIndex={selectedIndex}
+            setSelectedIndex={setSelectedIndex}
+            setIsSubtitleActive={setIsSubtitleActive}
+            setSideContentsVisible={setSideContentsVisible}
+            sideContentsVisible={sideContentsVisible}
           >
             {typeof window === "object" && window.PalmSystem && (
               <source src={currentPlayingUrl} type="application/mpegurl" />
@@ -469,28 +503,24 @@ const PlayerPanel = ({
 
         {/* Overlay Area */}
 
-        {playListInfo && playListInfo[selectedIndex]?.orderPhnNo && (
+        {isQRCodeVisible && (
-          <VideoOverlayWithPhoneNumber
-            className={css.videoOverlayWithPhoneNumber}
-            orderPhnNo={playListInfo[selectedIndex]?.orderPhnNo}
-            show
-          />
-        )}
-        {playListInfo && shopNowInfo && !panelInfo.modal && (
           <PlayerOverlayQRCode
             shopNowInfos={shopNowInfo}
             currentTime={currentTime}
             type={panelInfo?.shptmBanrTpNm}
           />
         )}
-        {playListInfo && chatData && !panelInfo.modal && (
+
-          <PlayerOverlayChat currentTime={currentTime} />
+        {chatVisible && <PlayerOverlayChat currentTime={currentTime} />}
-        )}
+
-        {panelInfo?.shptmBanrTpNm !== "MEDIA" && !panelInfo?.modal && (
+        {currentSideButtonStatus && (
-          <PlayerTabButton setSideOpen={setSideOpen} sideOpen={sideOpen} />
+          <PlayerTabButton
+            setSideContentsVisible={setSideContentsVisible}
+            sideContentsVisible={sideContentsVisible}
+          />
         )}
 
-        {sideOpen &&
+        {sideContentsVisible &&
           panelInfo?.shptmBanrTpNm !== "MEDIA" &&
           !panelInfo?.modal && (
             <TabContainer
@@ -499,8 +529,8 @@ const PlayerPanel = ({
               playListInfo={playListInfo}
               setSelectedIndex={setSelectedIndex}
               liveChannelInfos={liveChannelInfos || liveShowInfos}
-              sideOpen={sideOpen}
+              setSideContentsVisible={setSideContentsVisible}
-              setSideOpen={setSideOpen}
+              setIsChatVisible={setIsChatVisible}
             />
           )}
       </Container>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx

@@ -1,68 +1,72 @@
-import React, {
+import React, { useCallback, useEffect } from "react";
-  useCallback,
-  useEffect,
-} from 'react';
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './PlayerTabButton.module.less';
+import css from "./PlayerTabButton.module.less";
 
 const SpottableComponent = Spottable("button");
-export default function PlayerTabButton({ sideOpen, setSideOpen }) {
+const Container = SpotlightContainerDecorator(
+  { enterTo: "default-element", preserveld: true },
+  "div"
+);
+export default function PlayerTabButton({
+  sideContentsVisible,
+  setSideContentsVisible,
+}) {
   const handleTabOnClick = (e) => {
-    e.stopPropagation();
+    setSideContentsVisible((prev) => !prev);
-    setSideOpen((prev) => !prev);
   };
 
   const onSpotlightLeft = useCallback(
     (e) => {
-      if (!sideOpen) {
+      if (!sideContentsVisible) {
         e.stopPropagation();
         Spotlight.focus("videoIndicator-up-button");
       }
     },
-    [sideOpen]
+    [sideContentsVisible]
   );
 
   const onSpotlightDown = useCallback(
     (e) => {
-      if (!sideOpen) {
+      if (!sideContentsVisible) {
         e.stopPropagation();
         Spotlight.focus("player-shrinkbutton");
       }
     },
-    [sideOpen]
+    [sideContentsVisible]
   );
 
   const onSpotlightUp = useCallback(
     (e) => {
-      if (!sideOpen) {
+      if (!sideContentsVisible) {
         e.stopPropagation();
         Spotlight.focus("videoIndicator-up-button");
       }
     },
-    [sideOpen]
+    [sideContentsVisible]
   );
 
   return (
-    <div
+    <Container
       className={classNames(
         css.arrow,
-        sideOpen ? css.arrowOpen : css.arrowClose
+        sideContentsVisible && css.arrowOpen,
+        !sideContentsVisible && css.arrowClose
       )}
     >
       <SpottableComponent
         spotlightId={"player-tab-arrow"}
         onClick={handleTabOnClick}
         onSpotlightLeft={onSpotlightLeft}
-        // onSpotlightRight={onSpotlightUp}
         onSpotlightUp={onSpotlightUp}
         onSpotlightDown={onSpotlightDown}
         className={css.button}
       />
-    </div>
+    </Container>
   );
 }

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.module.less

@@ -4,7 +4,7 @@
   .size(@w: 48px, @h: 144px);
   text-align: center;
   position: absolute;
-  top: 468px;
+
   z-index: 11;
   > button {
     .size(@w: 48px, @h: 144px);
@@ -16,6 +16,8 @@
     cursor: pointer;
   }
   &.arrowClose {
+    top: 400px;
+    z-index: 11;
     right: -2px;
     > button {
       &.button {
@@ -27,6 +29,7 @@
     }
   }
   &.arrowOpen {
+    top: 468px;
     right: 658px;
     z-index: 11;
     > button {

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 
+import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TButtonTab, {
@@ -24,6 +25,8 @@ export default function TabContainer({
   shopNowInfo,
   setSelectedIndex,
   liveChannelInfos,
+  setSideContentsVisible,
+  setIsChatVisible,
 }) {
   const [tab, setTab] = useState(0);
 
@@ -50,7 +53,13 @@ export default function TabContainer({
         listType={LIST_TYPE.small}
       />
 
-      {tab === 0 && <ShopNowContents shopNowInfo={shopNowInfo} />}
+      {tab === 0 && (
+        <ShopNowContents
+          shopNowInfo={shopNowInfo}
+          setSideContentsVisible={setSideContentsVisible}
+          setIsChatVisible={setIsChatVisible}
+        />
+      )}
       {panelInfo?.shptmBanrTpNm === "VOD" && tab === 1 && (
         <FeaturedShowContents
           featuredShowsInfos={playListInfo}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContainer.module.less

@@ -2,9 +2,9 @@
 @import "../../../style/utils.module.less";
 
 .tabContainer {
-  .size(@w:660px, @h:100%);
+  .size(@w:660px, @h:1080px);
   background: #2c343f;
-  position: absolute;
+  position: fixed;
   right: 0;
   top: 0;
   padding: 48px 30px 0 30px;

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

@@ -63,11 +63,9 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
   );
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    setTimeout(() => {
       Spotlight.focus("liveChannel-Item-0");
     });
-
-    return () => clearTimeout(timer);
   }, [liveInfos]);
   return (
     <>

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

@@ -4,7 +4,7 @@ import { useDispatch } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import { pushPanel } from "../../../../actions/panelActions";
+import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
@@ -15,7 +15,11 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveId: true },
   "div"
 );
-export default function ShopNowContents({ shopNowInfo }) {
+export default function ShopNowContents({
+  shopNowInfo,
+  setSideContentsVisible,
+  setIsChatVisible,
+}) {
   const dispatch = useDispatch();
   const [height, setHeight] = useState();
 
@@ -35,6 +39,8 @@ export default function ShopNowContents({ shopNowInfo }) {
         shopNowInfo[index];
 
       const handleItemClick = () => {
+        setSideContentsVisible(false);
+        setIsChatVisible(false);
         dispatch(
           pushPanel({
             name: panel_names.DETAIL_PANEL,