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

View file

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