mirror of
https://github.com/mit-regressions/viewer.git
synced 2025-04-19 02:20:17 -04:00
refactor webvttfunctional
This commit is contained in:
dukeeagle
parent
1ce655be52
commit
4709d32be0
|
|
@ -1,5 +1,5 @@
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import WebVttPlayerFunctional from "./WebVttPlayer/WebVttPlayerFunctional";
|
import WebVttPlayer from "./WebVttPlayer/WebVttPlayer";
|
||||||
|
|
||||||
// functional component PlayerReact that uses ReactPlayer
|
// functional component PlayerReact that uses ReactPlayer
|
||||||
// TODO: better parameterize video source and VTT source with props (general spec for 3rd party use!). must define spec.
|
// TODO: better parameterize video source and VTT source with props (general spec for 3rd party use!). must define spec.
|
||||||
|
|
@ -17,7 +17,7 @@ export default function Player() {
|
||||||
<div id="control-panel" className="flex flex-row">
|
<div id="control-panel" className="flex flex-row">
|
||||||
<button id="show-metadata" className="bg-gray-200 hover:bg-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-4">Show Metadata</button>
|
<button id="show-metadata" className="bg-gray-200 hover:bg-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-4">Show Metadata</button>
|
||||||
</div>
|
</div>
|
||||||
<WebVttPlayerFunctional
|
<WebVttPlayer
|
||||||
preload={false}
|
preload={false}
|
||||||
audio={audioUrl}
|
audio={audioUrl}
|
||||||
videoUrl={videoUrl}
|
videoUrl={videoUrl}
|
||||||
|
|
|
||||||
|
|
@ -1,183 +1,144 @@
|
||||||
import React, { Component } from 'react'
|
import { useLayoutEffect, useState, useEffect, useRef } from 'react';
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
// const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
|
||||||
import Transcript from './Transcript'
|
import Transcript from './Transcript'
|
||||||
import Metadata from './Metadata'
|
import Metadata from './Metadata'
|
||||||
import Search from './Search'
|
import Search from './Search'
|
||||||
import './WebVttPlayer.module.css'
|
const VideoPlayer = dynamic(() => import("../VideoPlayer"), { ssr: false });
|
||||||
|
|
||||||
import dynamic from "next/dynamic";
|
type WebVttPlayerProps = {
|
||||||
const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
|
audio: string,
|
||||||
|
videoUrl: string, // TODO: make naming scheme consistent lol
|
||||||
// type for props
|
|
||||||
type WebVttProps = {
|
|
||||||
video: string,
|
|
||||||
transcript: string,
|
transcript: string,
|
||||||
metadata: string,
|
metadataUrl: string,
|
||||||
preload: boolean
|
preload: boolean,
|
||||||
}
|
};
|
||||||
|
|
||||||
|
interface ReactPlayerRef {
|
||||||
interface VideoRef {
|
|
||||||
seeking: boolean;
|
seeking: boolean;
|
||||||
played: number;
|
played: number;
|
||||||
duration: number;
|
duration: number;
|
||||||
seekTo: (time: number) => void;
|
seekTo: (time: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
class WebVttPlayer extends Component<WebVttProps, { loaded: boolean, currentTime: number, query: string, seeking: boolean, played: Float64Array, playing: boolean }> {
|
interface NativePlayerRef {
|
||||||
metatrack: React.RefObject<unknown>
|
currentTime: number;
|
||||||
video: React.RefObject<unknown>
|
ended: boolean;
|
||||||
audio: React.RefObject<unknown>
|
loop: boolean;
|
||||||
track: React.RefObject<unknown>
|
muted: boolean;
|
||||||
|
play: () => void;
|
||||||
constructor(props: WebVttProps) {
|
|
||||||
super(props)
|
|
||||||
this.state = {
|
|
||||||
loaded: false,
|
|
||||||
currentTime: 0,
|
|
||||||
query: '',
|
|
||||||
seeking: false,
|
|
||||||
played: new Float64Array(0),
|
|
||||||
playing: false,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.track = React.createRef()
|
export default function WebVttPlayer(props: WebVttPlayerProps) {
|
||||||
this.metatrack = React.createRef()
|
const [trackLoaded, setTrackLoaded] = useState(false);
|
||||||
this.audio = React.createRef()
|
const [metatrackLoaded, setMetatrackLoaded] = useState(false);
|
||||||
this.video = React.createRef();
|
const [query, setQuery] = useState('');
|
||||||
// const playerRef=useRef();
|
|
||||||
|
|
||||||
this.onLoaded = this.onLoaded.bind(this)
|
// TODO: determine if these should be set
|
||||||
this.seek = this.seek.bind(this)
|
const [currentTime, setCurrentTime] = useState(0);
|
||||||
this.checkIfLoaded = this.checkIfLoaded.bind(this)
|
const [seeking, setSeeking] = useState(false);
|
||||||
this.updateQuery = this.updateQuery.bind(this)
|
const [played, setPlayed] = useState(new Float64Array(0));
|
||||||
|
const [playing, setPlaying] = useState(false);
|
||||||
|
|
||||||
|
const trackRef = useRef(null);
|
||||||
|
const metatrackRef = useRef(null);
|
||||||
|
|
||||||
|
const reactPlayerRef = useRef<ReactPlayerRef>(null);
|
||||||
|
const nativePlayerRef = useRef<NativePlayerRef>(null);
|
||||||
|
|
||||||
|
const preload = props.preload ? "true" : "false"
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
|
||||||
|
// Get a reference to the track and metatrack elements
|
||||||
|
const track = trackRef.current;
|
||||||
|
const metatrack = metatrackRef.current;
|
||||||
|
|
||||||
|
// Check if the tracks are fully loaded
|
||||||
|
if (track && track.track && track.track.cues && track.track.cues.length > 0) {
|
||||||
|
setTrackLoaded(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
if (metatrack && metatrack.track && metatrack.track.cues && metatrack.track.cues.length > 0) {
|
||||||
this.checkIfLoaded()
|
setMetatrackLoaded(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePause = () => {
|
}, [trackLoaded, metatrackLoaded]);
|
||||||
console.log('onPause')
|
|
||||||
this.setState({ playing: false })
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let track = null
|
// if we figure out how to get access to Track refs with react-player (even in YouTube videos! That would be awesome), then we can start using this
|
||||||
let metatrack = null
|
function reactPlayerSeek(secs: string) {
|
||||||
if (this.state.loaded) {
|
|
||||||
track = this.track.current.track
|
if (reactPlayerRef.current) {
|
||||||
metatrack = this.metatrack.current.track
|
reactPlayerRef.current.seekTo(parseFloat(secs))
|
||||||
console.log("loaded video.current : ", this.video.current);
|
}
|
||||||
|
setPlaying(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function seek(secs: number) {
|
||||||
|
if (nativePlayerRef.current) {
|
||||||
|
|
||||||
|
nativePlayerRef.current.currentTime = secs;
|
||||||
|
nativePlayerRef.current.play();
|
||||||
|
}
|
||||||
|
setPlaying(true);
|
||||||
}
|
}
|
||||||
const preload = this.props.preload ? "true" : "false"
|
|
||||||
const metadata = this.props.metadata
|
|
||||||
? <Metadata
|
|
||||||
url={this.props.metadata}
|
|
||||||
seek={this.seek}
|
|
||||||
track={metatrack} />
|
|
||||||
: ""
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<div className="webvtt-player">
|
<div className="webvtt-player">
|
||||||
<div className="media">
|
<div className="media">
|
||||||
<div className="player">
|
<div className="player">
|
||||||
|
{/* <VideoPlayer playerRef={video} playing={playing} videoUrl={props.videoUrl} transcriptUrl={props.transcript} /> */}
|
||||||
<ReactPlayer
|
{/* a vanilla video element with source and tracks. so much easier oh my god */}
|
||||||
// a ref that works in our class component
|
<video
|
||||||
ref={this.video}
|
|
||||||
controls={true}
|
|
||||||
onPause={this.handlePause}
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
className="react-player"
|
|
||||||
url="https://youtu.be/TGKk3iwoI9I"
|
|
||||||
onSeek={e => console.log('onSeek', e)}
|
|
||||||
onProgress={this.handleProgress}
|
|
||||||
/>
|
|
||||||
<audio
|
|
||||||
controls
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
onLoad={this.onLoaded}
|
|
||||||
preload={preload}
|
preload={preload}
|
||||||
ref={this.audio}>
|
ref={nativePlayerRef}
|
||||||
<source src={this.props.audio} />
|
crossOrigin="anonymous"
|
||||||
<track default
|
controls={true}
|
||||||
|
>
|
||||||
|
<source src={props.videoUrl} type="video/mp4" />
|
||||||
|
<track
|
||||||
|
ref={trackRef}
|
||||||
kind="subtitles"
|
kind="subtitles"
|
||||||
src={this.props.transcript}
|
src={props.transcript}
|
||||||
ref={this.track} />
|
srcLang="en"
|
||||||
|
default={true}
|
||||||
|
/>
|
||||||
<track default
|
<track default
|
||||||
kind="metadata"
|
kind="metadata"
|
||||||
src={this.props.metadata}
|
src={props.metadataUrl}
|
||||||
ref={this.metatrack} />
|
ref={metatrackRef} />
|
||||||
</audio>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracks">
|
<div className="tracks">
|
||||||
|
{trackLoaded ? (
|
||||||
|
<>
|
||||||
<Transcript
|
<Transcript
|
||||||
url={this.props.transcript}
|
url={props.transcript}
|
||||||
seek={this.seek}
|
seek={seek}
|
||||||
track={track}
|
track={trackRef.current.track}
|
||||||
query={this.state.query} />
|
query={query}
|
||||||
{metadata}
|
/>
|
||||||
</div>
|
</>
|
||||||
<Search query={this.state.query} updateQuery={this.updateQuery} />
|
) : (
|
||||||
|
"Loading transcript..."
|
||||||
|
)}
|
||||||
|
{metatrackLoaded && props.metadataUrl ? (
|
||||||
|
<>
|
||||||
|
<Metadata
|
||||||
|
url={props.metadataUrl}
|
||||||
|
seek={seek}
|
||||||
|
track={metatrackRef.current.track}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
onLoaded() {
|
|
||||||
this.setState({ loaded: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
checkIfLoaded(tries = 0) {
|
|
||||||
tries += 1
|
|
||||||
const e = this.track.current
|
|
||||||
if (e && e.track && e.track.cues && e.track.cues.length > 0) {
|
|
||||||
this.onLoaded()
|
|
||||||
} else if (!this.state.loaded) {
|
|
||||||
const wait = 25 * Math.pow(tries, 2)
|
|
||||||
setTimeout(this.checkIfLoaded, wait, tries)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// handleSeekMouseDown = e => {
|
|
||||||
// this.setState({ seeking: true })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// handleSeekChange = e => {
|
|
||||||
// this.setState({ played: parseFloat(e.target.value) })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// handleSeekMouseUp = e => {
|
|
||||||
// this.setState({ seeking: false })
|
|
||||||
// this.player.seekTo(parseFloat(e.target.value))
|
|
||||||
// }
|
|
||||||
|
|
||||||
handleProgress = state => {
|
|
||||||
console.log('onProgress', state)
|
|
||||||
// We only want to update time slider if we are not currently seeking
|
|
||||||
if (!this.state.seeking) {
|
|
||||||
this.setState(state)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ORIGINAL
|
|
||||||
seek(secs: number) {
|
|
||||||
// scrub audio
|
|
||||||
this.audio.current.currentTime = secs
|
|
||||||
this.audio.current.play()
|
|
||||||
|
|
||||||
// scrub video
|
|
||||||
this.setState({ seeking: true })
|
|
||||||
console.log("this.video", this.video);
|
|
||||||
this.video.current?.seekTo(parseFloat(secs)) // TODO: should probs refactor ref to this.player
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
updateQuery(query: string) {
|
|
||||||
this.setState({ query: query })
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WebVttPlayer
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
import { useLayoutEffect, useState, useEffect, useRef } from 'react';
|
|
||||||
import dynamic from "next/dynamic";
|
|
||||||
// const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
|
|
||||||
import Transcript from './Transcript'
|
|
||||||
import Metadata from './Metadata'
|
|
||||||
import Search from './Search'
|
|
||||||
const VideoPlayer = dynamic(() => import("../VideoPlayer"), { ssr: false });
|
|
||||||
|
|
||||||
type WebVttPlayerFunctionalProps = {
|
|
||||||
audio: string,
|
|
||||||
videoUrl: string, // TODO: make naming scheme consistent lol
|
|
||||||
transcript: string,
|
|
||||||
metadataUrl: string,
|
|
||||||
preload: boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
interface ReactPlayerRef {
|
|
||||||
seeking: boolean;
|
|
||||||
played: number;
|
|
||||||
duration: number;
|
|
||||||
seekTo: (time: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface NativePlayerRef {
|
|
||||||
currentTime: number;
|
|
||||||
ended: boolean;
|
|
||||||
loop: boolean;
|
|
||||||
muted: boolean;
|
|
||||||
play: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function WebVttPlayerFunctional(props: WebVttPlayerFunctionalProps) {
|
|
||||||
const [trackLoaded, setTrackLoaded] = useState(false);
|
|
||||||
const [metatrackLoaded, setMetatrackLoaded] = useState(false);
|
|
||||||
const [query, setQuery] = useState('');
|
|
||||||
|
|
||||||
// TODO: determine if these should be set
|
|
||||||
const [currentTime, setCurrentTime] = useState(0);
|
|
||||||
const [seeking, setSeeking] = useState(false);
|
|
||||||
const [played, setPlayed] = useState(new Float64Array(0));
|
|
||||||
const [playing, setPlaying] = useState(false);
|
|
||||||
|
|
||||||
const trackRef = useRef(null);
|
|
||||||
const metatrackRef = useRef(null);
|
|
||||||
|
|
||||||
const reactPlayerRef = useRef<ReactPlayerRef>(null);
|
|
||||||
const nativePlayerRef = useRef<NativePlayerRef>(null);
|
|
||||||
|
|
||||||
const preload = props.preload ? "true" : "false"
|
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
|
|
||||||
// Get a reference to the track and metatrack elements
|
|
||||||
const track = trackRef.current;
|
|
||||||
const metatrack = metatrackRef.current;
|
|
||||||
|
|
||||||
// Check if the tracks are fully loaded
|
|
||||||
if (track && track.track && track.track.cues && track.track.cues.length > 0) {
|
|
||||||
setTrackLoaded(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (metatrack && metatrack.track && metatrack.track.cues && metatrack.track.cues.length > 0) {
|
|
||||||
setMetatrackLoaded(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
}, [trackLoaded, metatrackLoaded]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// if we figure out how to get access to Track refs with react-player (even in YouTube videos! That would be awesome), then we can start using this
|
|
||||||
function reactPlayerSeek(secs: string) {
|
|
||||||
|
|
||||||
if (reactPlayerRef.current) {
|
|
||||||
reactPlayerRef.current.seekTo(parseFloat(secs))
|
|
||||||
}
|
|
||||||
setPlaying(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function seek(secs: number) {
|
|
||||||
if (nativePlayerRef.current) {
|
|
||||||
|
|
||||||
nativePlayerRef.current.currentTime = secs;
|
|
||||||
nativePlayerRef.current.play();
|
|
||||||
}
|
|
||||||
setPlaying(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="webvtt-player">
|
|
||||||
<div className="media">
|
|
||||||
<div className="player">
|
|
||||||
{/* <VideoPlayer playerRef={video} playing={playing} videoUrl={props.videoUrl} transcriptUrl={props.transcript} /> */}
|
|
||||||
{/* a vanilla video element with source and tracks. so much easier oh my god */}
|
|
||||||
<video
|
|
||||||
preload={preload}
|
|
||||||
ref={nativePlayerRef}
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
controls={true}
|
|
||||||
>
|
|
||||||
<source src={props.videoUrl} type="video/mp4" />
|
|
||||||
<track
|
|
||||||
ref={trackRef}
|
|
||||||
kind="subtitles"
|
|
||||||
src={props.transcript}
|
|
||||||
srcLang="en"
|
|
||||||
default={true}
|
|
||||||
/>
|
|
||||||
<track default
|
|
||||||
kind="metadata"
|
|
||||||
src={props.metadataUrl}
|
|
||||||
ref={metatrackRef} />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div className="tracks">
|
|
||||||
{trackLoaded ? (
|
|
||||||
<>
|
|
||||||
<Transcript
|
|
||||||
url={props.transcript}
|
|
||||||
seek={seek}
|
|
||||||
track={trackRef.current.track}
|
|
||||||
query={query}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
"Loading transcript..."
|
|
||||||
)}
|
|
||||||
{metatrackLoaded && props.metadataUrl ? (
|
|
||||||
<>
|
|
||||||
<Metadata
|
|
||||||
url={props.metadataUrl}
|
|
||||||
seek={seek}
|
|
||||||
track={metatrackRef.current.track}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
"\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user