From f6709b996908a86c04b2ef85bd61fd9dcefd4af3 Mon Sep 17 00:00:00 2001 From: kartikvirendrar Date: Fri, 2 Aug 2024 11:31:29 +0530 Subject: [PATCH] changes for video player --- package-lock.json | 58 +++++++++++++++++++ package.json | 1 + .../Video/ParaphraseRightPanel.jsx | 13 ++++- .../Organization/Video/RightPanel.jsx | 13 ++++- .../Video/TranslationRightPanel.jsx | 13 ++++- .../Organization/Video/VideoLanding.jsx | 26 +++++---- .../Video/VoiceOverRightPanel.jsx | 13 ++++- .../Video/VoiceOverRightPanel1.jsx | 13 ++++- .../Video/components/Metronome.jsx | 2 +- .../Video/components/VideoName.jsx | 7 ++- .../Video/components/VideoPanel.jsx | 49 +++++++++------- 11 files changed, 155 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba7c5ebc..0baac435 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,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", @@ -12481,6 +12482,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -12678,6 +12684,11 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -15245,6 +15256,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-floater": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.6.tgz", @@ -15360,6 +15376,21 @@ "react": "^16 || ^17 || ^18" } }, + "node_modules/react-player": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", + "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-proptype-conditional-require": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz", @@ -27918,6 +27949,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -28084,6 +28120,11 @@ "fs-monkey": "^1.0.3" } }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -29757,6 +29798,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "react-floater": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.6.tgz", @@ -29842,6 +29888,18 @@ "prop-types": "^15" } }, + "react-player": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", + "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==", + "requires": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + } + }, "react-proptype-conditional-require": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz", diff --git a/package.json b/package.json index ba6bbcaf..5c55a015 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/containers/Organization/Video/ParaphraseRightPanel.jsx b/src/containers/Organization/Video/ParaphraseRightPanel.jsx index a7518299..c2db06cc 100644 --- a/src/containers/Organization/Video/ParaphraseRightPanel.jsx +++ b/src/containers/Organization/Video/ParaphraseRightPanel.jsx @@ -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; + } } } }} diff --git a/src/containers/Organization/Video/RightPanel.jsx b/src/containers/Organization/Video/RightPanel.jsx index 84ab84cc..d7529a8c 100644 --- a/src/containers/Organization/Video/RightPanel.jsx +++ b/src/containers/Organization/Video/RightPanel.jsx @@ -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; + } } } }} diff --git a/src/containers/Organization/Video/TranslationRightPanel.jsx b/src/containers/Organization/Video/TranslationRightPanel.jsx index 8d480c4d..641a029d 100644 --- a/src/containers/Organization/Video/TranslationRightPanel.jsx +++ b/src/containers/Organization/Video/TranslationRightPanel.jsx @@ -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; + } } } }} diff --git a/src/containers/Organization/Video/VideoLanding.jsx b/src/containers/Organization/Video/VideoLanding.jsx index 4e7c57de..d5b4ed0b 100644 --- a/src/containers/Organization/Video/VideoLanding.jsx +++ b/src/containers/Organization/Video/VideoLanding.jsx @@ -241,16 +241,16 @@ const VideoLanding = () => { }; const renderLoader = () => { - if (videoDetails.length <= 0) { - return ( - - - - Please wait while your request is being processed - - - ); - } + // if (videoDetails.length <= 0) { + // return ( + // + // + // + // Please wait while your request is being processed + // + // + // ); + // } }; useEffect(() => { @@ -291,6 +291,8 @@ const VideoLanding = () => { {currentSubs && showSubtitles && ( @@ -382,8 +384,8 @@ const VideoLanding = () => { )} {fullscreen &&
- {player.play()}}/> - {player.pause()}}/> + {if(player) typeof player.pauseVideo === 'function' ? player.playVideo() : player.play()}}/> + {if(player) typeof player.pauseVideo === 'function' ? player.pauseVideo() : player.pause()}}/>
}