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}

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

@ -87,16 +87,17 @@ 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" /> <source src={props.videoUrl} type="video/mp4" />
<track <track
@ -112,6 +113,9 @@ export default function WebVttPlayer(props: WebVttPlayerProps) {
ref={metatrackRef} /> ref={metatrackRef} />
</video> </video>
</div> </div>
<div className="w-1/2">
<div className="webvtt-player">
<div className="media h-1\/3">
<div className="tracks"> <div className="tracks">
{trackLoaded ? ( {trackLoaded ? (
<> <>
@ -139,6 +143,9 @@ export default function WebVttPlayer(props: WebVttPlayerProps) {
</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>
</> </>