admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

improve video player ui

Browse source
This commit is contained in:
MarconLP 2023-04-12 20:19:26 +02:00
parent 4b7969496f
commit 082148e0c0
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
1 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/pages/share/[videoId].tsx
View file

@ -10,7 +10,7 @@ const VideoList: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { videoId } = router.query as { videoId: string }; const { videoId } = router.query as { videoId: string };
const { data: video } = api.video.get.useQuery( const { data: video, isLoading } = api.video.get.useQuery(
{ videoId }, { videoId },
{ {
enabled: router.isReady, enabled: router.isReady,
@ -18,7 +18,7 @@ const VideoList: NextPage = () => {
} }
); );
if (!video?.success) { if (!isLoading && !video?.success) {
return ( return (
<div className="flex h-screen w-screen flex-col items-center justify-center"> <div className="flex h-screen w-screen flex-col items-center justify-center">
<span className="max-w-[80%] text-center text-2xl font-medium"> <span className="max-w-[80%] text-center text-2xl font-medium">
@ -40,7 +40,7 @@ const VideoList: NextPage = () => {
</Head> </Head>
<main className="flex h-screen w-screen flex-col items-center justify-center"> <main className="flex h-screen w-screen flex-col items-center justify-center">
<div className="flex min-h-[80px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6"> <div className="flex min-h-[80px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
<span>Screenity | {video?.video?.title ?? ""}</span> <span>Screenity</span>
<div> <div>
<Link href="/videos"> <Link href="/videos">
<span className="mr-4 cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"> <span className="mr-4 cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
@ -52,16 +52,21 @@ const VideoList: NextPage = () => {
</span> </span>
</div> </div>
</div> </div>
<div className="flex h-full w-full grow flex-col items-center justify-center gap-12 overflow-auto bg-[#fbfbfb] px-4 py-16"> <div className="flex h-full w-full grow flex-col items-center justify-start gap-12 overflow-auto bg-[#fbfbfb]">
<div className="flex aspect-video max-h-[1160px] w-full justify-center bg-black">
{/*{true ? (*/}
{/* <div className="aspect-video w-[80%] animate-pulse bg-slate-200 bg-white"></div>*/}
{/*) : null}*/}
{video?.video?.video_url && ( {video?.video?.video_url && (
<ReactPlayer <ReactPlayer
width="80%" width="100%"
height="auto" height="100%"
controls={true} controls={true}
url={video.video?.video_url} url={video.video?.video_url}
/> />
)} )}
</div> </div>
</div>
</main> </main>
</> </>
); );