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 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>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue