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 { 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"; import { usePostHog } from "posthog-js/react"; import Image from "next/image"; import { useSearchParams } from "next/navigation"; import { useEffect, useState } from "react"; import { env } from "~/env.mjs"; 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(); const posthog = usePostHog(); const searchParams = useSearchParams(); const [closeWindow, setCloseWindow] = useState(false); if (status === "unauthenticated") { void router.replace("/sign-in"); } const checkoutCanceledQueryParam = searchParams.get("checkoutCanceled"); const closeQueryParam = searchParams.get("close"); const openRecordModal = () => { if ( !navigator?.mediaDevices?.getDisplayMedia && !navigator?.mediaDevices?.getDisplayMedia ) { return alert("Your browser is currently NOT supported."); } setRecordOpen(true); posthog?.capture("open record video modal", { stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, cta: "empty video list page", }); }; const openUploadModal = () => { if ( session?.user.stripeSubscriptionStatus === "active" || !env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ) { setUploadOpen(true); posthog?.capture("open upload video modal", { stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, cta: "empty video list page", }); } else { setPaywallOpen(true); posthog?.capture("hit video upload paywall", { stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, cta: "empty video list page", }); } }; useEffect(() => { const closeWindow = (window.innerWidth === 500 && (window.innerHeight === 499 || window.innerHeight === 500)) || closeQueryParam === "true"; setCloseWindow(closeWindow); }, [closeQueryParam]); useEffect(() => { if (checkoutCanceledQueryParam && closeQueryParam === "false") { setTimeout(() => { void router.push("/videos").then(() => router.reload()); }, 5000); } }, [checkoutCanceledQueryParam, closeQueryParam]); return ( <> Library | Snapify
Snapify
{videos?.length && session?.user?.stripeSubscriptionStatus !== "active" && 1 + 1 === 3 ? (
{videos.length}/10 videos
= 7 ? "bg-red-600" : "bg-blue-600" }`} style={{ width: videos.length.toString() + "0%", }} >
) : null} {status === "authenticated" && (
)}
{closeWindow || checkoutCanceledQueryParam ? ( <> {checkoutCanceledQueryParam === "false" ? (
Successfully upgraded {closeQueryParam === "true" ? ( You can now close this window and try to upload the video again! ) : ( You will be redirected shortly )}
) : (
{checkoutCanceledQueryParam === "true" ? ( <> Purchase cancelled {closeQueryParam === "true" ? ( You can now close this window ) : ( You will be redirected shortly )} ) : ( <> Successfully logged in You can now close this window and try to upload the video again! )}
)} ) : ( <> {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, thumbnailUrl }) => ( ))} {isLoading ? ( <> ) : null}
)} )}
); }; interface VideoCardProps { title: string; id: string; thumbnailUrl: string; createdAt: Date; } const VideoCardSkeleton = () => { return (
); }; const VideoCard = ({ title, id, createdAt, thumbnailUrl }: VideoCardProps) => { return (
video thumbnail
{title} {getTime(createdAt)}
); }; export default VideoList;