Add database and subscribe button

html/static/js/channel.js

@@ -0,0 +1,4 @@
+import {q} from "/static/js/elemjs/elemjs.js"
+import {SubscribeButton} from "/static/js/subscribe.js"
+
+new SubscribeButton(q("#subscribe"))

html/static/js/focus.js

@@ -1,3 +1,5 @@
+document.body.classList.remove("show-focus")
+
 document.addEventListener("mousedown", () => {
 	document.body.classList.remove("show-focus")
 })

html/static/js/player.js

@@ -1,4 +1,5 @@
 import {q, ElemJS} from "/static/js/elemjs/elemjs.js"
+import {SubscribeButton} from "/static/js/subscribe.js"
 
 const video = q("#video")
 const audio = q("#audio")
@@ -67,6 +68,7 @@ class QualitySelect extends ElemJS {
 	onInput() {
 		const itag = this.element.value
 		formatLoader.play(itag)
+		video.focus()
 	}
 }
 
@@ -118,3 +120,40 @@ for (let eventName of ["canplaythrough", "waiting", "stalled"]) {
 	video.addEventListener(eventName, playbackIntervention)
 	audio.addEventListener(eventName, playbackIntervention)
 }
+
+function relativeSeek(seconds) {
+	video.currentTime += seconds
+}
+
+function togglePlaying() {
+	if (video.paused) video.play()
+	else video.pause()
+}
+
+document.addEventListener("keydown", event => {
+	if (["INPUT", "SELECT", "BUTTON"].includes(event.target.tagName)) return
+	let caught = true
+	if (event.key === "j" || event.key === "n") {
+		relativeSeek(-10)
+	} else if (["k", "p", " ", "e"].includes(event.key)) {
+		togglePlaying()
+	} else if (event.key === "l" || event.key === "o") {
+		relativeSeek(10)
+	} else if (event.key === "ArrowLeft") {
+		relativeSeek(-5)
+	} else if (event.key === "ArrowRight") {
+		relativeSeek(5)
+	} else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+		// no-op
+	} else if (event.key >= "0" && event.key <= "9") {
+		video.currentTime = video.duration * (+event.key) / 10
+	} else if (event.key === "f") {
+		if (document.fullscreen) document.exitFullscreen()
+		else video.requestFullscreen()
+	} else {
+		caught = false
+	}
+	if (caught) event.preventDefault()
+})
+
+new SubscribeButton(q("#subscribe"))

html/static/js/subscribe.js

@@ -0,0 +1,28 @@
+import {ElemJS} from "/static/js/elemjs/elemjs.js"
+
+class SubscribeButton extends ElemJS {
+	constructor(element) {
+		super(element)
+		this.subscribed = this.element.getAttribute("data-subscribed") === "1"
+		this.ucid = this.element.getAttribute("data-ucid")
+		this.on("click", this.onClick.bind(this))
+		this.render()
+	}
+
+	onClick(event) {
+		event.preventDefault()
+		this.subscribed = !this.subscribed
+		const path = this.subscribed ? "subscribe" : "unsubscribe"
+		fetch(`/formapi/${path}/${this.ucid}`, {method: "POST"})
+		this.render()
+	}
+
+	render() {
+		if (!this.subscribed) this.text("Subscribe")
+		else this.text("Unsubscribe")
+	}
+}
+
+export {
+	SubscribeButton
+}