client: display a better error when rate limited for add previews (#1560)

Author: dyc3

client/src/components/AddPreview.vue

@@ -200,13 +200,15 @@ export const AddPreview = defineComponent({
 				hasAddPreviewFailed.value = true;
 				videosLoadFailureText.value = t("add-preview.messages.unknown-error");
 				console.error("Failed to get add preview", err);
+				let unknownFail = true;
 				if (axios.isAxiosError(err) && err.response) {
 					console.error(
 						`add preview response: ${err.response.status}`,
 						err.response.data
 					);
 
 					if (err.response.status === 400) {
+						unknownFail = false;
 						videosLoadFailureText.value = err.response.data.error.message;
 						if (
 							err.response.data.error.name === "FeatureDisabledException" &&
@@ -219,14 +221,21 @@ export const AddPreview = defineComponent({
 								"_blank"
 							);
 						}
+					} else if (err.response.status === 429) {
+						unknownFail = false;
+						videosLoadFailureText.value = t("common.errors.rate-limited", {
+							duration: err.response.headers["Retry-After"],
+						});
 					}
 				}
 
-				toast.add({
-					style: ToastStyle.Error,
-					content: t("add-preview.messages.failed-to-get-add-preview"),
-					duration: 6000,
-				});
+				if (unknownFail) {
+					toast.add({
+						style: ToastStyle.Error,
+						content: t("add-preview.messages.failed-to-get-add-preview"),
+						duration: 6000,
+					});
+				}
 			} finally {
 				isLoadingAddPreview.value = false;
 			}

client/src/locales/en.ts

@@ -26,6 +26,9 @@ export default {
 		"success": "Success",
 		"vote": "Vote",
 		"unvote": "Unvote",
+		"errors": {
+			"rate-limit": "Rate limit exceeded. Please try again in {duration} seconds.",
+		},
 	},
 	"behavior": {
 		[BehaviorOption.Always]: "Always",