V1.2.1 Update YT Error Handling

app/BenefitSection.tsx

@@ -140,7 +140,7 @@ export default function BenefitSection() {
         <div id="benefit-video" className="sticky top-[20vh] mb-[30vh] mt-8">
           <div
             ref={videoRef}
-            className="relative flex h-[350px] max-h-[800px] min-h-[100px] w-full items-center justify-center rounded-3xl bg-[hsl(50,10%,92%)] text-black shadow-xl [aspect-ratio:1_/_1] dark:bg-accent dark:shadow-stone-950 xl:h-[450px]"
+            className="relative flex aspect-square h-[350px] max-h-[800px] min-h-[100px] w-full items-center justify-center rounded-3xl bg-[hsl(50,10%,92%)] text-black shadow-xl dark:bg-accent dark:shadow-stone-950 xl:h-[450px]"
           >
             {isMounted && (
               <Image

app/audio/AudioForm.tsx

@@ -109,6 +109,14 @@ export default function AudioForm({
                 message = "Invalid Form Data.";
               }
               break;
+            case "401":
+              if (audioForm.audio_link) {
+                message =
+                  "Unable to access YouTube. Please upload your song as a file instead. Sorry :(";
+              } else {
+                message = "Forbidden. Please try again later.";
+              }
+              break;
             case "422":
               message = "Invalid Form Syntax.";
               break;

app/layout.tsx

@@ -57,15 +57,18 @@ export default function RootLayout({
                   <div className="flex items-center gap-8 max-sm:flex-col max-sm:items-start max-sm:gap-4">
                     <h1 className="text-nowrap text-muted-foreground">
                       &copy; {new Date().getFullYear()}{" "}
-                      <Link href="/" className="font-semibold">
+                      <Link href="/" className="font-heading">
                         Songscribe
                       </Link>
                     </h1>
                     <h1 className="text-nowrap text-muted-foreground">
                       Created by Gabriel Serna
                     </h1>
-                    <h1 className="text-nowrap font-semibold text-muted-foreground">
-                      <Link href="https://github.com/gabe-serna/songscribe">
+                    <h1 className="text-nowrap text-muted-foreground">
+                      <Link
+                        className="font-heading"
+                        href="https://github.com/gabe-serna/songscribe"
+                      >
                         GitHub
                       </Link>
                     </h1>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "songscribe",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "Gabriel Serna",
   "private": true,
   "scripts": {

utils/getAudioFromUrl.ts

@@ -22,7 +22,10 @@ export default async function getAudioFromURL(
 
   if (response) {
     if (!response.ok) {
-      throw new Error(`${response.status}`);
+      const message = await response.json();
+      if (message.error.includes("bot")) {
+        throw new Error("401");
+      } else throw new Error(`${response.status}`);
     }
   } else throw new Error("0");
 

utils/infoList.ts

@@ -9,4 +9,5 @@ export const infoList = [
   "If you want to remove the MIDI transcription for an instrument that isn't part of the song, set the confidence threshold all the way up and regenerate it.",
   "To continue working on the transcription, you can download the MIDI file and upload it to your music notation editor of choice.",
   "If the automatic transcription isn't very accurate, you can download the isolated audio for each instrument and continue to transcribe it yourself.",
+  "To isolate 30 seconds of audio, expect the process to take around 1 minute or more depending on the amount of instruments.",
 ];