[playerpanel] TabButton in overlay && chat tabcontents error

2024-05-10 17:59:58 +09:00
parent afd7e7ee66
commit 95e5285d73
9 changed files with 163 additions and 88 deletions
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/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>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
@@ -1,22 +1,19 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
+import React, { useCallback, useEffect, useMemo } from "react";

-import { useDispatch } from 'react-redux';
+import { useDispatch } from "react-redux";

-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
-import Marquee from '@enact/ui/Marquee';
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+import Marquee from "@enact/ui/Marquee";

-import { updatePanel } from '../../../actions/panelActions';
-import { panel_names } from '../../../utils/Config';
-import { $L } from '../../../utils/helperMethods';
-import { SpotlightIds } from '../../../utils/SpotlightIds';
-import css from './PlayerOverlayContents.module.less';
+import { updatePanel } from "../../../actions/panelActions";
+import { panel_names } from "../../../utils/Config";
+import { $L } from "../../../utils/helperMethods";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
+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}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/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) {
-      return 3000;
+    if (!sideContentsVisible && panelInfo.modal === false) {
+      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} // 플레이어가 끝날때 호출
-            noAutoPlay={cannotPlay} // 오토플레이
-            autoCloseTimeout={autoCloseVideoOverlay} // 컨트롤 버튼 숨기는 시간
-            playListInfo={playListInfo && playListInfo} // 비디오 데이터
-            onBackButton={onClickBack} // 뒤로가기 버튼
-            panelInfo={panelInfo} // 패널정보 (라이브,VOD)
-            spotlightDisabled={sideOpen || panelInfo.modal}
+            onEnded={onClickBack}
+            noAutoPlay={cannotPlay}
+            autoCloseTimeout={autoCloseVideoOverlay}
+            stopAutoCloseTimeout={sideContentsVisible}
+            onBackButton={onClickBack}
+            spotlightDisabled={sideContentsVisible || 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 && (
-          <VideoOverlayWithPhoneNumber
-            className={css.videoOverlayWithPhoneNumber}
-            orderPhnNo={playListInfo[selectedIndex]?.orderPhnNo}
-            show
-          />
-        )}
-        {playListInfo && shopNowInfo && !panelInfo.modal && (
+        {isQRCodeVisible && (
          <PlayerOverlayQRCode
            shopNowInfos={shopNowInfo}
            currentTime={currentTime}
            type={panelInfo?.shptmBanrTpNm}
          />
        )}
-        {playListInfo && chatData && !panelInfo.modal && (
-          <PlayerOverlayChat currentTime={currentTime} />
-        )}
-        {panelInfo?.shptmBanrTpNm !== "MEDIA" && !panelInfo?.modal && (
-          <PlayerTabButton setSideOpen={setSideOpen} sideOpen={sideOpen} />
+
+        {chatVisible && <PlayerOverlayChat currentTime={currentTime} />}
+
+        {currentSideButtonStatus && (
+          <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}
-              setSideOpen={setSideOpen}
+              setSideContentsVisible={setSideContentsVisible}
+              setIsChatVisible={setIsChatVisible}
            />
          )}
      </Container>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx
@@ -1,68 +1,72 @@
-import React, {
-  useCallback,
-  useEffect,
-} from 'react';
+import React, { useCallback, useEffect } from "react";

-import classNames from 'classnames';
+import classNames from "classnames";

-import Spotlight from '@enact/spotlight';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+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();
-    setSideOpen((prev) => !prev);
+    setSideContentsVisible((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>
  );
 }
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.module.less
+++ b/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 {
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
+++ b/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}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContainer.module.less
+++ b/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;
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/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 (
    <>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
+++ b/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,