Highlight current chapter in video description

html/static/js/channel.js

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

html/static/js/chapter-highlight.js

@@ -0,0 +1,53 @@
+import {q, qa, ElemJS} from "./elemjs/elemjs.js"
+
+class Chapter {
+	constructor(linkElement) {
+		this.link = new ElemJS(linkElement)
+		this.time = +linkElement.getAttribute("data-clickable-timestamp")
+	}
+}
+
+let chapters = [...document.querySelectorAll("[data-clickable-timestamp]")].map(linkElement => new Chapter(linkElement))
+chapters.sort((a, b) => a.time - b.time)
+
+function getCurrentChapter(time) {
+	const candidates = chapters.filter(chapter => chapter.time <= time)
+	if (candidates.length > 0) {
+		return candidates[candidates.length - 1]
+	} else {
+		return null
+	}
+}
+
+const video = q("#video")
+const description = q("#description")
+const regularBackground = "var(--regular-background)"
+const highlightBackground = "var(--highlight-background)"
+const paddingWidth = 4
+let lastChapter = null
+setInterval(() => {
+	const currentChapter = getCurrentChapter(video.currentTime)
+
+	if (currentChapter !== lastChapter) {
+		// Style link
+		if (lastChapter) {
+			lastChapter.link.removeClass("timestamp--active")
+		}
+		if (currentChapter) {
+			currentChapter.link.class("timestamp--active")
+		}
+		// Style background
+		if (currentChapter) {
+			const {offsetTop, offsetHeight} = currentChapter.link.element;
+			const offsetBottom = offsetTop + offsetHeight
+			let gradient = `linear-gradient(to bottom,`
+				+ ` ${regularBackground} ${offsetTop - paddingWidth}px, ${highlightBackground} ${offsetTop - paddingWidth}px,`
+				+ ` ${highlightBackground} ${offsetBottom + paddingWidth}px, ${regularBackground} ${offsetBottom + paddingWidth}px)`
+			console.log(gradient)
+			description.style.background = gradient
+		} else {
+			description.style.background = ""
+		}
+	}
+	lastChapter = currentChapter
+}, 1000)

html/static/js/player.js

@@ -1,5 +1,5 @@
 import {q, qa, ElemJS} from "/static/js/elemjs/elemjs.js"
-import {SubscribeButton} from "/static/js/subscribe.js"
+import {SubscribeButton} from "/static/js/modules/SubscribeButton.js"
 
 const video = q("#video")
 const audio = q("#audio")

html/static/js/subscriptions.js

@@ -1,5 +1,5 @@
 import {qa} from "/static/js/elemjs/elemjs.js"
-import {MarkWatchedButton} from "/static/js/mark-watched.js"
+import {MarkWatchedButton} from "/static/js/modules/MarkWatchedButton.js"
 
 for (const button of qa(".mark-watched__button")) {
 	new MarkWatchedButton(button)