load peaks from the server

Author: ApayRus

components/VideoArticle.jsx

@@ -1,15 +1,12 @@
 import { Container, Typography } from '@material-ui/core'
 import CaptionList from './CaptionList'
 import Keywords from './video/Keywords'
-import Video from './video/Video'
 import Thumbnails from './video/Thumbnails'
 import ShowingModeSwitcher from './DisplayModeSwitcher'
 import Phrases from './video/Phrases'
 import { useRef, createContext, useContext } from 'react'
 import useCaptions from './useCaptions'
-// import usePlayer from './usePlayer'
 import useWavesurfer from './useWavesurfer'
-import peaks from '../public/fake-content/peaks-bad-english'
 
 import EditCaptionTextarea from './EditCaptionTextarea'
 import { SnackbarContext } from './SnackbarProvider'
@@ -27,7 +24,8 @@ const VideoInfo = props => {
 		description,
 		image: poster,
 		setDisplayMode,
-		displayMode
+		displayMode,
+		videoId
 	} = props
 
 	const { setSnackbar } = useContext(SnackbarContext)
@@ -41,7 +39,7 @@ const VideoInfo = props => {
 		mediaElementRef: videoRef,
 		waveformContainerRef,
 		timelineContainerRef,
-		peaks
+		videoId
 	})
 
 	const captionContextValue = useCaptions({
@@ -69,23 +67,14 @@ const VideoInfo = props => {
 			ref={videoRef}
 			controls
 			src={urlVideo}
-			// src='http://localhost:3000/videoplayback.m4a'
-			// src='http://localhost:3000/nevzuk.mp4'
 			poster={poster}
 			style={{ width: '100%' }}
-			// onTimeUpdate={onTimeUpdate}
 		></video>
 	)
 
 	const audioBlock = (
 		<div style={styles.block}>
-			<audio
-				ref={audioRef}
-				controls
-				// src={`http://localhost:3000/procrastinator_mind.m4a`}
-				src={urlAudio}
-				style={{ width: '100%' }}
-			/>
+			<audio ref={audioRef} controls src={urlAudio} style={{ width: '100%' }} />
 		</div>
 	)
 

components/useWavesurfer.js

@@ -1,13 +1,12 @@
-// import WaveSurfer from 'wavesurfer.js'
-// import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min'
+import axios from 'axios'
 import { useEffect, useRef, useState } from 'react'
 import initWavesurfer from '../wavesurfer'
 
 export default function usePlayer({
 	mediaElementRef,
 	waveformContainerRef,
 	timelineContainerRef,
-	peaks
+	videoId
 }) {
 	const [playerState, setPlayerState] = useState({
 		isPlaying: false,
@@ -29,16 +28,25 @@ export default function usePlayer({
 			const wavesurfer = await initWavesurfer({
 				waveformContainer: waveformContainerRef.current,
 				timelineContainer: timelineContainerRef.current,
-				mediaElement: mediaElementRef.current,
-				peaks
+				mediaElement: mediaElementRef.current
 			})
 
-			wavesurferRef.current = wavesurfer
+			wavesurfer.on('region-click', (region, event) => {
+				event.stopPropagation()
+				region.play()
+			})
 
+			wavesurferRef.current = wavesurfer
 			setPlayerState(oldState => ({ ...oldState, isReady: true }))
-
 			mediaElementRef.current.controls = true
 
+			//set peaks loaded from the server
+			const {
+				data: { data: peaks }
+			} = await axios(`http://localhost:3001/waveform/?id=${videoId}`)
+			wavesurfer.backend.setPeaks(peaks, wavesurfer.getDuration())
+			wavesurfer.drawBuffer()
+
 			console.log('wavesurfer')
 			console.log(wavesurfer)
 		}

package-lock.json

@@ -11,6 +11,7 @@
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
         "@material-ui/lab": "^4.0.0-alpha.61",
+        "axios": "^0.27.2",
         "frazy-parser": "^2.9.1",
         "next": "^12.1.6",
         "react": "^18.1.0",

package.json

@@ -11,7 +11,8 @@ const VideoPage = props => {
 		urlVideo,
 		urlAudio,
 		captionTracks,
-		thumbnails
+		thumbnails,
+		videoId
 	} = props
 
 	const [displayMode, setDisplayMode] = useState('info') // | transcript
@@ -26,7 +27,8 @@ const VideoPage = props => {
 		thumbnails,
 		captionTracks,
 		displayMode,
-		setDisplayMode
+		setDisplayMode,
+		videoId
 	}
 
 	return (
@@ -40,6 +42,7 @@ export async function getServerSideProps({ query: { videoId } }) {
 	const info = await getVideoInfo(videoId)
 	return {
 		props: {
+			videoId,
 			...info
 		}
 	}