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
-
- {/*
-
-
-
- {highlightedSubtitle.length ? (
- highlightedSubtitle.map((s) => s)
- ) : (
- <>
- )}
-
-
-
- {fullScreenMode ? (
-
- ) : (
-
- )}
-
-
- {fullScreenMode && (
-
- darkAndLightMood === false
- ? setDarkAndLightMood(true)
- : setDarkAndLightMood(false)
- }
- />
- )}
- */}
@@ -641,14 +387,10 @@ const VideoDialog = ({ open, handleClose, videoDetails }) => {
-
- {/* */}
-
+
);
};
-export default VideoDialog;
\ No newline at end of file
+export default VideoDialog;