diff options
| -rw-r--r-- | static/index.js | 6 | ||||
| -rw-r--r-- | static/style.css | 15 | ||||
| -rw-r--r-- | templates/index.html | 6 | ||||
| -rw-r--r-- | templates/watch.html | 11 |
4 files changed, 9 insertions, 29 deletions
diff --git a/static/index.js b/static/index.js index 0213a18..b852619 100644 --- a/static/index.js +++ b/static/index.js @@ -1,15 +1,9 @@ /* 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() { diff --git a/static/style.css b/static/style.css index efc90b0..f3c4065 100644 --- a/static/style.css +++ b/static/style.css @@ -1,8 +1,7 @@ html { background: #000; color: #fff } body { margin: 0; font-family: sans-serif } -a { color: lightblue } - -#index { max-width: 800px; margin: auto } +main { max-width: 1000px } +a { color: cornflowerblue } #player { display: block; @@ -12,14 +11,4 @@ a { color: lightblue } box-sizing: border-box; } -#title-bar { - display: flex; - align-items: center; - gap: .25rem; - - #title { flex-grow: 1 } -} - -#details, #comments { max-width: 1000px } - .comment .replies { margin-left: 2rem } diff --git a/templates/index.html b/templates/index.html index 0d64803..164a810 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,5 +1,5 @@ {{ define "content" }} - <div id="index"> - {{ .Content }} - </div> +<main> + {{ .Content }} +</main> {{ end }} diff --git a/templates/watch.html b/templates/watch.html index 89ba0e6..07600de 100644 --- a/templates/watch.html +++ b/templates/watch.html @@ -14,15 +14,12 @@ > </iframe> <main> - <div id="title-bar"> - <h1 id="title"></h1> - <label>Rate: <select id="pb-rate"></select></label> - <button id="toggle-details">Show Details</button> - </div> + <h1 id="title"></h1> + <button id="toggle-details">Show Details</button> <div id="details" style="display:none"> <span><a id="details-channel"></a> @ <span id="details-date"></span></span><br> - <span><span id="details-views"></span> Views => 👍 <span id="details-likes"></span> => <span id="details-comments"></span> Comments</span><br> - <span id="details-desc">No description has been added to this video.</span><br> + <span><span id="details-views"></span> Views => 👍 <span id="details-likes"></span> => <span id="details-comments"></span> Comments</span><br><br> + <div id="details-desc">No description has been added to this video.</div> <h4>Tags:</h4> <div id="details-tags"></div> </div> |