playerpanel focus 예외처리

2024-05-02 13:40:48 +09:00
parent 6c3b163306
commit 4c6e59ac8a
4 changed files with 68 additions and 70 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
@@ -51,7 +51,7 @@ function Indicator({
  const { cursorVisible } = useSelector((state) => state.common.appStatus);
  const { discountRate, promotionCode } = usePriceInfo(productInfo.priceInfo);
  const panels = useSelector((state) => state.panels.panels);
-  const [detailVideoPlaying, setDetailVideoPlaying] = useState(
+  const [autoPlaying, setAutoPlaying] = useState(
    !launchedFromPlayer && productInfo.prdtMediaUrl
  );
  const [focused, setFocused] = useState(false);
@@ -71,7 +71,7 @@ function Indicator({
    ) {
      return; //prevent
    }
-    if (detailVideoPlaying && productInfo.prdtMediaUrl) {
+    if (autoPlaying && productInfo.prdtMediaUrl) {
      //auto play.
      dispatch(
        startVideoPlayer({
@@ -92,7 +92,7 @@ function Indicator({
    dispatch,
    selectedIndex,
    productInfo,
-    detailVideoPlaying,
+    autoPlaying,
    launchedFromPlayer,
    focused,
  ]);
@@ -109,16 +109,16 @@ function Indicator({
  }, [selectedIndex, focused]);

  const onFocus = useCallback(() => {
-    if (detailVideoPlaying && productInfo.prdtMediaUrl && selectedIndex === 0) {
+    if (autoPlaying && productInfo.prdtMediaUrl && selectedIndex === 0) {
      setFocused(true);
    }
-  }, [detailVideoPlaying, productInfo, selectedIndex]);
+  }, [autoPlaying, productInfo, selectedIndex]);

  const onBlur = useCallback(() => {
-    if (detailVideoPlaying && productInfo.prdtMediaUrl && selectedIndex === 0) {
+    if (autoPlaying && productInfo.prdtMediaUrl && selectedIndex === 0) {
      setFocused(false);
    }
-  }, [detailVideoPlaying, productInfo, selectedIndex]);
+  }, [autoPlaying, productInfo, selectedIndex]);

  const handleUpClick = useCallback(() => {
    if (selectedIndex === 0) {
@@ -157,16 +157,16 @@ function Indicator({
          patncLogoPath: productInfo.patncLogoPath,
          orderPhnNo: productInfo.orderPhnNo,
          shptmBanrTpNm: "MEDIA",
-          modal: !detailVideoPlaying,
-          modalContainerId: "indicator_videoContainer", //to calc width, height, left, top
-          modalClassName: css.videoModal,
+          modal: !autoPlaying,
+          modalContainerId: null, //to calc width, height, left, top
+          // modalClassName: css.videoModal,
        })
      );
-      if (!detailVideoPlaying) {
-        setDetailVideoPlaying(true);
+      if (!autoPlaying) {
+        setAutoPlaying(true);
      }
    }
-  }, [dispatch, productInfo, detailVideoPlaying, canPlayVideo]);
+  }, [dispatch, productInfo, autoPlaying, canPlayVideo]);

  const onSpotlightRight = useCallback(() => {
    const timer = setTimeout(() => {
@@ -235,7 +235,7 @@ function Indicator({
      <div className={css.thumbnailContainer}>
        <SpottableComponent
          spotlightId="indicator_videoContainer"
-          // spotlightDisabled={!canPlayVideo}
+          // spotlightDisabled={true}
          disabled={!canPlayVideo}
          className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
          onSpotlightRight={onSpotlightRight}
@@ -247,11 +247,11 @@ function Indicator({
          <>
            <Image
              className={css.image}
-              src={detailVideoPlaying && canPlayVideo ? "" : selectedImage}
+              src={autoPlaying && canPlayVideo ? "" : selectedImage}
              alt=""
            ></Image>
            {soldoutFlag && <h3 className={css.soldoutLabel}>SOLD OUT</h3>}
-            {!detailVideoPlaying && canPlayVideo && (
+            {!autoPlaying && canPlayVideo && (
              <h3 className={css.soldoutLabel}>
                <img src={playImg} alt="Play" />
              </h3>
@@ -273,7 +273,7 @@ function Indicator({
    selectedIndex,
    selectedImage,
    soldoutFlag,
-    detailVideoPlaying,
+    autoPlaying,
    canPlayVideo,
    panels,
  ]);
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
@@ -1,17 +1,22 @@
-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 PlayerTabButton from "../PlayerTabContents/TabButton/PlayerTabButton";
-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 css from './PlayerOverlayContents.module.less';

 const SpottableBtn = Spottable("button");

@@ -26,8 +31,6 @@ export default function PlayerOverlayHeader({
  selectedIndex,
  onClick,
  setSelectedIndex,
-  sideOpen,
-  setSideOpen,
 }) {
  const dispatch = useDispatch();

@@ -94,9 +97,6 @@ export default function PlayerOverlayHeader({
  );

  const onSpotlightMoveTabButton = () => {
-    if (panelInfo?.shptmBanrTpNm === "LIVE") {
-      return;
-    }
    Spotlight.focus("player-tab-arrow");
  };

@@ -105,11 +105,16 @@ export default function PlayerOverlayHeader({
    Spotlight.focus("videoPlayer_mediaControls");
  };

-  const onSpotlightMoveSlider = (e) => {
-    e.stopPropagation();
+  const onSpotlightMoveSlider = useCallback(
+    (e) => {
+      if (panelInfo?.shptmBanrTpNm === "VOD") {
+        e.stopPropagation();

-    Spotlight.focus("playerslider");
-  };
+        Spotlight.focus(SpotlightIds.PLAYER_SLIDER);
+      }
+    },
+    [panelInfo]
+  );
  return (
    <>
      <div className={css.overlayContainer}>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -154,20 +154,22 @@ const PlayerPanel = ({

  //10초뒤에 사이드 오픈 ( 예외처리 필요 )
  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSideOpen(false);
-    }, 10000);
+    let sideCotnentsTimer;

-    return () => clearTimeout(timer);
-  }, [panelInfo]);
+    const handleAction = () => clearTimeout(sideCotnentsTimer);

-  // useEffect(() => {
-  //   if (panelInfo.modal) {
-  //     setSideOpen(false);
-  //   } else {
-  //     setSideOpen(true);
-  //   }
-  // }, [panelInfo.modal]);
+    window.addEventListener("click", handleAction);
+    window.addEventListener("keydown", handleAction);
+
+    sideCotnentsTimer = setTimeout(() => setSideOpen(false), 10000);
+
+    return () => {
+      window.removeEventListener("click", handleAction);
+      window.removeEventListener("keydown", handleAction);
+
+      clearTimeout(sideCotnentsTimer);
+    };
+  }, []);

  useEffect(() => {
    if (panelInfo) {
@@ -253,7 +255,6 @@ const PlayerPanel = ({
    dispatch,
  ]);

-  // console.log("#playlisy", playListInfo);
  // 일정시간마다 API를 재호출해야하는 기능  테스트기간 동안 주석
  useEffect(() => {
    if (panelInfo?.shptmBanrTpNm === "LIVE") {
@@ -277,16 +278,7 @@ const PlayerPanel = ({
    }
  }, [isActive]);

-  useEffect(() => {
-    if (panelInfo.shptmBanrTpNm === "MEDIA") {
-      Spotlight.focus("player-back-button");
-    }
-  }, [sideOpen, panelInfo]);
-
-  // useEffect(() => {
-  //   Spotlight.focus("player-tab-arrow");
-  // }, [sideOpen]);
-
+  // console.log("###Spotlight", Spotlight.getCurrent());
  useEffect(() => {
    if (panelInfo.modal && panelInfo.modalContainerId) {
      const node = document.querySelector(
@@ -378,8 +370,6 @@ const PlayerPanel = ({
    }
  }, [currentSubtitleBlob]);

-  // console.log("##panelInfo={panelInfo}", panelInfo)
-
  return (
    <TPanel
      isTabActivated={false}
--- 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,11 +1,14 @@
-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 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 }) {
@@ -16,7 +19,7 @@ export default function PlayerTabButton({ sideOpen, setSideOpen }) {

  const onSpotlightLeft = useCallback(
    (e) => {
-      if (sideOpen) {
+      if (!sideOpen) {
        e.stopPropagation();
        Spotlight.focus("videoIndicator-up-button");
      }
@@ -26,7 +29,7 @@ export default function PlayerTabButton({ sideOpen, setSideOpen }) {

  const onSpotlightDown = useCallback(
    (e) => {
-      if (sideOpen) {
+      if (!sideOpen) {
        e.stopPropagation();
        Spotlight.focus("player-shrinkbutton");
      }
@@ -36,7 +39,7 @@ export default function PlayerTabButton({ sideOpen, setSideOpen }) {

  const onSpotlightUp = useCallback(
    (e) => {
-      if (sideOpen) {
+      if (!sideOpen) {
        e.stopPropagation();
        Spotlight.focus("videoIndicator-up-button");
      }