Skip to content

Commit

Permalink
changes for video player
Browse files Browse the repository at this point in the history
  • Loading branch information
@kartikvirendrar
kartikvirendrar committed Aug 2, 2024
1 parent 4ebe9a0 commit f6709b9
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 53 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
Loading

0 comments on commit f6709b9

Please sign in to comment.