From 38e56e07e05efc6e63ee454eeac5d3f1ea9f811a Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Sun, 16 Apr 2023 13:20:35 +0200
Subject: [PATCH] show profile component on individual video page

---
 src/components/ProfileMenu.tsx | 5 +++--
 src/pages/share/[videoId].tsx  | 8 +++++++-
 src/pages/videos.tsx           | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
index e71c6c6..86e4b89 100644
--- a/src/components/ProfileMenu.tsx
+++ b/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>
diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx
index 9bdf686..cdde5d2 100644
--- a/src/pages/share/[videoId].tsx
+++ b/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]">
diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 40d5051..a6d7348 100644
--- a/src/pages/videos.tsx
+++ b/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>
             )}