Skip to content

Commit

Permalink
Merge pull request #1098 from AI4Bharat/preview
Browse files Browse the repository at this point in the history 
preview
  • Loading branch information
@ishvindersethi22
ishvindersethi22 authored Sep 11, 2024
2 parents 5860a90 + b4e437d commit 07da300
Show file tree
Hide file tree
Showing 11 changed files with 360 additions and 26 deletions.
303 changes: 303 additions & 0 deletions src/ui/pages/component/CL-Transcription/PreviewDialog.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
import {
Dialog,
DialogContent,
DialogContentText,
Box,
IconButton,
DialogTitle,
Typography,
CircularProgress,
} from "@mui/material";
import React, { useCallback, useEffect, useState,useRef} from "react";
import CloseIcon from "@mui/icons-material/Close";
import FullscreenIcon from "@mui/icons-material/Fullscreen";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
// import { FetchpreviewTaskAPI, setSnackBar } from "redux/actions";
import { useDispatch ,useSelector} from "react-redux";
// import Loader from "./Spinner";
// import TimeBoxes from "./TimeBoxes";

const PreviewDialog = ({
openPreviewDialog,
handleClose,
subtitles,
// videoId,
// taskType,
// currentSubs,
// targetLanguage,
}) => {
const dispatch = useDispatch();
const [isFullscreen, setIsFullscreen] = useState(false);
console.log(subtitles);
const annotationData = useSelector((state) => state.getAnnotationsTask.data);

const [previewdata, setPreviewdata] = useState([]);
const [selectedSubtitleIndex,setSelectedSubtitleIndex] = useState();
const [loading, setLoading] = useState(false);

const dialogRef = useRef(null);

// const fetchPreviewData = useCallback(async () => {
// setLoading(true)
// const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetLanguage);
// try {
// const res = await fetch(taskObj.apiEndPoint(), {
// method: "GET",
// headers: taskObj.getHeaders().headers,
// });

// const response = await res.json();
// setPreviewdata(response.data.payload);
// setLoading(false)
// } catch (error) {
// setLoading(false)
// dispatch(
// setSnackBar({
// open: true,
// message: "Something went wrong!!",
// variant: "error",
// })
// );
// }
// }, [ dispatch,videoId, taskType, targetLanguage]);

// useEffect(() => {
// if (openPreviewDialog) {
// fetchPreviewData();
// }
// }, [fetchPreviewData, openPreviewDialog]);


// useEffect(() => {
// if (
// openPreviewDialog &&
// selectedSubtitleIndex !== null &&
// !loading
// ) {
// // setTimeout(() => {
// const subtitleId = sub-${selectedSubtitleIndex};
// const subtitleElement = document.getElementById(subtitleId);
// if (subtitleElement) {
// subtitleElement.scrollIntoView({ behavior: "smooth", block: "start" });
// }
// // }, 5000);
// }
// }, [openPreviewDialog, selectedSubtitleIndex,loading]);

// useEffect(() => {
// if (currentSubs) {
// const selectedIndex = previewdata.findIndex((el) =>
// el.text === currentSubs.text && el.target_text === currentSubs.target_text
// );
// setSelectedSubtitleIndex(selectedIndex);
// }
// }, [currentSubs, previewdata,loading,isFullscreen]);

const handleFullscreenToggle = () => {
const elem = dialogRef.current;
if (!isFullscreen) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
setIsFullscreen(true);
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
/* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
/* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
/* IE/Edge */
document.msExitFullscreen();
}
setIsFullscreen(false);
}
};

const type1 = annotationData.filter((item)=> item.annotation_type==1)
const type2 = annotationData.filter((item)=> item.annotation_type==2)
const type3 = annotationData.filter((item)=> item.annotation_type==3)


useEffect(() => {
const handleFullscreenChange = () => {
if (!document.fullscreenElement) {
setIsFullscreen(false);
}
};

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
document.removeEventListener('msfullscreenchange', handleFullscreenChange);
};
}, []);

return (
<Dialog
open={openPreviewDialog}
onClose={handleClose}
ref={dialogRef}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
PaperProps={{
style: {
borderRadius: "10px",
width: isFullscreen ? '100%' : 'auto',
height: isFullscreen ? '100%' : 'auto',
margin: 0,
maxWidth: isFullscreen ? '100%' : '655px',
overflow:"auto",
}
}}
fullScreen={isFullscreen}

>
<DialogTitle variant="h4" display="flex" alignItems={"center"}>
<Typography variant="h4" flexGrow={1}>Subtitles</Typography>{" "}
<IconButton
aria-label="fullscreen"
onClick={handleFullscreenToggle}
sx={{ marginLeft: "auto" }}
>
{isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{ marginLeft: "auto" }}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent sx={{ height: "410px", zIndex: "4", padding: "3" }}>
{loading ? (
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: 1,
}}
>
<CircularProgress />
</div>
) : (
<div>
<table style={{ width: "100%", borderCollapse: "separate", }}>
<thead>
<tr>
{type1.length>0?<th style={{ textAlign: "left" }}>
<Typography variant="h6">Annotation</Typography>
</th>:null}
{type2.length>0?<th style={{ textAlign: "left" }}>
<Typography variant="h6">Review</Typography>
</th>:null}
{type3.length>0?<th style={{ textAlign: "left" }}>
<Typography variant="h6">SuperCheck</Typography>
</th>:null}
</tr>
</thead>
<tbody>
<tr>
{/* Annotation */}
<td style={{ verticalAlign: "top" }}>
{type1.length > 0 ? (
type1[0].result.map((el, index) => (
<Box
key={index}
textAlign="start"
sx={{
mb: 2,
padding: 1,
border: "1px solid #000000",
borderRadius: 2,
width: isFullscreen ? '100%' : '100%',
height: "auto",
cursor: "pointer",
boxSizing: "border-box",
}}
>
{el.text}
</Box>
))
) : null}
</td>

{/* Review */}
<td style={{ verticalAlign: "top" }}>
{type2.length > 0 ? (
type2[0].result.map((el, index) => (
<Box
key={index}
textAlign="start"
sx={{
mb: 2,
padding: 1,
border: "1px solid #000000",
borderRadius: 2,
width: isFullscreen ? '100%' : '100%',
height: "auto",
cursor: "pointer",
boxSizing: "border-box",
}}
>
{el.text}
</Box>
))
) : null}
</td>

{/* SuperCheck */}
<td style={{ verticalAlign: "top" }}>
{type3.length > 0 ? (
type3[0].result.map((el, index) => (
<Box
key={index}
textAlign="start"
sx={{
mb: 2,
padding: 1,
border: "1px solid #000000",
borderRadius: 2,
width: isFullscreen ? '100%' : '100%',
height: "auto",
cursor: "pointer",
boxSizing: "border-box",
}}
>
{el.text}
</Box>
))
) : null}
</td>
</tr>
</tbody>
</table>
</div>
)}
</DialogContent>

</Dialog>
);
};
export default PreviewDialog;
36 changes: 35 additions & 1 deletion src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { memo, useState } from "react";
import { useSelector } from "react-redux";
import { fontMenu } from "../../../../utils/SubTitlesUtils";

import VisibilityIcon from "@mui/icons-material/Visibility";
//Styles
import AudioTranscriptionLandingStyle from "../../../styles/AudioTranscriptionLandingStyle";

Expand Down Expand Up @@ -30,6 +30,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
// import FormatLineSpacingIcon from "@mui/icons-material/FormatLineSpacingIcon";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import PreviewDialog from "./PreviewDialog";

const anchorOrigin = {
vertical: "top",
Expand Down Expand Up @@ -59,6 +60,7 @@ const SettingsButtonComponent = ({
onSplitClick,
showPopOver,
showSplit,
subtitles,
handleInfoButtonClick,
advancedWaveformSettings,
setAdvancedWaveformSettings,
Expand All @@ -72,10 +74,12 @@ const SettingsButtonComponent = ({
}) => {
const classes = AudioTranscriptionLandingStyle();
// const dispatch = useDispatch();
console.log(subtitles);

const [anchorElSettings, setAnchorElSettings] = useState(null);
const [anchorElFont, setAnchorElFont] = useState(null);
const [anchorElLimit, setAnchorElLimit] = useState(null);
const [openPreviewDialog, setOpenPreviewDialog] = useState(false);

return (
<>
Expand Down Expand Up @@ -266,6 +270,7 @@ const SettingsButtonComponent = ({
borderRadius: "50%",
color: "#fff",
marginX: "5px",
marginRight: "5px",
"&:hover": {
backgroundColor: "#271e4f",
},
Expand All @@ -275,6 +280,23 @@ const SettingsButtonComponent = ({
<FormatSizeIcon />
</IconButton>
</Tooltip>
<Tooltip title="Subtitle Preview" placement="bottom">
<IconButton
className={classes.rightPanelBtnGrp}
onClick={() => setOpenPreviewDialog(true)}
style={{
backgroundColor: "#2C2799",
borderRadius: "50%",
color: "#fff",
marginX: "5px",
"&:hover": {
backgroundColor: "#271e4f",
},}}
>
<VisibilityIcon className={classes.rightPanelSvg} />
</IconButton>
</Tooltip>


<Menu
sx={{ mt: "45px" }}
Expand Down Expand Up @@ -386,6 +408,18 @@ const SettingsButtonComponent = ({
<RedoIcon />
</IconButton>
</Tooltip>
{openPreviewDialog && (
<PreviewDialog
openPreviewDialog={openPreviewDialog}
handleClose={() => setOpenPreviewDialog(false)}
subtitles={subtitles}
// taskType={taskData?.task_type}
// currentSubs={currentSubs}
// videoId={taskData?.video}
// targetLanguage={taskData?.target_language}
/>
)}

</>
);
};
Expand Down
Loading

0 comments on commit 07da300

Please sign in to comment.