diff --git a/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx b/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx index 7c4968b4..410f461a 100644 --- a/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx +++ b/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx @@ -70,6 +70,7 @@ const SettingsButtonComponent = ({ pauseOnType, setPauseOnType, annotationId, + handleOpenPopover, }) => { const classes = AudioTranscriptionLandingStyle(); // const dispatch = useDispatch(); @@ -77,8 +78,14 @@ const SettingsButtonComponent = ({ 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 ( <>
setOpenPreviewDialog(true)} + onClick={handleClick} style={{ backgroundColor: "#2C2799", borderRadius: "50%", @@ -443,17 +450,7 @@ const SettingsButtonComponent = ({ - {openPreviewDialog && ( - setOpenPreviewDialog(false)} - subtitles={subtitles} - // taskType={taskData?.task_type} - // currentSubs={currentSubs} - // videoId={taskData?.video} - // targetLanguage={taskData?.target_language} - /> - )} + ); }; diff --git a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx index 1ae4279f..c020f1af 100644 --- a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx @@ -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"; @@ -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(); @@ -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); @@ -725,6 +816,7 @@ const AllAudioTranscriptionLandingPage = () => { waveSurfer={waveSurfer} setWaveSurfer={setWaveSurfer} annotationId={annotations[0]?.id} + handleOpenPopover={handleOpenPopover} /> @@ -736,6 +828,114 @@ const AllAudioTranscriptionLandingPage = () => { > {audioURL ? (waveSurfer ? : ) :
} + {popoverOpen && ( + + + + + Subtitles + + + {isFullscreen ? : } + + + + + + + {loading ? ( + + ) : ( + + + + {type1.length > 0 && ( + + )} + {type2.length > 0 && ( + + )} + {type3.length > 0 && ( + + )} + + + + + {/* Render different types */} + + + + + +
+ Annotation + + Review + + SuperCheck +
+ {type1.length > 0 && + type1[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type2.length > 0 && + type2[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type3.length > 0 && + type3[0].result.map((el, index) => ( + + {el.text} + + ))} +
+ )} + + + + )} ); }; diff --git a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx index 7b29a8d3..6cb3bea5 100644 --- a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx @@ -20,7 +20,7 @@ import { Grid, Button, Slider, Stack, CircularProgress -} from "@mui/material"; + ,Portal} from "@mui/material"; import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import Timeline from "./TimeLine"; @@ -49,6 +49,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 AudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -114,7 +117,95 @@ const AudioTranscriptionLandingPage = () => { const [waveSurfer, setWaveSurfer] = useState(true); const [autoSaveTrigger, setAutoSaveTrigger] = useState(false); 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); + } + }; // useEffect(() => { // let intervalId; @@ -1228,6 +1319,7 @@ useEffect(() => { waveSurfer={waveSurfer} setWaveSurfer={setWaveSurfer} annotationId={annotations[0]?.id} + handleOpenPopover={handleOpenPopover} /> @@ -1240,6 +1332,114 @@ useEffect(() => { > {audioURL ? (waveSurfer ? : ) :
} + {popoverOpen && ( + + + + + Subtitles + + + {isFullscreen ? : } + + + + + + + {loading ? ( + + ) : ( + + + + {type1.length > 0 && ( + + )} + {type2.length > 0 && ( + + )} + {type3.length > 0 && ( + + )} + + + + + {/* Render different types */} + + + + + +
+ Annotation + + Review + + SuperCheck +
+ {type1.length > 0 && + type1[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type2.length > 0 && + type2[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type3.length > 0 && + type3[0].result.map((el, index) => ( + + {el.text} + + ))} +
+ )} + + + + )} ); }; diff --git a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx index 67e88d55..924c4a91 100644 --- a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx @@ -20,7 +20,8 @@ import { Grid, Button, TextField, - Slider, Stack, CircularProgress + Slider, Stack, CircularProgress, + Portal } from "@mui/material"; import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; @@ -50,6 +51,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 ReviewAudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -78,6 +82,89 @@ const ReviewAudioTranscriptionLandingPage = () => { const [annotations, setAnnotations] = useState([]); const [stdTranscription, setStdTranscription] = useState(""); const [showStdTranscript, setShowStdTranscript] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + const dialogRef = useRef(null); + + const annotationData = useSelector((state) => state.getAnnotationsTask.data); + 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 + ); + }; + }, []); + 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 [stdTranscriptionSettings, setStdTranscriptionSettings] = useState({ enable: false, showAcoustic: false, @@ -96,7 +183,6 @@ const ReviewAudioTranscriptionLandingPage = () => { variant: "success", }); let labellingMode = localStorage.getItem("labellingMode"); - // const subs = useSelector((state) => state.commonReducer.subtitles); const result = useSelector((state) => state.commonReducer.subtitles); const AnnotationsTaskDetails = useSelector( @@ -1280,7 +1366,6 @@ useEffect(() => { setShowStdTranscript(!showStdTranscript); setShowNotes(false); }} - // style={{ marginBottom: "20px" }} > Standardised Transcription @@ -1451,6 +1536,7 @@ useEffect(() => { waveSurfer={waveSurfer} setWaveSurfer={setWaveSurfer} annotationId={annotations[0]?.id} + handleOpenPopover={handleOpenPopover} /> @@ -1463,6 +1549,113 @@ useEffect(() => { > {audioURL ? (waveSurfer ? : ) :
} + {popoverOpen && ( + + + + + Subtitles + + + {isFullscreen ? : } + + + + + + + {loading ? ( + + ) : ( + + + + {type1.length > 0 && ( + + )} + {type2.length > 0 && ( + + )} + {type3.length > 0 && ( + + )} + + + + + {/* Render different types */} + + + + + +
+ Annotation + + Review + + SuperCheck +
+ {type1.length > 0 && + type1[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type2.length > 0 && + type2[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type3.length > 0 && + type3[0].result.map((el, index) => ( + + {el.text} + + ))} +
+ )} + + + )} ); }; diff --git a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx index f9e5d0b2..80bac70b 100644 --- a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx @@ -20,7 +20,7 @@ import { Grid, Button, TextField, - Slider, Stack, CircularProgress + Slider, Stack, CircularProgress,Portal } from "@mui/material"; import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; @@ -50,6 +50,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 SuperCheckerAudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -116,7 +119,94 @@ const SuperCheckerAudioTranscriptionLandingPage = () => { const [waveSurfer, setWaveSurfer] = useState(false); const [autoSaveTrigger, setAutoSaveTrigger] = useState(false); 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); + } + }; // useEffect(() => { // let intervalId; @@ -1269,6 +1359,7 @@ useEffect(() => { setWaveSurfer={setWaveSurfer} stage={3} annotationId={annotations[0]?.id} + handleOpenPopover={handleOpenPopover} /> @@ -1281,6 +1372,114 @@ useEffect(() => { > {audioURL ? (waveSurfer ? : ) :
} + {popoverOpen && ( + + + + + Subtitles + + + {isFullscreen ? : } + + + + + + + {loading ? ( + + ) : ( + + + + {type1.length > 0 && ( + + )} + {type2.length > 0 && ( + + )} + {type3.length > 0 && ( + + )} + + + + + {/* Render different types */} + + + + + +
+ Annotation + + Review + + SuperCheck +
+ {type1.length > 0 && + type1[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type2.length > 0 && + type2[0].result.map((el, index) => ( + + {el.text} + + ))} + + {type3.length > 0 && + type3[0].result.map((el, index) => ( + + {el.text} + + ))} +
+ )} + + + + )} ); }; diff --git a/src/ui/pages/container/CL-Transcription/TranscriptionRightPanel.jsx b/src/ui/pages/container/CL-Transcription/TranscriptionRightPanel.jsx index 3ac03159..a2b8093d 100644 --- a/src/ui/pages/container/CL-Transcription/TranscriptionRightPanel.jsx +++ b/src/ui/pages/container/CL-Transcription/TranscriptionRightPanel.jsx @@ -87,6 +87,7 @@ const TranscriptionRightPanel = ({ waveSurfer, setWaveSurfer, annotationId, + handleOpenPopover }) => { const { taskId } = useParams(); @@ -666,6 +667,8 @@ const TranscriptionRightPanel = ({ pauseOnType={pauseOnType} setPauseOnType={setPauseOnType} annotationId={annotationId} + handleOpenPopover={handleOpenPopover} + /> {showAcousticText && (