simplify css and refactor

1 files changed, 21 insertions, 13 deletions

diff --git a/static/index.js b/static/index.js
index 7f02f7b..0213a18 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,9 +1,15 @@
 /* setup player */
 let player
 const titleBar = document.getElementById("title")
+const playbackRate = document.getElementById("pb-rate")
 
 function onPlayerReady(_e) {
 	document.title = titleBar.textContent = player.videoTitle
+	player.getAvailablePlaybackRates()
+		.forEach(r => playbackRate.options.add(
+			new Option(`${r}x`, r, false, r == player.getPlaybackRate())
+		))
+	playbackRate.addEventListener("change", e => player.setPlaybackRate(parseFloat(e.target.value)))
 }
 
 function onYouTubeIframeAPIReady() {
@@ -16,7 +22,7 @@ function onYouTubeIframeAPIReady() {
 }
 
 /* helpers */
-function getApiReq(path) {
+async function getApiReq(path) {
 	return fetch("/api" + path)
 		.then(async res => {
 			if (!res.ok) {
@@ -33,9 +39,8 @@ function getApiReq(path) {
 		})
 }
 
-function toggleVis(e) {
-	e.style.display = e.style.display ? null : "none"
-	//window.location.hash = e.id && !e.style.display ? e.id : ""
+function toggleVis(el) {
+	el.style.display = el.style.display ? null : "none"
 }
 
 function createAnchors(text) {
@@ -75,12 +80,13 @@ async function toggleDetails() {
 		return
 	}
 	// elements
-	const channel = document.getElementById("details-channel")
-	const likes   = document.getElementById("details-likes")
-	const views   = document.getElementById("details-views")
-	const date    = document.getElementById("details-date")
-	const desc    = document.getElementById("details-desc")
-	const tags    = document.getElementById("details-tags")
+	const channel  = document.getElementById("details-channel")
+	const likes    = document.getElementById("details-likes")
+	const views    = document.getElementById("details-views")
+	const date     = document.getElementById("details-date")
+	const desc     = document.getElementById("details-desc")
+	const tags     = document.getElementById("details-tags")
+	const comments = document.getElementById("details-comments")
 
 	// req
 	const d = (await getApiReq(`/details?id=${player.playerInfo.videoData.video_id}`)).items[0]
@@ -88,8 +94,9 @@ async function toggleDetails() {
 	// populate
 	channel.textContent = d.snippet.channelTitle
 	channel.href = `https://www.youtube.com/channel/${d.snippet.channelId}`
-	views.textContent = new Intl.NumberFormat().format(d.statistics.viewCount)
-	likes.textContent = new Intl.NumberFormat().format(d.statistics.likeCount)
+	views.textContent    = new Intl.NumberFormat().format(d.statistics.viewCount)
+	likes.textContent    = new Intl.NumberFormat().format(d.statistics.likeCount)
+	comments.textContent = new Intl.NumberFormat().format(d.statistics.commentCount)
 	date.textContent = d.snippet.publishedAt
 	if (d.snippet.description)
 		desc.innerHTML = createAnchors(d.snippet.description.replaceAll("\n", "<br>"))
@@ -121,7 +128,7 @@ function genComment(cd, parent, replies) {
 	if (cd.publishedAt === cd.updatedAt)
 		dateM.remove()
 	else
-		dateM.textContent = `(Modified ${cd.updatedAt})`
+		dateM.textContent = `(Edited ${cd.updatedAt})`
 	body.innerHTML = cd.textDisplay
 	likes.textContent = new Intl.NumberFormat().format(cd.likeCount)
 
@@ -177,6 +184,7 @@ function timestampLinkClick(e) {
 	if (!t)
 		return
 	player.seekTo(t)
+	window.history.replaceState({}, "", url) /* reflect time in url bar */
 }
 
 document.addEventListener("click", timestampLinkClick)