show profile component on individual video page

src/components/ProfileMenu.tsx

@@ -1,6 +1,6 @@
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { signOut } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { api } from "~/utils/api";
 
@@ -8,6 +8,7 @@ export default function ProfileMenu() {
   const { mutateAsync: createBillingPortalSession } =
     api.stripe.createBillingPortalSession.useMutation();
   const { push } = useRouter();
+  const { data: session } = useSession();
 
   return (
     <Menu as="div" className="relative inline-block text-left">
@@ -15,7 +16,7 @@ export default function ProfileMenu() {
         <span className="sr-only">Open user menu</span>
         <img
           className="h-8 w-8 rounded-full"
-          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+          src={session?.user?.image ?? "https://i.stack.imgur.com/dr5qp.jpg"}
           alt=""
         />
       </Menu.Button>

src/pages/share/[videoId].tsx

@@ -10,10 +10,11 @@ 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";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
-  const { data: session } = useSession();
+  const { status, data: session } = useSession();
   const { videoId } = router.query as { videoId: string };
 
   const { data: video, isLoading } = api.video.get.useQuery(
@@ -59,6 +60,11 @@ const VideoList: NextPage = () => {
             {video && video.userId === session?.user.id ? (
               <ShareModal video={video} />
             ) : null}
+            {status === "authenticated" && (
+              <div className="ml-4 flex items-center justify-center">
+                <ProfileMenu />
+              </div>
+            )}
           </div>
         </div>
         <div className="flex h-full w-full grow flex-col items-center justify-start overflow-auto bg-[#fbfbfb]">

src/pages/videos.tsx

@@ -33,7 +33,7 @@ const VideoList: NextPage = () => {
           <div className="flex flex-row items-center justify-center">
             <VideoUploadModal />
             {status === "authenticated" && (
-              <div className="ml-3 flex items-center justify-center">
+              <div className="ml-4 flex items-center justify-center">
                 <ProfileMenu />
               </div>
             )}