frontend support record playback history

web/src/component/AudioPlayer.js

@@ -21,6 +21,7 @@ function AudioPlayer(props) {
   const [isPreparing, setIsPreparing] = useState(false);
   const [timerCount, setTimerCount] = useState(0);
   const [timerID, setTimerID] = useState(null);
+  const [beginPlayTime, setBeginPlayTime] = useState(null);
 
   // init mediaSession API
   useEffect(() => {
@@ -41,6 +42,8 @@ function AudioPlayer(props) {
       setPlayingURL("");
       return;
     }
+    // have playingFile, record begin time
+    setBeginPlayTime(new Date())
     if (raw) {
       console.log("Play raw file");
       setPlayingURL("/api/v1/get_file_direct?id=" + props.playingFile.id);
@@ -191,9 +194,30 @@ function AudioPlayer(props) {
         id="dom-player"
         controls
         autoPlay
-        loop={loop}
         className="audio-player"
         src={playingURL}
+        onEnded={async () => {
+          const player = document.getElementById('dom-player')
+          if (loop) {
+            player.play()
+          }
+          const endPlayTime = new Date()
+          const duration = parseInt((endPlayTime - beginPlayTime) / 1000)
+          setBeginPlayTime(endPlayTime)
+          await fetch('/api/v1/record_playback', {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              playback: {
+                file_id: props.playingFile.id,
+                method: 1,
+                duration: parseInt(duration),
+              },
+            })
+          })
+        }}
       ></audio>
 
       <FfmpegConfig