From 5774a25bb50d3e5213c14571edf0b72fa26c147f Mon Sep 17 00:00:00 2001
From: kartikvirendrar <kartikrajput357@gmail.com>
Date: Fri, 2 Aug 2024 18:28:11 +0530
Subject: [PATCH] added toggle for youtube player

---
 src/common/CustomMenuComponent.jsx                | 15 +++++++++++++++
 .../Organization/Video/VideoLanding.jsx           |  5 +++++
 .../Organization/Video/components/VideoName.jsx   |  4 ++++
 .../Organization/Video/components/VideoPanel.jsx  | 14 +++++---------
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/common/CustomMenuComponent.jsx b/src/common/CustomMenuComponent.jsx
index 7ccad120..b66763fd 100644
--- a/src/common/CustomMenuComponent.jsx
+++ b/src/common/CustomMenuComponent.jsx
@@ -21,6 +21,8 @@ const CustomMenuComponent = ({
   setShowSubtitles,
   showTimeline,
   setShowTimeline,
+  useYtdlp,
+  setUseYtdlp,
 }) => {
   const player = useSelector((state) => state.commonReducer.player);
 
@@ -109,6 +111,19 @@ const CustomMenuComponent = ({
               <input type="checkbox" checked={showTimeline} onChange={() => {setShowTimeline(!showTimeline)}}/>
             </div>
           </MenuItem>
+          <MenuItem key="Youtube Player">
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+              }}
+            >
+              <span>Youtube Player</span>
+              <input type="checkbox" checked={!useYtdlp} onChange={() => {setUseYtdlp(!useYtdlp)}}/>
+            </div>
+          </MenuItem>
       </Menu>
 
       <Menu
diff --git a/src/containers/Organization/Video/VideoLanding.jsx b/src/containers/Organization/Video/VideoLanding.jsx
index 8b458a30..a72b570d 100644
--- a/src/containers/Organization/Video/VideoLanding.jsx
+++ b/src/containers/Organization/Video/VideoLanding.jsx
@@ -74,6 +74,7 @@ const VideoLanding = () => {
   const [fontSize, setFontSize] = useState("large");
   const [darkAndLightMode, setDarkAndLightMode] = useState("dark");
   const [subtitlePlacement, setSubtitlePlacement] = useState("bottom");
+  const [useYtdlp, setUseYtdlp] = useState(true);
 
   const taskDetails = useSelector((state) => state.getTaskDetails.data);
   const transcriptPayload = useSelector(
@@ -285,11 +286,15 @@ const VideoLanding = () => {
               setShowSubtitles={setShowSubtitles}
               showTimeline={showTimeline}
               setShowTimeline={setShowTimeline}
+              useYtdlp={useYtdlp}
+              setUseYtdlp={setUseYtdlp}
             />
 
             <VideoPanel
               setCurrentTime={setCurrentTime}
               setPlaying={setPlaying}
+              useYtdlp={useYtdlp}
+              setUseYtdlp={setUseYtdlp}
             />
 
             {currentSubs && showSubtitles && (
diff --git a/src/containers/Organization/Video/components/VideoName.jsx b/src/containers/Organization/Video/components/VideoName.jsx
index 3d594e4a..41bb4373 100644
--- a/src/containers/Organization/Video/components/VideoName.jsx
+++ b/src/containers/Organization/Video/components/VideoName.jsx
@@ -20,6 +20,8 @@ const VideoName = ({
   setShowSubtitles,
   showTimeline,
   setShowTimeline,
+  useYtdlp,
+  setUseYtdlp,
 }) => {
   const classes = VideoLandingStyle();
 
@@ -69,6 +71,8 @@ const VideoName = ({
         setShowSubtitles={setShowSubtitles}
         showTimeline={showTimeline}
         setShowTimeline={setShowTimeline}
+        useYtdlp={useYtdlp}
+        setUseYtdlp={setUseYtdlp}
       />
     </Box>
   );
diff --git a/src/containers/Organization/Video/components/VideoPanel.jsx b/src/containers/Organization/Video/components/VideoPanel.jsx
index 3cf3fefa..8f87dc82 100644
--- a/src/containers/Organization/Video/components/VideoPanel.jsx
+++ b/src/containers/Organization/Video/components/VideoPanel.jsx
@@ -15,14 +15,12 @@ import { VideoLandingStyle } from "styles";
 //APIs
 import { setPlayer } from "redux/actions";
 
-const VideoPanel = memo(
-  ({ setCurrentTime, setPlaying }) => {
+const VideoPanel = ({ setCurrentTime, setPlaying, useYtdlp, setUseYtdlp }) => {
     const classes = VideoLandingStyle();
     const dispatch = useDispatch();
     const $video = createRef();
 
     const [poster, setPoster] = useState("play.png");
-    const [ytdlpError, setYtdlpError] = useState(false);
 
   const videoDetails = useSelector((state) => state.getVideoDetails.data);
   const taskData = useSelector((state) => state.getTaskDetails.data);
@@ -63,7 +61,7 @@ const VideoPanel = memo(
 
     return (
       <div className={classes.videoPlayerParent} style={{display: "flex", alignItems: "center", justifyContent: "center", height:"100%"}}>
-        { ((videoDetails.length === 0 && taskData?.video_url?.includes("youtube")) || ytdlpError === true) ?
+        { ((videoDetails.length === 0 && taskData?.video_url?.includes("youtube")) || useYtdlp === false) ?
         <ReactPlayerYT
           onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
           ref={$video}
@@ -90,14 +88,12 @@ const VideoPanel = memo(
           className={classes.videoPlayer}
           controls={true}
           controlsList="nodownload"
-          onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer())); console.log($video.current.getInternalPlayer());}}
-          onError={() => {setYtdlpError(true);}}
+          onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
+          onError={() => {setUseYtdlp(false);}}
         />
       }
       </div>
     );
-  },
-  () => true
-);
+  };
 
 export default VideoPanel;