Skip to content

Commit

Permalink
Merge pull request #1123 from AI4Bharat/master-pre
Browse files Browse the repository at this point in the history 
fix
  • Loading branch information
@aparna-aa
aparna-aa authored Nov 27, 2024
2 parents 3a137f7 + ec7f1c1 commit 18f978c
Show file tree
Hide file tree
Showing 6 changed files with 812 additions and 20 deletions.
25 changes: 11 additions & 14 deletions src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,22 @@ const SettingsButtonComponent = ({
pauseOnType,
setPauseOnType,
annotationId,
handleOpenPopover,
}) => {
const classes = AudioTranscriptionLandingStyle();
// const dispatch = useDispatch();

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

const handleClick = (event) => {
const rect = event.currentTarget.getBoundingClientRect();
const position = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
handleOpenPopover(position);
};
return (
<>
<div
Expand Down Expand Up @@ -310,7 +317,7 @@ const SettingsButtonComponent = ({
<Tooltip title="Subtitle Preview" placement="bottom">
<IconButton
className={classes.rightPanelBtnGrp}
onClick={() => setOpenPreviewDialog(true)}
onClick={handleClick}
style={{
backgroundColor: "#2C2799",
borderRadius: "50%",
Expand Down Expand Up @@ -443,17 +450,7 @@ 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
202 changes: 201 additions & 1 deletion src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
Typography,
Grid,
Button,
Slider, Stack, CircularProgress
Slider, Stack, CircularProgress, IconButton,Portal
} from "@mui/material";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import Timeline from "./TimeLine";
Expand All @@ -42,6 +42,9 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import getTaskAssignedUsers from '../../../../utils/getTaskAssignedUsers';
import LightTooltip from "../../component/common/Tooltip";
import configs from '../../../../config/config';
import FullscreenIcon from "@mui/icons-material/Fullscreen";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import CloseIcon from "@mui/icons-material/Close";

const AllAudioTranscriptionLandingPage = () => {
const classes = AudioTranscriptionLandingStyle();
Expand Down Expand Up @@ -86,7 +89,95 @@ const AllAudioTranscriptionLandingPage = () => {
const [assignedUsers, setAssignedUsers] = useState(null);
const [waveSurfer, setWaveSurfer] = useState(true);
const [audioURL, setAudioURL] = useState("");
const [isFullscreen, setIsFullscreen] = useState(false);
const dialogRef = useRef(null);

const type1 = AnnotationsTaskDetails.filter(
(item) => item.annotation_type === 1
);
const type2 = AnnotationsTaskDetails.filter(
(item) => item.annotation_type === 2
);
const type3 = AnnotationsTaskDetails.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
);
};
}, []);

const [popoverOpen, setPopoverOpen] = useState(false);
const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });

const handleOpenPopover = (position) => {
const offsetPosition = {
top: position.top - 0,
left: position.left - 1000,
};
setPopoverPosition(offsetPosition);
setPopoverOpen(true);
};

const handleClosePopover = () => {
setPopoverOpen(false);
};

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 handleCollapseClick = () => {
!showNotes && setShowStdTranscript(false);
setShowNotes(!showNotes);
Expand Down Expand Up @@ -725,6 +816,7 @@ const AllAudioTranscriptionLandingPage = () => {
waveSurfer={waveSurfer}
setWaveSurfer={setWaveSurfer}
annotationId={annotations[0]?.id}
handleOpenPopover={handleOpenPopover}
/>
</Grid>
</Grid>
Expand All @@ -736,6 +828,114 @@ const AllAudioTranscriptionLandingPage = () => {
>
{audioURL ? (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings} />) : <div style={{marginLeft:"49%", marginBottom:"2%"}}><CircularProgress/></div>}
</Grid>
{popoverOpen && (
<Portal>
<Box
ref={dialogRef}
sx={{
position: "fixed",
top: popoverPosition.top,
left: popoverPosition.left,
backgroundColor: "white",
boxShadow: 3,
padding: 2,
borderRadius: "8px",
minWidth: isFullscreen ? "100%" : "400px",
width: isFullscreen ? "100%" : "500px",
height: isFullscreen ? "100%" : "450px",
maxWidth: isFullscreen ? "100%" : "600px",
zIndex: 1300,
overflow: "auto",
}}
>
<Box display="flex" alignItems="center" mb={2}>
<Typography variant="h4" flexGrow={1}>
Subtitles
</Typography>
<IconButton onClick={handleFullscreenToggle}>
{isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
<IconButton onClick={handleClosePopover}>
<CloseIcon />
</IconButton>
</Box>
<Box sx={{ height: "410px", overflowY: "auto" }}>
{loading ? (
<CircularProgress />
) : (
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead>
<tr>
{type1.length > 0 && (
<th>
<Typography variant="h6">Annotation</Typography>
</th>
)}
{type2.length > 0 && (
<th>
<Typography variant="h6">Review</Typography>
</th>
)}
{type3.length > 0 && (
<th>
<Typography variant="h6">SuperCheck</Typography>
</th>
)}
</tr>
</thead>
<tbody>
<tr>
{/* Render different types */}
<td>
{type1.length > 0 &&
type1[0].result.map((el, index) => (
<Box
key={index}
p={1}
border="1px solid #000"
borderRadius="4px"
mb={1}
>
{el.text}
</Box>
))}
</td>
<td>
{type2.length > 0 &&
type2[0].result.map((el, index) => (
<Box
key={index}
p={1}
border="1px solid #000"
borderRadius="4px"
mb={1}
>
{el.text}
</Box>
))}
</td>
<td>
{type3.length > 0 &&
type3[0].result.map((el, index) => (
<Box
key={index}
p={1}
border="1px solid #000"
borderRadius="4px"
mb={1}
>
{el.text}
</Box>
))}
</td>
</tr>
</tbody>
</table>
)}
</Box>
</Box>
</Portal>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 18f978c

Please sign in to comment.