From 539260c8de5b7d0ad8ac7c8a025a0ff395b44245 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Thu, 19 Aug 2021 19:33:47 +1200
Subject: [PATCH] Improve documentation and errors around local mode

---
 html/static/js/local-video.js | 36 ++++++++++++++++++++++++++++++-----
 pug/local-video.pug           |  3 ++-
 pug/settings.pug              |  2 +-
 sass/includes/video-page.sass |  3 +++
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/html/static/js/local-video.js b/html/static/js/local-video.js
index 7948d4a..6aec313 100644
--- a/html/static/js/local-video.js
+++ b/html/static/js/local-video.js
@@ -1,18 +1,44 @@
-import {q} from "./elemjs/elemjs.js"
+const q = s => document.querySelector(s) // write this directly rather than importing to avoid an extra round-trip
 
-const status = q("#status")
+let status = q("#status")
 const form = q("#form")
 const data = q("#video-data")
 
+function displayError(root) {
+	let contents
+	if (root instanceof Error) { // error in our code here, or fetch API promise rejection
+		contents = root.toString()
+		if (root.stack) contents += root.stack
+	} else { // some JSON something
+		if (root.error) { // a descriptive report from the instance
+			contents = root.error.message || root.error
+			if (root.error.identifier) contents += `\nIdentifier: ${root.error.identifier}`
+		} else {
+			contents = JSON.stringify(root, null, 2)
+		}
+	}
+
+	console.log(contents)
+
+	const newStatus = document.createElement("pre")
+	newStatus.id = "status"
+	newStatus.textContent = contents
+	status.replaceWith(newStatus)
+	status = newStatus
+}
+
 fetch(`http://localhost:3000/api/v1/videos/${id}`).then(res => res.json()).then(root => {
-	if (root.error) throw new Error(root)
+	if (root.error) {
+		throw root // it's ok to throw this, it will be caught and displayed
+	}
+
 	data.value = JSON.stringify(root)
 	form.submit()
 	status.textContent = "Submitting..."
 }).catch(e => {
-	if (e.message.includes("NetworkError")) {
+	if (e.message && e.message.includes("NetworkError")) {
 		status.textContent = "Connection failed. Make sure you're running your own instance locally."
 	} else {
-		status.innerText = e.toString()
+		displayError(e)
 	}
 })
diff --git a/pug/local-video.pug b/pug/local-video.pug
index 64f9c99..f58aa70 100644
--- a/pug/local-video.pug
+++ b/pug/local-video.pug
@@ -11,6 +11,7 @@ block head
 block content
   main.video-error-page
     h2 Fetching video
-    p#status Waiting...
+    p (You can also #[a(href=`https://www.youtube.com/watch?v=${id}#cloudtube`) watch on YouTube], #[a(href="https://git.sr.ht/~cadence/tube-docs/tree/main/item/docs/newleaf/Installing%20NewLeaf.md") install NewLeaf], or just #[a(href="/settings") turn off local fetch.])
+    p#status.fetch-status Waiting...
     form(method="post")#form.local-video-form
       input(type="hidden" name="video")#video-data
diff --git a/pug/settings.pug b/pug/settings.pug
index 216c52a..80fda31 100644
--- a/pug/settings.pug
+++ b/pug/settings.pug
@@ -48,7 +48,7 @@ block content
         +select({
           id: "local",
           label: "Fetch videos from",
-          description: "If remote, the instance above will be used.\nIf local, CloudTube will try to connect to an instance running on your own computer. This can bypass blocks, but requires you to run the instance software.",
+          description: 'If remote, the instance above will be used.\nIf local, CloudTube will try to connect to an instance running on your own computer. This can bypass blocks, but requires you to run the instance software.\nIf you wish to use local mode, <a href="https://git.sr.ht/~cadence/tube-docs/tree/main/item/docs/newleaf/Installing%20NewLeaf.md">read how to install NewLeaf.</a>',
           options: [
             {value: "0", text: "Remote instance"},
             {value: "1", text: "Locally"}
diff --git a/sass/includes/video-page.sass b/sass/includes/video-page.sass
index bad0afd..76b6ea3 100644
--- a/sass/includes/video-page.sass
+++ b/sass/includes/video-page.sass
@@ -183,3 +183,6 @@
 
     border: solid black
     border-width: 2px 0px
+
+.fetch-status
+  white-space: pre-wrap