Skip to content

Commit

Permalink
Merge pull request #775 from AI4Bharat/reports4
Browse files Browse the repository at this point in the history 
changes for video player
  • Loading branch information
@aparna-aa
aparna-aa authored Aug 2, 2024
2 parents d4e1e84 + cfbbefb commit 40b98a3
Show file tree
Hide file tree
Showing 11 changed files with 156 additions and 42 deletions.
58 changes: 58 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-material-ui-carousel": "^3.4.2",
"react-mui-dropzone": "^4.0.7",
"react-paginate": "^8.1.4",
"react-player": "^2.16.0",
"react-redux": "^8.0.2",
"react-resizable-panels": "^2.0.19",
"react-router-dom": "^6.4.0",
Expand Down
13 changes: 10 additions & 3 deletions src/containers/Organization/Video/ParaphraseRightPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -737,9 +737,16 @@ const ParaphraseRightPanel = ({ currentIndex, currentSubs,setCurrentIndex, showT
style={{alignItems:"center", padding: 0, width:"100%"}}
onClick={() => {
if (player) {
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
if( typeof player.pauseVideo === 'function' ){
player.pauseVideo();
if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
player.seekTo(item.startTime + 0.001);
}
}else{
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
}
}
}
}}
Expand Down
13 changes: 10 additions & 3 deletions src/containers/Organization/Video/RightPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -710,9 +710,16 @@ const RightPanel = ({ currentIndex, currentSubs,setCurrentIndex, showTimeline, s
aria-describedby={"suggestionList"}
onClick={() => {
if (player) {
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
if( typeof player.pauseVideo === 'function' ){
player.pauseVideo();
if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
player.seekTo(item.startTime + 0.001);
}
}else{
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
}
}
}
}}
Expand Down
13 changes: 10 additions & 3 deletions src/containers/Organization/Video/TranslationRightPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,9 +734,16 @@ const TranslationRightPanel = ({ currentIndex, currentSubs,setCurrentIndex, show
style={{alignItems:"center", padding: 0, width:"100%"}}
onClick={() => {
if (player) {
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
if( typeof player.pauseVideo === 'function' ){
player.pauseVideo();
if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
player.seekTo(item.startTime + 0.001);
}
}else{
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
}
}
}
}}
Expand Down
26 changes: 14 additions & 12 deletions src/containers/Organization/Video/VideoLanding.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,16 +241,16 @@ const VideoLanding = () => {
};

const renderLoader = () => {
if (videoDetails.length <= 0) {
return (
<Backdrop className={classes.backDrop} open={true}>
<CircularProgress color="inherit" size="50px" />
<Typography sx={{ mt: 3 }}>
Please wait while your request is being processed
</Typography>
</Backdrop>
);
}
// if (videoDetails.length <= 0) {
// return (
// <Backdrop className={classes.backDrop} open={true}>
// <CircularProgress color="inherit" size="50px" />
// <Typography sx={{ mt: 3 }}>
// Please wait while your request is being processed
// </Typography>
// </Backdrop>
// );
// }
};

useEffect(() => {
Expand Down Expand Up @@ -291,6 +291,8 @@ const VideoLanding = () => {
<VideoPanel
setCurrentTime={setCurrentTime}
setPlaying={setPlaying}
currentTime={currentTime}
playing={playing}
/>

{currentSubs && showSubtitles && (
Expand Down Expand Up @@ -382,8 +384,8 @@ const VideoLanding = () => {
)}
{fullscreen &&
<div style={{display:"flex", justifyContent:"center", alignItems:"center", marginTop:"2%"}}>
<PlayArrow color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {player.play()}}/>
<Pause color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {player.pause()}}/>
<PlayArrow color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {if(player) typeof player.pauseVideo === 'function' ? player.playVideo() : player.play()}}/>
<Pause color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {if(player) typeof player.pauseVideo === 'function' ? player.pauseVideo() : player.pause()}}/>
</div>}
<Box>
<Button
Expand Down
13 changes: 10 additions & 3 deletions src/containers/Organization/Video/VoiceOverRightPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,9 +604,16 @@ const VoiceOverRightPanel = ({ setCurrentIndex }) => {
}}
onClick={() => {
if (player) {
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
if( typeof player.pauseVideo === 'function' ){
player.pauseVideo();
if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
player.seekTo(item.startTime + 0.001);
}
}else{
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
}
}
}
}}
Expand Down
13 changes: 10 additions & 3 deletions src/containers/Organization/Video/VoiceOverRightPanel1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -806,9 +806,16 @@ const VoiceOverRightPanel1 = ({ currentIndex, setCurrentIndex, showTimeline, seg
style={{ alignItems: "center", padding: 0, width: "100%" }}
onClick={() => {
if (player) {
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
if( typeof player.pauseVideo === 'function' ){
player.pauseVideo();
if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
player.seekTo(item.startTime + 0.001);
}
}else{
player.pause();
if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
player.currentTime = item.startTime + 0.001;
}
}
}
}}
Expand Down
2 changes: 1 addition & 1 deletion src/containers/Organization/Video/components/Metronome.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default React.memo(
(event) => {
if (taskDetails.task_type.includes("VOICEOVER")){return}
if (isDroging) {
if (playing) player.pause();
if (playing) typeof player.pauseVideo === 'function' ? player.pauseVideo() : player.pause();
setDrogEndTime(getEventTime(event));
}
},
Expand Down
7 changes: 4 additions & 3 deletions src/containers/Organization/Video/components/VideoName.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { memo, useState } from "react";
import React, { memo, useEffect, useState } from "react";
import { useSelector } from "react-redux";

//Styles
Expand Down Expand Up @@ -29,19 +29,20 @@ const VideoName = ({
(state) => state.commonReducer.fullscreenVideo
);
const videoDetails = useSelector((state) => state.getVideoDetails.data);
const player = useSelector((state) => state.commonReducer.player);

return (
<Box
className={classes.videoNameBox}
style={fullscreenVideo ? { width: "60%", margin: "auto" } : { border:"solid", borderColor: "#F5F5F5", borderWidth: "1px"}}
>
<Tooltip title={videoDetails?.video?.name} placement="bottom">
<Tooltip title={videoDetails?.video?.name ? videoDetails?.video?.name : player?.playerInfo?.videoData?.title && player?.playerInfo?.videoData?.title} placement="bottom">
<Typography
variant="h6"
className={classes.videoName}
style={fullscreenVideo ? { color: "white" } : {}}
>
{videoDetails?.video?.name}
{videoDetails?.video?.name ? videoDetails?.video?.name : player?.playerInfo?.videoData?.title && player?.playerInfo?.videoData?.title}
</Typography>
</Tooltip>

Expand Down
39 changes: 28 additions & 11 deletions src/containers/Organization/Video/components/VideoPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,46 @@ import React, {
} from "react";
import { useDispatch, useSelector } from "react-redux";
import { isPlaying } from "utils/subtitleUtils";

import ReactPlayerYT from "react-player/youtube";
import ReactPlayer from "react-player";
//Styles
import { VideoLandingStyle } from "styles";

//APIs
import { setPlayer } from "redux/actions";

const VideoPanel = memo(
({ setCurrentTime, setPlaying }) => {
({ setCurrentTime, setPlaying, currentTime, playing }) => {
const classes = VideoLandingStyle();
const dispatch = useDispatch();
const $video = createRef();

const [poster, setPoster] = useState("play.png");

const videoDetails = useSelector((state) => state.getVideoDetails.data);
const fullscreenVideo = useSelector(
const videoDetails = useSelector((state) => state.getVideoDetails.data);
const taskData = useSelector((state) => state.getTaskDetails.data);
const fullscreenVideo = useSelector(
(state) => state.commonReducer.fullscreenVideo
);
const player = useSelector((state) => state.commonReducer.player);

useEffect(() => {
dispatch(setPlayer($video.current));
// dispatch(setPlayer($video.current.getInternalPlayer()));
(function loop() {
window.requestAnimationFrame(() => {
if ($video.current) {
setPlaying(isPlaying($video.current));
setCurrentTime($video.current.currentTime || 0);
if (player) {
if (typeof player?.getPlayerState === "function"){
setPlaying(player?.getPlayerState() === 1 ? true : false);
}else{
setPlaying(isPlaying(player));
}
setCurrentTime(typeof player?.getCurrentTime === 'function' ? player?.getCurrentTime() : player.currentTime || 0);
}
loop();
});
})();
// eslint-disable-next-line
}, [setPlayer, setCurrentTime, setPlaying, $video]);
}, [player, currentTime, playing]);

const onClick = useCallback(() => {
if ($video.current) {
Expand All @@ -55,9 +62,17 @@ const VideoPanel = memo(

return (
<div className={classes.videoPlayerParent} style={{display: "flex", alignItems: "center", justifyContent: "center", height:"100%"}}>
<video
{ videoDetails.length === 0 && taskData?.video_url?.includes("youtube") ?
<ReactPlayerYT
onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
ref={$video}
url={taskData.video_url.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/")}
controls={true}
/>
:
<ReactPlayer
// onClick={onClick}
src={
url={
videoDetails?.video?.audio_only
? videoDetails?.direct_audio_url
: videoDetails?.direct_video_url
Expand All @@ -74,7 +89,9 @@ const VideoPanel = memo(
className={classes.videoPlayer}
controls={true}
controlsList="nodownload"
onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
/>
}
</div>
);
},
Expand Down

0 comments on commit 40b98a3

Please sign in to comment.