basic player functionality usePlayer hook

Author: ApayRus

Diff for: components/VideoArticle.jsx

@@ -6,6 +6,7 @@ import Thumbnails from './video/Thumbnails'
 import ShowingModeSwitcher from './DisplayModeSwitcher'
 import Phrases from './video/Phrases'
 import { parseSubs } from 'frazy-parser'
+import { useRef, useEffect } from 'react'
 import useCaptions from './useCaptions'
 import usePlayer from './usePlayer'
 
@@ -31,6 +32,11 @@ const VideoInfo = props => {
 	} = useCaptions(captionTracksYoutube)
 
 	const mediaRef = useRef(null)
+	const { onTimeUpdate, currentPhraseNum } = usePlayer({
+		media: mediaRef.current,
+		waveformContainer: waveformRef.current,
+		phrases: mainPhrases
+	})
 
 	const titleBlock = (
 		<div style={styles.block}>
@@ -53,6 +59,7 @@ const VideoInfo = props => {
 			src={urlVideo}
 			poster={poster}
 			style={{ width: '100%' }}
+			onTimeUpdate={onTimeUpdate}
 		></video>
 	)
 

Diff for: components/usePlayer.js

@@ -0,0 +1,45 @@
+// import WaveSurfer from 'wavesurfer.js'
+// import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min'
+import { useEffect, useRef, useState } from 'react'
+
+export default function usePlayer({ media, phrases = [], waveformContainer }) {
+	const [playerState, setPlayerState] = useState({
+		isPlaying: false,
+		currentTime: 0,
+		duration: 0,
+		isReady: false,
+		playbackRate: 1,
+		currentPhraseNum: 0,
+		hideVideo: false,
+		playOnePhrase: false,
+		start: 0,
+		end: 1,
+		media,
+		phrases
+	})
+
+	const wafesurferRef = useRef(null)
+
+	const { currentPhraseNum } = playerState
+
+	const onTimeUpdate = event => {
+		//setPlayerState(oldState => ({...oldState, curre}))
+		const {
+			target: { currentTime }
+		} = event
+
+		const { end: currentPhaseEnd } = phrases[currentPhraseNum] || {}
+
+		if (
+			currentTime > currentPhaseEnd &&
+			currentPhraseNum < phrases.length - 1
+		) {
+			setPlayerState(prevState => ({
+				...prevState,
+				currentPhraseNum: currentPhraseNum + 1
+			}))
+		}
+	}
+
+	return { onTimeUpdate, currentPhraseNum, wavesurfer: wafesurferRef.current }
+}

Diff for: components/video/Phrases.jsx

@@ -28,8 +28,12 @@ const Phrases = props => {
 							<div className={styles.playButton}>
 								<IconButton
 									onClick={() => {
-										mediaRef.currentTime = start
-										mediaRef.paused ? mediaRef.play() : mediaRef.pause()
+										if (mediaRef.paused) {
+											mediaRef.currentTime = start
+											mediaRef.play()
+										} else {
+											mediaRef.pause()
+										}
 									}}
 									style={{ fontSize: '0.7rem', padding: 1, color: 'silver' }}
 								>