Better notice when instance is blocked

api/video.js

@@ -68,6 +68,36 @@ p Requested URL: #[a(href=url)= url]
 `
 					message = pug.render(template, {instanceOrigin, url: outURL})
 				} else if (e instanceof InstanceError) {
+					if (e.identifier === "RATE_LIMITED_BY_YOUTUBE") {
+						const template = `
+.blocked-explanation
+	img(src="/static/images/instance-blocked.svg" width=552 height=96)
+	.rows
+		.row
+			h3.actor You
+			| Working
+		.row
+			h3.actor CloudTube
+			| Working
+		.row
+			h3.actor Instance
+			| Blocked by YouTube
+		.row
+			h3.actor YouTube
+			| Working
+p.
+	CloudTube needs to a working Second/Invidious instance in order to get data about videos.
+	However, the selected instance, #[code= instanceOrigin], has been temporarily blocked by YouTube.
+p.
+	You will be able to watch this video if you select a working instance in settings.
+	#[br]#[a(href="/settings") Go to settings →]
+p.
+	(Tip: Try #[code https://invidious.snopyta.org] or #[code https://invidious.site].)
+p.
+	This situation #[em will] be improved in the future!
+`
+						message = pug.render(template, {instanceOrigin})
+					} else {
 						const template = `
 p #[strong= error.message]
 if error.identifier
@@ -76,6 +106,7 @@ p That error was generated by #[code= instanceOrigin].
 `
 						message = pug.render(template, {instanceOrigin, error: e})
 					}
+				}
 				return render(500, "pug/video.pug", {video: {videoId: id}, error: true, message})
 			}
 		}

html/static/images/instance-blocked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="552" height="96" viewBox="0 0 146.05 25.4"><g stroke-linecap="round" stroke-linejoin="round"><path d="M6.35 16.933l-2.117 4.234h25.4l-2.116-4.234M6.35 4.233v12.7h21.167v-12.7zM29.633 12.7h12.7M67.733 12.7h12.7M93.133 16.933l3.308-8.466 3.042 8.466m-14.816 0v2.117h2.116v-2.117zm0-6.35h2.116m-2.116-2.116h2.116M84.667 6.35h2.116M88.9 4.233v16.934M82.55 4.233v16.934h21.167V4.233z" fill="none" stroke="#ccc" stroke-width=".529"/><path d="M110.067 10.583l4.233 4.234m-4.233 0l4.233-4.234" fill="none" stroke="#ef2929" stroke-width=".529"/><path d="M105.833 12.7h2.117M116.417 12.7h2.116M120.65 4.233v16.934h21.167V4.233zm6.35 0v16.934M122.767 6.35h2.116m-2.116 2.117h2.116m-2.116 2.116h2.116m-2.116 6.35v2.117h2.116v-2.117zm6.813-8.466v8.466l8.466-4.233z" fill="none" stroke="#ccc" stroke-width=".529"/><path d="M6.35 6.35h21.167" stroke="#ccc" stroke-width=".529"/><path d="M8.467 8.467V12.7h8.466V8.467zM21.167 8.467v2.116H25.4V8.467zM21.167 12.7v2.117H25.4V12.7zM29.633 12.7l2.117-2.117M29.633 12.7l2.117 2.117M69.85 10.583L67.733 12.7M69.85 14.817L67.733 12.7M57.15 14.817h4.233M57.15 12.7v4.233h4.233V12.7h-2.116v4.233m-4.234-6.35h4.234M57.15 8.467V12.7m-2.117-4.233h4.234V12.7h-4.234zM44.45 4.233v16.934h21.167V4.233zm6.35 0v16.934M46.567 6.35h2.116m-2.116 2.117h2.116m-2.116 2.116h2.116m-2.116 6.35v2.117h2.116v-2.117z" fill="none" stroke="#ccc" stroke-width=".529"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M29.628 17.04a.265.265 0 00-.182.08l-4.047 4.047-1.928-1.93a.265.265 0 10-.375.373l2.118 2.117a.265.265 0 00.373 0l4.234-4.232a.265.265 0 00-.193-.455zM67.733 17.04a.265.265 0 00-.181.08l-4.047 4.047-1.928-1.93a.265.265 0 10-.375.373l2.117 2.117a.265.265 0 00.373 0l4.235-4.232a.265.265 0 00-.194-.455zM143.933 17.04a.265.265 0 00-.181.08l-4.047 4.047-1.928-1.93a.265.265 0 10-.375.373l2.117 2.117a.265.265 0 00.373 0l4.235-4.232a.265.265 0 00-.194-.455z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#4e9a06" stroke="#36393e" stroke-width="1.058" paint-order="markers stroke fill"/></g></svg>

sass/includes/video-page.sass

@@ -90,3 +90,24 @@
   padding: 40px 20px 20px
   margin: 0 auto
   max-width: 600px
+  line-height: 1.4
+
+.blocked-explanation
+  text-align: center
+  margin-bottom: 32px
+
+  img
+    width: 552px
+    height: 96px
+
+  .rows
+    display: grid
+    grid-template-columns: 22% 20% 20% 20%
+    grid-gap: 4%
+    justify-content: center
+
+    .row
+      margin: 0
+
+      .actor
+        margin: 4px 0px 10px