diff options
Diffstat (limited to 'static/index.js')
| -rw-r--r-- | static/index.js | 34 |
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) |