import { type NextPage } from "next"; import Head from "next/head"; import { api } from "~/utils/api"; import Link from "next/link"; import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import Image from "next/image"; import { getTime } from "~/utils/getTime"; import ProfileMenu from "~/components/ProfileMenu"; import NewVideoMenu from "~/components/NewVideoMenu"; import VideoRecordModal from "~/components/VideoRecordModal"; import VideoUploadModal from "~/components/VideoUploadModal"; import { useAtom } from "jotai"; import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import Paywall from "~/components/Paywall"; import paywallAtom from "~/atoms/paywallAtom"; const VideoList: NextPage = () => { const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [, setUploadOpen] = useAtom(uploadVideoModalOpen); const [, setPaywallOpen] = useAtom(paywallAtom); const router = useRouter(); const { status, data: session } = useSession(); const { data: videos, isLoading } = api.video.getAll.useQuery(); if (status === "unauthenticated") { void router.replace("/sign-in"); } const openRecordModal = () => { setRecordOpen(true); }; const openUploadModal = () => { if (session?.user.stripeSubscriptionStatus === "active") { setUploadOpen(true); } else { setPaywallOpen(true); } }; return ( <> Library | Snapify
Snapify
{status === "authenticated" && (
)}
{videos && videos?.length <= 0 ? (
No videos found Videos you record will show up here. Already got videos? Upload them!
) : (
{videos && videos.map(({ title, id, createdAt }) => ( ))} {isLoading ? ( <> ) : null}
)}
); }; interface VideoCardProps { title: string; id: string; createdAt: Date; } const VideoCardSkeleton = () => { return (
); }; const VideoCard = ({ title, id, createdAt }: VideoCardProps) => { return (
video thumbnail
{title} {getTime(createdAt)}
); }; export default VideoList;