From f193e3afb29786df68fe50b894150e6190274591 Mon Sep 17 00:00:00 2001 From: harsh12-99 Date: Mon, 18 Dec 2023 12:23:18 +0530 Subject: [PATCH] CL-595 -- video dialog code refactor and snackbar fix --- src/common/VideoDialog.jsx | 502 +++++++++---------------------------- 1 file changed, 122 insertions(+), 380 deletions(-) diff --git a/src/common/VideoDialog.jsx b/src/common/VideoDialog.jsx index fbf5f142..8aeb0839 100644 --- a/src/common/VideoDialog.jsx +++ b/src/common/VideoDialog.jsx @@ -1,18 +1,14 @@ -import React, { Fragment, useCallback, useEffect, useRef, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { getMilliseconds, getTimeStamp, MenuProps } from "utils"; -import { useVideoSubtitle } from "hooks"; +import React, { Fragment, useCallback, useEffect, useState } from "react"; +import { useDispatch } from "react-redux"; +import { MenuProps } from "utils"; import { speakerFields, voiceOptions } from "config"; //Styles -import { ProjectStyle } from "styles"; import useMediaQuery from "@mui/material/useMediaQuery"; import { useTheme } from "@mui/material/styles"; - //Components import { - Box, Button, Dialog, DialogActions, @@ -34,9 +30,6 @@ import { AccordionDetails, AccordionSummary, } from "@mui/material"; -import FullscreenIcon from "@mui/icons-material/Fullscreen"; -import FullscreenExitIcon from "@mui/icons-material/FullscreenExit"; -import CustomSwitchDarkBackground from "./CustomSwitchDarkBackground"; import CloseIcon from "@mui/icons-material/Close"; import VideoTaskList from "containers/Organization/Project/VideoTaskList"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; @@ -56,13 +49,9 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { const theme = useTheme(); const dispatch = useDispatch(); const fullScreen = useMediaQuery(theme.breakpoints.down("lg")); - // const [speakerType, setSpeakerType] = useState("individual"); - const [speakerType, setSpeakerType] = useState(videoDetails[0].multiple_speaker?"multiple":"individual"); - const [time, setTime] = useState(""); - const [subtitles, setSubtitles] = useState([]); - const [highlightedSubtitle, setHighlightedSubtitle] = useState([]); - const [fullScreenMode, setFullScreenMode] = useState(false); - const [darkAndLightMood, setDarkAndLightMood] = useState(true); + const [speakerType, setSpeakerType] = useState( + videoDetails[0].multiple_speaker ? "multiple" : "individual" + ); const [videoDescription, setVideoDescription] = useState(""); const [voice, setVoice] = useState(""); const [snackbar, setSnackbarInfo] = useState({ @@ -72,41 +61,11 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { }); const [speakerInfo, setSpeakerInfo] = useState(videoDetails[0].speaker_info); - const ref = useRef(null); - const { subtitle } = useVideoSubtitle(videoDetails[0].id); - - const classes = ProjectStyle(); - useEffect(() => { setVideoDescription(videoDetails[0].description); setVoice(videoDetails[0].gender_label); }, [videoDetails]); - useEffect(() => { - const subtitleList = Object.values(subtitle); - const subs = subtitleList.filter((subtitleSentence) => { - const { start_time, end_time, timestamps } = subtitleSentence; - if (!!start_time && !!end_time && !!timestamps) { - const start = getMilliseconds(start_time); - const currentTime = getMilliseconds(time); - const end = getMilliseconds(end_time); - if (currentTime > start && currentTime <= end) { - return true; - } else { - setHighlightedSubtitle([]); - } - } - return false; - }); - setSubtitles(subs); - // eslint-disable-next-line - }, [time]); - - useEffect(() => { - processSubtitleData(); - // eslint-disable-next-line - }, [subtitles]); - const handleRemoveSpeaker = (event, index) => { event.stopPropagation(); @@ -149,42 +108,6 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { ]); }; - const getHighlightedWords = (index, currentTime, word, start, end) => { - return ( - = start && currentTime <= end - ? "orange" - : currentTime >= start - ? darkAndLightMood === false - ? "black" - : "white" - : "grey", - }} - >{`${word} `} - ); - }; - - const processSubtitleData = () => { - subtitles.length && - subtitles.forEach((subtitle) => { - setHighlightedSubtitle([]); - subtitle.timestamps.forEach((timestamp, index) => { - const text = Object.keys(timestamp)[0]; - const { start, end } = timestamp[text]; - const currentTime = getMilliseconds(time); - const startTime = getMilliseconds(start); - const endTime = getMilliseconds(end); - setHighlightedSubtitle((prev) => [ - ...prev, - getHighlightedWords(index, currentTime, text, startTime, endTime), - ]); - }); - }); - }; - useEffect(() => { const apiObj = new FetchVideoDetailsAPI( videoDetails[0].url, @@ -200,129 +123,17 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { // eslint-disable-next-line }, []); - const onFullScreenChange = (status) => { - setFullScreenMode(status); - }; - - useEffect(() => { - window.onresize = function () { - if ( - window.matchMedia("(display-mode: fullscreen)").matches || - window.document.fullscreenElement - ) { - onFullScreenChange(true); - } else { - onFullScreenChange(false); - } - }; - }, []); - - const video = useSelector((state) => state.getVideoDetails.data); - - //callback function called when the video is being played - const handleProgress = () => { - const time = getTimeStamp(ref?.current?.currentTime); - setTime(time); - }; - - const handleFullscreenVideo = () => { - let docElm = document.getElementById("myvideo"); - var isInFullScreen = - (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && - document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && - document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null); - - // var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } - }; - - const handleplayVideo = (e) => { - var btn = document.getElementById("myBtn"); - e.preventDefault(); - if (btn.paused) { - btn.play(); - } else { - btn.pause(); - } - }; - - // useEffect(() => { - // const handleKeyDown = (e) => { - // if ( - // e.which === 32 && - // e.target.id !== "description" && - // document.activeElement !== ref.current - // ) { - // e.preventDefault(); - // var video = document.getElementById("myBtn"); - // if (video.paused) { - // video.play(); - // } else { - // video.pause(); - // } - // } - // }; - // window.addEventListener("keydown", handleKeyDown); - // return () => { - // window.removeEventListener("keydown", handleKeyDown); - // }; - // }, []); - const updateVideoHandler = async () => { const updateData = { gender: voice, description: videoDescription, video_id: videoDetails[0].id, - // multiple_speaker: speakerType !== 'individual', - multiple_speaker: String(speakerType !== 'individual'), - speaker_info: speakerInfo + multiple_speaker: String(speakerType !== "individual"), + speaker_info: speakerInfo, }; const apiObj = new UpdateVideoAPI(updateData); - const res = await fetch(apiObj.apiEndPoint(), { - method: "PATCH", - body: JSON.stringify(apiObj.getBody()), - headers: apiObj.getHeaders().headers, - }); - - const resp = await res.json(); - - if (res.ok) { - setSnackbarInfo({ - open: true, - message: resp?.message, - variant: "success", - }); - } else { - setSnackbarInfo({ - open: true, - message: resp?.message, - variant: "error", - }); - } + dispatch(APITransport(apiObj)); }; const renderSnackBar = useCallback(() => { @@ -375,7 +186,11 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { - + @@ -387,8 +202,8 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => { alignItems="center" marginBottom="20px" > - - + + Voice Selection - { /> {speakerType === "multiple" && ( - <> - {speakerInfo.map((item, index) => { - return ( - - } - id={`speakerInfo-accordion-child-${index}`} - > - - Speaker {index + 1} - - - - handleRemoveSpeaker(event, index)} - sx={{ marginLeft: "auto" }} - disabled={speakerInfo.length === 1} - color="error" - > - - - - - - {speakerFields.map((element, idx) => { + <> + {speakerInfo.map((item, index) => { return ( - - {element.type === "text" ? ( - - handleSpeakerFieldChange(event, index) - } - sx={element.sx} - /> - ) : ( - - - {element.label} - - - - )} - + + + + + + {speakerFields.map((element, idx) => { + return ( + + {element.type === "text" ? ( + + handleSpeakerFieldChange(event, index) + } + sx={element.sx} + /> + ) : ( + + + {element.label} + + + + )} + + ); + })} + + ); })} - - - ); - })} - - - )} + + + )} { sx={{ display: "flex", borderRadius: "8px", - m: "24px auto 0 0", + m: "0 auto 0 0", }} onClick={() => updateVideoHandler()} > Update Details - - {/* - */}
@@ -641,14 +387,10 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => {
- - {/* */} - + ); }; -export default VideoDialog; \ No newline at end of file +export default VideoDialog;