show real data on individual video page
This commit is contained in:
parent
621325b930
commit
ef8f40143f
2 changed files with 19 additions and 11 deletions
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue