rushilwiz/viewer
1
0
Fork 0
mirror of https://github.com/mit-regressions/viewer.git synced 2025-04-20 11:00:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

switch to horizontal twitch-style layout

Browse Source
This commit is contained in:
dukeeagle 2022-12-31 18:18:36 -06:00
parent 46fd752f40
commit a1e875bf4a
3 changed files with 62 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
viewer/src/components/Player.tsx
View File

@ -15,6 +15,7 @@ export default function Player() {
return ( return (
<> <>
<WebVttPlayer <WebVttPlayer
className="w-full h-full overflow-hidden position-absolute"
preload={false} preload={false}
audio={audioUrl} audio={audioUrl}
videoUrl={videoUrl} videoUrl={videoUrl}

105
viewer/src/components/WebVttPlayer/WebVttPlayer.tsx
View File

@ -87,57 +87,64 @@ export default function WebVttPlayer(props: WebVttPlayerProps) {
return ( return (
<> <>
<div className="webvtt-player"> <div className="flex w-full overflow-hidden">
<div className="media"> <div className="w-1/2 player">
<div className="player"> {/* <VideoPlayer playerRef={video} playing={playing} videoUrl={props.videoUrl} transcriptUrl={props.transcript} /> */}
{/* <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 */}
{/* a vanilla video element with source and tracks. so much easier oh my god */} <video
<video // width="75%"
preload={preload} preload={preload}
ref={nativePlayerRef} ref={nativePlayerRef}
crossOrigin="anonymous" crossOrigin="anonymous"
controls={true} controls={true}
> autoPlay={true}
<source src={props.videoUrl} type="video/mp4" /> >
<track <source src={props.videoUrl} type="video/mp4" />
ref={trackRef} <track
kind="subtitles" ref={trackRef}
src={props.transcript} kind="subtitles"
srcLang="en" src={props.transcript}
default={true} srcLang="en"
/> default={true}
<track default />
kind="metadata" <track default
src={props.metadataUrl} kind="metadata"
ref={metatrackRef} /> src={props.metadataUrl}
</video> ref={metatrackRef} />
</div> </video>
<div className="tracks"> </div>
{trackLoaded ? ( <div className="w-1/2">
<> <div className="webvtt-player">
<Transcript <div className="media h-1\/3">
url={props.transcript} <div className="tracks">
seek={seek} {trackLoaded ? (
track={trackRef.current.track} <>
query={query} <Transcript
/> url={props.transcript}
</> seek={seek}
) : ( track={trackRef.current.track}
"Loading transcript..." query={query}
)} />
{metatrackLoaded && props.metadataUrl ? ( </>
<> ) : (
<Metadata "Loading transcript..."
url={props.metadataUrl} )}
seek={seek} {metatrackLoaded && props.metadataUrl ? (
track={metatrackRef.current.track} <>
/> <Metadata
</> url={props.metadataUrl}
) : ( seek={seek}
"\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata track={metatrackRef.current.track}
)} />
</>
) : (
"\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata
)}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );

11
viewer/src/pages/index.tsx
View File

@ -25,23 +25,22 @@ const Home: NextPage = () => {
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 py-2 px-4 absolute top-4 right-4"> <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 py-2 px-4 absolute top-4 right-4">
toggle theme toggle theme
</button> </button>
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 "> <div className="px-4 py-32 pb-0 position-absolute">
{/* should hug upper-lefthand side */}
{/* text in the upper-lefthand corner with some padding */}
<div className="titles"> <div className="titles">
<h1 className="text-1xl font-extrabold tracking-tight text-black dark:text-white sm:text-[3rem] top-4 left-4 absolute"> <h1 className="text-1xl font-extrabold tracking-tight text-black dark:text-white sm:text-[3rem] top-4 left-4 absolute">
documentary metadata viewer documentary metadata viewer
</h1> </h1>
{/* hug the left-hand side of the screen */} {/* hug the left-hand side of the screen */}
<h2 className=" tracking-tight text-gray-500 dark:text-white top-20 left-6 absolute"><i>current film</i>: MIT: REGRESSIONS intro</h2> <h2 className=" tracking-tight text-gray-500 dark:text-white top-20 left-6 absolute"><i>current film</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a> &nbsp; | &nbsp; <a href="https://github.com/mit-regressions/viewer/blob/igel-t3-initial/viewer/public/data/MIT%20Regressions%20intro%20metadata.vtt">metadata source</a></h2>
{/* <h2 className=" tracking-tight text-gray-500 dark:text-white top-24 left-6 absolute"><i>metadata file source (VTT)</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a></h2> */}
</div> </div>
<Player /> <Player />
<div className="flex flex-col items-center gap-2"> {/* <div className="flex flex-col items-center gap-2">
<AuthShowcase /> <AuthShowcase />
</div> </div> */}
</div> </div>
</main> </main>
</> </>