[PlayerPanel] loading status

2024-07-17 17:05:38 +09:00
parent ba2e0ba5df
commit 34fd937449
4 changed files with 69 additions and 76 deletions
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -794,6 +794,7 @@ const VideoPlayerBase = class extends React.Component {
      proportionPlayed: 0,
      sourceUnavailable: true,
      titleVisible: true,
+      thumbnailUrl: null,
    };

    if (props.setApiProvider) {
@@ -968,6 +969,12 @@ const VideoPlayerBase = class extends React.Component {
        }
      }
    }
+    if (prevProps.thumbnailUrl !== this.props.thumbnailUrl) {
+      this.setState({ thumbnailUrl: this.props.thumbnailUrl });
+    }
+    if (prevProps.src !== this.props.src && this.props.src) {
+      this.setState({ loading: true });
+    }
  }

  componentWillUnmount() {
@@ -1490,6 +1497,11 @@ const VideoPlayerBase = class extends React.Component {
      el.loadModule("captions");
      el.setOption("captions", "track", { languageCode: "en" });
    }
+    if (updatedState.loading) {
+      updatedState.thumbnailUrl = this.props.thumbnailUrl;
+    } else {
+      updatedState.thumbnailUrl = null;
+    }
    this.setState(updatedState);
  };

@@ -2299,7 +2311,7 @@ const VideoPlayerBase = class extends React.Component {
                    panelInfo.modal && type !== "MEDIA" && css.smallThumbnail
                  )}
                >
-                  <img src={thumbnailUrl} alt="" />
+                  <img src={this.state.thumbnailUrl} alt="" />
                </p>
              }

@@ -2419,24 +2431,7 @@ const VideoPlayerBase = class extends React.Component {
                    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>
                </div>
              )}
              <ComponentOverride
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
@@ -49,7 +49,6 @@ export default function RecentlyViewedContents({

  const handleItemClick = useCallback(
    (showId, patnrId, lgCatCd, prdtId) => () => {
-      console.log("yhcho handleItemClick ", showId, patnrId, lgCatCd, prdtId);
      if (showId) {
        dispatch(
          startVideoPlayer({
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -728,7 +728,7 @@ const PlayerPanel = ({
  );

  useEffect(() => {
-    console.log("yhcho PlayerPanel broadcast changed", broadcast);
+    console.log("PlayerPanel broadcast changed", broadcast);
    if (broadcast.type === "videoError") {
      //setShowVideoErrorComponent(true);
      //
@@ -939,7 +939,6 @@ const PlayerPanel = ({
      const index = playListInfo.findIndex(
        (item) => item.chanId.toUpperCase() === panelInfo.chanId
      );
-      console.log("yhcho PlayerPanel PanelInfo changed index ", index);
      if (index !== -1 && !isUpdate) {
        setBackupInitialIndex(index);
        setSelectedIndex(index);
@@ -1317,14 +1316,13 @@ const PlayerPanel = ({
  }, [panelInfo?.shptmBanrTpNm, showDetailInfo, playListInfo, selectedIndex]);

  const videoThumbnailUrl = useMemo(() => {
-    if (panelInfo.thumbnailUrl) {
-      return panelInfo.thumbnailUrl;
-    } else if (showDetailInfo && showDetailInfo.length > 0) {
-      return showDetailInfo[0].thumbnailUrl;
-    } else if (playListInfo && playListInfo.length > 0) {
-      return playListInfo[selectedIndex]?.thumbnailUrl;
+    let res = null;
+    res = playListInfo?.[selectedIndex]?.thumbnailUrl;
+    if (!res) {
+      res = showDetailInfo?.[0]?.thumbnailUrl;
    }
-  }, [showDetailInfo, playListInfo, selectedIndex, panelInfo.thumbnailUrl]);
+    return res;
+  }, [showDetailInfo, playListInfo, selectedIndex]);

  const saveToLocalSettings = useCallback(() => {
    if (panelInfo?.shptmBanrTpNm === "VOD") {
--- a/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.jsx
+++ b/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.jsx
@@ -1,16 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";

 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";

-
+import { popPanel } from "../../actions/panelActions";
+import TButton from "../../components/TButton/TButton";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
-import css from "./VideoTestPanel.module.less";
 import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
-import TButton from "../../components/TButton/TButton";
 import usePrevious from "../../hooks/usePrevious";
-import { popPanel } from "../../actions/panelActions";
+import css from "./VideoTestPanel.module.less";

 const YOUTUBECONFIG = {
  playerVars: {
@@ -29,16 +34,15 @@ const YOUTUBECONFIG = {
    cc_lang_pref: "en",
    cc_load_policy: 0,
  },
-}
+};

-const TEST_URLS =
-  [
-    "https://www.youtube.com/watch?v=A1cmsCO4LvY",
-    "https://www.youtube.com/watch?v=IfHA3zOE6dQ",
-    "https://www.youtube.com/watch?v=Mef85O8gYIA",
-    "https://youtu.be/bSgjf7nF5CU",
-    "https://www.youtube.com/embed/mqGEVNYiqxw?autoplay=1&mute=0&controls=0&origin=http%3A%2F%2Flocalhost%3A3000&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&disablekb=1&enablejsapi=1&listType=user_uploads&fs=0&loop=0&wmode=opaque&cc_lang_pref=en&cc_load_policy=1&widgetid=3"
-  ];
+const TEST_URLS = [
+  "https://www.youtube.com/watch?v=A1cmsCO4LvY",
+  "https://www.youtube.com/watch?v=IfHA3zOE6dQ",
+  "https://www.youtube.com/watch?v=Mef85O8gYIA",
+  "https://youtu.be/bSgjf7nF5CU",
+  "https://www.youtube.com/embed/mqGEVNYiqxw?autoplay=1&mute=0&controls=0&origin=http%3A%2F%2Flocalhost%3A3000&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&disablekb=1&enablejsapi=1&listType=user_uploads&fs=0&loop=0&wmode=opaque&cc_lang_pref=en&cc_load_policy=1&widgetid=3",
+];
 export default function VideoTestPanel({ spotlightId }) {
  const dispatch = useDispatch();
  const [videoIndex, setVideoIndex] = useState(0);
@@ -47,44 +51,48 @@ export default function VideoTestPanel({ spotlightId }) {
  const videoNode = useRef(null);
  const showCaptionRef = usePrevious(showCaption);

-  const setVideoRef = useCallback((video) => {
-    videoNode.current = video;
-  },[showCaption]);
+  const setVideoRef = useCallback(
+    (video) => {
+      videoNode.current = video;
+    },
+    [showCaption]
+  );

  const handleCaption = useCallback(() => {
-    if(!captionEnabled){
+    if (!captionEnabled) {
      return;
    }
-    if(videoNode.current){
-      if(!showCaption){
+    if (videoNode.current) {
+      if (!showCaption) {
        videoNode.current.loadModule("captions");
-        videoNode.current.setOption("captions", "track", { languageCode: "en" });
-      }else{
+        videoNode.current.setOption("captions", "track", {
+          languageCode: "en",
+        });
+      } else {
        videoNode.current.unloadModule("captions");
      }
    }
    setShowCaption(!showCaption);
-  },[showCaption, captionEnabled]);
+  }, [showCaption, captionEnabled]);

  const changeVideo = useCallback(() => {
    // setShowCaption(false);
-    setVideoIndex((videoIndex+1)%TEST_URLS.length);
-  },[videoIndex]);
-
+    setVideoIndex((videoIndex + 1) % TEST_URLS.length);
+  }, [videoIndex]);

  const onStart = useCallback((ev) => {
-    // if(ev.type === 'onStart')
-    console.log('yhcho onStart', videoNode.current &&videoNode.current.getOptions('captions').length, ev);
-    if(videoNode.current.getOptions('captions').length>0){
+    if (videoNode.current.getOptions("captions").length > 0) {
      setCaptionEnabled(true);
-      if(showCaptionRef.current){
+      if (showCaptionRef.current) {
        videoNode.current.loadModule("captions");
-        videoNode.current.setOption("captions", "track", { languageCode: "en" });
+        videoNode.current.setOption("captions", "track", {
+          languageCode: "en",
+        });
      }
-    }else{
+    } else {
      setCaptionEnabled(false);
    }
-  },[]);
+  }, []);

  const onBackClick = useCallback(() => {
    dispatch(popPanel());
@@ -92,28 +100,21 @@ export default function VideoTestPanel({ spotlightId }) {

  return (
    <TPanel isTabActivated={false} spotlightId={spotlightId}>
-      <THeader onBackButton title={"VideoTest"} onClick={onBackClick}/>
-      <div>{"url: "+videoIndex+" "+ TEST_URLS[videoIndex]}</div>
-      <div>{"caption Enabled: "+ (videoNode.current && captionEnabled)}</div>
-      <div>{"caption is On: "+showCaption}</div>
+      <THeader onBackButton title={"VideoTest"} onClick={onBackClick} />
+      <div>{"url: " + videoIndex + " " + TEST_URLS[videoIndex]}</div>
+      <div>{"caption Enabled: " + (videoNode.current && captionEnabled)}</div>
+      <div>{"caption is On: " + showCaption}</div>
      <TReactPlayer
        url={TEST_URLS[videoIndex]}
        playing={true}
        config={{
-          youtube: YOUTUBECONFIG
+          youtube: YOUTUBECONFIG,
        }}
        videoRef={setVideoRef}
        onStart={onStart}
      ></TReactPlayer>
-      <TButton
-        onClick={changeVideo}
-      >
-        {"changeVideo"}
-      </TButton>
-      <TButton
-        onClick={handleCaption}
-        disabled={!captionEnabled}
-      >
+      <TButton onClick={changeVideo}>{"changeVideo"}</TButton>
+      <TButton onClick={handleCaption} disabled={!captionEnabled}>
        {"ToggleCaption"}
      </TButton>
    </TPanel>