From 44f5af50618355c24b0e8f041609583cd391f3d2 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Fri, 18 Oct 2024 14:14:17 -0500
Subject: [PATCH] Add author view buttons back into video details, mobile style
 fixes for course and resource payment buttons

---
 .../bitcoinConnect/CoursePaymentButton.js     |  5 +++-
 .../bitcoinConnect/ResourcePaymentButton.js   |  5 +++-
 src/components/content/videos/VideoDetails.js | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/components/bitcoinConnect/CoursePaymentButton.js b/src/components/bitcoinConnect/CoursePaymentButton.js
index 53fc3f4..efa8a86 100644
--- a/src/components/bitcoinConnect/CoursePaymentButton.js
+++ b/src/components/bitcoinConnect/CoursePaymentButton.js
@@ -9,6 +9,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
 import axios from 'axios';
 import GenericButton from '@/components/buttons/GenericButton';
 import { useRouter } from 'next/router';
+import useWindowWidth from '@/hooks/useWindowWidth';
 
 const Payment = dynamic(
     () => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
@@ -22,6 +23,8 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
     const { data: session, status } = useSession();
     const [dialogVisible, setDialogVisible] = useState(false);
     const router = useRouter();
+    const windowWidth = useWindowWidth();
+    const isMobile = windowWidth < 768;
 
     useEffect(() => {
         let intervalId;
@@ -121,7 +124,7 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
                 visible={dialogVisible}
                 onHide={() => setDialogVisible(false)}
                 header="Make Payment"
-                style={{ width: '50vw' }}
+                style={{ width: isMobile ? '90vw' : '50vw' }}
             >
                 {invoice ? (
                     <Payment
diff --git a/src/components/bitcoinConnect/ResourcePaymentButton.js b/src/components/bitcoinConnect/ResourcePaymentButton.js
index be82d2a..3f76ef0 100644
--- a/src/components/bitcoinConnect/ResourcePaymentButton.js
+++ b/src/components/bitcoinConnect/ResourcePaymentButton.js
@@ -8,6 +8,7 @@ import { useSession } from 'next-auth/react';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import axios from 'axios';
 import GenericButton from '@/components/buttons/GenericButton';
+import useWindowWidth from '@/hooks/useWindowWidth';
 import { useRouter } from 'next/router';
 
 const Payment = dynamic(
@@ -22,6 +23,8 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
   const { data: session, status } = useSession();
   const [dialogVisible, setDialogVisible] = useState(false);
   const router = useRouter();
+  const windowWidth = useWindowWidth();
+  const isMobile = windowWidth < 768;
 
   useEffect(() => {
     let intervalId;
@@ -118,7 +121,7 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
         visible={dialogVisible}
         onHide={() => setDialogVisible(false)}
         header="Make Payment"
-        style={{ width: '50vw' }}
+        style={{ width: isMobile ? '90vw' : '50vw' }}
       >
         {invoice ? (
           <Payment
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 52c9d8b..ef56bb9 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -187,6 +187,35 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
                 </div>
                 <div className="w-full flex flex-row justify-end mt-4">
                     {renderPaymentMessage()}
+                    {authorView ? (
+                            <div className='flex space-x-2 mt-4 sm:mt-0'>
+                                <GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
+                                <GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
+                                <GenericButton
+                                    tooltip={isMobileView ? null : "View Nostr Note"}
+                                    tooltipOptions={{ position: 'left' }}
+                                    icon="pi pi-external-link"
+                                    outlined
+                                    onClick={() => {
+                                        window.open(`https://nostr.com/${nAddress}`, '_blank');
+                                    }}
+                                />
+                            </div>
+                        ) : (
+                            <div className="w-full flex flex-row justify-end gap-2">
+                                {course && <GenericButton size={isMobileView ? 'small' : 'large'} outlined icon="pi pi-external-link" onClick={() => window.open(`/course/${course}`, '_blank')} label={isMobileView ? "Course" : "Open Course"} tooltip="This is a lesson in a course" tooltipOptions={{ position: 'top' }} />}
+                                <GenericButton
+                                    size={isMobileView ? 'small' : 'large'}
+                                    tooltip={isMobileView ? null : "View Nostr Note"}
+                                    tooltipOptions={{ position: 'left' }}
+                                    icon="pi pi-external-link"
+                                    outlined
+                                    onClick={() => {
+                                        window.open(`https://nostr.com/${nAddress}`, '_blank');
+                                    }}
+                                />
+                            </div>
+                        )}
                 </div>
             </div>
         </div>