From 4cbabdcc397c5a33a25fe2afd0058bc90c9485e6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 12 Sep 2024 08:20:23 -0600
Subject: [PATCH] Handle cases where share is not available

---
 web/src/components/card/ExportCard.tsx               |  9 +++++----
 .../components/overlay/detail/ReviewDetailDialog.tsx |  5 ++---
 web/src/utils/browserUtil.ts                         | 12 ++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 web/src/utils/browserUtil.ts

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 184d6b88f..045740a97 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -19,6 +19,7 @@ import { DeleteClipType, Export } from "@/types/export";
 import { MdEditSquare } from "react-icons/md";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
+import { shareOrCopy } from "@/utils/browserUtil";
 
 type ExportProps = {
   className: string;
@@ -151,10 +152,10 @@ export default function ExportCard({
                 <Chip
                   className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                   onClick={() =>
-                    navigator.share({
-                      url: `${baseUrl}exports?id=${exportedRecording.id}`,
-                      title: exportedRecording.name.replaceAll("_", " "),
-                    })
+                    shareOrCopy(
+                      `${baseUrl}exports?id=${exportedRecording.id}`,
+                      exportedRecording.name.replaceAll("_", " "),
+                    )
                   }
                 >
                   <FaShareAlt className="size-4 text-white" />
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 8fed8d181..0bfae33bc 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -36,6 +36,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { baseUrl } from "@/api/baseUrl";
+import { shareOrCopy } from "@/utils/browserUtil";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -143,9 +144,7 @@ export default function ReviewDetailDialog({
                     variant="secondary"
                     size="sm"
                     onClick={() =>
-                      navigator.share({
-                        url: `${baseUrl}review?id=${review.id}`,
-                      })
+                      shareOrCopy(`${baseUrl}review?id=${review.id}`)
                     }
                   >
                     <FaShareAlt className="size-4" />
diff --git a/web/src/utils/browserUtil.ts b/web/src/utils/browserUtil.ts
new file mode 100644
index 000000000..cc0bd4bf1
--- /dev/null
+++ b/web/src/utils/browserUtil.ts
@@ -0,0 +1,12 @@
+import copy from "copy-to-clipboard";
+
+export function shareOrCopy(url: string, title?: string) {
+  if (window.isSecureContext && "share" in navigator) {
+    navigator.share({
+      url: url,
+      title: title,
+    });
+  } else {
+    copy(url);
+  }
+}