diff options
| -rw-r--r-- | static/index.js | 34 | ||||
| -rw-r--r-- | static/style.css | 72 | ||||
| -rw-r--r-- | templates/watch.html | 15 |
3 files changed, 41 insertions, 80 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) diff --git a/static/style.css b/static/style.css index 6159f5c..580388e 100644 --- a/static/style.css +++ b/static/style.css @@ -1,76 +1,26 @@ -html { - background: #000; - color: #fff; -} - -body { - margin: 0; -} - -body, pre { - font-family: "Roboto", sans-serif; -} +html { background: #000; color: #fff } +body { margin: 0; font-family: sans-serif } +a { color: lightblue } -#index { - max-width: 800px; - margin: auto; -} +#index { max-width: 800px; margin: auto } #player { display: block; width: 100vw; height: 90vh; max-height: 80vw; - margin: 1rem auto; box-sizing: border-box; } -#title { +#title-bar { + display: flex; + align-items: center; + gap: .25rem; margin: .5rem; -} - -button { - margin: .5rem; - background: #222; - color: #fff; - cursor: pointer; - border: 0; - border-radius: .25rem; - padding: .5rem; -} -#details, #comments { - padding: 0 1rem; + #title { flex-grow: 1 } } -#comments { - max-width: 1000px; -} - -.replies { - margin-left: 2rem; -} - -a { - color: lightblue; -} +#details, #comments { padding: 0 1rem; max-width: 1000px } -.comment { - background: #191919; - border-radius: .25rem; - margin: .5rem 0; - padding: .5rem; -} -.comment .author { - text-decoration: none; -} -.comment .date { - color: #aaa; - font-size-adjust: .4; -} -.comment .body { - margin-left: .5rem; -} -.replies .comment { - background: #ffffff0a -} +.comment .replies { margin-left: 2rem } diff --git a/templates/watch.html b/templates/watch.html index 6cda0df..e05eef8 100644 --- a/templates/watch.html +++ b/templates/watch.html @@ -13,14 +13,16 @@ allowfullscreen > </iframe> -<h1 id="title"></h1> -<button id="toggle-details">Show Details</button> +<div id="title-bar"> + <h1 id="title"></h1> + <label>Rate: <select id="pb-rate"></select></label> + <button id="toggle-details">Show Details</button> +</div> <div id="details" style="display:none"> - <span><a id="details-channel"></a>   👍 <span id="details-likes"></span></span> + <span><a id="details-channel"></a> @ <span id="details-date"></span></span> <br> - <span><span id="details-views"></span> Views   <span id="details-date"></span></span> + <span><span id="details-views"></span> Views => 👍 <span id="details-likes"></span> => <span id="details-comments"></span> Comments</span> <br> - <h3>Description:</h3> <span id="details-desc">No description has been added to this video.</span> <br> <h4>Tags:</h4> @@ -30,9 +32,10 @@ <div id="comments" style="display:none"> <h3>Comments:</h3> <template id="template-comment"> + <hr> <div class="comment"> <a class="author"></a> - <span class="date"></span> + <span>@ <span class="date"></span></span> <span class="date modified"></span> <div class="body"></div> <span>👍 <span class="likes"></span></span> |