114 lines
4 KiB
TypeScript
114 lines
4 KiB
TypeScript
import { type NextPage } from "next";
|
|
import Head from "next/head";
|
|
|
|
import { api } from "~/utils/api";
|
|
import ReactPlayer from "react-player";
|
|
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { getTime } from "~/utils/getTime";
|
|
import { ShareModal } from "~/components/ShareModal";
|
|
|
|
const VideoList: NextPage = () => {
|
|
const router = useRouter();
|
|
const { videoId } = router.query as { videoId: string };
|
|
|
|
const { data: video, isLoading } = api.video.get.useQuery(
|
|
{ videoId },
|
|
{
|
|
enabled: router.isReady,
|
|
refetchOnWindowFocus: false,
|
|
}
|
|
);
|
|
|
|
if (!isLoading && !video?.success) {
|
|
return (
|
|
<div className="flex h-screen w-screen flex-col items-center justify-center">
|
|
<span className="max-w-[80%] text-center text-2xl font-medium">
|
|
This recording is currently unavailable
|
|
</span>
|
|
<span className="mt-3 max-w-[80%] text-center text-sm">
|
|
To create your own public recordings, create an account for free!
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Create T3 App</title>
|
|
<meta name="description" content="Generated by create-t3-app" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className="flex h-screen w-screen flex-col items-center justify-center">
|
|
<div className="flex min-h-[62px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
|
|
<span>Screenity</span>
|
|
<div>
|
|
<Link href="/videos">
|
|
<span className="mr-4 cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
|
|
Personal Library
|
|
</span>
|
|
</Link>
|
|
<ShareModal />
|
|
</div>
|
|
</div>
|
|
<div className="flex h-full w-full grow flex-col items-center justify-start overflow-auto bg-[#fbfbfb]">
|
|
<div className="flex aspect-video max-h-[627px] w-full justify-center bg-black 2xl:max-h-[1160px]">
|
|
{video?.video?.video_url && (
|
|
<ReactPlayer
|
|
width="100%"
|
|
height="100%"
|
|
controls={true}
|
|
url={video.video?.video_url}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="mb-10 mt-4 w-full max-w-[1800px] pl-[24px]">
|
|
<div>
|
|
{video?.video?.title ? (
|
|
<div className="mb-4 flex flex-col">
|
|
<span className="text-[18px] text-lg font-medium">
|
|
{video?.video?.title}
|
|
</span>
|
|
<span className="text-[18px] text-sm text-gray-800">
|
|
{getTime(video?.video?.createdAt)}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="mb-4 flex flex-col">
|
|
<div className="h-5 w-[300px] animate-pulse rounded bg-slate-200"></div>
|
|
<div className="mt-2 h-4 w-[50px] animate-pulse rounded bg-slate-200"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 flex flex-row items-center">
|
|
{!isLoading ? (
|
|
<>
|
|
<div className="h-10 w-10 overflow-hidden rounded-full">
|
|
<Image
|
|
width={40}
|
|
height={40}
|
|
src={video?.video?.user?.image ?? ""}
|
|
alt="profile photo"
|
|
/>
|
|
</div>
|
|
<span className="ml-3 font-medium">
|
|
{video?.video?.user?.name}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="h-10 w-10 animate-pulse overflow-hidden rounded-full bg-red-400 bg-slate-200"></div>
|
|
<div className="ml-3 h-4 w-[100px] animate-pulse rounded bg-slate-200 font-medium"></div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default VideoList;
|