From 0f95d9aa3c2be54a488bb61ab3fbbfe3f783c23b Mon Sep 17 00:00:00 2001
From: Deepjyoti Barman <deep.barman30@gmail.com>
Date: Fri, 17 Mar 2023 23:25:45 +0530
Subject: [PATCH 1/2] Add support to handle failure in fetching title from URL

---
 src/views/Search.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/views/Search.vue b/src/views/Search.vue
index 384faa5..109c86a 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -46,7 +46,8 @@ export default {
       confirmText: "",
       titleUrl: `${process.env.VUE_APP_API_URL}/metadata/title-from-url`,
       songNameExtracted: null,
-      isTitleLoading: false
+      isTitleLoading: false,
+      isTitleLoadFailed: false
     };
   },
   methods: {
@@ -71,7 +72,11 @@ export default {
         this.songNameExtracted = await this.extractTitleFromUrl(
           searchData.youtubeUrl
         );
+
         this.isTitleLoading = false;
+
+        // Check if title load failed
+        if (this.isTitleLoadFailed) return;
       }
 
       // Check if we need to show the prompt. If we do, show the prompt,
@@ -122,6 +127,13 @@ export default {
           method: "GET"
         }
       );
+
+      // Handle the case if the response is not 200 OK
+      if (response.status != 200) {
+        this.isTitleLoadFailed = true;
+        return "";
+      }
+
       const jsonData = await response.json();
 
       // TODO: Do something with the should_verify flag
@@ -139,6 +151,8 @@ export default {
     getNoQueryText() {
       return this.isTitleLoading
         ? "Extracting title from the entered URL..."
+        : this.isTitleLoadFailed
+        ? "Failed to load details for the entered URL. Please try with a different URL"
         : "You need to enter the name of a song";
     }
   },

From 7b32d4777859f5888f7aecd33fe0777c3217f694 Mon Sep 17 00:00:00 2001
From: Deepjyoti Barman <deep.barman30@gmail.com>
Date: Fri, 17 Mar 2023 23:44:46 +0530
Subject: [PATCH 2/2] Add support for handling failure to fetch metadata

---
 src/components/MetaList.vue | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/MetaList.vue b/src/components/MetaList.vue
index 52a6cbb..1a65433 100644
--- a/src/components/MetaList.vue
+++ b/src/components/MetaList.vue
@@ -1,6 +1,17 @@
 <template>
   <div class="meta-list__container">
     <Animation v-if="getIsLoading" />
+    <div v-else-if="isFailedLoading">
+      <div
+        class="py-2 md:w-2/5 w-11/12 failed--msg--wrapper my-auto flex justify-center items-center w-full mr-auto ml-auto"
+      >
+        <div
+          class="text-center md:text-2xl text-lg font-semibold dark:text-white"
+        >
+          {{ getMetaLoadFailedText }}
+        </div>
+      </div>
+    </div>
     <div v-else class="meta__results">
       <MetaResult v-for="(meta, id) in getMetaResults" :key="id" :meta="meta" />
       <div v-if="!getShowAllData" class="show--more--btn my-8">
@@ -45,7 +56,8 @@ export default {
       metaUrl: `${process.env.VUE_APP_API_URL}/metadata`,
       fetchedData: null,
       isLoading: false,
-      showAllData: false
+      showAllData: false,
+      hasFailed: false
     };
   },
   props: {
@@ -74,6 +86,14 @@ export default {
           }
         }
       );
+
+      // Handle the case if a non 200 OK status is received
+      if (response.status != 200) {
+        this.hasFailed = true;
+        this.isLoading = false;
+        return;
+      }
+
       const jsonData = await response.json();
 
       this.fetchedData = jsonData;
@@ -100,6 +120,12 @@ export default {
     },
     getManualLink() {
       return { name: "Manual", query: { videoId: this.$route.query.videoId } };
+    },
+    isFailedLoading() {
+      return this.hasFailed;
+    },
+    getMetaLoadFailedText() {
+      return "Failed to load metadata for the song. Please enter the song name only without artist name etc";
     }
   },
   watch: {
@@ -137,4 +163,8 @@ export default {
     }
   }
 }
+
+.failed--msg--wrapper {
+  height: 60vh;
+}
 </style>