[Video] updates progression on time update

claroline · May 3, 2023 · f326a62 · f326a62
1 parent 87a67ea
commit f326a62
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 36 deletions.
diff --git a/src/integration/peertube/Resources/modules/components/player.jsx b/src/integration/peertube/Resources/modules/components/player.jsx
@@ -19,6 +19,10 @@ const PeerTubePlayer = (props) => {
 
         let currentInfo
         let updater = (playbackInfo) => {
+          if ('playing' === playbackInfo.playbackState) {
+            props.onTimeUpdate(playbackInfo.position, playbackInfo.duration)
+          }
+
           if (isEmpty(currentInfo) || currentInfo.playbackState !== playbackInfo.playbackState) {
             currentInfo = playbackInfo
 
@@ -52,7 +56,8 @@ const PeerTubePlayer = (props) => {
 PeerTubePlayer.propTypes = {
   url: T.string.isRequired,
   onPlay: T.func, // get the currentTime and totalDuration as parameters
-  onPause: T.func // get the currentTime and totalDuration as parameters
+  onPause: T.func, // get the currentTime and totalDuration as parameters
+  onTimeUpdate: T.func // get the currentTime and totalDuration as parameters
 }
 
 export {

diff --git a/src/integration/peertube/Resources/modules/resources/video/components/player.jsx b/src/integration/peertube/Resources/modules/resources/video/components/player.jsx
@@ -4,20 +4,35 @@ import {PropTypes as T} from 'prop-types'
 import {Video as VideoTypes} from '#/integration/peertube/prop-types'
 import {PeerTubePlayer} from '#/integration/peertube/components/player'
 
-const VideoPlayer = props =>
-  <PeerTubePlayer
-    url={props.video.embeddedUrl}
-    onPlay={(currentTime, duration) => {
-      if (props.currentUser) {
-        props.updateProgression(props.video.id, currentTime, duration)
-      }
-    }}
-    onPause={(currentTime, duration) => {
-      if (props.currentUser) {
-        props.updateProgression(props.video.id, currentTime, duration)
-      }
-    }}
-  />
+const VideoPlayer = props => {
+  let lastSaved = 0
+
+  return (
+    <PeerTubePlayer
+      url={props.video.embeddedUrl}
+      onPlay={(currentTime, duration) => {
+        if (props.currentUser) {
+          props.updateProgression(props.video.id, currentTime, duration)
+        }
+      }}
+      onPause={(currentTime, duration) => {
+        if (props.currentUser) {
+          props.updateProgression(props.video.id, currentTime, duration)
+        }
+      }}
+      onTimeUpdate={(currentTime, duration) => {
+        if (props.currentUser) {
+          const interval = Math.round((duration / 100) * 5)
+          const roundedTime = Math.round(currentTime)
+          if (roundedTime > lastSaved && 0 === roundedTime % interval) {
+            props.updateProgression(props.video.id, currentTime, duration)
+            lastSaved = roundedTime
+          }
+        }
+      }}
+    />
+  )
+}
 
 VideoPlayer.propTypes = {
   video: T.shape(

diff --git a/src/plugin/video-player/Resources/modules/files/video/components/player.jsx b/src/plugin/video-player/Resources/modules/files/video/components/player.jsx
@@ -5,27 +5,44 @@ import {File as FileTypes} from '#/main/core/files/prop-types'
 
 // The wrapping div is required because it will throw a JS on unmount as the parent is a Fragment.
 // Search for "Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node" for mor information.
-const VideoPlayer = props =>
-  <div className="video-container">
-    <video
-      height="auto"
-      className="video-js vjs-big-play-centered vjs-default-skin vjs-16-9 vjs-waiting"
-      controls={true}
-      data-download={false}
-      onPlay={(e) => {
-        if (props.currentUser) {
-          props.updateProgression(props.file.id, e.target.currentTime, e.target.duration)
-        }
-      }}
-      onPause={(e) => {
-        if (props.currentUser) {
-          props.updateProgression(props.file.id, e.target.currentTime, e.target.duration)
-        }
-      }}
-    >
-      <source src={props.file.url} type={props.mimeType} />
-    </video>
-  </div>
+const VideoPlayer = props => {
+  let lastSaved = 0
+
+  return (
+    <div className="video-container">
+      <video
+        height="auto"
+        className="video-js vjs-big-play-centered vjs-default-skin vjs-16-9 vjs-waiting"
+        controls={true}
+        data-download={false}
+        onPlay={(e) => {
+          if (props.currentUser) {
+            props.updateProgression(props.file.id, e.target.currentTime, e.target.duration)
+          }
+        }}
+        onPause={(e) => {
+          if (props.currentUser) {
+            props.updateProgression(props.file.id, e.target.currentTime, e.target.duration)
+          }
+        }}
+        onTimeUpdate={(e) => {
+          if (props.currentUser) {
+            const interval = Math.round((e.target.duration / 100) * 5)
+            const currentTime = Math.round(e.target.currentTime)
+            if (currentTime > lastSaved && 0 === currentTime % interval) {
+              props.updateProgression(props.file.id, e.target.currentTime, e.target.duration)
+              lastSaved = currentTime
+            }
+          }
+        }}
+      >
+        <source src={props.file.url} type={props.mimeType} />
+      </video>
+    </div>
+  )
+}
+
+
 
 VideoPlayer.propTypes = {
   mimeType: T.string.isRequired,