Skip to content

Commit 07da300

Browse files
ishvindersethi22ishvindersethi22
authored
Merge pull request #1098 from AI4Bharat/preview
preview
2 parents 5860a90 + b4e437d commit 07da300

11 files changed

+360
-26
lines changed

‎src/ui/pages/component/CL-Transcription/PreviewDialog.jsx

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
import {
2+
Dialog,
3+
DialogContent,
4+
DialogContentText,
5+
Box,
6+
IconButton,
7+
DialogTitle,
8+
Typography,
9+
CircularProgress,
10+
} from "@mui/material";
11+
import React, { useCallback, useEffect, useState,useRef} from "react";
12+
import CloseIcon from "@mui/icons-material/Close";
13+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
14+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
15+
// import { FetchpreviewTaskAPI, setSnackBar } from "redux/actions";
16+
import { useDispatch ,useSelector} from "react-redux";
17+
// import Loader from "./Spinner";
18+
// import TimeBoxes from "./TimeBoxes";
19+
20+
const PreviewDialog = ({
21+
openPreviewDialog,
22+
handleClose,
23+
subtitles,
24+
// videoId,
25+
// taskType,
26+
// currentSubs,
27+
// targetLanguage,
28+
}) => {
29+
const dispatch = useDispatch();
30+
const [isFullscreen, setIsFullscreen] = useState(false);
31+
console.log(subtitles);
32+
const annotationData = useSelector((state) => state.getAnnotationsTask.data);
33+
34+
const [previewdata, setPreviewdata] = useState([]);
35+
const [selectedSubtitleIndex,setSelectedSubtitleIndex] = useState();
36+
const [loading, setLoading] = useState(false);
37+
38+
const dialogRef = useRef(null);
39+
40+
// const fetchPreviewData = useCallback(async () => {
41+
// setLoading(true)
42+
// const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetLanguage);
43+
// try {
44+
// const res = await fetch(taskObj.apiEndPoint(), {
45+
// method: "GET",
46+
// headers: taskObj.getHeaders().headers,
47+
// });
48+
49+
// const response = await res.json();
50+
// setPreviewdata(response.data.payload);
51+
// setLoading(false)
52+
// } catch (error) {
53+
// setLoading(false)
54+
// dispatch(
55+
// setSnackBar({
56+
// open: true,
57+
// message: "Something went wrong!!",
58+
// variant: "error",
59+
// })
60+
// );
61+
// }
62+
// }, [ dispatch,videoId, taskType, targetLanguage]);
63+
64+
// useEffect(() => {
65+
// if (openPreviewDialog) {
66+
// fetchPreviewData();
67+
// }
68+
// }, [fetchPreviewData, openPreviewDialog]);
69+
70+
71+
// useEffect(() => {
72+
// if (
73+
// openPreviewDialog &&
74+
// selectedSubtitleIndex !== null &&
75+
// !loading
76+
// ) {
77+
// // setTimeout(() => {
78+
// const subtitleId = sub-${selectedSubtitleIndex};
79+
// const subtitleElement = document.getElementById(subtitleId);
80+
// if (subtitleElement) {
81+
// subtitleElement.scrollIntoView({ behavior: "smooth", block: "start" });
82+
// }
83+
// // }, 5000);
84+
// }
85+
// }, [openPreviewDialog, selectedSubtitleIndex,loading]);
86+
87+
// useEffect(() => {
88+
// if (currentSubs) {
89+
// const selectedIndex = previewdata.findIndex((el) =>
90+
// el.text === currentSubs.text && el.target_text === currentSubs.target_text
91+
// );
92+
// setSelectedSubtitleIndex(selectedIndex);
93+
// }
94+
// }, [currentSubs, previewdata,loading,isFullscreen]);
95+
96+
const handleFullscreenToggle = () => {
97+
const elem = dialogRef.current;
98+
if (!isFullscreen) {
99+
if (elem.requestFullscreen) {
100+
elem.requestFullscreen();
101+
} else if (elem.mozRequestFullScreen) {
102+
/* Firefox */
103+
elem.mozRequestFullScreen();
104+
} else if (elem.webkitRequestFullscreen) {
105+
/* Chrome, Safari and Opera */
106+
elem.webkitRequestFullscreen();
107+
} else if (elem.msRequestFullscreen) {
108+
/* IE/Edge */
109+
elem.msRequestFullscreen();
110+
}
111+
setIsFullscreen(true);
112+
} else {
113+
if (document.exitFullscreen) {
114+
document.exitFullscreen();
115+
} else if (document.mozCancelFullScreen) {
116+
/* Firefox */
117+
document.mozCancelFullScreen();
118+
} else if (document.webkitExitFullscreen) {
119+
/* Chrome, Safari and Opera */
120+
document.webkitExitFullscreen();
121+
} else if (document.msExitFullscreen) {
122+
/* IE/Edge */
123+
document.msExitFullscreen();
124+
}
125+
setIsFullscreen(false);
126+
}
127+
};
128+
129+
const type1 = annotationData.filter((item)=> item.annotation_type==1)
130+
const type2 = annotationData.filter((item)=> item.annotation_type==2)
131+
const type3 = annotationData.filter((item)=> item.annotation_type==3)
132+
133+
134+
useEffect(() => {
135+
const handleFullscreenChange = () => {
136+
if (!document.fullscreenElement) {
137+
setIsFullscreen(false);
138+
}
139+
};
140+
141+
document.addEventListener('fullscreenchange', handleFullscreenChange);
142+
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
143+
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
144+
document.addEventListener('msfullscreenchange', handleFullscreenChange);
145+
146+
return () => {
147+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
148+
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
149+
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
150+
document.removeEventListener('msfullscreenchange', handleFullscreenChange);
151+
};
152+
}, []);
153+
154+
return (
155+
<Dialog
156+
open={openPreviewDialog}
157+
onClose={handleClose}
158+
ref={dialogRef}
159+
aria-labelledby="alert-dialog-title"
160+
aria-describedby="alert-dialog-description"
161+
PaperProps={{
162+
style: {
163+
borderRadius: "10px",
164+
width: isFullscreen ? '100%' : 'auto',
165+
height: isFullscreen ? '100%' : 'auto',
166+
margin: 0,
167+
maxWidth: isFullscreen ? '100%' : '655px',
168+
overflow:"auto",
169+
}
170+
}}
171+
fullScreen={isFullscreen}
172+
173+
>
174+
<DialogTitle variant="h4" display="flex" alignItems={"center"}>
175+
<Typography variant="h4" flexGrow={1}>Subtitles</Typography>{" "}
176+
<IconButton
177+
aria-label="fullscreen"
178+
onClick={handleFullscreenToggle}
179+
sx={{ marginLeft: "auto" }}
180+
>
181+
{isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
182+
</IconButton>
183+
<IconButton
184+
aria-label="close"
185+
onClick={handleClose}
186+
sx={{ marginLeft: "auto" }}
187+
>
188+
<CloseIcon />
189+
</IconButton>
190+
</DialogTitle>
191+
<DialogContent sx={{ height: "410px", zIndex: "4", padding: "3" }}>
192+
{loading ? (
193+
<div
194+
style={{
195+
position: "absolute",
196+
top: "50%",
197+
left: "50%",
198+
transform: "translate(-50%, -50%)",
199+
zIndex: 1,
200+
}}
201+
>
202+
<CircularProgress />
203+
</div>
204+
) : (
205+
<div>
206+
<table style={{ width: "100%", borderCollapse: "separate", }}>
207+
<thead>
208+
<tr>
209+
{type1.length>0?<th style={{ textAlign: "left" }}>
210+
<Typography variant="h6">Annotation</Typography>
211+
</th>:null}
212+
{type2.length>0?<th style={{ textAlign: "left" }}>
213+
<Typography variant="h6">Review</Typography>
214+
</th>:null}
215+
{type3.length>0?<th style={{ textAlign: "left" }}>
216+
<Typography variant="h6">SuperCheck</Typography>
217+
</th>:null}
218+
</tr>
219+
</thead>
220+
<tbody>
221+
<tr>
222+
{/* Annotation */}
223+
<td style={{ verticalAlign: "top" }}>
224+
{type1.length > 0 ? (
225+
type1[0].result.map((el, index) => (
226+
<Box
227+
key={index}
228+
textAlign="start"
229+
sx={{
230+
mb: 2,
231+
padding: 1,
232+
border: "1px solid #000000",
233+
borderRadius: 2,
234+
width: isFullscreen ? '100%' : '100%',
235+
height: "auto",
236+
cursor: "pointer",
237+
boxSizing: "border-box",
238+
}}
239+
>
240+
{el.text}
241+
</Box>
242+
))
243+
) : null}
244+
</td>
245+
246+
{/* Review */}
247+
<td style={{ verticalAlign: "top" }}>
248+
{type2.length > 0 ? (
249+
type2[0].result.map((el, index) => (
250+
<Box
251+
key={index}
252+
textAlign="start"
253+
sx={{
254+
mb: 2,
255+
padding: 1,
256+
border: "1px solid #000000",
257+
borderRadius: 2,
258+
width: isFullscreen ? '100%' : '100%',
259+
height: "auto",
260+
cursor: "pointer",
261+
boxSizing: "border-box",
262+
}}
263+
>
264+
{el.text}
265+
</Box>
266+
))
267+
) : null}
268+
</td>
269+
270+
{/* SuperCheck */}
271+
<td style={{ verticalAlign: "top" }}>
272+
{type3.length > 0 ? (
273+
type3[0].result.map((el, index) => (
274+
<Box
275+
key={index}
276+
textAlign="start"
277+
sx={{
278+
mb: 2,
279+
padding: 1,
280+
border: "1px solid #000000",
281+
borderRadius: 2,
282+
width: isFullscreen ? '100%' : '100%',
283+
height: "auto",
284+
cursor: "pointer",
285+
boxSizing: "border-box",
286+
}}
287+
>
288+
{el.text}
289+
</Box>
290+
))
291+
) : null}
292+
</td>
293+
</tr>
294+
</tbody>
295+
</table>
296+
</div>
297+
)}
298+
</DialogContent>
299+
300+
</Dialog>
301+
);
302+
};
303+
export default PreviewDialog;

‎src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { memo, useState } from "react";
22
import { useSelector } from "react-redux";
33
import { fontMenu } from "../../../../utils/SubTitlesUtils";
4-
4+
import VisibilityIcon from "@mui/icons-material/Visibility";
55
//Styles
66
import AudioTranscriptionLandingStyle from "../../../styles/AudioTranscriptionLandingStyle";
77

@@ -30,6 +30,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
3030
// import FormatLineSpacingIcon from "@mui/icons-material/FormatLineSpacingIcon";
3131
import Popup from 'reactjs-popup';
3232
import 'reactjs-popup/dist/index.css';
33+
import PreviewDialog from "./PreviewDialog";
3334

3435
const anchorOrigin = {
3536
vertical: "top",
@@ -59,6 +60,7 @@ const SettingsButtonComponent = ({
5960
onSplitClick,
6061
showPopOver,
6162
showSplit,
63+
subtitles,
6264
handleInfoButtonClick,
6365
advancedWaveformSettings,
6466
setAdvancedWaveformSettings,
@@ -72,10 +74,12 @@ const SettingsButtonComponent = ({
7274
}) => {
7375
const classes = AudioTranscriptionLandingStyle();
7476
// const dispatch = useDispatch();
77+
console.log(subtitles);
7578

7679
const [anchorElSettings, setAnchorElSettings] = useState(null);
7780
const [anchorElFont, setAnchorElFont] = useState(null);
7881
const [anchorElLimit, setAnchorElLimit] = useState(null);
82+
const [openPreviewDialog, setOpenPreviewDialog] = useState(false);
7983

8084
return (
8185
<>
@@ -266,6 +270,7 @@ const SettingsButtonComponent = ({
266270
borderRadius: "50%",
267271
color: "#fff",
268272
marginX: "5px",
273+
marginRight: "5px",
269274
"&:hover": {
270275
backgroundColor: "#271e4f",
271276
},
@@ -275,6 +280,23 @@ const SettingsButtonComponent = ({
275280
<FormatSizeIcon />
276281
</IconButton>
277282
</Tooltip>
283+
<Tooltip title="Subtitle Preview" placement="bottom">
284+
<IconButton
285+
className={classes.rightPanelBtnGrp}
286+
onClick={() => setOpenPreviewDialog(true)}
287+
style={{
288+
backgroundColor: "#2C2799",
289+
borderRadius: "50%",
290+
color: "#fff",
291+
marginX: "5px",
292+
"&:hover": {
293+
backgroundColor: "#271e4f",
294+
},}}
295+
>
296+
<VisibilityIcon className={classes.rightPanelSvg} />
297+
</IconButton>
298+
</Tooltip>
299+
278300

279301
<Menu
280302
sx={{ mt: "45px" }}
@@ -386,6 +408,18 @@ const SettingsButtonComponent = ({
386408
<RedoIcon />
387409
</IconButton>
388410
</Tooltip>
411+
{openPreviewDialog && (
412+
<PreviewDialog
413+
openPreviewDialog={openPreviewDialog}
414+
handleClose={() => setOpenPreviewDialog(false)}
415+
subtitles={subtitles}
416+
// taskType={taskData?.task_type}
417+
// currentSubs={currentSubs}
418+
// videoId={taskData?.video}
419+
// targetLanguage={taskData?.target_language}
420+
/>
421+
)}
422+
389423
</>
390424
);
391425
};

0 commit comments

Comments
 (0)