show real data on individual video page

This commit is contained in:
MarconLP 2023-04-11 22:01:02 +02:00
parent 621325b930
commit ef8f40143f
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
2 changed files with 19 additions and 11 deletions

View file

@ -10,17 +10,17 @@ 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, isFetching } = api.video.get.useQuery( const { data: video, isError } = api.video.get.useQuery(
{ videoId }, { videoId },
{ {
enabled: router.isReady, enabled: router.isReady,
} }
); );
console.log(video);
if (isFetching) { if (isError) {
return <span>loading...</span>; return <span>this video is not publicly available</span>;
} }
return ( return (
<> <>
<Head> <Head>
@ -30,7 +30,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</span> <span>Screenity | {video?.title ?? ""}</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]">
@ -43,12 +43,14 @@ const VideoList: NextPage = () => {
</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-center gap-12 overflow-auto bg-[#fbfbfb] px-4 py-16">
<ReactPlayer {video?.video_url && (
width="80%" <ReactPlayer
height="auto" width="80%"
controls={true} height="auto"
url="https://test-bucket-dev.s3.eu-central-003.backblazeb2.com/a04ee71b-8214-45e1-b883-7a21f2c142d9.webm" controls={true}
/> url={video.video_url}
/>
)}
</div> </div>
</main> </main>
</> </>

View file

@ -4,6 +4,7 @@ import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
import { PutObjectCommand } from "@aws-sdk/client-s3"; import { PutObjectCommand } from "@aws-sdk/client-s3";
import { env } from "~/env.mjs"; import { env } from "~/env.mjs";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { TRPCError } from "@trpc/server";
export const videoRouter = createTRPCRouter({ export const videoRouter = createTRPCRouter({
getAll: protectedProcedure.query(async ({ ctx }) => { getAll: protectedProcedure.query(async ({ ctx }) => {
@ -23,6 +24,11 @@ export const videoRouter = createTRPCRouter({
id: input.videoId, id: input.videoId,
}, },
}); });
if (video?.userId !== ctx.session.user.id) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}
return video; return video;
}), }),
getUploadUrl: protectedProcedure getUploadUrl: protectedProcedure