~cadence/cloudtube

539260c8de5b7d0ad8ac7c8a025a0ff395b44245 — Cadence Ember 3 months ago 83c34f7
Improve documentation and errors around local mode
4 files changed, 37 insertions(+), 7 deletions(-)

M html/static/js/local-video.js
M pug/local-video.pug
M pug/settings.pug
M sass/includes/video-page.sass
M html/static/js/local-video.js => html/static/js/local-video.js +31 -5
@@ 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)
	}
})

M pug/local-video.pug => pug/local-video.pug +2 -1
@@ 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

M pug/settings.pug => pug/settings.pug +1 -1
@@ 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"}

M sass/includes/video-page.sass => sass/includes/video-page.sass +3 -0
@@ 183,3 183,6 @@

    border: solid black
    border-width: 2px 0px

.fetch-status
  white-space: pre-wrap