video test panel and youtube subtitle

2024-07-11 17:08:25 +09:00
parent dd46a13e59
commit bf5cf57f11
7 changed files with 261 additions and 12 deletions
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -952,6 +952,20 @@ const VideoPlayerBase = class extends React.Component {
    ) {
      this.showControls();
    }
+    if (
+      (prevProps.isSubtitleActive !== this.props.isSubtitleActive
+      || prevProps.captionEnable !== this.props.captionEnable)
+      && this.props.isYoutube && this.video && this.props.captionEnable
+    ) {
+      if(this.video.getOptions('captions').length>0){
+        if(this.props.isSubtitleActive){
+          this.video?.loadModule("captions");
+          this.video?.setOption("captions", "track", { languageCode: "en" });
+        }else{
+          this.video?.unloadModule("captions");
+        }
+      }
+    }
  }

  componentWillUnmount() {
@@ -1404,7 +1418,7 @@ const VideoPlayerBase = class extends React.Component {
  //
  // Media Interaction Methods
  //
-  handleEvent = () => {
+  handleEvent = (ev) => {
    const el = this.video;

    const updatedState = {
@@ -1464,7 +1478,10 @@ const VideoPlayerBase = class extends React.Component {
    ) {
      this.pause();
    }
-
+    if(this.props.isYoutube && this.props.captionEnable && this.props.isSubtitleActive && ev?.type === 'onStart' && el.getOptions('captions').length>0){
+      el.loadModule("captions");
+      el.setOption("captions", "track", { languageCode: "en" });
+    }
    this.setState(updatedState);
  };

@@ -2205,6 +2222,14 @@ const VideoPlayerBase = class extends React.Component {
    }
    if (introPer > 100) introPer = 100;

+    //check is youtube support captions
+    let _captionEnable = captionEnable;
+    if(isYoutube){
+      if(!this.video || this.video.getOptions('captions').length<=0){
+        _captionEnable = false;
+      }
+    }
+
    return (
      <RootContainer
        className={classNames(
@@ -2299,7 +2324,7 @@ const VideoPlayerBase = class extends React.Component {
                videoVerticalVisible={videoVerticalVisible}
                handleIndicatorUpClick={handleIndicatorUpClick}
                handleIndicatorDownClick={handleIndicatorDownClick}
-                captionEnable={captionEnable}
+                captionEnable={_captionEnable}
                disclaimer={disclaimer}
                type={type}
              />
@@ -2430,9 +2455,7 @@ const VideoPlayerBase = class extends React.Component {
                onPlay={this.handlePlay}
                onRewind={type !== "LIVE" && this.handleRewind}
                onToggleMore={this.handleToggleMore}
-                paused={
-                  type !== "LIVE" && !isYoutube ? this.state.paused : false
-                }
+                paused={type !== "LIVE" && this.state.paused}
                spotlightId={this.mediaControlsSpotlightId}
                spotlightDisabled={
                  !this.state.mediaControlsVisible || spotlightDisabled
--- a/com.twin.app.shoptime/src/hooks/useDebugKey.js
+++ b/com.twin.app.shoptime/src/hooks/useDebugKey.js
@@ -23,6 +23,10 @@ const useDebugKey = ({isLandingPage=false}) => {
          debugKey.current = [];
          dispatch(pushPanel({ name: Config.panel_names.DEBUG_PANEL, panelInfo: {} }));
        }
+        if (debugKey.current.join("") === Config.TESTPANEL_KEY) {
+          debugKey.current = [];
+          dispatch(pushPanel({ name: Config.panel_names.VIDEO_TEST_PANEL, panelInfo: {} }));
+        }
      }
    },
    [panels, dispatch, isLandingPage]
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -32,6 +32,7 @@ export const panel_names = {

  // debug
  DEBUG_PANEL: "debugpanel",
+  VIDEO_TEST_PANEL: "videotestpanel"
 };

 //button
--- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx
+++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
@@ -45,6 +45,7 @@ import CategoryPanel from "../CategoryPanel/CategoryPanel";
 import CheckOutPanel from "../CheckOutPanel/CheckOutPanel";
 import ConfirmPanel from "../ConfirmPanel/ConfirmPanel";
 import DebugPanel from "../DebugPanel/DebugPanel";
+import VideoTestPanel from "../VideoTestPanel/VideoTestPanel";
 import DetailPanel from "../DetailPanel/DetailPanel";
 import ErrorPanel from "../ErrorPanel/ErrorPanel";
 import FeaturedBrandsPanel from "../FeaturedBrandsPanel/FeaturedBrandsPanel";
@@ -82,6 +83,7 @@ const panelMap = {
  [Config.panel_names.CART_PANEL]: CartPanel,
  [Config.panel_names.ERROR_PANEL]: ErrorPanel,
  [Config.panel_names.DEBUG_PANEL]: DebugPanel,
+  [Config.panel_names.VIDEO_TEST_PANEL]: VideoTestPanel,
  [Config.panel_names.DETAIL_PANEL]: DetailPanel,
  [Config.panel_names.PLAYER_PANEL]: PlayerPanel,
  [Config.panel_names.CHECKOUT_PANEL]: CheckOutPanel,
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -122,6 +122,25 @@ const getLogTpNo = (type, nowMenu) => {
  }
 };

+const YOUTUBECONFIG = {
+  playerVars: {
+    controls: 0, // 플레이어 컨트롤 표시
+    autoplay: 1,
+    disablekb: 1,
+    enablejsapi: 1,
+    listType: "user_uploads",
+    fs: 0,
+    rel: 0, // 관련 동영상 표시 안 함
+    showinfo: 0,
+    loop: 0,
+    iv_load_policy: 3,
+    modestbranding: 1,
+    wmode: "opaque",
+    cc_lang_pref: "en",
+    cc_load_policy: 0,
+  },
+}
+
 const PlayerPanel = ({
  isTabActivated,
  panelInfo,
@@ -921,11 +940,15 @@ const PlayerPanel = ({
      return;
    }

-    if (mediaId && captionEnable && isSubtitleActive && !panelInfo?.modal) {
-      dispatch(requestLiveSubtitle({ mediaId, enable: true }));
-    } else {
-      if (mediaId) {
-        dispatch(requestLiveSubtitle({ mediaId, enable: false }));
+    if(isYoutube){
+      //do caption action on VideoPlayer(componentDidUpdate)
+    }else{
+      if (mediaId && captionEnable && isSubtitleActive && !panelInfo?.modal) {
+        dispatch(requestLiveSubtitle({ mediaId, enable: true }));
+      } else {
+        if (mediaId) {
+          dispatch(requestLiveSubtitle({ mediaId, enable: false }));
+        }
      }
    }
  }, [
@@ -1239,9 +1262,12 @@ const PlayerPanel = ({
            { kind: "subtitles", src: currentSubtitleBlob, default: true },
          ],
        },
+        youtube: YOUTUBECONFIG,
      };
    } else {
-      return undefined;
+      return {
+        youtube: YOUTUBECONFIG
+      }
    }
  }, [currentSubtitleBlob, isSubtitleActive]);

--- a/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.jsx
+++ b/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.jsx
@@ -0,0 +1,121 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+
+
+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";
+
+const YOUTUBECONFIG = {
+  playerVars: {
+    controls: 0, // 플레이어 컨트롤 표시
+    disablekb: 1,
+    // enablejsapi: 1,
+    listType: "user_uploads",
+    fs: 0,
+    rel: 0, // 관련 동영상 표시 안 함
+    showinfo: 0,
+    loop: 0,
+    iv_load_policy: 3,
+    modestbranding: 1,
+    wmode: "opaque",
+    // origin: origin,
+    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"
+  ];
+export default function VideoTestPanel({ spotlightId }) {
+  const dispatch = useDispatch();
+  const [videoIndex, setVideoIndex] = useState(0);
+  const [captionEnabled, setCaptionEnabled] = useState(false);
+  const [showCaption, setShowCaption] = useState(true);
+  const videoNode = useRef(null);
+  const showCaptionRef = usePrevious(showCaption);
+
+  const setVideoRef = useCallback((video) => {
+    videoNode.current = video;
+  },[showCaption]);
+
+  const handleCaption = useCallback(() => {
+    if(!captionEnabled){
+      return;
+    }
+    if(videoNode.current){
+      if(!showCaption){
+        videoNode.current.loadModule("captions");
+        videoNode.current.setOption("captions", "track", { languageCode: "en" });
+      }else{
+        videoNode.current.unloadModule("captions");
+      }
+    }
+    setShowCaption(!showCaption);
+  },[showCaption, captionEnabled]);
+
+  const changeVideo = useCallback(() => {
+    // setShowCaption(false);
+    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){
+      setCaptionEnabled(true);
+      if(showCaptionRef.current){
+        videoNode.current.loadModule("captions");
+        videoNode.current.setOption("captions", "track", { languageCode: "en" });
+      }
+    }else{
+      setCaptionEnabled(false);
+    }
+  },[]);
+
+  const onBackClick = useCallback(() => {
+    dispatch(popPanel());
+  }, [dispatch]);
+
+  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>
+      <TReactPlayer
+        url={TEST_URLS[videoIndex]}
+        playing={true}
+        config={{
+          youtube: YOUTUBECONFIG
+        }}
+        videoRef={setVideoRef}
+        onStart={onStart}
+      ></TReactPlayer>
+      <TButton
+        onClick={changeVideo}
+      >
+        {"changeVideo"}
+      </TButton>
+      <TButton
+        onClick={handleCaption}
+        disabled={!captionEnabled}
+      >
+        {"ToggleCaption"}
+      </TButton>
+    </TPanel>
+  );
+}
--- a/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.module.less
+++ b/com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.module.less
@@ -0,0 +1,72 @@
+.scroller{
+    height:650px;
+  }
+  .settingLayer{
+    width: 100%;
+    height: auto;
+    padding-bottom: 30px;
+  }
+.titleArea {
+    position: relative;
+    display: block;
+    color: black;
+    font-size: 28px;
+    .titleBox {
+        position: relative;
+        display: inline-block;
+        width: 420px;
+        height: auto;
+        left: 75px;
+        top: 0rem;
+        .text {
+          position: relative;
+          top: 0rem;
+          text-align: start;
+          margin-top: 13px;
+          font-weight: bold;
+        }
+    }
+    .textArea {
+        position: relative;
+        display: inline-block;
+        width: 1000px;
+        height: auto;
+        left: 60px;
+        background-color: rgba(174, 0, 255, 0.0);
+        .text {
+          position: relative;
+          color: rgb(252, 252, 252);
+          text-align: start;
+          margin-top: 13px;
+          color: black;
+        }
+    }
+    .title {
+        position: relative;
+        width:100%;
+        text-align: center;
+        font-size: 36px;
+        font-weight: 'bold';
+    }
+    .switchs {
+      position: relative;
+      display: inline-flex;
+      width: 100%;
+      .switchTitle {
+        position: relative;
+        width: 660px;
+        height: 72px;
+        line-height: 72px;
+        margin-left: 75px;
+        font-size: 30px;
+        font-weight: bold;
+        color: black;
+        background-color: bisque;
+      }
+      .switch{
+        width: 250px;
+        color: black;
+        margin-bottom: 0px;
+      }
+    }
+  }