[PlayerPanel] overlayLoading 삭제

2024-06-28 15:49:58 +09:00
parent 86b077e1b8
commit 209ddcc0a6
6 changed files with 117 additions and 169 deletions
--- a/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
@@ -22,8 +22,6 @@ export default function TReactPlayer({
  mediaEventsMap = handledMediaEventsMap,
  videoRef,
  url,
-  overlayLoading,
-  setOverlayLoading,
  ...rest
 }) {
  const playerRef = useRef(null);
@@ -32,10 +30,6 @@ export default function TReactPlayer({
    (type) => (ev) => {
      if (type === "onReady") {
        if (videoRef) {
-          if (!overlayLoading) {
-            setOverlayLoading(true);
-          }
-
          const videoNode = playerRef.current.getInternalPlayer();
          videoRef(videoNode);
          if (
@@ -122,7 +116,7 @@ export default function TReactPlayer({
      }
      handle.forward("onUpdate", { type, ev }, rest);
    },
-    [videoRef, overlayLoading]
+    [videoRef]
  );

  const handledMediaEvents = useMemo(() => {
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -2109,8 +2109,6 @@ const VideoPlayerBase = class extends React.Component {
      handleIndicatorUpClick,
      orderPhnNo,
      captionEnable,
-      overlayLoading,
-      setOverlayLoading,
      ...mediaProps
    } = this.props;

@@ -2223,11 +2221,7 @@ const VideoPlayerBase = class extends React.Component {
          (VideoComponent &&
            (((typeof VideoComponent === "function" ||
              typeof VideoComponent === "string") && (
-              <VideoComponent
-                {...mediaProps}
-                overlayLoading={overlayLoading}
-                setOverlayLoading={setOverlayLoading}
-              />
+              <VideoComponent {...mediaProps} />
            )) ||
              (React.isValidElement(VideoComponent) &&
                React.cloneElement(VideoComponent, mediaProps)))) ||
@@ -2258,24 +2252,22 @@ const VideoPlayerBase = class extends React.Component {
                (this.state.infoVisible ? " " + css.lift : "")
              }
            >
-              {overlayLoading && (
-                <PlayerOverlayContents
-                  playListInfo={playListInfo && playListInfo}
-                  selectedIndex={selectedIndex}
-                  onClick={onBackButton}
-                  panelInfo={panelInfo}
-                  setSelectedIndex={setSelectedIndex}
-                  setIsSubtitleActive={setIsSubtitleActive}
-                  sideContentsVisible={sideContentsVisible}
-                  setSideContentsVisible={setSideContentsVisible}
-                  videoVerticalVisible={videoVerticalVisible}
-                  handleIndicatorUpClick={handleIndicatorUpClick}
-                  handleIndicatorDownClick={handleIndicatorDownClick}
-                  captionEnable={captionEnable}
-                  disclaimer={disclaimer}
-                  type={type}
-                />
-              )}
+              <PlayerOverlayContents
+                playListInfo={playListInfo && playListInfo}
+                selectedIndex={selectedIndex}
+                onClick={onBackButton}
+                panelInfo={panelInfo}
+                setSelectedIndex={setSelectedIndex}
+                setIsSubtitleActive={setIsSubtitleActive}
+                sideContentsVisible={sideContentsVisible}
+                setSideContentsVisible={setSideContentsVisible}
+                videoVerticalVisible={videoVerticalVisible}
+                handleIndicatorUpClick={handleIndicatorUpClick}
+                handleIndicatorDownClick={handleIndicatorDownClick}
+                captionEnable={captionEnable}
+                disclaimer={disclaimer}
+                type={type}
+              />
            </div>
          )}
        </Overlay>
@@ -2322,64 +2314,60 @@ const VideoPlayerBase = class extends React.Component {
                    videoVerticalVisible && css.videoVertical
                  )}
                >
-                  {this.state.mediaSliderVisible && overlayLoading ? (
+                  {this.state.mediaSliderVisible ? (
                    <Times
                      noCurrentTime
                      total={this.state.duration}
                      formatter={durFmt}
                    />
                  ) : null}
-
-                  {this.state.mediaSliderVisible && overlayLoading ? (
+                  {this.state.mediaSliderVisible ? (
                    <Times
                      noTotalTime
                      current={this.state.currentTime}
                      formatter={durFmt}
                    />
                  ) : null}
-                  {overlayLoading && (
-                    <MediaSlider
-                      //노브
-                      backgroundProgress={this.state.proportionLoaded}
-                      disabled={disabled || this.state.sourceUnavailable}
-                      forcePressed={this.state.slider5WayPressed}
-                      onBlur={this.handleSliderBlur}
-                      onChange={this.onSliderChange}
-                      onFocus={this.handleSliderFocus}
-                      onKeyDown={this.handleSliderKeyDown}
-                      onKnobMove={this.handleKnobMove}
-                      spotlightId={SpotlightIds.PLAYER_SLIDER}
-                      videoVerticalVisible={videoVerticalVisible}
-                      selection={proportionSelection}
-                      spotlightDisabled={
-                        spotlightDisabled ||
-                        !this.state.mediaControlsVisible ||
-                        type === "LIVE"
-                      }
-                      value={this.state.proportionPlayed}
-                      visible={this.state.mediaSliderVisible}
-                      type={type}
-                    >
-                      {
-                        <FeedbackTooltip
-                          action={this.state.feedbackAction}
-                          duration={this.state.duration}
-                          formatter={durFmt}
-                          hidden={
-                            !this.state.feedbackVisible ||
-                            this.state.sourceUnavailable
-                          }
-                          playbackRate={this.selectPlaybackRate(
-                            this.speedIndex
-                          )}
-                          playbackState={this.prevCommand}
-                          thumbnailComponent={thumbnailComponent}
-                          thumbnailDeactivated={this.props.thumbnailUnavailable}
-                          thumbnailSrc={thumbnailSrc}
-                        />
-                      }
-                    </MediaSlider>
-                  )}
+
+                  <MediaSlider
+                    //노브
+                    backgroundProgress={this.state.proportionLoaded}
+                    disabled={disabled || this.state.sourceUnavailable}
+                    forcePressed={this.state.slider5WayPressed}
+                    onBlur={this.handleSliderBlur}
+                    onChange={this.onSliderChange}
+                    onFocus={this.handleSliderFocus}
+                    onKeyDown={this.handleSliderKeyDown}
+                    onKnobMove={this.handleKnobMove}
+                    spotlightId={SpotlightIds.PLAYER_SLIDER}
+                    videoVerticalVisible={videoVerticalVisible}
+                    selection={proportionSelection}
+                    spotlightDisabled={
+                      spotlightDisabled ||
+                      !this.state.mediaControlsVisible ||
+                      type === "LIVE"
+                    }
+                    value={this.state.proportionPlayed}
+                    visible={this.state.mediaSliderVisible}
+                    type={type}
+                  >
+                    {
+                      <FeedbackTooltip
+                        action={this.state.feedbackAction}
+                        duration={this.state.duration}
+                        formatter={durFmt}
+                        hidden={
+                          !this.state.feedbackVisible ||
+                          this.state.sourceUnavailable
+                        }
+                        playbackRate={this.selectPlaybackRate(this.speedIndex)}
+                        playbackState={this.prevCommand}
+                        thumbnailComponent={thumbnailComponent}
+                        thumbnailDeactivated={this.props.thumbnailUnavailable}
+                        thumbnailSrc={thumbnailSrc}
+                      />
+                    }
+                  </MediaSlider>
                </div>
              )}
              <ComponentOverride
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -135,7 +135,6 @@ const PlayerPanel = ({
  const [shopNowInfo, setShopNowInfo] = useState();
  const [modalStyle, setModalStyle] = useState({});
  const [mediaId, setMediaId] = useState(null);
-  const [overlayLoading, setOverlayLoading] = useState(false);

  const [sideContentsVisible, setSideContentsVisible] = useState(true);
  const [currentTime, setCurrentTime] = useState(0);
@@ -707,12 +706,7 @@ const PlayerPanel = ({
  }, [isInitialFocusOccurred, panelInfo]);

  useEffect(() => {
-    if (
-      !panelInfo.modal &&
-      !videoVerticalVisible &&
-      playListInfo &&
-      overlayLoading
-    ) {
+    if (!panelInfo.modal && !videoVerticalVisible && playListInfo) {
      Spotlight.focus("player-tab-arrow");
    }
  }, [
@@ -720,7 +714,6 @@ const PlayerPanel = ({
    sideContentsVisible,
    playListInfo,
    videoVerticalVisible,
-    overlayLoading,
  ]);

  useEffect(() => {
@@ -837,62 +830,54 @@ const PlayerPanel = ({
    }
  }, [liveShowInfos, selectedIndex, videoPlayer, panelInfo]);

-  const mediainfoHandler = useCallback(
-    (ev) => {
-      const type = ev.type;
-      if (type !== "timeupdate" && type !== "durationchange") {
-        console.log(
-          "mediainfoHandler....",
-          type,
-          ev,
-          videoPlayer.current?.getMediaState()
-        );
+  const mediainfoHandler = useCallback((ev) => {
+    const type = ev.type;
+    if (type !== "timeupdate" && type !== "durationchange") {
+      console.log(
+        "mediainfoHandler....",
+        type,
+        ev,
+        videoPlayer.current?.getMediaState()
+      );
+    }
+    if (
+      ev === "hlsError" &&
+      isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))
+    ) {
+      dispatch(
+        sendBroadCast({
+          type: "videoError",
+          moreInfo: { reason: "hlsError" },
+        })
+      );
+      return;
+    }
+
+    switch (type) {
+      case "timeupdate": {
+        setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime);
+
+        if (videoPlayer.current?.getMediaState().currentTime >= liveTotalTime) {
+          dispatch(getMainLiveShow());
+        }
+
+        break;
      }
-      if (
-        ev === "hlsError" &&
-        isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))
-      ) {
+      case "error": {
        dispatch(
          sendBroadCast({
            type: "videoError",
-            moreInfo: { reason: "hlsError" },
+            moreInfo: { reason: videoPlayer.current?.getMediaState().error },
          })
        );
-        return;
+        break;
      }
-
-      switch (type) {
-        case "timeupdate": {
-          if (!overlayLoading) {
-            setOverlayLoading(true);
-          }
-          setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime);
-
-          if (
-            videoPlayer.current?.getMediaState().currentTime >= liveTotalTime
-          ) {
-            dispatch(getMainLiveShow());
-          }
-
-          break;
-        }
-        case "error": {
-          dispatch(
-            sendBroadCast({
-              type: "videoError",
-              moreInfo: { reason: videoPlayer.current?.getMediaState().error },
-            })
-          );
-          break;
-        }
-        case "loadeddata": {
-          const mediaId = videoPlayer.current?.video?.media?.mediaId;
-          setMediaId(mediaId);
-        }
+      case "loadeddata": {
+        const mediaId = videoPlayer.current?.video?.media?.mediaId;
+        setMediaId(mediaId);
      }
-    },
-    [overlayLoading]
-  );
+    }
+  }, []);

  useEffect(() => {
    if (panelInfo.modal && panelInfo.modalContainerId) {
@@ -996,13 +981,12 @@ const PlayerPanel = ({
      chatData &&
      !panelInfo.modal &&
      isOnTop &&
-      panelInfo?.shptmBanrTpNm !== "MEDIA" &&
-      overlayLoading
+      panelInfo?.shptmBanrTpNm !== "MEDIA"
    ) {
      return true;
    }
    return false;
-  }, [playListInfo, chatData, panelInfo.modal, overlayLoading, isOnTop]);
+  }, [playListInfo, chatData, panelInfo.modal, isOnTop]);

  const isQRCodeVisible = useMemo(() => {
    if (playListInfo && shopNowInfo && !panelInfo.modal) {
@@ -1129,7 +1113,6 @@ const PlayerPanel = ({
    );

    setSideContentsVisible(true);
-    setOverlayLoading(false);
  }, [dispatch, playListInfo, selectedIndex]);

  const handleIndicatorUpClick = useCallback(() => {
@@ -1160,7 +1143,6 @@ const PlayerPanel = ({
    }

    setSideContentsVisible(true);
-    setOverlayLoading(false);
  }, [dispatch, playListInfo, selectedIndex]);

  useEffect(() => {
@@ -1293,8 +1275,6 @@ const PlayerPanel = ({
            sideContentsVisible={sideContentsVisible}
            videoVerticalVisible={videoVerticalVisible}
            isSubtitleActive={isSubtitleActive}
-            overlayLoading={overlayLoading}
-            setOverlayLoading={setOverlayLoading}
          >
            {typeof window === "object" && window.PalmSystem && (
              <source src={currentPlayingUrl} type="application/mpegurl" />
@@ -1310,15 +1290,13 @@ const PlayerPanel = ({
        )}

        {/* Overlay Area */}
-        {playListInfo &&
-          playListInfo[orderPhnNoIndex]?.orderPhnNo &&
-          overlayLoading && (
-            <VideoOverlayWithPhoneNumber
-              className={css.videoOverlayWithPhoneNumber}
-              orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo}
-              show
-            />
-          )}
+        {playListInfo && playListInfo[orderPhnNoIndex]?.orderPhnNo && (
+          <VideoOverlayWithPhoneNumber
+            className={css.videoOverlayWithPhoneNumber}
+            orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo}
+            show
+          />
+        )}

        {isQRCodeVisible && (
          <PlayerOverlayQRCode
@@ -1335,22 +1313,18 @@ const PlayerPanel = ({
          />
        )}

-        {currentSideButtonStatus &&
-          !videoVerticalVisible &&
-          playListInfo &&
-          overlayLoading && (
-            <PlayerTabButton
-              setSideContentsVisible={setSideContentsVisible}
-              sideContentsVisible={sideContentsVisible}
-            />
-          )}
+        {currentSideButtonStatus && !videoVerticalVisible && playListInfo && (
+          <PlayerTabButton
+            setSideContentsVisible={setSideContentsVisible}
+            sideContentsVisible={sideContentsVisible}
+          />
+        )}

        {sideContentsVisible &&
          playListInfo &&
          panelInfo?.shptmBanrTpNm !== "MEDIA" &&
          !panelInfo?.modal &&
-          isOnTop &&
-          overlayLoading && (
+          isOnTop && (
            <TabContainer
              panelInfo={panelInfo}
              shopNowInfo={shopNowInfo}
@@ -1361,7 +1335,6 @@ const PlayerPanel = ({
              videoVerticalVisible={videoVerticalVisible}
              handleItemFocus={handleItemFocus}
              featuredShowsInfos={featuredShowsInfos}
-              setOverlayLoading={setOverlayLoading}
            />
          )}
      </Container>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
@@ -32,7 +32,6 @@ export default function TabContainer({
  videoVerticalVisible,
  featuredShowsInfos,
  handleItemFocus,
-  setOverlayLoading,
 }) {
  const [tab, setTab] = useState(0);

@@ -135,7 +134,6 @@ export default function TabContainer({
          setSelectedIndex={setSelectedIndex}
          videoVerticalVisible={videoVerticalVisible}
          currentVideoShowId={playListInfo[selectedIndex]?.showId}
-          setOverlayLoading={setOverlayLoading}
          tabIndex={tab}
          handleItemFocus={_handleItemFocus}
        />
@@ -145,7 +143,6 @@ export default function TabContainer({
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
          videoVerticalVisible={videoVerticalVisible}
-          setOverlayLoading={setOverlayLoading}
          liveInfos={playListInfo}
          tabIndex={tab}
          handleItemFocus={_handleItemFocus}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
@@ -18,7 +18,6 @@ export default function FeaturedShowContents({
  videoVerticalVisible,
  currentVideoInfo,
  setSelectedIndex,
-  setOverlayLoading,
  tabIndex,
  handleItemFocus,
 }) {
@@ -36,7 +35,6 @@ export default function FeaturedShowContents({
  const handleItemClick = useCallback(
    (index, patnrId, showId) => () => {
      setSelectedIndex(index + 1);
-      setOverlayLoading(false);
      dispatch(
        updatePanel({
          name: panel_names.PLAYER_PANEL,
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
@@ -16,7 +16,6 @@ export default function LiveChannelContents({
  liveInfos,
  setSelectedIndex,
  videoVerticalVisible,
-  setOverlayLoading,
  tabIndex,
  handleItemFocus,
 }) {
@@ -52,7 +51,6 @@ export default function LiveChannelContents({
        if (!showId) return;

        setSelectedIndex(index);
-        setOverlayLoading(false);
        dispatch(
          updatePanel({
            name: panel_names.PLAYER_PANEL,