Merge branch 'master' into production

deepjyoti30 · Mar 17, 2023 · 5ca3088 · 5ca3088
2 parents 57f5970 + 7b32d47
commit 5ca3088
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git 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: "https://apis.deepjyoti30.dev/v2/ytmdl/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>
diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -46,7 +46,8 @@ export default {
       confirmText: "",
       titleUrl: `https://apis.deepjyoti30.dev/v2/ytmdl/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";
     }
   },