rushilwiz/viewer
1
0
Fork 0
mirror of https://github.com/mit-regressions/viewer.git synced 2025-04-09 14:20:15 -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 (
<>
<WebVttPlayer
className="w-full h-full overflow-hidden position-absolute"
preload={false}
audio={audioUrl}
videoUrl={videoUrl}

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

@ -87,57 +87,64 @@ export default function WebVttPlayer(props: WebVttPlayerProps) {
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 className="flex w-full overflow-hidden">
<div className="w-1/2 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
// width="75%"
preload={preload}
ref={nativePlayerRef}
crossOrigin="anonymous"
controls={true}
autoPlay={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="w-1/2">
<div className="webvtt-player">
<div className="media h-1\/3">
<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>
</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">
toggle theme
</button>
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
{/* should hug upper-lefthand side */}
{/* text in the upper-lefthand corner with some padding */}
<div className="px-4 py-32 pb-0 position-absolute">
<div className="titles">
<h1 className="text-1xl font-extrabold tracking-tight text-black dark:text-white sm:text-[3rem] top-4 left-4 absolute">
documentary metadata viewer
</h1>
{/* 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>
<Player />
<div className="flex flex-col items-center gap-2">
{/* <div className="flex flex-col items-center gap-2">
<AuthShowcase />
</div>
</div> */}
</div>
</main>
</>