From df5a3bb7ae8061fe779b427e766051acc9d1098f Mon Sep 17 00:00:00 2001
From: nolostra <saiesh1400@gmail.com>
Date: Wed, 4 Sep 2024 15:00:21 +0530
Subject: [PATCH 1/2] feat: added share music modal

---
 app/components/ShareModal.tsx | 50 +++++++++++++++++++++++++++
 app/components/StreamView.tsx | 65 +++++++++++++++++++++--------------
 2 files changed, 89 insertions(+), 26 deletions(-)
 create mode 100644 app/components/ShareModal.tsx

diff --git a/app/components/ShareModal.tsx b/app/components/ShareModal.tsx
new file mode 100644
index 0000000..fecf534
--- /dev/null
+++ b/app/components/ShareModal.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  shareableLink: string;
+}
+
+export const ShareModal: React.FC<ShareModalProps> = ({
+  isOpen,
+  onClose,
+  shareableLink,
+}) => {
+  if (!isOpen) return null;
+
+  const platforms = ["Twitter", "LinkedIn", "WhatsApp"];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg p-6 shadow-lg max-w-lg w-full relative">
+        <h2 className="text-lg font-bold text-gray-900">Share this link</h2>
+        <button
+          className="absolute top-3 right-3 text-gray-400 hover:text-gray-600"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+        <div className="space-y-4 mt-4">
+          {platforms.map((platform) => (
+            <button
+              key={platform}
+              onClick={() =>
+                window.open(
+                  `https://www.${platform.toLowerCase()}.com/share?url=${encodeURIComponent(
+                    shareableLink
+                  )}`,
+                  "_blank"
+                )
+              }
+              className="w-full bg-purple-700 hover:bg-purple-800 text-white py-2 rounded-lg"
+            >
+              Share on {platform}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/StreamView.tsx b/app/components/StreamView.tsx
index 303496d..473ed14 100644
--- a/app/components/StreamView.tsx
+++ b/app/components/StreamView.tsx
@@ -13,7 +13,7 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { YT_REGEX } from '../lib/utils'
 //@ts-ignore
 import YouTubePlayer from 'youtube-player';
-
+import { ShareModal } from '../components/ShareModal';
 interface Video {
     "id": string,
     "type": string,
@@ -43,7 +43,15 @@ export default function StreamView({
   const [loading, setLoading] = useState(false);
   const [playNextLoader, setPlayNextLoader] = useState(false);
   const videoPlayerRef = useRef<HTMLDivElement>();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleShare = () => {
+      setIsModalOpen(true);
+  }
 
+  const closeModal = () => {
+      setIsModalOpen(false);
+  }
   async function refreshStreams() {
     const res = await fetch(`/api/streams/?creatorId=${creatorId}`, {
         credentials: "include"
@@ -141,31 +149,31 @@ export default function StreamView({
     }
   }
 
-  const handleShare = () => {
-    const shareableLink = `${window.location.hostname}/creator/${creatorId}`
-    navigator.clipboard.writeText(shareableLink).then(() => {
-      toast.success('Link copied to clipboard!', {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      })
-    }, (err) => {
-      console.error('Could not copy text: ', err)
-      toast.error('Failed to copy link. Please try again.', {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      })
-    })
-  }
+//   const handleShare = () => {
+//     const shareableLink = `${window.location.hostname}/creator/${creatorId}`
+//     navigator.clipboard.writeText(shareableLink).then(() => {
+//       toast.success('Link copied to clipboard!', {
+//         position: "top-right",
+//         autoClose: 3000,
+//         hideProgressBar: false,
+//         closeOnClick: true,
+//         pauseOnHover: true,
+//         draggable: true,
+//         progress: undefined,
+//       })
+//     }, (err) => {
+//       console.error('Could not copy text: ', err)
+//       toast.error('Failed to copy link. Please try again.', {
+//         position: "top-right",
+//         autoClose: 3000,
+//         hideProgressBar: false,
+//         closeOnClick: true,
+//         pauseOnHover: true,
+//         draggable: true,
+//         progress: undefined,
+//       })
+//     })
+//   }
 
   return (
     <div className="flex flex-col min-h-screen bg-[rgb(10,10,10)] text-gray-200">
@@ -274,6 +282,11 @@ export default function StreamView({
             pauseOnHover
             theme="dark"
         />
+          <ShareModal 
+                isOpen={isModalOpen} 
+                onClose={closeModal} 
+                shareableLink={`${window.location.hostname}/creator/${creatorId}`} 
+            />
     </div>
   )
 }
\ No newline at end of file

From 59e0ee7a31a602cdc7a5913969b167e246bbdc7b Mon Sep 17 00:00:00 2001
From: SAISH DABHOLKAR <53576981+nolostra@users.noreply.github.com>
Date: Wed, 11 Sep 2024 00:21:16 +0530
Subject: [PATCH 2/2] Update StreamView.tsx

---
 app/components/StreamView.tsx | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/app/components/StreamView.tsx b/app/components/StreamView.tsx
index 473ed14..a8a288d 100644
--- a/app/components/StreamView.tsx
+++ b/app/components/StreamView.tsx
@@ -149,31 +149,6 @@ export default function StreamView({
     }
   }
 
-//   const handleShare = () => {
-//     const shareableLink = `${window.location.hostname}/creator/${creatorId}`
-//     navigator.clipboard.writeText(shareableLink).then(() => {
-//       toast.success('Link copied to clipboard!', {
-//         position: "top-right",
-//         autoClose: 3000,
-//         hideProgressBar: false,
-//         closeOnClick: true,
-//         pauseOnHover: true,
-//         draggable: true,
-//         progress: undefined,
-//       })
-//     }, (err) => {
-//       console.error('Could not copy text: ', err)
-//       toast.error('Failed to copy link. Please try again.', {
-//         position: "top-right",
-//         autoClose: 3000,
-//         hideProgressBar: false,
-//         closeOnClick: true,
-//         pauseOnHover: true,
-//         draggable: true,
-//         progress: undefined,
-//       })
-//     })
-//   }
 
   return (
     <div className="flex flex-col min-h-screen bg-[rgb(10,10,10)] text-gray-200">
@@ -289,4 +264,4 @@ export default function StreamView({
             />
     </div>
   )
-}
\ No newline at end of file
+}