From 73c3b13309551967f6875605dde680a9bd8ad31d Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 22 Nov 2023 13:54:43 +0100
Subject: [PATCH 1/4] Fix buttons in playback error

---
 src/pages/parts/player/PlaybackErrorPart.tsx | 23 +++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/parts/player/PlaybackErrorPart.tsx b/src/pages/parts/player/PlaybackErrorPart.tsx
index b5bf9573..62a327f0 100644
--- a/src/pages/parts/player/PlaybackErrorPart.tsx
+++ b/src/pages/parts/player/PlaybackErrorPart.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { Button } from "@/components/Button";
 import { Icon, Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
@@ -8,6 +10,12 @@ import { usePlayerStore } from "@/stores/player/store";
 
 export function PlaybackErrorPart() {
   const playbackError = usePlayerStore((s) => s.interface.error);
+  const [showErrorCard, setShowErrorCard] = useState(true);
+
+  function copyError() {
+    if (!playbackError || !navigator.clipboard) return;
+    navigator.clipboard.writeText(playbackError.message);
+  }
 
   return (
     <ErrorLayout>
@@ -31,16 +39,25 @@ export function PlaybackErrorPart() {
       </ErrorContainer>
       <ErrorContainer maxWidth="max-w-[45rem]">
         {/* Error */}
-        {playbackError ? (
+        {playbackError && showErrorCard ? (
+          // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
           <div className="w-full bg-errors-card p-6 rounded-lg">
             <div className="flex justify-between items-center pb-2 border-b border-errors-border">
               <span className="text-white font-medium">Error details</span>
               <div className="flex justify-center items-center gap-3">
-                <Button theme="secondary" padding="p-2 md:px-4">
+                <Button
+                  theme="secondary"
+                  padding="p-2 md:px-4"
+                  onClick={() => copyError()}
+                >
                   <Icon icon={Icons.COPY} className="text-2xl mr-3" />
                   Copy
                 </Button>
-                <Button theme="secondary" padding="p-2 md:px-2">
+                <Button
+                  theme="secondary"
+                  padding="p-2 md:px-2"
+                  onClick={() => setShowErrorCard(false)}
+                >
                   <Icon icon={Icons.X} className="text-2xl" />
                 </Button>
               </div>

From 5ae17a6c9aa7aad04912be8c8b81b518ae011c6a Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 22 Nov 2023 14:03:57 +0100
Subject: [PATCH 2/4] Add "has copied" text

---
 src/pages/parts/player/PlaybackErrorPart.tsx | 27 +++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/pages/parts/player/PlaybackErrorPart.tsx b/src/pages/parts/player/PlaybackErrorPart.tsx
index 62a327f0..519f8eb8 100644
--- a/src/pages/parts/player/PlaybackErrorPart.tsx
+++ b/src/pages/parts/player/PlaybackErrorPart.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { Button } from "@/components/Button";
 import { Icon, Icons } from "@/components/Icon";
@@ -11,10 +11,22 @@ import { usePlayerStore } from "@/stores/player/store";
 export function PlaybackErrorPart() {
   const playbackError = usePlayerStore((s) => s.interface.error);
   const [showErrorCard, setShowErrorCard] = useState(true);
+  const [hasCopied, setHasCopied] = useState(false);
+  const hasCopiedUnsetDebounce = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
 
   function copyError() {
     if (!playbackError || !navigator.clipboard) return;
     navigator.clipboard.writeText(playbackError.message);
+
+    setHasCopied(true);
+
+    // Debounce unsetting the "has copied" label
+    if (hasCopiedUnsetDebounce.current)
+      clearTimeout(hasCopiedUnsetDebounce.current);
+    hasCopiedUnsetDebounce.current = setTimeout(() => setHasCopied(false), 2e3);
+    console.log(hasCopiedUnsetDebounce);
   }
 
   return (
@@ -50,8 +62,17 @@ export function PlaybackErrorPart() {
                   padding="p-2 md:px-4"
                   onClick={() => copyError()}
                 >
-                  <Icon icon={Icons.COPY} className="text-2xl mr-3" />
-                  Copy
+                  {hasCopied ? (
+                    <>
+                      <Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <Icon icon={Icons.COPY} className="text-2xl mr-3" />
+                      Copy
+                    </>
+                  )}
                 </Button>
                 <Button
                   theme="secondary"

From a9da1dada4052ef418bed3c55a656174a7ffbcab Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 22 Nov 2023 14:14:01 +0100
Subject: [PATCH 3/4] Create ErrorCard component, fix being unable to select
 text, use ErrorCard everywhere

---
 src/pages/parts/errors/ErrorCard.tsx         | 68 ++++++++++++++++++++
 src/pages/parts/player/PlaybackErrorPart.tsx | 62 ++----------------
 src/pages/parts/player/ScrapeErrorPart.tsx   | 24 ++-----
 3 files changed, 76 insertions(+), 78 deletions(-)
 create mode 100644 src/pages/parts/errors/ErrorCard.tsx

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
new file mode 100644
index 00000000..55cc81cd
--- /dev/null
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -0,0 +1,68 @@
+import { useRef, useState } from "react";
+
+import { Button } from "@/components/Button";
+import { Icon, Icons } from "@/components/Icon";
+import { DisplayError } from "@/components/player/display/displayInterface";
+
+export function ErrorCard(props: { error: DisplayError | string }) {
+  const [showErrorCard, setShowErrorCard] = useState(true);
+  const [hasCopied, setHasCopied] = useState(false);
+  const hasCopiedUnsetDebounce = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+
+  const errorMessage =
+    typeof props.error === "string" ? props.error : props.error.message;
+
+  function copyError() {
+    if (!props.error || !navigator.clipboard) return;
+    navigator.clipboard.writeText(errorMessage);
+
+    setHasCopied(true);
+
+    // Debounce unsetting the "has copied" label
+    if (hasCopiedUnsetDebounce.current)
+      clearTimeout(hasCopiedUnsetDebounce.current);
+    hasCopiedUnsetDebounce.current = setTimeout(() => setHasCopied(false), 2e3);
+  }
+
+  if (!showErrorCard) return null;
+
+  return (
+    // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
+    <div className="w-full bg-errors-card p-6 rounded-lg">
+      <div className="flex justify-between items-center pb-2 border-b border-errors-border">
+        <span className="text-white font-medium">Error details</span>
+        <div className="flex justify-center items-center gap-3">
+          <Button
+            theme="secondary"
+            padding="p-2 md:px-4"
+            onClick={() => copyError()}
+          >
+            {hasCopied ? (
+              <>
+                <Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
+                Copied
+              </>
+            ) : (
+              <>
+                <Icon icon={Icons.COPY} className="text-2xl mr-3" />
+                Copy
+              </>
+            )}
+          </Button>
+          <Button
+            theme="secondary"
+            padding="p-2 md:px-2"
+            onClick={() => setShowErrorCard(false)}
+          >
+            <Icon icon={Icons.X} className="text-2xl" />
+          </Button>
+        </div>
+      </div>
+      <div className="mt-4 h-60 overflow-y-auto text-left whitespace-pre pointer-events-auto select-text">
+        {errorMessage}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/parts/player/PlaybackErrorPart.tsx b/src/pages/parts/player/PlaybackErrorPart.tsx
index 519f8eb8..88ab8af0 100644
--- a/src/pages/parts/player/PlaybackErrorPart.tsx
+++ b/src/pages/parts/player/PlaybackErrorPart.tsx
@@ -1,33 +1,15 @@
-import { useRef, useState } from "react";
-
 import { Button } from "@/components/Button";
-import { Icon, Icons } from "@/components/Icon";
+import { Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
 import { Paragraph } from "@/components/text/Paragraph";
 import { Title } from "@/components/text/Title";
 import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
 import { usePlayerStore } from "@/stores/player/store";
 
+import { ErrorCard } from "../errors/ErrorCard";
+
 export function PlaybackErrorPart() {
   const playbackError = usePlayerStore((s) => s.interface.error);
-  const [showErrorCard, setShowErrorCard] = useState(true);
-  const [hasCopied, setHasCopied] = useState(false);
-  const hasCopiedUnsetDebounce = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
-
-  function copyError() {
-    if (!playbackError || !navigator.clipboard) return;
-    navigator.clipboard.writeText(playbackError.message);
-
-    setHasCopied(true);
-
-    // Debounce unsetting the "has copied" label
-    if (hasCopiedUnsetDebounce.current)
-      clearTimeout(hasCopiedUnsetDebounce.current);
-    hasCopiedUnsetDebounce.current = setTimeout(() => setHasCopied(false), 2e3);
-    console.log(hasCopiedUnsetDebounce);
-  }
 
   return (
     <ErrorLayout>
@@ -51,43 +33,7 @@ export function PlaybackErrorPart() {
       </ErrorContainer>
       <ErrorContainer maxWidth="max-w-[45rem]">
         {/* Error */}
-        {playbackError && showErrorCard ? (
-          // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
-          <div className="w-full bg-errors-card p-6 rounded-lg">
-            <div className="flex justify-between items-center pb-2 border-b border-errors-border">
-              <span className="text-white font-medium">Error details</span>
-              <div className="flex justify-center items-center gap-3">
-                <Button
-                  theme="secondary"
-                  padding="p-2 md:px-4"
-                  onClick={() => copyError()}
-                >
-                  {hasCopied ? (
-                    <>
-                      <Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
-                      Copied
-                    </>
-                  ) : (
-                    <>
-                      <Icon icon={Icons.COPY} className="text-2xl mr-3" />
-                      Copy
-                    </>
-                  )}
-                </Button>
-                <Button
-                  theme="secondary"
-                  padding="p-2 md:px-2"
-                  onClick={() => setShowErrorCard(false)}
-                >
-                  <Icon icon={Icons.X} className="text-2xl" />
-                </Button>
-              </div>
-            </div>
-            <div className="mt-4 h-60 overflow-y-auto text-left whitespace-pre pointer-events-auto">
-              {playbackError.message}
-            </div>
-          </div>
-        ) : null}
+        {playbackError ? <ErrorCard error={playbackError} /> : null}
       </ErrorContainer>
     </ErrorLayout>
   );
diff --git a/src/pages/parts/player/ScrapeErrorPart.tsx b/src/pages/parts/player/ScrapeErrorPart.tsx
index e2625180..16c2afe9 100644
--- a/src/pages/parts/player/ScrapeErrorPart.tsx
+++ b/src/pages/parts/player/ScrapeErrorPart.tsx
@@ -1,13 +1,15 @@
 import { useMemo } from "react";
 
 import { Button } from "@/components/Button";
-import { Icon, Icons } from "@/components/Icon";
+import { Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
 import { Paragraph } from "@/components/text/Paragraph";
 import { Title } from "@/components/text/Title";
 import { ScrapingItems, ScrapingSegment } from "@/hooks/useProviderScrape";
 import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
 
+import { ErrorCard } from "../errors/ErrorCard";
+
 export interface ScrapeErrorPartProps {
   data: {
     sources: Record<string, ScrapingSegment>;
@@ -53,25 +55,7 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
       </ErrorContainer>
       <ErrorContainer maxWidth="max-w-[45rem]">
         {/* Error */}
-        {error ? (
-          <div className="w-full bg-errors-card p-6 rounded-lg">
-            <div className="flex justify-between items-center pb-2 border-b border-errors-border">
-              <span className="text-white font-medium">Error details</span>
-              <div className="flex justify-center items-center gap-3">
-                <Button theme="secondary" padding="p-2 md:px-4">
-                  <Icon icon={Icons.COPY} className="text-2xl mr-3" />
-                  Copy
-                </Button>
-                <Button theme="secondary" padding="p-2 md:px-2">
-                  <Icon icon={Icons.X} className="text-2xl" />
-                </Button>
-              </div>
-            </div>
-            <div className="mt-4 h-60 overflow-y-auto text-left whitespace-pre pointer-events-auto">
-              {error}
-            </div>
-          </div>
-        ) : null}
+        {error ? <ErrorCard error={error} /> : null}
       </ErrorContainer>
     </ErrorLayout>
   );

From 1343d7f907df0aebf2024554086eb5f617bb67ce Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 22 Nov 2023 14:15:00 +0100
Subject: [PATCH 4/4] Add backticks around error message copy

---
 src/pages/parts/errors/ErrorCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/parts/errors/ErrorCard.tsx b/src/pages/parts/errors/ErrorCard.tsx
index 55cc81cd..87cb8410 100644
--- a/src/pages/parts/errors/ErrorCard.tsx
+++ b/src/pages/parts/errors/ErrorCard.tsx
@@ -16,7 +16,7 @@ export function ErrorCard(props: { error: DisplayError | string }) {
 
   function copyError() {
     if (!props.error || !navigator.clipboard) return;
-    navigator.clipboard.writeText(errorMessage);
+    navigator.clipboard.writeText(`\`\`\`${errorMessage}\`\`\``);
 
     setHasCopied(true);