import { type NextPage } from "next"; import Head from "next/head"; import { api } from "~/utils/api"; import ReactPlayer from "react-player"; import { useRouter } from "next/router"; import Link from "next/link"; import Image from "next/image"; import { getTime } from "~/utils/getTime"; import { ShareModal } from "~/components/ShareModal"; import { useSession } from "next-auth/react"; import VideoMoreMenu from "~/components/VideoMoreMenu"; import ProfileMenu from "~/components/ProfileMenu"; import { usePostHog } from "posthog-js/react"; import { useAtom } from "jotai"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import VideoRecordModal from "~/components/VideoRecordModal"; import defaultProfileIcon from "~/assets/default profile icon.jpg"; const VideoList: NextPage = () => { const router = useRouter(); const { status, data: session } = useSession(); const { videoId } = router.query as { videoId: string }; const posthog = usePostHog(); const [, setRecordOpen] = useAtom(recordVideoModalOpen); const { data: video, isLoading } = api.video.get.useQuery( { videoId }, { enabled: router.isReady, refetchOnWindowFocus: false, retry: (failureCount, error) => { if (error?.data?.code === "FORBIDDEN") return false; else return failureCount < 2; }, onError: (err) => { if (err?.data?.code === "FORBIDDEN") { posthog?.capture("video page: FORBIDDEN"); } else if (err?.data?.code === "NOT_FOUND") { posthog?.capture("video page: NOT_FOUND"); } }, } ); 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: "shared video", }); }; if (!isLoading && !video) { return (
This recording is currently unavailable To create your own public recordings,{" "} posthog?.capture("click sign-up from video error page") } href="/sign-in" className="pointer text-[#4169e1] underline" > create an account {" "} for free!
); } return ( <> {video?.title ?? "Snapify | The Open Source Loom Alternative"}
Snapify
{video && video.userId === session?.user.id ? ( <> ) : null} {status === "authenticated" ? ( <> My Library
) : ( )}
{video?.video_url && ( posthog?.capture("play video", { videoId: video.id, videoCreatedAt: video.createdAt, videoUpdatedAt: video.updatedAt, videoUser: video.user.id, videoSharing: video.sharing, videoDeleteAfterLinkExpires: video.delete_after_link_expires, videoShareLinkExpiresAt: video.shareLinkExpiresAt, }) } onPause={() => posthog?.capture("pause video", { videoId: video.id, videoCreatedAt: video.createdAt, videoUpdatedAt: video.updatedAt, videoUser: video.user.id, videoSharing: video.sharing, videoDeleteAfterLinkExpires: video.delete_after_link_expires, videoShareLinkExpiresAt: video.shareLinkExpiresAt, }) } url={video.video_url} /> )}
{video?.title ? (
{video.title} {getTime(video.createdAt)}
) : (
)}
{!isLoading ? ( <>
profile icon
{video.user.name} ) : ( <>
)}
); }; export default VideoList;